Mudanças entre as edições de "Widget:Teste"
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}}};"> | ||
<img | |||
src="{{fullurl:Arquivo:{{{attributes.image}}}}" | |||
alt="Mapa de teste" | |||
style="width:100%;" /> | |||
</div> | |||
<script> | |||
(function() { | |||
var id = '{{widget.id}}'; | |||
var wrapper = document.getElementById('map-' + id); | |||
if (!wrapper) return; | |||
/ | var pointsStr = {{{attributes.points|""|json}}}; | ||
// 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> | </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>