User:Ilikecomputers/common.js

//A very hackey way to fix a niche styling issue: //Example markup: // * This is a bullet point // ** "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}");