mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-30 02:15:49 +00:00
4d1c0b8940
At resolutions below 1000px, we want pinned elements such as the Page Tools menu and Main Menu to collapse. This behaviour is temporary and when the browser is resized, the pinned elements should revert to their previous pinned state. We also want to remove the ability to pin these menus at low resolutions, so the "hide/move" button is hidden. A new matchMedia event handler is added to PinnableElement.js to handle this behaviour. CSS is also added to hide the pinned menus at low resolution. This is to account for the situation where the page is loaded at narrow widths, with pinned elements, and the JS hasn't loaded yet. features.js is refactors so that class toggling can happen independently of saving the state to user preferences (since we want to toggle the classes but not save the state at lower resolutions). Bug: T326364 Change-Id: I3113ab83deb15843e04ed63ec767a85c522517b5
82 lines
2.1 KiB
JavaScript
82 lines
2.1 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 feature name
|
|
* @param {boolean} [override] option to force enabled or disabled state.
|
|
*
|
|
* @return {boolean} The new feature state (false=disabled, true=enabled).
|
|
* @throws {Error} if unknown feature toggled.
|
|
*/
|
|
function toggleBodyClasses( name, override ) {
|
|
const featureClassEnabled = 'vector-feature-' + name + '-enabled',
|
|
classList = document.body.classList,
|
|
featureClassDisabled = 'vector-feature-' + name + '-disabled';
|
|
|
|
if ( classList.contains( featureClassDisabled ) || override === true ) {
|
|
classList.remove( featureClassDisabled );
|
|
classList.add( featureClassEnabled );
|
|
return true;
|
|
} else if ( classList.contains( featureClassEnabled ) || override === false ) {
|
|
classList.add( featureClassDisabled );
|
|
classList.remove( featureClassEnabled );
|
|
return false;
|
|
} else {
|
|
throw new Error( 'Attempt to toggle unknown feature: ' + name );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {string} name
|
|
* @throws {Error} if unknown feature toggled.
|
|
*/
|
|
function toggle( name ) {
|
|
const featureState = toggleBodyClasses( name );
|
|
save( name, featureState );
|
|
}
|
|
|
|
/**
|
|
* 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, toggle, toggleBodyClasses };
|