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 <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
