MediaWiki:Timeless.js

Opmerking: na het publiceren moet je misschien je browsercache legen om de veranderingen te zien.

• Firefox / Safari: houd Shift ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5 of Ctrl-R (⌘-Shift-R op een Mac)
• Google Chrome: druk op Ctrl-Shift-R (⌘-Shift-R op een Mac)
• Edge: houd Ctrl ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5.

/* JavaScript die hier wordt geplaatst heeft alleen invloed op gebruikers die het uiterlijk Timeless gebruiken */
function Stroke() {
    // Voeg automatisch stroke classes toe aan h1, h2, h3
    document.querySelectorAll('h1').forEach(el => {
        el.classList.add('stroke', 'stroke-3');
    });
    document.querySelectorAll('h2').forEach(el => {
        el.classList.add('stroke', 'stroke-2');
    });
    document.querySelectorAll('h3').forEach(el => {
        el.classList.add('stroke', 'stroke-1');
    });
    
    // Verwerk alle elementen met de stroke class
    const elements = document.querySelectorAll(".stroke");
    elements.forEach(function(element) {
        const colorClass = Array.from(element.classList).find(cls => cls.startsWith('color-'));
        const color = colorClass ? `#${colorClass.replace('color-', '')}` : 'black';

        // Check voor stroke-width classes (stroke-1, stroke-2, stroke-3)
        let r = 2.5; // standaard waarde
        if (element.classList.contains('stroke-1')) {
            r = 1;
        } else if (element.classList.contains('stroke-2')) {
            r = 2;
        } else if (element.classList.contains('stroke-3')) {
            r = 3;
        } else {
            // Fallback naar radius class als geen stroke-width is gespecificeerd
            const radiusClass = Array.from(element.classList).find(cls => cls.startsWith('radius-'));
            r = radiusClass ? parseFloat(radiusClass.replace('radius-', '')) : 2.5;
        }

        const n = Math.ceil(2 * Math.PI * r);
        var str = "";

        for (var i = 0; i < n; i++) {
            const theta = (2 * Math.PI * i) / n;
            str += (r * Math.cos(theta)) + "px " + (r * Math.sin(theta)) + "px 0 " + color + (i === n - 1 ? "" : ",");
        }

        element.style.textShadow = str;
    });
}

// Wacht tot de pagina geladen is
if (document.readyState === 'loading') {
    document.addEventListener("DOMContentLoaded", function() {
        Stroke();
    });
} else {
    // DOM is al geladen
    Stroke();
}

// Voor MediaWiki's dynamisch geladen content
mw.hook('wikipage.content').add(function() {
    Stroke();
});