From 70573daa0b744ec079f5a2982e16531ab6a8e7d5 Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Wed, 12 Nov 2014 15:28:57 +0000 Subject: [PATCH] Add support for display and ID attributes to VisualEditor Change-Id: Ie65ff26c9e214f74b0217238a3def2242505d4c2 --- Math.php | 5 + i18n/en.json | 5 + i18n/qqq.json | 5 + modules/VisualEditor/math-display-block.svg | 7 ++ modules/VisualEditor/math-display-default.svg | 10 ++ modules/VisualEditor/math-display-inline.svg | 10 ++ modules/VisualEditor/math.svg | 12 +-- modules/VisualEditor/ve.ui.MWMathIcons.css | 15 +++ modules/VisualEditor/ve.ui.MWMathInspector.js | 98 +++++++++++++++++++ 9 files changed, 160 insertions(+), 7 deletions(-) create mode 100644 modules/VisualEditor/math-display-block.svg create mode 100644 modules/VisualEditor/math-display-default.svg create mode 100644 modules/VisualEditor/math-display-inline.svg diff --git a/Math.php b/Math.php index c4ccba987..0d944913f 100644 --- a/Math.php +++ b/Math.php @@ -519,6 +519,11 @@ $wgResourceModules['ext.math.visualEditor'] = array( 'ext.visualEditor.mwcore', ), 'messages' => array( + 'math-visualeditor-mwmathinspector-display', + 'math-visualeditor-mwmathinspector-display-block', + 'math-visualeditor-mwmathinspector-display-default', + 'math-visualeditor-mwmathinspector-display-inline', + 'math-visualeditor-mwmathinspector-id', 'math-visualeditor-mwmathinspector-title', ), 'targets' => array( 'desktop', 'mobile' ), diff --git a/i18n/en.json b/i18n/en.json index aacafc247..75ec763eb 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -7,6 +7,11 @@ "math-preference-mwmathinspector-discussion-link": "https://www.mediawiki.org/wiki/Special:MyLanguage/Talk:VisualEditor/Beta_Features/Formulae", "math-preference-mwmathinspector-info-link": "https://www.mediawiki.org/wiki/Special:MyLanguage/VisualEditor/Beta_Features/Formulae", "math-preference-mwmathinspector-label": "VisualEditor formula editing", + "math-visualeditor-mwmathinspector-display": "Display", + "math-visualeditor-mwmathinspector-display-block": "Block", + "math-visualeditor-mwmathinspector-display-default": "Default", + "math-visualeditor-mwmathinspector-display-inline": "Inline", + "math-visualeditor-mwmathinspector-id": "Link ID (optional)", "math-visualeditor-mwmathinspector-title": "Formula", "math_bad_output": "Cannot write to or create math output directory", "math_bad_tmpdir": "Cannot write to or create math temp directory", diff --git a/i18n/qqq.json b/i18n/qqq.json index a665ce16b..da571f995 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -16,6 +16,11 @@ "math-preference-mwmathinspector-discussion-link": "{{optional|Used on [[Special:Preferences]] as a link to a page where users can discuss this Beta Feature. Defaults to a page on MediaWiki.org.}}", "math-preference-mwmathinspector-info-link": "{{optional|Used on [[Special:Preferences]] as a link to a page where users can learn about this Beta Feature. Defaults to a page on MediaWiki.org.}}", "math-preference-mwmathinspector-label": "Used in [[Special:Preferences]].\n\nUsed as label for checkbox to enable editing of mathematical formulae in VisualEditor.\n\nThe description for this checkbox is:\n* {{msg-mw|Math-preference-mwmathinspector-description}}", + "math-visualeditor-mwmathinspector-display": "Label for the display attribute of the math node", + "math-visualeditor-mwmathinspector-display-block": "Label for the 'block' value of the display attribute", + "math-visualeditor-mwmathinspector-display-default": "Label for the 'default' value of the display attribute", + "math-visualeditor-mwmathinspector-display-inline": "Label for the 'inline' value of the display attribute", + "math-visualeditor-mwmathinspector-id": "Label for the link ID attribute of the math node", "math-visualeditor-mwmathinspector-title": "Title for the inspector to edit formula blocks.\n{{Identical|Formula}}", "math_bad_output": "Used as error message.\n\nThis message follows the message {{msg-mw|Math failure}}.", "math_bad_tmpdir": "Used as error message.\n\nThis message follows the message {{msg-mw|Math failure}}.", diff --git a/modules/VisualEditor/math-display-block.svg b/modules/VisualEditor/math-display-block.svg new file mode 100644 index 000000000..4dc4c4caa --- /dev/null +++ b/modules/VisualEditor/math-display-block.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/modules/VisualEditor/math-display-default.svg b/modules/VisualEditor/math-display-default.svg new file mode 100644 index 000000000..fb2f8ef18 --- /dev/null +++ b/modules/VisualEditor/math-display-default.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/modules/VisualEditor/math-display-inline.svg b/modules/VisualEditor/math-display-inline.svg new file mode 100644 index 000000000..5610abf8a --- /dev/null +++ b/modules/VisualEditor/math-display-inline.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/modules/VisualEditor/math.svg b/modules/VisualEditor/math.svg index 3084d6523..6001ca983 100644 --- a/modules/VisualEditor/math.svg +++ b/modules/VisualEditor/math.svg @@ -1,8 +1,6 @@ - - - - - - + + + + + diff --git a/modules/VisualEditor/ve.ui.MWMathIcons.css b/modules/VisualEditor/ve.ui.MWMathIcons.css index 5b75dba30..c4e6bfea0 100644 --- a/modules/VisualEditor/ve.ui.MWMathIcons.css +++ b/modules/VisualEditor/ve.ui.MWMathIcons.css @@ -2,3 +2,18 @@ /* @embed */ background-image: url(math.svg); } + +.oo-ui-icon-math-display-block { + /* @embed */ + background-image: url(math-display-block.svg); +} + +.oo-ui-icon-math-display-default { + /* @embed */ + background-image: url(math-display-default.svg); +} + +.oo-ui-icon-math-display-inline { + /* @embed */ + background-image: url(math-display-inline.svg); +} diff --git a/modules/VisualEditor/ve.ui.MWMathInspector.js b/modules/VisualEditor/ve.ui.MWMathInspector.js index 717e9bff1..570157a30 100644 --- a/modules/VisualEditor/ve.ui.MWMathInspector.js +++ b/modules/VisualEditor/ve.ui.MWMathInspector.js @@ -39,6 +39,104 @@ ve.ui.MWMathInspector.static.nodeModel = ve.dm.MWMathNode; ve.ui.MWMathInspector.static.dir = 'ltr'; +/* Methods */ + +/** + * @inheritdoc + */ +ve.ui.MWMathInspector.prototype.initialize = function () { + // Parent method + ve.ui.MWMathInspector.super.prototype.initialize.call( this ); + + // Position + this.displaySelect = new OO.ui.ButtonSelectWidget( { + $: this.$, + items: [ + new OO.ui.ButtonOptionWidget( { + $: this.$, + data: 'default', + icon: 'math-display-default', + label: ve.msg( 'math-visualeditor-mwmathinspector-display-default' ) + } ), + new OO.ui.ButtonOptionWidget( { + $: this.$, + data: 'inline', + icon: 'math-display-inline', + label: ve.msg( 'math-visualeditor-mwmathinspector-display-inline' ) + } ), + new OO.ui.ButtonOptionWidget( { + $: this.$, + data: 'block', + icon: 'math-display-block', + label: ve.msg( 'math-visualeditor-mwmathinspector-display-block' ) + } ) + ] + } ); + + this.idInput = new OO.ui.TextInputWidget( { $: this.$ } ); + + var inputField = new OO.ui.FieldLayout( this.input, { + $: this.$, + align: 'top', + label: ve.msg( 'math-visualeditor-mwmathinspector-title' ) + } ), + displayField = new OO.ui.FieldLayout( this.displaySelect, { + $: this.$, + align: 'top', + label: ve.msg( 'math-visualeditor-mwmathinspector-display' ) + } ), + idField = new OO.ui.FieldLayout( this.idInput, { + $: this.$, + align: 'top', + label: ve.msg( 'math-visualeditor-mwmathinspector-id' ) + } ); + + // Initialization + this.$content.addClass( 've-ui-mwMathInspector-content' ); + this.form.$element.append( inputField.$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.node.getAttribute( 'mw' ).attrs.display || 'default'; + this.displaySelect.selectItem( this.displaySelect.getItemFromData( display ) ); + this.displaySelect.on( 'choose', this.onChangeHandler ); + this.idInput.on( 'change', 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.idInput.off( 'change', this.onChangeHandler ); + }, this ); +}; + +/** + * @inheritdoc + */ +ve.ui.MWMathInspector.prototype.updatePreview = function () { + var mwData = ve.copy( this.node.getAttribute( 'mw' ) ), + display = this.displaySelect.getSelectedItem().getData(), + id = this.idInput.getValue(); + + mwData.body.extsrc = this.input.getValue(); + mwData.attrs.display = display !== 'default' ? display : undefined; + mwData.attrs.id = id || undefined; + + if ( this.visible ) { + this.getFragment().changeAttributes( { mw: mwData } ); + } +}; + /* Registration */ ve.ui.windowFactory.register( ve.ui.MWMathInspector );