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: ''}");

//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)
//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';
        }
    });
}
var spoilersRevealed = false;
function toggleAllSpoilers() {
	spoilersRevealed = !spoilersRevealed;
	document.querySelectorAll('.spoiler').forEach(function (e) {
		if (spoilersRevealed) {
			e.classList.add('spoilerRevealed');
		} else {
			e.classList.remove('spoilerRevealed');
		}
		changeLinksColor(spoilersRevealed, e);
	});
	toggleSpoilers.textContent = spoilersRevealed ? "Hide all spoilers" : "Show all spoilers";
}
var toggleSpoilers = document.createElement('a');
toggleSpoilers.textContent = "Show all spoilers";
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.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}");