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
This commit is contained in:
Thalia 2015-12-06 22:35:25 +00:00
parent 961944c3e3
commit 5fe280c3cf
9 changed files with 278 additions and 48 deletions

View File

@ -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-quickedit",
"math-visualeditor-mwmathdialog-title",
"math-visualeditor-mwmathdialog-card-formula",
"math-visualeditor-mwmathdialog-card-options",

View File

@ -18,6 +18,7 @@
]
},
"math-desc": "Render mathematical formulas between <code>&lt;math&gt;</code> ... <code>&lt;/math&gt;</code> tags",
"math-visualeditor-mwmathcontextitem-quickedit": "Quick edit",
"math-visualeditor-mwmathdialog-title": "Formula",
"math-visualeditor-mwmathdialog-card-formula": "Formula",
"math-visualeditor-mwmathdialog-card-options": "Options",

View File

@ -17,6 +17,7 @@
]
},
"math-desc": "{{desc|name=Math|url=https://www.mediawiki.org/wiki/Extension:Math}}",
"math-visualeditor-mwmathcontextitem-quickedit": "Label for the quick edit 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}}",

View File

@ -0,0 +1,64 @@
/*!
* VisualEditor MWMathContextItem class.
*
* @copyright 2015 VisualEditor Team and others; see http://ve.mit-license.org
*/
/**
* Context item for a math node.
*
* @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.quickEditButton = new OO.ui.ButtonWidget( {
label: ve.msg( 'math-visualeditor-mwmathcontextitem-quickedit' ),
flags: [ 'progressive' ]
} );
this.actionButtons.addItems( [ this.quickEditButton ], 0 );
this.quickEditButton.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 */
/**
* Handle inline edit button click events.
*/
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 );

View File

@ -27,7 +27,7 @@ OO.inheritClass( ve.ui.MWMathDialog, ve.ui.MWExtensionPreviewDialog );
/* Static properties */
ve.ui.MWMathDialog.static.name = 'math';
ve.ui.MWMathDialog.static.name = 'mathDialog';
ve.ui.MWMathDialog.static.icon = 'math';

View File

@ -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', 'mathDialog', '<math', 5 )
);
ve.ui.commandHelpRegistry.register( 'insert', 'mathDialog', {
sequences: [ 'wikitextMath' ],
label: OO.ui.deferMsg( 'math-visualeditor-mwmathinspector-title' )
} );

View File

@ -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;
}

View File

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

View File

@ -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' )
} );