Mooeypoo has uploaded a new change for review. https://gerrit.wikimedia.org/r/86985
Change subject: [WIP] Migrating LanguageInspector to ve-MW ...................................................................... [WIP] Migrating LanguageInspector to ve-MW Moving the ULS-dependent language inspector to ve-MW with a simple widget fallback in ve core. Change-Id: I48effffaa63a65ed643969bf0975dfe7505edd22 --- M VisualEditor.php A modules/ve-mw/ui/inspectors/ve.ui.MWLanguageInspector.js A modules/ve-mw/ui/widgets/ve.ui.MWLanguageInputWidget.js M modules/ve/ui/inspectors/ve.ui.LanguageInspector.js M modules/ve/ui/widgets/ve.ui.LanguageInputWidget.js 5 files changed, 250 insertions(+), 78 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor refs/changes/85/86985/1 diff --git a/VisualEditor.php b/VisualEditor.php index 25c1d28..da34999 100644 --- a/VisualEditor.php +++ b/VisualEditor.php @@ -715,6 +715,8 @@ 've/ui/widgets/ve.ui.LanguageInputWidget.js', 've/ui/tools/ve.ui.ExperimentalTool.js', 've-mw/ui/tools/ve.ui.MWExperimentalTool.js', + 've-mw/ui/inspectors/ve.ui.MWLanguageInspector.js', + 've-mw/ui/widgets/ve.ui.MWLanguageInputWidget.js' ), 'dependencies' => array( 'ext.visualEditor.core', diff --git a/modules/ve-mw/ui/inspectors/ve.ui.MWLanguageInspector.js b/modules/ve-mw/ui/inspectors/ve.ui.MWLanguageInspector.js new file mode 100644 index 0000000..2701b2c --- /dev/null +++ b/modules/ve-mw/ui/inspectors/ve.ui.MWLanguageInspector.js @@ -0,0 +1,64 @@ +/*! + * VisualEditor UserInterface LanguageInspector class. + * + * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/** + * MWLanguage inspector. + * + * @class + * @extends ve.ui.LanguageInspector + * + * @constructor + * @param {ve.ui.Surface} surface + * @param {Object} [config] Configuration options + */ +ve.ui.MWLanguageInspector = function VeUiMWLanguageInspector( surface, config ) { + // Parent constructor + ve.ui.LanguageInspector.call( this, surface, config ); +}; + +/* Inheritance */ + +ve.inheritClass( ve.ui.MWLanguageInspector, ve.ui.LanguageInspector ); + +/* Static properties */ + +ve.ui.MWLanguageInspector.static.languageInputWidget = ve.ui.MWLanguageInputWidget; + +/* Methods */ + +/** + * Validates and sets the annotation value + * Then updates the attributes and the widget table display + * + * @method + * @param {ve.dm.LanguageAnnotation} annotation Language annotation + * @chainable + */ +ve.ui.MWLanguageInspector.prototype.setAnnotation = function ( annotation ) { + var langAttrs; + + // Parent method + ve.ui.LanguageInspector.prototype.setAnnotation.call( this, annotation ); + + langAttrs = this.annotation.getAttributes(); + + if ( langAttrs.lang && !langAttrs.dir ) { + langAttrs.dir = $.uls.data.getDir( langAttrs.lang ); + // Set the new annotation: + this.annotation = new ve.dm.LanguageAnnotation( { + 'type': 'meta/language', + 'attributes': langAttrs + } ); + } + + return this; +}; + + +/* Registration */ + +ve.ui.inspectorFactory.register( ve.ui.MWLanguageInspector ); diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWLanguageInputWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWLanguageInputWidget.js new file mode 100644 index 0000000..7289075 --- /dev/null +++ b/modules/ve-mw/ui/widgets/ve.ui.MWLanguageInputWidget.js @@ -0,0 +1,125 @@ +/*! + * VisualEditor UserInterface LanguageInputWidget class. + * + * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/** + * Creates an ve.ui.MWLanguageInputWidget object. + * + * @class + * @extends ve.ui.LanguageInputWidget + * + * @constructor + * @param {Object} [config] Configuration options + */ +ve.ui.MWLanguageInputWidget = function VeUiMWLanguageInputWidget( config ) { + // Parent constructor + ve.ui.LanguageInputWidget.call( this, config ); +}; + +/* Inheritance */ + +ve.inheritClass( ve.ui.MWLanguageInputWidget, ve.ui.LanguageInputWidget ); + +/* Static properties */ + +/* Methods */ + +/** + * Build the visual widget html content + * + * use: + * - this.$langNameDisp for language display name (example: English) + * - this.$langCodeDisp for language code (example: en) + * - this.$dirDisp for language direction (example: ltr) + */ +ve.ui.MWLanguageInputWidget.prototype.buildWidget = function() { + var table, ulsParams, langInpObj; + + // Create the informational table: + table = $( '<table>' ).css( { 'width': '100%' } ) + .addClass( 've-LanguageInspector-information' ) + .append( $( '<tr>' ) + .append( $( '<td>' ) + .addClass( 've-ui-LanguageInspector-info-title' ) + .text( ve.msg( 'visualeditor-languageinspector-widget-label-language' ) ) ) + .append( $( '<td>' ) + .addClass( 've-ui-LanguageInspector-info-langname' ) + .append( this.$langNameDisp ) ) ) + .append( $( '<tr>' ) + .append( $( '<td>' ) + .addClass( 've-ui-LanguageInspector-info-title' ) + .text( ve.msg( 'visualeditor-languageinspector-widget-label-langcode' ) ) ) + .append( $( '<td>' ) + .addClass( 've-ui-LanguageInspector-info-langcode' ) + .append( this.$langCodeDisp ) ) ) + .append( $( '<tr>' ) + .append( $( '<td>' ) + .addClass( 've-ui-LanguageInspector-info-title' ) + .text( ve.msg( 'visualeditor-languageinspector-widget-label-direction' ) ) ) + .append( $( '<td>' ) + .addClass( 've-ui-LanguageInspector-info-dir' ) + .append( this.$dirDisp ) ) ); + + // Use a different reference than 'this' to avoid scope problems + // inside the $.ULS callback: + langInpObj = this; + + ulsParams = { + onSelect: function( language ) { + // Save the attributes: + langInpObj.setAttributes( language, $.uls.data.getDir( language ) ); + }, + compact: true, + // Temporary Quicklist for the Prototype: + // (This will likely change once we find a better list) + quickList: [ 'en', 'hi', 'he', 'ml', 'ta', 'fr' ] + }; + + // Create a 'change language' Button: + this.$button = new ve.ui.ButtonWidget({ + 'label': ve.msg( 'visualeditor-languageinspector-widget-changelang' ), + 'flags': ['primary'] + }); + + // Attach ULS event call + this.$button.$.uls( ulsParams ); + + this.$.append( table ); + this.$.append( this.$button.$ ); + + return this; +}; + +/** + * Get the language value of the current annotation + * This is required by the AnnotationInspector onClose method + */ +ve.ui.MWLanguageInputWidget.prototype.getValue = function () { + // Specifically to be displayed + return this.$langNameDisp.text(); +}; + +/** + * Updates the language value in the display table + * + * This shouldn't be used directly. It is called from the + * setAttributes method after receiving annotation details + * to make sure the annotation and the table are synchronized. + * + * @method + */ +ve.ui.MWLanguageInputWidget.prototype.updateLanguageView = function () { + var langNameDisp = ''; + + if ( this.lang ) { + langNameDisp = $.uls.data.getAutonym( this.lang ); + } + + // Display the information in the table: + this.$langCodeDisp.html( this.lang ); + this.$langNameDisp.html( langNameDisp ); + this.$dirDisp.html( this.dir ); +}; diff --git a/modules/ve/ui/inspectors/ve.ui.LanguageInspector.js b/modules/ve/ui/inspectors/ve.ui.LanguageInspector.js index eb25092..1b9d9a4 100644 --- a/modules/ve/ui/inspectors/ve.ui.LanguageInspector.js +++ b/modules/ve/ui/inspectors/ve.ui.LanguageInspector.js @@ -39,6 +39,7 @@ ve.ui.LanguageInspector.static.titleMessage = 'visualeditor-languageinspector-title'; +ve.ui.LanguageInspector.static.languageInputWidget = ve.ui.LanguageInputWidget; /** * Annotation models this inspector can edit. * @@ -59,7 +60,7 @@ ve.ui.AnnotationInspector.prototype.initialize.call( this ); // Properties - this.targetInput = new ve.ui.LanguageInputWidget( { + this.targetInput = new this.constructor.static.languageInputWidget( { '$$': this.frame.$$, '$overlay': this.surface.$localOverlay } ); @@ -163,12 +164,6 @@ // No annotation (empty text or collapsed fragment on empty line) langCode = this.lang; langDir = this.dir; - } - - // If language exists, but dir is undefined/null, - // fix the dir in terms of language: - if ( langCode && !langDir && $.uls ) { - langDir = $.uls.data.getDir( langCode ); } // Set the annotation data: diff --git a/modules/ve/ui/widgets/ve.ui.LanguageInputWidget.js b/modules/ve/ui/widgets/ve.ui.LanguageInputWidget.js index a1cfb6d..c79cb89 100644 --- a/modules/ve/ui/widgets/ve.ui.LanguageInputWidget.js +++ b/modules/ve/ui/widgets/ve.ui.LanguageInputWidget.js @@ -15,83 +15,76 @@ * @param {Object} [config] Configuration options */ ve.ui.LanguageInputWidget = function VeUiLanguageInputWidget( config ) { - var ulsParams, langInpObj, table; // Parent constructor ve.ui.Widget.call( this, config ); - - // Visual Properties - this.$langCodeDisp = this.getDisplayElement( config ); // language code - this.$langNameDisp = this.getDisplayElement( config ); // human-readable language name - this.$dirDisp = this.getDisplayElement( config ); // Placeholders for attribute values this.lang = ''; this.dir = ''; - // Create the informational table: - table = $( '<table>' ).css( { 'width': '100%' } ) - .addClass( 've-LanguageInspector-information' ) - .append( $( '<tr>' ) - .append( $( '<td>' ) - .addClass( 've-ui-LanguageInspector-info-title' ) - .text( ve.msg( 'visualeditor-languageinspector-widget-label-language' ) ) ) - .append( $( '<td>' ) - .addClass( 've-ui-LanguageInspector-info-langname' ) - .append( this.$langNameDisp ) ) ) - .append( $( '<tr>' ) - .append( $( '<td>' ) - .addClass( 've-ui-LanguageInspector-info-title' ) - .text( ve.msg( 'visualeditor-languageinspector-widget-label-langcode' ) ) ) - .append( $( '<td>' ) - .addClass( 've-ui-LanguageInspector-info-langcode' ) - .append( this.$langCodeDisp ) ) ) - .append( $( '<tr>' ) - .append( $( '<td>' ) - .addClass( 've-ui-LanguageInspector-info-title' ) - .text( ve.msg( 'visualeditor-languageinspector-widget-label-direction' ) ) ) - .append( $( '<td>' ) - .addClass( 've-ui-LanguageInspector-info-dir' ) - .append( this.$dirDisp ) ) ); - this.$.append( table ); - - // Use a different reference than 'this' to avoid scope problems - // inside the $.ULS callback: - langInpObj = this; - // Initialization this.$.addClass( 've-ui-LangInputWidget' ); - ulsParams = { - onSelect: function( language ) { - // Save the attributes: - langInpObj.setAttributes( language, $.uls.data.getDir( language ) ); - }, - compact: true, - // Temporary Quicklist for the Prototype: - // (This will likely change once we find a better list) - quickList: [ 'en', 'hi', 'he', 'ml', 'ta', 'fr' ] - }; - - // Create a 'change language' Button: - this.$button = new ve.ui.ButtonWidget({ - 'label': ve.msg( 'visualeditor-languageinspector-widget-changelang' ), - 'flags': ['primary'] - }); - - // Attach ULS event call - this.$button.$.uls( ulsParams ); - - this.$.append( this.$button.$ ); + // Create GUI: + this.buildWidget(); }; /* Inheritance */ ve.inheritClass( ve.ui.LanguageInputWidget, ve.ui.Widget ); -/* Static properties */ - /* Methods */ + +/** + * Build the visual widget html content + * + * uses: + * - this.$langCodeDisp for language code (example: en) + * - this.$dirDisp for language direction (example: ltr) + */ +ve.ui.LanguageInputWidget.prototype.buildWidget = function() { + var content; + + // Visual Properties + this.$langCodeDisp = this.$$( '<input>' ) // language code + .attr( 'name', 've-LanguageInspector-input-LangCode' ); + this.$dirDisp = this.$$( '<select>' ).attr( 'name', 've-LanguageInspector-input-LangDir' ); + + // build the direction selection: + this.$dirDisp + .append( $( '<option>' ).val( 'ltr' ).text( 'LTR' ) ) + .append( $( '<option>' ).val( 'rtl' ).text( 'RTL' ) ); + + content = $( '<div>' ) + .addClass( 've-LanguageInspector-information' ) + .append( $( '<label>' ) + .attr( 'for', 've-LanguageInspector-input-LangCode' ) + .text( ve.msg( 'visualeditor-languageinspector-widget-label-langcode' ) ) + ) + .append( this.$langCodeDisp ) + .append( '<br />' ) + .append( $( '<label>' ) + .attr( 'for', 've-LanguageInspector-input-LangDir' ) + .text( ve.msg( 'visualeditor-languageinspector-widget-label-direction' ) ) + ) + .append( this.$dirDisp ); + + this.$langCodeDisp.on( 'change', ve.bind( this.onChangeLanguageAttributes, this ) ); + this.$dirDisp.on( 'change', ve.bind( this.onChangeLanguageAttributes, this ) ); + + this.$.append( content ); + + return this; +}; + +/** + * Respond to changing the language attribute changes + */ +ve.ui.LanguageInputWidget.prototype.onChangeLanguageAttributes = function() { + this.lang = this.$langCodeDisp.val(); + this.dir = this.$dirDisp.val(); +}; /** * Get display element. This replaces the 'getInputElement' @@ -124,7 +117,7 @@ this.lang = lang; this.dir = dir; // Update the view: - this.updateLanguageTable(); + this.updateLanguageView(); }; /** @@ -133,7 +126,7 @@ */ ve.ui.LanguageInputWidget.prototype.getValue = function () { // Specifically to be displayed - return this.$langNameDisp.text(); + return this.$langCodeDisp.val(); }; /** @@ -145,15 +138,8 @@ * * @method */ -ve.ui.LanguageInputWidget.prototype.updateLanguageTable = function () { - var langNameDisp = ''; - - if ( this.lang ) { - langNameDisp = $.uls.data.getAutonym( this.lang ); - } - +ve.ui.LanguageInputWidget.prototype.updateLanguageView = function () { // Display the information in the table: - this.$langCodeDisp.html( this.lang ); - this.$langNameDisp.html( langNameDisp ); - this.$dirDisp.html( this.dir ); + this.$langCodeDisp.val( this.lang ); + this.$dirDisp.val( this.dir ); }; -- To view, visit https://gerrit.wikimedia.org/r/86985 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I48effffaa63a65ed643969bf0975dfe7505edd22 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/VisualEditor Gerrit-Branch: master Gerrit-Owner: Mooeypoo <mor...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits