MediaWiki:Timeless.js: verschil tussen versies

Huidige versie van 28 feb 2026 11:54

/* 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-3');
    });
    
    // Voor h2: check of het NIET binnen .toctitle staat
    document.querySelectorAll('h2').forEach(function(el) {
        // Check of deze h2 een parent heeft met class 'toctitle'
        if (!el.closest('.toctitle')) {
            el.classList.add('stroke', 'stroke-3');
        }
    });
    
    document.querySelectorAll('h3').forEach(function(el) {
    // Exclude als h3 binnen sidebar staat
    if (el.closest('.sidebar-inner')) {
        return;
    }

    el.classList.add('stroke', 'stroke-2.9');
});
    
    // Verwijder stroke class van specifieke elementen die geen stroke moeten hebben
    document.querySelectorAll('.toctitle h2').forEach(function(el) {
        el.classList.remove('stroke', 'stroke-3');
    });
    
    document.querySelectorAll('.p-navigation-label').forEach(function(el) {
        el.classList.remove('stroke', 'stroke-3', 'stroke-2.9', 'stroke-2', 'stroke-1');
    });
    
    // Voor elementen met class die begint met 'p-Categorie' en eindigt met 'n-label'
    document.querySelectorAll('[class*="p-Categorie"][class*="n-label"]').forEach(function(el) {
        el.classList.remove('stroke', 'stroke-3', 'stroke-2.9', 'stroke-2', 'stroke-1');
    });
    
    // Specifiek voor .p-Categorieën-label (met trema)
    document.querySelectorAll('.p-Categorieën-label').forEach(function(el) {
        el.classList.remove('stroke', 'stroke-3', 'stroke-2.9', 'stroke-2', 'stroke-1');
    });
    
    // Verwerk alle elementen met de stroke class
    var elements = document.querySelectorAll('.stroke');
    elements.forEach(function(element) {
        // Extra check: skip als element een van de uitgesloten ID's heeft of in toctitle zit
        if (element.id === 'p-navigation-label' || 
            element.id === 'p-Categorieën-label' ||
            element.id === 'p-Categorie.C3.ABn-label' ||
            element.closest('.toctitle')) {
            return; // Skip dit 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-2.9')) {
            r = 2.9;
        } 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);
    }
})();