Your IP : 216.73.216.54
/*!
* VisualEditor user interface MWLatexDialog class.
*
* @copyright See AUTHORS.txt
* @license MIT
*/
/**
* Abstract dialog for inserting and editing different formulas
* provided by the Math extension.
*
* @abstract
* @class
* @extends ve.ui.MWExtensionPreviewDialog
*
* @constructor
* @param {Object} [config] Configuration options
*/
ve.ui.MWLatexDialog = function VeUiMWLatexDialog( config ) {
// Parent constructor
ve.ui.MWLatexDialog.super.call( this, config );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWLatexDialog, ve.ui.MWExtensionPreviewDialog );
/* Static properties */
ve.ui.MWLatexDialog.static.size = 'larger';
ve.ui.MWLatexDialog.static.dir = 'ltr';
ve.ui.MWLatexDialog.static.symbolsModule = null;
/* Methods */
/**
* @inheritdoc
*/
ve.ui.MWLatexDialog.prototype.initialize = function () {
// Parent method
ve.ui.MWLatexDialog.super.prototype.initialize.call( this );
// Layout for the formula inserter (formula tab panel) and options form (options tab panel)
this.indexLayout = new OO.ui.IndexLayout();
const formulaTabPanel = new OO.ui.TabPanelLayout( 'formula', {
label: ve.msg( 'math-visualeditor-mwlatexdialog-card-formula' ),
padded: true,
classes: [ 'latex-dialog-formula-panel' ]
} );
const optionsTabPanel = new OO.ui.TabPanelLayout( 'options', {
label: ve.msg( 'math-visualeditor-mwlatexdialog-card-options' ),
padded: true,
classes: [ 'latex-dialog-options-panel' ]
} );
this.indexLayout.addTabPanels( [
formulaTabPanel,
optionsTabPanel
] );
// Layout for symbol picker (menu) and input and preview (content)
this.menuLayout = new OO.ui.MenuLayout( {
menuPosition: 'bottom',
classes: [ 've-ui-mwLatexDialog-menuLayout' ]
} );
this.previewElement.$element.addClass(
've-ui-mwLatexDialog-preview'
);
this.input = new ve.ui.MWAceEditorWidget( {
rows: 1, // This will be recalculated later in onWindowManagerResize
autocomplete: 'live',
autocompleteWordList: this.constructor.static.autocompleteWordList
} ).setLanguage( 'latex' );
this.input.togglePrintMargin( false );
this.displaySelect = new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget( {
data: 'default',
icon: 'mathematicsDisplayDefault',
label: ve.msg( 'math-visualeditor-mwlatexinspector-display-default' )
} ),
new OO.ui.ButtonOptionWidget( {
data: 'inline',
icon: 'mathematicsDisplayInline',
label: ve.msg( 'math-visualeditor-mwlatexinspector-display-inline' )
} ),
new OO.ui.ButtonOptionWidget( {
data: 'block',
icon: 'mathematicsDisplayBlock',
label: ve.msg( 'math-visualeditor-mwlatexinspector-display-block' )
} )
]
} );
this.idInput = new OO.ui.TextInputWidget();
this.qidInput = new mw.widgets.MathWbEntitySelector();
const inputField = new OO.ui.FieldLayout( this.input, {
align: 'top',
classes: [ 'latex-dialog-formula-field' ],
label: ve.msg( 'math-visualeditor-mwlatexdialog-card-formula' )
} );
const displayField = new OO.ui.FieldLayout( this.displaySelect, {
align: 'top',
classes: [ 'latex-dialog-display-field' ],
label: ve.msg( 'math-visualeditor-mwlatexinspector-display' )
} );
const idField = new OO.ui.FieldLayout( this.idInput, {
align: 'top',
classes: [ 'latex-dialog-id-field' ],
label: ve.msg( 'math-visualeditor-mwlatexinspector-id' )
} );
const qidField = new OO.ui.FieldLayout( this.qidInput, {
align: 'top',
classes: [ 'latex-dialog-qid-field' ],
label: ve.msg( 'math-visualeditor-mwlatexinspector-qid' )
} );
const formulaPanel = new OO.ui.PanelLayout( {
scrollable: true,
padded: true
} );
// Layout for the symbol picker
this.bookletLayout = new ve.ui.SymbolListBookletLayout( {
classes: [ 've-ui-mwLatexDialog-symbols' ]
} );
this.pages = [];
this.symbolsPromise = mw.loader.using( this.constructor.static.symbolsModule ).done( ( require ) => {
// eslint-disable-next-line security/detect-non-literal-require
const symbols = require( this.constructor.static.symbolsModule );
const symbolData = {};
for ( const category in symbols ) {
const symbolList = symbols[ category ].filter( ( 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, ( c ) => '_' + 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' );
}
// T366737 - make sure the symbols appear in night mode
classes.push( 'skin-invert' );
symbol.label = '';
symbol.classes = classes;
return true;
} );
symbolData[ category ] = {
// eslint-disable-next-line mediawiki/msg-doc
label: ve.msg( category ),
symbols: symbolList
};
}
this.bookletLayout.setSymbolData( symbolData );
this.bookletLayout.connect( this, {
choose: 'onSymbolChoose'
} );
// Append everything
formulaPanel.$element.append(
this.previewElement.$element,
inputField.$element
);
this.menuLayout.setMenuPanel( this.bookletLayout );
this.menuLayout.setContentPanel( formulaPanel );
formulaTabPanel.$element.append(
this.menuLayout.$element
);
optionsTabPanel.$element.append(
displayField.$element,
idField.$element,
qidField.$element
);
this.$body
.addClass( 've-ui-mwLatexDialog-content' )
.append( this.indexLayout.$element );
} );
};
/**
* @inheritdoc
*/
ve.ui.MWLatexDialog.prototype.getSetupProcess = function ( data ) {
return ve.ui.MWLatexDialog.super.prototype.getSetupProcess.call( this, data )
.next( () => {
const attributes = this.selectedNode && this.selectedNode.getAttribute( 'mw' ).attrs,
display = attributes && attributes.display || 'default',
id = attributes && attributes.id || '',
qid = attributes && attributes.qid || '',
isReadOnly = this.isReadOnly();
// Populate form
// TODO: This widget is not readable when disabled
this.displaySelect.selectItemByData( display ).setDisabled( isReadOnly );
this.idInput.setValue( id ).setReadOnly( isReadOnly );
this.qidInput.setValue( qid ).setReadOnly( isReadOnly );
// Add event handlers
this.input.on( 'change', this.onChangeHandler );
this.displaySelect.on( 'choose', this.onChangeHandler );
this.idInput.on( 'change', this.onChangeHandler );
this.qidInput.on( 'change', this.onChangeHandler );
} );
};
/**
* @inheritdoc
*/
ve.ui.MWLatexDialog.prototype.getReadyProcess = function ( data ) {
mw.hook( 've.ui.MwLatexDialogReadyProcess' ).fire();
return ve.ui.MWLatexDialog.super.prototype.getReadyProcess.call( this, data )
.next( () => this.symbolsPromise )
.next( () => {
// Resize the input once the dialog has been appended
this.input.adjustSize( true ).focus().moveCursorToEnd();
this.getManager().connect( this, { resize: 'onWindowManagerResize' } );
this.onWindowManagerResize();
} );
};
/**
* @inheritdoc
*/
ve.ui.MWLatexDialog.prototype.getTeardownProcess = function ( data ) {
return ve.ui.MWLatexDialog.super.prototype.getTeardownProcess.call( this, data )
.first( () => {
this.input.off( 'change', this.onChangeHandler );
this.displaySelect.off( 'choose', this.onChangeHandler );
this.idInput.off( 'change', this.onChangeHandler );
this.qidInput.off( 'change', this.onChangeHandler );
this.getManager().disconnect( this );
this.indexLayout.setTabPanel( 'formula' );
this.indexLayout.resetScroll();
this.menuLayout.resetScroll();
this.bookletLayout.resetScroll();
} );
};
/**
* @inheritdoc
*/
ve.ui.MWLatexDialog.prototype.updateMwData = function ( mwData ) {
// Parent method
ve.ui.MWLatexDialog.super.prototype.updateMwData.call( this, mwData );
// Get data from dialog
const display = this.displaySelect.findSelectedItem().getData();
const id = this.idInput.getValue();
const qid = this.qidInput.getValue();
// Update attributes
mwData.attrs.display = display !== 'default' ? display : undefined;
mwData.attrs.id = id || undefined;
mwData.attrs.qid = qid || undefined;
};
/**
* @inheritdoc
*/
ve.ui.MWLatexDialog.prototype.getBodyHeight = function () {
return 600;
};
/**
* Handle the window resize event
*/
ve.ui.MWLatexDialog.prototype.onWindowManagerResize = function () {
this.input.loadingPromise.always( () => {
// Toggle short mode as necessary
// NB a change of mode triggers a transition...
this.menuLayout.$element.toggleClass(
've-ui-mwLatexDialog-menuLayout-short', this.menuLayout.$element.height() < 450
);
// ...So wait for the possible menuLayout transition to finish
setTimeout( () => {
// Give the input the right number of rows to fit the space
const availableSpace = this.menuLayout.$content.height() - this.input.$element.position().top;
// TODO: Compute this line height from the skin
const singleLineHeight = 21;
const border = 1;
const padding = 3;
const borderAndPadding = 2 * ( border + padding );
const maxInputHeight = availableSpace - borderAndPadding;
const minRows = Math.floor( maxInputHeight / singleLineHeight );
this.input.loadingPromise.done( () => {
this.input.setMinRows( minRows );
} ).fail( () => {
this.input.$input.attr( 'rows', minRows );
} );
}, OO.ui.theme.getDialogTransitionDuration() );
} );
};
/**
* Handle a symbol being chosen from the list
*
* @param {Object} symbol
*/
ve.ui.MWLatexDialog.prototype.onSymbolChoose = function ( symbol ) {
if ( this.isReadOnly() ) {
return;
}
const encapsulate = symbol.encapsulate;
if ( encapsulate ) {
const range = this.input.getRange();
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 {
const insert = symbol.insert;
this.input.insertContent( insert );
}
};