FANDOM


Template:Infobox JavaScript

SpoilerAlert hides the content area of a page and displays a dialog that asks the visitor if he wants to risk seeing spoilers or not. If not the page will remain hidden. If the visitor accepts, the foreground fades away and reveals the page. Additionally a cookie is set, to ensure the visitor won't see this dialog for this particular page again.

You can see a simple demo here.

The dialog itself looks like this:

This page contains spoilers. Are you sure you want to read it?
No, not yet
Yes, please

(The buttons aren't styled in any way. They will look like all other buttons on your wiki. The color of the background depends on your wiki as well. It will be the same as the background color of your content area.)

InstallationEdit

Add this line to your JavaScript page of choice:

importArticles({
    type: "script",
    articles: [
        "w:c:dev:SpoilerAlert/code.js"
    ]
});

Template:ImportArticles

TriggersEdit

By default SpoilerAlert triggers when the word "spoiler" is part of the page name. That may be useful for some of you, but others may have different ideas. And therefore you can supply your own function for the trigger. Let's look at a few examples that should cover most use cases:

This function triggers the SpoilerAlert if there's some element of CSS-class "spoiler" on the page:

SpoilerAlert = {
    isSpoiler: function () {
        return Boolean($('.spoiler').length);
    }
};
importScriptPage('SpoilerAlert/code.js', 'dev');

The function's name must be "isSpoiler" and it should return true if the page is a spoiler page and false otherwise.

This function checks whether the page is in the category "Spoiler"

SpoilerAlert = {
    isSpoiler: function () {
        return -1 !== wgCategories.indexOf('Spoiler');
    }
};
importScriptPage('SpoilerAlert/code.js', 'dev');

And lastly here's a function that will check all H2 elements for the text 'Spoiler':

SpoilerAlert = {
    isSpoiler: function () {
        var h2s = document.getElementsByTagName('h2');
        for (var i = 0, c = h2s.length; i < c; i++) {
            if (/spoiler/i.test($(h2s[i]).text())) return true;
        }
        return false;
    }
};
importScriptPage('SpoilerAlert/code.js', 'dev');

Language OptionsEdit

You can override the text in the dialog by setting the "question", "yes" and "no" properties.

This example translates the dialog into German and displays it, if there's an element with the ID "spoiler":

SpoilerAlert = {
    question: 'Diese Seite enthält Spoiler. Möchten Sie sie trotzdem ansehen?',
    yes: 'Aber ja doch',
    no: 'Nein, noch nicht',
    isSpoiler: function () {
        return Boolean($('#spoiler').length);
    }
};
importScriptPage('SpoilerAlert/code.js', 'dev');