MediaWiki:Common.js: Diferență între versiuni

m
m
Linia 141: Linia 141:
  
 
document.addEventListener("DOMContentLoaded", function() {
 
document.addEventListener("DOMContentLoaded", function() {
     console.log("JS Loaded");
+
     console.log("JS Loaded and running");
 +
 
 
     function addOverlayFromImage() {
 
     function addOverlayFromImage() {
 +
        console.log("Executing overlay creation...");
 
         const containers = document.querySelectorAll('.overlay-container');
 
         const containers = document.querySelectorAll('.overlay-container');
  
 
         containers.forEach(container => {
 
         containers.forEach(container => {
 
             const img = container.querySelector('img.base-image');
 
             const img = container.querySelector('img.base-image');
             if (!img) return;
+
             if (!img) {
 +
                console.log("No base image found!");
 +
                return;
 +
            }
 +
 
 +
            const imgWidth = img.width;
 +
            const imgHeight = img.height;
 +
 
 +
            const overlayData = container.getAttribute('data-overlay');
 +
            if (!overlayData) {
 +
                console.log("No overlay data found!");
 +
                return;
 +
            }
  
             // Ensure image has loaded before calculating dimensions
+
             console.log("Overlay Data:", overlayData);
            img.onload = function() {
 
                const imgWidth = img.width;
 
                const imgHeight = img.height;
 
  
                const overlayData = container.getAttribute('data-overlay');
+
            const overlayPoints = overlayData.split(';');
                 if (!overlayData) return;
+
            overlayPoints.forEach(point => {
 +
                 const [x, y, radius, link] = point.split(',');
  
                 const overlayPoints = overlayData.split(';');
+
                 const relativeX = (parseInt(x, 10) / imgWidth) * 100;
                 overlayPoints.forEach(point => {
+
                 const relativeY = (parseInt(y, 10) / imgHeight) * 100;
                    const [x, y, radius, link] = point.split(',');
+
                const relativeRadius = (parseInt(radius, 10) / imgWidth) * 100;
  
                    const relativeX = (parseInt(x, 10) / imgWidth) * 100;
+
                console.log(`Adding point at X: ${relativeX}%, Y: ${relativeY}%, Radius: ${relativeRadius}%`);
                    const relativeY = (parseInt(y, 10) / imgHeight) * 100;
 
                    const relativeRadius = (parseInt(radius, 10) / imgWidth) * 100;
 
  
                    const overlayPoint = document.createElement('div');
+
                const overlayPoint = document.createElement('div');
                    overlayPoint.classList.add('overlay-point');
+
                overlayPoint.classList.add('overlay-point');
                    overlayPoint.style.top = relativeY + '%';
+
                overlayPoint.style.top = relativeY + '%';
                    overlayPoint.style.left = relativeX + '%';
+
                overlayPoint.style.left = relativeX + '%';
                    overlayPoint.style.width = relativeRadius * 2 + '%';
+
                overlayPoint.style.width = relativeRadius * 2 + '%';
                    overlayPoint.style.height = relativeRadius * 2 + '%';
+
                overlayPoint.style.height = relativeRadius * 2 + '%';
  
                    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 = ''; // Optional: Show text or empty
+
                anchor.textContent = link;
  
                    overlayPoint.appendChild(anchor);
+
                overlayPoint.appendChild(anchor);
  
                    container.appendChild(overlayPoint);
+
                container.appendChild(overlayPoint);
                });
+
            });
            };
 
 
         });
 
         });
 
     }
 
     }

Versiunea de la data 26 septembrie 2024 20:12

(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() {
    console.log("JS Loaded and running");

    function addOverlayFromImage() {
        console.log("Executing overlay creation...");
        const containers = document.querySelectorAll('.overlay-container');

        containers.forEach(container => {
            const img = container.querySelector('img.base-image');
            if (!img) {
                console.log("No base image found!");
                return;
            }

            const imgWidth = img.width;
            const imgHeight = img.height;

            const overlayData = container.getAttribute('data-overlay');
            if (!overlayData) {
                console.log("No overlay data found!");
                return;
            }

            console.log("Overlay Data:", overlayData);

            const overlayPoints = overlayData.split(';');
            overlayPoints.forEach(point => {
                const [x, y, radius, link] = point.split(',');

                const relativeX = (parseInt(x, 10) / imgWidth) * 100;
                const relativeY = (parseInt(y, 10) / imgHeight) * 100;
                const relativeRadius = (parseInt(radius, 10) / imgWidth) * 100;

                console.log(`Adding point at X: ${relativeX}%, Y: ${relativeY}%, Radius: ${relativeRadius}%`);

                const overlayPoint = document.createElement('div');
                overlayPoint.classList.add('overlay-point');
                overlayPoint.style.top = relativeY + '%';
                overlayPoint.style.left = relativeX + '%';
                overlayPoint.style.width = relativeRadius * 2 + '%';
                overlayPoint.style.height = relativeRadius * 2 + '%';

                const anchor = document.createElement('a');
                anchor.href = `/index.php/${link}`;
                anchor.title = link;
                anchor.textContent = link;

                overlayPoint.appendChild(anchor);

                container.appendChild(overlayPoint);
            });
        });
    }

    addOverlayFromImage();
});