Difference between revisions of "MediaWiki:Common.js"
Jump to navigation
Jump to search
| Line 23: | Line 23: | ||
}); | }); | ||
| − | // | + | /* Versão modificada apenas da função que trata as imagens */ |
| − | + | function initImageCopy() { | |
| − | + | $('.tile-top.tile-image a').each(function() { | |
| − | + | var $link = $(this); | |
| − | + | if (!$link.hasClass('warp-copy')) { | |
| − | + | var npcId = $link.attr('href').replace('#',''); | |
| − | + | $link.addClass('warp-copy') | |
| − | + | .attr('data-copy', '@warp ' + npcId) | |
| − | + | .css('cursor', 'pointer'); | |
| − | + | } | |
| − | + | }); | |
| + | |||
| + | // Solução híbrida para preservar animação dos GIFs em TODOS os casos | ||
| + | $('.tile-top.tile-image img').each(function() { | ||
| + | var $img = $(this); | ||
| + | var width = $img.data('width'); | ||
| + | var height = $img.data('height'); | ||
| − | + | if (width || height) { | |
| − | + | $img.addClass('custom-size'); | |
| − | var $img | + | |
| − | var | + | // Primeiro, verificamos se o GIF é menor que o tamanho desejado |
| − | var | + | var originalWidth = $img[0].naturalWidth; |
| + | var originalHeight = $img[0].naturalHeight; | ||
| + | var needsEnlarge = (width && width > originalWidth) || (height && height > originalHeight); | ||
| + | var needsShrink = (width && width < originalWidth) || (height && height < originalHeight); | ||
| − | if ( | + | if (needsEnlarge) { |
| − | |||
| − | + | // Para aumentar o tamanho, usamos CSS direto (funciona bem para aumento) | |
$img.css({ | $img.css({ | ||
| − | 'width': '', | + | 'width': width ? width + 'px' : 'auto', |
| − | 'height': '', | + | 'height': height ? height + 'px' : 'auto', |
| − | 'max-width': '', | + | 'max-width': width ? width + 'px' : '100%', |
| − | 'max-height': '' | + | 'max-height': height ? height + 'px' : 'none' |
}); | }); | ||
| − | + | } | |
| − | // | + | else if (needsShrink) { |
| − | if ( | + | // Para diminuir o tamanho, usamos o container para preservar animação |
| − | $img. | + | if (!$img.parent().hasClass('gif-container')) { |
| − | + | $img.wrap('<div class="gif-container"></div>'); | |
| − | + | var $container = $img.parent('.gif-container'); | |
| − | $img. | + | |
| − | + | // Aplicar estilos ao container | |
| − | + | $container.css({ | |
| − | + | 'display': 'flex', | |
| − | + | 'justify-content': 'center', | |
| − | $ | + | 'align-items': 'center', |
| − | + | 'overflow': 'hidden', | |
| − | + | 'width': width ? width + 'px' : 'auto', | |
| − | + | 'height': height ? height + 'px' : 'auto' | |
| − | $img.css(' | + | }); |
| − | + | ||
| + | // O GIF mantém seu tamanho original (preservando a animação) | ||
| + | // mas é posicionado dentro do container com object-fit | ||
| + | $img.css({ | ||
| + | 'object-fit': 'cover', | ||
| + | 'width': '100%', | ||
| + | 'height': '100%', | ||
| + | 'max-width': 'none', | ||
| + | 'max-height': 'none' | ||
| + | }); | ||
} | } | ||
} | } | ||
| − | }); | + | } |
| − | + | }); | |
| + | } | ||
// Inicializar ao carregar e em atualizações de conteúdo | // Inicializar ao carregar e em atualizações de conteúdo | ||
Revision as of 13:13, 8 May 2025
/* Any JavaScript here will be loaded for all users on every page load. */
$(document).ready(function() {
// Função única para cópia de texto
$(document).on('click', '.warp-copy', function(e) {
e.preventDefault();
var textToCopy = $(this).attr('data-copy');
// Cria elemento temporário para cópia
var tempInput = document.createElement('textarea');
tempInput.value = textToCopy;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
// Adiciona classe para feedback visual
var $element = $(this);
$element.addClass('copied');
setTimeout(function() {
$element.removeClass('copied');
}, 2000);
});
/* Versão modificada apenas da função que trata as imagens */
function initImageCopy() {
$('.tile-top.tile-image a').each(function() {
var $link = $(this);
if (!$link.hasClass('warp-copy')) {
var npcId = $link.attr('href').replace('#','');
$link.addClass('warp-copy')
.attr('data-copy', '@warp ' + npcId)
.css('cursor', 'pointer');
}
});
// Solução híbrida para preservar animação dos GIFs em TODOS os casos
$('.tile-top.tile-image img').each(function() {
var $img = $(this);
var width = $img.data('width');
var height = $img.data('height');
if (width || height) {
$img.addClass('custom-size');
// Primeiro, verificamos se o GIF é menor que o tamanho desejado
var originalWidth = $img[0].naturalWidth;
var originalHeight = $img[0].naturalHeight;
var needsEnlarge = (width && width > originalWidth) || (height && height > originalHeight);
var needsShrink = (width && width < originalWidth) || (height && height < originalHeight);
if (needsEnlarge) {
// Para aumentar o tamanho, usamos CSS direto (funciona bem para aumento)
$img.css({
'width': width ? width + 'px' : 'auto',
'height': height ? height + 'px' : 'auto',
'max-width': width ? width + 'px' : '100%',
'max-height': height ? height + 'px' : 'none'
});
}
else if (needsShrink) {
// Para diminuir o tamanho, usamos o container para preservar animação
if (!$img.parent().hasClass('gif-container')) {
$img.wrap('<div class="gif-container"></div>');
var $container = $img.parent('.gif-container');
// Aplicar estilos ao container
$container.css({
'display': 'flex',
'justify-content': 'center',
'align-items': 'center',
'overflow': 'hidden',
'width': width ? width + 'px' : 'auto',
'height': height ? height + 'px' : 'auto'
});
// O GIF mantém seu tamanho original (preservando a animação)
// mas é posicionado dentro do container com object-fit
$img.css({
'object-fit': 'cover',
'width': '100%',
'height': '100%',
'max-width': 'none',
'max-height': 'none'
});
}
}
}
});
}
// Inicializar ao carregar e em atualizações de conteúdo
initImageCopy();
if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(initImageCopy);
}
/* Auto-expand sections when clicking anchored links */
console.log("Inicializando script para expandir seções com links âncora");
// Handle initial page load with hash
if (window.location.hash) {
console.log("Página carregada com hash: " + window.location.hash);
setTimeout(function() {
expandSectionForAnchor(window.location.hash);
}, 300);
}
// Handle clicks on anchor links
$(document).on('click', 'a[href^="#"]', function(event) {
var hash = $(this).attr('href');
console.log("Clique em link âncora: " + hash);
event.preventDefault();
if (history.pushState) {
history.pushState(null, null, hash);
} else {
location.hash = hash;
}
expandSectionForAnchor(hash);
});
function expandSectionForAnchor(hash) {
console.log("Procurando e expandindo seção para âncora: " + hash);
var targetElement = $(hash);
if (targetElement.length) {
console.log("Elemento alvo encontrado");
var collapsibleSections = targetElement.parents('.mw-collapsible.mw-collapsed');
var directCollapsible = targetElement.closest('.mw-collapsible.mw-collapsed');
if (directCollapsible.length) {
collapsibleSections = collapsibleSections.add(directCollapsible);
}
console.log("Seções colapsáveis encontradas: " + collapsibleSections.length);
if (collapsibleSections.length > 0) {
collapsibleSections.each(function() {
var section = $(this);
console.log("Expandindo seção colapsável");
section.removeClass('mw-collapsed');
var toggleButton = section.find('.mw-collapsible-toggle').first();
if (toggleButton.length) {
console.log("Clicando no botão de expansão");
toggleButton.click();
}
if (section.hasClass('wikitable')) {
console.log("Expandindo tabela wikitable");
section.find('tr:not(:first-child)').show();
}
section.find('.mw-collapsible-content').show();
});
setTimeout(function() {
scrollToTarget(targetElement);
}, 400);
} else {
scrollToTarget(targetElement);
}
} else {
console.log("Elemento alvo não encontrado para hash: " + hash);
}
}
function scrollToTarget(element) {
console.log("Rolando até o elemento alvo");
$('html, body').animate({
scrollTop: element.offset().top - 100
}, 200);
}
if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(function() {
console.log("Conteúdo da wiki atualizado");
if (window.location.hash) {
setTimeout(function() {
expandSectionForAnchor(window.location.hash);
}, 300);
}
});
}
});