|
10 | 10 | function scaleImageMap(){ |
11 | 11 |
|
12 | 12 | function resizeMap() { |
13 | | - function resizeAreaTag(cachedAreaCoords){ |
14 | | - function scaleCoord(e){ |
15 | | - return e * scallingFactor[(1===(isWidth = 1-isWidth) ? 'width' : 'height')]; |
| 13 | + function resizeAreaTag(cachedAreaCoords,idx){ |
| 14 | + function scale(coord){ |
| 15 | + var dimension = ( 1 === (isWidth = 1-isWidth) ? 'width' : 'height' ); |
| 16 | + return Math.floor(Number(coord) * scallingFactor[dimension]); |
16 | 17 | } |
17 | 18 |
|
18 | 19 | var isWidth = 0; |
19 | 20 |
|
20 | | - return cachedAreaCoords.split(',').map(Number).map(scaleCoord).map(Math.floor).join(','); |
| 21 | + areas[idx].coords = cachedAreaCoords.split(',').map(scale).join(','); |
21 | 22 | } |
22 | 23 |
|
23 | 24 | var scallingFactor = { |
24 | | - width : displayedImage.width / sourceImage.width, |
25 | | - height : displayedImage.height / sourceImage.height |
| 25 | + width : image.width / image.naturalWidth, |
| 26 | + height : image.height / image.naturalHeight |
26 | 27 | }; |
27 | 28 |
|
28 | | - for (var i=0; i < areasLen ; i++) { |
29 | | - areas[i].coords = resizeAreaTag(cachedAreaCoordsArray[i]); |
30 | | - } |
| 29 | + cachedAreaCoordsArray.forEach(resizeAreaTag); |
31 | 30 | } |
32 | 31 |
|
33 | | - function start(){ |
34 | | - var |
35 | | - displayedWidth = null, |
36 | | - displayedHeight = null; |
37 | | - |
38 | | - //WebKit asyncs image loading, so we have to catch the load event. |
39 | | - sourceImage.onload = function sourceImageOnLoadF(){ |
40 | | - displayedWidth = displayedImage.width; |
41 | | - displayedHeight = displayedImage.height; |
42 | | - |
43 | | - if ((displayedWidth !== sourceImage.width) || (displayedHeight !== sourceImage.height)) { |
44 | | - resizeMap(); |
45 | | - } |
46 | | - }; |
47 | | - |
48 | | - //IE11 can late load this image, so make sure we have the correct sizes (#10) |
49 | | - displayedImage.onload = function() { |
50 | | - if (null !== displayedWidth && displayedImage.width !== displayedWidth) { |
51 | | - resizeMap(); |
52 | | - } |
53 | | - }; |
| 32 | + function getCoords(e){ |
| 33 | + //Normalize coord-string to csv format without any space chars |
| 34 | + return e.coords.replace(/ *, */g,',').replace(/ +/g,','); |
| 35 | + } |
54 | 36 |
|
55 | | - //Make copy of image, so we can get the actual size measurements |
56 | | - sourceImage.src = displayedImage.src; |
| 37 | + function debounce() { |
| 38 | + clearTimeout(timer); |
| 39 | + timer = setTimeout(resizeMap, 250); |
57 | 40 | } |
58 | 41 |
|
59 | | - function listenForResize(){ |
60 | | - function debounce() { |
61 | | - clearTimeout(timer); |
62 | | - timer = setTimeout(resizeMap, 250); |
| 42 | + function start(){ |
| 43 | + if ((image.width !== image.naturalWidth) || (image.height !== image.naturalHeight)) { |
| 44 | + resizeMap(); |
63 | 45 | } |
64 | | - if (window.addEventListener) { window.addEventListener('resize', debounce, false); } |
65 | | - else if (window.attachEvent) { window.attachEvent('onresize', debounce); } |
66 | 46 | } |
67 | 47 |
|
68 | | - function listenForFocus(){ |
69 | | - if (window.addEventListener) { window.addEventListener('focus', resizeMap, false); } |
70 | | - else if (window.attachEvent) { window.attachEvent('onfocus', resizeMap); } |
| 48 | + function attach(){ |
| 49 | + map._resize = resizeMap; //Bind resize method to HTML map element |
| 50 | + image.addEventListener('onload', resizeMap, false); //Detect late image loads in IE11 |
| 51 | + window.addEventListener('focus', resizeMap, false); //Cope with window being resized whilst on another tab |
| 52 | + window.addEventListener('resize', debounce, false); |
| 53 | + document.addEventListener('fullscreenchange', resizeMap, false); |
71 | 54 | } |
72 | 55 |
|
73 | | - function getCoords(e){ |
74 | | - // normalize coord-string to csv format without any space chars |
75 | | - return e.coords.replace(/ *, */g,',').replace(/ +/g,','); |
| 56 | + function beenHere(){ |
| 57 | + return ('function' === typeof map._resize); |
| 58 | + } |
| 59 | + |
| 60 | + function setup(){ |
| 61 | + areas = map.getElementsByTagName('area'); |
| 62 | + cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords); |
| 63 | + image = document.querySelector('img[usemap="#'+map.name+'"]'); |
| 64 | + |
76 | 65 | } |
77 | 66 |
|
78 | 67 | var |
79 | 68 | /*jshint validthis:true */ |
80 | | - map = this, |
81 | | - areas = map.getElementsByTagName('area'), |
82 | | - areasLen = areas.length, |
83 | | - cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords), |
84 | | - displayedImage = document.querySelector('img[usemap="#'+map.name+'"]'), |
85 | | - sourceImage = new Image(), |
86 | | - timer = null; |
87 | | - |
88 | | - start(); |
89 | | - listenForResize(); |
90 | | - listenForFocus(); |
| 69 | + map = this, |
| 70 | + areas = null, cachedAreaCoordsArray = null, image = null, timer = null; |
| 71 | + |
| 72 | + if (!beenHere()){ |
| 73 | + setup(); |
| 74 | + attach(); |
| 75 | + start(); |
| 76 | + } else { |
| 77 | + map._resize(); //Already setup, so just resize map |
| 78 | + } |
91 | 79 | } |
92 | 80 |
|
93 | 81 |
|
|
113 | 101 | init(target); |
114 | 102 | break; |
115 | 103 | default: |
116 | | - throw new TypeError('Unexpected data type ('+typeof(target)+').'); |
| 104 | + throw new TypeError('Unexpected data type ('+typeof target+').'); |
117 | 105 | } |
118 | 106 | }; |
119 | 107 | } |
120 | 108 |
|
121 | | - |
122 | 109 | if (typeof define === 'function' && define.amd) { |
123 | 110 | define([],factory); |
124 | | - } else if (typeof exports === 'object') { //Node for browserfy |
125 | | - module.exports = factory(); |
| 111 | + } else if (typeof module === 'object' && typeof module.exports === 'object'){ |
| 112 | + module.exports = factory(); //Node for browserfy |
126 | 113 | } else { |
127 | 114 | window.imageMapResize = factory(); |
128 | 115 | } |
|
0 commit comments