MediaWiki:Timeless.js
From Game Wiki - VortanMU
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.
$( function () {
// sidebar-chunk only applies to desktop-small, but the toggles are hidden at
// other resolutions regardless and the css overrides any visible effects.
var $dropdowns = $( '#personal, #p-variants-desktop, .sidebar-chunk' );
/**
* Desktop menu click-toggling
*
* We're not even checking if it's desktop because the classes in play have no effect
* on mobile regardless... this may break things at some point, though.
*/
/**
* Close all dropdowns
*/
function closeOpen() {
$dropdowns.removeClass( 'dropdown-active' );
}
/**
* Click behaviour
*/
$dropdowns.on( 'click', function ( e ) {
// Check if it's already open so we don't open it again
// eslint-disable-next-line no-jquery/no-class-state
if ( $( this ).hasClass( 'dropdown-active' ) ) {
if ( $( e.target ).closest( $( 'h2, #p-variants-desktop h3' ) ).length > 0 ) {
// treat reclick on the header as a toggle
closeOpen();
}
// Clicked inside an open menu; don't do anything
} else {
closeOpen();
e.stopPropagation(); // stop hiding it!
$( this ).addClass( 'dropdown-active' );
}
} );
$( document ).on( 'click', function ( e ) {
if ( $( e.target ).closest( $dropdowns ).length > 0 ) {
// Clicked inside an open menu; don't close anything
} else {
closeOpen();
}
} );
} );
mw.hook( 'wikipage.content' ).add( function ( $content ) {
// Gotta wrap them for this to work; maybe later the parser etc will do this for us?!
$content.find( 'div > table:not( table table )' ).wrap( '<div class="content-table-wrapper"><div class="content-table"></div></div>' );
$content.find( '.content-table-wrapper' ).prepend( '<div class="content-table-left"></div><div class="content-table-right"></div>' );
/**
* Set up borders for experimental overflowing table scrolling
*
* I have no idea what I'm doing.
*
* @param {jQuery} $table
*/
function setScrollClass( $table ) {
var $tableWrapper = $table.parent(),
// wtf browser rtl implementations
scroll = Math.abs( $tableWrapper.scrollLeft() );
$tableWrapper.parent()
// 1 instead of 0 because of weird rtl rounding errors or something
.toggleClass( 'scroll-left', scroll > 1 )
.toggleClass( 'scroll-right', $table.outerWidth() - $tableWrapper.innerWidth() - scroll > 1 );
}
$content.find( '.content-table' ).on( 'scroll', function () {
setScrollClass( $( this ).children( 'table' ).first() );
if ( $content.attr( 'dir' ) === 'rtl' ) {
$( this ).find( 'caption' ).css( 'margin-right', Math.abs( $( this ).scrollLeft() ) + 'px' );
} else {
$( this ).find( 'caption' ).css( 'margin-left', $( this ).scrollLeft() + 'px' );
}
} );
/**
* Mark overflowed tables for scrolling
*/
function unOverflowTables() {
$content.find( '.content-table > table' ).each( function () {
var $table = $( this ),
$wrapper = $table.parent().parent();
if ( $table.outerWidth() > $wrapper.outerWidth() ) {
$wrapper.addClass( 'overflowed' );
setScrollClass( $table );
} else {
$wrapper.removeClass( 'overflowed scroll-left scroll-right fixed-scrollbar-container' );
}
} );
// Set up sticky captions
$content.find( '.content-table > table > caption' ).each( function () {
var $container, tableHeight,
$table = $( this ).parent(),
$wrapper = $table.parent().parent();
if ( $table.outerWidth() > $wrapper.outerWidth() ) {
$container = $( this ).parents( '.content-table-wrapper' );
$( this ).width( $content.width() );
tableHeight = $container.innerHeight() - $( this ).outerHeight();
$container.find( '.content-table-left' ).height( tableHeight );
$container.find( '.content-table-right' ).height( tableHeight );
}
} );
}
unOverflowTables();
$( window ).on( 'resize', unOverflowTables );
/**
* Sticky scrollbars maybe?!
*/
$content.find( '.content-table' ).each( function () {
var $table, $tableWrapper, $spoof, $scrollbar;
$tableWrapper = $( this );
$table = $tableWrapper.children( 'table' ).first();
// Assemble our silly crap and add to page
$scrollbar = $( '<div>' ).addClass( 'content-table-scrollbar inactive' ).width( $content.width() );
$spoof = $( '<div>' ).addClass( 'content-table-spoof' ).width( $table.outerWidth() );
$tableWrapper.parent().prepend( $scrollbar.prepend( $spoof ) );
} );
/**
* Scoll table when scrolling scrollbar and visa-versa lololol wut
*/
$content.find( '.content-table' ).on( 'scroll', function () {
// Only do this here if we're not already mirroring the spoof
var $mirror = $( this ).siblings( '.inactive' ).first();
$mirror.scrollLeft( $( this ).scrollLeft() );
} );
$content.find( '.content-table-scrollbar' ).on( 'scroll', function () {
var $mirror = $( this ).siblings( '.content-table' ).first();
// Only do this here if we're not already mirroring the table
// eslint-disable-next-line no-jquery/no-class-state
if ( !$( this ).hasClass( 'inactive' ) ) {
$mirror.scrollLeft( $( this ).scrollLeft() );
}
} );
/**
* Set active when actually over the table it applies to...
*/
function determineActiveSpoofScrollbars() {
$content.find( '.overflowed .content-table' ).each( function () {
var $scrollbar = $( this ).siblings( '.content-table-scrollbar' ).first();
// Skip caption
var captionHeight = $( this ).find( 'caption' ).outerHeight() || 0;
if ( captionHeight ) {
// Pad slightly for reasons
captionHeight += 8;
}
var tableTop = $( this ).offset().top,
tableBottom = tableTop + $( this ).outerHeight(),
viewBottom = window.scrollY + document.documentElement.clientHeight,
active = tableTop + captionHeight < viewBottom && tableBottom > viewBottom;
$scrollbar.toggleClass( 'inactive', !active );
} );
}
determineActiveSpoofScrollbars();
$( window ).on( 'scroll resize', determineActiveSpoofScrollbars );
function showContent(id) {
const conteudos = document.querySelectorAll('.nav-content');
conteudos.forEach((div) => {
div.classList.remove('show-content');
});
document.getElementById(id).classList.add('show-content');
}
/**
* Make sure tablespoofs remain correctly-sized?
*/
$( window ).on( 'resize', function () {
$content.find( '.content-table-scrollbar' ).each( function () {
var width = $( this ).siblings().first().find( 'table' ).first().width();
$( this ).find( '.content-table-spoof' ).first().width( width );
$( this ).width( $content.width() );
} );
} );
} );
/* Popout menus (header) */
/* eslint-disable no-jquery/no-fade */
$( function () {
var toggleTime = 200;
// Open the various menus
$( '#user-tools h2' ).on( 'click', function () {
if ( $( window ).width() < 851 ) {
$( '#personal-inner, #menus-cover' ).fadeToggle( toggleTime );
}
} );
$( '#site-navigation h2' ).on( 'click', function () {
if ( $( window ).width() < 851 ) {
$( '#site-navigation .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
}
} );
$( '#site-tools h2' ).on( 'click', function () {
if ( $( window ).width() < 851 ) {
$( '#site-tools .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
}
} );
$( '#ca-more' ).on( 'click', function () {
$( '#page-tools .sidebar-inner' ).css( 'top', $( '#ca-more' ).offset().top + 25 );
if ( $( window ).width() < 851 ) {
$( '#page-tools .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
}
} );
$( '#ca-languages' ).on( 'click', function () {
$( '#other-languages .sidebar-inner' ).css( 'top', $( '#ca-languages' ).offset().top + 25 );
if ( $( window ).width() < 851 ) {
$( '#other-languages .sidebar-inner, #menus-cover' ).fadeToggle( toggleTime );
}
} );
// Close menus on click outside
$( document ).on( 'click touchstart', function ( e ) {
if ( $( e.target ).closest( '#menus-cover' ).length > 0 ) {
$( '#personal-inner' ).fadeOut( toggleTime );
$( '.sidebar-inner' ).fadeOut( toggleTime );
$( '#menus-cover' ).fadeOut( toggleTime );
}
} );
} );
// Adiciona efeitos de interação
document.addEventListener('DOMContentLoaded', function() {
const guideItems = document.querySelectorAll('.mw-guide-item');
guideItems.forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-3px)';
});
item.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
item.addEventListener('click', function(e) {
// Adiciona efeito de clique
this.style.transform = 'translateY(1px)';
setTimeout(() => {
this.style.transform = 'translateY(-3px)';
}, 100);
});
});
});
// JavaScript para Cards com Imagem - compatível com sistema existente
$(document).ready(function() {
// Função para gerenciar cards com imagem (reutiliza lógica existente)
function initImageCards() {
const imageCards = $('.mw-image-card');
// Aplica os mesmos efeitos dos guias existentes
imageCards.each(function() {
const $card = $(this);
// Efeitos hover melhorados
$card.on('mouseenter', function() {
$(this).css({
'transform': 'translateY(-8px) scale(1.02)',
'transition': 'all 0.3s ease'
});
});
$card.on('mouseleave', function() {
$(this).css({
'transform': 'translateY(0) scale(1)',
'transition': 'all 0.3s ease'
});
});
// Efeito de clique
$card.on('click', function() {
$(this).css('transform', 'translateY(-2px) scale(0.98)');
setTimeout(() => {
$(this).css('transform', 'translateY(-8px) scale(1.02)');
}, 150);
});
});
}
// Função para gerenciar carregamento de imagens
function handleImageLoading() {
$('.mw-card-image img').each(function() {
const $img = $(this);
const $container = $img.parent();
// Adiciona classe de loading
$container.addClass('loading');
// Quando a imagem carregar
$img.on('load', function() {
$container.removeClass('loading');
});
// Se a imagem falhar ao carregar
$img.on('error', function() {
$container.removeClass('loading');
// Mantém o gradiente de fundo como fallback
$img.hide();
});
// Se a imagem já estiver carregada (cache)
if (this.complete) {
$container.removeClass('loading');
}
});
}
// Função de responsividade para cards com imagem
function adjustImageGrid() {
const imageGrid = $('.mw-image-grid');
const width = $(window).innerWidth;
if (width < 480) {
imageGrid.css('grid-template-columns', '1fr');
} else if (width < 768) {
imageGrid.css('grid-template-columns', 'repeat(auto-fit, minmax(250px, 1fr))');
} else {
imageGrid.css('grid-template-columns', 'repeat(auto-fit, minmax(300px, 1fr))');
}
}
// Função para lazy loading de imagens (opcional)
function lazyLoadImages() {
if ('IntersectionObserver' in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const dataSrc = img.getAttribute('data-src');
if (dataSrc) {
img.src = dataSrc;
img.removeAttribute('data-src');
imageObserver.unobserve(img);
}
}
});
});
$('.mw-card-image img[data-src]').each(function() {
imageObserver.observe(this);
});
}
}
// Integração com sistema existente de guias
function integrateWithExistingSystem() {
// Estende a funcionalidade existente para incluir cards de imagem
if (typeof window.adjustGuideGrid === 'function') {
const originalAdjustGuideGrid = window.adjustGuideGrid;
window.adjustGuideGrid = function() {
originalAdjustGuideGrid();
adjustImageGrid();
};
} else {
window.adjustGuideGrid = adjustImageGrid;
}
// Adiciona cards de imagem ao sistema de debug existente
if (typeof window.debugSubmenus === 'function') {
const originalDebug = window.debugSubmenus;
window.debugImageCards = function() {
$('.mw-image-card').each(function() {
const $card = $(this);
const text = $card.find('.mw-card-text').text();
const hasImage = $card.find('img').length > 0;
const imageLoaded = hasImage ? $card.find('img')[0].complete : false;
console.log('Image Card:', {
text: text,
hasImage: hasImage,
imageLoaded: imageLoaded,
dimensions: {
width: $card.width(),
height: $card.height()
}
});
});
// Chama debug original se existir
if (originalDebug) originalDebug();
};
}
}
// Inicialização
initImageCards();
handleImageLoading();
adjustImageGrid();
lazyLoadImages();
integrateWithExistingSystem();
// Event listeners
$(window).on('resize', function() {
adjustImageGrid();
});
// Observa mudanças no DOM para novos cards adicionados dinamicamente
if (typeof MutationObserver !== 'undefined') {
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
$(mutation.addedNodes).find('.mw-image-card').each(function() {
initImageCards();
handleImageLoading();
});
}
});
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
// Função global para adicionar novos cards dinamicamente
window.addImageCard = function(container, link, imageSrc, text, bgClass) {
const cardHtml = `
<a href="${link}" class="mw-image-card">
<div class="mw-card-image ${bgClass || ''}">
<img src="${imageSrc}" alt="${text}" />
</div>
<div class="mw-card-text">${text}</div>
</a>
`;
$(container).find('.mw-image-grid').append(cardHtml);
// Reinicializa funcionalidades para o novo card
const $newCard = $(container).find('.mw-image-card').last();
$newCard.trigger('initImageCard');
};
// Função para tornar todas as tabelas responsivas
function makeTablesResponsive() {
// Seleciona todas as tabelas da página
const tables = document.querySelectorAll('table');
tables.forEach(table => {
// Verifica se a tabela tem cabeçalhos (th)
let headers = Array.from(table.querySelectorAll('th')).map(th => th.textContent.trim());
// Se não houver cabeçalhos, tenta usar a primeira linha como cabeçalho
if (headers.length === 0) {
const firstRow = table.querySelector('tr');
if (firstRow) {
const cells = firstRow.querySelectorAll('td');
headers.push(...Array.from(cells).map(cell => cell.textContent.trim()));
}
}
// Para tabelas com cabeçalhos em múltiplas linhas, tentamos capturar todos
if (table.querySelectorAll('thead tr').length > 1) {
// Para tabelas com cabeçalhos complexos, usamos a última linha de cabeçalhos
const headerRows = table.querySelectorAll('thead tr');
const lastHeaderRow = headerRows[headerRows.length - 1];
headers = Array.from(lastHeaderRow.querySelectorAll('th')).map(th => th.textContent.trim());
}
// Para cada linha da tabela, adiciona atributos data-label às células
const rows = table.querySelectorAll('tr');
// Começa a partir da primeira linha após os cabeçalhos
// Se estamos em uma tabela sem thead ou com th, começamos nas linhas de tbody
// Se tabela tiver thead, ignoramos as linhas de cabeçalho
let startRow = 0;
if (table.querySelector('thead')) {
startRow = table.querySelectorAll('thead tr').length;
} else if (headers.length > 0 && table.querySelectorAll('th').length > 0) {
// Se não tem thead mas tem th, assumimos primeira linha como cabeçalho
startRow = 1;
}
for (let i = startRow; i < rows.length; i++) {
const cells = rows[i].querySelectorAll('td');
cells.forEach((cell, index) => {
if (index < headers.length && headers[index]) {
cell.setAttribute('data-label', headers[index]);
}
});
}
});
}
// Executa quando o DOM estiver pronto
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', makeTablesResponsive);
} else {
makeTablesResponsive();
}
// Verifica novamente após o carregamento da página (para conteúdo carregado dinamicamente)
window.addEventListener('load', makeTablesResponsive);
// Para lidar com conteúdo adicionado dinamicamente (como em edições AJAX)
// Observe mutações no DOM
if (typeof MutationObserver !== 'undefined') {
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
makeTablesResponsive();
}
});
});
// Observe mudanças no corpo do documento
observer.observe(document.body, { childList: true, subtree: true });
}
mw.loader.state({
"skins.timeless.js": "ready"
});
/*
VortanMU - Timeless sidebar behavior (v3)
- Hover to open (desktop) + click to toggle (touch/keyboard)
- Keeps original Timeless structure (portlets)
- Avoids conflicts with any previously-injected mega-menu nodes
Install: paste into MediaWiki:Timeless.js (replace your current sidebar script).
*/
(function () {
'use strict';
if (window.VM_TIMELESS_SIDEBAR_V3) return;
window.VM_TIMELESS_SIDEBAR_V3 = true;
function enhanceSidebar() {
var nav = document.getElementById('mw-site-navigation');
if (!nav) return;
nav.classList.add('vm-nav');
// Remove any old injected mega-menu nodes (common source of “applies then reverts”)
Array.prototype.forEach.call(nav.querySelectorAll('ul.submenu'), function (el) {
el.parentNode && el.parentNode.removeChild(el);
});
var portlets = Array.prototype.slice.call(
nav.querySelectorAll('.mw-portlet[role="navigation"]')
);
var hoverCapable = !!(window.matchMedia && window.matchMedia('(hover:hover) and (pointer:fine)').matches);
function setExpanded(p, expanded) {
var h = p.querySelector('h3.vm-portlet__header') || p.querySelector('h3');
if (h) h.setAttribute('aria-expanded', expanded ? 'true' : 'false');
}
function closePortlet(p) {
p.classList.remove('is-open');
setExpanded(p, false);
}
function openPortlet(p) {
// close others (keeps sidebar clean), but never close Wiki tools
portlets.forEach(function (other) {
if (other !== p && other.id !== 'p-tb') closePortlet(other);
});
p.classList.add('is-open');
setExpanded(p, true);
}
portlets.forEach(function (p) {
var h3 = p.querySelector('h3');
var body = p.querySelector('.mw-portlet-body');
if (!h3 || !body) return;
// IGNORA os portlets padrão do Timeless
if (p.id === "p-navigation" || p.id === "p-tb") return;
h3.classList.add('vm-portlet__header');
body.classList.add('vm-portlet__body');
// If something hid the original <ul> inline, bring it back
var ul = body.querySelector('ul');
if (ul && ul.style && ul.style.display === 'none') ul.style.display = '';
// Wiki tools: always visible
if (p.id === 'p-tb') {
p.classList.add('is-open');
h3.setAttribute('aria-expanded', 'true');
return;
}
// default closed
closePortlet(p);
// accessibility + click toggle
h3.setAttribute('role', 'button');
h3.setAttribute('tabindex', '0');
h3.setAttribute('aria-expanded', 'false');
function toggle() {
if (p.classList.contains('is-open')) closePortlet(p);
else openPortlet(p);
}
h3.addEventListener('click', function (e) {
e.preventDefault();
toggle();
});
h3.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggle();
}
});
// Hover open (desktop)
if (hoverCapable) {
var t;
p.addEventListener('mouseenter', function () {
if (t) clearTimeout(t);
openPortlet(p);
});
p.addEventListener('mouseleave', function () {
if (t) clearTimeout(t);
t = setTimeout(function () { closePortlet(p); }, 180);
});
}
});
}
// Run on normal loads + after purge/navigation
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(enhanceSidebar);
} else if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', enhanceSidebar);
} else {
enhanceSidebar();
}
})();
/* ==============================
VortanMU - Mega flyout (hover + colunas)
Cole no FINAL do MediaWiki:Timeless.js
============================== */
(function () {
function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn);
} else {
fn();
}
}
function clamp(n, min, max) {
return Math.max(min, Math.min(max, n));
}
function calcColumns(portletId, itemCount) {
// Regra principal: ~6 itens por coluna
// Mapas é exceção: aceita mais por coluna pra não virar 5+ colunas
var perCol = 6;
if (portletId === "p-Mapas") perCol = 10;
var cols = Math.ceil(itemCount / perCol);
return clamp(cols, 1, 4);
}
onReady(function () {
var nav = document.getElementById("site-navigation");
if (!nav) return;
var portlets = nav.querySelectorAll(".mw-portlet");
portlets.forEach(function (portlet) {
var h3 = portlet.querySelector("h3");
var body = portlet.querySelector(".mw-portlet-body");
if (!h3 || !body) return;
var ul = body.querySelector("ul");
if (!ul) return;
var lis = Array.from(ul.querySelectorAll("li"));
if (!lis.length) return;
// Marca como “mega”
h3.classList.add("has-mega");
// Cria o submenu (se ainda não existe)
var submenu = portlet.querySelector("ul.submenu");
if (!submenu) {
submenu = document.createElement("ul");
submenu.className = "submenu";
portlet.appendChild(submenu);
}
// Reconstrói os itens do flyout (mantém sempre consistente)
submenu.innerHTML = "";
lis.forEach(function (li) {
var a = li.querySelector("a");
if (!a) return;
var li2 = document.createElement("li");
li2.appendChild(a.cloneNode(true));
submenu.appendChild(li2);
});
// Define quantidade de colunas por regra
var count = submenu.querySelectorAll("li").length;
var cols = calcColumns(portlet.id || "", count);
submenu.classList.remove(
"submenu-1-columns",
"submenu-2-columns",
"submenu-3-columns",
"submenu-4-columns"
);
submenu.classList.add("submenu-" + cols + "-columns");
// Esconde UL original (menu vira “botão” + flyout)
ul.style.display = "none";
body.style.display = "none";
// Hover abre/fecha com pequeno delay (pra dar tempo de mover o mouse)
var hideTimer = null;
function show() {
if (hideTimer) clearTimeout(hideTimer);
submenu.style.display = "grid";
}
function hide() {
hideTimer = setTimeout(function () {
submenu.style.display = "none";
}, 140);
}
// Hover desktop
h3.addEventListener("mouseenter", show);
portlet.addEventListener("mouseenter", show);
portlet.addEventListener("mouseleave", hide);
submenu.addEventListener("mouseenter", show);
submenu.addEventListener("mouseleave", hide);
// Clique (fallback)
h3.addEventListener("click", function (e) {
// em desktop isso não atrapalha, e em touch ajuda
e.preventDefault();
var isOpen = submenu.style.display === "grid";
submenu.style.display = isOpen ? "none" : "grid";
});
});
});
})();
/* ===============================
VortanMU Mega Sidebar (v4)
- Floating flyout overlay (no clipping)
- Max 6 items/col (Maps: 10 items/col)
- Responsive: desktop hover, small screens click/accordion
================================= */
(function () {
"use strict";
const MIN_DESKTOP = 1200; // below this, no hover-flyout
const GAP = 18; // distance between sidebar and flyout
const CLOSE_DELAY = 180;
function onReady(fn) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", fn, { once: true });
} else {
fn();
}
}
function hoverCapable() {
return (
window.innerWidth >= MIN_DESKTOP &&
window.matchMedia &&
window.matchMedia("(hover:hover) and (pointer:fine)").matches
);
}
function ensurePanel() {
let panel = document.getElementById("vm-mega-panel");
if (panel) return panel;
panel = document.createElement("div");
panel.id = "vm-mega-panel";
document.body.appendChild(panel);
return panel;
}
function buildPanel(panel, title, links) {
panel.replaceChildren();
const t = (title || "").toLowerCase();
const isMaps = t.includes("mapas") || t.includes("maps");
const maxPerCol = isMaps ? 10 : 6;
let cols = Math.ceil(links.length / maxPerCol);
cols = Math.max(1, Math.min(cols, 4));
panel.style.setProperty("--vm-cols", String(cols));
const grid = document.createElement("div");
grid.className = "vm-grid";
const colUls = [];
for (let c = 0; c < cols; c++) {
const ul = document.createElement("ul");
ul.className = "vm-col";
colUls.push(ul);
grid.appendChild(ul);
}
links.forEach((a, idx) => {
const li = document.createElement("li");
const link = a.cloneNode(true);
link.removeAttribute("accesskey");
li.appendChild(link);
const colIndex = Math.min(cols - 1, Math.floor(idx / maxPerCol));
colUls[colIndex].appendChild(li);
});
panel.appendChild(grid);
}
function positionPanel(panel, anchorEl) {
const r = anchorEl.getBoundingClientRect();
const sx = window.scrollX || window.pageXOffset || 0;
const sy = window.scrollY || window.pageYOffset || 0;
// Limit width to what fits on the right
const availableRight = window.innerWidth - r.right - GAP - 16;
const maxW = Math.max(420, Math.min(920, availableRight));
panel.style.maxWidth = maxW + "px";
let left = r.right + GAP + sx;
let top = r.top + sy;
// Keep inside viewport vertically
const pad = 12;
const maxTop = sy + window.innerHeight - panel.offsetHeight - pad;
if (panel.offsetHeight && top > maxTop) {
top = Math.max(sy + pad, maxTop);
}
panel.style.left = left + "px";
panel.style.top = top + "px";
}
function initVortanMegaSidebar() {
const leftNav = document.getElementById("mw-site-navigation");
if (!leftNav) return;
// prevent double-init
if (leftNav.classList.contains("vm-nav--ready")) return;
leftNav.classList.add("vm-nav");
// Prefer the inner chunk if present
const chunk = document.getElementById("site-navigation") || leftNav;
const portlets = Array.from(chunk.querySelectorAll(".mw-portlet"));
// Remove empty toolbox (common: "WIKI TOOLS" with no links)
portlets.forEach((p) => {
const body = p.querySelector(".mw-portlet-body");
const links = body ? body.querySelectorAll("a") : [];
const h3 = p.querySelector("h3");
const title = h3 ? h3.textContent.trim().toLowerCase() : "";
if (p.id === "p-tb" || title === "wiki tools" || title === "ferramentas") {
if (!links.length) {
p.remove();
}
}
});
const triggers = [];
portlets.forEach((p) => {
const h3 = p.querySelector("h3");
const body = p.querySelector(".mw-portlet-body");
if (!h3 || !body) return;
// Ignore logo/search portlets if they exist here
if (p.id === "p-logo" || p.id === "p-search") return;
const title = h3.textContent.trim();
if (!title) return;
const links = Array.from(body.querySelectorAll("li a")).filter(
(a) => (a.getAttribute("href") || "").trim().length
);
if (!links.length) return;
h3.classList.add("vm-portlet__header");
h3.setAttribute("tabindex", "0");
h3.setAttribute("role", "button");
h3.setAttribute("aria-expanded", "false");
triggers.push({ portlet: p, header: h3, title, links });
});
// mark ready (CSS will hide original lists only now)
leftNav.classList.add("vm-nav--ready");
const panel = ensurePanel();
let active = null;
let closeTimer = null;
function openFor(tr) {
if (closeTimer) {
clearTimeout(closeTimer);
closeTimer = null;
}
if (active && active !== tr) {
active.portlet.classList.remove("is-open");
active.header.setAttribute("aria-expanded", "false");
}
active = tr;
buildPanel(panel, tr.title, tr.links);
panel.classList.add("is-open");
tr.portlet.classList.add("is-open");
tr.header.setAttribute("aria-expanded", "true");
positionPanel(panel, tr.header);
}
function closeAll() {
if (active) {
active.portlet.classList.remove("is-open");
active.header.setAttribute("aria-expanded", "false");
active = null;
}
panel.classList.remove("is-open");
panel.replaceChildren();
}
function scheduleClose() {
if (closeTimer) clearTimeout(closeTimer);
closeTimer = setTimeout(closeAll, CLOSE_DELAY);
}
// Keep open while mouse is on panel
panel.addEventListener("mouseenter", () => {
if (closeTimer) clearTimeout(closeTimer);
});
panel.addEventListener("mouseleave", scheduleClose);
triggers.forEach((tr) => {
// Hover open only on desktop
tr.portlet.addEventListener("mouseenter", () => {
if (hoverCapable()) openFor(tr);
});
tr.portlet.addEventListener("mouseleave", () => {
if (hoverCapable()) scheduleClose();
});
// Click behavior:
// - Desktop: toggles flyout
// - Small screens: toggles accordion (original body)
tr.header.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
if (!hoverCapable()) {
// accordion mode (mobile/small)
tr.portlet.classList.toggle("is-open");
const expanded = tr.portlet.classList.contains("is-open");
tr.header.setAttribute("aria-expanded", expanded ? "true" : "false");
return;
}
if (active === tr) closeAll();
else openFor(tr);
});
tr.header.addEventListener("keydown", (e) => {
if (e.key !== "Enter" && e.key !== " ") return;
e.preventDefault();
tr.header.click();
});
});
// Close when clicking outside
document.addEventListener("click", (e) => {
if (!panel.classList.contains("is-open")) return;
const clickInsideSidebar = leftNav.contains(e.target);
const clickInsidePanel = panel.contains(e.target);
if (!clickInsideSidebar && !clickInsidePanel) closeAll();
});
// Reposition on scroll/resize
window.addEventListener(
"scroll",
() => {
if (active && panel.classList.contains("is-open") && hoverCapable()) {
positionPanel(panel, active.header);
}
},
{ passive: true }
);
window.addEventListener("resize", () => {
if (!active) return;
if (!hoverCapable()) {
closeAll();
} else {
positionPanel(panel, active.header);
}
});
}
// MediaWiki hook + DOM ready fallback
if (window.mw && mw.hook) {
mw.hook("wikipage.content").add(initVortanMegaSidebar);
}
onReady(initVortanMegaSidebar);
})();
