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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
 
(Uma revisão intermediária pelo mesmo usuário não está sendo mostrada)
Linha 1: Linha 1:
<div id="fc-carousel" style="position:relative; max-width:700px; margin:16px auto; border-radius:8px; overflow:hidden; background:#1a1a2e;">
<!-- Widget:Teste — CSS + JS do exemplo didático (colar na página Widget:Teste) -->
  <div id="fc-label" style="text-align:center; padding:8px 40px; color:#fff; font-weight:bold; font-size:14px;"></div>
<style>
  <div id="fc-track" style="display:flex; transition:transform 0.4s ease;">
     .teste-caixa {
     <!--slides are injected by JS-->
        border: 1px solid #444;
  </div>
        border-radius: 6px;
  <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: 10px;
    <span style="color:#fff; font-size:18px; line-height:1;">&#10094;</span>
        max-width: 36em;
  </div>
        font-family: system-ui, sans-serif;
  <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>
     .teste-caixa h3 {
(function() {
        margin: 0 0 8px;
  var slides = [];
        font-size: 1.1em;
  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++) {
     .teste-caixa .teste-corpo {
     if (raw[i].img && raw[i].img.length > 0) {
        margin: 0;
      slides.push(raw[i]);
     }
     }
  }


  if (slides.length === 0) return;
    .teste-caixa .teste-corpo.teste-colapsado {
        max-height: 3.2em;
        overflow: hidden;
    }


  var current = 0;
    .teste-caixa .teste-toggle {
  var interval = 3000;
        display: inline-block;
  var timer = null;
        margin-top: 8px;
  var paused = false;
        padding: 4px 10px;
        cursor: pointer;
        border: 1px solid #666;
        border-radius: 4px;
        background: #f0f0f0;
        font: inherit;
        user-select: none;
    }


  var carousel = document.getElementById('fc-carousel');
    .teste-caixa .teste-toggle:hover {
  var track = document.getElementById('fc-track');
        background: #e4e4e4;
  var label = document.getElementById('fc-label');
    }
  var prevBtn = document.getElementById('fc-prev');
</style>
  var nextBtn = document.getElementById('fc-next');
<script>
 
    (function () {
  function getFileUrl(filename) {
        function init() {
    var base = mw && mw.config ? mw.config.get('wgScript') : '/index.php';
            document.querySelectorAll('.teste-caixa').forEach(function (box) {
    return base + '?title=Especial:FilePath/' + encodeURIComponent(filename);
                if (box.dataset.testeInit) return;
  }
                box.dataset.testeInit = '1';
 
                var body = box.querySelector('.teste-corpo');
  for (var i = 0; i < slides.length; i++) {
                var btn = box.querySelector('.teste-toggle');
    var div = document.createElement('div');
                if (!body || !btn) return;
    div.style.cssText = 'flex:0 0 100%; text-align:center; padding:4px; box-sizing:border-box;';
                var aberto = false;
    var img = document.createElement('img');
                function toggle() {
    img.src = getFileUrl(slides[i].img);
                    aberto = !aberto;
    img.style.cssText = 'max-width:100%; height:auto; display:block; margin:0 auto; border-radius:4px;';
                    body.classList.toggle('teste-colapsado', !aberto);
    img.alt = slides[i].label || '';
                    btn.textContent = aberto ? 'Recolher' : 'Expandir';
    div.appendChild(img);
                }
    track.appendChild(div);
                btn.addEventListener('click', toggle);
  }
                btn.addEventListener('keydown', function (e) {
 
                    if (e.key === 'Enter' || e.key === ' ') {
  function goTo(index) {
                        e.preventDefault();
    if (index < 0) index = slides.length - 1;
                        toggle();
    if (index >= slides.length) index = 0;
                    }
    current = index;
                });
    track.style.transform = 'translateX(-' + (current * 100) + '%)';
            });
    label.textContent = slides[current].label || '';
        }
  }
        if (document.readyState === 'loading') {
 
            document.addEventListener('DOMContentLoaded', init);
  function startTimer() {
        } else {
    stopTimer();
            init();
    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 atual tal como às 00h24min 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 .teste-toggle {
       display: inline-block;
       margin-top: 8px;
       padding: 4px 10px;
       cursor: pointer;
       border: 1px solid #666;
       border-radius: 4px;
       background: #f0f0f0;
       font: inherit;
       user-select: none;
   }

   .teste-caixa .teste-toggle:hover {
       background: #e4e4e4;
   }

</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;
               function toggle() {
                   aberto = !aberto;
                   body.classList.toggle('teste-colapsado', !aberto);
                   btn.textContent = aberto ? 'Recolher' : 'Expandir';
               }
               btn.addEventListener('click', toggle);
               btn.addEventListener('keydown', function (e) {
                   if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault();
                       toggle();
                   }
               });
           });
       }
       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=45260”