MediaWiki:Gadget-explorer.js

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
• Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
•  Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.

/**
 * MediaWiki:Gadget-explorer.js
 * Explorateur de wiki — étape 3 : fetch et injection du shell.
 *
 * Au premier clic sur le déclencheur, fetch le HTML rendu de Modèle:Explorer
 * via l'API MediaWiki et l'injecte dans le panneau. Les ouvertures suivantes
 * réutilisent le contenu déjà chargé.
 */
( function () {
    'use strict';

    // --- Configuration ------------------------------------------------------

    var HEADER_SLOT_SELECTOR = '.citizen-header__start';
    var TRIGGER_CLASS = 'explorer-trigger';
    var ROOT_ID = 'explorer-root';
    var SHELL_PAGE = 'Modèle:Explorer';

    // --- Internal state -----------------------------------------------------

    var shellLoaded = false;
    var shellLoading = false;

    // --- DOM construction ---------------------------------------------------

    function createTrigger() {
        var btn = document.createElement( 'button' );
        btn.type = 'button';
        btn.className = TRIGGER_CLASS;
        btn.setAttribute( 'aria-expanded', 'false' );
        btn.setAttribute( 'aria-controls', ROOT_ID );
        btn.setAttribute( 'aria-label', 'Ouvrir l\'explorateur' );
        btn.textContent = '☰';
        return btn;
    }

    function createRoot() {
        var root = document.createElement( 'div' );
        root.id = ROOT_ID;
        root.className = 'explorer-root';
        root.dataset.state = 'closed';
        return root;
    }

    // --- Shell loading ------------------------------------------------------

    function loadShell( root ) {
        if ( shellLoaded || shellLoading ) {
            return;
        }
        shellLoading = true;
        root.dataset.loading = 'true';

        var api = new mw.Api();
        api.get( {
            action: 'parse',
            page: SHELL_PAGE,
            prop: 'text',
            disablelimitreport: 1,
            disabletoc: 1,
            formatversion: 2
        } ).then( function ( data ) {
            root.innerHTML = data.parse.text;
            shellLoaded = true;
        } ).catch( function ( code, info ) {
            mw.log.error( '[explorer] failed to load shell', code, info );
            root.innerHTML = '<div class="explorer-error">Impossible de charger l\'explorateur.</div>';
        } ).always( function () {
            shellLoading = false;
            delete root.dataset.loading;
        } );
    }

    // --- State management ---------------------------------------------------

    function open( trigger, root ) {
        root.dataset.state = 'open';
        trigger.setAttribute( 'aria-expanded', 'true' );
        loadShell( root );
    }

    function close( trigger, root ) {
        root.dataset.state = 'closed';
        trigger.setAttribute( 'aria-expanded', 'false' );
    }

    function toggle( trigger, root ) {
        if ( root.dataset.state === 'open' ) {
            close( trigger, root );
        } else {
            open( trigger, root );
        }
    }

    // --- Bootstrap ----------------------------------------------------------

    function init() {
        var slot = document.querySelector( HEADER_SLOT_SELECTOR );
        if ( !slot ) {
            mw.log.warn( '[explorer] header slot not found: ' + HEADER_SLOT_SELECTOR );
            return;
        }

        var trigger = createTrigger();
        var root = createRoot();

        slot.appendChild( trigger );
        document.body.appendChild( root );

        trigger.addEventListener( 'click', function () {
            toggle( trigger, root );
        } );
    }

    if ( document.readyState === 'loading' ) {
        document.addEventListener( 'DOMContentLoaded', init );
    } else {
        init();
    }

}() );