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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="map-wrapper" id="map-{{widget.id}}" style="width: {{{attributes.width|600px}}};">
<div class="map-wrapper" id="map-{{{id}}}" style="width: {{{width|600px}}};">
   <img
   <img
     src="{{fullurl:Arquivo:{{{attributes.image}}}}"
     src="{{fullurl:Arquivo:{{{image}}}}"
     alt="Mapa de teste"
     alt="Mapa"
     style="width:100%;" />
     style="width:100%;" />
</div>
</div>
Linha 8: Linha 8:
<script>
<script>
(function() {
(function() {
  var id = '{{widget.id}}';
   var wrapper = document.getElementById('map-{{{id}}}');
   var wrapper = document.getElementById('map-' + id);
   if (!wrapper) return;
   if (!wrapper) return;


   var pointsStr = {{{attributes.points|""|json}}};
   var pointsStr = '{{{points}}}';
  // 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) {
   pointsStr.split(';').forEach(function(item) {
     item = item.trim();
     item = item.trim();
     if (!item) return;
     if (!item) return;
     var parts = item.split('|');
     var parts = item.split('|');
     if (parts.length < 4) return;
     if (parts.length < 4) return;
Linha 38: Linha 33:
     a.style.width = '100%';
     a.style.width = '100%';
     a.style.height = '100%';
     a.style.height = '100%';
    // podemos esconder o texto, pois só queremos o clique
     a.style.textIndent = '-9999px';
     a.style.textIndent = '-9999px';
     a.textContent = desc;
     a.textContent = desc;

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

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

<script> (function() {

 var wrapper = document.getElementById('map-{{{id}}}');
 if (!wrapper) return;
 var pointsStr = '{{{points}}}';
 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%';
   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>