https://arporn.com/scripts/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'
10    ? (module.exports = factory())
11    : typeof define === 'function' && define.amd
12    ? define(factory)
13    : ((global = global || self), (global.ImageMap = factory()))
14})(this, function () {
15  'use strict'
16
17  function _classCallCheck(instance, Constructor) {
18    if (!(instance instanceof Constructor)) {
19      throw new TypeError('Cannot call a class as a function')
20    }
21  }
22
23  function _defineProperties(target, props) {
24    for (let i = 0; i < props.length; i++) {
25      const descriptor = props[i]
26      descriptor.enumerable = descriptor.enumerable || false
27      descriptor.configurable = true
28      if ('value' in descriptor) descriptor.writable = true
29      Object.defineProperty(target, descriptor.key, descriptor)
30    }
31  }
32
33  function _createClass(Constructor, protoProps, staticProps) {
34    if (protoProps) _defineProperties(Constructor.prototype, protoProps)
35    if (staticProps) _defineProperties(Constructor, staticProps)
36    return Constructor
37  }
38
39  const version = '2.0.1'
40
41  const RESIZE = 'resize'
42  const LOAD = 'load'
43  const USEMAP = 'usemap'
44  const COORDS = 'coords'
45  const COMPLETE = 'complete'
46  /**
47   * ImageMap main library constructor
48   *
49   * @param selector {string} CSS selector
50   * @param wait {number} [wait=500] debounce wait interval
51   * @constructor
52   */
53
54  const ImageMap = /* #__PURE__ */ (function () {
55    function ImageMap(selector, wait) {
56      _classCallCheck(this, ImageMap)
57
58      this.selector = Array.isArray(selector) ? selector : document.querySelectorAll(selector)
59      if (document.readyState !== COMPLETE) window.addEventListener(LOAD, this.update.bind(this))
60      else this.update()
61      window.addEventListener(RESIZE, this.debounce(this.update, wait).bind(this))
62    }
63
64    _createClass(
65      ImageMap,
66      [
67        {
68          key: 'update',
69
70          /**
71           * Update
72           */
73          value: function update() {
74            const imgs = this.selector
75
76            for (let i = 0; i < imgs.length; i++) {
77              const img = imgs[i]
78              if (img.getAttribute(USEMAP) === undefined) return
79              const newImg = img.cloneNode()
80              newImg.addEventListener(LOAD, this.handleImageLoad(img.offsetWidth, img.offsetHeight))
81              newImg.src = img.src // required for IE
82            }
83          },
84          /**
85           * Debounce
86           *
87           * @param {function} func
88           * @param {number} [wait=500]
89           */
90        },
91        {
92          key: 'debounce',
93          value: function debounce(func) {
94            const _this = this
95
96            const wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500
97            let timeout
98            return function () {
99              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
100                args[_key] = arguments[_key]
101              }
102
103              window.clearTimeout(timeout)
104              timeout = window.setTimeout(
105                function (ctx) {
106                  return func.apply(ctx, args)
107                },
108                wait,
109                _this,
110              )
111            }
112          },
113          /**
114           * handleImageLoad
115           *
116           * @param {number} [offsetWidth=0]
117           * @param {number} [offsetHeight=0]
118           */
119        },
120        {
121          key: 'handleImageLoad',
122          value: function handleImageLoad() {
123            const offsetWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0
124            const offsetHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0
125            return function (e) {
126              const w = e.target.width
127              const h = e.target.height
128              const mapName = e.target.getAttribute(USEMAP).replace(/^#/, '')
129              const areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName))
130
131              const _loop = function _loop(i) {
132                const area = areas[i]
133                const coordsString = (area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS))
134                const coordsArrayOld = coordsString.split(',')
135                const coordsArrayNew = coordsArrayOld.map(function (_, i) {
136                  // Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset)
137                  return i % 2 === 0
138                    ? Number((coordsArrayOld[i] / w) * offsetWidth)
139                    : Number((coordsArrayOld[i] / h) * offsetHeight)
140                })
141                area.setAttribute(COORDS, coordsArrayNew.toString())
142              }
143
144              for (let i = 0; i < areas.length; i++) {
145                _loop(i)
146              }
147            }
148          },
149        },
150      ],
151      [
152        {
153          key: 'genAreaSelector',
154          value: function genAreaSelector(mapName) {
155            return 'map[name="'.concat(mapName, '"] area')
156          },
157        },
158      ],
159    )
160
161    return ImageMap
162  })()
163
164  function _ImageMap(selector, wait) {
165    return new ImageMap(selector, wait)
166  }
167
168  _ImageMap.VERSION = version
169
170  return _ImageMap
171})