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