Checkout of Instiki Trunk 1/21/2007.
This commit is contained in:
Jacques Distler
commit
69b62b6f33
1138 changed files with 139586 additions and 0 deletions
258
public/javascripts/slider.js
Normal file
258
public/javascripts/slider.js
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue