mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-25 08:05:51 +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
72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
/** @interface MwApi */
|
|
|
|
let /** @type {MwApi} */ api;
|
|
const debounce = require( /** @type {string} */ ( 'mediawiki.util' ) ).debounce;
|
|
|
|
/**
|
|
* Saves preference to user preferences and/or localStorage.
|
|
*
|
|
* @param {string} feature
|
|
* @param {boolean} enabled
|
|
*/
|
|
function save( feature, enabled ) {
|
|
let featuresJSON;
|
|
// @ts-ignore
|
|
const features = mw.storage.get( 'VectorFeatures' ) || '{}';
|
|
|
|
try {
|
|
featuresJSON = JSON.parse( features );
|
|
} catch ( e ) {
|
|
featuresJSON = {};
|
|
}
|
|
featuresJSON[ feature ] = enabled;
|
|
// @ts-ignore
|
|
mw.storage.set( 'VectorFeatures', JSON.stringify( featuresJSON ) );
|
|
|
|
if ( !mw.user.isAnon() ) {
|
|
debounce( function () {
|
|
api = api || new mw.Api();
|
|
api.saveOption( 'vector-' + feature, enabled ? 1 : 0 );
|
|
}, 500 )();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {string} name
|
|
* @throws {Error} if unknown feature toggled.
|
|
*/
|
|
function toggle( name ) {
|
|
const featureClassEnabled = 'vector-feature-' + name + '-enabled',
|
|
classList = document.body.classList,
|
|
featureClassDisabled = 'vector-feature-' + name + '-disabled';
|
|
|
|
if ( classList.contains( featureClassDisabled ) ) {
|
|
classList.remove( featureClassDisabled );
|
|
classList.add( featureClassEnabled );
|
|
save( name, true );
|
|
} else if ( classList.contains( featureClassEnabled ) ) {
|
|
classList.add( featureClassDisabled );
|
|
classList.remove( featureClassEnabled );
|
|
save( name, false );
|
|
} else {
|
|
throw new Error( 'Attempt to toggle unknown feature: ' + name );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Checks if the feature is enabled.
|
|
*
|
|
* @param {string} name
|
|
* @return {boolean}
|
|
*/
|
|
function isEnabled( name ) {
|
|
return document.body.classList.contains(
|
|
'vector-feature-' + name + '-enabled'
|
|
);
|
|
}
|
|
|
|
module.exports = {
|
|
isEnabled: isEnabled,
|
|
toggle: toggle
|
|
};
|