MediaWiki:Common.js: Difference between revisions
No edit summary |
No edit summary Tag: Manual revert |
||
| Line 209: | Line 209: | ||
}); | }); | ||
Revision as of 13:24, 21 July 2026
/* Any JavaScript here will be loaded for all users on every page load. */
/**
* Scrum Manager BoK — Barra de navegación global
* Inyecta el menú principal de scrummanager.com en todas las páginas del BoK.
*/
$(function () {
/* ── 1. ESTILOS ─────────────────────────────────────────────────── */
var css = '\
#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;\
}\
\
/* Logo */\
#sm-topnav .sm-logo { margin-right: 28px; flex-shrink: 0; }\
#sm-topnav .sm-logo img { height: 32px; display: block; }\
\
/* Lista principal */\
#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;\
transition: background .15s, color .15s;\
}\
#sm-topnav ul.sm-menu > li > a:hover,\
#sm-topnav ul.sm-menu > li.sm-open > a {\
background: #eef2ff; color: #0d6efd;\
}\
\
/* Flecha */\
#sm-topnav .sm-arrow {\
font-style: normal; font-size: 10px;\
opacity: .55; transition: transform .2s;\
display: inline-block;\
}\
#sm-topnav li.sm-open .sm-arrow { transform: rotate(180deg); }\
\
/* Dropdown */\
#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;\
transition: background .12s, color .12s;\
}\
#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;\
}\
\
/* Derecha */\
#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;\
transition: background .15s, color .15s;\
}\
#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;\
transition: background .15s;\
}\
#sm-topnav .sm-right a.sm-cta:hover { background: #0a58ca; }';
var styleEl = document.createElement('style');
styleEl.id = 'sm-topnav-styles';
styleEl.textContent = css;
document.head.appendChild(styleEl);
/* ── 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">' +
/* Logo */
'<a class="sm-logo" href="https://scrummanager.com/website" title="Scrum Manager">' +
'<img src="https://scrummanager.com/website/img/logo/scrummanager_logotype.svg" alt="Scrum Manager">' +
'</a>' +
/* Menú */
'<ul class="sm-menu">' +
/* Certifícate */
'<li>' +
'<a href="https://scrummanager.com/website/c/calendar/show-courses.php">' +
'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>' +
/* Club Agile */
'<li>' +
'<a href="https://scrummanager.com/club">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>' +
/* Conocimiento abierto */
'<li>' +
'<a href="https://scrummanager.com/open-knowledge/">' +
'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/index.php?title=Scrum_Manager_BoK"><strong>BoK / Wiki ↗</strong></a></li>' +
'</ul>' +
'</li>' +
/* Centros */
'<li>' +
'<a href="https://scrummanager.com/website/c/info/licenses.php">' +
'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>' + /* fin sm-menu */
/* Derecha */
'<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>'; /* fin sm-inner */
/* ── 3. INSERTAR ────────────────────────────────────────────────── */
document.body.insertBefore(nav, document.body.firstChild);
/* ── 4. INTERACCIÓN — toggle al hacer clic (móvil y teclado) ───── */
nav.querySelectorAll('ul.sm-menu > li').forEach(function (li) {
var trigger = li.querySelector('a');
if (!li.querySelector('ul.sm-drop')) return;
trigger.addEventListener('click', function (e) {
/* Solo interceptar si hay dropdown */
e.preventDefault();
var isOpen = li.classList.contains('sm-open');
/* Cerrar todos */
nav.querySelectorAll('ul.sm-menu > li.sm-open')
.forEach(function (el) { el.classList.remove('sm-open'); });
if (!isOpen) li.classList.add('sm-open');
});
});
/* Cerrar al hacer clic fuera */
document.addEventListener('click', function (e) {
if (!nav.contains(e.target)) {
nav.querySelectorAll('ul.sm-menu > li.sm-open')
.forEach(function (el) { el.classList.remove('sm-open'); });
}
});
});