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 */
console.log('Stroke script geladen');

function Stroke() {
    console.log('Stroke functie gestart');
    
    // Voeg automatisch stroke classes toe aan h1, h2, h3
    const h1Elements = document.querySelectorAll('h1');
    const h2Elements = document.querySelectorAll('h2');
    const h3Elements = document.querySelectorAll('h3');
    
    console.log('Gevonden elementen:', {
        h1: h1Elements.length,
        h2: h2Elements.length,
        h3: h3Elements.length
    });
    
    h1Elements.forEach(el => {
        el.classList.add('stroke', 'stroke-3');
    });
    h2Elements.forEach(el => {
        el.classList.add('stroke', 'stroke-2');
    });
    h3Elements.forEach(el => {
        el.classList.add('stroke', 'stroke-1');
    });
    
    // Verwerk alle elementen met de stroke class
    const elements = document.querySelectorAll(".stroke");
    console.log('Elementen met stroke class:', elements.length);
    
    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
        let r = 2.5;
        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 {
            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;
        console.log('Text shadow toegepast op element:', element.tagName, str.substring(0, 50) + '...');
    });
}

// MediaWiki specifieke manier om te wachten tot pagina geladen is
(function() {
    if (typeof mw !== 'undefined' && mw.loader) {
        mw.loader.using(['mediawiki.util']).then(function() {
            $(document).ready(function() {
                console.log('Document ready - roep Stroke aan');
                Stroke();
                
                // Voor dynamisch geladen content
                mw.hook('wikipage.content').add(function($content) {
                    console.log('Wiki content hook - roep Stroke aan');
                    setTimeout(Stroke, 100);
                });
            });
        });
    } else {
        // Fallback voor als MediaWiki objecten niet beschikbaar zijn
        document.addEventListener("DOMContentLoaded", function() {
            console.log('DOMContentLoaded - roep Stroke aan');
            Stroke();
        });
    }
})();