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 () {
-* rwdImageMaps jQuery plugin v1.6
+    'use strict';
-*
-* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
-*
-* Copyright (c) 2016 Matt Stow
-* https://github.com/stowball/jQuery-rwdImageMaps
-* http://mattstow.com
-* Licensed under the MIT license
-*
-*
-* Modified by HumansCanWinElves to fit better for Fandom wikis
-*
-*/
-/*
+    function resizeImageMap(container) {
-	The MIT License (MIT)
+        const img = container.querySelector('img');
+        const map = container.querySelector('map');
-	Copyright (c) 2016 Matt Stow
+        if (!img || !map) return;
-	Permission is hereby granted, free of charge, to any person obtaining a copy of
-	this software and associated documentation files (the "Software"), to deal in
-	the Software without restriction, including without limitation the rights to
-	use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-	the Software, and to permit persons to whom the Software is furnished to do so,
-	subject to the following conditions:
-	The above copyright notice and this permission notice shall be included in all
-	copies or substantial portions of the Software.
-	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-	FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-	COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-	IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-	CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-;(function(window, $, mw) {
+        const originalWidth = parseInt(img.dataset.fileWidth, 10);
-	if (window.responsiveImageMapLoaded) return;
+        const originalHeight = parseInt(img.dataset.fileHeight, 10);
-	window.responsiveImageMapLoaded = true;
-	function rwdImageMap($img) {
-		$img.each(function() {
-			if (typeof($(this).attr('usemap')) == 'undefined')
-				return;
-			var that = this,
+        const currentWidth = img.clientWidth;
-				$that = $(that);
+        const currentHeight = img.clientHeight;
-			// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
+        const scaleX = currentWidth / originalWidth;
-			$('<img />').on('load', function() {
+        const scaleY = currentHeight / originalHeight;
-				var attrW = 'width',
-					attrH = 'height',
-					w = $that.attr(attrW),
-					h = $that.attr(attrH);
-				if (!w || !h) {
+        map.querySelectorAll('area').forEach(area => {
-					var temp = new Image();
+            const originalCoords = area.dataset.originalCoords;
-					temp.src = $that.attr('src');
+            if (!originalCoords) return;
-					if (!w)
-						w = temp.width;
-					if (!h)
-						h = temp.height;
-				}
-				var wPercent = $that.width()/100,
+            const coords = originalCoords.split(',').map(Number);
-					hPercent = $that.height()/100,
+            const newCoords = coords.map((value, index) =>
-					map = $that.attr('usemap').replace('#', ''),
+                index % 2 === 0
-					c = 'coords';
+                    ? Math.round(value * scaleX)
+                    : Math.round(value * scaleY)
+            );
+            area.coords = newCoords.join(',');
+        });
+    }
-				// The ImageMap MediaWiki extension uses the same map name for
+    function initResponsiveImageMaps() {
-				// identical maps on different images (probably the result of
+        document.querySelectorAll('.responsive-imagemap').forEach(container => {
-				// a hash function). As such, the manipulation must be limited
+            const map = container.querySelector('map');
-				// not only by the map name but also to only sibling map
+            if (!map) return;
-				$that.siblings('map[name="' + map + '"]').find('area').each(function() {
-					var $this = $(this);
-					if (!$this.data(c))
-						$this.data(c, $this.attr(c));
-					var coords = $this.data(c).split(','),
+            map.querySelectorAll('area').forEach(area => {
-						coordsPercent = new Array(coords.length);
+                if (!area.dataset.originalCoords) {
+                    area.dataset.originalCoords = area.coords;
+                }
+            });
-					for (var i = 0; i < coordsPercent.length; ++i) {
+            const img = container.querySelector('img');
-						if (i % 2 === 0)
+            if (!img) return;
-							coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
-						else
-							coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
-					}
-					$this.attr(c, coordsPercent.toString());
-				});
-			}).attr('src', $that.attr('src'));
-		});
-	}
-	mw.hook('wikipage.content').add(function($e) {
+            // Resize on load and on resize
-	    var $img =
+            img.addEventListener('load', () => resizeImageMap(container));
-		    $e.find('.responsive-imagemap .noresize:not(.made-responsive)').css({
+            window.addEventListener('resize', () => resizeImageMap(container));
-		        'width': '',
-		        'height': ''
-		    })
-		    .addClass('made-responsive')
-		    .find('img[usemap]');
-		rwdImageMap($img);
-	});
-	$(window).resize(function() {
-		rwdImageMap($('.responsive-imagemap .made-responsive img[usemap]'));
-	});
-})(this, jQuery, mediaWiki);
+            // Initial resize
+            resizeImageMap(container);
+        });
+    }
+    // Wait for DOM and images to be ready
+    if (document.readyState === 'complete') {
+        initResponsiveImageMaps();
+    } else {
+        window.addEventListener('load', initResponsiveImageMaps);
+    }
+})();