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