root / web-presentation / trunk / eneraptor-web-presentation / web-app / js / prototype / slider.js @ 92
History | View | Annotate | Download (9.92 KB)
1 | 86 | alexbesir | // script.aculo.us slider.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
|
---|---|---|---|
2 | |||
3 | // Copyright (c) 2005-2009 Marty Haught, Thomas Fuchs
|
||
4 | //
|
||
5 | // script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||
6 | // For details, see the script.aculo.us web site: http://script.aculo.us/
|
||
7 | |||
8 | if (!Control) var Control = { }; |
||
9 | |||
10 | // options:
|
||
11 | // axis: 'vertical', or 'horizontal' (default)
|
||
12 | //
|
||
13 | // callbacks:
|
||
14 | // onChange(value)
|
||
15 | // onSlide(value)
|
||
16 | Control.Slider = Class.create({ |
||
17 | initialize: function(handle, track, options) { |
||
18 | var slider = this; |
||
19 | |||
20 | if (Object.isArray(handle)) {
|
||
21 | this.handles = handle.collect( function(e) { return $(e) }); |
||
22 | } else {
|
||
23 | this.handles = [$(handle)]; |
||
24 | } |
||
25 | |||
26 | this.track = $(track); |
||
27 | this.options = options || { };
|
||
28 | |||
29 | this.axis = this.options.axis || 'horizontal'; |
||
30 | this.increment = this.options.increment || 1; |
||
31 | this.step = parseInt(this.options.step || '1'); |
||
32 | this.range = this.options.range || $R(0,1); |
||
33 | |||
34 | this.value = 0; // assure backwards compat |
||
35 | this.values = this.handles.map( function() { return 0 }); |
||
36 | this.spans = this.options.spans ? this.options.spans.map(function(s){ return $(s) }) : false; |
||
37 | this.options.startSpan = $(this.options.startSpan || null); |
||
38 | this.options.endSpan = $(this.options.endSpan || null); |
||
39 | |||
40 | this.restricted = this.options.restricted || false; |
||
41 | |||
42 | this.maximum = this.options.maximum || this.range.end; |
||
43 | this.minimum = this.options.minimum || this.range.start; |
||
44 | |||
45 | // Will be used to align the handle onto the track, if necessary
|
||
46 | this.alignX = parseInt(this.options.alignX || '0'); |
||
47 | this.alignY = parseInt(this.options.alignY || '0'); |
||
48 | |||
49 | this.trackLength = this.maximumOffset() - this.minimumOffset(); |
||
50 | |||
51 | this.handleLength = this.isVertical() ? |
||
52 | (this.handles[0].offsetHeight != 0 ? |
||
53 | this.handles[0].offsetHeight : this.handles[0].style.height.replace(/px$/,"")) : |
||
54 | (this.handles[0].offsetWidth != 0 ? this.handles[0].offsetWidth : |
||
55 | this.handles[0].style.width.replace(/px$/,"")); |
||
56 | |||
57 | this.active = false; |
||
58 | this.dragging = false; |
||
59 | this.disabled = false; |
||
60 | |||
61 | if (this.options.disabled) this.setDisabled(); |
||
62 | |||
63 | // Allowed values array
|
||
64 | this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false; |
||
65 | if (this.allowedValues) { |
||
66 | this.minimum = this.allowedValues.min(); |
||
67 | this.maximum = this.allowedValues.max(); |
||
68 | } |
||
69 | |||
70 | this.eventMouseDown = this.startDrag.bindAsEventListener(this); |
||
71 | this.eventMouseUp = this.endDrag.bindAsEventListener(this); |
||
72 | this.eventMouseMove = this.update.bindAsEventListener(this); |
||
73 | |||
74 | // Initialize handles in reverse (make sure first handle is active)
|
||
75 | this.handles.each( function(h,i) { |
||
76 | i = slider.handles.length-1-i;
|
||
77 | slider.setValue(parseFloat( |
||
78 | (Object.isArray(slider.options.sliderValue) ? |
||
79 | slider.options.sliderValue[i] : slider.options.sliderValue) || |
||
80 | slider.range.start), i); |
||
81 | h.makePositioned().observe("mousedown", slider.eventMouseDown);
|
||
82 | }); |
||
83 | |||
84 | this.track.observe("mousedown", this.eventMouseDown); |
||
85 | document.observe("mouseup", this.eventMouseUp); |
||
86 | document.observe("mousemove", this.eventMouseMove); |
||
87 | |||
88 | this.initialized = true; |
||
89 | }, |
||
90 | dispose: function() { |
||
91 | var slider = this; |
||
92 | Event.stopObserving(this.track, "mousedown", this.eventMouseDown); |
||
93 | Event.stopObserving(document, "mouseup", this.eventMouseUp); |
||
94 | Event.stopObserving(document, "mousemove", this.eventMouseMove); |
||
95 | this.handles.each( function(h) { |
||
96 | Event.stopObserving(h, "mousedown", slider.eventMouseDown);
|
||
97 | }); |
||
98 | }, |
||
99 | setDisabled: function(){ |
||
100 | this.disabled = true; |
||
101 | }, |
||
102 | setEnabled: function(){ |
||
103 | this.disabled = false; |
||
104 | }, |
||
105 | getNearestValue: function(value){ |
||
106 | if (this.allowedValues){ |
||
107 | if (value >= this.allowedValues.max()) return(this.allowedValues.max()); |
||
108 | if (value <= this.allowedValues.min()) return(this.allowedValues.min()); |
||
109 | |||
110 | var offset = Math.abs(this.allowedValues[0] - value); |
||
111 | var newValue = this.allowedValues[0]; |
||
112 | this.allowedValues.each( function(v) { |
||
113 | var currentOffset = Math.abs(v - value);
|
||
114 | if (currentOffset <= offset){
|
||
115 | newValue = v; |
||
116 | offset = currentOffset; |
||
117 | } |
||
118 | }); |
||
119 | return newValue;
|
||
120 | } |
||
121 | if (value > this.range.end) return this.range.end; |
||
122 | if (value < this.range.start) return this.range.start; |
||
123 | return value;
|
||
124 | }, |
||
125 | setValue: function(sliderValue, handleIdx){ |
||
126 | if (!this.active) { |
||
127 | this.activeHandleIdx = handleIdx || 0; |
||
128 | this.activeHandle = this.handles[this.activeHandleIdx]; |
||
129 | this.updateStyles();
|
||
130 | } |
||
131 | handleIdx = handleIdx || this.activeHandleIdx || 0; |
||
132 | if (this.initialized && this.restricted) { |
||
133 | if ((handleIdx>0) && (sliderValue<this.values[handleIdx-1])) |
||
134 | sliderValue = this.values[handleIdx-1]; |
||
135 | if ((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1])) |
||
136 | sliderValue = this.values[handleIdx+1]; |
||
137 | } |
||
138 | sliderValue = this.getNearestValue(sliderValue);
|
||
139 | this.values[handleIdx] = sliderValue;
|
||
140 | this.value = this.values[0]; // assure backwards compat |
||
141 | |||
142 | this.handles[handleIdx].style[this.isVertical() ? 'top' : 'left'] = |
||
143 | this.translateToPx(sliderValue);
|
||
144 | |||
145 | this.drawSpans();
|
||
146 | if (!this.dragging || !this.event) this.updateFinished(); |
||
147 | }, |
||
148 | setValueBy: function(delta, handleIdx) { |
||
149 | this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta, |
||
150 | handleIdx || this.activeHandleIdx || 0); |
||
151 | }, |
||
152 | translateToPx: function(value) { |
||
153 | return Math.round(
|
||
154 | ((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) * |
||
155 | (value - this.range.start)) + "px"; |
||
156 | }, |
||
157 | translateToValue: function(offset) { |
||
158 | return ((offset/(this.trackLength-this.handleLength) * |
||
159 | (this.range.end-this.range.start)) + this.range.start); |
||
160 | }, |
||
161 | getRange: function(range) { |
||
162 | var v = this.values.sortBy(Prototype.K); |
||
163 | range = range || 0;
|
||
164 | return $R(v[range],v[range+1]); |
||
165 | }, |
||
166 | minimumOffset: function(){ |
||
167 | return(this.isVertical() ? this.alignY : this.alignX); |
||
168 | }, |
||
169 | maximumOffset: function(){ |
||
170 | return(this.isVertical() ? |
||
171 | (this.track.offsetHeight != 0 ? this.track.offsetHeight : |
||
172 | this.track.style.height.replace(/px$/,"")) - this.alignY : |
||
173 | (this.track.offsetWidth != 0 ? this.track.offsetWidth : |
||
174 | this.track.style.width.replace(/px$/,"")) - this.alignX); |
||
175 | }, |
||
176 | isVertical: function(){ |
||
177 | return (this.axis == 'vertical'); |
||
178 | }, |
||
179 | drawSpans: function() { |
||
180 | var slider = this; |
||
181 | if (this.spans) |
||
182 | $R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) }); |
||
183 | if (this.options.startSpan) |
||
184 | this.setSpan(this.options.startSpan, |
||
185 | $R(0, this.values.length>1 ? this.getRange(0).min() : this.value )); |
||
186 | if (this.options.endSpan) |
||
187 | this.setSpan(this.options.endSpan, |
||
188 | $R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum)); |
||
189 | }, |
||
190 | setSpan: function(span, range) { |
||
191 | if (this.isVertical()) { |
||
192 | span.style.top = this.translateToPx(range.start);
|
||
193 | span.style.height = this.translateToPx(range.end - range.start + this.range.start); |
||
194 | } else {
|
||
195 | span.style.left = this.translateToPx(range.start);
|
||
196 | span.style.width = this.translateToPx(range.end - range.start + this.range.start); |
||
197 | } |
||
198 | }, |
||
199 | updateStyles: function() { |
||
200 | this.handles.each( function(h){ Element.removeClassName(h, 'selected') }); |
||
201 | Element.addClassName(this.activeHandle, 'selected'); |
||
202 | }, |
||
203 | startDrag: function(event) { |
||
204 | if (Event.isLeftClick(event)) {
|
||
205 | if (!this.disabled){ |
||
206 | this.active = true; |
||
207 | |||
208 | var handle = Event.element(event);
|
||
209 | var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||
210 | var track = handle;
|
||
211 | if (track==this.track) { |
||
212 | var offsets = this.track.cumulativeOffset(); |
||
213 | this.event = event;
|
||
214 | this.setValue(this.translateToValue( |
||
215 | (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2) |
||
216 | )); |
||
217 | var offsets = this.activeHandle.cumulativeOffset(); |
||
218 | this.offsetX = (pointer[0] - offsets[0]); |
||
219 | this.offsetY = (pointer[1] - offsets[1]); |
||
220 | } else {
|
||
221 | // find the handle (prevents issues with Safari)
|
||
222 | while((this.handles.indexOf(handle) == -1) && handle.parentNode) |
||
223 | handle = handle.parentNode; |
||
224 | |||
225 | if (this.handles.indexOf(handle)!=-1) { |
||
226 | this.activeHandle = handle;
|
||
227 | this.activeHandleIdx = this.handles.indexOf(this.activeHandle); |
||
228 | this.updateStyles();
|
||
229 | |||
230 | var offsets = this.activeHandle.cumulativeOffset(); |
||
231 | this.offsetX = (pointer[0] - offsets[0]); |
||
232 | this.offsetY = (pointer[1] - offsets[1]); |
||
233 | } |
||
234 | } |
||
235 | } |
||
236 | Event.stop(event); |
||
237 | } |
||
238 | }, |
||
239 | update: function(event) { |
||
240 | if (this.active) { |
||
241 | if (!this.dragging) this.dragging = true; |
||
242 | this.draw(event);
|
||
243 | if (Prototype.Browser.WebKit) window.scrollBy(0,0); |
||
244 | Event.stop(event); |
||
245 | } |
||
246 | }, |
||
247 | draw: function(event) { |
||
248 | var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||
249 | var offsets = this.track.cumulativeOffset(); |
||
250 | pointer[0] -= this.offsetX + offsets[0]; |
||
251 | pointer[1] -= this.offsetY + offsets[1]; |
||
252 | this.event = event;
|
||
253 | this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] )); |
||
254 | if (this.initialized && this.options.onSlide) |
||
255 | this.options.onSlide(this.values.length>1 ? this.values : this.value, this); |
||
256 | }, |
||
257 | endDrag: function(event) { |
||
258 | if (this.active && this.dragging) { |
||
259 | this.finishDrag(event, true); |
||
260 | Event.stop(event); |
||
261 | } |
||
262 | this.active = false; |
||
263 | this.dragging = false; |
||
264 | }, |
||
265 | finishDrag: function(event, success) { |
||
266 | this.active = false; |
||
267 | this.dragging = false; |
||
268 | this.updateFinished();
|
||
269 | }, |
||
270 | updateFinished: function() { |
||
271 | if (this.initialized && this.options.onChange) |
||
272 | this.options.onChange(this.values.length>1 ? this.values : this.value, this); |
||
273 | this.event = null; |
||
274 | } |
||
275 | }); |