MediaWiki:Common.js: Diferență între versiuni
m |
m |
||
Linia 147: | Linia 147: | ||
images.forEach(img => { | images.forEach(img => { | ||
− | // | + | // Create a container for the overlay |
const container = document.createElement('div'); | const container = document.createElement('div'); | ||
container.classList.add('overlay-container'); | container.classList.add('overlay-container'); | ||
Linia 155: | Linia 155: | ||
container.appendChild(img); | container.appendChild(img); | ||
+ | // Parse the data from the alt attribute | ||
const dataAttributes = img.alt.split('|').slice(1); // Ignore the first value (image name) | const dataAttributes = img.alt.split('|').slice(1); // Ignore the first value (image name) | ||
Linia 163: | Linia 164: | ||
const [x, y, radius] = coords.split(',').map(Number); | const [x, y, radius] = coords.split(',').map(Number); | ||
− | // Create the overlay point | + | // Create the overlay point (circle) |
const overlayPoint = document.createElement('div'); | const overlayPoint = document.createElement('div'); | ||
overlayPoint.classList.add('overlay-point'); | overlayPoint.classList.add('overlay-point'); | ||
Linia 171: | Linia 172: | ||
overlayPoint.style.height = radius * 2 + 'px'; | overlayPoint.style.height = radius * 2 + 'px'; | ||
− | // Create the clickable link | + | // Create the clickable link inside the circle |
const anchor = document.createElement('a'); | const anchor = document.createElement('a'); | ||
anchor.href = `/index.php/${link}`; | anchor.href = `/index.php/${link}`; | ||
anchor.title = link; | anchor.title = link; | ||
− | anchor.textContent = link; | + | anchor.textContent = link; // Show the link text on hover |
− | // Append the link to the overlay point | + | // Append the link to the overlay point |
overlayPoint.appendChild(anchor); | overlayPoint.appendChild(anchor); | ||
+ | |||
+ | // Append the overlay point to the container | ||
container.appendChild(overlayPoint); | container.appendChild(overlayPoint); | ||
} | } | ||
Linia 185: | Linia 188: | ||
} | } | ||
+ | // Call the function to apply the overlay | ||
addOverlayFromImage(); | addOverlayFromImage(); | ||
}); | }); |
Versiunea de la data 26 septembrie 2024 19:20
(function () {
// Load GDPR Cookie Script
var req = new XMLHttpRequest();
req.addEventListener('load', function (ev) {
if (this.status >= 200 && this.status < 300) {
var data = JSON.parse(this.responseText);
if (data.hasOwnProperty('version')) {
var gdpr = document.createElement("script");
gdpr.src = "https://s3-static.geo.gfsrv.net/cookiebanner/" + data.version + "/cookie.min.js";
document.head.appendChild(gdpr);
}
}
});
req.open('GET', "https://s3-static.geo.gfsrv.net/cookiebanner/version.json");
req.send();
})();
(function () {
mw.hook('wikipage.content').add(function() {
var selectedMonster = null;
var selectedCategory = 'Weapondrops';
function showLoot(monster, category) {
var lootList = document.getElementById('loot-list');
if (!lootList) return;
lootList.innerHTML = '';
var apiUrl = 'https://ro-wiki.metin2.gameforge.com/api.php?action=parse&page=' + encodeURIComponent(monster) + '&prop=wikitext&format=json&origin=*';
fetch(apiUrl)
.then(function(response) {
if (!response.ok) {
throw new Error('Network response was not ok: ' + response.statusText);
}
return response.json();
})
.then(function(data) {
if (data.parse && data.parse.wikitext) {
var wikitext = data.parse.wikitext['*'];
var drops = {
Weapondrops: [],
Armordrops: [],
Otherdrops: []
};
['Weapondrops', 'Armordrops', 'Otherdrops'].forEach(function(dropType) {
var regex = new RegExp('\\|' + dropType + '\\s*=([\\s\\S]*?)(?=(\\n\\|\\w+\\s*=|$))', 'i');
var match = wikitext.match(regex);
if (match && match[1].trim()) {
var items = match[1].trim().split(/\n\s*[:*]\s*/);
drops[dropType] = items.map(function(item) {
var textMatch = item.match(/\{\{Ti\|[^}]+\}\}/);
if (textMatch) {
var linkTextMatch = textMatch[0].match(/\|\s*([^|}]+)\s*\}\}/);
if (linkTextMatch) {
return linkTextMatch[1].trim();
}
}
return null;
}).filter(Boolean);
}
});
var itemsToDisplay = drops[category] || [];
itemsToDisplay.forEach(function(item) {
var li = document.createElement('li');
li.classList.add('loot-list-item');
var link = document.createElement('a');
link.textContent = item;
link.href = 'https://ro-wiki.metin2.gameforge.com/index.php/' + encodeURIComponent(item);
link.target = '_blank';
link.style.color = 'white';
li.appendChild(link);
lootList.appendChild(li);
});
if (lootList.children.length === 0) {
var li = document.createElement('li');
li.textContent = 'Nu am gasit nimic pentru aceasta categorie.';
li.classList.add('loot-list-item');
lootList.appendChild(li);
}
} else {
console.error('Unexpected data format:', data);
}
});
}
function updateHighlighting() {
var monsterItems = document.querySelectorAll('#monster-list li');
monsterItems.forEach(function(item) {
item.classList.remove('selected');
if (item.getAttribute('data-monster') === selectedMonster) {
item.classList.add('selected');
}
});
var categoryItems = document.querySelectorAll('#category-list li');
categoryItems.forEach(function(item) {
item.classList.remove('selected');
if (item.getAttribute('data-category') === selectedCategory) {
item.classList.add('selected');
}
});
}
var monsterItems = document.querySelectorAll('#monster-list li');
monsterItems.forEach(function(item) {
item.addEventListener('click', function() {
selectedMonster = item.getAttribute('data-monster');
selectedCategory = 'Weapondrops';
showLoot(selectedMonster, selectedCategory);
updateHighlighting();
});
});
var categoryItems = document.querySelectorAll('#category-list li');
categoryItems.forEach(function(item) {
item.addEventListener('click', function() {
selectedCategory = item.getAttribute('data-category');
updateHighlighting();
if (selectedMonster) {
showLoot(selectedMonster, selectedCategory);
}
});
});
if (monsterItems.length > 0) {
selectedMonster = monsterItems[0].getAttribute('data-monster');
showLoot(selectedMonster, selectedCategory);
updateHighlighting();
}
});
})();
document.addEventListener("DOMContentLoaded", function() {
// Function to parse the image attributes and add overlay points
function addOverlayFromImage() {
// Find all images with the class "base-image"
const images = document.querySelectorAll('img.base-image');
images.forEach(img => {
// Create a container for the overlay
const container = document.createElement('div');
container.classList.add('overlay-container');
// Wrap the image in the container
img.parentNode.insertBefore(container, img);
container.appendChild(img);
// Parse the data from the alt attribute
const dataAttributes = img.alt.split('|').slice(1); // Ignore the first value (image name)
dataAttributes.forEach(data => {
const [coords, link] = data.split('|'); // Split into coordinates and link
if (coords && link) {
const [x, y, radius] = coords.split(',').map(Number);
// Create the overlay point (circle)
const overlayPoint = document.createElement('div');
overlayPoint.classList.add('overlay-point');
overlayPoint.style.top = y + 'px';
overlayPoint.style.left = x + 'px';
overlayPoint.style.width = radius * 2 + 'px';
overlayPoint.style.height = radius * 2 + 'px';
// Create the clickable link inside the circle
const anchor = document.createElement('a');
anchor.href = `/index.php/${link}`;
anchor.title = link;
anchor.textContent = link; // Show the link text on hover
// Append the link to the overlay point
overlayPoint.appendChild(anchor);
// Append the overlay point to the container
container.appendChild(overlayPoint);
}
});
});
}
// Call the function to apply the overlay
addOverlayFromImage();
});