Divec has uploaded a new change for review. https://gerrit.wikimedia.org/r/283197
Change subject: WIP DONTMERGE: IME UI integration ...................................................................... WIP DONTMERGE: IME UI integration Change-Id: I796fa6b5425e108f9b6b17f1b0f1579616619b6e --- M extension.json A lib/ve-mw/ext.ve-mw-jquery.ime.init.js A lib/ve-mw/ve.ui.MWCommandRegistry.js A lib/ve-mw/ve.ui.MWImeDialog.css A lib/ve-mw/ve.ui.MWImeDialog.js A lib/ve-mw/ve.ui.MWImeDialogTool.js A lib/ve-mw/ve.ui.MWInputMethodDialog.css A lib/ve-mw/ve.ui.MWInputMethodDialog.js 8 files changed, 405 insertions(+), 2 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UniversalLanguageSelector refs/changes/97/283197/1 diff --git a/extension.json b/extension.json index e46c4c4..59c234f 100644 --- a/extension.json +++ b/extension.json @@ -282,8 +282,20 @@ "remoteExtPath": "UniversalLanguageSelector/resources" }, "jquery.ime": { - "scripts": "jquery.ime/jquery.ime.js", - "styles": "jquery.ime/css/jquery.ime.css", + "scripts": [ + "jquery.ime/jquery.ime.js", + "ve-mw/ve.ui.MWCommandRegistry.js", + "ve-mw/ve.ui.MWImeDialog.js", + "ve-mw/ve.ui.MWImeDialogTool.js", + "ve-mw/ve.ui.MWInputMethodDialog.js", + "ve-mw/ext.ve-mw-jquery.ime.init.js" + ], + "styles": [ + "jquery.ime/css/jquery.ime.css", + "ve-mw/ve.ui.MWImeDialog.css", + "ve-mw/ve.ui.MWInputMethodDialog.css" + ], + "dependencies": "ext.visualEditor.core", "localBasePath": "lib", "remoteExtPath": "UniversalLanguageSelector/lib" }, diff --git a/lib/ve-mw/ext.ve-mw-jquery.ime.init.js b/lib/ve-mw/ext.ve-mw-jquery.ime.init.js new file mode 100644 index 0000000..26bcdad --- /dev/null +++ b/lib/ve-mw/ext.ve-mw-jquery.ime.init.js @@ -0,0 +1,52 @@ +/*! + * ULS startup script - MediaWiki specific customization for jquery.uls + * + * Copyright (C) 2012-2013 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris, + * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other + * contributors. See CREDITS for a list. + * + * UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't + * have to do anything special to choose one license or the other and you don't + * have to notify anyone which license you are using. You are free to use + * UniversalLanguageSelector in commercial projects as long as the copyright + * header is left intact. See files GPL-LICENSE and MIT-LICENSE for details. + * + * @file + * @ingroup Extensions + * @licence GNU General Public Licence 2.0 or later + * @licence MIT License + */ + +( function ( $, mw ) { + 'use strict'; + function veInit() { + // Patch IME toolbar + //ve.init.target.constructor.static.toolbarGroups.splice( 6, 1 ); + ve.init.target.constructor.static.toolbarGroups.push( { + type: 'list', + classes: [ 've-test-toolbar-ime' ], + indicator: 'down', + title: OO.ui.deferMsg( 'visualeditor-toolbar-ime-tooltip' ), + include: [ 'specialCharacter', 'mwIme' ], + icon: 'keyboard' + } ); + ve.init.target.setupToolbar( ve.init.target.surface ); + } + + if ( window.ve ) { + // Wait until ve.init.target is available + // TODO: get rid of this ungainly hack + ( function () { + var f = function () { + if ( ve.init && ve.init.target ) { + veInit(); + // ve.init.target.setupToolbar( ve.init.target.surface ); + // ve.init.target.constructor.static.toolbarGroups + } else { + setTimeout( f ); + } + }; + setTimeout( f ); + } () ); + } +}( jQuery, mediaWiki ) ); diff --git a/lib/ve-mw/ve.ui.MWCommandRegistry.js b/lib/ve-mw/ve.ui.MWCommandRegistry.js new file mode 100644 index 0000000..3ad26cc --- /dev/null +++ b/lib/ve-mw/ve.ui.MWCommandRegistry.js @@ -0,0 +1,14 @@ +/*! + * VisualEditor MediaWiki CommandRegistry registrations. + * + * @copyright 2011-2016 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/* MW-specific overrides of core command registrations */ + +ve.ui.commandRegistry.register( + new ve.ui.Command( 'mwIme', 'window', 'toggle', + { args: [ 'mwIme' ], supportedSelections: [ 'linear', 'table' ] } + ) +); diff --git a/lib/ve-mw/ve.ui.MWImeDialog.css b/lib/ve-mw/ve.ui.MWImeDialog.css new file mode 100644 index 0000000..34c8b7b --- /dev/null +++ b/lib/ve-mw/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/lib/ve-mw/ve.ui.MWImeDialog.js b/lib/ve-mw/ve.ui.MWImeDialog.js new file mode 100644 index 0000000..8739594 --- /dev/null +++ b/lib/ve-mw/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/lib/ve-mw/ve.ui.MWImeDialogTool.js b/lib/ve-mw/ve.ui.MWImeDialogTool.js new file mode 100644 index 0000000..61ad435 --- /dev/null +++ b/lib/ve-mw/ve.ui.MWImeDialogTool.js @@ -0,0 +1,21 @@ +/** + * 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'; +ve.ui.toolFactory.register( ve.ui.MWImeDialogTool ); diff --git a/lib/ve-mw/ve.ui.MWInputMethodDialog.css b/lib/ve-mw/ve.ui.MWInputMethodDialog.css new file mode 100644 index 0000000..3bee8dd --- /dev/null +++ b/lib/ve-mw/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/lib/ve-mw/ve.ui.MWInputMethodDialog.js b/lib/ve-mw/ve.ui.MWInputMethodDialog.js new file mode 100644 index 0000000..98419c3 --- /dev/null +++ b/lib/ve-mw/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 ); -- To view, visit https://gerrit.wikimedia.org/r/283197 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I796fa6b5425e108f9b6b17f1b0f1579616619b6e Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/UniversalLanguageSelector Gerrit-Branch: master Gerrit-Owner: Divec <da...@troi.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits