https://www.water.gov.my/assets/shared/scripts/wheelzoom/wheelzoom.js

1/*!
2	Wheelzoom 3.0.4
3	license: MIT
4	http://www.jacklmoore.com/wheelzoom
5*/
6window.wheelzoom = (function(){
7	var defaults = {
8		zoom: 0.10
9	};
10
11	var canvas = document.createElement('canvas');
12
13	var main = function(img, options){
14		if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; }
15
16		var settings = {};
17		var width;
18		var height;
19		var bgWidth;
20		var bgHeight;
21		var bgPosX;
22		var bgPosY;
23		var previousEvent;
24		var cachedDataUrl;
25
26		function setSrcToBackground(img) {
27			img.style.backgroundImage = 'url("'+img.src+'")';
28			img.style.backgroundRepeat = 'no-repeat';
29			canvas.width = img.naturalWidth;
30			canvas.height = img.naturalHeight;
31			cachedDataUrl = canvas.toDataURL();
32			img.src = cachedDataUrl;
33		}
34
35		function updateBgStyle() {
36			if (bgPosX > 0) {
37				bgPosX = 0;
38			} else if (bgPosX < width - bgWidth) {
39				bgPosX = width - bgWidth;
40			}
41
42			if (bgPosY > 0) {
43				bgPosY = 0;
44			} else if (bgPosY < height - bgHeight) {
45				bgPosY = height - bgHeight;
46			}
47
48			img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
49			img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
50		}
51
52		function reset() {
53			bgWidth = width;
54			bgHeight = height;
55			bgPosX = bgPosY = 0;
56			updateBgStyle();
57		}
58
59		function onwheel(e) {
60			var deltaY = 0;
61
62			e.preventDefault();
63
64			if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
65				deltaY = e.deltaY;
66			} else if (e.wheelDelta) {
67				deltaY = -e.wheelDelta;
68			}
69
70			// As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
71			// We have to calculate the target element's position relative to the document, and subtrack that from the
72			// cursor's position relative to the document.
73			var rect = img.getBoundingClientRect();
74			var offsetX = e.pageX - rect.left - window.pageXOffset;
75			var offsetY = e.pageY - rect.top - window.pageYOffset;
76
77			// Record the offset between the bg edge and cursor:
78			var bgCursorX = offsetX - bgPosX;
79			var bgCursorY = offsetY - bgPosY;
80			
81			// Use the previous offset to get the percent offset between the bg edge and cursor:
82			var bgRatioX = bgCursorX/bgWidth;
83			var bgRatioY = bgCursorY/bgHeight;
84
85			// Update the bg size:
86			if (deltaY < 0) {
87				bgWidth += bgWidth*settings.zoom;
88				bgHeight += bgHeight*settings.zoom;
89			} else {
90				bgWidth -= bgWidth*settings.zoom;
91				bgHeight -= bgHeight*settings.zoom;
92			}
93
94			// Take the percent offset and apply it to the new size:
95			bgPosX = offsetX - (bgWidth * bgRatioX);
96			bgPosY = offsetY - (bgHeight * bgRatioY);
97
98			// Prevent zooming out beyond the starting size
99			if (bgWidth <= width || bgHeight <= height) {
100				reset();
101			} else {
102				updateBgStyle();
103			}
104		}
105
106		function drag(e) {
107			e.preventDefault();
108			bgPosX += (e.pageX - previousEvent.pageX);
109			bgPosY += (e.pageY - previousEvent.pageY);
110			previousEvent = e;
111			updateBgStyle();
112		}
113
114		function removeDrag() {
115			document.removeEventListener('mouseup', removeDrag);
116			document.removeEventListener('mousemove', drag);
117		}
118
119		// Make the background draggable
120		function draggable(e) {
121			e.preventDefault();
122			previousEvent = e;
123			document.addEventListener('mousemove', drag);
124			document.addEventListener('mouseup', removeDrag);
125		}
126
127		function load() {
128			if (img.src === cachedDataUrl) return;
129
130			var computedStyle = window.getComputedStyle(img, null);
131
132			width = parseInt(computedStyle.width, 10);
133			height = parseInt(computedStyle.height, 10);
134			bgWidth = width;
135			bgHeight = height;
136			bgPosX = 0;
137			bgPosY = 0;
138
139			setSrcToBackground(img);
140
141			img.style.backgroundSize =  width+'px '+height+'px';
142			img.style.backgroundPosition = '0 0';
143			img.addEventListener('wheelzoom.reset', reset);
144
145			img.addEventListener('wheel', onwheel);
146			img.addEventListener('mousedown', draggable);
147		}
148
149		var destroy = function (originalProperties) {
150			img.removeEventListener('wheelzoom.destroy', destroy);
151			img.removeEventListener('wheelzoom.reset', reset);
152			img.removeEventListener('load', load);
153			img.removeEventListener('mouseup', removeDrag);
154			img.removeEventListener('mousemove', drag);
155			img.removeEventListener('mousedown', draggable);
156			img.removeEventListener('wheel', onwheel);
157
158			img.style.backgroundImage = originalProperties.backgroundImage;
159			img.style.backgroundRepeat = originalProperties.backgroundRepeat;
160			img.src = originalProperties.src;
161		}.bind(null, {
162			backgroundImage: img.style.backgroundImage,
163			backgroundRepeat: img.style.backgroundRepeat,
164			src: img.src
165		});
166
167		img.addEventListener('wheelzoom.destroy', destroy);
168
169		options = options || {};
170

171		Object.keys(defaults).forEach(function(key){
172			settings[key] = options[key] !== undefined ? options[key] : defaults[key];
173		});
174
175		if (img.complete) {
176			load();
177		}
178
179		img.addEventListener('load', load);
180	};
181
182	// Do nothing in IE8
183	if (typeof window.getComputedStyle !== 'function') {
184		return function(elements) {
185			return elements;
186		};
187	} else {
188		return function(elements, options) {
189			if (elements && elements.length) {
190				Array.prototype.forEach.call(elements, main, options);
191			} else if (elements && elements.nodeName) {
192				main(elements, options);
193			}
194			return elements;
195		};
196	}
197}());