User:Ilikecomputers/cosmos.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;
    if (sibling.childNodes[0].childNodes[0].nodeName === 'UL') {
    sibling.childNodes[0].classList.add('nodoublebullet');
    }
   }
})
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
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 () {
        console.log('mouseover')
        e.style.color = 'black'
    });
    e.addEventListener('mouseout', function () {
        e.style.color = 'white'
    })
    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}");