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:
<div id="fc-carousel" style="position:relative; max-width:700px; margin:16px auto; border-radius:8px; overflow:hidden; background:#1a1a2e;">
<style>
  <div id="fc-label" style="text-align:center; padding:8px 40px; color:#fff; font-weight:bold; font-size:14px;"></div>
.teste-caixa {
  <div id="fc-track" style="display:flex; transition:transform 0.4s ease;">
    border: 1px solid #444;
     <!--slides are injected by JS-->
    border-radius: 6px;
  </div>
    padding: 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">
    max-width: 36em;
     <span style="color:#fff; font-size:18px; line-height:1;">&#10094;</span>
     font-family: system-ui, sans-serif;
  </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">
.teste-caixa h3 {
     <span style="color:#fff; font-size:18px; line-height:1;">&#10095;</span>
    margin: 0 0 8px;
  </div>
     font-size: 1.1em;
</div>
}
 
.teste-caixa .teste-corpo {
    margin: 0;
}
.teste-caixa .teste-corpo.teste-colapsado {
    max-height: 3.2em;
    overflow: hidden;
}
.teste-caixa button.teste-toggle {
     margin-top: 8px;
    cursor: pointer;
}
</style>
<script>
<script>
(function() {
(function () {
  var slides = [];
    function init() {
  var raw = [
        document.querySelectorAll('.teste-caixa').forEach(function (box) {
    { img: "{{{img1|}}}", label: "{{{label1|}}}" },
            if (box.dataset.testeInit) return;
    { img: "{{{img2|}}}", label: "{{{label2|}}}" },
            box.dataset.testeInit = '1';
    { img: "{{{img3|}}}", label: "{{{label3|}}}" },
            var body = box.querySelector('.teste-corpo');
    { img: "{{{img4|}}}", label: "{{{label4|}}}" },
            var btn = box.querySelector('.teste-toggle');
    { img: "{{{img5|}}}", label: "{{{label5|}}}" },
            if (!body || !btn) return;
    { img: "{{{img6|}}}", label: "{{{label6|}}}" },
            var aberto = false;
     { img: "{{{img7|}}}", label: "{{{label7|}}}" },
            btn.addEventListener('click', function () {
     { img: "{{{img8|}}}", label: "{{{label8|}}}" }
                aberto = !aberto;
  ];
                body.classList.toggle('teste-colapsado', !aberto);
 
                btn.textContent = aberto ? 'Recolher' : 'Expandir';
  for (var i = 0; i < raw.length; i++) {
            });
    if (raw[i].img && raw[i].img.length > 0) {
        });
      slides.push(raw[i]);
     }
     if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
     }
     }
  }
  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>
</script>

Edição das 00h22min de 1 de abril de 2026

<style> .teste-caixa { 

   border: 1px solid #444;
   border-radius: 6px;
   padding: 10px;
   max-width: 36em;
   font-family: system-ui, sans-serif;

} .teste-caixa h3 { 

   margin: 0 0 8px;
   font-size: 1.1em;

} .teste-caixa .teste-corpo { 

   margin: 0;

} .teste-caixa .teste-corpo.teste-colapsado { 

   max-height: 3.2em;
   overflow: hidden;

} .teste-caixa button.teste-toggle { 

   margin-top: 8px;
   cursor: pointer;

} </style> <script> (function () { 

   function init() {
       document.querySelectorAll('.teste-caixa').forEach(function (box) {
           if (box.dataset.testeInit) return;
           box.dataset.testeInit = '1';
           var body = box.querySelector('.teste-corpo');
           var btn = box.querySelector('.teste-toggle');
           if (!body || !btn) return;
           var aberto = false;
           btn.addEventListener('click', function () {
               aberto = !aberto;
               body.classList.toggle('teste-colapsado', !aberto);
               btn.textContent = aberto ? 'Recolher' : 'Expandir';
           });
       });
   }
   if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', init);
   } else {
       init();
   }

})(); </script>

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