MediaWiki:Timeless.js: verschil tussen versies

Versie van 4 sep 2025 12:34

/* 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(function(el) {
        el.classList.add('stroke', 'stroke-4.5');
    });
    document.querySelectorAll('h2').forEach(function(el) {
        el.classList.add('stroke', 'stroke-3');
    });
    document.querySelectorAll('h3').forEach(function(el) {
        el.classList.add('stroke', 'stroke-2');
    });
    
    // Verwerk alle elementen met de stroke class
    var elements = document.querySelectorAll('.stroke');
    elements.forEach(function(element) {
        var colorClass = Array.from(element.classList).find(function(cls) {
            return cls.startsWith('color-');
        });
        var color = colorClass ? '#' + colorClass.replace('color-', '') : 'black';

        // Check voor stroke-width classes
        var 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
            var radiusClass = Array.from(element.classList).find(function(cls) {
                return cls.startsWith('radius-');
            });
            r = radiusClass ? parseFloat(radiusClass.replace('radius-', '')) : 2.5;
        }

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

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

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

// MediaWiki-specifieke implementatie
(function() {
    // Functie om Stroke uit te voeren
    function runStroke() {
        if (typeof Stroke === 'function') {
            Stroke();
        }
    }
    
    // Voer uit wanneer DOM geladen is
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', runStroke);
    } else {
        runStroke();
    }
    
    // Voor MediaWiki's dynamisch geladen content
    if (typeof mw !== 'undefined' && mw.hook) {
        mw.hook('wikipage.content').add(runStroke);
    }
})();