wikimedia/mediawiki-extensions-Math
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Math synced 2024-11-23 23:25:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use new SymbolListBookletLayout instead of MWLatexPage

Browse source 
Depends-On: I357595ae490b36bcf5dd477a95c5684f3a246753
Bug: T120512
Change-Id: Ifbfb8e9d20c12d1ad8c347bb56a54d9e4eaf236f
This commit is contained in:
Ed Sanders 2023-12-21 14:22:51 +00:00 committed by Bartosz Dziewoński
parent 1cee1f5b11
commit 8d6ad58768
5 changed files with 79 additions and 168 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
extension.json
View file

@ -241,7 +241,6 @@
"ve-math/ve.ce.MWLatexNode.js",
"ve-math/ve.ui.MWLatexInspector.js",
"ve-math/ve.ui.MWLatexContextItem.js",
"ve-math/ve.ui.MWLatexPage.js",
"ve-math/ve.ui.MWLatexDialog.js",
"ve-math/ve.dm.MWChemNode.js",
"ve-math/ve.ce.MWChemNode.js",
@ -261,8 +260,7 @@
"ve-math/ve.ui.MWLatexDialog.css",
"ve-math/ve.ce.MWLatexNode.css",
"ve-math/ve.ui.MWLatexInspector.css",
"ve-math/ve.ui.MWLatexContextItem.css",
"ve-math/ve.ui.MWLatexPage.css"
"ve-math/ve.ui.MWLatexContextItem.css"
],
"dependencies": [
"ext.visualEditor.mwcore",

34
modules/ve-math/ve.ui.MWLatexDialog.css
View file

@ -55,6 +55,36 @@
display: inline-block;
}
.ve-ui-mwLatexDialog-symbols .oo-ui-outlineOptionWidget {
padding-left: 0.75em;
.ve-ui-mwLatexDialog-symbol {
background-position: center;
background-repeat: no-repeat;
}
.ve-ui-mwLatexDialog-symbol-wide {
/* 2(symbol width) + margin */
width: 3.7em;
}
.ve-ui-mwLatexDialog-symbol-wider {
/* 2.5(symbol width) + 1.5(margin) */
width: 4.65em;
}
.ve-ui-mwLatexDialog-symbol-widest {
/* 3(symbol width) + 2(margin) */
width: 5.6em;
}
.ve-ui-mwLatexDialog-symbol-contain {
background-size: contain;
}
.ve-ui-mwLatexDialog-symbol-largeLayout {
height: 3.7em;
width: 4.65em;
}
.ve-ui-mwLatexDialog-symbol-largeLayout.ve-ui-mwLatexDialog-symbol-wide {
/* 5(symbol width) + 4(margin) */
width: 9.4em;
}

69
modules/ve-math/ve.ui.MWLatexDialog.js
View file

@ -131,34 +131,54 @@ ve.ui.MWLatexDialog.prototype.initialize = function () {
} );
// Layout for the symbol picker
this.bookletLayout = new OO.ui.BookletLayout( {
classes: [ 've-ui-mwLatexDialog-symbols' ],
menuPosition: 'before',
outlined: true,
continuous: true
this.bookletLayout = new ve.ui.SymbolListBookletLayout( {
classes: [ 've-ui-mwLatexDialog-symbols' ]
} );
this.pages = [];
this.symbolsPromise = mw.loader.using( this.constructor.static.symbolsModule ).done( function ( require ) {
// eslint-disable-next-line security/detect-non-literal-require
const symbols = require( dialog.constructor.static.symbolsModule );
const symbolData = {};
for ( const category in symbols ) {
dialog.pages.push(
new ve.ui.MWLatexPage(
// eslint-disable-next-line mediawiki/msg-doc
ve.msg( category ),
{
const symbolList = symbols[ category ].filter( function ( symbol ) {
if ( symbol.notWorking || symbol.duplicate ) {
return false;
}
const tex = symbol.tex || symbol.insert;
const classes = [ 've-ui-mwLatexDialog-symbol' ];
classes.push(
've-ui-mwLatexSymbol-' + tex.replace( /[^\w]/g, function ( c ) {
return '_' + c.charCodeAt( 0 ) + '_';
} )
);
if ( symbol.width ) {
// The following classes are used here:
// * ve-ui-mwLatexDialog-symbol-wide
// * ve-ui-mwLatexDialog-symbol-wider
// * ve-ui-mwLatexDialog-symbol-widest
classes.push( 've-ui-mwLatexDialog-symbol-' + symbol.width );
}
if ( symbol.contain ) {
classes.push( 've-ui-mwLatexDialog-symbol-contain' );
}
if ( symbol.largeLayout ) {
classes.push( 've-ui-mwLatexDialog-symbol-largeLayout' );
}
symbol.label = '';
symbol.classes = classes;
return true;
} );
symbolData[ category ] = {
// eslint-disable-next-line mediawiki/msg-doc
label: ve.msg( category ),
symbols: symbols[ category ]
symbols: symbolList
};
}
)
);
}
dialog.bookletLayout.addPages( dialog.pages );
dialog.bookletLayout.$element.on(
'click',
'.ve-ui-mwLatexPage-symbol',
dialog.onListClick.bind( dialog )
);
dialog.bookletLayout.setSymbolData( symbolData );
dialog.bookletLayout.connect( dialog, {
choose: 'onSymbolChoose'
} );
// Append everything
formulaPanel.$element.append(
@ -303,17 +323,16 @@ ve.ui.MWLatexDialog.prototype.onWindowManagerResize = function () {
};
/**
* Handle the click event on the list
* Handle a symbol being chosen from the list
*
* @param {jQuery.Event} e Mouse click event
* @param {Object} symbol
*/
ve.ui.MWLatexDialog.prototype.onListClick = function ( e ) {
ve.ui.MWLatexDialog.prototype.onSymbolChoose = function ( symbol ) {
if ( this.isReadOnly() ) {
return;
}
const symbol = $( e.target ).data( 'symbol' ),
encapsulate = symbol.encapsulate;
const encapsulate = symbol.encapsulate;
if ( encapsulate ) {
const range = this.input.getRange();

55
modules/ve-math/ve.ui.MWLatexPage.css
View file

@ -1,55 +0,0 @@
/*!
* VisualEditor UserInterface MWLatexPage styles.
*
* @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
* @license MIT
*/
.ve-ui-mwLatexPage-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;
transition: border-color 200ms;
}
.ve-ui-mwLatexPage-symbol:hover {
border-color: #ccc;
}
.ve-ui-mwLatexPage-symbol-wide {
/* 2(symbol width) + margin */
width: 3.7em;
}
.ve-ui-mwLatexPage-symbol-wider {
/* 2.5(symbol width) + 1.5(margin) */
width: 4.65em;
}
.ve-ui-mwLatexPage-symbol-widest {
/* 3(symbol width) + 2(margin) */
width: 5.6em;
}
.ve-ui-mwLatexPage-symbol-contain {
background-size: contain;
}
.ve-ui-mwLatexPage-symbol-largeLayout {
height: 3.7em;
width: 4.65em;
}
.ve-ui-mwLatexPage-symbol-largeLayout.ve-ui-mwLatexPage-symbol-wide {
/* 5(symbol width) + 4(margin) */
width: 9.4em;
}

81
modules/ve-math/ve.ui.MWLatexPage.js
View file

@ -1,81 +0,0 @@
/*!
* VisualEditor user interface MWLatexPage class.
*
* @copyright 2015 VisualEditor Team and others; see AUTHORS.txt
* @license MIT
*/
/**
* Latex dialog symbols page
*
* @class
* @extends OO.ui.PageLayout
*
* @constructor
* @param {string} name Unique symbolic name of page
* @param {Object} [config] Configuration options
*/
ve.ui.MWLatexPage = function VeUiMWLatexPage( name, config ) {
// Parent constructor
ve.ui.MWLatexPage.super.call( this, name, config );
this.label = config.label;
const symbols = config.symbols;
const $symbols = $( '<div>' ).addClass( 've-ui-specialCharacterPage-characters' );
const symbolsNode = $symbols[ 0 ];
// Avoiding jQuery wrappers as advised in ve.ui.SpecialCharacterPage
symbols.forEach( function ( symbol ) {
if ( !symbol.notWorking && !symbol.duplicate ) {
const tex = symbol.tex || symbol.insert;
const classes = [ 've-ui-mwLatexPage-symbol' ];
classes.push(
've-ui-mwLatexSymbol-' + tex.replace( /[^\w]/g, function ( c ) {
return '_' + c.charCodeAt( 0 ) + '_';
} )
);
if ( symbol.width ) {
classes.push( 've-ui-mwLatexPage-symbol-' + symbol.width );
}
if ( symbol.contain ) {
classes.push( 've-ui-mwLatexPage-symbol-contain' );
}
if ( symbol.largeLayout ) {
classes.push( 've-ui-mwLatexPage-symbol-largeLayout' );
}
const symbolNode = document.createElement( 'div' );
classes.forEach( function ( className ) {
// The following classes are used here:
// * ve-ui-mwLatexPage-symbol
// * ve-ui-mwLatexPage-symbol-wide
// * ve-ui-mwLatexPage-symbol-wider
// * ve-ui-mwLatexPage-symbol-widest
// * ve-ui-mwLatexPage-symbol-contain
// * ve-ui-mwLatexPage-symbol-largeLayout
symbolNode.classList.add( className );
} );
$.data( symbolNode, 'symbol', symbol );
symbolsNode.appendChild( symbolNode );
}
} );
this.$element
.addClass( 've-ui-mwLatexPage' )
.append( $( '<h3>' ).text( name ), $symbols );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWLatexPage, OO.ui.PageLayout );
/* Methods */
/**
* @inheritdoc
*/
ve.ui.MWLatexPage.prototype.setupOutlineItem = function ( outlineItem ) {
ve.ui.MWLatexPage.super.prototype.setupOutlineItem.call( this, outlineItem );
this.outlineItem.setLabel( this.label );
this.outlineItem.$element.addClass( 've-ui-mwLatexPage-outline' );
};