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
|
/*
usage:
base.wheel = new wheel({
el: document.querySelector("#map"),
update: function(e, delta){
// do something with delta
},
})
*/
function wheel (opt) {
opt = defaults(opt, {
el: document,
update: function(e, delta){},
propagate: false,
locked: false,
reversible: true,
ratio: 0.02,
val: 0,
})
// opt.update(e, deltaY, deltaX)
var scale = 1
opt.el.addEventListener('gesturestart', function(e) {
scale = e.scale
}, false)
opt.el.addEventListener('gesturechange', function(e) {
var deltaY = (scale - e.scale) * window.innerWidth
scale = e.scale
opt.update(e, deltaY)
}, false)
opt.el.addEventListener('wheel', onMouseWheel, false);
// opt.el.addEventListener('mousewheel', onMouseWheel, false);
opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false);
function onMouseWheel (e) {
if (opt.locked) {
return
}
if (! opt.propagate) {
e.stopPropagation()
e.preventDefault()
}
var deltaX = 0, deltaY = 0;
// WebKit
if ( event.deltaY ) {
deltaY -= event.deltaY * opt.ratio
deltaX -= event.deltaX * opt.ratio
}
else if ( event.wheelDeltaY ) {
deltaY -= event.wheelDeltaY * opt.ratio
deltaX -= event.wheelDeltaX * opt.ratio
}
// Opera / Explorer 9
else if ( event.wheelDelta ) {
deltaY -= event.wheelDelta * opt.ratio
}
// Firefox
else if ( event.detail ) {
deltaY += event.detail * 2
}
if (! opt.reversible && (deltaY < 0 && deltaX < 0)) return;
// opt.val = clamp(opt.val + delta, opt.min, opt.max)
// deltaX is also passed, but these values tend to be unusable
// try http://vvalls.com/assets/test/wheel.html with a trackpad
opt.update(e, deltaY, deltaX)
}
opt.lock = function(){ opt.locked = true }
opt.unlock = function(){ opt.locked = false }
return opt
}
|
