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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Etiqueta: Revertido
m
 
(182 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 (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 —— */
    .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 da 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 <div class="widget-gifthumb ..."> correspondente a este <script>
        left: 8px;
    var el = document.currentScript;
        display: flex;
    var root = el;
        flex-wrap: wrap;
    // Sobe até encontrar o contêiner do widget:
        gap: 6px;
    while (root && (!root.classList || !root.classList.contains('widget-gifthumb'))) {
        z-index: 2;
      root = root.previousElementSibling;
        pointer-events: none;
     }
     }
    if (!root) return;


     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();
     .island-banner .island-chest-group img {
    var cap  = root.dataset.cap || '';
        display: block;
    var side  = (root.dataset.side || 'right').toLowerCase();
        width: auto;
    var width = parseInt(root.dataset.width, 10);
        height: auto;
    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
     .island-banner .island-chest-count {
     var src = urlFor('Special:FilePath/' + norm);
    position: absolute;
     img.src = src;
    left: 0;          /* era right: 0 */
     if (alt) img.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, mídia direta, 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.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;
    // Alinhamento
            align-items: stretch;
    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)
         .island-banner {
    function fit() {
            width: 100%;
      if (!isNaN(width) && width > 0) {
            max-width: none;
         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”