Mudanças entre as edições de "Widget:Teste"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Etiqueta: Revertido
m
Etiqueta: Revertido
Linha 1: Linha 1:
<!-- Widget:Teste — Thumb “fake” que mantém GIF animado
<!-- Widget:Teste — apenas CSS+JS para thumbs de GIF -->
    Parâmetros (via {{#widget:Teste|file=..|cap=..|side=..|width=..|alt=..|link=..}}):
      file  (obrigatório)  ex: Baixandoglawindows.gif
      cap  (opcional)      legenda
      side  (opcional)      right | left | center  (padrão: right)
      width (opcional)      largura numérica em px (ex: 274)
      alt  (opcional)      texto alternativo
      link  (opcional)      page | media | none    (padrão: page)
-->
 
<div class="widget-gifthumb thumb"
    data-file="{{{file}}}"
    data-cap="{{{cap}}}"
    data-side="{{{side}}}"
    data-width="{{{width}}}"
    data-alt="{{{alt}}}"
    data-link="{{{link}}}">
  <div class="thumbinner">
    <a class="thumblink"><img class="thumbimage" alt=""></a>
    <div class="thumbcaption"></div>
  </div>
</div>
 
<style>
<style>
/* —— estilos isolados do widget —— */
/* Estilos isolados do “thumb fake” */
.widget-gifthumb { margin: .5em 0; }
.gtr-thumb { margin: .5em 0; }
.widget-gifthumb.tright  { float: right;  clear: right;  margin-left: 1.4em; }
.gtr-thumb.tright  { float: right;  clear: right;  margin-left: 1.4em; }
.widget-gifthumb.tleft  { float: left;  clear: left;  margin-right: 1.4em; }
.gtr-thumb.tleft  { float: left;  clear: left;  margin-right: 1.4em; }
.widget-gifthumb.tcenter { float: none; display: table; margin: .5em auto; }
.gtr-thumb.tcenter { float: none; display: table; margin: .5em auto; }


.widget-gifthumb .thumbinner {
.gtr-thumb .thumbinner {
   border: 1px solid #a2a9b1;
   border: 1px solid #a2a9b1;
   background-color: #f8f9fa;
   background-color: #f8f9fa;
Linha 39: Linha 17:
}
}


.widget-gifthumb .thumbimage {
.gtr-thumb .thumbimage {
   display: block;
   display: block;
   max-width: 100%;
   max-width: 100%;
Linha 45: Linha 23:
}
}


.widget-gifthumb .thumbcaption {
.gtr-thumb .thumbcaption {
   margin-top: 3px;
   margin-top: 3px;
   font-size: 88%;
   font-size: 88%;
Linha 54: Linha 32:


<script>
<script>
/* Ajusta automaticamente a largura do .thumbinner quando o template
  não fixar width. Funciona para qualquer bloco .gtr-thumb na página. */
(function () {
(function () {
   try {
   function fitOne(root) {
     // Pega o <div class="widget-gifthumb ..."> correspondente a este <script>
     try {
    var el = document.currentScript;
      var inner = root.querySelector('.thumbinner');
    var root = el;
      var img  = root.querySelector('img.thumbimage');
    // Sobe até encontrar o contêiner do widget:
       if (!inner || !img) return;
    while (root && (!root.classList || !root.classList.contains('widget-gifthumb'))) {
       root = root.previousElementSibling;
    }
    if (!root) return;


    var inner = root.querySelector('.thumbinner');
      var hasFixed = inner.getAttribute('style') && /width\s*:/.test(inner.getAttribute('style'));
    var a    = root.querySelector('.thumblink');
      if (hasFixed) return;
    var img  = root.querySelector('img.thumbimage');
    var capEl = root.querySelector('.thumbcaption');


    var file  = (root.dataset.file || '').trim();
      function fit() {
    var cap  = root.dataset.cap || '';
        var w = Math.round(img.getBoundingClientRect().width);
    var side  = (root.dataset.side || 'right').toLowerCase();
        if (w > 0) inner.style.width = (w + 2) + 'px'; // +2 pela borda (1px de cada lado)
    var width = parseInt(root.dataset.width, 10);
      }
    var alt  = root.dataset.alt || '';
       if (img.complete) { fit(); }
    var link  = (root.dataset.link || 'page').toLowerCase();
       else { img.addEventListener('load', fit, { once: true }); }
 
       window.addEventListener('resize', fit);
    if (!file) return;
     } catch (e) {}
 
  }
    var norm = file.replace(/ /g, '_');
 
    function urlFor(title) {
       if (window.mw && mw.util && mw.util.getUrl) return mw.util.getUrl(title);
       var base = (window.mw && mw.config) ? (mw.config.get('wgArticlePath') || '/wiki/$1') : '/wiki/$1';
       return base.replace('$1', encodeURIComponent(title));
     }


    // Usa o ARQUIVO ORIGINAL (não miniatura) — mantém animação do GIF
  function boot() {
     var src = urlFor('Special:FilePath/' + norm);
     document.querySelectorAll('.gtr-thumb').forEach(fitOne);
    img.src = src;
  }
    if (alt) img.alt = alt;


    // Link: página do arquivo, mídia direta, ou nenhum
  if (document.readyState === 'loading') {
    if (link === 'none' || link === 'no') {
     document.addEventListener('DOMContentLoaded', boot);
      a.replaceWith(img);
  } else {
     } else {
     boot();
      var href = (link === 'media') ? urlFor('Media:' + norm) : urlFor('File:' + norm);
   }
      a.href = href;
    }
 
    // Legenda
    if (cap) capEl.textContent = cap; else capEl.style.display = 'none';
 
    // Alinhamento
    root.classList.remove('tleft','tright','tcenter');
    if (side === 'left') root.classList.add('tleft');
    else if (side === 'center') root.classList.add('tcenter');
    else root.classList.add('tright');
 
    // Largura (somamos 2px da borda do thumb)
    function fit() {
      if (!isNaN(width) && width > 0) {
        img.setAttribute('width', width);
        inner.style.width = (width + 2) + 'px';
      } else {
        var iw = img.getBoundingClientRect().width;
        if (iw > 0) inner.style.width = (Math.round(iw) + 2) + 'px';
      }
    }
    if (img.complete) fit(); else img.addEventListener('load', fit, { once: true });
     window.addEventListener('resize', fit);
   } catch (e) {}
})();
})();
</script>
</script>

Edição das 02h07min de 14 de agosto de 2025

<style> /* Estilos isolados do “thumb fake” */ .gtr-thumb { margin: .5em 0; } .gtr-thumb.tright { float: right; clear: right; margin-left: 1.4em; } .gtr-thumb.tleft { float: left; clear: left; margin-right: 1.4em; } .gtr-thumb.tcenter { float: none; display: table; margin: .5em auto; }

.gtr-thumb .thumbinner { 

 border: 1px solid #a2a9b1;
 background-color: #f8f9fa;
 padding: 3px;
 text-align: center;
 display: inline-block;
 max-width: 100%;
 box-sizing: content-box; /* largura = img + 2px da borda */

}

.gtr-thumb .thumbimage { 

 display: block;
 max-width: 100%;
 height: auto;

}

.gtr-thumb .thumbcaption { 

 margin-top: 3px;
 font-size: 88%;
 color: #202122;
 line-height: 1.3;

} </style>

<script> /* Ajusta automaticamente a largura do .thumbinner quando o template 

  não fixar width. Funciona para qualquer bloco .gtr-thumb na página. */

(function () { 

 function fitOne(root) {
   try {
     var inner = root.querySelector('.thumbinner');
     var img   = root.querySelector('img.thumbimage');
     if (!inner || !img) return;

     var hasFixed = inner.getAttribute('style') && /width\s*:/.test(inner.getAttribute('style'));
     if (hasFixed) return;

     function fit() {
       var w = Math.round(img.getBoundingClientRect().width);
       if (w > 0) inner.style.width = (w + 2) + 'px'; // +2 pela borda (1px de cada lado)
     }
     if (img.complete) { fit(); }
     else { img.addEventListener('load', fit, { once: true }); }
     window.addEventListener('resize', fit);
   } catch (e) {}
 }

 function boot() {
   document.querySelectorAll('.gtr-thumb').forEach(fitOne);
 }

 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', boot);
 } else {
   boot();
 }

})(); </script>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Teste&oldid=37643”