Tchanders has uploaded a new change for review. https://gerrit.wikimedia.org/r/257261
Change subject: WIP Allow users to choose math inspector or math dialog ...................................................................... WIP Allow users to choose math inspector or math dialog The context item for math nodes now has two edit buttons, one for the inspector (edit inline) and one for the dialog (edit). Creating a new math node automatically opens the dialog. Bug: T120382 Change-Id: Icd3ec75262fcc5e0cbc304051c651278b0d8b01c --- M extension.json M i18n/en.json M i18n/qqq.json A modules/ve-math/ve.ui.MWMathContextItem.js M modules/ve-math/ve.ui.MWMathDialog.js A modules/ve-math/ve.ui.MWMathDialogTool.js A modules/ve-math/ve.ui.MWMathInspector.css A modules/ve-math/ve.ui.MWMathInspector.js D modules/ve-math/ve.ui.MWMathInspectorTool.js 9 files changed, 283 insertions(+), 48 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Math refs/changes/61/257261/1 diff --git a/extension.json b/extension.json index 20d87fe..117563e 100644 --- a/extension.json +++ b/extension.json @@ -142,19 +142,23 @@ "scripts": [ "ve-math/ve.dm.MWMathNode.js", "ve-math/ve.ce.MWMathNode.js", + "ve-math/ve.ui.MWMathInspector.js", + "ve-math/ve.ui.MWMathContextItem.js", "ve-math/ve.ui.MWMathDialog.js", "ve-math/ve.ui.MWMathPage.js", - "ve-math/ve.ui.MWMathInspectorTool.js" + "ve-math/ve.ui.MWMathDialogTool.js" ], "styles": [ "ve-math/ve.ce.MWMathNode.css", "ve-math/ve.ui.MWMathIcons.css", + "ve-math/ve.ui.MWMathInspector.css", "ve-math/ve.ui.MWMathDialog.css" ], "dependencies": [ "ext.visualEditor.mwcore" ], "messages": [ + "math-visualeditor-mwmathcontextitem-editinline", "math-visualeditor-mwmathdialog-title", "math-visualeditor-mwmathdialog-card-formula", "math-visualeditor-mwmathdialog-card-options", diff --git a/i18n/en.json b/i18n/en.json index a4e2bc0..b2cf398 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -18,6 +18,7 @@ ] }, "math-desc": "Render mathematical formulas between <code><math></code> ... <code></math></code> tags", + "math-visualeditor-mwmathcontextitem-editinline": "Edit inline", "math-visualeditor-mwmathdialog-title": "Formula", "math-visualeditor-mwmathdialog-card-formula": "Formula", "math-visualeditor-mwmathdialog-card-options": "Options", diff --git a/i18n/qqq.json b/i18n/qqq.json index 46a7294..64434e0 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -17,6 +17,7 @@ ] }, "math-desc": "{{desc|name=Math|url=https://www.mediawiki.org/wiki/Extension:Math}}", + "math-visualeditor-mwmathcontextitem-editinline": "Label for the edit inline button in the math context item", "math-visualeditor-mwmathdialog-title": "Title for the dialog to edit <nowiki><math></nowiki> formula blocks.\n{{Identical|Formula}}", "math-visualeditor-mwmathdialog-card-formula": "Label for the formula card of the math dialog\n{{Identical|Formula}}", "math-visualeditor-mwmathdialog-card-options": "Label for the options card of the math dialog\n{{Identical|Options}}", diff --git a/modules/ve-math/ve.ui.MWMathContextItem.js b/modules/ve-math/ve.ui.MWMathContextItem.js new file mode 100644 index 0000000..183575e --- /dev/null +++ b/modules/ve-math/ve.ui.MWMathContextItem.js @@ -0,0 +1,69 @@ +/*! + * VisualEditor MWMathContextItem class. + * + * @copyright 2015 VisualEditor Team and others; see http://ve.mit-license.org + */ + +/** + * Context item for a link. + * + * @class + * @extends ve.ui.LinearContextItem + * + * @param {ve.ui.Context} context Context item is in + * @param {ve.dm.Model} model Model item is related to + * @param {Object} config Configuration options + */ +ve.ui.MWMathContextItem = function VeUiMWMathContextItem() { + // Parent constructor + ve.ui.MWMathContextItem.super.apply( this, arguments ); + + this.editInlineButton = new OO.ui.ButtonWidget( { + label: ve.msg( 'math-visualeditor-mwmathcontextitem-editinline' ), + flags: [ 'progressive' ] + } ); + + this.actionButtons.addItems( [ this.editInlineButton ], 0 ); + + this.editInlineButton.connect( this, { click: 'onInlineEditButtonClick' } ); + + // Initialization + this.$element.addClass( 've-ui-mwMathContextItem' ); +}; + +/* Inheritance */ + +OO.inheritClass( ve.ui.MWMathContextItem, ve.ui.LinearContextItem ); + +/* Static Properties */ + +ve.ui.MWMathContextItem.static.name = 'math'; + +ve.ui.MWMathContextItem.static.icon = 'math'; + +ve.ui.MWMathContextItem.static.label = OO.ui.deferMsg( 'math-visualeditor-mwmathinspector-title' ); + +ve.ui.MWMathContextItem.static.modelClasses = [ ve.dm.MWMathNode ]; + +ve.ui.MWMathContextItem.static.embeddable = false; + +ve.ui.MWMathContextItem.static.commandName = 'mathDialog'; + +/* Methods */ + +// /** +// * @inheritdoc +// */ +// ve.ui.MWMathContextItem.prototype.getDescription = function () { +// return this.model.getAttribute( 'mw' ).body.extsrc; +// }; + +// Add documentation +ve.ui.MWMathContextItem.prototype.onInlineEditButtonClick = function () { + var command = ve.init.target.commandRegistry.lookup( 'mathInspector' ); + command.execute( this.context.getSurface() ); +}; + +/* Registration */ + +ve.ui.contextItemFactory.register( ve.ui.MWMathContextItem ); diff --git a/modules/ve-math/ve.ui.MWMathDialog.js b/modules/ve-math/ve.ui.MWMathDialog.js index 7c42fea..74964f3 100644 --- a/modules/ve-math/ve.ui.MWMathDialog.js +++ b/modules/ve-math/ve.ui.MWMathDialog.js @@ -27,7 +27,7 @@ /* Static properties */ -ve.ui.MWMathDialog.static.name = 'math'; +ve.ui.MWMathDialog.static.name = 'mathDialog'; ve.ui.MWMathDialog.static.icon = 'math'; diff --git a/modules/ve-math/ve.ui.MWMathDialogTool.js b/modules/ve-math/ve.ui.MWMathDialogTool.js new file mode 100644 index 0000000..8e11818 --- /dev/null +++ b/modules/ve-math/ve.ui.MWMathDialogTool.js @@ -0,0 +1,53 @@ +/*! + * VisualEditor UserInterface MWMathDialogTool class. + * + * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/*global ve, OO */ + +/** + * MediaWiki UserInterface math tool. + * + * @class + * @extends ve.ui.DialogTool + * @constructor + * @param {OO.ui.ToolGroup} toolGroup + * @param {Object} [config] Configuration options + */ +ve.ui.MWMathDialogTool = function VeUiMWMathDialogTool( toolGroup, config ) { + ve.ui.MWMathDialogTool.super.call( this, toolGroup, config ); +}; +OO.inheritClass( ve.ui.MWMathDialogTool, ve.ui.DialogTool ); +ve.ui.MWMathDialogTool.static.name = 'math'; +ve.ui.MWMathDialogTool.static.group = 'object'; +ve.ui.MWMathDialogTool.static.icon = 'math'; +ve.ui.MWMathDialogTool.static.title = OO.ui.deferMsg( + 'math-visualeditor-mwmathinspector-title' ); +ve.ui.MWMathDialogTool.static.modelClasses = [ ve.dm.MWMathNode ]; +ve.ui.MWMathDialogTool.static.commandName = 'mathDialog'; +ve.ui.toolFactory.register( ve.ui.MWMathDialogTool ); + +ve.ui.commandRegistry.register( + new ve.ui.Command( + 'mathDialog', 'window', 'open', + { args: [ 'mathDialog' ], supportedSelections: [ 'linear' ] } + ) +); + +ve.ui.commandRegistry.register( + new ve.ui.Command( + 'mathInspector', 'window', 'open', + { args: [ 'mathInspector' ], supportedSelections: [ 'linear' ] } + ) +); + +ve.ui.sequenceRegistry.register( + new ve.ui.Sequence( 'wikitextMath', 'math', '<math', 5 ) +); + +ve.ui.commandHelpRegistry.register( 'insert', 'math', { + sequences: [ 'wikitextMath' ], + label: OO.ui.deferMsg( 'math-visualeditor-mwmathinspector-title' ) +} ); diff --git a/modules/ve-math/ve.ui.MWMathInspector.css b/modules/ve-math/ve.ui.MWMathInspector.css new file mode 100644 index 0000000..387b3b9 --- /dev/null +++ b/modules/ve-math/ve.ui.MWMathInspector.css @@ -0,0 +1,10 @@ +/*! + * VisualEditor UserInterface MWMathInspector styles. + * + * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +.ve-ui-mwMathInspector-content .ve-ui-mwExtensionWindow-input textarea { + font-family: monospace, Courier; +} diff --git a/modules/ve-math/ve.ui.MWMathInspector.js b/modules/ve-math/ve.ui.MWMathInspector.js new file mode 100644 index 0000000..ef1704d --- /dev/null +++ b/modules/ve-math/ve.ui.MWMathInspector.js @@ -0,0 +1,143 @@ +/*! + * VisualEditor UserInterface MWMathInspector class. + * + * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt + * @license The MIT License (MIT); see LICENSE.txt + */ + +/*global ve, OO */ + +/** + * MediaWiki math inspector. + * + * @class + * @extends ve.ui.MWLiveExtensionInspector + * + * @constructor + * @param {Object} [config] Configuration options + */ +ve.ui.MWMathInspector = function VeUiMWMathInspector( config ) { + // Parent constructor + ve.ui.MWMathInspector.super.call( this, config ); +}; + +/* Inheritance */ + +OO.inheritClass( ve.ui.MWMathInspector, ve.ui.MWLiveExtensionInspector ); + +/* Static properties */ + +ve.ui.MWMathInspector.static.name = 'mathInspector'; + +ve.ui.MWMathInspector.static.icon = 'math'; + +ve.ui.MWMathInspector.static.title = OO.ui.deferMsg( 'math-visualeditor-mwmathinspector-title' ); + +ve.ui.MWMathInspector.static.modelClasses = [ ve.dm.MWMathNode ]; + +ve.ui.MWMathInspector.static.dir = 'ltr'; + +/* Methods */ + +/** + * @inheritdoc + */ +ve.ui.MWMathInspector.prototype.initialize = function () { + var inputField, displayField, idField; + + // Parent method + ve.ui.MWMathInspector.super.prototype.initialize.call( this ); + + this.displaySelect = new OO.ui.ButtonSelectWidget( { + items: [ + new OO.ui.ButtonOptionWidget( { + data: 'default', + icon: 'math-display-default', + label: ve.msg( 'math-visualeditor-mwmathinspector-display-default' ) + } ), + new OO.ui.ButtonOptionWidget( { + data: 'inline', + icon: 'math-display-inline', + label: ve.msg( 'math-visualeditor-mwmathinspector-display-inline' ) + } ), + new OO.ui.ButtonOptionWidget( { + data: 'block', + icon: 'math-display-block', + label: ve.msg( 'math-visualeditor-mwmathinspector-display-block' ) + } ) + ] + } ); + + this.idInput = new OO.ui.TextInputWidget(); + + inputField = new OO.ui.FieldLayout( this.input, { + align: 'top', + label: ve.msg( 'math-visualeditor-mwmathinspector-title' ) + } ); + displayField = new OO.ui.FieldLayout( this.displaySelect, { + align: 'top', + label: ve.msg( 'math-visualeditor-mwmathinspector-display' ) + } ); + idField = new OO.ui.FieldLayout( this.idInput, { + align: 'top', + label: ve.msg( 'math-visualeditor-mwmathinspector-id' ) + } ); + + // Initialization + this.$content.addClass( 've-ui-mwMathInspector-content' ); + this.form.$element.append( + inputField.$element, + this.generatedContentsError.$element, + displayField.$element, + idField.$element + ); +}; + +/** + * @inheritdoc + */ +ve.ui.MWMathInspector.prototype.getSetupProcess = function ( data ) { + return ve.ui.MWMathInspector.super.prototype.getSetupProcess.call( this, data ) + .next( function () { + var display = this.selectedNode.getAttribute( 'mw' ).attrs.display || 'default'; + this.displaySelect.selectItemByData( display ); + this.displaySelect.on( 'choose', this.onChangeHandler ); + }, this ); +}; + +/** + * @inheritdoc + */ +ve.ui.MWMathInspector.prototype.getTeardownProcess = function ( data ) { + return ve.ui.MWMathInspector.super.prototype.getTeardownProcess.call( this, data ) + .first( function () { + this.displaySelect.off( 'choose', this.onChangeHandler ); + }, this ); +}; + +/** + * @inheritdoc + */ +ve.ui.MWMathInspector.prototype.updateMwData = function ( mwData ) { + var display, id; + + // Parent method + ve.ui.MWMathInspector.super.prototype.updateMwData.call( this, mwData ); + + display = this.displaySelect.getSelectedItem().getData(); + id = this.idInput.getValue(); + + mwData.attrs.display = display !== 'default' ? display : undefined; + mwData.attrs.id = id || undefined; +}; + +/** + * @inheritdoc + */ +ve.ui.MWMathInspector.prototype.formatGeneratedContentsError = function ( $element ) { + return $element.text().trim(); +}; + +/* Registration */ + +ve.ui.windowFactory.register( ve.ui.MWMathInspector ); diff --git a/modules/ve-math/ve.ui.MWMathInspectorTool.js b/modules/ve-math/ve.ui.MWMathInspectorTool.js deleted file mode 100644 index dc65dfb..0000000 --- a/modules/ve-math/ve.ui.MWMathInspectorTool.js +++ /dev/null @@ -1,46 +0,0 @@ -/*! - * VisualEditor UserInterface MWMathInspectorTool class. - * - * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt - * @license The MIT License (MIT); see LICENSE.txt - */ - -/*global ve, OO */ - -/** - * MediaWiki UserInterface math tool. - * - * @class - * @extends ve.ui.InspectorTool - * @constructor - * @param {OO.ui.ToolGroup} toolGroup - * @param {Object} [config] Configuration options - */ -ve.ui.MWMathInspectorTool = function VeUiMWMathInspectorTool( toolGroup, config ) { - ve.ui.MWMathInspectorTool.super.call( this, toolGroup, config ); -}; -OO.inheritClass( ve.ui.MWMathInspectorTool, ve.ui.InspectorTool ); -ve.ui.MWMathInspectorTool.static.name = 'math'; -ve.ui.MWMathInspectorTool.static.group = 'object'; -ve.ui.MWMathInspectorTool.static.icon = 'math'; -ve.ui.MWMathInspectorTool.static.title = OO.ui.deferMsg( - 'math-visualeditor-mwmathinspector-title' ); -ve.ui.MWMathInspectorTool.static.modelClasses = [ ve.dm.MWMathNode ]; -ve.ui.MWMathInspectorTool.static.commandName = 'math'; -ve.ui.toolFactory.register( ve.ui.MWMathInspectorTool ); - -ve.ui.commandRegistry.register( - new ve.ui.Command( - 'math', 'window', 'open', - { args: [ 'math' ], supportedSelections: [ 'linear' ] } - ) -); - -ve.ui.sequenceRegistry.register( - new ve.ui.Sequence( 'wikitextMath', 'math', '<math', 5 ) -); - -ve.ui.commandHelpRegistry.register( 'insert', 'math', { - sequences: [ 'wikitextMath' ], - label: OO.ui.deferMsg( 'math-visualeditor-mwmathinspector-title' ) -} ); -- To view, visit https://gerrit.wikimedia.org/r/257261 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Icd3ec75262fcc5e0cbc304051c651278b0d8b01c Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Math Gerrit-Branch: master Gerrit-Owner: Tchanders <thalia.e.c...@googlemail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits