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 — GifThumb (thumb fake que mantém GIF animado)
<!-- Widget:Teste — Thumb “fake” que mantém GIF animado
     Parâmetros:
     Parâmetros esperados na inclusão:
       - file   (obrigatório) ex: download.gif
       file (obrigatório) ex: download.gif
       - cap   (opcional)     legenda
       cap   (opcional)   legenda
       - side   (opcional)     right | left | center (padrão: right)
       side (opcional)   right | left | center (padrão: right)
       - width (opcional)     número em px (ex: 274). Se não passar, fica responsivo.
       width (opcional)   largura em px; se omitido, usa o tamanho natural
       - alt   (opcional)     texto alternativo
       alt   (opcional)   texto alternativo
       - link   (opcional)     yes|no (padrão: yes) linka para a página do arquivo
       link (opcional)   page | media | none (padrão: page)
    Requisitos: ParserFunctions (para #if, #ifeq, #expr) -->
-->


<div class="widget-gifthumbright thumb
<div class="widget-gifthumb thumb"
  {{#ifeq:{{{side|right}}}|left|tleft|}}
    data-file="{{file}}"
  {{#ifeq:{{{side|right}}}|right|tright|}}
    data-cap="{{cap}}"
  {{#ifeq:{{{side|right}}}|center|tcenter|tright}}">
    data-side="{{side}}"
  <div class="thumbinner"
    data-width="{{width}}"
      {{#if:{{{width|}}}|style="width: {{#expr: {{{width}}} + 2 }}px;"|}}>
    data-alt="{{alt}}"
    {{#if:{{{link|yes}}}|
    data-link="{{link}}">
      <a href="{{fullurl:Arquivo:{{{file}}}}}">
  <div class="thumbinner">
        <img src="{{filepath:{{{file}}}}"
    <a class="thumblink"><img class="thumbimage" alt=""></a>
            {{#if:{{{width|}}}|width="{{{width}}}"|}}
     <div class="thumbcaption"></div>
            class="thumbimage"
            alt="{{{alt|}}}"
            loading="lazy"
            decoding="async" />
      </a>
    |
      <img src="{{filepath:{{{file}}}}"
          {{#if:{{{width|}}}|width="{{{width}}}"|}}
          class="thumbimage"
          alt="{{{alt|}}}"
          loading="lazy"
          decoding="async" />
    }}
     <div class="thumbcaption">{{{cap|}}}</div>
   </div>
   </div>
</div>
</div>


<style>
<style>
/* ——— Estilos isolados do widget (não poluem o resto) ——— */
/* —— estilos isolados do widget —— */
.widget-gifthumbright { margin: .5em 0; }
.widget-gifthumb { margin: .5em 0; }
.widget-gifthumbright.tright { float: right; clear: right; margin-left: 1.4em; }
.widget-gifthumb.tright { float: right; clear: right; margin-left: 1.4em; }
.widget-gifthumbright.tleft  { float: left;  clear: left;  margin-right: 1.4em; }
.widget-gifthumb.tleft  { float: left;  clear: left;  margin-right: 1.4em; }
.widget-gifthumbright.tcenter{ float: none; margin-left: auto; margin-right: auto; display: table; }
.widget-gifthumb.tcenter{ float: none; display: table; margin: .5em auto; }


.widget-gifthumbright .thumbinner {
.widget-gifthumb .thumbinner {
   border: 1px solid #a2a9b1;
   border: 1px solid #a2a9b1;
   background-color: #f8f9fa;
   background-color: #f8f9fa;
   padding: 3px;
   padding: 3px;
   text-align: center;
   text-align: center;
   display: inline-block; /* permite responsivo quando sem width fixo */
   display: inline-block;
   max-width: 100%;
   max-width: 100%;
   box-sizing: content-box; /* p/ largura = imagem + 2px da borda (1px cada lado) */
   box-sizing: content-box; /* largura = img + 2px de borda */
}
}


.widget-gifthumbright .thumbimage {
.widget-gifthumb .thumbimage {
   display: block;
   display: block;
   max-width: 100%;
   max-width: 100%;
   height: auto;         /* mantém proporção se width não vier fixo */
   height: auto;
}
}


.widget-gifthumbright .thumbcaption {
.widget-gifthumb .thumbcaption {
   margin-top: 3px;
   margin-top: 3px;
   font-size: 88%;
   font-size: 88%;
Linha 68: Linha 54:


<script>
<script>
/* ——— JS opcional: se não passar "width", ajusta o contêiner ao tamanho real do GIF quando carregar ——— */
(function () {
(function () {
   try {
   try {
     var root = document.currentScript.previousElementSibling; // <style> está antes do <script>, então root é o bloco do widget
     // pega o bloco do widget mesmo se houver <style> antes
     // Pode acontecer do previousElementSibling ser o <style>; então sobe mais um:
     var prev = document.currentScript.previousElementSibling;
     if (root && root.tagName === 'STYLE') root = root.previousElementSibling;
     if (prev && prev.tagName === 'STYLE') prev = prev.previousElementSibling;
    var root = prev && prev.classList.contains('widget-gifthumb') ? prev : null;
     if (!root) return;
     if (!root) return;


     var inner = root.querySelector('.thumbinner');
     var inner = root.querySelector('.thumbinner');
     var img   = root.querySelector('img.thumbimage');
    var a = root.querySelector('.thumblink');
     var img = root.querySelector('img.thumbimage');
    var capEl = root.querySelector('.thumbcaption');


     if (!inner || !img) return;
     var file = (root.dataset.file || '').trim();
    var cap  = root.dataset.cap || '';
    var side = (root.dataset.side || 'right').toLowerCase();
    var width = parseInt(root.dataset.width, 10);
    var alt  = root.dataset.alt || '';
    var link = (root.dataset.link || 'page').toLowerCase();


    // Se o editor não definiu width fixo, mantemos responsivo — mas setamos uma largura exata após o load
     if (!file) return;
    var hasFixedWidth = inner.getAttribute('style') && /width\s*:/.test(inner.getAttribute('style'));
     if (hasFixedWidth) return;


    var norm = file.replace(/ /g, '_');
    function urlFor(title) {
      if (window.mw && mw.util && mw.util.getUrl) return mw.util.getUrl(title);
      var path = (window.mw && mw.config) ? (mw.config.get('wgArticlePath') || '/wiki/$1') : '/wiki/$1';
      return path.replace('$1', encodeURIComponent(title));
    }
    // src do ARQUIVO ORIGINAL (mantém a animação!)
    var src = urlFor('Special:FilePath/' + norm);
    img.setAttribute('src', src);
    if (alt) img.setAttribute('alt', alt);
    // link (página do arquivo, media direto, ou nenhum)
    if (link === 'none' || link === 'no') {
      a.replaceWith(img);
    } else {
      var href = link === 'media' ? urlFor('Media:' + norm) : urlFor('File:' + norm);
      a.setAttribute('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 pra imitar o thumb)
     function fit() {
     function fit() {
       // soma 2px de borda (1px de cada lado), imitando o thumb clássico
       if (!isNaN(width) && width > 0) {
       var w = Math.round(img.getBoundingClientRect().width) + 2;
        img.setAttribute('width', width);
      if (w > 0) inner.style.width = w + 'px';
        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 });
     if (img.complete) { fit(); }
    else { img.addEventListener('load', fit, { once: true }); }
    // também reage a resize (caso o layout mude)
     window.addEventListener('resize', fit);
     window.addEventListener('resize', fit);
   } catch (e) {}
   } catch (e) {}
})();
})();
</script>
</script>

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


   <a class="thumblink"><img class="thumbimage" alt=""></a>

<style> /* —— estilos isolados do widget —— */ .widget-gifthumb { margin: .5em 0; } .widget-gifthumb.tright { float: right; clear: right; margin-left: 1.4em; } .widget-gifthumb.tleft { float: left; clear: left; margin-right: 1.4em; } .widget-gifthumb.tcenter{ float: none; display: table; margin: .5em auto; }

.widget-gifthumb .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 de borda */

}

.widget-gifthumb .thumbimage {

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

}

.widget-gifthumb .thumbcaption {

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

} </style>

<script> (function () {

 try {
   // pega o bloco do widget mesmo se houver <style> antes
   var prev = document.currentScript.previousElementSibling;
   if (prev && prev.tagName === 'STYLE') prev = prev.previousElementSibling;
   var root = prev && prev.classList.contains('widget-gifthumb') ? prev : null;
   if (!root) return;
   var inner = root.querySelector('.thumbinner');
   var a = root.querySelector('.thumblink');
   var img = root.querySelector('img.thumbimage');
   var capEl = root.querySelector('.thumbcaption');
   var file = (root.dataset.file || ).trim();
   var cap  = root.dataset.cap || ;
   var side = (root.dataset.side || 'right').toLowerCase();
   var width = parseInt(root.dataset.width, 10);
   var alt  = root.dataset.alt || ;
   var link = (root.dataset.link || 'page').toLowerCase();
   if (!file) return;
   var norm = file.replace(/ /g, '_');
   function urlFor(title) {
     if (window.mw && mw.util && mw.util.getUrl) return mw.util.getUrl(title);
     var path = (window.mw && mw.config) ? (mw.config.get('wgArticlePath') || '/wiki/$1') : '/wiki/$1';
     return path.replace('$1', encodeURIComponent(title));
   }
   // src do ARQUIVO ORIGINAL (mantém a animação!)
   var src = urlFor('Special:FilePath/' + norm);
   img.setAttribute('src', src);
   if (alt) img.setAttribute('alt', alt);
   // link (página do arquivo, media direto, ou nenhum)
   if (link === 'none' || link === 'no') {
     a.replaceWith(img);
   } else {
     var href = link === 'media' ? urlFor('Media:' + norm) : urlFor('File:' + norm);
     a.setAttribute('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 pra imitar o 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>