All files / src/ui/layouts ve.ui.SymbolListBookletLayout.js

17.07% Statements 7/41
0% Branches 0/22
0% Functions 0/6
17.07% Lines 7/41

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134                              1x                                     1x                   1x                 1x                                       1x                                   1x                                                                   1x                
/*!
 * VisualEditor UserInterface SymbolListBookletLayout class.
 *
 * @copyright See AUTHORS.txt
 */
 
/**
 * ...
 *
 * @class
 * @extends OO.ui.BookletLayout
 *
 * @constructor
 * @param {Object} [config] Configuration options
 */
ve.ui.SymbolListBookletLayout = function VeUiSymbolListBookletLayout( config ) {
	config = config || {};
 
	// Parent constructor
	ve.ui.SymbolListBookletLayout.super.call( this, ve.extendObject( {
		outlined: true,
		continuous: true
	}, config ) );
 
	if ( config.preferenceNameSuffix && ve.init.platform.canUseUserConfig() ) {
		this.recentlyUsedKey = 'visualeditor-symbolList-recentlyUsed-' + config.preferenceNameSuffix;
		this.recentlyUsed = ve.userConfig( this.recentlyUsedKey ) || [];
	}
 
	this.$element.addClass( 've-ui-symbolListBookletLayout' );
};
 
/* Inheritance */
 
OO.inheritClass( ve.ui.SymbolListBookletLayout, OO.ui.BookletLayout );
 
/* Static properties */
 
/**
 * Sets how many entries to keep in the "recently used" list
 *
 * @static
 * @property {number}
 */
ve.ui.SymbolListBookletLayout.static.maxRecentlyUsed = 32;
 
/* Methods */
 
/**
 * Set symbol data
 *
 * @param {Object} symbolData
 */
ve.ui.SymbolListBookletLayout.prototype.setSymbolData = function ( symbolData ) {
	const pages = [];
	for ( const category in symbolData ) {
		pages.push(
			new ve.ui.SymbolListPage( category, symbolData[ category ] )
		);
	}
	this.addPages( pages );
	this.$element.on(
		'click',
		'.ve-ui-symbolListPage-symbol',
		this.onListClick.bind( this )
	);
 
	this.renderRecentlyUsed();
};
 
/**
 * Set recent data
 */
ve.ui.SymbolListBookletLayout.prototype.renderRecentlyUsed = function () {
	if ( this.recentlyUsed === undefined ) {
		return;
	}
	const recentPage = new ve.ui.SymbolListPage( 'recent', {
		label: ve.msg( 'visualeditor-specialcharacter-recentlyused' ),
		symbols: this.recentlyUsed,
		attributes: { 'data-recent': '' }
	} );
	this.addPages( [ recentPage ], 0 );
};
 
/**
 * Inserts a character at the start of the recently-used list and updates the user preference.
 *
 * @param {string|Object} character A symbol string or object
 * @param {boolean} fromRecentList Set when the symbol was chosen from the recently-used list. Inhibits a rerender.
 */
ve.ui.SymbolListBookletLayout.prototype.updateRecentlyUsed = function ( character, fromRecentList ) {
	if ( this.recentlyUsed === undefined ) {
		return;
	}
 
	const seen = this.recentlyUsed.findIndex(
		( c ) => JSON.stringify( c ) === JSON.stringify( character )
	);
	if ( seen === 0 ) {
		// The character is already the most recently-used, so there's no need to update anything
		return;
	}
	if ( seen !== -1 ) {
		// This character is already in the list - remove it so we can re-insert it at the start
		this.recentlyUsed.splice( seen, 1 );
	}
	this.recentlyUsed.unshift( character );
	this.recentlyUsed = this.recentlyUsed.slice( 0, this.constructor.static.maxRecentlyUsed );
 
	if ( this.recentlyUsedKey !== undefined ) {
		ve.userConfig( this.recentlyUsedKey, this.recentlyUsed );
	}
 
	/* Avoid re-ordering the list under the user's cursor */
	if ( !fromRecentList ) {
		this.renderRecentlyUsed();
	}
};
 
/**
 * Handle the click event on the list
 *
 * @param {jQuery.Event} e Mouse click event
 */
ve.ui.SymbolListBookletLayout.prototype.onListClick = function ( e ) {
	const symbol = $( e.target ).data( 'symbol' );
 
	if ( symbol ) {
		this.emit( 'choose', symbol );
		this.updateRecentlyUsed( symbol, e.target.parentNode.hasAttribute( 'data-recent' ) );
	}
};