Make math dialog with clickable list of formula fragments
The main components are: - a menu of formula fragment buttons - an ace editor text input into which LaTeX commands are inserted on clicking the buttons - a preview of the formula The deviations from the draft design (full-width menu, smaller buttons, dialog is 'larger' instead of 'large') are so that more buttons can be seen at once. Depends on Ia0f46da2d4 in ve-mw Depends on Ib75fb7b087 in ve-mw Depends on I758f90abb9 in ve-mw Depends on Ibcd941d938 in CodeEditor Depends on Ie814f59086 in oojs-ui Depends on If540670bf2 in oojs-ui Depends on I5f70f133b7 in ve core Bug: T114163 Bug: T118617 Bug: T118618 Change-Id: I96d4b72f2e49ad3f43a2e5c71f0d348fdfb35503
This commit is contained in:
Thalia
parent
95977c0493
commit
6e73aaf86c
|
|
@ -20,6 +20,7 @@
|
|||
"globals": {
|
||||
"mediaWiki": false,
|
||||
"OO": false,
|
||||
"ve": false
|
||||
"ve": false,
|
||||
"mw": false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<?php
|
||||
/**
|
||||
* Resource loader module providing extra data from the server to Math.
|
||||
*
|
||||
* @file
|
||||
* @ingroup Extensions
|
||||
* @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
|
||||
* @license The MIT License (MIT); see LICENSE.txt
|
||||
*/
|
||||
|
||||
class MathDataModule extends ResourceLoaderModule {
|
||||
|
||||
/* Protected Members */
|
||||
|
||||
protected $origin = self::ORIGIN_USER_SITEWIDE;
|
||||
protected $targets = array( 'desktop', 'mobile' );
|
||||
|
||||
/* Methods */
|
||||
|
||||
public function getScript( ResourceLoaderContext $context ) {
|
||||
return
|
||||
've.ui.MWMathDialog.static.setSymbols(' .
|
||||
file_get_contents( __DIR__ . '/modules/ve-math/symbols.json' ) .
|
||||
');';
|
||||
}
|
||||
|
||||
public function getDependencies( ResourceLoaderContext $context = null ) {
|
||||
return array(
|
||||
'ext.math.visualEditor',
|
||||
);
|
||||
}
|
||||
|
||||
public function enableModuleContentVersion() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
"callback": "MathHooks::registerExtension",
|
||||
"type": "parserhook",
|
||||
"AutoloadClasses": {
|
||||
"MathDataModule": "MathDataModule.php",
|
||||
"MathHooks": "Math.hooks.php",
|
||||
"MathRenderer": "MathRenderer.php",
|
||||
"MathTexvc": "MathTexvc.php",
|
||||
|
|
@ -138,29 +139,68 @@
|
|||
"scripts": [
|
||||
"ve-math/ve.dm.MWMathNode.js",
|
||||
"ve-math/ve.ce.MWMathNode.js",
|
||||
"ve-math/ve.ui.MWMathInspector.js",
|
||||
"ve-math/ve.ui.MWMathDialog.js",
|
||||
"ve-math/ve.ui.MWMathPage.js",
|
||||
"ve-math/ve.ui.MWMathInspectorTool.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-mwmathdialog-title",
|
||||
"math-visualeditor-mwmathdialog-card-formula",
|
||||
"math-visualeditor-mwmathdialog-card-options",
|
||||
"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"
|
||||
"math-visualeditor-mwmathinspector-title",
|
||||
"math-visualeditor-symbol-group-accents",
|
||||
"math-visualeditor-symbol-group-arrows",
|
||||
"math-visualeditor-symbol-group-bounds",
|
||||
"math-visualeditor-symbol-group-derivatives",
|
||||
"math-visualeditor-symbol-group-functions",
|
||||
"math-visualeditor-symbol-group-geometry",
|
||||
"math-visualeditor-symbol-group-greek",
|
||||
"math-visualeditor-symbol-group-hebrew",
|
||||
"math-visualeditor-symbol-group-large",
|
||||
"math-visualeditor-symbol-group-logic",
|
||||
"math-visualeditor-symbol-group-matrices",
|
||||
"math-visualeditor-symbol-group-modular",
|
||||
"math-visualeditor-symbol-group-operators",
|
||||
"math-visualeditor-symbol-group-parentheses",
|
||||
"math-visualeditor-symbol-group-projections",
|
||||
"math-visualeditor-symbol-group-relations",
|
||||
"math-visualeditor-symbol-group-root",
|
||||
"math-visualeditor-symbol-group-sets",
|
||||
"math-visualeditor-symbol-group-spacing",
|
||||
"math-visualeditor-symbol-group-special",
|
||||
"math-visualeditor-symbol-group-subscripts",
|
||||
"math-visualeditor-symbol-group-symbols",
|
||||
"math-visualeditor-symbol-group-typefaces",
|
||||
"math-visualeditor-symbol-group-unsorted"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
]
|
||||
},
|
||||
"ext.math.visualEditor.data": {
|
||||
"class": "MathDataModule"
|
||||
},
|
||||
"ext.math.visualEditor.symbols": {
|
||||
"styles": [
|
||||
"ve-math/ve.ui.MWMathSymbols.css"
|
||||
],
|
||||
"dependencies": [
|
||||
"ext.math.visualEditor.data"
|
||||
]
|
||||
}
|
||||
},
|
||||
"ResourceFileModulePaths": {
|
||||
|
|
|
|||
27
i18n/en.json
27
i18n/en.json
|
|
@ -18,23 +18,38 @@
|
|||
]
|
||||
},
|
||||
"math-desc": "Render mathematical formulas between <code><math></code> ... <code></math></code> tags",
|
||||
"math-visualeditor-mwmathdialog-title": "Formula",
|
||||
"math-visualeditor-mwmathdialog-card-formula": "Formula",
|
||||
"math-visualeditor-mwmathdialog-card-options": "Options",
|
||||
"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-visualeditor-symbol-group-accents": "Accents",
|
||||
"math-visualeditor-symbol-group-accents": "Accents and diacritics",
|
||||
"math-visualeditor-symbol-group-arrows": "Arrows",
|
||||
"math-visualeditor-symbol-group-derivatives": "Derivatives",
|
||||
"math-visualeditor-symbol-group-functions": "Functions",
|
||||
"math-visualeditor-symbol-group-geometry": "Geometry",
|
||||
"math-visualeditor-symbol-group-bounds": "Bounds",
|
||||
"math-visualeditor-symbol-group-derivatives": "Differentials and derivatives",
|
||||
"math-visualeditor-symbol-group-functions": "Standard numerical functions",
|
||||
"math-visualeditor-symbol-group-geometry": "Geometric",
|
||||
"math-visualeditor-symbol-group-greek": "Greek alphabet",
|
||||
"math-visualeditor-symbol-group-hebrew": "Hebrew alphabet",
|
||||
"math-visualeditor-symbol-group-large": "Large layouts",
|
||||
"math-visualeditor-symbol-group-logic": "Logic",
|
||||
"math-visualeditor-symbol-group-modular": "Modular",
|
||||
"math-visualeditor-symbol-group-matrices": "Matrices",
|
||||
"math-visualeditor-symbol-group-modular": "Modular arithmetic",
|
||||
"math-visualeditor-symbol-group-operators": "Operators",
|
||||
"math-visualeditor-symbol-group-projections": "Projections",
|
||||
"math-visualeditor-symbol-group-parentheses": "Parentheses",
|
||||
"math-visualeditor-symbol-group-relations": "Relations",
|
||||
"math-visualeditor-symbol-group-root": "Root",
|
||||
"math-visualeditor-symbol-group-root": "Radicals",
|
||||
"math-visualeditor-symbol-group-sets": "Sets",
|
||||
"math-visualeditor-symbol-group-spacing": "Spacing",
|
||||
"math-visualeditor-symbol-group-special": "Special",
|
||||
"math-visualeditor-symbol-group-subscripts": "Subscripts, superscripts and integrals",
|
||||
"math-visualeditor-symbol-group-symbols": "Symbols and constants",
|
||||
"math-visualeditor-symbol-group-typefaces": "Typefaces",
|
||||
"math-visualeditor-symbol-group-unsorted": "Unsorted",
|
||||
"math_bad_output": "Cannot write to or create math output directory",
|
||||
"math_bad_tmpdir": "Cannot write to or create math temp directory",
|
||||
|
|
|
|||
|
|
@ -17,24 +17,39 @@
|
|||
]
|
||||
},
|
||||
"math-desc": "{{desc|name=Math|url=https://www.mediawiki.org/wiki/Extension:Math}}",
|
||||
"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",
|
||||
"math-visualeditor-mwmathdialog-card-options": "Label for the options card of the math dialog",
|
||||
"math-visualeditor-mwmathinspector-display": "Label for the display attribute of the math node\n{{Identical|Display}}",
|
||||
"math-visualeditor-mwmathinspector-display-block": "Label for the 'block' value of the display attribute\n{{Identical|Block}}",
|
||||
"math-visualeditor-mwmathinspector-display-default": "Label for the 'default' value of the display attribute\n{{Identical|Default}}",
|
||||
"math-visualeditor-mwmathinspector-display-inline": "Label for the 'inline' value of the display attribute\n{{Identical|Inline}}",
|
||||
"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-visualeditor-symbol-group-accents": "Label for the accents group of math symbols\n{{Identical|Accent}}",
|
||||
"math-visualeditor-symbol-group-arrows": "Label for the arrows group of math symbols\n{{Identical|Arrow}}",
|
||||
"math-visualeditor-symbol-group-derivatives": "Label for the derivatives group of math symbols\n{{Identical|Derivative}}",
|
||||
"math-visualeditor-symbol-group-functions": "Label for the functions group of math symbols\n{{Identical|Function}}",
|
||||
"math-visualeditor-symbol-group-geometry": "Label for the geometry group of math symbols\n{{Identical|Geometry}}",
|
||||
"math-visualeditor-symbol-group-logic": "Label for the logic group of math symbols\n{{Identical|Logic}}",
|
||||
"math-visualeditor-symbol-group-modular": "Label for the modular group of math symbols (as in [[:w:en:Modular arithmetic|Modular arithmetic]]).\n{{Identical|Modular}}",
|
||||
"math-visualeditor-symbol-group-operators": "Label for the operators group of math symbols\n{{Identical|Operator}}",
|
||||
"math-visualeditor-symbol-group-relations": "Label for the relations group of math symbols\n{{Identical|Relation}}",
|
||||
"math-visualeditor-symbol-group-root": "Label for the root group of math symbols\n{{Identical|Root}}",
|
||||
"math-visualeditor-symbol-group-special": "Label for the special group of math symbols\n{{Identical|Special}}",
|
||||
"math-visualeditor-symbol-group-unsorted": "Label for the unsorted group of math symbols\n{{Identical|Unsorted}}",
|
||||
"math-visualeditor-symbol-group-accents": "Label for the accents group of math symbols",
|
||||
"math-visualeditor-symbol-group-arrows": "Label for the arrows group of math symbols",
|
||||
"math-visualeditor-symbol-group-bounds": "Label for the bounds group of math symbols",
|
||||
"math-visualeditor-symbol-group-derivatives": "Label for the derivatives group of math symbols",
|
||||
"math-visualeditor-symbol-group-functions": "Label for the functions group of math symbols",
|
||||
"math-visualeditor-symbol-group-geometry": "Label for the geometry group of math symbols",
|
||||
"math-visualeditor-symbol-group-greek": "Label for the Greek group of math symbols",
|
||||
"math-visualeditor-symbol-group-hebrew": "Label for the Hebrew group of math symbols",
|
||||
"math-visualeditor-symbol-group-large": "Label for the large group of math symbols",
|
||||
"math-visualeditor-symbol-group-logic": "Label for the logic group of math symbols",
|
||||
"math-visualeditor-symbol-group-matrices": "Label for the matrices group of math symbols",
|
||||
"math-visualeditor-symbol-group-modular": "Label for the modular group of math symbols",
|
||||
"math-visualeditor-symbol-group-operators": "Label for the operators group of math symbols",
|
||||
"math-visualeditor-symbol-group-projections": "Label for the projections group of math symbols",
|
||||
"math-visualeditor-symbol-group-parentheses": "Label for the parentheses group of math symbols",
|
||||
"math-visualeditor-symbol-group-relations": "Label for the relations group of math symbols",
|
||||
"math-visualeditor-symbol-group-root": "Label for the root group of math symbols",
|
||||
"math-visualeditor-symbol-group-sets": "Label for the sets group of math symbols",
|
||||
"math-visualeditor-symbol-group-spacing": "Label for the spacing group of math symbols",
|
||||
"math-visualeditor-symbol-group-special": "Label for the special group of math symbols",
|
||||
"math-visualeditor-symbol-group-subscripts": "Label for the subscripts group of math symbols",
|
||||
"math-visualeditor-symbol-group-symbols": "Label for the symbols group of math symbols",
|
||||
"math-visualeditor-symbol-group-typefaces": "Label for the typefaces group of math symbols",
|
||||
"math-visualeditor-symbol-group-unsorted": "Label for the unsorted group of math symbols",
|
||||
"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}}.",
|
||||
"math_failure": "Used as error message.\n\nThis message is followed by \"(\", Error message(*1), Additional message, \"): \" and Source code.\n\n(*1) The error message is any one of the following messages:\n* {{msg-mw|Math unknown error}}\n* {{msg-mw|Math unknown function}}\n* {{msg-mw|Math lexing error}}\n* {{msg-mw|Math syntax error}}\n* {{msg-mw|Math image error}}\n* {{msg-mw|Math bad tmpdir}}\n* {{msg-mw|Math bad output}}\n* {{msg-mw|Math notexvc}}\n* {{msg-mw|Math notexvccheck}}\n* {{msg-mw|Math output error}}\n* {{msg-mw|Math timeout}}\n* {{msg-mw|Math invalidresponse}}\n* {{msg-mw|Math invalidxml}}\n* {{msg-mw|Math invalidjson}}",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,76 @@
|
|||
/*!
|
||||
* VisualEditor UserInterface MWMathDialog styles.
|
||||
*
|
||||
* @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
|
||||
* @license The MIT License (MIT); see LICENSE.txt
|
||||
*/
|
||||
|
||||
.ve-ui-mwMathDialog-content .oo-ui-bookletLayout-stackLayout {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.ve-ui-mwMathDialog-content .oo-ui-bookletLayout-stackLayout h3 {
|
||||
margin: 0 0 0.5em 0;
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ve-ui-mwMathDialog-content .oo-ui-textInputWidget {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.ve-ui-mwMathDialog-menuLayout > .oo-ui-menuLayout-content {
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
box-shadow: 0 1px 0 0 rgba( 0, 0, 0, 0.05 );
|
||||
}
|
||||
|
||||
.ve-ui-mwMathPage-symbol {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 0.1em 0.1em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e6e6e6;
|
||||
-webkit-transition: border-color 200ms;
|
||||
-moz-transition: border-color 200ms;
|
||||
-o-transition: border-color 200ms;
|
||||
transition: border-color 200ms;
|
||||
}
|
||||
|
||||
.ve-ui-mwMathPage-symbol-wide {
|
||||
width: 4.65em;
|
||||
}
|
||||
|
||||
.ve-ui-mwMathPage-symbol-contain {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.ve-ui-mwMathPage-symbol-largeLayout {
|
||||
height: 3.7em;
|
||||
width: 4.65em;
|
||||
}
|
||||
|
||||
.ve-ui-mwMathPage-symbol-largeLayout.ve-ui-mwMathPage-symbol-wide {
|
||||
width: 9.4em;
|
||||
}
|
||||
|
||||
.ve.ui.mwMathPage-symbol:hover {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.ve-ui-mwMathDialog-preview {
|
||||
text-align: center;
|
||||
line-height: 10em;
|
||||
height: 10em;
|
||||
}
|
||||
|
||||
.ve-ui-mwMathPage-outline {
|
||||
padding: 0.5em;
|
||||
color: #555;
|
||||
}
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
/*!
|
||||
* VisualEditor user interface MWMathDialog class.
|
||||
*
|
||||
* @copyright 2015 VisualEditor Team and others; see AUTHORS.txt
|
||||
* @license The MIT License (MIT); see LICENSE.txt
|
||||
*/
|
||||
|
||||
/**
|
||||
* Dialog for inserting and editing formulas.
|
||||
*
|
||||
* @class
|
||||
* @extends ve.ui.MWExtensionDialog
|
||||
*
|
||||
* @constructor
|
||||
* @param {Object} [config] Configuration options
|
||||
*/
|
||||
|
||||
ve.ui.MWMathDialog = function VeUiMWMathDialog( config ) {
|
||||
// Parent constructor
|
||||
ve.ui.MWMathDialog.super.call( this, config );
|
||||
|
||||
};
|
||||
|
||||
/* Inheritance */
|
||||
|
||||
OO.inheritClass( ve.ui.MWMathDialog, ve.ui.MWExtensionPreviewDialog );
|
||||
|
||||
/* Static properties */
|
||||
|
||||
ve.ui.MWMathDialog.static.name = 'math';
|
||||
|
||||
ve.ui.MWMathDialog.static.icon = 'math';
|
||||
|
||||
ve.ui.MWMathDialog.static.title = OO.ui.deferMsg( 'math-visualeditor-mwmathdialog-title' );
|
||||
|
||||
ve.ui.MWMathDialog.static.size = 'larger';
|
||||
|
||||
ve.ui.MWMathDialog.static.modelClasses = [ ve.dm.MWMathNode ];
|
||||
|
||||
ve.ui.MWMathDialog.static.dir = 'ltr';
|
||||
|
||||
ve.ui.MWMathDialog.static.symbols = null;
|
||||
|
||||
/* static methods */
|
||||
|
||||
/**
|
||||
* Set the symbols property
|
||||
*
|
||||
* @param {Object} symbols The math symbols and their group names
|
||||
*/
|
||||
ve.ui.MWMathDialog.static.setSymbols = function ( symbols ) {
|
||||
this.symbols = symbols;
|
||||
};
|
||||
|
||||
/* Methods */
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
ve.ui.MWMathDialog.prototype.initialize = function () {
|
||||
var formulaPanel, inputField, displayField, idField, category,
|
||||
formulaCard, optionsCard,
|
||||
dialog = this;
|
||||
|
||||
// Parent method
|
||||
ve.ui.MWMathDialog.super.prototype.initialize.call( this );
|
||||
|
||||
// Layout for the formula inserter (formula card) and options form (options card)
|
||||
this.indexLayout = new OO.ui.IndexLayout( {
|
||||
scrollable: false,
|
||||
expanded: true
|
||||
} );
|
||||
|
||||
formulaCard = new OO.ui.CardLayout( 'formula', {
|
||||
label: ve.msg( 'math-visualeditor-mwmathdialog-card-formula' ),
|
||||
expandable: false,
|
||||
scrollable: false,
|
||||
padded: true
|
||||
} );
|
||||
optionsCard = new OO.ui.CardLayout( 'options', {
|
||||
label: ve.msg( 'math-visualeditor-mwmathdialog-card-options' ),
|
||||
expandable: false,
|
||||
scrollable: false,
|
||||
padded: true
|
||||
} );
|
||||
|
||||
this.indexLayout.addCards( [
|
||||
formulaCard,
|
||||
optionsCard
|
||||
] );
|
||||
|
||||
// Layout for symbol picker (menu) and input and preview (content)
|
||||
this.menuLayout = new OO.ui.MenuLayout( {
|
||||
menuPosition: 'bottom',
|
||||
classes: [ 've-ui-mwMathDialog-menuLayout' ]
|
||||
} );
|
||||
|
||||
this.previewElement.$element.addClass(
|
||||
've-ui-mwMathDialog-preview'
|
||||
);
|
||||
|
||||
this.input = new ve.ui.MWAceEditorWidget( {
|
||||
multiline: true,
|
||||
rows: 7
|
||||
} ).setLanguage( 'latex' );
|
||||
|
||||
this.input.togglePrintMargin( false );
|
||||
|
||||
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' )
|
||||
} );
|
||||
|
||||
formulaPanel = new OO.ui.PanelLayout( {
|
||||
padded: true
|
||||
} );
|
||||
|
||||
// Layout for the symbol picker
|
||||
this.bookletLayout = new OO.ui.BookletLayout( {
|
||||
menuPosition: 'before',
|
||||
outlined: true,
|
||||
continuous: true
|
||||
} );
|
||||
this.pages = [];
|
||||
this.symbolsPromise = mw.loader.using( 'ext.math.visualEditor.symbols' ).done( function () {
|
||||
var symbols = dialog.constructor.static.symbols;
|
||||
for ( category in symbols ) {
|
||||
dialog.pages.push(
|
||||
new ve.ui.MWMathPage( ve.msg( category ), {
|
||||
label: ve.msg( category ),
|
||||
symbols: symbols[ category ]
|
||||
} )
|
||||
);
|
||||
}
|
||||
dialog.bookletLayout.addPages( dialog.pages );
|
||||
dialog.bookletLayout.$element.on(
|
||||
'click',
|
||||
'.ve-ui-mwMathPage-symbol',
|
||||
dialog.onListClick.bind( dialog )
|
||||
);
|
||||
|
||||
// Append everything
|
||||
dialog.menuLayout.$menu.append(
|
||||
dialog.bookletLayout.$element
|
||||
);
|
||||
|
||||
dialog.menuLayout.$content.append(
|
||||
formulaPanel.$element.append(
|
||||
dialog.previewElement.$element,
|
||||
inputField.$element
|
||||
)
|
||||
);
|
||||
|
||||
formulaCard.$element.append(
|
||||
dialog.menuLayout.$element
|
||||
);
|
||||
optionsCard.$element.append(
|
||||
displayField.$element,
|
||||
idField.$element
|
||||
);
|
||||
|
||||
dialog.$body
|
||||
.addClass( 've-ui-mwMathDialog-content' )
|
||||
.append( dialog.indexLayout.$element );
|
||||
} );
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
ve.ui.MWMathDialog.prototype.getSetupProcess = function ( data ) {
|
||||
return ve.ui.MWMathDialog.super.prototype.getSetupProcess.call( this, data )
|
||||
.next( function () {
|
||||
var display = ( this.selectedNode && this.selectedNode.getAttribute( 'mw' ).attrs.display ) || 'default';
|
||||
this.input.on( 'change', this.onChangeHandler );
|
||||
this.displaySelect.selectItemByData( display );
|
||||
}, this );
|
||||
};
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
ve.ui.MWMathDialog.prototype.getReadyProcess = function ( data ) {
|
||||
return ve.ui.MWMathDialog.super.prototype.getReadyProcess.call( this, data )
|
||||
.next( function () {
|
||||
return this.symbolsPromise;
|
||||
}, this );
|
||||
};
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
ve.ui.MWMathDialog.prototype.getTeardownProcess = function ( data ) {
|
||||
return ve.ui.MWMathDialog.super.prototype.getTeardownProcess.call( this, data )
|
||||
.first( function () {
|
||||
this.input.off( 'change', this.onChangeHandler );
|
||||
}, this );
|
||||
};
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
ve.ui.MWMathDialog.prototype.getBodyHeight = function () {
|
||||
return 600;
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the click event on the list
|
||||
*
|
||||
* @param {jQuery.Event} e Mouse click event
|
||||
*/
|
||||
ve.ui.MWMathDialog.prototype.onListClick = function ( e ) {
|
||||
var symbol = $( e.target ).data( 'symbol' ),
|
||||
encapsulate = symbol.encapsulate,
|
||||
insert = symbol.insert,
|
||||
range = this.input.getRange();
|
||||
|
||||
if ( encapsulate ) {
|
||||
if ( range.from === range.to ) {
|
||||
this.input.insertContent( encapsulate.placeholder );
|
||||
this.input.selectRange( range.from, range.from + encapsulate.placeholder.length );
|
||||
}
|
||||
this.input.encapsulateContent( encapsulate.pre, encapsulate.post );
|
||||
} else {
|
||||
this.input.insertContent( insert );
|
||||
}
|
||||
};
|
||||
|
||||
/* Registration */
|
||||
|
||||
ve.ui.windowFactory.register( ve.ui.MWMathDialog );
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
/*!
|
||||
* 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;
|
||||
}
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
/*!
|
||||
* 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 = 'math';
|
||||
|
||||
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 );
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
/*!
|
||||
* VisualEditor user interface MWMathPage class.
|
||||
*
|
||||
* @copyright 2015 VisualEditor Team and others; see AUTHORS.txt
|
||||
* @license The MIT License (MIT); see LICENSE.txt
|
||||
*/
|
||||
|
||||
/**
|
||||
* Math dialog symbols page
|
||||
*
|
||||
* @class
|
||||
* @extends OO.ui.PageLayout
|
||||
*
|
||||
* @constructor
|
||||
* @param {string} name Unique symbolic name of page
|
||||
* @param {Object} [config] Configuration options
|
||||
*/
|
||||
ve.ui.MWMathPage = function VeUiMWMathPage( name, config ) {
|
||||
var i, ilen, j, jlen, insert, symbol, symbols, $symbols,
|
||||
symbolNode, symbolsNode, tex, classes;
|
||||
|
||||
// Parent constructor
|
||||
ve.ui.MWMathPage.super.call( this, name, config );
|
||||
|
||||
this.label = config.label;
|
||||
|
||||
symbols = config.symbols;
|
||||
$symbols = $( '<div>' ).addClass( 've-ui-specialCharacterPage-characters' );
|
||||
symbolsNode = $symbols[ 0 ];
|
||||
|
||||
// Avoiding jQuery wrappers as advised in ve.ui.SpecialCharacterPage
|
||||
for ( i = 0, ilen = symbols.length; i < ilen; i++ ) {
|
||||
symbol = symbols[ i ];
|
||||
if ( !symbol.notWorking && !symbol.duplicate ) {
|
||||
tex = symbol.tex;
|
||||
insert = symbol.insert;
|
||||
classes = [ 've-ui-mwMathPage-symbol' ];
|
||||
classes.push(
|
||||
've-ui-mwMathSymbol-' + tex.replace( /[^\w]/g, function ( c ) {
|
||||
return '_' + c.charCodeAt( 0 ) + '_';
|
||||
} )
|
||||
);
|
||||
if ( symbol.wide ) {
|
||||
classes.push( 've-ui-mwMathPage-symbol-wide' );
|
||||
}
|
||||
if ( symbol.contain ) {
|
||||
classes.push( 've-ui-mwMathPage-symbol-contain' );
|
||||
}
|
||||
if ( symbol.largeLayout ) {
|
||||
classes.push( 've-ui-mwMathPage-symbol-largeLayout' );
|
||||
}
|
||||
symbolNode = document.createElement( 'div' );
|
||||
for ( j = 0, jlen = classes.length; j < jlen; j++ ) {
|
||||
symbolNode.classList.add( classes[ j ] );
|
||||
}
|
||||
$.data( symbolNode, 'symbol', symbol );
|
||||
symbolsNode.appendChild( symbolNode );
|
||||
}
|
||||
}
|
||||
|
||||
this.$element
|
||||
.addClass( 've-ui-mwMathPage' )
|
||||
.append( $( '<h3>' ).text( name ), $symbols );
|
||||
};
|
||||
|
||||
/* Inheritance */
|
||||
|
||||
OO.inheritClass( ve.ui.MWMathPage, OO.ui.PageLayout );
|
||||
|
||||
/* Methods */
|
||||
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
ve.ui.MWMathPage.prototype.setupOutlineItem = function ( outlineItem ) {
|
||||
ve.ui.MWMathPage.super.prototype.setupOutlineItem.call( this, outlineItem );
|
||||
this.outlineItem.setLabel( this.label );
|
||||
this.outlineItem.$element.addClass( 've-ui-mwMathPage-outline' );
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue