User:Ilikecomputers/common.js

//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.length > 0 && curSibling.childNodes[0].nodeName === 'UL') {
            curSibling.classList.add('nodoublebullet');
            curSibling = curSibling.childNodes[0].childNodes[0];
        }
    }
});
document.styleSheets[0].insertRule(".nodoublebullet::marker {content: ''}");

/* SPOILER ENHANCER SUITE
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 adds a custom "Show all spoilers" button (only tested on vector 2022)
allows you to toggle all spoilers with Ctrl + Shift + S
designed only for the vector 2022 skin, this may not work on other skins
*/
function showSpoilers(e) {
    e.classList.add('spoilerRevealed');
    e.classList.remove('spoilerhidden');
}
function hideSpoilers(e) {
    if (!e.classList.contains('cursorSpoilerRevealed')) {
        e.classList.add('spoilerhidden');
        e.classList.remove('spoilerRevealed');
    }
}
function changeLinksColor(showLink, element) { // deals with hyperlinks inside spoilers
    element.childNodes.forEach(function (f) {
        if (f.style) {
            f.style.color = showLink ? '' : 'white';
        }
        if (f.childNodes.length > 0) {
            changeLinksColor(showLink, f);
        }
    });
}
var spoilersRevealed = false;
function toggleAllSpoilers() {
    spoilersRevealed = !spoilersRevealed;
    document.querySelectorAll('.spoiler').forEach(function (e) {
        if (spoilersRevealed) {
            e.classList.add('cursorSpoilerRevealed');
            showSpoilers(e);
        } else {
            e.classList.remove('cursorSpoilerRevealed');
            hideSpoilers(e);
        }
    });
    toggleSpoilers.textContent = spoilersRevealed ? "Hide all spoilers (Ctrl + Shift + S)" : "Show all spoilers (Ctrl + Shift + S)";
}
//allows toggling of spoilers with Ctrl + Shift + S
document.body.addEventListener('keydown', function (e) {
    if (e.shiftKey && e.ctrlKey && e.key === 'S') {
        e.preventDefault();
        toggleAllSpoilers();
    }
});
//the "show all spoilers" button, and elements needed to make it fit into the vector 2022 skin
var toggleSpoilers = document.createElement('a');
toggleSpoilers.textContent = "Show all spoilers (Ctrl + Shift + S)";
toggleSpoilers.addEventListener('click', toggleAllSpoilers);

var toggleSpoilersLi = document.createElement('li');
toggleSpoilersLi.classList.add('mw-list-item');
toggleSpoilersLi.appendChild(toggleSpoilers);

try {
    document.querySelector('#p-navigation').childNodes[3].childNodes[1].appendChild(toggleSpoilersLi);
} catch (e) {
    console.log("Oops! It looks like the toggle spoiler button cannot find a place!");
}
document.querySelectorAll('.spoiler').forEach(function (e) {
    e.addEventListener('mouseover', function () {
        showSpoilers(e);
    });
    e.addEventListener('mouseout', function () {
        if (!e.attributes.getNamedItem('manualToggle')) {
            hideSpoilers(e);
        }
    });
    e.addEventListener('click', function () {
        if (e.classList.contains('cursorSpoilerRevealed')) {
            e.classList.remove('cursorSpoilerRevealed');
        } else {
            e.classList.add('cursorSpoilerRevealed');
        }
    });
});
document.styleSheets[0].insertRule(".spoilerRevealed {color: black !important}");
document.styleSheets[0].insertRule(".cursorSpoilerRevealed {color: black !important}");
document.styleSheets[0].insertRule(".spoiler {cursor: pointer}");