MediaWiki:Mobile.js: Difference between revisions

Jump to navigation Jump to search
m
no edit summary
(init)
 
mNo edit summary
 
Line 1: Line 1:
/* All JavaScript here will be loaded for users of the mobile site */
/* All JavaScript here will be loaded for users of the mobile site */


const SpoilerToggle = {
var SpoilerToggle = {
     init: function () {
     init: function () {
         if (mw.config.get('skin') === 'citizen') {
         if (mw.config.get('skin') === 'citizen') {
             const sidebar = document.querySelector('.citizen-header__start');
             var sidebar = document.querySelector('.citizen-header__start');
             const container = SpoilerToggle.createSpoilerContainer('wheatley_spoils_you', ['citizen-pref', 'citizen-header__item']);
             var container = SpoilerToggle.createSpoilerContainer('wheatley_spoils_you', ['citizen-pref', 'citizen-header__item']);
             const button = SpoilerToggle.createSpoilerButton('wheatley_toggle', 'Toggle spoilers', SpoilerToggle.getWheatley());
             var button = SpoilerToggle.createSpoilerButton('wheatley_toggle', 'Toggle spoilers', SpoilerToggle.getWheatley());


             button.addEventListener('click', () => SpoilerToggle.toggleSpoilers(button));
             button.addEventListener('click', function () {
                SpoilerToggle.toggleSpoilers(button);
            });


             container.prepend(button);
             container.prepend(button);
Line 16: Line 18:


     createSpoilerContainer: function (id, classList) {
     createSpoilerContainer: function (id, classList) {
         const container = document.createElement('div');
         var container = document.createElement('div');


         container.id = id;
         container.id = id;
         container.classList.add(...classList);
         for (var i = 0; i < classList.length; i++) {
            container.classList.add(classList[i]);
        }


         return container;
         return container;
Line 25: Line 29:


     createSpoilerButton: function (id, title, backgroundImageUrl) {
     createSpoilerButton: function (id, title, backgroundImageUrl) {
         const button = document.createElement('button');
         var button = document.createElement('button');


         button.id = id;
         button.id = id;
         button.classList.add('citizen-pref__button', 'citizen-header__button', 'citizen-button');
         button.classList.add('citizen-pref__button', 'citizen-header__button', 'citizen-button');
         button.setAttribute('title', title);
         button.setAttribute('title', title);
         button.style.backgroundImage = `url(${backgroundImageUrl})`;
         button.style.backgroundImage = 'url(' + backgroundImageUrl + ')';
         button.style.backgroundSize = '20px';
         button.style.backgroundSize = '20px';
         button.style.backgroundRepeat = 'no-repeat';
         button.style.backgroundRepeat = 'no-repeat';
Line 39: Line 43:


     getWheatley: function () {
     getWheatley: function () {
         const spoilersEnabled = mw.storage.get('pwiki-spoilers') === '1';
         var spoilersEnabled = mw.storage.get('pwiki-spoilers') === '1';


         SpoilerToggle.toggleText(spoilersEnabled);
         SpoilerToggle.toggleText(spoilersEnabled);


         return 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';
            ? '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) {
     toggleSpoilers: function (button) {
         const cur = mw.storage.get('pwiki-spoilers');
         var cur = mw.storage.get('pwiki-spoilers');
         const spoilersEnabled = cur === '1';
         var spoilersEnabled = cur === '1';
         const neww = spoilersEnabled ? '0' : '1';
         var neww = spoilersEnabled ? '0' : '1';


         mw.storage.set('pwiki-spoilers', neww);
         mw.storage.set('pwiki-spoilers', neww);
         button.style.backgroundImage = `url(${SpoilerToggle.getWheatley()})`;
         button.style.backgroundImage = 'url(' + SpoilerToggle.getWheatley() + ')';


         SpoilerToggle.toggleText(!spoilersEnabled);
         SpoilerToggle.toggleText(!spoilersEnabled);
Line 61: Line 62:


     toggleText: function (showSpoilers) {
     toggleText: function (showSpoilers) {
         const spoilers = document.querySelectorAll('.spoiler-text');
         var spoilers = document.querySelectorAll('.spoiler-text');


         spoilers.forEach(spoiler => {
         Array.prototype.forEach.call(spoilers, function (spoiler) {
             if (showSpoilers) {
             if (showSpoilers) {
                 spoiler.classList.remove('spoiler-inline');
                 spoiler.classList.remove('spoiler-inline');

Navigation menu