JAVASCRIPT   30

imageMapResizer

Guest on 13th July 2022 06:47:20 AM

  1. /*! Image Map Resizer
  2.  *  Desc: Resize HTML imageMap to scaled image.
  3.  *  Copyright: (c) David J. Bradshaw - dave@bradshaw.net
  4.  *  License: MIT
  5.  */
  6.  
  7. ;(function() {
  8.   'use strict'
  9.  
  10.   function scaleImageMap() {
  11.     function resizeMap() {
  12.       function resizeAreaTag(cachedAreaCoords, idx) {
  13.         function scale(coord) {
  14.           var dimension = 1 === (isWidth = 1 - isWidth) ? 'width' : 'height'
  15.           return (
  16.             padding[dimension] +
  17.             Math.floor(Number(coord) * scalingFactor[dimension])
  18.           )
  19.         }
  20.  
  21.         var isWidth = 0
  22.         areas[idx].coords = cachedAreaCoords
  23.           .split(',')
  24.           .map(scale)
  25.           .join(',')
  26.       }
  27.  
  28.       var scalingFactor = {
  29.         width: image.width / image.naturalWidth,
  30.         height: image.height / image.naturalHeight,
  31.       }
  32.  
  33.       var padding = {
  34.         width: parseInt(
  35.           window.getComputedStyle(image, null).getPropertyValue('padding-left'),
  36.           10
  37.         ),
  38.         height: parseInt(
  39.           window.getComputedStyle(image, null).getPropertyValue('padding-top'),
  40.           10
  41.         ),
  42.       }
  43.  
  44.       cachedAreaCoordsArray.forEach(resizeAreaTag)
  45.     }
  46.  
  47.     function getCoords(e) {
  48.       //Normalize coord-string to csv format without any space chars
  49.       return e.coords.replace(/ *, */g, ',').replace(/ +/g, ',')
  50.     }
  51.  
  52.     function debounce() {
  53.       clearTimeout(timer)
  54.       timer = setTimeout(resizeMap, 250)
  55.     }
  56.  
  57.     function start() {
  58.       if (
  59.         image.width !== image.naturalWidth ||
  60.         image.height !== image.naturalHeight
  61.       ) {
  62.         resizeMap()
  63.       }
  64.     }
  65.  
  66.     function addEventListeners() {
  67.       image.addEventListener('load', resizeMap, false) //Detect late image loads in IE11
  68.       window.addEventListener('focus', resizeMap, false) //Cope with window being resized whilst on another tab
  69.       window.addEventListener('resize', debounce, false)
  70.       window.addEventListener('readystatechange', resizeMap, false)
  71.       document.addEventListener('fullscreenchange', resizeMap, false)
  72.     }
  73.  
  74.     function beenHere() {
  75.       return 'function' === typeof map._resize
  76.     }
  77.  
  78.     function getImg(name) {
  79.       return document.querySelector('img[usemap="' + name + '"]')
  80.     }
  81.  
  82.     function setup() {
  83.       areas = map.getElementsByTagName('area')
  84.       cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords)
  85.       image = getImg('#' + map.name) || getImg(map.name)
  86.       map._resize = resizeMap //Bind resize method to HTML map element
  87.     }
  88.  
  89.     var /*jshint validthis:true */
  90.       map = this,
  91.       areas = null,
  92.       cachedAreaCoordsArray = null,
  93.       image = null,
  94.       timer = null
  95.  
  96.     if (!beenHere()) {
  97.       setup()
  98.       addEventListeners()
  99.       start()
  100.     } else {
  101.       map._resize() //Already setup, so just resize map
  102.     }
  103.   }
  104.  
  105.   function factory() {
  106.     function chkMap(element) {
  107.       if (!element.tagName) {
  108.         throw new TypeError('Object is not a valid DOM element')
  109.       } else if ('MAP' !== element.tagName.toUpperCase()) {
  110.         throw new TypeError(
  111.           'Expected <MAP> tag, found <' + element.tagName + '>.'
  112.         )
  113.       }
  114.     }
  115.  
  116.     function init(element) {
  117.       if (element) {
  118.         chkMap(element)
  119.         scaleImageMap.call(element)
  120.         maps.push(element)
  121.       }
  122.     }
  123.  
  124.     var maps
  125.  
  126.     return function imageMapResizeF(target) {
  127.       maps = [] // Only return maps from this call
  128.  
  129.       switch (typeof target) {
  130.         case 'undefined':
  131.         case 'string':
  132.           Array.prototype.forEach.call(
  133.             document.querySelectorAll(target || 'map'),
  134.             init
  135.           )
  136.           break
  137.         case 'object':
  138.           init(target)
  139.           break
  140.         default:
  141.           throw new TypeError('Unexpected data type (' + typeof target + ').')
  142.       }
  143.  
  144.       return maps
  145.     }
  146.   }
  147.  
  148.   if (typeof define === 'function' && define.amd) {
  149.     define([], factory)
  150.   } else if (typeof module === 'object' && typeof module.exports === 'object') {
  151.     module.exports = factory() //Node for browserfy
  152.   } else {
  153.     window.imageMapResize = factory()
  154.   }
  155.  
  156.   if ('jQuery' in window) {
  157.     window.jQuery.fn.imageMapResize = function $imageMapResizeF() {
  158.       return this.filter('map')
  159.         .each(scaleImageMap)
  160.         .end()
  161.     }
  162.   }
  163. })()

Raw Paste

Login or Register to edit or fork this paste. It's free.