MediaWiki:Gadget-responsiveimagemap.js: Difference between revisions

Latest revision as of 19:48, 27 May 2025

(function () {
    'use strict';

    function resizeImageMap(container) {
        const img = container.querySelector('img');
        const map = container.querySelector('map');
        if (!img || !map) return;

        const originalWidth = parseInt(img.dataset.fileWidth, 10);
        const originalHeight = parseInt(img.dataset.fileHeight, 10);

        const currentWidth = img.clientWidth;
        const currentHeight = img.clientHeight;

        const scaleX = currentWidth / originalWidth;
        const scaleY = currentHeight / originalHeight;

        map.querySelectorAll('area').forEach(area => {
            const originalCoords = area.dataset.originalCoords;
            if (!originalCoords) return;

            const coords = originalCoords.split(',').map(Number);
            const newCoords = coords.map((value, index) =>
                index % 2 === 0
                    ? Math.round(value * scaleX)
                    : Math.round(value * scaleY)
            );
            area.coords = newCoords.join(',');
        });
    }

    function initResponsiveImageMaps() {
        document.querySelectorAll('.responsive-imagemap').forEach(container => {
            const map = container.querySelector('map');
            if (!map) return;

            map.querySelectorAll('area').forEach(area => {
                if (!area.dataset.originalCoords) {
                    area.dataset.originalCoords = area.coords;
                }
            });

            const img = container.querySelector('img');
            if (!img) return;

            // Resize on load and on resize
            img.addEventListener('load', () => resizeImageMap(container));
            window.addEventListener('resize', () => resizeImageMap(container));

            // Initial resize
            resizeImageMap(container);
        });
    }

    // Wait for DOM and images to be ready
    if (document.readyState === 'complete') {
        initResponsiveImageMaps();
    } else {
        window.addEventListener('load', initResponsiveImageMaps);
    }
})();

@@ Line 1: / Line 1: @@
-;(function(window, $, mw) {
+(function () {
-     if (window.responsiveImageMapLoaded) return;
+     'use strict';
-    window.responsiveImageMapLoaded = true;
-     function rwdImageMap($img) {
+     function resizeImageMap(container) {
-         $img.each(function() {
+         const img = container.querySelector('img');
-            var that = this;
+        const map = container.querySelector('map');
-            var $that = $(that);
+        if (!img || !map) return;
-            // Only proceed if the image has a usemap attribute
+        const originalWidth = parseInt(img.dataset.fileWidth, 10);
-            if (typeof($(this).attr('usemap')) === 'undefined') return;
+        const originalHeight = parseInt(img.dataset.fileHeight, 10);
-            // Handle WebKit image load issues by using onload
+        const currentWidth = img.clientWidth;
-            var $realImage = $('<img />');
+        const currentHeight = img.clientHeight;
-            $realImage.on('load', function() {
-                var attrW = 'width', attrH = 'height';
-                var w = $that.attr(attrW), h = $that.attr(attrH);
-                // Fallback if width/height attributes are missing
+        const scaleX = currentWidth / originalWidth;
-                if (!w || !h) {
+        const scaleY = currentHeight / originalHeight;
-                    var temp = new Image();
-                    temp.src = $that.attr('src');
-                    if (!w) w = temp.width;
-                    if (!h) h = temp.height;
-                }
-                var wPercent = $that.width() / 100,
+        map.querySelectorAll('area').forEach(area => {
-                    hPercent = $that.height() / 100,
+            const originalCoords = area.dataset.originalCoords;
-                    map = $that.attr('usemap').replace('#', ''),
+            if (!originalCoords) return;
-                    c = 'coords';
-                // Update each area element's coordinates within the map
+            const coords = originalCoords.split(',').map(Number);
-                $that.siblings('map[name="' + map + '"]').find('area').each(function() {
+            const newCoords = coords.map((value, index) =>
-                     var $this = $(this);
+                index % 2 === 0
-                     if (!$this.data(c))
+                     ? Math.round(value * scaleX)
-                        $this.data(c, $this.attr(c));
+                     : Math.round(value * scaleY)
+            );
+            area.coords = newCoords.join(',');
+        });
+    }
-                    var coords = $this.data(c).split(','),
+    function initResponsiveImageMaps() {
-                        coordsPercent = [];
+        document.querySelectorAll('.responsive-imagemap').forEach(container => {
+            const map = container.querySelector('map');
+            if (!map) return;
-                    for (var i = 0; i < coords.length; ++i) {
+            map.querySelectorAll('area').forEach(area => {
-                        // Recalculate each coordinate based on image scaling
+                if (!area.dataset.originalCoords) {
-                        if (i % 2 === 0) {
+                    area.dataset.originalCoords = area.coords;
-                            // Adjust the x coordinate
+                }
-                            coordsPercent[i] = parseInt(((coords[i] / w) * 100) * wPercent);
+            });
-                        } else {
-                            // Adjust the y coordinate
-                            coordsPercent[i] = parseInt(((coords[i] / h) * 100) * hPercent);
-                        }
-                    }
-                    // Log out the adjusted coordinates for debugging
+            const img = container.querySelector('img');
-                    console.log("Updated coordinates for area:", coordsPercent);
+            if (!img) return;
-                    // Update the area element's coords with recalculated coordinates
+            // Resize on load and on resize
-                    $this.attr(c, coordsPercent.join(','));
+            img.addEventListener('load', () => resizeImageMap(container));
-                });
+             window.addEventListener('resize', () => resizeImageMap(container));
-             }).attr('src', $that.attr('src')); // Trigger image load
+            // Initial resize
+            resizeImageMap(container);
          });
      }
-     // Trigger on page load
+     // Wait for DOM and images to be ready
-     mw.hook('wikipage.content').add(function($e) {
+     if (document.readyState === 'complete') {
-        var $img = $e.find('.responsive-imagemap .noresize:not(.made-responsive)')
+         initResponsiveImageMaps();
-            .css({'width': '', 'height': ''})
+     } else {
-            .addClass('made-responsive')
+        window.addEventListener('load', initResponsiveImageMaps);
-            .find('img[usemap]');
+     }
+})();
-         rwdImageMap($img);
-     });
-    // Trigger on window resize
-    $(window).resize(function() {
-        rwdImageMap($('.responsive-imagemap .made-responsive img[usemap]'));
-     });
-})(this, jQuery, mediaWiki);