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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Etiqueta: Revertido
m
 
(183 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<!-- Widget:Teste — Thumb “fake” que mantém GIF animado
    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-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 —— */
    .island-grid {
.widget-gifthumb { margin: .5em 0; }
        display: flex;
.widget-gifthumb.tright { float: right; clear: right; margin-left: 1.4em; }
        flex-wrap: wrap;
.widget-gifthumb.tleft  { float: left; clear: left; margin-right: 1.4em; }
        justify-content: center;
.widget-gifthumb.tcenter{ float: none; display: table; margin: .5em auto; }
        gap: 10px;
        padding: 12px 0;
    }


.widget-gifthumb .thumbinner {
    .island-banner {
  border: 1px solid #a2a9b1;
        position: relative;
  background-color: #f8f9fa;
        width: 380px;
  padding: 3px;
        height: 90px;
  text-align: center;
        overflow: hidden;
  display: inline-block;
        border-radius: 8px;
  max-width: 100%;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
  box-sizing: content-box; /* largura = img + 2px de borda */
        cursor: pointer;
}
        transition: transform 0.15s, box-shadow 0.15s;
        display: block;
        box-sizing: border-box;
    }


.widget-gifthumb .thumbimage {
    .island-banner::before {
  display: block;
        content: "";
  max-width: 100%;
        position: absolute;
  height: auto;
        top: 0;
}
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(105deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 100%);
        pointer-events: none;
        z-index: 1;
    }


.widget-gifthumb .thumbcaption {
    .island-banner:hover {
  margin-top: 3px;
        transform: translateY(-2px);
  font-size: 88%;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
  color: #202122;
    }
  line-height: 1.3;
}
</style>


<script>
    .island-banner .island-chests {
(function () {
        position: absolute;
  try {
        top: 8px;
    // pega o bloco do widget mesmo se houver <style> antes
        left: 8px;
    var prev = document.currentScript.previousElementSibling;
        display: flex;
    if (prev && prev.tagName === 'STYLE') prev = prev.previousElementSibling;
        flex-wrap: wrap;
    var root = prev && prev.classList.contains('widget-gifthumb') ? prev : null;
        gap: 6px;
     if (!root) return;
        z-index: 2;
        pointer-events: none;
     }


     var inner = root.querySelector('.thumbinner');
     .island-banner .island-chest-group {
    var a = root.querySelector('.thumblink');
        position: relative;
    var img = root.querySelector('img.thumbimage');
        display: inline-block;
    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) {
     .island-banner .island-chest-group img {
      if (window.mw && mw.util && mw.util.getUrl) return mw.util.getUrl(title);
        display: block;
      var path = (window.mw && mw.config) ? (mw.config.get('wgArticlePath') || '/wiki/$1') : '/wiki/$1';
        width: auto;
      return path.replace('$1', encodeURIComponent(title));
        height: auto;
     }
     }


     // src do ARQUIVO ORIGINAL (mantém a animação!)
     .island-banner .island-chest-count {
     var src = urlFor('Special:FilePath/' + norm);
    position: absolute;
     img.setAttribute('src', src);
    left: 0;          /* era right: 0 */
     if (alt) img.setAttribute('alt', alt);
     bottom: 0;
    font-size: 12.5px;  /* era 11px */
    font-weight: bold;
    color: #fff;
     background: rgba(0, 0, 0, 0.75);
     padding: 1px 3px;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 10;
}


     // link (página do arquivo, media direto, ou nenhum)
     .island-banner .island-title {
    if (link === 'none' || link === 'no') {
        position: absolute;
      a.replaceWith(img);
        bottom: 10px;
    } else {
        left: 8px;
      var href = link === 'media' ? urlFor('Media:' + norm) : urlFor('File:' + norm);
        font-size: 1.35em;
      a.setAttribute('href', href);
        font-weight: bold;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
        line-height: 1.2;
        z-index: 2;
        pointer-events: none;
        text-transform: uppercase;
     }
     }


     // legenda
     @media (max-width: 768px) {
    if (cap) capEl.textContent = cap; else capEl.style.display = 'none';
        .island-grid {
            flex-direction: column;
            align-items: stretch;
        }


    // alinhamento
        .island-banner {
    root.classList.remove('tleft','tright','tcenter');
            width: 100%;
    if (side === 'left') root.classList.add('tleft');
            max-width: none;
    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 });
</style>
    window.addEventListener('resize', fit);
<script>
  } catch (e) {}
     (function () {
})();
        function applyBackgrounds() {
            document.querySelectorAll('.island-banner[data-bgimg]').forEach(function (el) {
                var filename = el.getAttribute('data-bgimg');
                if (!filename) return;
                var url;
                if (typeof mw !== 'undefined' && mw.util && mw.util.getUrl) {
                    url = mw.util.getUrl('Especial:FilePath/' + filename);
                } else {
                    url = '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
                }
                el.style.backgroundImage = 'url(' + url + ')';
                el.style.backgroundSize = 'cover';
                el.style.backgroundPosition = 'center';
                el.style.backgroundRepeat = 'no-repeat';
            });
        }
        function initClickable() {
            document.querySelectorAll('.island-banner[data-href]').forEach(function (el) {
                if (el._icClick) return;
                el._icClick = true;
                el.setAttribute('role', 'link');
                el.setAttribute('tabindex', '0');
                el.addEventListener('click', function () {
                    var href = el.getAttribute('data-href');
                    if (href) window.location.href = href;
                });
                el.addEventListener('keydown', function (e) {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        var href = el.getAttribute('data-href');
                        if (href) window.location.href = href;
                    }
                });
            });
        }
        function run() {
            applyBackgrounds();
            initClickable();
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', run);
        } else {
            run();
        }
    })();
</script>
</script>

Edição atual tal como às 00h06min de 13 de março de 2026

<style> 

   .island-grid {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 10px;
       padding: 12px 0;
   }

   .island-banner {
       position: relative;
       width: 380px;
       height: 90px;
       overflow: hidden;
       border-radius: 8px;
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
       cursor: pointer;
       transition: transform 0.15s, box-shadow 0.15s;
       display: block;
       box-sizing: border-box;
   }

   .island-banner::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(105deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 100%);
       pointer-events: none;
       z-index: 1;
   }

   .island-banner:hover {
       transform: translateY(-2px);
       box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
   }

   .island-banner .island-chests {
       position: absolute;
       top: 8px;
       left: 8px;
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       z-index: 2;
       pointer-events: none;
   }

   .island-banner .island-chest-group {
       position: relative;
       display: inline-block;
   }

   .island-banner .island-chest-group img {
       display: block;
       width: auto;
       height: auto;
   }

   .island-banner .island-chest-count {
   position: absolute;
   left: 0;          /* era right: 0 */
   bottom: 0;
   font-size: 12.5px;  /* era 11px */
   font-weight: bold;
   color: #fff;
   background: rgba(0, 0, 0, 0.75);
   padding: 1px 3px;
   border-radius: 3px;
   line-height: 1;
   white-space: nowrap;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   z-index: 10;

} 

   .island-banner .island-title {
       position: absolute;
       bottom: 10px;
       left: 8px;
       font-size: 1.35em;
       font-weight: bold;
       color: #fff;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
       line-height: 1.2;
       z-index: 2;
       pointer-events: none;
       text-transform: uppercase;
   }

   @media (max-width: 768px) {
       .island-grid {
           flex-direction: column;
           align-items: stretch;
       }

       .island-banner {
           width: 100%;
           max-width: none;
       }
   }

</style> <script> 

   (function () {
       function applyBackgrounds() {
           document.querySelectorAll('.island-banner[data-bgimg]').forEach(function (el) {
               var filename = el.getAttribute('data-bgimg');
               if (!filename) return;
               var url;
               if (typeof mw !== 'undefined' && mw.util && mw.util.getUrl) {
                   url = mw.util.getUrl('Especial:FilePath/' + filename);
               } else {
                   url = '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
               }
               el.style.backgroundImage = 'url(' + url + ')';
               el.style.backgroundSize = 'cover';
               el.style.backgroundPosition = 'center';
               el.style.backgroundRepeat = 'no-repeat';
           });
       }
       function initClickable() {
           document.querySelectorAll('.island-banner[data-href]').forEach(function (el) {
               if (el._icClick) return;
               el._icClick = true;
               el.setAttribute('role', 'link');
               el.setAttribute('tabindex', '0');
               el.addEventListener('click', function () {
                   var href = el.getAttribute('data-href');
                   if (href) window.location.href = href;
               });
               el.addEventListener('keydown', function (e) {
                   if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault();
                       var href = el.getAttribute('data-href');
                       if (href) window.location.href = href;
                   }
               });
           });
       }
       function run() {
           applyBackgrounds();
           initClickable();
       }
       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', run);
       } else {
           run();
       }
   })();

</script>

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