Difference between revisions of "MediaWiki:Common.js"

From XilePK - Ragnarok Online Server
Jump to navigation Jump to search
Line 1: Line 1:
/* MediaWiki common.js - Versão otimizada */
+
/* Any JavaScript here will be loaded for all users on every page load. */
  
/* ======= Parte 1: Auto-expansão de seções ao clicar em links âncora ======= */
+
$(document).ready(function() {
$(function() {
+
   $(document).on('click', '.warp-copy', function() {
   console.log("Inicializando script de expansão automática para links âncora");
+
     var textToCopy = $(this).attr('data-copy');
 
 
  // Função que expande as seções colapsáveis baseadas no hash da URL
 
  function expandSectionForAnchor(hash, scrollToElement = true) {
 
     // Remover o # do início se existir
 
    if (hash.startsWith('#')) {
 
      hash = hash.substring(1);
 
    }
 
 
      
 
      
     console.log("Procurando elemento com ID: " + hash);
+
     var tempInput = document.createElement('textarea');
 +
    tempInput.value = textToCopy;
 +
    document.body.appendChild(tempInput);
 +
    tempInput.select();
 +
    document.execCommand('copy');
 +
    document.body.removeChild(tempInput);
 
      
 
      
    if (!hash) return; // Sair se não houver hash
+
     var originalColor = $(this).css('color');
   
+
    $(this).css('color', 'green');
    // Encontra o elemento alvo
+
    var self = this;
     var $targetElement = $('#' + hash);
+
    setTimeout(function() {
   
+
      $(self).css('color', originalColor);
    if ($targetElement.length) {
+
    }, 500);
      console.log("Elemento encontrado com ID: " + hash);
+
  });
     
+
});
      // Encontre todas as seções colapsáveis que contêm o elemento
+
 
      var $collapsibleAncestors = $targetElement.parents('.mw-collapsible.mw-collapsed');
+
/* Auto-expand sections when clicking anchored links */
     
+
$(document).ready(function() {
      // Também pegar tabelas wikitable colapsáveis
+
   // Handle page load with hash in URL
      var $wikitableAncestors = $targetElement.parents('.wikitable.mw-collapsible.mw-collapsed');
 
     
 
      // Unir os conjuntos de elementos
 
      $collapsibleAncestors = $collapsibleAncestors.add($wikitableAncestors);
 
     
 
      console.log("Seções colapsáveis encontradas: " + $collapsibleAncestors.length);
 
     
 
      // Se houver seções colapsáveis contendo o elemento
 
      if ($collapsibleAncestors.length > 0) {
 
        console.log("Expandindo seções colapsáveis...");
 
       
 
        // Expandir cada seção de fora para dentro
 
        $collapsibleAncestors.each(function() {
 
          var $section = $(this);
 
         
 
          // Remover classe de colapsado
 
          $section.removeClass('mw-collapsed');
 
         
 
          // Tentar diferentes métodos para expandir:
 
         
 
          // 1. Método nativo do MediaWiki
 
          if (typeof mw !== 'undefined' && typeof mw.loader !== 'undefined') {
 
            mw.loader.using('jquery.makeCollapsible', function() {
 
              $section.makeCollapsible();
 
            });
 
          }
 
         
 
          // 2. Ou usar os togglers existentes
 
          var $toggle = $section.find('.mw-collapsible-toggle').first();
 
          if ($toggle.length) {
 
            console.log("Clicando no botão toggle");
 
            $toggle.trigger('click');
 
          }
 
         
 
          // 3. Ou forçar a exibição do conteúdo diretamente
 
          $section.find('.mw-collapsible-content').show();
 
         
 
          // 4. Para tabelas wikitable especificamente
 
          if ($section.hasClass('wikitable')) {
 
            $section.find('tr:not(:first-child)').show();
 
          }
 
         
 
          // 5. Remover quaisquer estilos que possam estar escondendo o conteúdo
 
          $section.find('.mw-collapsible-content, tr:not(:first-child)').css({
 
            'display': 'table-row',
 
            'visibility': 'visible',
 
            'height': 'auto',
 
            'opacity': '1'
 
          });
 
        });
 
       
 
        // Também verificar se o próprio elemento está em um colapsível
 
        var $directCollapsible = $targetElement.closest('.mw-collapsible.mw-collapsed');
 
        if ($directCollapsible.length) {
 
          console.log("Expandindo o contêiner direto");
 
          $directCollapsible.removeClass('mw-collapsed');
 
         
 
          // Se for uma tabela, mostrar todas as linhas
 
          if ($directCollapsible.hasClass('wikitable')) {
 
            $directCollapsible.find('tr:not(:first-child)').show();
 
          } else {
 
            $directCollapsible.find('.mw-collapsible-content').show();
 
          }
 
        }
 
       
 
        // Dar um tempo para as animações terminarem antes de rolar
 
        setTimeout(function() {
 
          if (scrollToElement) {
 
            console.log("Rolando até o elemento");
 
            $('html, body').animate({
 
              scrollTop: $targetElement.offset().top - 100
 
            }, 200);
 
          }
 
        }, 500); // Aumentado para 500ms para dar mais tempo para expansão
 
      } else if (scrollToElement) {
 
        // Se não houver seções colapsáveis, apenas role até o elemento
 
        console.log("Rolando até o elemento sem expansão necessária");
 
        $('html, body').animate({
 
          scrollTop: $targetElement.offset().top - 100
 
        }, 200);
 
      }
 
    } else {
 
      console.log("Elemento com ID '" + hash + "' não encontrado");
 
    }
 
  }
 
 
 
   // Verificar se há hash na URL quando a página carrega
 
 
   if (window.location.hash) {
 
   if (window.location.hash) {
    console.log("Página carregada com hash: " + window.location.hash);
 
    // Usar setTimeout para garantir que o DOM esteja completamente carregado
 
 
     setTimeout(function() {
 
     setTimeout(function() {
 
       expandSectionForAnchor(window.location.hash);
 
       expandSectionForAnchor(window.location.hash);
     }, 500); // Aumentado para 500ms para garantir carregamento completo
+
     }, 500); // Pequeno atraso para garantir que a página esteja totalmente carregada
 
   }
 
   }
 
    
 
    
   // Lidar com cliques em links âncora dentro da página
+
   // Handle clicks on anchor links within the page
 
   $(document).on('click', 'a[href^="#"]', function(event) {
 
   $(document).on('click', 'a[href^="#"]', function(event) {
 
     var hash = $(this).attr('href');
 
     var hash = $(this).attr('href');
     console.log("Clique em link interno: " + hash);
+
     expandSectionForAnchor(hash);
   
 
    // Se já estamos na mesma página, expandir seções e prevenir comportamento padrão
 
    if (hash && hash.startsWith('#')) {
 
      event.preventDefault();
 
      expandSectionForAnchor(hash);
 
     
 
      // Atualizar a URL sem recarregar a página
 
      if (history.pushState) {
 
        history.pushState(null, null, hash);
 
      } else {
 
        location.hash = hash;
 
      }
 
    }
 
 
   });
 
   });
 
    
 
    
   // Adicionar um hook para quando o conteúdo da página for modificado
+
   // Function to expand section containing an anchor
   if (typeof mw !== 'undefined' && mw.hook) {
+
   function expandSectionForAnchor(hash) {
     mw.hook('wikipage.content').add(function($content) {
+
     // Try to find the anchor element
       console.log("Conteúdo da Wiki atualizado, reinicializando manipuladores");
+
    var targetElement = $(hash);
 +
    if (targetElement.length) {
 +
       // Find the closest collapsible section
 +
      var collapsibleSection = targetElement.closest('.mw-collapsible.mw-collapsed');
 
        
 
        
       // Se houver hash na URL, expandir as seções relevantes
+
       // If the target is inside a collapsed section, expand it
       if (window.location.hash) {
+
       if (collapsibleSection.length) {
 +
        // Expand all parent collapsible sections as well
 +
        targetElement.parents('.mw-collapsible.mw-collapsed').each(function() {
 +
          $(this).find('.mw-collapsible-toggle').first().click();
 +
        });
 +
       
 +
        // Scroll to the element after expansion
 
         setTimeout(function() {
 
         setTimeout(function() {
           expandSectionForAnchor(window.location.hash);
+
           $('html, body').animate({
 +
            scrollTop: targetElement.offset().top - 100
 +
          }, 200);
 
         }, 300);
 
         }, 300);
 +
      } else {
 +
        // Even if not in a collapsed section, ensure proper scrolling
 +
        setTimeout(function() {
 +
          $('html, body').animate({
 +
            scrollTop: targetElement.offset().top - 100
 +
          }, 200);
 +
        }, 100);
 
       }
 
       }
    });
 
  }
 
});
 
 
/* ======= Parte 2: Funcionalidade de cópia ======= */
 
$(function() {
 
  // Função principal para inicializar funcionalidade de cópia
 
  function initializeCopyFunctionality() {
 
    console.log("Inicializando funcionalidade de cópia");
 
   
 
    // Remover manipuladores de eventos anteriores para evitar duplicação
 
    $('.warp-copy').off('click');
 
   
 
    // Adiciona funcionalidade aos elementos com a classe warp-copy
 
    $('.warp-copy').on('click', function(e) {
 
      e.preventDefault(); // Previne navegação se estiver dentro de um link
 
     
 
      // Pega o texto do atributo data-copy ou usa o texto do elemento
 
      var textToCopy = $(this).attr('data-copy') || $(this).text();
 
     
 
      copyTextToClipboard(textToCopy, $(this));
 
     
 
      return false; // Impede comportamento padrão
 
    });
 
   
 
    // Identifica os links dentro dos containers de imagem de NPCs
 
    $('.contents-equipment .tile-top.tile-image a').each(function() {
 
      var $link = $(this);
 
      var linkHref = $link.attr('href') || '';
 
     
 
      // Extrai o ID do NPC do link (remove o # do início)
 
      var npcId = linkHref.startsWith('#') ? linkHref.substring(1) : linkHref;
 
     
 
      if (npcId) {
 
        // Remove manipuladores existentes para evitar duplicação
 
        $link.off('mousedown.warpcopy');
 
       
 
        // Adiciona um handler de clique que irá copiar o texto
 
        $link.on('mousedown.warpcopy', function(e) {
 
          // Texto que será copiado - usa o ID específico do NPC
 
          var textToCopy = "@warp " + npcId;
 
         
 
          copyTextToClipboard(textToCopy);
 
         
 
          // Permite que o evento continue normalmente
 
          return true;
 
        });
 
      }
 
    });
 
  }
 
 
 
  // Função auxiliar para copiar texto para a área de transferência
 
  function copyTextToClipboard(text, $element) {
 
    // Cria um elemento temporário para copiar o texto
 
    var tempInput = document.createElement('textarea');
 
    tempInput.value = text;
 
    document.body.appendChild(tempInput);
 
    tempInput.select();
 
   
 
    try {
 
      // Executa o comando de cópia
 
      var successful = document.execCommand('copy');
 
     
 
      // Feedback visual temporário ao usuário
 
      if (successful) {
 
        if ($element) {
 
          $element.addClass('copied');
 
         
 
          // Mostra o feedback por 1.5 segundos
 
          setTimeout(function() {
 
            $element.removeClass('copied');
 
          }, 1500);
 
        }
 
       
 
        // Feedback visual adicional
 
        $('<div class="copy-notification" style="position:fixed;bottom:20px;right:20px;background:#4CAF50;color:white;padding:10px;border-radius:5px;z-index:9999;">Copiado: ' + text + '</div>')
 
          .appendTo('body')
 
          .delay(1500)
 
          .fadeOut(300, function() { $(this).remove(); });
 
      }
 
    } catch (err) {
 
      console.error('Erro ao copiar texto: ', err);
 
 
     }
 
     }
   
 
    // Remove o elemento temporário
 
    document.body.removeChild(tempInput);
 
  }
 
 
 
  // Inicializar quando o DOM estiver pronto
 
  initializeCopyFunctionality();
 
 
 
  // Também inicializar quando o conteúdo da wiki for carregado/atualizado
 
  if (typeof mw !== 'undefined' && mw.hook) {
 
    mw.hook('wikipage.content').add(function() {
 
      console.log("Conteúdo da wiki atualizado, reinicializando funcionalidade de cópia");
 
      initializeCopyFunctionality();
 
    });
 
  }
 
});
 
 
/* ======= Parte 3: Tooltips para elementos copiáveis ======= */
 
$(function() {
 
  // Função para inicializar tooltips nos elementos .warp-copy
 
  function initializeWarpCopyTooltips() {
 
    console.log("Inicializando tooltips para elementos .warp-copy");
 
 
    // Selecionar todos os elementos com classe .warp-copy
 
    var copyElements = document.querySelectorAll('.warp-copy');
 
   
 
    copyElements.forEach(function(element) {
 
      // Garantir que o elemento tenha os atributos necessários para o tooltip
 
      if (!element.getAttribute('title')) {
 
        element.setAttribute('title', 'Copy');
 
      }
 
    });
 
  }
 
 
 
  // Inicializar quando o DOM estiver pronto
 
  initializeWarpCopyTooltips();
 
 
 
  // Também inicializar quando o conteúdo da wiki for carregado/atualizado
 
  if (typeof mw !== 'undefined' && mw.hook) {
 
    mw.hook('wikipage.content').add(function() {
 
      console.log("Conteúdo da wiki atualizado, reinicializando tooltips");
 
      initializeWarpCopyTooltips();
 
    });
 
 
   }
 
   }
 
});
 
});

Revision as of 17:02, 29 April 2025

/* Any JavaScript here will be loaded for all users on every page load. */

$(document).ready(function() {
  $(document).on('click', '.warp-copy', function() {
    var textToCopy = $(this).attr('data-copy');
    
    var tempInput = document.createElement('textarea');
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);
    
    var originalColor = $(this).css('color');
    $(this).css('color', 'green');
    var self = this;
    setTimeout(function() {
      $(self).css('color', originalColor);
    }, 500);
  });
});

/* Auto-expand sections when clicking anchored links */
$(document).ready(function() {
  // Handle page load with hash in URL
  if (window.location.hash) {
    setTimeout(function() {
      expandSectionForAnchor(window.location.hash);
    }, 500); // Pequeno atraso para garantir que a página esteja totalmente carregada
  }
  
  // Handle clicks on anchor links within the page
  $(document).on('click', 'a[href^="#"]', function(event) {
    var hash = $(this).attr('href');
    expandSectionForAnchor(hash);
  });
  
  // Function to expand section containing an anchor
  function expandSectionForAnchor(hash) {
    // Try to find the anchor element
    var targetElement = $(hash);
    if (targetElement.length) {
      // Find the closest collapsible section
      var collapsibleSection = targetElement.closest('.mw-collapsible.mw-collapsed');
      
      // If the target is inside a collapsed section, expand it
      if (collapsibleSection.length) {
        // Expand all parent collapsible sections as well
        targetElement.parents('.mw-collapsible.mw-collapsed').each(function() {
          $(this).find('.mw-collapsible-toggle').first().click();
        });
        
        // Scroll to the element after expansion
        setTimeout(function() {
          $('html, body').animate({
            scrollTop: targetElement.offset().top - 100
          }, 200);
        }, 300);
      } else {
        // Even if not in a collapsed section, ensure proper scrolling
        setTimeout(function() {
          $('html, body').animate({
            scrollTop: targetElement.offset().top - 100
          }, 200);
        }, 100);
      }
    }
  }
});