MediaWiki:Timeless.js: Difference between revisions
From Game Wiki - VortanMU
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* ===== Mega-menu LITE — Timeless ===== */ | mw.loader.using(['jquery']).then(function () { | ||
try { | |||
if (window.__VortanCleanJS) return; | |||
window.__VortanCleanJS = true; | |||
// ===== 0) Limpeza de handlers antigos ===== | |||
$(document).off('.vt-dd .vt-mega'); | |||
$(window).off('.vt-table .vt-mega .vt-table-sizefix .vt-table-unoverflow'); | |||
$('.custom-submenu').remove(); | |||
// ===== 1) DROPDOWNS DO HEADER (não toca na sidebar) ===== | |||
var $dropdowns = $('#personal, #p-variants-desktop'); | |||
function closeAll() { $dropdowns.removeClass('dropdown-active'); } | |||
$dropdowns.on('click.vt-dd', function (e) { | |||
var $self = $(this); | |||
if ($self.hasClass('dropdown-active')) { | |||
if ($(e.target).closest($('h2, #p-variants-desktop h3')).length > 0) closeAll(); | |||
} else { | |||
closeAll(); | |||
e.stopPropagation(); | |||
$self.addClass('dropdown-active'); | |||
} | |||
}); | |||
$(document).on('click.vt-dd', function (e) { | |||
if ($(e.target).closest($dropdowns).length === 0) closeAll(); | |||
}); | |||
// ===== 2) Utilitários de tabela (teu bloco, idempotente) ===== | |||
mw.hook('wikipage.content').add(function ($content) { | |||
$content.find('div > table:not( table table )').each(function () { | |||
var $t = $(this); | |||
if (!$t.parent().hasClass('content-table')) { | |||
$t.wrap('<div class="content-table-wrapper"><div class="content-table"></div></div>'); | |||
$t.closest('.content-table-wrapper') | |||
.prepend('<div class="content-table-left"></div><div class="content-table-right"></div>'); | |||
} | |||
}); | |||
function setScrollClass($table) { | |||
var $tableWrapper = $table.parent(); | |||
var scroll = Math.abs($tableWrapper.scrollLeft()); | |||
$tableWrapper.parent() | |||
.toggleClass('scroll-left', scroll > 1) | |||
.toggleClass('scroll-right', $table.outerWidth() - $tableWrapper.innerWidth() - scroll > 1); | |||
} | |||
$content.find('.content-table').off('scroll.vt-table').on('scroll.vt-table', 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'); | |||
} | |||
}); | |||
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'); | |||
} | |||
}); | |||
$content.find('.content-table > table > caption').each(function () { | |||
var $table = $(this).parent(), | |||
$wrapper = $table.parent().parent(); | |||
if ($table.outerWidth() > $wrapper.outerWidth()) { | |||
var $container = $(this).parents('.content-table-wrapper'); | |||
$(this).width($content.width()); | |||
var tableHeight = $container.innerHeight() - $(this).outerHeight(); | |||
$container.find('.content-table-left').height(tableHeight); | |||
$container.find('.content-table-right').height(tableHeight); | |||
} | |||
}); | |||
} | |||
unOverflowTables(); | |||
$(window).off('resize.vt-table-unoverflow').on('resize.vt-table-unoverflow', unOverflowTables); | |||
// Recria barras “spoof” | |||
$content.find('.content-table-scrollbar').remove(); | |||
$content.find('.content-table').each(function () { | |||
var $tableWrapper = $(this); | |||
var $table = $tableWrapper.children('table').first(); | |||
var $scrollbar = $('<div>').addClass('content-table-scrollbar inactive').width($content.width()); | |||
var $spoof = $('<div>').addClass('content-table-spoof').width($table.outerWidth()); | |||
$tableWrapper.parent().prepend($scrollbar.prepend($spoof)); | |||
}); | |||
$content.find('.content-table').off('scroll.vt-table-sync').on('scroll.vt-table-sync', function () { | |||
$(this).siblings('.inactive').first().scrollLeft($(this).scrollLeft()); | |||
}); | |||
$content.find('.content-table-scrollbar').off('scroll.vt-table-sync').on('scroll.vt-table-sync', function () { | |||
if (!$(this).hasClass('inactive')) { | |||
$(this).siblings('.content-table').first().scrollLeft($(this).scrollLeft()); | |||
} | |||
}); | |||
function determineActiveSpoofScrollbars() { | |||
$content.find('.overflowed .content-table').each(function () { | |||
var $scrollbar = $(this).siblings('.content-table-scrollbar').first(); | |||
var captionHeight = $(this).find('caption').outerHeight() || 0; | |||
if (captionHeight) captionHeight += 8; | |||
var tableTop = $(this).offset().top; | |||
var tableBottom = tableTop + $(this).outerHeight(); | |||
var viewBottom = window.scrollY + document.documentElement.clientHeight; | |||
var active = tableTop + captionHeight < viewBottom && tableBottom > viewBottom; | |||
$scrollbar.toggleClass('inactive', !active); | |||
}); | |||
} | |||
determineActiveSpoofScrollbars(); | |||
$(window).off('scroll.vt-table resize.vt-table').on('scroll.vt-table resize.vt-table', determineActiveSpoofScrollbars); | |||
$(window).off('resize.vt-table-sizefix').on('resize.vt-table-sizefix', function () { | |||
$content.find('.content-table-scrollbar').each(function () { | |||
var $ct = $(this).siblings().first().find('table').first(); | |||
$(this).find('.content-table-spoof').first().width($ct.width()); | |||
$(this).width($content.width()); | |||
}); | |||
}); | |||
}); | |||
// ===== 3) Garante que Navigation/Wiki tools continuam como lista ===== | |||
$('#p-navigation .mw-portlet-body > ul, #p-tb .mw-portlet-body > ul').show(); | |||
/* ===== Mega-menu LITE — Timeless ===== */ | |||
mw.loader.using(['jquery']).then(function () { | mw.loader.using(['jquery']).then(function () { | ||
try { | try { | ||
Revision as of 09:44, 7 November 2025
mw.loader.using(['jquery']).then(function () {
try {
if (window.__VortanCleanJS) return;
window.__VortanCleanJS = true;
// ===== 0) Limpeza de handlers antigos =====
$(document).off('.vt-dd .vt-mega');
$(window).off('.vt-table .vt-mega .vt-table-sizefix .vt-table-unoverflow');
$('.custom-submenu').remove();
// ===== 1) DROPDOWNS DO HEADER (não toca na sidebar) =====
var $dropdowns = $('#personal, #p-variants-desktop');
function closeAll() { $dropdowns.removeClass('dropdown-active'); }
$dropdowns.on('click.vt-dd', function (e) {
var $self = $(this);
if ($self.hasClass('dropdown-active')) {
if ($(e.target).closest($('h2, #p-variants-desktop h3')).length > 0) closeAll();
} else {
closeAll();
e.stopPropagation();
$self.addClass('dropdown-active');
}
});
$(document).on('click.vt-dd', function (e) {
if ($(e.target).closest($dropdowns).length === 0) closeAll();
});
// ===== 2) Utilitários de tabela (teu bloco, idempotente) =====
mw.hook('wikipage.content').add(function ($content) {
$content.find('div > table:not( table table )').each(function () {
var $t = $(this);
if (!$t.parent().hasClass('content-table')) {
$t.wrap('<div class="content-table-wrapper"><div class="content-table"></div></div>');
$t.closest('.content-table-wrapper')
.prepend('<div class="content-table-left"></div><div class="content-table-right"></div>');
}
});
function setScrollClass($table) {
var $tableWrapper = $table.parent();
var scroll = Math.abs($tableWrapper.scrollLeft());
$tableWrapper.parent()
.toggleClass('scroll-left', scroll > 1)
.toggleClass('scroll-right', $table.outerWidth() - $tableWrapper.innerWidth() - scroll > 1);
}
$content.find('.content-table').off('scroll.vt-table').on('scroll.vt-table', 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');
}
});
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');
}
});
$content.find('.content-table > table > caption').each(function () {
var $table = $(this).parent(),
$wrapper = $table.parent().parent();
if ($table.outerWidth() > $wrapper.outerWidth()) {
var $container = $(this).parents('.content-table-wrapper');
$(this).width($content.width());
var tableHeight = $container.innerHeight() - $(this).outerHeight();
$container.find('.content-table-left').height(tableHeight);
$container.find('.content-table-right').height(tableHeight);
}
});
}
unOverflowTables();
$(window).off('resize.vt-table-unoverflow').on('resize.vt-table-unoverflow', unOverflowTables);
// Recria barras “spoof”
$content.find('.content-table-scrollbar').remove();
$content.find('.content-table').each(function () {
var $tableWrapper = $(this);
var $table = $tableWrapper.children('table').first();
var $scrollbar = $('<div>').addClass('content-table-scrollbar inactive').width($content.width());
var $spoof = $('<div>').addClass('content-table-spoof').width($table.outerWidth());
$tableWrapper.parent().prepend($scrollbar.prepend($spoof));
});
$content.find('.content-table').off('scroll.vt-table-sync').on('scroll.vt-table-sync', function () {
$(this).siblings('.inactive').first().scrollLeft($(this).scrollLeft());
});
$content.find('.content-table-scrollbar').off('scroll.vt-table-sync').on('scroll.vt-table-sync', function () {
if (!$(this).hasClass('inactive')) {
$(this).siblings('.content-table').first().scrollLeft($(this).scrollLeft());
}
});
function determineActiveSpoofScrollbars() {
$content.find('.overflowed .content-table').each(function () {
var $scrollbar = $(this).siblings('.content-table-scrollbar').first();
var captionHeight = $(this).find('caption').outerHeight() || 0;
if (captionHeight) captionHeight += 8;
var tableTop = $(this).offset().top;
var tableBottom = tableTop + $(this).outerHeight();
var viewBottom = window.scrollY + document.documentElement.clientHeight;
var active = tableTop + captionHeight < viewBottom && tableBottom > viewBottom;
$scrollbar.toggleClass('inactive', !active);
});
}
determineActiveSpoofScrollbars();
$(window).off('scroll.vt-table resize.vt-table').on('scroll.vt-table resize.vt-table', determineActiveSpoofScrollbars);
$(window).off('resize.vt-table-sizefix').on('resize.vt-table-sizefix', function () {
$content.find('.content-table-scrollbar').each(function () {
var $ct = $(this).siblings().first().find('table').first();
$(this).find('.content-table-spoof').first().width($ct.width());
$(this).width($content.width());
});
});
});
// ===== 3) Garante que Navigation/Wiki tools continuam como lista =====
$('#p-navigation .mw-portlet-body > ul, #p-tb .mw-portlet-body > ul').show();
/* ===== Mega-menu LITE — Timeless ===== */
mw.loader.using(['jquery']).then(function () {
try {
if (window.__megaMenuLite) return;
window.__megaMenuLite = true;
var NAV_SEL = '#site-navigation .sidebar-inner';
var isDesktop = function () { return window.innerWidth >= 851; };
function build() {
var $nav = $(NAV_SEL);
if (!$nav.length) return;
// limpeza de execuções antigas e lixos que possam ter sobrado
$nav.find('.mw-portlet').each(function () {
var $p = $(this);
var $ulOrig = $p.find('> .mw-portlet-body > ul, > ul').first();
$p.removeClass('has-mega active has-submenu').off('.megamenu');
// remove ULs clonados que possam ter sido anexados direto no portlet
$p.children('ul.submenu').remove();
// restaura o UL original
if ($ulOrig.length) {
$ulOrig.show()
.removeClass('submenu submenu-2-columns submenu-3-columns submenu-4-columns')
.off('.megamenu');
}
});
// aplica comportamento sem alterar DOM
$nav.find('.mw-portlet').each(function () {
var $p = $(this);
var $h3 = $p.children('h3').first();
var $ul = $p.find('> .mw-portlet-body > ul, > ul').first();
if (!$h3.length || !$ul.length) return;
var $links = $ul.find('> li > a');
if (!$links.length) return;
// marca como tendo submenu e classifica colunas
$p.addClass('has-submenu'); // usado pelo CSS
$ul.addClass('submenu'); // painel
var n = $links.length;
if (n > 20) $ul.addClass('submenu-4-columns');
else if (n > 12) $ul.addClass('submenu-3-columns');
else if (n > 6) $ul.addClass('submenu-2-columns');
// escondido por padrão; CSS/JS mostram quando necessário
$ul.hide();
// interação (hover no desktop, clique no mobile)
var closeTimer = null;
function open() { $p.addClass('active'); $ul.stop(true, true).fadeIn(90); }
function close() { $p.removeClass('active'); $ul.stop(true, true).fadeOut(90); }
function toggle(){ $ul.is(':visible') ? close() : open(); }
$h3.on('mouseenter.megamenu', function () {
if (isDesktop()) open();
}).on('mouseleave.megamenu', function () {
if (isDesktop()) {
closeTimer = setTimeout(function () {
if (!$ul.is(':hover') && !$h3.is(':hover')) close();
}, 120);
}
}).on('click.megamenu', function (e) {
if (!isDesktop()) { e.preventDefault(); toggle(); }
});
$ul.on('mouseenter.megamenu', function () {
if (isDesktop()) { clearTimeout(closeTimer); open(); }
}).on('mouseleave.megamenu', function () {
if (isDesktop()) {
closeTimer = setTimeout(function () {
if (!$h3.is(':hover')) close();
}, 120);
}
});
});
// fechar clicando fora
$(document).off('click.megamenu').on('click.megamenu', function (e) {
if ($(e.target).closest(NAV_SEL + ' .mw-portlet').length === 0) {
var $nav = $(NAV_SEL);
$nav.find('.mw-portlet.active').removeClass('active');
$nav.find('.mw-portlet .submenu:visible').fadeOut(90);
}
});
}
mw.hook('wikipage.content').add(build);
$(build);
console.log('[MegaMenu LITE] pronto');
} catch (err) {
console.error('[MegaMenu LITE] erro', err);
}
});