-
Notifications
You must be signed in to change notification settings - Fork 12
/
pullAndZoom.js
79 lines (68 loc) · 2.39 KB
/
pullAndZoom.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
var pullAndZoom = function(opts){
opts = opts || {};
this.mainPage = opts.mainPage;
this.background = opts.background;
this.backgroundImage = opts.backgroundImage;
this.isIos = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
this.pingBinded = this.ping.bind(this);
this.setScrollBinded = this.setScroll.bind(this);
this.adjustScrollBinded = this.adjustScroll.bind(this);
this.enableEffectBinded = this.enableEffect.bind(this);
this.lastRefreshBinded = this.lastRefresh.bind(this);
if(!this.isIos){
this.iScroll = new IScroll(this.mainPage);
}else{
this.adjustScroll();
this.events();
}
this.pingEvents();
};
pullAndZoom.prototype.events = function(){
this.mainPage.addEventListener('touchmove', function(e){
e.stopPropagation();
}, false);
this.mainPage.addEventListener('scroll', this.setScrollBinded, false);
document.addEventListener('touchmove', function(e){
e.preventDefault();
}, false);
};
pullAndZoom.prototype.pingEvents = function(){
this.mainPage.addEventListener('touchstart', this.enableEffectBinded, false);
this.mainPage.addEventListener('touchend', this.lastRefreshBinded, false);
this.mainPage.addEventListener('touchcancel', this.lastRefreshBinded, false);
}
pullAndZoom.prototype.setScroll = function(){
setTimeout(this.adjustScrollBinded, 0);
};
pullAndZoom.prototype.adjustScroll = function(){
if(this.mainPage.scrollTop === 0){
this.mainPage.scrollTop = 1;
}
};
pullAndZoom.prototype.ping = function(){
webkitRequestAnimationFrame(this.pingBinded);
this.refresh();
};
pullAndZoom.prototype.enableEffect = function(){
this.doEffect = true;
};
pullAndZoom.prototype.lastRefresh = function(){
this.refresh({forcedScrollTop: 1});
this.doEffect = false;
};
pullAndZoom.prototype.refresh = function(opts){
opts = opts || {};
if(this.doEffect){
var scrollTop = opts.forcedScrollTop || (this.iScroll ? this.iScroll.y * -1 : this.mainPage.scrollTop);
var scaleFactor = 1;
var translateFactor = 0;
var transition = "-webkit-transform 0.5s";
if(scrollTop < 0){
scaleFactor = (scrollTop * -0.005) + 1;
translateFactor = Math.ceil(scrollTop * 1.1);
transition = "-webkit-transform 0.1s linear";
}
this.backgroundImage.style.webkitTransition = transition;
this.backgroundImage.style.webkitTransform = "translateZ(0) translateY(" + translateFactor + "px) scale(" + scaleFactor + ")";
}
};