« MediaWiki:Gadget-explorer.js » : différence entre les versions

Version du 28 mai 2026 à 01:24

/**
 * 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 );
        }
    }
    
    function attachDismissHandlers( trigger, root ) {
	    root.addEventListener( 'click', function ( e ) {
	        // Clic en dehors du contenu (donc dans le backdrop) → fermer.
	        if ( !e.target.closest( '.explorer-menu' ) ) {
	            close( trigger, root );
	        }
	    } );

	    document.addEventListener( 'keydown', function ( e ) {
	        if ( e.key === 'Escape' && root.dataset.state === 'open' ) {
	            close( 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 );
        } );
		
		attachDismissHandlers( trigger, root );
    }

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

}() );