https://www.tv-vratsa.bg/sc/js/iphone_slider/slider.js

1/*
2 * iPhone lock slider - requires jQuery 1.2.3+
3 *
4 * Alex Boone
5 * aboone.com
6 *
7 * 5/18/2008
8 */
9Slider = function(container, config){
10	return {
11		init : function(){
12			this.container = container;
13			// configuration options
14			var cfg = config ? config : {};
15			this.handler = cfg.handler ? cfg.handler : function(){ alert('unlocked!'); };
16			this.color = cfg.color ? this.COLORS[cfg.color] : this.COLORS["plain"];
17			this.mode = cfg.mode ? cfg.mode : "click";
18			this.waver = cfg.waver ? cfg.waver : 150;
19			var message = cfg.message ? cfg.message : "slide to unlock";
20			var handleContent = cfg.handleContent ? cfg.handleContent : "";
21			
22			$('#'+this.container).html(
23				'<div class="track">'
24				+ '<div class="track-left"/>'
25			 	+ '<div class="track-right"/>'
26				+ '<div class="track-center">'
27					+ '<div class="track-message">'+message+'</div>'
28				+ '</div>'
29				+ '<div class="handle">' + handleContent + '</div>'
30				+ '</div>');
31			
32			this.handle = $('#' + this.container + ' .handle');
33			this.track = $('#' + this.container + ' .track');
34			this.message = $('#' + this.container + ' .track-message');
35			
36			// set color
37			this.handle.css("backgroundPosition", "0 " + (this.color*39) + "px")
38			
39			var self = this;
40			
41			if(this.mode == "noclick"){
42				this.handle.mouseover(function(e){
43					self.initX(e);
44					$('html').bind('mousemove', {slider: self}, self.slideNoClick);
45				});
46			} else {
47				this.handle.mousedown(function(e){
48					self.initX(e);
49					$('html').bind('mousemove', {slider: self}, self.slide);
50					$('html').one('mouseup', {slider: self}, self.release);
51				});
52			}
53		},
54		
55		initX : function(e){
56			var tx = this.track.get(0).offsetLeft;
57			var ty = this.track.get(0).offsetTop;
58			var tw = this.track.get(0).offsetWidth;
59			var th = this.track.get(0).offsetHeight;
60			var hx = this.handle.get(0).offsetLeft;
61			var hw = this.handle.get(0).offsetWidth;
62			var pd = hx-tx;
63			
64			this.min = 0;
65			this.zero = hx;
66			this.delta = e.pageX - this.zero;
67			this.max = tw-2*pd-hw;
68			this.maxY = ty+th+this.waver;
69			this.minY = ty-this.waver;
70		},
71		
72		slideX : function(e){
73			return Math.max(this.min,Math.min(e.pageX-this.zero-this.delta,this.max));
74		},
75		
76		slide : function(e){
77			var s = e.data.slider;
78			var x = s.slideX(e);
79			s.handle.css("left", x);
80			s.message.css("opacity", Math.max(0,1-(x*2)/s.max));
81		},
82		
83		slideNoClick : function(e){
84			var s = e.data.slider;
85			s.slide(e);
86			if( s.handle.css("left").replace(/[^0-9]/g,'') == s.max
87				|| e.pageY > s.maxY || e.pageY < s.minY){
88				s.release(e);
89			}
90		},
91		
92		release : function(e){
93			var s = e.data.slider;
94			$('html').unbind('mousemove');
95			if(s.handle.css("left").replace(/[^0-9]/g,'') == s.max){
96				if(s.handler() !== false){
97					s.reset();
98				}
99			} else {
100				s.reset();
101			}
102		},
103		
104		setMessage : function(msg){
105			this.message.html(msg);
106		},
107		
108		reset: function(){
109			var t = 400;
110			this.handle.animate({left: 0}, t);
111			this.message.animate({opacity: 1}, t);
112		},
113		
114		COLORS : {
115			plain: 0,
116			red: 1,
117			green: 2
118		}
119	};
120}