MediaWiki:Gadget-main-spoiler-warning-screen.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.

/* Finds elements by a selector and executes a function for each element */
function findAndExecute(selector, callback) {
    const elements = document.querySelectorAll(selector);
    elements.forEach((element) => {
        try {
            callback(element);
        } catch (e) {
            console.error(`Error while initializing "${selector}"`, e);
        }
    });
}

/* Spoiler warning screen */
window.rgwiki_main_spoilerWarningScreenWasShown = false;
findAndExecute(".rgwiki-main-show-spoiler-warning-screen", (trigger) => {
    const acknowledgementDuration = 1 * 24 * 60 * 60 * 1000; // in ms, for how long should the spoiler stay hidden
    const pageName = window.mw.config.values.wgPageName;
    const now = Date.now();

    // Check if this spoiler warning was already acknowledged recently
    {
        const localStorageString = window.localStorage.getItem("rgwiki-main-spoilerWarning");
        let localStorageData;
        try {
            let localStorageData = JSON.parse(localStorageString);
            const pageTimestamp = localStorageData.spoilerAcknowledgedTimestamps[pageName];
            const sinceLastClick = (now - pageTimestamp);
            if (pageTimestamp !== undefined && sinceLastClick < acknowledgementDuration) {
                window.rgwiki_main_spoilerWarningScreenWasShown = true;
            }
        } catch (e) {
            localStorageData = {spoilerAcknowledgedTimestamps: {}}
        }
    }

    if (window.rgwiki_main_spoilerWarningScreenWasShown) {
        return;
    }

    let screen = document.createElement("div");
    screen.classList.add("rgwiki-main-spoiler-warning-screen");

    let header = document.createElement("h1");
    header.innerText = "Spoiler warning!";
    screen.appendChild(header);

    let description = document.createElement("p");
    description.innerHTML = trigger.innerHTML;
    screen.appendChild(description);

    let buttons = document.createElement("div");

    let backBtn = document.createElement("button");
    backBtn.innerText = "Go back";
    backBtn.addEventListener("click", (e) => {
        window.history.back();
    });
    buttons.appendChild(backBtn);

    let continueBtn = document.createElement("button");
    continueBtn.innerText = "Continue and show page";
    continueBtn.addEventListener("click", (e) => {
        screen.remove();
    
        // Save acknowledgement to local storage
        const localStorageString = window.localStorage.getItem("rgwiki-main-spoilerWarning");
        let localStorageData;
        try {
            localStorageData = JSON.parse(localStorageString);
            localStorageData.spoilerAcknowledgedTimestamps[pageName] = now;
        } catch (e) {
            localStorageData = {spoilerAcknowledgedTimestamps: {}};
        }
        window.localStorage.setItem("rgwiki-main-spoilerWarning", JSON.stringify(localStorageData));
    });
    buttons.appendChild(continueBtn);

    screen.appendChild(buttons);
    document.body.appendChild(screen);

    window.rgwiki_main_spoilerWarningScreenWasShown = true;
});