User:Ilikecomputers/cosmos.js

Everything About Fiction You Never Wanted to Know.
Note: After saving, changes may not occur immediately. Click here to learn how to bypass your browser's cache.
  • Google Chrome / Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
  • Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5;
  • Konqueror: simply click the Reload button, or press F5;
  • Opera users may need to completely clear their cache in Tools→Preferences.
//A very hackey way to fix a niche styling issue:
//Example markup:
//  * This is a bullet point
//  ** {{quote|this is a quote}}
//  ** This is a bullet point after a quote <-- this will have double bullet points
document.querySelectorAll('table').forEach(function (e) {
    if (e.nextElementSibling && e.nextElementSibling.nodeName === 'UL') {
        var sibling = e.nextElementSibling;
        var curSibling = sibling.childNodes[0];
        while (curSibling.childNodes[0].nodeName === 'UL') {
            curSibling.classList.add('nodoublebullet');
            curSibling = curSibling.childNodes[0].childNodes[0];
        }
    }
})
document.styleSheets[0].insertRule(".nodoublebullet::marker {content: ''}");

//combines the function of the toggle spoiler and spoiler hover gadgets
//hover over spoilers to reveal them, they'll disappear after the cursor leaves the box
//click on spoilers to permanently reveal them, then click on them again to hide them
//also fixes hyperlinks in spoilers visible by default in the cosmos skin
document.querySelectorAll('a').forEach(function (e) { if (e.parentNode.classList.contains('spoiler')) e.style.color = 'white' });
function changeLinksColor(showLink, element) {
    element.childNodes.forEach(function (f) {
        if (f.nodeName === 'A') {
            f.style.color = showLink ? 'rgb(6, 69, 173)' : 'white';
        }
    });
}
document.querySelectorAll('.spoiler').forEach(function (e) {
    e.classList.remove('spoilerhidden'); //this fidgety hack removes the !important colour rule added by the spoilerhidden class
    e.style.color = 'white';
    e.addEventListener('mouseover', function () {
        changeLinksColor(true, e);
        e.style.color = 'black';
    });
    e.addEventListener('mouseout', function () {
        e.style.color = 'white';
        if (!e.classList.contains('spoilerRevealed')) {
            changeLinksColor(false, e);
        }
    })
    e.addEventListener('click', function () {
        if (e.classList.contains('spoilerRevealed')) {
            e.classList.remove('spoilerRevealed');
        } else {
            e.classList.add('spoilerRevealed');
        }
    })
})
document.styleSheets[0].insertRule(".spoilerRevealed {color: black !important}");
document.styleSheets[0].insertRule(".spoiler {cursor: pointer}");