Difference between revisions of "MediaWiki:Common.js"

From XilePK - Ragnarok Online Server
Jump to navigation Jump to search
 
(20 intermediate revisions by the same user not shown)
Line 23: Line 23:
 
   });
 
   });
  
   /* Versão modificada apenas da função que trata as imagens */
+
   // Adicionar funcionalidade às imagens dos NPCs
function initImageCopy() {
+
  function initImageCopy() {
  $('.tile-top.tile-image a').each(function() {
+
    $('.tile-top.tile-image a').each(function() {
    var $link = $(this);
+
      var $link = $(this);
    if (!$link.hasClass('warp-copy')) {
+
      if (!$link.hasClass('warp-copy')) {
      var npcId = $link.attr('href').replace('#','');
+
        var npcId = $link.attr('href').replace('#','');
      $link.addClass('warp-copy')
+
        $link.addClass('warp-copy')
          .attr('data-copy', '@warp ' + npcId)
+
            .attr('data-copy', '@warp ' + npcId)
          .css('cursor', 'pointer');
+
            .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
+
  // Função corrigida para aplicar larguras e alturas aos containers, não às imagens
      var originalWidth = $img[0].naturalWidth;
+
  function fixNpcContainerWidths() {
       var originalHeight = $img[0].naturalHeight;
+
    $('.contents-equipment.tile-halves').each(function() {
      var needsEnlarge = (width && width > originalWidth) || (height && height > originalHeight);
+
       var $container = $(this);
       var needsShrink = (width && width < originalWidth) ||
+
       var width = $container.data('width');
                (height && height < originalHeight) ||
 
                (width && height && (width/originalWidth !== height/originalHeight));
 
 
        
 
        
       if (needsEnlarge) {
+
       if (width && width > 0) {
       
+
         $container.css({
// Para aumentar o tamanho, usamos CSS direto (funciona bem para aumento)
+
           '--container-width': width + 'px'
         $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',
 
              'aspect-ratio': originalWidth + '/' + originalHeight // manter proporção original
 
          });
 
         
 
          // 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',
 
              'image-rendering': 'pixelated' // ajuda em alguns casos
 
          });
 
        }
 
 
       }
 
       }
     }
+
     });
  });
+
   
}
+
    // Aplicar altura aos containers de imagem, não às próprias imagens
 +
    $('.tile-top.tile-image').each(function() {
 +
      var $imageContainer = $(this);
 +
      var height = $imageContainer.css('--image-height');
 +
     
 +
      if (height && height !== 'auto') {
 +
        $imageContainer.css('height', height);
 +
      }
 +
    });
 +
  }
  
   // Inicializar ao carregar e em atualizações de conteúdo
+
   // Inicializar funções ao carregar e em atualizações de conteúdo
 
   initImageCopy();
 
   initImageCopy();
 +
  fixNpcContainerWidths();
 +
 
 
   if (typeof mw !== 'undefined' && mw.hook) {
 
   if (typeof mw !== 'undefined' && mw.hook) {
     mw.hook('wikipage.content').add(initImageCopy);
+
     mw.hook('wikipage.content').add(function() {
 +
      initImageCopy();
 +
      fixNpcContainerWidths();
 +
    });
 
   }
 
   }
  
Line 189: Line 159:
 
         }, 300);
 
         }, 300);
 
       }
 
       }
 +
    });
 +
  }
 +
});
 +
 +
/* Código JavaScript limpo para os NPCs - MANTER APENAS ESTE BLOCO */
 +
$(document).ready(function() {
 +
  // Manipulador de clique direto nos containers NPC
 +
  $(document).on('click', '.contents-equipment.tile-halves', function(e) {
 +
    // Previne comportamento padrão apenas se não for um link
 +
    if (!$(e.target).is('a') && !$(e.target).parents('a').length) {
 +
      e.preventDefault();
 +
    }
 +
   
 +
    // Encontra o comando warp dentro do container
 +
    var $warpElement = $(this).find('.warp-copy[data-copy^="@warp"]');
 +
   
 +
    if ($warpElement.length) {
 +
      var warpCommand = $warpElement.attr('data-copy');
 +
     
 +
      // Copia o texto para a área de transferência
 +
      var tempInput = document.createElement('textarea');
 +
      tempInput.value = warpCommand;
 +
      document.body.appendChild(tempInput);
 +
      tempInput.select();
 +
      document.execCommand('copy');
 +
      document.body.removeChild(tempInput);
 +
     
 +
      // Adiciona classe para feedback visual
 +
      var $container = $(this);
 +
      $container.addClass('npc-copied');
 +
     
 +
      // Remove a classe após 2 segundos
 +
      setTimeout(function() {
 +
        $container.removeClass('npc-copied');
 +
      }, 2000);
 +
    }
 +
  });
 +
 
 +
  // Inicializa na carga da página e em atualizações
 +
  if (typeof mw !== 'undefined' && mw.hook) {
 +
    mw.hook('wikipage.content').add(function() {
 +
      console.log("Inicializando comportamento de cópia nos NPCs");
 
     });
 
     });
 
   }
 
   }
 
});
 
});

Latest revision as of 17:01, 9 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);
  });

  // 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');
      }
    });
  }

  // Função corrigida para aplicar larguras e alturas aos containers, não às imagens
  function fixNpcContainerWidths() {
    $('.contents-equipment.tile-halves').each(function() {
      var $container = $(this);
      var width = $container.data('width');
      
      if (width && width > 0) {
        $container.css({
          '--container-width': width + 'px'
        });
      }
    });
    
    // Aplicar altura aos containers de imagem, não às próprias imagens
    $('.tile-top.tile-image').each(function() {
      var $imageContainer = $(this);
      var height = $imageContainer.css('--image-height');
      
      if (height && height !== 'auto') {
        $imageContainer.css('height', height);
      }
    });
  }

  // Inicializar funções ao carregar e em atualizações de conteúdo
  initImageCopy();
  fixNpcContainerWidths();
  
  if (typeof mw !== 'undefined' && mw.hook) {
    mw.hook('wikipage.content').add(function() {
      initImageCopy();
      fixNpcContainerWidths();
    });
  }

  /* 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);
      }
    });
  }
});

/* Código JavaScript limpo para os NPCs - MANTER APENAS ESTE BLOCO */
$(document).ready(function() {
  // Manipulador de clique direto nos containers NPC
  $(document).on('click', '.contents-equipment.tile-halves', function(e) {
    // Previne comportamento padrão apenas se não for um link
    if (!$(e.target).is('a') && !$(e.target).parents('a').length) {
      e.preventDefault();
    }
    
    // Encontra o comando warp dentro do container
    var $warpElement = $(this).find('.warp-copy[data-copy^="@warp"]');
    
    if ($warpElement.length) {
      var warpCommand = $warpElement.attr('data-copy');
      
      // Copia o texto para a área de transferência
      var tempInput = document.createElement('textarea');
      tempInput.value = warpCommand;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand('copy');
      document.body.removeChild(tempInput);
      
      // Adiciona classe para feedback visual
      var $container = $(this);
      $container.addClass('npc-copied');
      
      // Remove a classe após 2 segundos
      setTimeout(function() {
        $container.removeClass('npc-copied');
      }, 2000);
    }
  });
  
  // Inicializa na carga da página e em atualizações
  if (typeof mw !== 'undefined' && mw.hook) {
    mw.hook('wikipage.content').add(function() {
      console.log("Inicializando comportamento de cópia nos NPCs");
    });
  }
});