MediaWiki:Mobile.js: Difference between revisions

Revision as of 22:16, 7 November 2024

/* 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);