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 — Thumb “fake” que mantém GIF animado
     Parâmetros esperados na inclusão:
     Parâmetros (via {{#widget:Teste|file=..|cap=..|side=..|width=..|alt=..|link=..}}):
       file  (obrigatório) ex: download.gif
       file  (obrigatório)   ex: Baixandoglawindows.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)   largura em px; se omitido, usa o tamanho natural
       width (opcional)     largura numérica em px (ex: 274)
       alt  (opcional)   texto alternativo
       alt  (opcional)     texto alternativo
       link  (opcional)   page | media | none (padrão: page)
       link  (opcional)     page | media | none   (padrão: page)
-->
-->


<div class="widget-gifthumb thumb"
<div class="widget-gifthumb thumb"
     data-file="{{file}}"
     data-file="{{{file}}}"
     data-cap="{{cap}}"
     data-cap="{{{cap}}}"
     data-side="{{side}}"
     data-side="{{{side}}}"
     data-width="{{width}}"
     data-width="{{{width}}}"
     data-alt="{{alt}}"
     data-alt="{{{alt}}}"
     data-link="{{link}}">
     data-link="{{{link}}}">
   <div class="thumbinner">
   <div class="thumbinner">
     <a class="thumblink"><img class="thumbimage" alt=""></a>
     <a class="thumblink"><img class="thumbimage" alt=""></a>
Linha 25: Linha 25:
/* —— estilos isolados do widget —— */
/* —— estilos isolados do widget —— */
.widget-gifthumb { margin: .5em 0; }
.widget-gifthumb { margin: .5em 0; }
.widget-gifthumb.tright { float: right; clear: right; margin-left: 1.4em; }
.widget-gifthumb.tright { float: right; clear: right; margin-left: 1.4em; }
.widget-gifthumb.tleft { float: left; clear: left; margin-right: 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.tcenter { float: none; display: table; margin: .5em auto; }


.widget-gifthumb .thumbinner {
.widget-gifthumb .thumbinner {
Linha 36: Linha 36:
   display: inline-block;
   display: inline-block;
   max-width: 100%;
   max-width: 100%;
   box-sizing: content-box; /* largura = img + 2px de borda */
   box-sizing: content-box; /* largura = img + 2px da borda */
}
}


Linha 56: Linha 56:
(function () {
(function () {
   try {
   try {
     // pega o bloco do widget mesmo se houver <style> antes
     // Pega o <div class="widget-gifthumb ..."> correspondente a este <script>
     var prev = document.currentScript.previousElementSibling;
     var el = document.currentScript;
     if (prev && prev.tagName === 'STYLE') prev = prev.previousElementSibling;
     var root = el;
     var root = prev && prev.classList.contains('widget-gifthumb') ? prev : null;
     // Sobe até encontrar o contêiner do widget:
    while (root && (!root.classList || !root.classList.contains('widget-gifthumb'))) {
      root = root.previousElementSibling;
    }
     if (!root) return;
     if (!root) return;


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


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


     if (!file) return;
     if (!file) return;
Linha 80: Linha 83:
     function urlFor(title) {
     function urlFor(title) {
       if (window.mw && mw.util && mw.util.getUrl) return mw.util.getUrl(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';
       var base = (window.mw && mw.config) ? (mw.config.get('wgArticlePath') || '/wiki/$1') : '/wiki/$1';
       return path.replace('$1', encodeURIComponent(title));
       return base.replace('$1', encodeURIComponent(title));
     }
     }


     // src do ARQUIVO ORIGINAL (mantém a animação!)
     // Usa o ARQUIVO ORIGINAL (não miniatura) — mantém animação do GIF
     var src = urlFor('Special:FilePath/' + norm);
     var src = urlFor('Special:FilePath/' + norm);
     img.setAttribute('src', src);
     img.src = src;
     if (alt) img.setAttribute('alt', alt);
     if (alt) img.alt = alt;


     // link (página do arquivo, media direto, ou nenhum)
     // Link: página do arquivo, mídia direta, ou nenhum
     if (link === 'none' || link === 'no') {
     if (link === 'none' || link === 'no') {
       a.replaceWith(img);
       a.replaceWith(img);
     } else {
     } else {
       var href = link === 'media' ? urlFor('Media:' + norm) : urlFor('File:' + norm);
       var href = (link === 'media') ? urlFor('Media:' + norm) : urlFor('File:' + norm);
       a.setAttribute('href', href);
       a.href = href;
     }
     }


     // legenda
     // Legenda
     if (cap) capEl.textContent = cap; else capEl.style.display = 'none';
     if (cap) capEl.textContent = cap; else capEl.style.display = 'none';


     // alinhamento
     // Alinhamento
     root.classList.remove('tleft','tright','tcenter');
     root.classList.remove('tleft','tright','tcenter');
     if (side === 'left') root.classList.add('tleft');
     if (side === 'left') root.classList.add('tleft');
Linha 106: Linha 109:
     else root.classList.add('tright');
     else root.classList.add('tright');


     // largura (somamos 2px da borda pra imitar o thumb)
     // Largura (somamos 2px da borda do thumb)
     function fit() {
     function fit() {
       if (!isNaN(width) && width > 0) {
       if (!isNaN(width) && width > 0) {

Edição das 02h04min 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 da 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

correspondente a este <script>
   var el = document.currentScript;
   var root = el;
   // Sobe até encontrar o contêiner do widget:
   while (root && (!root.classList || !root.classList.contains('widget-gifthumb'))) {
     root = root.previousElementSibling;
   }
   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 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
   var src = urlFor('Special:FilePath/' + norm);
   img.src = src;
   if (alt) img.alt = alt;
   // Link: página do arquivo, mídia direta, ou nenhum
   if (link === 'none' || link === 'no') {
     a.replaceWith(img);
   } else {
     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>