User:Ilikecomputers/cosmos.js: Difference between revisions
Content added Content deleted
(custom JS to merge functions of hover spoiler, toggle spoiler gadgets) |
(remove debug console log) |
||
Line 12: | Line 12: | ||
} |
} |
||
}) |
}) |
||
document.styleSheets[0].insertRule(".nodoublebullet::marker {content: ''}") |
document.styleSheets[0].insertRule(".nodoublebullet::marker {content: ''}"); |
||
//combines the function of the toggle spoiler and spoiler hover gadgets |
//combines the function of the toggle spoiler and spoiler hover gadgets |
||
Line 21: | Line 21: | ||
e.style.color = 'white'; |
e.style.color = 'white'; |
||
e.addEventListener('mouseover', function () { |
e.addEventListener('mouseover', function () { |
||
e.style.color = 'black'; |
|||
e.style.color = 'black' |
|||
}); |
}); |
||
e.addEventListener('mouseout', function () { |
e.addEventListener('mouseout', function () { |
||
e.style.color = 'white' |
e.style.color = 'white'; |
||
}) |
}) |
||
e.addEventListener('click', function () { |
e.addEventListener('click', function () { |
Revision as of 06:52, 25 January 2023
//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 () {
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}");