Difference between revisions of "MediaWiki:Common.js"

From XilePK - Ragnarok Online Server
Jump to navigation Jump to search
Line 1: Line 1:
−
```javascript
+
CSS
−
/* Any JavaScript here will be loaded for all users on every page load. */
+
/* CSS placed here will be applied to all skins */
  
−
$(document).ready(function() {
+
/* ========== ESTILOS GERAIS ========== */
−
  // Função única para cópia de texto
+
a {
−
  $(document).on('click', '.warp-copy', function(e) {
+
     text-underline-offset: 0px;
−
    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');
 
−
   
 
−
    // Remover a classe após 2 segundos
 
−
    setTimeout(function() {
 
−
      $element.removeClass('copied');
 
−
     }, 2000);
 
−
  });
 
  
−
  // Adicionar funcionalidade às imagens dos NPCs
+
.external {
−
  function initImageCopy() {
+
     background: none !important;
−
     $('.tile-top.tile-image a').each(function() {
+
    padding-right: 0 !important;
−
      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');
 
−
           
 
−
        // Verificar se já existe tooltip para evitar duplicação
 
−
        if ($link.find('.tooltip-text').length === 0) {
 
−
          $link.attr('title', ''); // Remove o tooltip padrão do navegador
 
−
        }
 
−
      }
 
−
    });
 
−
  }
 
  
−
  // Função para aplicar larguras e alturas aos containers
+
/* ========== WAR COPY (TEXTO E IMAGENS) ========== */
−
  function fixNpcContainerWidths() {
+
.warp-copy {
−
    $('.contents-equipment.tile-halves').each(function() {
+
    color: #0066cc;
−
      var $container = $(this);
+
     cursor: pointer;
−
      var width = $container.data('width');
+
     text-decoration: underline dotted #0066cc;
−
     
+
    text-underline-offset: 2px;
−
      if (width && width > 0) {
+
    position: relative;
−
        $container.css({
+
     display: inline-block;
−
          '--container-width': width + 'px'
+
}
−
        });
 
−
      }
 
−
     });
 
−
      
 
−
    // Aplicar altura aos containers de imagem
 
−
    $('.tile-top.tile-image').each(function() {
 
−
      var $imageContainer = $(this);
 
−
      var height = $imageContainer.data('height') || $imageContainer.css('--image-height');
 
−
     
 
−
      if (height && height !== 'auto') {
 
−
        $imageContainer.css('--image-height', height);
 
−
      }
 
−
     });
 
−
  }
 
  
−
  // Inicializar funções ao carregar e em atualizações de conteúdo
+
/* Tooltip padrão */
−
  initImageCopy();
+
.warp-copy::after {
−
  fixNpcContainerWidths();
+
    content: "Copy";
−
 
+
    position: absolute;
−
  if (typeof mw !== 'undefined' && mw.hook) {
+
    left: 50%;
−
     mw.hook('wikipage.content').add(function() {
+
    background-color: #333;
−
      initImageCopy();
+
    color: white;
−
      fixNpcContainerWidths();
+
    padding: 2px 6px;
−
     });
+
    border-radius: 3px;
−
  }
+
    font-size: 12px;
 +
    white-space: nowrap;
 +
    z-index: 10;
 +
     opacity: 0;
 +
    visibility: hidden;
 +
    pointer-events: none;
 +
     transform: translateX(-50%);
 +
}
  
−
  /* Auto-expand sections when clicking anchored links */
+
/* Seta do tooltip */
−
  console.log("Inicializando script para expandir seções com links âncora");
+
.warp-copy::before {
−
 
+
    content: "";
−
  // Handle initial page load with hash
+
    position: absolute;
−
  if (window.location.hash) {
+
    left: 50%;
−
     console.log("Página carregada com hash: " + window.location.hash);
+
    border-width: 4px;
−
     setTimeout(function() {
+
    border-style: solid;
−
      expandSectionForAnchor(window.location.hash);
+
    z-index: 10;
−
     }, 300);
+
    opacity: 0;
−
  }
+
    visibility: hidden;
−
 
+
    pointer-events: none;
−
  // Handle clicks on anchor links
+
    transform: translateX(-50%);
−
  $(document).on('click', 'a[href^="#"]', function(event) {
+
}
−
     var hash = $(this).attr('href');
+
 
−
     console.log("Clique em link âncora: " + hash);
+
/* Tooltip PARA TEXTO */
−
     event.preventDefault();
+
.warp-copy:not(img)::after {
−
      
+
     bottom: calc(100% + 5px);
−
     if (history.pushState) {
+
}
−
      history.pushState(null, null, hash);
+
 
−
     } else {
+
.warp-copy:not(img)::before {
−
      location.hash = hash;
+
    bottom: calc(100% + 1px);
−
     }
+
    border-color: #333 transparent transparent transparent;
−
      
+
}
−
     expandSectionForAnchor(hash);
+
 
−
  });
+
/* Tooltip PARA IMAGENS */
−
 
+
.tile-top.tile-image .warp-copy::after {
−
  function expandSectionForAnchor(hash) {
+
    bottom: -25px;
−
     console.log("Procurando e expandindo seção para âncora: " + hash);
+
     top: auto !important;
−
     var targetElement = $(hash);
+
}
−
      
+
 
−
     if (targetElement.length) {
+
.tile-top.tile-image .warp-copy::before {
−
      console.log("Elemento alvo encontrado");
+
    bottom: -18px;
−
     
+
    top: auto !important;
−
      var collapsibleSections = targetElement.parents('.mw-collapsible.mw-collapsed');
+
     border-color: #333 transparent transparent transparent !important;
−
      var directCollapsible = targetElement.closest('.mw-collapsible.mw-collapsed');
+
}
−
     
+
 
−
      if (directCollapsible.length) {
+
/* Estados de hover */
−
        collapsibleSections = collapsibleSections.add(directCollapsible);
+
.warp-copy:hover::after,
−
      }
+
.warp-copy:hover::before {
−
     
+
    opacity: 1;
−
      console.log("Seções colapsáveis encontradas: " + collapsibleSections.length);
+
    visibility: visible;
−
     
+
}
−
      if (collapsibleSections.length > 0) {
+
 
−
        collapsibleSections.each(function() {
+
/* Feedback de copiado - APLICA-SE A TODOS OS WARP-COPY */
−
          var section = $(this);
+
.warp-copy.copied::after {
−
          console.log("Expandindo seção colapsável");
+
    content: "Copied!" !important;
−
         
+
    background-color: #4CAF50 !important;
−
          section.removeClass('mw-collapsed');
+
    opacity: 1 !important;
−
          var toggleButton = section.find('.mw-collapsible-toggle').first();
+
    visibility: visible !important;
−
          if (toggleButton.length) {
+
}
−
            console.log("Clicando no botão de expansão");
+
 
−
            toggleButton.click();
+
.warp-copy.copied {
−
          }
+
     color: #4CAF50 !important;
−
         
+
    text-decoration: underline dotted #4CAF50 !important;
−
          if (section.hasClass('wikitable')) {
+
}
−
            console.log("Expandindo tabela wikitable");
+
 
−
            section.find('tr:not(:first-child)').show();
+
/* ========== ESTILOS ESPECÍFICOS PARA NPCs ========== */
−
          }
+
.tile-row {
−
         
+
    display: flex;
−
          section.find('.mw-collapsible-content').show();
+
    flex-flow: row wrap;
−
        });
+
     margin-bottom: 1em;
−
       
+
}
−
        setTimeout(function() {
+
 
−
          scrollToTarget(targetElement);
+
.tile-halves {
−
        }, 400);
+
    display: flex;
−
      } else {
+
    flex-flow: row wrap;
−
        scrollToTarget(targetElement);
+
     border: 1px solid #e4eaee;
−
      }
+
     background: #ffffff;
−
     } else {
+
     box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
−
      console.log("Elemento alvo não encontrado para hash: " + hash);
+
     position: relative;
−
     }
+
}
−
  }
+
 
−
 
+
.tile-halves h2 {
−
  function scrollToTarget(element) {
+
    font-size: 1.4em;
−
     console.log("Rolando até o elemento alvo");
+
    font-weight: bold;
−
     $('html, body').animate({
+
    border: none;
−
      scrollTop: element.offset().top - 100
+
     margin: 0 0 0.4em;
−
     }, 200);
+
}
−
  }
+
 
−
 
+
.tile-top {
−
  if (typeof mw !== 'undefined' && mw.hook) {
+
     width: 100%;
−
    mw.hook('wikipage.content').add(function() {
+
     padding: 1.3rem 1.5rem 0.6rem;
−
      console.log("Conteúdo da wiki atualizado");
+
}
−
      if (window.location.hash) {
+
 
−
        setTimeout(function() {
+
.tile-top.tile-image {
−
          expandSectionForAnchor(window.location.hash);
+
    display: flex;
−
        }, 300);
+
    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;
 +
}

Revision as of 16:25, 9 May 2025

CSS
/* CSS placed here will be applied to all skins */

/* ========== ESTILOS GERAIS ========== */
a {
    text-underline-offset: 0px;
}

.external {
    background: none !important;
    padding-right: 0 !important;
}

/* ========== WAR COPY (TEXTO E IMAGENS) ========== */
.warp-copy {
    color: #0066cc;
    cursor: pointer;
    text-decoration: underline dotted #0066cc;
    text-underline-offset: 2px;
    position: relative;
    display: inline-block;
}

/* Tooltip padrão */
.warp-copy::after {
    content: "Copy";
    position: absolute;
    left: 50%;
    background-color: #333;
    color: white;
    padding: 2px 6px;
    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 */
.warp-copy::before {
    content: "";
    position: absolute;
    left: 50%;
    border-width: 4px;
    border-style: solid;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
}

/* Tooltip PARA TEXTO */
.warp-copy:not(img)::after {
    bottom: calc(100% + 5px);
}

.warp-copy:not(img)::before {
    bottom: calc(100% + 1px);
    border-color: #333 transparent transparent transparent;
}

/* Tooltip PARA IMAGENS */
.tile-top.tile-image .warp-copy::after {
    bottom: -25px;
    top: auto !important;
}

.tile-top.tile-image .warp-copy::before {
    bottom: -18px;
    top: auto !important;
    border-color: #333 transparent transparent transparent !important;
}

/* Estados de hover */
.warp-copy:hover::after,
.warp-copy:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Feedback de copiado - APLICA-SE A TODOS OS WARP-COPY */
.warp-copy.copied::after {
    content: "Copied!" !important;
    background-color: #4CAF50 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.warp-copy.copied {
    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;
}
Retrieved from "https://wiki.xilepk.net/wiki/index.php?title=MediaWiki:Common.js&oldid=1596"