1 | // script.aculo.us slider.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007 |
---|
2 | |
---|
3 | // Copyright (c) 2005-2007 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 = Position.cumulativeOffset(this.track); |
---|
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 = Position.cumulativeOffset(this.activeHandle); |
---|
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 = Position.cumulativeOffset(this.activeHandle); |
---|
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 = Position.cumulativeOffset(this.track); |
---|
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 | }); |
---|