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