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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Linha 1: Linha 1:
<div class="map-wrapper" id="map-{{{id}}}" style="width: {{{width|600px}}};">
<div class="map-container" id="map"></div>
   <img
 
    src="{{fullurl:Arquivo:{{{image}}}}"
<script type="application/json" id="mapa-dados">
    alt="Mapa"
   {{#invoke:Teste|data|mapa={{{mapa|Teste}}} }}
    style="width:100%;" />
</script>
</div>


<script>
<script>
(function() {
const data = JSON.parse(document.getElementById('mapa-dados').textContent);
  var wrapper = document.getElementById('map-{{{id}}}');
const skulls = data.skulls || [];
  if (!wrapper) return;
const hearts = data.hearts || [];
const puzzleButton = data.puzzle || {};
const map = document.getElementById("map");


  var pointsStr = '{{{points}}}';
// SKULLS
  pointsStr.split(';').forEach(function(item) {
skulls.forEach((skull, index) => {
    item = item.trim();
  const icon = document.createElement("img");
    if (!item) return;
  icon.src = "/images/d/dc/Whiteskull.png";
    var parts = item.split('|');
  icon.className = "skull-icon";
    if (parts.length < 4) return;
  icon.style.left = skull.x + "px";
  icon.style.top = skull.y + "px";


    var x = parseInt(parts[0].trim(), 10);
  const popup = document.createElement("div");
    var y = parseInt(parts[1].trim(), 10);
  popup.className = "popup";
    var desc = parts[2].trim();
  popup.innerHTML = `<strong>${skull.title}</strong><br>${skull.desc}`;
    var target = parts[3].trim();
  popup.style.left = (skull.x + 30) + "px";
  popup.style.top = (skull.y - 10) + "px";


    var point = document.createElement('span');
  icon.addEventListener("click", () => {
    point.className = 'map-point';
     popup.style.display = popup.style.display === "block" ? "none" : "block";
     point.style.top = y + 'px';
  });
    point.style.left = x + 'px';


    var a = document.createElement('a');
  document.addEventListener("click", (e) => {
     a.href = mw.util.getUrl(target);
     if (!icon.contains(e.target) && !popup.contains(e.target)) {
    a.style.display = 'block';
      popup.style.display = "none";
     a.style.width = '100%';
     }
    a.style.height = '100%';
  });
    a.style.textIndent = '-9999px';
    a.textContent = desc;
    point.appendChild(a);


    var tt = document.createElement('span');
  map.appendChild(icon);
    tt.className = 'tooltip';
  map.appendChild(popup);
    tt.textContent = desc;
});
    point.appendChild(tt);


     wrapper.appendChild(point);
// HEARTS
hearts.forEach((heart, index) => {
  const icon = document.createElement("img");
  const desc = heart.desc || "Pegue o coração para se curar";
  icon.src = "/images/d/d9/Heart.png";
  icon.className = "heart-icon";
  icon.style.left = heart.x + "px";
  icon.style.top = heart.y + "px";
 
  const popup = document.createElement("div");
  popup.className = "popup";
  popup.innerHTML = `<strong>Cura</strong><br>${desc}`;
  popup.style.left = (heart.x + 30) + "px";
  popup.style.top = (heart.y - 10) + "px";
 
  icon.addEventListener("click", () => {
    popup.style.display = popup.style.display === "block" ? "none" : "block";
  });
 
  document.addEventListener("click", (e) => {
     if (!icon.contains(e.target) && !popup.contains(e.target)) {
      popup.style.display = "none";
    }
   });
   });
})();
 
  map.appendChild(icon);
  map.appendChild(popup);
});
 
// PUZZLE
const button = document.createElement("img");
button.className = "puzzle-button";
button.src = "/images/d/de/Engrenagem.png";
button.style.left = puzzleButton.x + "px";
button.style.top = puzzleButton.y + "px";
 
const popup = document.createElement("div");
popup.className = "popup";
popup.style.left = (puzzleButton.x + 60) + "px";
popup.style.top = (puzzleButton.y - 10) + "px";
popup.innerHTML = `<strong>Desafio Puzzle</strong><br>
<iframe width="400" height="260"
  src="${puzzleButton.videoUrl}"
  frameborder="0" allowfullscreen></iframe>`;
 
button.addEventListener("click", () => {
  popup.style.display = popup.style.display === "block" ? "none" : "block";
});
document.addEventListener("click", (e) => {
  if (!button.contains(e.target) && !popup.contains(e.target)) {
    popup.style.display = "none";
  }
});
 
map.appendChild(button);
map.appendChild(popup);
</script>
</script>
<style>
.map-container {
  position: relative;
  width: 811px;
  height: 554px;
  background: url('/images/5/55/SabaodyMap.png') no-repeat center center;
  background-size: cover;
}
.skull-icon, .heart-icon, .puzzle-button {
  position: absolute;
  width: 26px;
  height: 26px;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}
.popup {
  position: absolute;
  background: #1e1e1e;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #444;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  display: none;
  z-index: 10;
  max-width: 500px;
  font-size: 14px;
}
.popup iframe {
  border-radius: 6px;
  margin-top: 6px;
  max-width: 100%;
}
.skull-icon:hover,
.heart-icon:hover,
.puzzle-button:hover {
  transform: scale(1.3);
  filter: brightness(1.5);
}
</style>

Edição das 03h16min de 18 de junho de 2025

<script type="application/json" id="mapa-dados"> 

 Erro de script: A função "data" não existe.

</script>

<script> const data = JSON.parse(document.getElementById('mapa-dados').textContent); const skulls = data.skulls || []; const hearts = data.hearts || []; const puzzleButton = data.puzzle || {}; const map = document.getElementById("map");

// SKULLS skulls.forEach((skull, index) => { 

 const icon = document.createElement("img");
 icon.src = "/images/d/dc/Whiteskull.png";
 icon.className = "skull-icon";
 icon.style.left = skull.x + "px";
 icon.style.top = skull.y + "px";

 const popup = document.createElement("div");
 popup.className = "popup";
 popup.innerHTML = `${skull.title}
${skull.desc}`;
 popup.style.left = (skull.x + 30) + "px";
 popup.style.top = (skull.y - 10) + "px";

 icon.addEventListener("click", () => {
   popup.style.display = popup.style.display === "block" ? "none" : "block";
 });

 document.addEventListener("click", (e) => {
   if (!icon.contains(e.target) && !popup.contains(e.target)) {
     popup.style.display = "none";
   }
 });

 map.appendChild(icon);
 map.appendChild(popup);

});

// HEARTS hearts.forEach((heart, index) => { 

 const icon = document.createElement("img");
 const desc = heart.desc || "Pegue o coração para se curar";
 icon.src = "/images/d/d9/Heart.png";
 icon.className = "heart-icon";
 icon.style.left = heart.x + "px";
 icon.style.top = heart.y + "px";

 const popup = document.createElement("div");
 popup.className = "popup";
 popup.innerHTML = `Cura
${desc}`;
 popup.style.left = (heart.x + 30) + "px";
 popup.style.top = (heart.y - 10) + "px";

 icon.addEventListener("click", () => {
   popup.style.display = popup.style.display === "block" ? "none" : "block";
 });

 document.addEventListener("click", (e) => {
   if (!icon.contains(e.target) && !popup.contains(e.target)) {
     popup.style.display = "none";
   }
 });

 map.appendChild(icon);
 map.appendChild(popup);

});

// PUZZLE const button = document.createElement("img"); button.className = "puzzle-button"; button.src = "/images/d/de/Engrenagem.png"; button.style.left = puzzleButton.x + "px"; button.style.top = puzzleButton.y + "px";

const popup = document.createElement("div"); popup.className = "popup"; popup.style.left = (puzzleButton.x + 60) + "px"; popup.style.top = (puzzleButton.y - 10) + "px"; popup.innerHTML = `Desafio Puzzle
<iframe width="400" height="260" 

 src="${puzzleButton.videoUrl}"
 frameborder="0" allowfullscreen></iframe>`;

button.addEventListener("click", () => { 

 popup.style.display = popup.style.display === "block" ? "none" : "block";

}); document.addEventListener("click", (e) => { 

 if (!button.contains(e.target) && !popup.contains(e.target)) {
   popup.style.display = "none";
 }

});

map.appendChild(button); map.appendChild(popup); </script>

<style> .map-container { 

 position: relative;
 width: 811px;
 height: 554px;
 background: url('/images/5/55/SabaodyMap.png') no-repeat center center;
 background-size: cover;

}

.skull-icon, .heart-icon, .puzzle-button { 

 position: absolute;
 width: 26px;
 height: 26px;
 cursor: pointer;
 transition: transform 0.2s, filter 0.2s;

}

.popup { 

 position: absolute;
 background: #1e1e1e;
 color: #fff;
 padding: 10px 14px;
 border-radius: 8px;
 border: 1px solid #444;
 box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
 display: none;
 z-index: 10;
 max-width: 500px;
 font-size: 14px;

}

.popup iframe { 

 border-radius: 6px;
 margin-top: 6px;
 max-width: 100%;

}

.skull-icon:hover, .heart-icon:hover, .puzzle-button:hover { 

 transform: scale(1.3);
 filter: brightness(1.5);

} </style>

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