259 lines
8.9 KiB
JavaScript
259 lines
8.9 KiB
JavaScript
// Copyright (c) 2005 Marty Haught
|
|
//
|
|
// See scriptaculous.js for full license.
|
|
|
|
if(!Control) var Control = {};
|
|
Control.Slider = Class.create();
|
|
|
|
// options:
|
|
// axis: 'vertical', or 'horizontal' (default)
|
|
// increment: (default: 1)
|
|
// step: (default: 1)
|
|
//
|
|
// callbacks:
|
|
// onChange(value)
|
|
// onSlide(value)
|
|
Control.Slider.prototype = {
|
|
initialize: function(handle, track, options) {
|
|
this.handle = $(handle);
|
|
this.track = $(track);
|
|
|
|
this.options = options || {};
|
|
|
|
this.axis = this.options.axis || 'horizontal';
|
|
this.increment = this.options.increment || 1;
|
|
this.step = parseInt(this.options.step) || 1;
|
|
this.value = 0;
|
|
|
|
var defaultMaximum = Math.round(this.track.offsetWidth / this.increment);
|
|
if(this.isVertical()) defaultMaximum = Math.round(this.track.offsetHeight / this.increment);
|
|
|
|
this.maximum = this.options.maximum || defaultMaximum;
|
|
this.minimum = this.options.minimum || 0;
|
|
|
|
// Will be used to align the handle onto the track, if necessary
|
|
this.alignX = parseInt (this.options.alignX) || 0;
|
|
this.alignY = parseInt (this.options.alignY) || 0;
|
|
|
|
// Zero out the slider position
|
|
this.setCurrentLeft(Position.cumulativeOffset(this.track)[0] - Position.cumulativeOffset(this.handle)[0] + this.alignX);
|
|
this.setCurrentTop(this.trackTop() - Position.cumulativeOffset(this.handle)[1] + this.alignY);
|
|
|
|
this.offsetX = 0;
|
|
this.offsetY = 0;
|
|
|
|
this.originalLeft = this.currentLeft();
|
|
this.originalTop = this.currentTop();
|
|
this.originalZ = parseInt(this.handle.style.zIndex || "0");
|
|
|
|
// Prepopulate Slider value
|
|
this.setSliderValue(parseInt(this.options.sliderValue) || 0);
|
|
|
|
this.active = false;
|
|
this.dragging = false;
|
|
this.disabled = false;
|
|
|
|
// FIXME: use css
|
|
this.handleImage = $(this.options.handleImage) || false;
|
|
this.handleDisabled = this.options.handleDisabled || false;
|
|
this.handleEnabled = false;
|
|
if(this.handleImage)
|
|
this.handleEnabled = this.handleImage.src || false;
|
|
|
|
if(this.options.disabled)
|
|
this.setDisabled();
|
|
|
|
// Value Array
|
|
this.values = this.options.values || false; // Add method to validate and sort??
|
|
|
|
Element.makePositioned(this.handle); // fix IE
|
|
|
|
this.eventMouseDown = this.startDrag.bindAsEventListener(this);
|
|
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
|
|
this.eventMouseMove = this.update.bindAsEventListener(this);
|
|
this.eventKeypress = this.keyPress.bindAsEventListener(this);
|
|
|
|
Event.observe(this.handle, "mousedown", this.eventMouseDown);
|
|
Event.observe(document, "mouseup", this.eventMouseUp);
|
|
Event.observe(document, "mousemove", this.eventMouseMove);
|
|
Event.observe(document, "keypress", this.eventKeypress);
|
|
},
|
|
dispose: function() {
|
|
Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
|
|
Event.stopObserving(document, "mouseup", this.eventMouseUp);
|
|
Event.stopObserving(document, "mousemove", this.eventMouseMove);
|
|
Event.stopObserving(document, "keypress", this.eventKeypress);
|
|
},
|
|
setDisabled: function(){
|
|
this.disabled = true;
|
|
if(this.handleDisabled)
|
|
this.handleImage.src = this.handleDisabled;
|
|
},
|
|
setEnabled: function(){
|
|
this.disabled = false;
|
|
if(this.handleEnabled)
|
|
this.handleImage.src = this.handleEnabled;
|
|
},
|
|
currentLeft: function() {
|
|
return parseInt(this.handle.style.left || '0');
|
|
},
|
|
currentTop: function() {
|
|
return parseInt(this.handle.style.top || '0');
|
|
},
|
|
setCurrentLeft: function(left) {
|
|
this.handle.style.left = left +"px";
|
|
},
|
|
setCurrentTop: function(top) {
|
|
this.handle.style.top = top +"px";
|
|
},
|
|
trackLeft: function(){
|
|
return Position.cumulativeOffset(this.track)[0];
|
|
},
|
|
trackTop: function(){
|
|
return Position.cumulativeOffset(this.track)[1];
|
|
},
|
|
getNearestValue: function(value){
|
|
if(this.values){
|
|
var i = 0;
|
|
var offset = Math.abs(this.values[0] - value);
|
|
var newValue = this.values[0];
|
|
|
|
for(i=0; i < this.values.length; i++){
|
|
var currentOffset = Math.abs(this.values[i] - value);
|
|
if(currentOffset < offset){
|
|
newValue = this.values[i];
|
|
offset = currentOffset;
|
|
}
|
|
}
|
|
return newValue;
|
|
}
|
|
return value;
|
|
},
|
|
setSliderValue: function(sliderValue){
|
|
// First check our max and minimum and nearest values
|
|
sliderValue = this.getNearestValue(sliderValue);
|
|
if(sliderValue > this.maximum) sliderValue = this.maximum;
|
|
if(sliderValue < this.minimum) sliderValue = this.minimum;
|
|
var offsetDiff = (sliderValue - (this.value||this.minimum)) * this.increment;
|
|
|
|
if(this.isVertical()){
|
|
this.setCurrentTop(offsetDiff + this.currentTop());
|
|
} else {
|
|
this.setCurrentLeft(offsetDiff + this.currentLeft());
|
|
}
|
|
this.value = sliderValue;
|
|
this.updateFinished();
|
|
},
|
|
minimumOffset: function(){
|
|
return(this.isVertical() ?
|
|
this.trackTop() + this.alignY :
|
|
this.trackLeft() + this.alignX);
|
|
},
|
|
maximumOffset: function(){
|
|
return(this.isVertical() ?
|
|
this.trackTop() + this.alignY + (this.maximum - this.minimum) * this.increment :
|
|
this.trackLeft() + this.alignX + (this.maximum - this.minimum) * this.increment);
|
|
},
|
|
isVertical: function(){
|
|
return (this.axis == 'vertical');
|
|
},
|
|
startDrag: function(event) {
|
|
if(Event.isLeftClick(event)) {
|
|
if(!this.disabled){
|
|
this.active = true;
|
|
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
|
var offsets = Position.cumulativeOffset(this.handle);
|
|
this.offsetX = (pointer[0] - offsets[0]);
|
|
this.offsetY = (pointer[1] - offsets[1]);
|
|
this.originalLeft = this.currentLeft();
|
|
this.originalTop = this.currentTop();
|
|
}
|
|
Event.stop(event);
|
|
}
|
|
},
|
|
update: function(event) {
|
|
if(this.active) {
|
|
if(!this.dragging) {
|
|
var style = this.handle.style;
|
|
this.dragging = true;
|
|
if(style.position=="") style.position = "relative";
|
|
style.zIndex = this.options.zindex;
|
|
}
|
|
this.draw(event);
|
|
// fix AppleWebKit rendering
|
|
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
|
|
Event.stop(event);
|
|
}
|
|
},
|
|
draw: function(event) {
|
|
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
|
var offsets = Position.cumulativeOffset(this.handle);
|
|
|
|
offsets[0] -= this.currentLeft();
|
|
offsets[1] -= this.currentTop();
|
|
|
|
// Adjust for the pointer's position on the handle
|
|
pointer[0] -= this.offsetX;
|
|
pointer[1] -= this.offsetY;
|
|
var style = this.handle.style;
|
|
|
|
if(this.isVertical()){
|
|
if(pointer[1] > this.maximumOffset())
|
|
pointer[1] = this.maximumOffset();
|
|
if(pointer[1] < this.minimumOffset())
|
|
pointer[1] = this.minimumOffset();
|
|
|
|
// Increment by values
|
|
if(this.values){
|
|
this.value = this.getNearestValue(Math.round((pointer[1] - this.minimumOffset()) / this.increment) + this.minimum);
|
|
pointer[1] = this.trackTop() + this.alignY + (this.value - this.minimum) * this.increment;
|
|
} else {
|
|
this.value = Math.round((pointer[1] - this.minimumOffset()) / this.increment) + this.minimum;
|
|
}
|
|
style.top = pointer[1] - offsets[1] + "px";
|
|
} else {
|
|
if(pointer[0] > this.maximumOffset()) pointer[0] = this.maximumOffset();
|
|
if(pointer[0] < this.minimumOffset()) pointer[0] = this.minimumOffset();
|
|
// Increment by values
|
|
if(this.values){
|
|
this.value = this.getNearestValue(Math.round((pointer[0] - this.minimumOffset()) / this.increment) + this.minimum);
|
|
pointer[0] = this.trackLeft() + this.alignX + (this.value - this.minimum) * this.increment;
|
|
} else {
|
|
this.value = Math.round((pointer[0] - this.minimumOffset()) / this.increment) + this.minimum;
|
|
}
|
|
style.left = (pointer[0] - offsets[0]) + "px";
|
|
}
|
|
if(this.options.onSlide) this.options.onSlide(this.value);
|
|
},
|
|
endDrag: function(event) {
|
|
if(this.active && this.dragging) {
|
|
this.finishDrag(event, true);
|
|
Event.stop(event);
|
|
}
|
|
this.active = false;
|
|
this.dragging = false;
|
|
},
|
|
finishDrag: function(event, success) {
|
|
this.active = false;
|
|
this.dragging = false;
|
|
this.handle.style.zIndex = this.originalZ;
|
|
this.originalLeft = this.currentLeft();
|
|
this.originalTop = this.currentTop();
|
|
this.updateFinished();
|
|
},
|
|
updateFinished: function() {
|
|
if(this.options.onChange) this.options.onChange(this.value);
|
|
},
|
|
keyPress: function(event) {
|
|
if(this.active && !this.disabled) {
|
|
switch(event.keyCode) {
|
|
case Event.KEY_ESC:
|
|
this.finishDrag(event, false);
|
|
Event.stop(event);
|
|
break;
|
|
}
|
|
if(navigator.appVersion.indexOf('AppleWebKit')>0) Event.stop(event);
|
|
}
|
|
}
|
|
}
|