mediawiki-skins-Vector/resources/skins.vector.es6/features.js
Jan Drewniak 4d1c0b8940 Override PinnableElement behaviour at low resolutions.
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
2023-01-13 18:09:11 +00:00

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 };