/*!
* VisualEditor user interface SymbolListPage class.
*
* @copyright See AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Special symbol toolbar dialog.
*
* @class
* @extends OO.ui.PageLayout
*
* @constructor
* @param {string} name Unique symbolic name of page
* @param {Object} [config] Configuration options
* @param {string} [config.label] Group label
* @param {Object} [config.symbols] Symbol set
* @param {Object} [config.attributes] Extra attributes for the group, e.g. `lang` & `dir`
*/
ve.ui.SymbolListPage = function VeUiSymbolListPage( name, config ) {
// Parent constructor
ve.ui.SymbolListPage.super.apply( this, arguments );
this.label = config.label;
const $symbols = $( '<div>' ).addClass( 've-ui-symbolListPage-symbols' );
const symbolsNode = $symbols[ 0 ];
// It is assumed this loop may contain hundreds or thousands of symbols,
// so avoid jQuery and use plain DOM.
config.symbols.forEach( ( symbol ) => {
const symbolNode = document.createElement( 'div' );
symbolNode.classList.add( 've-ui-symbolListPage-symbol' );
if ( symbol.classes ) {
DOMTokenList.prototype.add.apply( symbolNode.classList, symbol.classes );
}
if ( symbol.titleMsg ) {
// eslint-disable-next-line mediawiki/msg-doc
symbolNode.setAttribute( 'title', ve.msg( symbol.titleMsg ) );
}
symbolNode.textContent = Object.prototype.hasOwnProperty.call( symbol, 'label' ) ? symbol.label : symbol;
$.data( symbolNode, 'symbol', symbol );
symbolsNode.appendChild( symbolNode );
} );
if ( config.attributes ) {
$symbols.attr( config.attributes );
}
this.$element
.addClass( 've-ui-symbolListPage' )
.append( $( '<h3>' ).text( this.label ), $symbols );
};
/* Inheritance */
OO.inheritClass( ve.ui.SymbolListPage, OO.ui.PageLayout );
/* Methods */
/**
* @inheritdoc
*/
ve.ui.SymbolListPage.prototype.setupOutlineItem = function () {
// Parent method
ve.ui.SymbolListPage.super.prototype.setupOutlineItem.apply( this, arguments );
this.outlineItem.setLabel( this.label );
};