mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-12 09:21:11 +00:00
31 lines
999 B
JavaScript
31 lines
999 B
JavaScript
const features = require( './features.js' );
|
|
const LIMITED_WIDTH_FEATURE_NAME = 'limited-width';
|
|
|
|
/**
|
|
* Sets data attribute for click tracking purposes.
|
|
*
|
|
* @param {HTMLElement} toggleBtn
|
|
*/
|
|
function setDataAttribute( toggleBtn ) {
|
|
toggleBtn.dataset.eventName = features.isEnabled( LIMITED_WIDTH_FEATURE_NAME ) ?
|
|
'limited-width-toggle-off' : 'limited-width-toggle-on';
|
|
}
|
|
/**
|
|
* adds a toggle button
|
|
*/
|
|
function init() {
|
|
const toggle = document.createElement( 'button' );
|
|
toggle.setAttribute( 'title', mw.msg( 'vector-limited-width-toggle' ) );
|
|
toggle.setAttribute( 'aria-hidden', 'true' );
|
|
toggle.textContent = mw.msg( 'vector-limited-width-toggle' );
|
|
toggle.classList.add( 'mw-ui-icon', 'mw-ui-icon-element', 'mw-ui-button', 'vector-limited-width-toggle' );
|
|
setDataAttribute( toggle );
|
|
document.body.appendChild( toggle );
|
|
toggle.addEventListener( 'click', function () {
|
|
features.toggle( LIMITED_WIDTH_FEATURE_NAME );
|
|
setDataAttribute( toggle );
|
|
} );
|
|
}
|
|
|
|
module.exports = init;
|