Divec has uploaded a new change for review.
https://gerrit.wikimedia.org/r/279747
Change subject: WIP DONTMERGE: integrate jquery.ime UI
......................................................................
WIP DONTMERGE: integrate jquery.ime UI
TODO:
- Fix the UI
- Improve jquery.ime dependency situation
Bug: T126125
Change-Id: I92e5142d5b0a56c346a7d010ad3d8c4206a4e2ce
---
M extension.json
M modules/ve-mw/init/ve.init.mw.Target.js
A modules/ve-mw/ui/dialogs/ve.ui.MWImeDialog.js
A modules/ve-mw/ui/dialogs/ve.ui.MWInputMethodDialog.js
A modules/ve-mw/ui/styles/dialogs/ve.ui.MWImeDialog.css
A modules/ve-mw/ui/styles/dialogs/ve.ui.MWInputMethodDialog.css
A modules/ve-mw/ui/tools/ve.ui.MWImeDialogTool.js
M modules/ve-mw/ui/ve.ui.MWCommandRegistry.js
8 files changed, 349 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/47/279747/1
diff --git a/extension.json b/extension.json
index 459d15e..58153a4 100644
--- a/extension.json
+++ b/extension.json
@@ -1083,6 +1083,8 @@
"modules/ve-mw/ui/widgets/ve.ui.MWTocWidget.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWExtensionDialog.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWExtensionPreviewDialog.js",
+ "modules/ve-mw/ui/dialogs/ve.ui.MWImeDialog.js",
+
"modules/ve-mw/ui/dialogs/ve.ui.MWInputMethodDialog.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWSaveDialog.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWWelcomeDialog.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWCommandHelpDialog.js",
@@ -1092,6 +1094,7 @@
"modules/ve-mw/ui/elements/ve.ui.MWExpandableErrorElement.js",
"modules/ve-mw/ui/elements/ve.ui.MWPreviewElement.js",
"modules/ve-mw/ui/tools/ve.ui.MWEditModeTool.js",
+
"modules/ve-mw/ui/tools/ve.ui.MWImeDialogTool.js",
"modules/ve-mw/ui/tools/ve.ui.MWPopupTool.js",
"modules/ve-mw/ui/inspectors/ve.ui.MWExtensionInspector.js",
"modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js",
@@ -1101,6 +1104,8 @@
"styles": [
"modules/ve-mw/ui/styles/inspectors/ve.ui.MWExtensionInspector.css",
"modules/ve-mw/ui/styles/inspectors/ve.ui.MWLiveExtensionInspector.css",
+
"modules/ve-mw/ui/styles/dialogs/ve.ui.MWImeDialog.css",
+
"modules/ve-mw/ui/styles/dialogs/ve.ui.MWInputMethodDialog.css",
"modules/ve-mw/ui/styles/dialogs/ve.ui.MWWelcomeDialog.css",
"modules/ve-mw/ui/styles/dialogs/ve.ui.MWSaveDialog.css",
"modules/ve-mw/ui/styles/elements/ve.ui.MWExpandableErrorElement.css",
@@ -1126,6 +1131,7 @@
"mediawiki.jqueryMsg",
"jquery.cookie",
"jquery.byteLimit",
+ "jquery.ime",
"mediawiki.skinning.content.parsoid",
"mediawiki.widgets",
"ext.visualEditor.switching"
diff --git a/modules/ve-mw/init/ve.init.mw.Target.js
b/modules/ve-mw/init/ve.init.mw.Target.js
index 491357b..7d3a2f3 100644
--- a/modules/ve-mw/init/ve.init.mw.Target.js
+++ b/modules/ve-mw/init/ve.init.mw.Target.js
@@ -80,7 +80,15 @@
promote: [ 'media', 'transclusion', 'insertTable' ]
},
// SpecialCharacter
- { include: [ 'specialCharacter' ] }
+ { include: [ 'specialCharacter' ] },
+ // IME toolbar
+ {
+ classes: [ 've-test-toolbar-ime' ],
+ indicator: 'down',
+ title: OO.ui.deferMsg( 'visualeditor-toolbar-ime-tooltip' ),
+ include: [ 'mwIme' ],
+ icon: 'listBullet'
+ }
];
ve.init.mw.Target.static.importRules = {
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWImeDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWImeDialog.js
new file mode 100644
index 0000000..8739594
--- /dev/null
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWImeDialog.js
@@ -0,0 +1,185 @@
+/*!
+ * VisualEditor UserInterface MWImeDialog class.
+ *
+ * @copyright 2011-2016 VisualEditor Team and others; see
http://ve.mit-license.org
+ */
+
+/**
+ * IME dialog
+ *
+ * @class
+ * @extends ve.ui.ToolbarDialog
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWImeDialog = function VeUiMWImeDialog( config ) {
+ // Parent constructor
+ ve.ui.MWImeDialog.super.call( this, config );
+
+ // Pre-initialization
+ this.$element.addClass( 've-ui-mwImeDialog' );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWImeDialog, ve.ui.ToolbarDialog );
+
+ve.ui.MWImeDialog.static.name = 'mwIme';
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWImeDialog.prototype.initialize = function () {
+ var languageLabel, methodLabel, closeButton;
+
+ // Parent method
+ ve.ui.MWImeDialog.super.prototype.initialize.call( this );
+
+ // Properties
+ this.surface = null;
+ this.dialogs = null;
+
+ languageLabel = new OO.ui.LabelWidget( {
+ classes: [ 've-ui-mwImeDialog-cell
ve-ui-mwImeDialog-languageLabel' ],
+ label: ve.msg(
'visualeditor-imedialog-widget-label-inputlanguage' )
+ } );
+ this.chooseLanguageButton = new OO.ui.ButtonWidget( {
+ classes: [ 've-ui-mwImeDialog-cell
ve-ui-mwImeDialog-chooseLanguageButton' ],
+ label: ve.msg( 'visualeditor-imedialog-widget-chooselanguage' ),
+ indicator: 'next'
+ } );
+ methodLabel = new OO.ui.LabelWidget( {
+ classes: [ 've-ui-mwImeDialog-cell
ve-ui-mwImeDialog-methodLabel' ],
+ label: ve.msg(
'visualeditor-imedialog-widget-label-inputmethod' )
+ } );
+ this.chooseMethodButton = new OO.ui.ButtonWidget( {
+ classes: [ 've-ui-mwImeDialog-cell
ve-ui-mwImeDialog-chooseMethodButton' ],
+ label: ve.msg( 'visualeditor-imedialog-widget-choosemethod' ),
+ indicator: 'next'
+ } );
+ closeButton = new OO.ui.ButtonWidget( {
+ classes: [ 've-ui-mwImeDialog-cell
ve-ui-mwImeDialog-closeButton' ],
+ label: ve.msg( 'visualeditor-imedialog-widget-button-close' )
+ } );
+
+ // Events
+ this.chooseLanguageButton.connect( this, { click:
'onFindLanguageButtonClick' } );
+ this.chooseMethodButton.connect( this, { click:
'onChooseMethodButtonClick' } );
+ closeButton.connect( this, { click: 'close' } );
+
+ // Initialization
+ this.$body.append(
+ $( '<div>' ).addClass( 've-ui-mwImeDialog-row' )
+ .append(
+ languageLabel.$element,
+ this.chooseLanguageButton.$element,
+ methodLabel.$element,
+ this.chooseMethodButton.$element,
+ closeButton.$element
+ )
+ );
+};
+
+ve.ui.MWImeDialog.prototype.onFindLanguageButtonClick = function () {
+ var imeDialog = this;
+ this.dialogs.openWindow(
+ 'languageSearch',
+ { availableLanguages: this.ime.getLanguageCodes() }
+ ).then( function ( opened ) {
+ opened.then( function ( closing ) {
+ closing.then( function ( data ) {
+ data = data || {};
+ if ( data.action === 'apply' ) {
+ imeDialog.setLangCode( data.lang );
+ }
+ } );
+ } );
+ } );
+};
+
+ve.ui.MWImeDialog.prototype.setLangCode = function ( lang ) {
+ var imeDialog = this;
+ this.ime.setLanguage( lang );
+ imeDialog.onChooseMethodButtonClick();
+};
+
+ve.ui.MWImeDialog.prototype.onChooseMethodButtonClick = function () {
+ var imeDialog = this,
+ inputMethods = this.ime.getInputMethods( this.ime.getLanguage()
);
+ this.dialogs.openWindow(
+ 'mwInputMethods',
+ { inputMethods: inputMethods }
+ ).then( function ( opened ) {
+ opened.then( function ( closing ) {
+ closing.then( function ( data ) {
+ data = data || {};
+ if ( data.action === 'apply' ) {
+ imeDialog.ime.load( data.id ).done(
function () {
+ imeDialog.ime.setIM( data.id );
+ } );
+ }
+ } );
+ } );
+ } );
+};
+
+ve.ui.MWImeDialog.prototype.onImeLanguageChange = function () {
+ var lang = this.ime.getLanguage();
+ if ( lang ) {
+ this.chooseLanguageButton.setLabel( this.ime.getAutonym( lang )
);
+ this.chooseMethodButton.setDisabled( false );
+ } else {
+ this.chooseLanguageButton.setLabel(
+ ve.msg( 'visualeditor-imedialog-widget-chooselanguage' )
+ );
+ this.chooseMethodButton.setDisabled( true );
+ }
+ this.onImeMethodChange();
+};
+
+ve.ui.MWImeDialog.prototype.onImeMethodChange = function () {
+ var inputMethod = this.ime.getIM();
+ this.chooseMethodButton.setLabel(
+ inputMethod ?
+ this.ime.getInputMethodName( inputMethod.id ) :
+ ve.msg( 'visualeditor-imedialog-widget-choosemethod' )
+ );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWImeDialog.prototype.getSetupProcess = function ( data ) {
+ var imeDialog = this;
+ data = data || {};
+ return ve.ui.MWImeDialog.super.prototype.getSetupProcess.call( this,
data )
+ .first( function () {
+ this.surface = data.surface;
+ this.dialogs = this.surface.getDialogs();
+ this.$doc =
this.surface.view.documentView.getDocumentNode().$element;
+ this.ime = this.$doc.data( 'ime' );
+ this.$doc.on( 'imeLanguageChange',
imeDialog.onImeLanguageChange.bind( imeDialog ) );
+ this.$doc.on( 'imeMethodChange',
imeDialog.onImeMethodChange.bind( imeDialog ) );
+ imeDialog.onImeLanguageChange();
+ imeDialog.onImeMethodChange();
+ this.ime.enable();
+ }, this );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWImeDialog.prototype.getTeardownProcess = function ( data ) {
+ // Cannot use this.ime.disable(), because it unsets the IM
+ this.ime.toggle();
+ this.$element.off( 'imeMethodChange' );
+ this.$element.off( 'imeLanguageChange' );
+ return ve.ui.MWImeDialog.super.prototype.getTeardownProcess.call( this,
data );
+};
+
+/* Registration */
+
+ve.ui.windowFactory.register( ve.ui.MWImeDialog );
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWInputMethodDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWInputMethodDialog.js
new file mode 100644
index 0000000..98419c3
--- /dev/null
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWInputMethodDialog.js
@@ -0,0 +1,87 @@
+/*!
+ * VisualEditor UserInterface MWInputMethodDialog class.
+ *
+ * @copyright 2011-2016 VisualEditor Team and others; see
http://ve.mit-license.org
+ */
+
+/**
+ * Dialog for searching for and selecting an input method for a language.
+ *
+ * @class
+ * @extends OO.ui.ProcessDialog
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWInputMethodDialog = function VeUiMWInputMethodDialog( config ) {
+ // Parent constructor
+ ve.ui.MWInputMethodDialog.super.call( this, config );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWInputMethodDialog, OO.ui.ProcessDialog );
+
+/* Static Properties */
+
+ve.ui.MWInputMethodDialog.static.name = 'mwInputMethods';
+
+ve.ui.MWInputMethodDialog.static.size = 'medium';
+
+ve.ui.MWInputMethodDialog.static.title =
+ OO.ui.deferMsg( 'visualeditor-inputmethodsdialog-input-methods-title' );
+
+ve.ui.MWInputMethodDialog.static.actions = [
+ {
+ label: OO.ui.deferMsg( 'visualeditor-dialog-action-cancel' ),
+ flags: [ 'back' ]
+ }
+];
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWInputMethodDialog.prototype.initialize = function () {
+ ve.ui.MWInputMethodDialog.super.prototype.initialize.apply( this,
arguments );
+ this.methodSelect = new OO.ui.SelectWidget( {
+ label: 'Select input method',
+ menu: { items: [] }
+ } );
+ this.$body.append( this.methodSelect.$element );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWInputMethodDialog.prototype.getSetupProcess = function ( data ) {
+ var inputMethods;
+ data = data || {};
+ inputMethods = data.inputMethods || [];
+
+ this.methodSelect.clearItems();
+ this.methodSelect.addItems( inputMethods.map( function ( inputMethod ) {
+ return new OO.ui.MenuOptionWidget( {
+ data: inputMethod.id,
+ label: inputMethod.name
+ } );
+ } ) );
+ this.methodSelect.connect( this, { choose: 'onMethodSelectChoose' } );
+ return ve.ui.MWInputMethodDialog.super.prototype.getSetupProcess.call(
this, data );
+};
+
+ve.ui.MWInputMethodDialog.prototype.onMethodSelectChoose = function ( item ) {
+ this.close( { action: 'apply', id: item.getData() } );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWInputMethodDialog.prototype.getBodyHeight = function () {
+ return 200;
+};
+
+/* Registration */
+
+ve.ui.windowFactory.register( ve.ui.MWInputMethodDialog );
diff --git a/modules/ve-mw/ui/styles/dialogs/ve.ui.MWImeDialog.css
b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWImeDialog.css
new file mode 100644
index 0000000..34c8b7b
--- /dev/null
+++ b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWImeDialog.css
@@ -0,0 +1,27 @@
+/*!
+ * VisualEditor UserInterface ImeDialog styles.
+ *
+ * @copyright 2011-2016 VisualEditor Team and others; see
http://ve.mit-license.org
+ */
+
+.ve-ui-mwImeDialog-row {
+ display: table;
+ min-width: 30em;
+ padding-bottom: 0.3em;
+}
+
+.ve-ui-mwImeDialog-row:last-child {
+ /* Extra pixel for button shadows */
+ padding-bottom: 1px;
+}
+
+.ve-ui-mwImeDialog-cell {
+ display: table-cell;
+ vertical-align: middle;
+ white-space: nowrap;
+ padding-right: 1em;
+}
+
+.ve-ui-mwImeDialog-cell:last-child {
+ padding-right: 0;
+}
diff --git a/modules/ve-mw/ui/styles/dialogs/ve.ui.MWInputMethodDialog.css
b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWInputMethodDialog.css
new file mode 100644
index 0000000..3bee8dd
--- /dev/null
+++ b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWInputMethodDialog.css
@@ -0,0 +1,5 @@
+/*!
+ * VisualEditor UserInterface InputMethodDialog styles.
+ *
+ * @copyright 2011-2016 VisualEditor Team and others; see
http://ve.mit-license.org
+ */
diff --git a/modules/ve-mw/ui/tools/ve.ui.MWImeDialogTool.js
b/modules/ve-mw/ui/tools/ve.ui.MWImeDialogTool.js
new file mode 100644
index 0000000..a968842
--- /dev/null
+++ b/modules/ve-mw/ui/tools/ve.ui.MWImeDialogTool.js
@@ -0,0 +1,24 @@
+/**
+ * IME tool.
+ *
+ * @class
+ * @extends ve.ui.ToolbarDialogTool
+ * @constructor
+ * @param {OO.ui.ToolGroup} toolGroup
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWImeDialogTool = function VeUiMWImeDialogTool() {
+ ve.ui.MWImeDialogTool.super.apply( this, arguments );
+};
+OO.inheritClass( ve.ui.MWImeDialogTool, ve.ui.ToolbarDialogTool );
+ve.ui.MWImeDialogTool.static.name = 'mwIme';
+ve.ui.MWImeDialogTool.static.group = 'dialog';
+ve.ui.MWImeDialogTool.static.icon = 'keyboard';
+ve.ui.MWImeDialogTool.static.title = OO.ui.deferMsg(
'visualeditor-ime-button-tooltip' );
+ve.ui.MWImeDialogTool.static.autoAddToCatchall = false;
+ve.ui.MWImeDialogTool.static.autoAddToGroup = false;
+ve.ui.MWImeDialogTool.static.commandName = 'mwIme';
+// Register the IME tool only if jQuery.IME is loaded
+if ( $.ime ) {
+ ve.ui.toolFactory.register( ve.ui.MWImeDialogTool );
+}
diff --git a/modules/ve-mw/ui/ve.ui.MWCommandRegistry.js
b/modules/ve-mw/ui/ve.ui.MWCommandRegistry.js
index 3137faa..3be5969 100644
--- a/modules/ve-mw/ui/ve.ui.MWCommandRegistry.js
+++ b/modules/ve-mw/ui/ve.ui.MWCommandRegistry.js
@@ -21,3 +21,9 @@
}
)
);
+
+ve.ui.commandRegistry.register(
+ new ve.ui.Command( 'mwIme', 'window', 'toggle',
+ { args: [ 'mwIme' ], supportedSelections: [ 'linear', 'table' ]
}
+ )
+);
--
To view, visit https://gerrit.wikimedia.org/r/279747
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I92e5142d5b0a56c346a7d010ad3d8c4206a4e2ce
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Divec <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
