Difference between revisions of "MediaWiki:Common.js"

From XilePK - Ragnarok Online Server
Jump to navigation Jump to search
Line 95: Line 95:
 
});
 
});
  
// Função para melhorar a rolagem para âncoras
+
/* JavaScript melhorado para funcionalidade de cópia */
$(document).ready(function() {
+
mw.hook('wikipage.content').add(function ($content) {
  // Manipular cliques nos tiles da página principal
+
    // Função para inicializar todos os elementos .warp-copy
  $('.mainpage-contents .tile-halves a').click(function(e) {
+
    function initWarpCopy() {
    var targetId = $(this).attr('href');
+
        console.log("Inicializando elementos .warp-copy");
 +
       
 +
        // Remove manipuladores de eventos anteriores para evitar duplicações
 +
        $content.find('.warp-copy').off('click');
 +
       
 +
        // Adiciona o manipulador de clique
 +
        $content.find('.warp-copy').on('click', function (event) {
 +
            event.preventDefault();
 +
            event.stopPropagation();
 +
           
 +
            var $this = $(this);
 +
            var textToCopy = $this.attr('data-copy');
 +
           
 +
            if (!textToCopy) {
 +
                console.warn("Elemento .warp-copy sem atributo data-copy encontrado");
 +
                return;
 +
            }
 +
           
 +
            console.log("Copiando texto: " + textToCopy);
 +
           
 +
            // Usa a API Clipboard moderna quando disponível
 +
            if (navigator.clipboard && navigator.clipboard.writeText) {
 +
                navigator.clipboard.writeText(textToCopy)
 +
                    .then(function() {
 +
                        console.log('Texto copiado com sucesso usando Clipboard API');
 +
                        showCopiedFeedback($this);
 +
                    })
 +
                    .catch(function(err) {
 +
                        console.error('Falha ao copiar texto: ', err);
 +
                        // Tenta o método de fallback
 +
                        fallbackCopyText(textToCopy, $this);
 +
                    });
 +
            } else {
 +
                // Método de fallback para navegadores que não suportam a API Clipboard
 +
                fallbackCopyText(textToCopy, $this);
 +
            }
 +
        });
 +
    }
 +
   
 +
    // Função de fallback para copiar texto
 +
    function fallbackCopyText(text, $element) {
 +
        // Cria um elemento de texto temporário
 +
        var tempInput = document.createElement('textarea');
 +
        tempInput.value = text;
 +
        tempInput.style.position = 'fixed';
 +
        tempInput.style.opacity = '0';
 +
        document.body.appendChild(tempInput);
 +
       
 +
        // Seleciona e copia
 +
        tempInput.select();
 +
        tempInput.setSelectionRange(0, 99999); // Para dispositivos móveis
 +
       
 +
        try {
 +
            var successful = document.execCommand('copy');
 +
            if (successful) {
 +
                console.log('Texto copiado com sucesso usando execCommand');
 +
                showCopiedFeedback($element);
 +
            } else {
 +
                console.error('Falha ao copiar texto com execCommand');
 +
            }
 +
        } catch (err) {
 +
            console.error('Erro ao copiar texto: ', err);
 +
        }
 +
       
 +
        // Remove o elemento temporário
 +
        document.body.removeChild(tempInput);
 +
    }
 
      
 
      
     // Verificar se é um link para âncora
+
     // Função para mostrar feedback visual de cópia
     if (targetId && targetId.startsWith('#')) {
+
     function showCopiedFeedback($element) {
      e.preventDefault();
+
         // Adiciona classe para feedback visual
     
+
         $element.addClass('copied');
      // Remover o # do início
+
       
      var sectionId = targetId.substring(1);
+
        // Remove a classe após um breve período
     
+
        setTimeout(function() {
      // Tentar encontrar a seção pelo ID ou pelo título
+
            $element.removeClass('copied');
      var target = $('#' + sectionId);
+
         }, 1500);
      if (target.length === 0) {
 
         // Tentar encontrar pelo título da seção (h2)
 
         target = $('h2:contains("' + sectionId.replace(/_/g, ' ') + '")');
 
      }
 
     
 
      // Se encontrou algo, rolar até lá
 
      if (target.length > 0) {
 
        $('html, body').animate({
 
          scrollTop: target.offset().top - 70 // Ajuste este valor conforme necessário
 
         }, 500);
 
 
          
 
          
         // Atualizar a URL sem recarregar a página
+
         // Opcional: mostrar um popup de notificação
        history.pushState(null, null, targetId);
+
        $('<div class="copy-notification" style="position:fixed;bottom:20px;right:20px;background:#4CAF50;color:white;padding:10px;border-radius:5px;z-index:9999;">Copiado: ' + $element.attr('data-copy') + '</div>')
      }
+
            .appendTo('body')
 +
            .delay(1500)
 +
            .fadeOut(300, function() { $(this).remove(); });
 +
    }
 +
   
 +
    // Script para imagens dos NPCs
 +
    function initNPCImageCopy() {
 +
        $content.find('.contents-equipment .tile-top.tile-image a').each(function() {
 +
            var $link = $(this);
 +
            var linkHref = $link.attr('href') || '';
 +
           
 +
            // Extrai o ID do NPC do link
 +
            var npcId = linkHref.startsWith('#') ? linkHref.substring(1) : linkHref;
 +
           
 +
            if (npcId) {
 +
                $link.off('mousedown').on('mousedown', function(e) {
 +
                    // Texto a ser copiado
 +
                    var textToCopy = "@warp " + npcId;
 +
                   
 +
                    // Tenta usar a API Clipboard moderna
 +
                    if (navigator.clipboard && navigator.clipboard.writeText) {
 +
                        navigator.clipboard.writeText(textToCopy)
 +
                            .then(function() {
 +
                                console.log('Comando @warp copiado com sucesso');
 +
                                showCopiedNotification(textToCopy);
 +
                            })
 +
                            .catch(function(err) {
 +
                                console.error('Falha ao copiar comando @warp: ', err);
 +
                                // Usa o método de fallback
 +
                                fallbackCopyText(textToCopy, $link);
 +
                            });
 +
                    } else {
 +
                        // Método de fallback
 +
                        fallbackCopyNPCCommand(textToCopy);
 +
                    }
 +
                   
 +
                    // Permite que o evento continue
 +
                    return true;
 +
                });
 +
            }
 +
        });
 
     }
 
     }
  });
+
   
 
+
    // Função de fallback para copiar comando de NPC
  // Também processar âncoras na URL quando a página carrega
+
    function fallbackCopyNPCCommand(text) {
  if (window.location.hash) {
+
        var tempInput = document.createElement('textarea');
    setTimeout(function() {
+
        tempInput.value = text;
      var hash = window.location.hash;
+
        tempInput.style.position = 'fixed';
      var sectionId = hash.substring(1);
+
        tempInput.style.opacity = '0';
     
+
        document.body.appendChild(tempInput);
      var target = $('#' + sectionId);
+
       
      if (target.length === 0) {
+
        tempInput.select();
         target = $('h2:contains("' + sectionId.replace(/_/g, ' ') + '")');
+
        tempInput.setSelectionRange(0, 99999); // Para dispositivos móveis
      }
+
       
     
+
        try {
      if (target.length > 0) {
+
            document.execCommand('copy');
         $('html, body').animate({
+
            showCopiedNotification(text);
          scrollTop: target.offset().top - 70
+
        } catch (err) {
        }, 500);
+
            console.error('Erro ao copiar comando @warp: ', err);
      }
+
        }
     }, 300);
+
       
  }
+
        document.body.removeChild(tempInput);
 +
    }
 +
   
 +
    // Função para mostrar notificação de cópia
 +
    function showCopiedNotification(text) {
 +
         $('<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(); });
 +
    }
 +
   
 +
    // Inicializa todas as funções
 +
    initWarpCopy();
 +
    initNPCImageCopy();
 +
   
 +
    // Observador para alterações no DOM
 +
    var observer = new MutationObserver(function(mutations) {
 +
        var needsReinit = false;
 +
       
 +
        mutations.forEach(function(mutation) {
 +
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
 +
                needsReinit = true;
 +
            }
 +
         });
 +
       
 +
        if (needsReinit) {
 +
            initWarpCopy();
 +
            initNPCImageCopy();
 +
        }
 +
     });
 +
   
 +
    // Configura o observador
 +
    observer.observe($content[0], { childList: true, subtree: true });
 
});
 
});

Revision as of 15:49, 29 April 2025

/* Auto-expand sections when clicking anchored links */
$(function() {
  // Função principal para executar quando a página terminar de carregar
  function initializeAnchorExpansion() {
    // Se existir um hash na URL quando a página carrega
    if (window.location.hash) {
      var hash = window.location.hash;
      console.log("Página carregada com hash: " + hash);
      expandSectionForAnchor(hash);
    }
    
    // Lidar com cliques em links âncora dentro da página
    $(document).on('click', 'a[href^="#"]', function(event) {
      var hash = $(this).attr('href');
      console.log("Clique em link interno: " + hash);
      expandSectionForAnchor(hash);
    });
  }
  
  // Função para expandir seções contendo uma âncora específica
  function expandSectionForAnchor(hash) {
    // Remover qualquer caractere # do início do hash se existir
    if (hash.startsWith('#')) {
      hash = hash.substring(1);
    }
    
    console.log("Procurando elemento com ID: " + hash);
    
    // Tentar encontrar o elemento com o ID especificado
    var targetElement = $('#' + hash);
    if (targetElement.length) {
      console.log("Elemento encontrado!");
      
      // Encontrar todas as seções colapsáveis que contêm o elemento
      var collapsibleSections = targetElement.parents('.mw-collapsible.mw-collapsed');
      console.log("Seções colapsáveis encontradas: " + collapsibleSections.length);
      
      // Se o elemento estiver dentro de seções colapsáveis
      if (collapsibleSections.length > 0) {
        // Expandir cada seção de fora para dentro
        collapsibleSections.each(function() {
          var $section = $(this);
          console.log("Expandindo seção");
          $section.removeClass('mw-collapsed');
          
          // Clicar no botão de expansão ou mudar diretamente a classe
          var $toggle = $section.find('.mw-collapsible-toggle').first();
          if ($toggle.length) {
            $toggle.click();
          } else {
            // Tentar forçar a expansão manipulando classes diretamente
            $section.find('.mw-collapsible-content').show();
          }
        });
        
        // 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');
          var $toggle = directCollapsible.find('.mw-collapsible-toggle').first();
          if ($toggle.length) {
            $toggle.click();
          } else {
            directCollapsible.find('.mw-collapsible-content').show();
          }
        }
      }
      
      // Rolar até o elemento imediatamente
      console.log("Rolando até o elemento");
      $('html, body').animate({
        scrollTop: targetElement.offset().top - 100
      }, 200);
    } else {
      console.log("Elemento com ID '" + hash + "' não encontrado");
    }
  }

  // Inicializar na carga da página
  initializeAnchorExpansion();
  
  // Também adicionar um observador para o evento mw.hook que é disparado quando o conteúdo é atualizado
  if (typeof mw !== 'undefined' && mw.hook) {
    mw.hook('wikipage.content').add(function() {
      console.log("Conteúdo da Wiki atualizado, reinicializando manipuladores de âncora");
      initializeAnchorExpansion();
      
      // Se houver um hash, tentar expandir após o conteúdo ter sido carregado
      if (window.location.hash) {
        expandSectionForAnchor(window.location.hash);
      }
    });
  }
});

/* JavaScript melhorado para funcionalidade de cópia */
mw.hook('wikipage.content').add(function ($content) {
    // Função para inicializar todos os elementos .warp-copy
    function initWarpCopy() {
        console.log("Inicializando elementos .warp-copy");
        
        // Remove manipuladores de eventos anteriores para evitar duplicações
        $content.find('.warp-copy').off('click');
        
        // Adiciona o manipulador de clique
        $content.find('.warp-copy').on('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            
            var $this = $(this);
            var textToCopy = $this.attr('data-copy');
            
            if (!textToCopy) {
                console.warn("Elemento .warp-copy sem atributo data-copy encontrado");
                return;
            }
            
            console.log("Copiando texto: " + textToCopy);
            
            // Usa a API Clipboard moderna quando disponível
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(textToCopy)
                    .then(function() {
                        console.log('Texto copiado com sucesso usando Clipboard API');
                        showCopiedFeedback($this);
                    })
                    .catch(function(err) {
                        console.error('Falha ao copiar texto: ', err);
                        // Tenta o método de fallback
                        fallbackCopyText(textToCopy, $this);
                    });
            } else {
                // Método de fallback para navegadores que não suportam a API Clipboard
                fallbackCopyText(textToCopy, $this);
            }
        });
    }
    
    // Função de fallback para copiar texto
    function fallbackCopyText(text, $element) {
        // Cria um elemento de texto temporário
        var tempInput = document.createElement('textarea');
        tempInput.value = text;
        tempInput.style.position = 'fixed';
        tempInput.style.opacity = '0';
        document.body.appendChild(tempInput);
        
        // Seleciona e copia
        tempInput.select();
        tempInput.setSelectionRange(0, 99999); // Para dispositivos móveis
        
        try {
            var successful = document.execCommand('copy');
            if (successful) {
                console.log('Texto copiado com sucesso usando execCommand');
                showCopiedFeedback($element);
            } else {
                console.error('Falha ao copiar texto com execCommand');
            }
        } catch (err) {
            console.error('Erro ao copiar texto: ', err);
        }
        
        // Remove o elemento temporário
        document.body.removeChild(tempInput);
    }
    
    // Função para mostrar feedback visual de cópia
    function showCopiedFeedback($element) {
        // Adiciona classe para feedback visual
        $element.addClass('copied');
        
        // Remove a classe após um breve período
        setTimeout(function() {
            $element.removeClass('copied');
        }, 1500);
        
        // Opcional: mostrar um popup de notificação
        $('<div class="copy-notification" style="position:fixed;bottom:20px;right:20px;background:#4CAF50;color:white;padding:10px;border-radius:5px;z-index:9999;">Copiado: ' + $element.attr('data-copy') + '</div>')
            .appendTo('body')
            .delay(1500)
            .fadeOut(300, function() { $(this).remove(); });
    }
    
    // Script para imagens dos NPCs
    function initNPCImageCopy() {
        $content.find('.contents-equipment .tile-top.tile-image a').each(function() {
            var $link = $(this);
            var linkHref = $link.attr('href') || '';
            
            // Extrai o ID do NPC do link
            var npcId = linkHref.startsWith('#') ? linkHref.substring(1) : linkHref;
            
            if (npcId) {
                $link.off('mousedown').on('mousedown', function(e) {
                    // Texto a ser copiado
                    var textToCopy = "@warp " + npcId;
                    
                    // Tenta usar a API Clipboard moderna
                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(textToCopy)
                            .then(function() {
                                console.log('Comando @warp copiado com sucesso');
                                showCopiedNotification(textToCopy);
                            })
                            .catch(function(err) {
                                console.error('Falha ao copiar comando @warp: ', err);
                                // Usa o método de fallback
                                fallbackCopyText(textToCopy, $link);
                            });
                    } else {
                        // Método de fallback
                        fallbackCopyNPCCommand(textToCopy);
                    }
                    
                    // Permite que o evento continue
                    return true;
                });
            }
        });
    }
    
    // Função de fallback para copiar comando de NPC
    function fallbackCopyNPCCommand(text) {
        var tempInput = document.createElement('textarea');
        tempInput.value = text;
        tempInput.style.position = 'fixed';
        tempInput.style.opacity = '0';
        document.body.appendChild(tempInput);
        
        tempInput.select();
        tempInput.setSelectionRange(0, 99999); // Para dispositivos móveis
        
        try {
            document.execCommand('copy');
            showCopiedNotification(text);
        } catch (err) {
            console.error('Erro ao copiar comando @warp: ', err);
        }
        
        document.body.removeChild(tempInput);
    }
    
    // Função para mostrar notificação de cópia
    function showCopiedNotification(text) {
        $('<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(); });
    }
    
    // Inicializa todas as funções
    initWarpCopy();
    initNPCImageCopy();
    
    // Observador para alterações no DOM
    var observer = new MutationObserver(function(mutations) {
        var needsReinit = false;
        
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                needsReinit = true;
            }
        });
        
        if (needsReinit) {
            initWarpCopy();
            initNPCImageCopy();
        }
    });
    
    // Configura o observador
    observer.observe($content[0], { childList: true, subtree: true });
});