MediaWiki:Mobile.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* All JavaScript here will be loaded for users of the mobile site */
const SpoilerToggle = {
init: function () {
if (mw.config.get('skin') === 'citizen') {
const sidebar = document.querySelector('.citizen-header__start');
const container = SpoilerToggle.createSpoilerContainer('wheatley_spoils_you', ['citizen-pref', 'citizen-header__item']);
const button = SpoilerToggle.createSpoilerButton('wheatley_toggle', 'Toggle spoilers', SpoilerToggle.getWheatley());
button.addEventListener('click', () => SpoilerToggle.toggleSpoilers(button));
container.prepend(button);
sidebar.prepend(container);
}
},
createSpoilerContainer: function (id, classList) {
const container = document.createElement('div');
container.id = id;
container.classList.add(...classList);
return container;
},
createSpoilerButton: function (id, title, backgroundImageUrl) {
const button = document.createElement('button');
button.id = id;
button.classList.add('citizen-pref__button', 'citizen-header__button', 'citizen-button');
button.setAttribute('title', title);
button.style.backgroundImage = `url(${backgroundImageUrl})`;
button.style.backgroundSize = '20px';
button.style.backgroundRepeat = 'no-repeat';
button.style.backgroundPosition = 'center';
return button;
},
getWheatley: function () {
const spoilersEnabled = mw.storage.get('pwiki-spoilers') === '1';
SpoilerToggle.toggleText(spoilersEnabled);
return spoilersEnabled
? 'https://i2.theportalwiki.net/img/2/2b/Wheatley_spoils_you.png'
: 'https://i2.theportalwiki.net/img/e/ef/Wheatley_spoils_nothing.png';
},
toggleSpoilers: function (button) {
const cur = mw.storage.get('pwiki-spoilers');
const spoilersEnabled = cur === '1';
const neww = spoilersEnabled ? '0' : '1';
mw.storage.set('pwiki-spoilers', neww);
button.style.backgroundImage = `url(${SpoilerToggle.getWheatley()})`;
SpoilerToggle.toggleText(!spoilersEnabled);
},
toggleText: function (showSpoilers) {
const spoilers = document.querySelectorAll('.spoiler-text');
spoilers.forEach(spoiler => {
if (showSpoilers) {
spoiler.classList.remove('spoiler-inline');
} else {
spoiler.classList.add('spoiler-inline');
}
});
}
};
$(SpoilerToggle.init);