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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<style>
<div class="map-wrapper" id="map-{{widget.id}}" style="width: {{{attributes.width|600px}}};">
   /* Evita forçar cascata em telas médias */
   <img
  @media (max-width: 1180px) {
    src="{{fullurl:Arquivo:{{{attributes.image}}}}"
     .homepage-content {
     alt="Mapa de teste"
      flex-direction: column !important;
    style="width:100%;" />
    }
</div>


    .menu-col,
<script>
    .side-col {
(function() {
      min-width: 100% !important;
  var id = '{{widget.id}}';
      width: 100% !important;
  var wrapper = document.getElementById('map-' + id);
      flex: 1 1 100% !important;
  if (!wrapper) return;
    }
  }


   /* Progressive enhancement com container queries */
  var pointsStr = {{{attributes.points|""|json}}};
   @supports (container-type: inline-size) {
   // pointsStr virá algo como:
    .homepage-content {
   // "150|200|Entrada da Dungeon|Página:Entrada;300|120|Baú de Tesouro|Página:BaúSecreto;450|350|Saída da Dungeon|Página:SaídaDungeon"
      container-type: inline-size;
      container-name: mainpage;
    }


    @container mainpage (max-width: 1180px) {
  pointsStr.split(';').forEach(function(item) {
      .homepage-content {
    item = item.trim();
        flex-direction: column !important;
    if (!item) return;
      }


      .menu-col,
    var parts = item.split('|');
      .side-col {
     if (parts.length < 4) return;
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
      }
     }
  }
</style>


<script>
    var x = parseInt(parts[0].trim(), 10);
  (function () {
    var y = parseInt(parts[1].trim(), 10);
     function checkCollapseLayout() {
     var desc = parts[2].trim();
      const content = document.querySelector('.homepage-content');
    var target = parts[3].trim();
      const menuCol = document.querySelector('.menu-col');
 
      const sideCol = document.querySelector('.side-col');
    var point = document.createElement('span');
      if (!content || !menuCol || !sideCol) return;
    point.className = 'map-point';
    point.style.top = y + 'px';
    point.style.left = x + 'px';


      const shouldCollapse = content.offsetWidth <= 1180;
    var a = document.createElement('a');
    a.href = mw.util.getUrl(target);
    a.style.display = 'block';
    a.style.width = '100%';
    a.style.height = '100%';
    // podemos esconder o texto, pois só queremos o clique
    a.style.textIndent = '-9999px';
    a.textContent = desc;
    point.appendChild(a);


      content.style.flexDirection = shouldCollapse ? 'column' : '';
    var tt = document.createElement('span');
      [menuCol, sideCol].forEach(el => {
    tt.className = 'tooltip';
        el.style.minWidth = shouldCollapse ? '100%' : '';
    tt.textContent = desc;
        el.style.width = shouldCollapse ? '100%' : '';
    point.appendChild(tt);
        el.style.flex = shouldCollapse ? '1 1 100%' : '';
      });
    }


     window.addEventListener('resize', checkCollapseLayout);
     wrapper.appendChild(point);
    document.addEventListener('DOMContentLoaded', checkCollapseLayout);
  });
  })();
})();
</script>
</script>

Edição das 22h09min de 5 de junho de 2025

 <img
   src="{{fullurl:Arquivo:{{{attributes.image}}}}"
   alt="Mapa de teste"
   style="width:100%;" />

<script> (function() {

 var id = 'Predefinição:Widget.id';
 var wrapper = document.getElementById('map-' + id);
 if (!wrapper) return;
 var pointsStr = "";
 // pointsStr virá algo como: 
 // "150|200|Entrada da Dungeon|Página:Entrada;300|120|Baú de Tesouro|Página:BaúSecreto;450|350|Saída da Dungeon|Página:SaídaDungeon"
 pointsStr.split(';').forEach(function(item) {
   item = item.trim();
   if (!item) return;
   var parts = item.split('|');
   if (parts.length < 4) return;
   var x = parseInt(parts[0].trim(), 10);
   var y = parseInt(parts[1].trim(), 10);
   var desc = parts[2].trim();
   var target = parts[3].trim();
   var point = document.createElement('span');
   point.className = 'map-point';
   point.style.top = y + 'px';
   point.style.left = x + 'px';
   var a = document.createElement('a');
   a.href = mw.util.getUrl(target);
   a.style.display = 'block';
   a.style.width = '100%';
   a.style.height = '100%';
   // podemos esconder o texto, pois só queremos o clique
   a.style.textIndent = '-9999px';
   a.textContent = desc;
   point.appendChild(a);
   var tt = document.createElement('span');
   tt.className = 'tooltip';
   tt.textContent = desc;
   point.appendChild(tt);
   wrapper.appendChild(point);
 });

})(); </script>