mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-29 01:45:00 +00:00
87959c8a59
In preparation for 856718 where pinnableElement.js makes use of features.js, move features.js and limitedWidthToggle.js out of the skins.vector.js module and into the skins.vector.es6 module. This will make it easier to use by pinnableElement.js without needing the es6 module to depend on the es5 module. This does have the negative side-effect of causing the limited width feature to not be supported by IE11 (and other non-ES6 browsers), however this tradeoff was discussed with our product manager to be acceptable. Additionally, this maintains the status quo as the toggle button does not currently show in IE11 (which may be a bug). Bug: T322051 Change-Id: If0e8cb98deabe847c2cc71fddb90ca36d15e5f8f
28 lines
815 B
JavaScript
28 lines
815 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.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;
|