Difference between revisions of "MediaWiki:Common.js"

From XilePK - Ragnarok Online Server
Jump to navigation Jump to search
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
CSS
+
/* Any JavaScript here will be loaded for all users on every page load. */
/* CSS placed here will be applied to all skins */
 
  
/* ========== ESTILOS GERAIS ========== */
+
$(document).ready(function() {
a {
+
  // Função única para cópia de texto
     text-underline-offset: 0px;
+
  $(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);
 +
  });
  
.external {
+
  // Adicionar funcionalidade às imagens dos NPCs
    background: none !important;
+
  function initImageCopy() {
     padding-right: 0 !important;
+
    $('.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');
 +
      }
 +
     });
 +
  }
  
/* ========== WAR COPY (TEXTO E IMAGENS) ========== */
+
  // Função corrigida para aplicar larguras e alturas aos containers, não às imagens
.warp-copy {
+
  function fixNpcContainerWidths() {
    color: #0066cc;
+
    $('.contents-equipment.tile-halves').each(function() {
     cursor: pointer;
+
      var $container = $(this);
     text-decoration: underline dotted #0066cc;
+
      var width = $container.data('width');
    text-underline-offset: 2px;
+
     
    position: relative;
+
      if (width && width > 0) {
     display: inline-block;
+
        $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);
 +
      }
 +
     });
 +
  }
  
/* Tooltip padrão */
+
  // Inicializar funções ao carregar e em atualizações de conteúdo
.warp-copy::after {
+
  initImageCopy();
    content: "Copy";
+
  fixNpcContainerWidths();
    position: absolute;
+
 
    left: 50%;
+
  if (typeof mw !== 'undefined' && mw.hook) {
    background-color: #333;
+
     mw.hook('wikipage.content').add(function() {
     color: white;
+
      initImageCopy();
    padding: 2px 6px;
+
      fixNpcContainerWidths();
    border-radius: 3px;
+
     });
    font-size: 12px;
+
  }
     white-space: nowrap;
 
    z-index: 10;
 
    opacity: 0;
 
    visibility: hidden;
 
    pointer-events: none;
 
    transform: translateX(-50%);
 
}
 
  
/* Seta do tooltip */
+
  /* Auto-expand sections when clicking anchored links */
.warp-copy::before {
+
  console.log("Inicializando script para expandir seções com links âncora");
     content: "";
+
 
     position: absolute;
+
  // Handle initial page load with hash
     left: 50%;
+
  if (window.location.hash) {
     border-width: 4px;
+
    console.log("Página carregada com hash: " + window.location.hash);
    border-style: solid;
+
    setTimeout(function() {
    z-index: 10;
+
      expandSectionForAnchor(window.location.hash);
     opacity: 0;
+
     }, 300);
     visibility: hidden;
+
  }
     pointer-events: none;
+
 
     transform: translateX(-50%);
+
  // 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);
 +
      }
 +
    });
 +
  }
 +
});
  
/* Tooltip PARA TEXTO */
+
/* Código JavaScript limpo para os NPCs - MANTER APENAS ESTE BLOCO */
.warp-copy:not(img)::after {
+
$(document).ready(function() {
    bottom: calc(100% + 5px);
+
  // 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
.warp-copy:not(img)::before {
+
     if (!$(e.target).is('a') && !$(e.target).parents('a').length) {
    bottom: calc(100% + 1px);
+
      e.preventDefault();
    border-color: #333 transparent transparent transparent;
+
     }
}
+
      
 
+
    // Encontra o comando warp dentro do container
/* Tooltip PARA IMAGENS */
+
    var $warpElement = $(this).find('.warp-copy[data-copy^="@warp"]');
.tile-top.tile-image .warp-copy::after {
+
      
     bottom: -25px;
+
     if ($warpElement.length) {
     top: auto !important;
+
      var warpCommand = $warpElement.attr('data-copy');
}
+
     
 
+
      // Copia o texto para a área de transferência
.tile-top.tile-image .warp-copy::before {
+
      var tempInput = document.createElement('textarea');
    bottom: -18px;
+
      tempInput.value = warpCommand;
     top: auto !important;
+
      document.body.appendChild(tempInput);
     border-color: #333 transparent transparent transparent !important;
+
      tempInput.select();
}
+
      document.execCommand('copy');
 
+
      document.body.removeChild(tempInput);
/* Estados de hover */
+
     
.warp-copy:hover::after,
+
      // Adiciona classe para feedback visual
.warp-copy:hover::before {
+
      var $container = $(this);
    opacity: 1;
+
      $container.addClass('npc-copied');
    visibility: visible;
+
     
}
+
      // Remove a classe após 2 segundos
 
+
      setTimeout(function() {
/* Feedback de copiado - APLICA-SE A TODOS OS WARP-COPY */
+
        $container.removeClass('npc-copied');
.warp-copy.copied::after {
+
      }, 2000);
    content: "Copied!" !important;
+
     }
     background-color: #4CAF50 !important;
+
  });
     opacity: 1 !important;
+
 
    visibility: visible !important;
+
  // Inicializa na carga da página e em atualizações
}
+
  if (typeof mw !== 'undefined' && mw.hook) {
 
+
     mw.hook('wikipage.content').add(function() {
.warp-copy.copied {
+
      console.log("Inicializando comportamento de cópia nos NPCs");
    color: #4CAF50 !important;
+
     });
    text-decoration: underline dotted #4CAF50 !important;
+
  }
}
+
});
 
 
/* ========== ESTILOS ESPECÍFICOS PARA NPCs ========== */
 
.tile-row {
 
    display: flex;
 
    flex-flow: row wrap;
 
    margin-bottom: 1em;
 
}
 
 
 
.tile-halves {
 
    display: flex;
 
    flex-flow: row wrap;
 
    border: 1px solid #e4eaee;
 
    background: #ffffff;
 
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
 
    position: relative;
 
}
 
 
 
.tile-halves h2 {
 
    font-size: 1.4em;
 
    font-weight: bold;
 
    border: none;
 
    margin: 0 0 0.4em;
 
}
 
 
 
.tile-top {
 
    width: 100%;
 
    padding: 1.3rem 1.5rem 0.6rem;
 
}
 
 
 
.tile-top.tile-image {
 
    display: flex;
 
    align-items: center;
 
    justify-content: center;
 
    background-color: #949eaa;
 
    overflow: visible;
 
    padding: 0;
 
    height: auto;
 
    width: 100%;
 
    box-sizing: border-box;
 
}
 
 
 
.tile-top.tile-image a {
 
    width: 100%;
 
    height: 100%;
 
    display: flex;
 
    justify-content: center;
 
    align-items: center;
 
}
 
 
 
.tile-top.tile-image img {
 
    display: block;
 
    max-width: 100%;
 
    width: auto;
 
    height: auto;
 
    margin: 0;
 
    transition: 0.4s ease-out;
 
    object-fit: contain;
 
}
 
 
 
/* Estilo para tamanhos personalizados */
 
.tile-top.tile-image img.custom-size {
 
    width: var(--custom-width, auto);
 
    height: var(--custom-height, auto);
 
    max-width: var(--custom-width, 100%);
 
    max-height: var(--custom-height, none);
 
}
 
 
 
.tile-bottom {
 
    background: #ffffff;
 
    border-top: 1px solid #e4eaee;
 
    width: 100%;
 
     padding: 1rem 1.5rem 0.6rem;
 
}
 
 
 
.tile-bottom.link-button {
 
    align-self: center;
 
    padding: 0;
 
    width: auto;
 
    margin: 0 auto;
 
    max-width: fit-content;
 
}
 
 
 
.mainpage-contents .tile-halves {
 
    display: inline-block;
 
    flex: 0 0 auto;
 
    margin-right: 0.9rem;
 
    width: auto;
 
    max-width: max-content;
 
}
 
 
 
.mainpage-contents .tile-halves:hover .tile-top img {
 
    transform: scale(1.04);
 
}
 
 
 
.mainpage-contents .tile-halves:last-child {
 
    margin-right: 0;
 
}
 
 
 
.npc-subtitle {
 
     font-size: 0.8em;
 
    color: #666;
 
    margin-top: -5px;
 
    text-align: center;
 
    font-style: italic;
 
    line-height: 1.2;
 
}
 
 
 
.mainpage-contents.tile-row {
 
    display: flex;
 
    flex-flow: row wrap;
 
    gap: 15px;
 
    justify-content: flex-start;
 
}
 
 
 
.mainpage-contents .contents-equipment.tile-halves {
 
    margin-right: 0;
 
    flex: 0 0 auto;
 
    min-width: 150px;
 
    max-width: 200px;
 
}
 
 
 
/* Título do NPC */
 
.tile-bottom.link-button h2 .warp-copy {
 
    color: #000080;
 
    font-weight: bold;
 
    display: block;
 
    text-align: center;
 
    text-decoration: none;
 
}
 
 
 
.tile-bottom.link-button h2 {
 
    position: relative;
 
     overflow: visible;
 
}
 
 
 
/* Classes para dimensionamento manual */
 
.npc-image-small {
 
    max-width: 150px !important;
 
}
 
.npc-image-medium {
 
    max-width: 200px !important;
 
}
 
.npc-image-large {
 
    max-width: 250px !important;
 
}
 

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");
    });
  }
});