MediaWiki:Common.js: Difference between revisions

Revision as of 13:25, 21 July 2026

/* Any JavaScript here will be loaded for all users on every page load. */

/**
 * Scrum Manager BoK — Barra de navegación global
 */
mw.loader.using( 'mediawiki.util' ).done( function () {
    $(document).ready( function () {

        /* Evitar doble inserción */
        if ( document.getElementById( 'sm-topnav' ) ) return;

        /* ── 1. ESTILOS ──────────────────────────────────────────── */
        mw.util.addCSS(
            '#sm-topnav {' +
                'position:sticky;top:0;z-index:9999;' +
                'width:100%;background:#fff;' +
                'border-bottom:1px solid #dde2ea;' +
                'box-shadow:0 1px 6px rgba(0,0,0,.07);' +
                'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;' +
                'font-size:14px;line-height:1;box-sizing:border-box;' +
            '}' +
            '#sm-topnav * { box-sizing:border-box; }' +
            '#sm-topnav .sm-inner {' +
                'max-width:1120px;margin:0 auto;' +
                'display:flex;align-items:center;' +
                'padding:0 24px;height:54px;' +
            '}' +
            '#sm-topnav .sm-logo { margin-right:28px;flex-shrink:0; }' +
            '#sm-topnav .sm-logo img { height:26px;display:block; }' +
            '#sm-topnav ul.sm-menu {' +
                'list-style:none;margin:0;padding:0;' +
                'display:flex;align-items:center;gap:2px;' +
            '}' +
            '#sm-topnav ul.sm-menu > li { position:relative; }' +
            '#sm-topnav ul.sm-menu > li > a {' +
                'display:flex;align-items:center;gap:5px;' +
                'padding:7px 12px;border-radius:6px;' +
                'color:#526283;text-decoration:none;' +
                'font-weight:500;white-space:nowrap;' +
                'cursor:pointer;' +
            '}' +
            '#sm-topnav ul.sm-menu > li > a:hover,' +
            '#sm-topnav ul.sm-menu > li.sm-open > a {' +
                'background:#eef2ff;color:#0d6efd;' +
            '}' +
            '#sm-topnav .sm-arrow {' +
                'font-style:normal;font-size:10px;opacity:.55;' +
                'display:inline-block;transition:transform .2s;' +
            '}' +
            '#sm-topnav li.sm-open .sm-arrow { transform:rotate(180deg); }' +
            '#sm-topnav ul.sm-drop {' +
                'position:absolute;top:calc(100% + 8px);left:0;' +
                'min-width:230px;background:#fff;' +
                'border:1px solid #dde2ea;border-radius:8px;' +
                'box-shadow:0 8px 28px rgba(0,0,0,.11);' +
                'padding:6px 0;list-style:none;margin:0;' +
                'opacity:0;visibility:hidden;transform:translateY(8px);' +
                'transition:opacity .18s,transform .18s,visibility .18s;' +
            '}' +
            '#sm-topnav li.sm-open ul.sm-drop {' +
                'opacity:1;visibility:visible;transform:translateY(0);' +
            '}' +
            '#sm-topnav ul.sm-drop li a {' +
                'display:block;padding:9px 18px;' +
                'color:#526283;text-decoration:none;font-size:13.5px;' +
            '}' +
            '#sm-topnav ul.sm-drop li a:hover { background:#eef2ff;color:#0d6efd; }' +
            '#sm-topnav ul.sm-drop li a strong { font-weight:600;color:#0d6efd; }' +
            '#sm-topnav ul.sm-drop hr { border:none;border-top:1px solid #eef0f4;margin:4px 0; }' +
            '#sm-topnav .sm-right { margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0; }' +
            '#sm-topnav .sm-right a.sm-login {' +
                'padding:7px 12px;border-radius:6px;' +
                'color:#526283;text-decoration:none;font-weight:500;' +
            '}' +
            '#sm-topnav .sm-right a.sm-login:hover { background:#eef2ff;color:#0d6efd; }' +
            '#sm-topnav .sm-right a.sm-cta {' +
                'padding:8px 16px;border-radius:6px;' +
                'background:#0d6efd;color:#fff !important;' +
                'text-decoration:none;font-weight:600;font-size:13px;' +
            '}' +
            '#sm-topnav .sm-right a.sm-cta:hover { background:#0a58ca; }'
        );

        /* ── 2. HTML ─────────────────────────────────────────────── */
        var nav = document.createElement( 'nav' );
        nav.id = 'sm-topnav';
        nav.setAttribute( 'aria-label', 'Navegación principal Scrum Manager' );

        nav.innerHTML =
            '<div class="sm-inner">' +
                '<a class="sm-logo" href="https://scrummanager.com/website">' +
                '<img src="https://scrummanager.com/website/img/logo/scrummanager_logotype.svg" alt="Scrum Manager"></a>' +

                '<ul class="sm-menu">' +

                '<li><a href="#">Certifícate <i class="sm-arrow">▾</i></a>' +
                '<ul class="sm-drop">' +
                '<li><a href="https://scrummanager.com/website/c/calendar/show-courses.php">Cursos y exámenes</a></li>' +
                '<li><a href="https://scrummanager.com/website/c/info/academic-certifications.php">Certificaciones académicas</a></li>' +
                '<li><a href="https://scrummanager.com/website/c/info/professional-certifications.php">Certificaciones profesionales</a></li>' +
                '<li><a href="https://scrummanager.com/website/cert-validation/">Convalida tu certificación</a></li>' +
                '</ul></li>' +

                '<li><a href="#">Club Agile <i class="sm-arrow">▾</i></a>' +
                '<ul class="sm-drop">' +
                '<li><a href="https://scrummanager.com/club">Ir al Club</a></li>' +
                '<li><a href="https://scrummanager.com/club-info">Qué es el Club Agile</a></li>' +
                '<li><a href="https://scrummanager.com/website/c/resources">Recursos</a></li>' +
                '<li><a href="https://scrummanager.com/agilevel-radar">AgiLevel Radar</a></li>' +
                '</ul></li>' +

                '<li><a href="#">Conocimiento abierto <i class="sm-arrow">▾</i></a>' +
                '<ul class="sm-drop">' +
                '<li><a href="https://scrummanager.com/strips">Tiras cómic</a></li>' +
                '<li><a href="https://scrummanager.com/community">Comunidad</a></li>' +
                '<li><a href="https://scrummanager.com/observatory">Observatorio</a></li>' +
                '<hr>' +
                '<li><a href="https://scrummanager.com/bok/"><strong>BoK / Wiki ↗</strong></a></li>' +
                '</ul></li>' +

                '<li><a href="#">Centros <i class="sm-arrow">▾</i></a>' +
                '<ul class="sm-drop">' +
                '<li><a href="https://scrummanager.com/intranet">Intranet</a></li>' +
                '<li><a href="https://scrummanager.com/website/c/info/licenses.php">Hazte centro</a></li>' +
                '<li><a href="https://scrummanager.com/website/c/info/trademark-usage.php">Uso de la marca</a></li>' +
                '</ul></li>' +

                '</ul>' +

                '<div class="sm-right">' +
                '<a class="sm-login" href="https://scrummanager.com/website/c/login.php">Log in</a>' +
                '<a class="sm-cta" href="https://scrummanager.com/website/c/member/club/enroll.php">Club Agile</a>' +
                '</div>' +
            '</div>';

        /* ── 3. INSERTAR ─────────────────────────────────────────── */
        document.body.insertBefore( nav, document.body.firstChild );

        /* ── 4. DROPDOWNS ────────────────────────────────────────── */
        nav.querySelectorAll( 'ul.sm-menu > li' ).forEach( function ( li ) {
            if ( !li.querySelector( 'ul.sm-drop' ) ) return;
            li.querySelector( 'a' ).addEventListener( 'click', function ( e ) {
                e.preventDefault();
                var isOpen = li.classList.contains( 'sm-open' );
                nav.querySelectorAll( '.sm-open' ).forEach( function ( el ) {
                    el.classList.remove( 'sm-open' );
                });
                if ( !isOpen ) li.classList.add( 'sm-open' );
            });
        });

        document.addEventListener( 'click', function ( e ) {
            if ( !nav.contains( e.target ) ) {
                nav.querySelectorAll( '.sm-open' ).forEach( function ( el ) {
                    el.classList.remove( 'sm-open' );
                });
            }
        });

    });
});