Add support for display and ID attributes to VisualEditor

Change-Id: Ie65ff26c9e214f74b0217238a3def2242505d4c2

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' ),

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",

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 <nowiki><math></nowiki> 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}}.",

modules/VisualEditor/math-display-block.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="math-display-default">
+        <path id="sigma" d="M 12.609,11.391 10.275186,16.004 15,16 l 0,-1 1,0 0,3 L 7.2711863,18 11,12 7.2711863,7 16,7 l 0,3 -1,0 0,-2 -4.728814,0" />
+        <path id="text" d="m 3.5,19 17,0 c 0.277,0 0.5,0.223 0.5,0.5 0,0.277 -0.223,0.5 -0.5,0.5 l -17,0 C 3.223,20 3,19.777 3,19.5 3,19.223 3.223,19 3.5,19 z m 0,-14 17,0 C 20.777,5 21,5.223 21,5.5 21,5.777 20.777,6 20.5,6 L 3.5,6 C 3.223,6 3,5.777 3,5.5 3,5.223 3.223,5 3.5,5 z" />
+    </g>
+</svg>

modules/VisualEditor/math-display-default.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="math-display-default">
+        <path id="sigma" d="M 12.609,11.391 10.275186,16.004 15,16 l 0,-1 1,0 0,3 L 7.2711866,18 11,12 7.2711866,7 16,7 l 0,3 -1,0 0,-2 -4.728814,0" />
+        <path id="sum-to" d="m 13,20 c 0,0.552285 -0.447715,1 -1,1 -0.552285,0 -1,-0.447715 -1,-1 0,-0.552285 0.447715,-1 1,-1 0.552285,0 1,0.447715 1,1 z" />
+        <path id="sum-from" d="m 13,5 c 0,0.5522847 -0.447715,1 -1,1 -0.552285,0 -1,-0.4477153 -1,-1 0,-0.5522847 0.447715,-1 1,-1 0.552285,0 1,0.4477153 1,1 z" />
+        <path id="text-before" d="M 3,11.5 C 3,11.223 3.223,11 3.5,11 l 3,0 C 6.777,11 7,11.223 7,11.5 l 0,2 C 7,13.777 6.777,14 6.5,14 l -3,0 C 3.223,14 3,13.777 3,13.5 z" />
+        <path id="text-after" d="M 17,11.5 C 17,11.223 17.223,11 17.5,11 l 3,0 c 0.277,0 0.5,0.223 0.5,0.5 l 0,2 c 0,0.277 -0.223,0.5 -0.5,0.5 l -3,0 C 17.223,14 17,13.777 17,13.5 z" />
+    </g>
+</svg>

modules/VisualEditor/math-display-inline.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="math-display-inline">
+        <path id="sigma" d="M 11.609,11.391 9.8551551,15.004 13,15 l 0,-1 1,0 0,3 L 7.2710001,17 10,12 7.2710001,8 14,8 l 0,3 -1,0 0,-2 -3.1488449,0" />
+        <path id="sum-to" d="m 17,16 c 0,0.552285 -0.447715,1 -1,1 -0.552285,0 -1,-0.447715 -1,-1 0,-0.552285 0.447715,-1 1,-1 0.552285,0 1,0.447715 1,1 z" />
+        <path id="sum-from" d="m 17,9 c 0,0.5522847 -0.447715,1 -1,1 -0.552285,0 -1,-0.4477153 -1,-1 0,-0.5522847 0.447715,-1 1,-1 0.552285,0 1,0.4477153 1,1 z" />
+        <path id="text-before" d="M 3,11.5 C 3,11.223 3.223,11 3.5,11 l 3,0 c 0.277,0 0.5,0.223 0.5,0.5 l 0,2 C 7,13.777 6.777,14 6.5,14 l -3,0 C 3.223,14 3,13.777 3,13.5 z" />
+        <path id="text-after" d="M 17,11.5 C 17,11.223 17.223,11 17.5,11 l 3,0 c 0.277,0 0.5,0.223 0.5,0.5 l 0,2 c 0,0.277 -0.223,0.5 -0.5,0.5 l -3,0 C 17.223,14 17,13.777 17,13.5 z" />
+    </g>
+</svg>

modules/VisualEditor/math.svg

@@ -1,8 +1,6 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+    <g id="math">
-    height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+        <path id="sigma" d="M 13.609,11.391 10.004,16.004 16,16 l 0,-1 1,0 0,3 -10,0 5,-6 -5,-6 10,0 0,3 -1,0 0,-2 -6,0 3.609,4.391" />
-<g id="math">
+    </g>
-   <path id="sigma" d="M 13.609,11.391 10.004,16.004 16,16 l 0,-1 1,0 0,3 -10,0 5,-6 -5,-6 10,0 0,3 -1,0 0,-2 -6,0 3.609,4.391" />
-</g>
 </svg>

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);
+}

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 );