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.

console.log('explorer gadget - BEGIN');
/**
 * MediaWiki:Gadget-explorer.js
 * Explorateur de wiki — étape 1 : squelette minimal.
 *
 * Injecte un bouton déclencheur dans le header Citizen et un panneau
 * conteneur vide dans le body. Toggle au clic.
 *
 * Aucune logique de fetch ni de templates à ce stade.
 */
( function () {
    'use strict';

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

    var HEADER_SLOT_SELECTOR = '.citizen-header__start';
    var TRIGGER_CLASS = 'explorer-trigger';
    var ROOT_ID = 'explorer-root';

    // --- 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' );
        // Placeholder textuel, à remplacer par icône via CSS ou markup.
        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;
    }

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

    function toggle( trigger, root ) {
        var isOpen = root.dataset.state === 'open';
        root.dataset.state = isOpen ? 'closed' : 'open';
        trigger.setAttribute( 'aria-expanded', String( !isOpen ) );
    }

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

    function init() {
    	console.log('explorer gadget - 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 );
        } );
    	console.log('explorer gadget - INIT DONE');
    }

    if ( document.readyState === 'loading' ) {
        document.addEventListener( 'DOMContentLoaded', init );
    } else {
        init();
    }
    console.log('explorer gadget - END');

}() );