Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
m Etiqueta: Revertido |
m Etiqueta: Revertido |
||
| Linha 1: | Linha 1: | ||
<!-- Widget:Teste — | <!-- Widget:Teste — Thumb “fake” que mantém GIF animado | ||
Parâmetros: | Parâmetros esperados na inclusão: | ||
file (obrigatório) ex: download.gif | |||
cap (opcional) legenda | |||
side (opcional) right | left | center (padrão: right) | |||
width (opcional) largura em px; se omitido, usa o tamanho natural | |||
alt (opcional) texto alternativo | |||
link (opcional) page | media | none (padrão: page) | |||
--> | |||
<div class="widget- | <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 class="thumbcaption"> | |||
</div> | </div> | ||
</div> | </div> | ||
<style> | <style> | ||
/* | /* —— estilos isolados do widget —— */ | ||
.widget- | .widget-gifthumb { margin: .5em 0; } | ||
.widget- | .widget-gifthumb.tright { float: right; clear: right; margin-left: 1.4em; } | ||
.widget- | .widget-gifthumb.tleft { float: left; clear: left; margin-right: 1.4em; } | ||
.widget- | .widget-gifthumb.tcenter{ float: none; display: table; margin: .5em auto; } | ||
.widget- | .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; | display: inline-block; | ||
max-width: 100%; | max-width: 100%; | ||
box-sizing: content-box; /* | box-sizing: content-box; /* largura = img + 2px de borda */ | ||
} | } | ||
.widget- | .widget-gifthumb .thumbimage { | ||
display: block; | display: block; | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
} | } | ||
.widget- | .widget-gifthumb .thumbcaption { | ||
margin-top: 3px; | margin-top: 3px; | ||
font-size: 88%; | font-size: 88%; | ||
| Linha 68: | Linha 54: | ||
<script> | <script> | ||
(function () { | (function () { | ||
try { | try { | ||
// pega o bloco do widget mesmo se houver <style> antes | |||
var prev = document.currentScript.previousElementSibling; | |||
if ( | 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 | 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; | |||
if ( | |||
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() { | ||
if (!isNaN(width) && width > 0) { | |||
var | 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 }); | |||
if (img.complete) | |||
window.addEventListener('resize', fit); | window.addEventListener('resize', fit); | ||
} catch (e) {} | } catch (e) {} | ||
})(); | })(); | ||
</script> | </script> | ||
Edição das 02h02min de 14 de agosto de 2025
<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>