Difference between revisions of "MediaWiki:Common.js"

From XilePK - Ragnarok Online Server
Jump to navigation Jump to search
Line 1: Line 1:
−
/* Any JavaScript here will be loaded for all users on every page load. */
+
/* Adição ao seu common.js para corrigir problemas com dimensões de imagens */
  
 
$(document).ready(function() {
 
$(document).ready(function() {
−
   // Função única para cópia de texto
+
   // Função para corrigir o dimensionamento de imagens
−
   $(document).on('click', '.warp-copy', function(e) {
+
   function fixImageDimensions() {
−
     e.preventDefault();
+
     console.log("Corrigindo dimensões de imagens...");
−
    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);
 
−
  });
 
−
 
−
  // Adicionar funcionalidade às imagens dos NPCs
 
−
  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');
 
−
      }
 
−
    });
 
−
   
 
−
    // Aplicar tamanhos personalizados para imagens
 
 
     $('.tile-top.tile-image img').each(function() {
 
     $('.tile-top.tile-image img').each(function() {
 
       var $img = $(this);
 
       var $img = $(this);
Line 41: Line 11:
 
       var height = $img.data('height') || $img.attr('height');
 
       var height = $img.data('height') || $img.attr('height');
 
        
 
        
−
       if (width || height) {
+
      console.log("Processando imagem: " + $img.attr('src') + " - Dimensões: " + width + "x" + height);
 +
     
 +
      // Detectar valores zero ou problemáticos
 +
       if (width === '0' || height === '0' || width === 0 || height === 0) {
 +
        console.log("Detectada dimensão zero, corrigindo...");
 +
       
 +
        // Remover atributos de dimensão para permitir o tamanho natural
 +
        $img.removeAttr('width');
 +
        $img.removeAttr('height');
 +
        $img.css({
 +
          'width': 'auto',
 +
          'height': 'auto',
 +
          'max-width': '100%'
 +
        });
 +
       
 +
        // Remover classes e estilos de dimensionamento customizado
 +
        $img.removeClass('custom-size');
 +
        $img.css('--custom-width', '');
 +
        $img.css('--custom-height', '');
 +
      }
 +
      // Para dimensões válidas, garantir que são aplicadas corretamente
 +
      else if (width && width > 0) {
 +
        console.log("Aplicando dimensão customizada: " + width + "x" + height);
 +
       
 
         $img.addClass('custom-size');
 
         $img.addClass('custom-size');
−
         if (width) {
+
          
−
          $img.css('--custom-width', width + 'px');
+
        // Definir dimensões diretamente e via variáveis CSS
−
         }
+
        $img.css('--custom-width', width + 'px');
−
         if (height) {
+
         $img.css('width', width + 'px');
 +
       
 +
         if (height && height > 0) {
 
           $img.css('--custom-height', height + 'px');
 
           $img.css('--custom-height', height + 'px');
 +
          $img.css('height', height + 'px');
 +
        } else {
 +
          // Se apenas largura foi definida, manter proporção
 +
          $img.css('--custom-height', 'auto');
 +
          $img.css('height', 'auto');
 
         }
 
         }
 
       }
 
       }
Line 53: Line 53:
 
   }
 
   }
  
−
   // Inicializar ao carregar e em atualizações de conteúdo
+
   // Executa a função de correção após um breve atraso para garantir que as imagens foram inicializadas
−
  initImageCopy();
+
   setTimeout(fixImageDimensions, 300);
−
  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);
 
−
  }
 
 
    
 
    
 +
  // Também executa quando o conteúdo da wiki é atualizado
 
   if (typeof mw !== 'undefined' && mw.hook) {
 
   if (typeof mw !== 'undefined' && mw.hook) {
 
     mw.hook('wikipage.content').add(function() {
 
     mw.hook('wikipage.content').add(function() {
−
       console.log("Conteúdo da wiki atualizado");
+
       console.log("Conteúdo da wiki atualizado - aplicando correções de dimensão");
−
       if (window.location.hash) {
+
       setTimeout(fixImageDimensions, 300);
−
        setTimeout(function() {
 
−
          expandSectionForAnchor(window.location.hash);
 
−
        }, 300);
 
−
      }
 
 
     });
 
     });
 
   }
 
   }
 
});
 
});

Revision as of 17:46, 7 May 2025

/* Adição ao seu common.js para corrigir problemas com dimensões de imagens */

$(document).ready(function() {
  // Função para corrigir o dimensionamento de imagens
  function fixImageDimensions() {
    console.log("Corrigindo dimensões de imagens...");
    
    $('.tile-top.tile-image img').each(function() {
      var $img = $(this);
      var width = $img.data('width') || $img.attr('width');
      var height = $img.data('height') || $img.attr('height');
      
      console.log("Processando imagem: " + $img.attr('src') + " - Dimensões: " + width + "x" + height);
      
      // Detectar valores zero ou problemáticos
      if (width === '0' || height === '0' || width === 0 || height === 0) {
        console.log("Detectada dimensão zero, corrigindo...");
        
        // Remover atributos de dimensão para permitir o tamanho natural
        $img.removeAttr('width');
        $img.removeAttr('height');
        $img.css({
          'width': 'auto',
          'height': 'auto',
          'max-width': '100%'
        });
        
        // Remover classes e estilos de dimensionamento customizado
        $img.removeClass('custom-size');
        $img.css('--custom-width', '');
        $img.css('--custom-height', '');
      } 
      // Para dimensões válidas, garantir que são aplicadas corretamente
      else if (width && width > 0) {
        console.log("Aplicando dimensão customizada: " + width + "x" + height);
        
        $img.addClass('custom-size');
        
        // Definir dimensões diretamente e via variáveis CSS
        $img.css('--custom-width', width + 'px');
        $img.css('width', width + 'px');
        
        if (height && height > 0) {
          $img.css('--custom-height', height + 'px');
          $img.css('height', height + 'px');
        } else {
          // Se apenas largura foi definida, manter proporção
          $img.css('--custom-height', 'auto');
          $img.css('height', 'auto');
        }
      }
    });
  }

  // Executa a função de correção após um breve atraso para garantir que as imagens foram inicializadas
  setTimeout(fixImageDimensions, 300);
  
  // Também executa quando o conteúdo da wiki é atualizado
  if (typeof mw !== 'undefined' && mw.hook) {
    mw.hook('wikipage.content').add(function() {
      console.log("Conteúdo da wiki atualizado - aplicando correções de dimensão");
      setTimeout(fixImageDimensions, 300);
    });
  }
});
Retrieved from "https://wiki.xilepk.net/wiki/index.php?title=MediaWiki:Common.js&oldid=1295"