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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
 
Linha 1: Linha 1:
<style>
<div id="fc-carousel" style="position:relative; max-width:700px; margin:16px auto; border-radius:8px; overflow:hidden; background:#1a1a2e;">
     .island-grid {
  <div id="fc-label" style="text-align:center; padding:8px 40px; color:#fff; font-weight:bold; font-size:14px;"></div>
        display: flex;
  <div id="fc-track" style="display:flex; transition:transform 0.4s ease;">
        flex-wrap: wrap;
     <!--slides are injected by JS-->
        justify-content: center;
  </div>
        gap: 10px;
  <div id="fc-prev" style="position:absolute; top:50%; left:8px; transform:translateY(-50%); width:32px; height:32px; background:rgba(0,0,0,0.6); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; user-select:none;" role="button" tabindex="0">
        padding: 12px 0;
    <span style="color:#fff; font-size:18px; line-height:1;">&#10094;</span>
  </div>
  <div id="fc-next" style="position:absolute; top:50%; right:8px; transform:translateY(-50%); width:32px; height:32px; background:rgba(0,0,0,0.6); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; user-select:none;" role="button" tabindex="0">
    <span style="color:#fff; font-size:18px; line-height:1;">&#10095;</span>
  </div>
</div>
 
<script>
(function() {
  var slides = [];
  var raw = [
    { img: "{{{img1|}}}", label: "{{{label1|}}}" },
    { img: "{{{img2|}}}", label: "{{{label2|}}}" },
    { img: "{{{img3|}}}", label: "{{{label3|}}}" },
    { img: "{{{img4|}}}", label: "{{{label4|}}}" },
    { img: "{{{img5|}}}", label: "{{{label5|}}}" },
    { img: "{{{img6|}}}", label: "{{{label6|}}}" },
    { img: "{{{img7|}}}", label: "{{{label7|}}}" },
    { img: "{{{img8|}}}", label: "{{{label8|}}}" }
  ];
 
  for (var i = 0; i < raw.length; i++) {
    if (raw[i].img && raw[i].img.length > 0) {
      slides.push(raw[i]);
     }
     }
  }


    .island-banner {
  if (slides.length === 0) return;
        position: relative;
 
        width: 380px;
  var current = 0;
        height: 90px;
  var interval = 3000;
        overflow: hidden;
  var timer = null;
        border-radius: 8px;
  var paused = false;
        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 {
  var carousel = document.getElementById('fc-carousel');
        content: "";
  var track = document.getElementById('fc-track');
        position: absolute;
  var label = document.getElementById('fc-label');
        top: 0;
  var prevBtn = document.getElementById('fc-prev');
        left: 0;
  var nextBtn = document.getElementById('fc-next');
        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 {
  function getFileUrl(filename) {
        transform: translateY(-2px);
     var base = mw && mw.config ? mw.config.get('wgScript') : '/index.php';
        box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
    return base + '?title=Especial:FilePath/' + encodeURIComponent(filename);
    }
  }


     .island-banner .island-chests {
  for (var i = 0; i < slides.length; i++) {
        position: absolute;
    var div = document.createElement('div');
        top: 8px;
     div.style.cssText = 'flex:0 0 100%; text-align:center; padding:4px; box-sizing:border-box;';
        left: 8px;
    var img = document.createElement('img');
        display: flex;
    img.src = getFileUrl(slides[i].img);
        flex-wrap: wrap;
    img.style.cssText = 'max-width:100%; height:auto; display:block; margin:0 auto; border-radius:4px;';
        gap: 6px;
    img.alt = slides[i].label || '';
        z-index: 2;
    div.appendChild(img);
        pointer-events: none;
     track.appendChild(div);
     }
  }


     .island-banner .island-chest-group {
  function goTo(index) {
        position: relative;
     if (index < 0) index = slides.length - 1;
        display: inline-block;
    if (index >= slides.length) index = 0;
     }
    current = index;
    track.style.transform = 'translateX(-' + (current * 100) + '%)';
     label.textContent = slides[current].label || '';
  }


    .island-banner .island-chest-group img {
  function startTimer() {
        display: block;
    stopTimer();
        width: auto;
    timer = setInterval(function() {
        height: auto;
      if (!paused) goTo(current + 1);
    }
    }, interval);
  }


    .island-banner .island-chest-count {
  function stopTimer() {
     position: absolute;
     if (timer) { clearInterval(timer); timer = null; }
    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 {
  prevBtn.addEventListener('click', function() { goTo(current - 1); startTimer(); });
        position: absolute;
  nextBtn.addEventListener('click', function() { goTo(current + 1); startTimer(); });
        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) {
  carousel.addEventListener('mouseenter', function() { paused = true; });
        .island-grid {
  carousel.addEventListener('mouseleave', function() { paused = false; });
            flex-direction: column;
            align-items: stretch;
        }


        .island-banner {
  goTo(0);
            width: 100%;
  startTimer();
            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>
</script>

Edição atual tal como às 23h10min de 16 de março de 2026

<script> (function() { 

 var slides = [];
 var raw = [
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" },
   { img: "", label: "" }
 ];

 for (var i = 0; i < raw.length; i++) {
   if (raw[i].img && raw[i].img.length > 0) {
     slides.push(raw[i]);
   }
 }

 if (slides.length === 0) return;

 var current = 0;
 var interval = 3000;
 var timer = null;
 var paused = false;

 var carousel = document.getElementById('fc-carousel');
 var track = document.getElementById('fc-track');
 var label = document.getElementById('fc-label');
 var prevBtn = document.getElementById('fc-prev');
 var nextBtn = document.getElementById('fc-next');

 function getFileUrl(filename) {
   var base = mw && mw.config ? mw.config.get('wgScript') : '/index.php';
   return base + '?title=Especial:FilePath/' + encodeURIComponent(filename);
 }

 for (var i = 0; i < slides.length; i++) {
   var div = document.createElement('div');
   div.style.cssText = 'flex:0 0 100%; text-align:center; padding:4px; box-sizing:border-box;';
   var img = document.createElement('img');
   img.src = getFileUrl(slides[i].img);
   img.style.cssText = 'max-width:100%; height:auto; display:block; margin:0 auto; border-radius:4px;';
   img.alt = slides[i].label || ;
   div.appendChild(img);
   track.appendChild(div);
 }

 function goTo(index) {
   if (index < 0) index = slides.length - 1;
   if (index >= slides.length) index = 0;
   current = index;
   track.style.transform = 'translateX(-' + (current * 100) + '%)';
   label.textContent = slides[current].label || ;
 }

 function startTimer() {
   stopTimer();
   timer = setInterval(function() {
     if (!paused) goTo(current + 1);
   }, interval);
 }

 function stopTimer() {
   if (timer) { clearInterval(timer); timer = null; }
 }

 prevBtn.addEventListener('click', function() { goTo(current - 1); startTimer(); });
 nextBtn.addEventListener('click', function() { goTo(current + 1); startTimer(); });

 carousel.addEventListener('mouseenter', function() { paused = true; });
 carousel.addEventListener('mouseleave', function() { paused = false; });

 goTo(0);
 startTimer();

})(); </script>

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