MediaWiki:Common.js: Difference between revisions

Latest revision as of 13:31, 21 July 2026

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

/**
 * Scrum Manager BoK — Scripts globales
 * 1. Barra de navegación principal
 * 2. Ocultar título y pestañas en la portada
 */
mw.loader.using( 'mediawiki.util' ).done( function () {
    $( document ).ready( function () {

        /* ══════════════════════════════════════════════
           1. BARRA DE NAVEGACIÓN
           ══════════════════════════════════════════════ */

        if ( !document.getElementById( 'sm-topnav' ) ) {

            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:32px;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; }'
            );

            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="#">Cert\u00edf\u00edcate <i class="sm-arrow">&#9662;</i></a>' +
                    '<ul class="sm-drop">' +
                    '<li><a href="https://scrummanager.com/website/c/calendar/show-courses.php">Cursos y ex\u00e1menes</a></li>' +
                    '<li><a href="https://scrummanager.com/website/c/info/academic-certifications.php">Certificaciones acad\u00e9micas</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\u00f3n</a></li>' +
                    '</ul></li>' +

                    '<li><a href="#">Club Agile <i class="sm-arrow">&#9662;</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\u00e9 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">&#9662;</i></a>' +
                    '<ul class="sm-drop">' +
                    '<li><a href="https://scrummanager.com/strips">Tiras c\u00f3mic</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 &#8599;</strong></a></li>' +
                    '</ul></li>' +

                    '<li><a href="#">Centros <i class="sm-arrow">&#9662;</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>';

            document.body.insertBefore( nav, document.body.firstChild );

            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' );
                    });
                }
            });
        }

        /* ══════════════════════════════════════════════
           2. PORTADA: OCULTAR TÍTULO Y PESTAÑAS
           ══════════════════════════════════════════════ */

        if ( mw.config.get( 'wgPageName' ) === 'Scrum_Manager_BoK' ) {
            mw.util.addCSS(
                '#firstHeading          { display:none!important; }' +
                '.mw-body-header        { display:none!important; }' +
                '.vector-page-toolbar   { display:none!important; }' +
                '.mw-portlet-views      { display:none!important; }'
            );
        }

    });
});