1 | // Copyright (c) 2005 Marty Haught, Thomas Fuchs |
---|
2 | // |
---|
3 | // See http://script.aculo.us for more info |
---|
4 | // |
---|
5 | // Permission is hereby granted, free of charge, to any person obtaining |
---|
6 | // a copy of this software and associated documentation files (the |
---|
7 | // "Software"), to deal in the Software without restriction, including |
---|
8 | // without limitation the rights to use, copy, modify, merge, publish, |
---|
9 | // distribute, sublicense, and/or sell copies of the Software, and to |
---|
10 | // permit persons to whom the Software is furnished to do so, subject to |
---|
11 | // the following conditions: |
---|
12 | // |
---|
13 | // The above copyright notice and this permission notice shall be |
---|
14 | // included in all copies or substantial portions of the Software. |
---|
15 | // |
---|
16 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
---|
17 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
---|
18 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
---|
19 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE |
---|
20 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION |
---|
21 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION |
---|
22 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
---|
23 | |
---|
24 | if(!Control) var Control = {}; |
---|
25 | Control.Slider = Class.create(); |
---|
26 | |
---|
27 | // options: |
---|
28 | // axis: 'vertical', or 'horizontal' (default) |
---|
29 | // |
---|
30 | // callbacks: |
---|
31 | // onChange(value) |
---|
32 | // onSlide(value) |
---|
33 | Control.Slider.prototype = { |
---|
34 | initialize: function(handle, track, options) { |
---|
35 | var slider = this; |
---|
36 | |
---|
37 | if(handle instanceof Array) { |
---|
38 | this.handles = handle.collect( function(e) { return $(e) }); |
---|
39 | } else { |
---|
40 | this.handles = [$(handle)]; |
---|
41 | } |
---|
42 | |
---|
43 | this.track = $(track); |
---|
44 | this.options = options || {}; |
---|
45 | |
---|
46 | this.axis = this.options.axis || 'horizontal'; |
---|
47 | this.increment = this.options.increment || 1; |
---|
48 | this.step = parseInt(this.options.step || '1'); |
---|
49 | this.range = this.options.range || $R(0,1); |
---|
50 | |
---|
51 | this.value = 0; // assure backwards compat |
---|
52 | this.values = this.handles.map( function() { return 0 }); |
---|
53 | this.spans = this.options.spans ? this.options.spans.map(function(s){ return $(s) }) : false; |
---|
54 | this.options.startSpan = $(this.options.startSpan || null); |
---|
55 | this.options.endSpan = $(this.options.endSpan || null); |
---|
56 | |
---|
57 | this.restricted = this.options.restricted || false; |
---|
58 | |
---|
59 | this.maximum = this.options.maximum || this.range.end; |
---|
60 | this.minimum = this.options.minimum || this.range.start; |
---|
61 | |
---|
62 | // Will be used to align the handle onto the track, if necessary |
---|
63 | this.alignX = parseInt(this.options.alignX || '0'); |
---|
64 | this.alignY = parseInt(this.options.alignY || '0'); |
---|
65 | |
---|
66 | this.trackLength = this.maximumOffset() - this.minimumOffset(); |
---|
67 | |
---|
68 | this.active = false; |
---|
69 | this.dragging = false; |
---|
70 | this.disabled = false; |
---|
71 | |
---|
72 | if(this.options.disabled) this.setDisabled(); |
---|
73 | |
---|
74 | // Allowed values array |
---|
75 | this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false; |
---|
76 | if(this.allowedValues) { |
---|
77 | this.minimum = this.allowedValues.min(); |
---|
78 | this.maximum = this.allowedValues.max(); |
---|
79 | } |
---|
80 | |
---|
81 | this.eventMouseDown = this.startDrag.bindAsEventListener(this); |
---|
82 | this.eventMouseUp = this.endDrag.bindAsEventListener(this); |
---|
83 | this.eventMouseMove = this.update.bindAsEventListener(this); |
---|
84 | |
---|
85 | // Initialize handles in reverse (make sure first handle is active) |
---|
86 | this.handles.each( function(h,i) { |
---|
87 | i = slider.handles.length-1-i; |
---|
88 | slider.setValue(parseFloat( |
---|
89 | (slider.options.sliderValue instanceof Array ? |
---|
90 | slider.options.sliderValue[i] : slider.options.sliderValue) || |
---|
91 | slider.range.start), i); |
---|
92 | Element.makePositioned(h); // fix IE |
---|
93 | Event.observe(h, "mousedown", slider.eventMouseDown); |
---|
94 | }); |
---|
95 | |
---|
96 | Event.observe(this.track, "mousedown", this.eventMouseDown); |
---|
97 | Event.observe(document, "mouseup", this.eventMouseUp); |
---|
98 | Event.observe(document, "mousemove", this.eventMouseMove); |
---|
99 | |
---|
100 | this.initialized = true; |
---|
101 | }, |
---|
102 | dispose: function() { |
---|
103 | var slider = this; |
---|
104 | Event.stopObserving(this.track, "mousedown", this.eventMouseDown); |
---|
105 | Event.stopObserving(document, "mouseup", this.eventMouseUp); |
---|
106 | Event.stopObserving(document, "mousemove", this.eventMouseMove); |
---|
107 | this.handles.each( function(h) { |
---|
108 | Event.stopObserving(h, "mousedown", slider.eventMouseDown); |
---|
109 | }); |
---|
110 | }, |
---|
111 | setDisabled: function(){ |
---|
112 | this.disabled = true; |
---|
113 | }, |
---|
114 | setEnabled: function(){ |
---|
115 | this.disabled = false; |
---|
116 | }, |
---|
117 | getNearestValue: function(value){ |
---|
118 | if(this.allowedValues){ |
---|
119 | if(value >= this.allowedValues.max()) return(this.allowedValues.max()); |
---|
120 | if(value <= this.allowedValues.min()) return(this.allowedValues.min()); |
---|
121 | |
---|
122 | var offset = Math.abs(this.allowedValues[0] - value); |
---|
123 | var newValue = this.allowedValues[0]; |
---|
124 | this.allowedValues.each( function(v) { |
---|
125 | var currentOffset = Math.abs(v - value); |
---|
126 | if(currentOffset <= offset){ |
---|
127 | newValue = v; |
---|
128 | offset = currentOffset; |
---|
129 | } |
---|
130 | }); |
---|
131 | return newValue; |
---|
132 | } |
---|
133 | if(value > this.range.end) return this.range.end; |
---|
134 | if(value < this.range.start) return this.range.start; |
---|
135 | return value; |
---|
136 | }, |
---|
137 | setValue: function(sliderValue, handleIdx){ |
---|
138 | if(!this.active) { |
---|
139 | this.activeHandle = this.handles[handleIdx]; |
---|
140 | this.activeHandleIdx = handleIdx; |
---|
141 | this.updateStyles(); |
---|
142 | } |
---|
143 | handleIdx = handleIdx || this.activeHandleIdx || 0; |
---|
144 | if(this.initialized && this.restricted) { |
---|
145 | if((handleIdx>0) && (sliderValue<this.values[handleIdx-1])) |
---|
146 | sliderValue = this.values[handleIdx-1]; |
---|
147 | if((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1])) |
---|
148 | sliderValue = this.values[handleIdx+1]; |
---|
149 | } |
---|
150 | sliderValue = this.getNearestValue(sliderValue); |
---|
151 | this.values[handleIdx] = sliderValue; |
---|
152 | this.value = this.values[0]; // assure backwards compat |
---|
153 | |
---|
154 | this.handles[handleIdx].style[this.isVertical() ? 'top' : 'left'] = |
---|
155 | this.translateToPx(sliderValue); |
---|
156 | |
---|
157 | this.drawSpans(); |
---|
158 | if(!this.dragging || !this.event) this.updateFinished(); |
---|
159 | }, |
---|
160 | setValueBy: function(delta, handleIdx) { |
---|
161 | this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta, |
---|
162 | handleIdx || this.activeHandleIdx || 0); |
---|
163 | }, |
---|
164 | translateToPx: function(value) { |
---|
165 | return Math.round((this.trackLength / (this.range.end - this.range.start)) * (value - this.range.start)) + "px"; |
---|
166 | }, |
---|
167 | translateToValue: function(offset) { |
---|
168 | return ((offset/this.trackLength) * (this.range.end - this.range.start)) + this.range.start; |
---|
169 | }, |
---|
170 | getRange: function(range) { |
---|
171 | var v = this.values.sortBy(Prototype.K); |
---|
172 | range = range || 0; |
---|
173 | return $R(v[range],v[range+1]); |
---|
174 | }, |
---|
175 | minimumOffset: function(){ |
---|
176 | return(this.isVertical() ? this.alignY : this.alignX); |
---|
177 | }, |
---|
178 | maximumOffset: function(){ |
---|
179 | return(this.isVertical() ? |
---|
180 | this.track.offsetHeight - this.alignY : this.track.offsetWidth - this.alignX); |
---|
181 | }, |
---|
182 | isVertical: function(){ |
---|
183 | return (this.axis == 'vertical'); |
---|
184 | }, |
---|
185 | drawSpans: function() { |
---|
186 | var slider = this; |
---|
187 | if(this.spans) |
---|
188 | $R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) }); |
---|
189 | if(this.options.startSpan) |
---|
190 | this.setSpan(this.options.startSpan, |
---|
191 | $R(0, this.values.length>1 ? this.getRange(0).min() : this.value )); |
---|
192 | if(this.options.endSpan) |
---|
193 | this.setSpan(this.options.endSpan, |
---|
194 | $R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum)); |
---|
195 | }, |
---|
196 | setSpan: function(span, range) { |
---|
197 | if(this.isVertical()) { |
---|
198 | span.style.top = this.translateToPx(range.start); |
---|
199 | span.style.height = this.translateToPx(range.end - range.start); |
---|
200 | } else { |
---|
201 | span.style.left = this.translateToPx(range.start); |
---|
202 | span.style.width = this.translateToPx(range.end - range.start); |
---|
203 | } |
---|
204 | }, |
---|
205 | updateStyles: function() { |
---|
206 | this.handles.each( function(h){ Element.removeClassName(h, 'selected') }); |
---|
207 | Element.addClassName(this.activeHandle, 'selected'); |
---|
208 | }, |
---|
209 | startDrag: function(event) { |
---|
210 | if(Event.isLeftClick(event)) { |
---|
211 | if(!this.disabled){ |
---|
212 | this.active = true; |
---|
213 | |
---|
214 | var handle = Event.element(event); |
---|
215 | var pointer = [Event.pointerX(event), Event.pointerY(event)]; |
---|
216 | if(handle==this.track) { |
---|
217 | var offsets = Position.cumulativeOffset(this.track); |
---|
218 | this.event = event; |
---|
219 | this.setValue(this.translateToValue( |
---|
220 | this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0] |
---|
221 | )); |
---|
222 | } else { |
---|
223 | // find the handle (prevents issues with Safari) |
---|
224 | while((this.handles.indexOf(handle) == -1) && handle.parentNode) |
---|
225 | handle = handle.parentNode; |
---|
226 | |
---|
227 | this.activeHandle = handle; |
---|
228 | this.activeHandleIdx = this.handles.indexOf(this.activeHandle); |
---|
229 | this.updateStyles(); |
---|
230 | |
---|
231 | var offsets = Position.cumulativeOffset(this.activeHandle); |
---|
232 | this.offsetX = (pointer[0] - offsets[0]); |
---|
233 | this.offsetY = (pointer[1] - offsets[1]); |
---|
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 | // fix AppleWebKit rendering |
---|
244 | if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0); |
---|
245 | Event.stop(event); |
---|
246 | } |
---|
247 | }, |
---|
248 | draw: function(event) { |
---|
249 | var pointer = [Event.pointerX(event), Event.pointerY(event)]; |
---|
250 | var offsets = Position.cumulativeOffset(this.track); |
---|
251 | pointer[0] -= this.offsetX + offsets[0]; |
---|
252 | pointer[1] -= this.offsetY + offsets[1]; |
---|
253 | this.event = event; |
---|
254 | this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] )); |
---|
255 | if(this.initialized && this.options.onSlide) 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 | } |
---|