https://atelier-21.net/javascript/image-map.js

1/**
2 * Copyright (c) 2020, Travis Clarke (https://www.travismclarke.com/)
3 *
4 * This source code is licensed under the Apache-2.0 license found in the
5 * LICENSE file in the root directory of this source tree.
6 */
7
8(function (global, factory) {
9	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
10		typeof define === 'function' && define.amd ? define(factory) :
11			(global = global || self, global.ImageMap = factory());
12}(this, (function () {
13	'use strict';
14
15	function _classCallCheck(instance, Constructor) {
16		if (!(instance instanceof Constructor)) {
17			throw new TypeError("Cannot call a class as a function");
18		}
19	}
20
21	function _defineProperties(target, props) {
22		for (var i = 0; i < props.length; i++) {
23			var descriptor = props[i];
24			descriptor.enumerable = descriptor.enumerable || false;
25			descriptor.configurable = true;
26			if ("value" in descriptor) descriptor.writable = true;
27			Object.defineProperty(target, descriptor.key, descriptor);
28		}
29	}
30
31	function _createClass(Constructor, protoProps, staticProps) {
32		if (protoProps) _defineProperties(Constructor.prototype, protoProps);
33		if (staticProps) _defineProperties(Constructor, staticProps);
34		return Constructor;
35	}
36
37	var version = "2.0.1";
38
39	var RESIZE = "resize";
40	var LOAD = "load";
41	var USEMAP = "usemap";
42	var COORDS = "coords";
43	var COMPLETE = "complete";
44	/**
45	 * ImageMap main library constructor
46	 *
47	 * @param selector {string} CSS selector
48	 * @param wait {number} [wait=500] debounce wait interval
49	 * @constructor
50	 */
51
52	var ImageMap = /*#__PURE__*/function () {
53		function ImageMap(selector, wait) {
54			_classCallCheck(this, ImageMap);
55
56			this.selector = selector instanceof Array ? selector : document.querySelectorAll(selector);
57			if (document.readyState !== COMPLETE) window.addEventListener(LOAD, this.update.bind(this)); else this.update();
58			window.addEventListener(RESIZE, this.debounce(this.update, wait).bind(this));
59		}
60
61		_createClass(ImageMap, [{
62			key: "update",
63
64			/**
65			 * Update
66			 */
67			value: function update() {
68				var imgs = this.selector;
69
70				for (var i = 0; i < imgs.length; i++) {
71					var img = imgs[i];
72					if (img.getAttribute(USEMAP) === undefined) return;
73					var newImg = img.cloneNode();
74					newImg.addEventListener(LOAD, this.handleImageLoad(img.offsetWidth, img.offsetHeight));
75					newImg.src = img.src; // required for IE
76				}
77			}
78			/**
79			 * Debounce
80			 *
81			 * @param {function} func
82			 * @param {number} [wait=500]
83			 */
84
85		}, {
86			key: "debounce",
87			value: function debounce(func) {
88				var _this = this;
89
90				var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
91				var timeout;
92				return function () {
93					for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
94						args[_key] = arguments[_key];
95					}
96
97					window.clearTimeout(timeout);
98					timeout = window.setTimeout(function (ctx) {
99						return func.apply(ctx, args);
100					}, wait, _this);
101				};
102			}
103			/**
104			 * handleImageLoad
105			 *
106			 * @param {number} [offsetWidth=0]
107			 * @param {number} [offsetHeight=0]
108			 */
109
110		}, {
111			key: "handleImageLoad",
112			value: function handleImageLoad() {
113				var offsetWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
114				var offsetHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
115				return function (e) {
116					var w = e.target.width;
117					var h = e.target.height;
118					var mapName = e.target.getAttribute(USEMAP).replace(/^#/, "");
119					var areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName));
120
121					var _loop = function _loop(i) {
122						var area = areas[i];
123						var coordsString = area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS);
124						var coordsArrayOld = coordsString.split(",");
125						var coordsArrayNew = coordsArrayOld.map(function (_, i) {
126							// Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset)
127							return i % 2 === 0 ? Number(coordsArrayOld[i] / w * offsetWidth) : Number(coordsArrayOld[i] / h * offsetHeight);
128						});

129						area.setAttribute(COORDS, coordsArrayNew.toString());
130					};
131
132					for (var i = 0; i < areas.length; i++) {
133						_loop(i);
134					}
135				};
136			}
137		}], [{
138			key: "genAreaSelector",
139			value: function genAreaSelector(mapName) {
140				return "map[name=\"".concat(mapName, "\"] area");
141			}
142		}]);
143
144		return ImageMap;
145	}();
146
147	function _ImageMap(selector, wait) {
148		return new ImageMap(selector, wait);
149	}
150
151	_ImageMap.VERSION = version;
152
153	return _ImageMap;
154
155})));