MediaWiki:Common.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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' );
});
}
});
});
});