Subversion-Projekte lars-tiefland.prado

/**
 * TSlider client class.
 * This clas is mainly based on Scriptaculous Slider control (http://script.aculo.us)
 */

Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
{
        onInit : function (options)
        {
                var slider = this;
                this.options=options || {};
                this.track = $(options.ID+'_track');
                this.handle =$(options.ID+'_handle');
                this.progress = $(options.ID+'_progress');
                this.axis  = this.options.axis || 'horizontal';
                this.range = this.options.range || $R(0,1);
                this.value = 0;
                this.maximum   = this.options.maximum || this.range.end;
                this.minimum   = this.options.minimum || this.range.start;
                this.hiddenField=$(this.options.ID+'_1');
                
                // Will be used to align the handle onto the track, if necessary
                this.alignX = parseInt(this.options.alignX || - this.track.offsetLeft);
                this.alignY = parseInt(this.options.alignY || - this.track.offsetTop);
                
                this.trackLength = this.maximumOffset() - this.minimumOffset();
                this.handleLength = this.isVertical() ? 
                        (this.handle.offsetHeight != 0 ? 
                                this.handle.offsetHeight : this.handles.style.height.replace(/px$/,"")) : 
                                (this.handle.offsetWidth != 0 ? this.handle.offsetWidth : 
                                        this.handle.style.width.replace(/px$/,""));
        
                this.active   = false;
                this.dragging = false;
                this.disabled = false;

                if(this.options.disabled) this.setDisabled();
        
                // Allowed values array
                this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;
                if(this.allowedValues) {
                        this.minimum = this.allowedValues.min();
                        this.maximum = this.allowedValues.max();
                }

                this.eventMouseDown = this.startDrag.bindAsEventListener(this);
                this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
                this.eventMouseMove = this.update.bindAsEventListener(this);

                // Initialize handle
                this.setValue(parseFloat(slider.options.sliderValue));
                Element.makePositioned(this.handle); // fix IE
                Event.observe (this.handle, "mousedown", this.eventMouseDown);
                
                Event.observe (this.track, "mousedown", this.eventMouseDown);
                if (this.progress) Event.observe (this.progress, "mousedown", this.eventMouseDown);
                Event.observe (document, "mouseup", this.eventMouseUp);
                Event.observe (document, "mousemove", this.eventMouseMove);
                
                this.initialized=true;
                
                
                if(this.options['AutoPostBack']==true)
                        Event.observe(this.hiddenField, "change", Prado.PostBack.bindEvent(this,options));
    
        },
  
        dispose: function() {
                var slider = this;    
                Event.stopObserving(this.track, "mousedown", this.eventMouseDown);
                Event.stopObserving(document, "mouseup", this.eventMouseUp);
                Event.stopObserving(document, "mousemove", this.eventMouseMove);
        
                Event.stopObserving(this.handle, "mousedown", slider.eventMouseDown);
        },
        
        setDisabled: function(){
                this.disabled = true;
        },
        setEnabled: function(){
                this.disabled = false;
        },  
        getNearestValue: function(value){
                if(this.allowedValues){
                        if(value >= this.allowedValues.max()) return(this.allowedValues.max());
                        if(value <= this.allowedValues.min()) return(this.allowedValues.min());
      
                        var offset = Math.abs(this.allowedValues[0] - value);
                        var newValue = this.allowedValues[0];
                        this.allowedValues.each( function(v) {
                                var currentOffset = Math.abs(v - value);
                                if(currentOffset <= offset){
                                        newValue = v;
                                        offset = currentOffset;
                                } 
                        });
                        return newValue;
                }
                if(value > this.range.end) return this.range.end;
                if(value < this.range.start) return this.range.start;
                return value;
        },
        
        setValue: function(sliderValue){
                if(!this.active) {
                        this.updateStyles();
                }
                this.value = this.getNearestValue(sliderValue);
                var pixelValue= this.translateToPx(this.value);
                this.handle.style[this.isVertical() ? 'top' : 'left'] = pixelValue;
                if (this.progress)
                        this.progress.style[this.isVertical() ? 'height' : 'width'] = pixelValue;
    
                //this.drawSpans();
                if(!this.dragging || !this.event) this.updateFinished();
        },
  
        setValueBy: function(delta) {
        this.setValue(this.value + delta);
        },
        
        translateToPx: function(value) {
                return Math.round(
                ((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) * (value - this.range.start)) + "px";
        },
        
        translateToValue: function(offset) {
                return ((offset/(this.trackLength-this.handleLength) * (this.range.end-this.range.start)) + this.range.start);
        },
        
        getRange: function(range) {
                var v = this.values.sortBy(Prototype.K); 
                range = range || 0;
                return $R(v[range],v[range+1]);
        },
        
        minimumOffset: function(){
                return(this.isVertical() ? this.alignY : this.alignX);
        },
        
        maximumOffset: function(){
                return(this.isVertical() ? 
                        (this.track.offsetHeight != 0 ? this.track.offsetHeight :
                                this.track.style.height.replace(/px$/,"")) - this.alignY : 
                                (this.track.offsetWidth != 0 ? this.track.offsetWidth : 
                                this.track.style.width.replace(/px$/,"")) - this.alignX);
        },
          
        isVertical:  function(){
                return (this.axis == 'vertical');
        },
        
        updateStyles: function() {
                if (this.active) 
                        Element.addClassName(this.handle, 'selected');
                else
                        Element.removeClassName(this.handle, 'selected');
        },
        
        startDrag: function(event) {
                if(Event.isLeftClick(event)) {
                        if(!this.disabled){
                                this.active = true;
                                var handle = Event.element(event);
                                var pointer  = [Event.pointerX(event), Event.pointerY(event)];
                                var track = handle;
                                if(track==this.track) {
                                        var offsets  = this.track.cumulativeOffset(); 
                                        this.event = event;
                                        this.setValue(this.translateToValue( 
                                                (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
                                        ));
                                        var offsets  = this.handle.cumulativeOffset();
                                        this.offsetX = (pointer[0] - offsets[0]);
                                        this.offsetY = (pointer[1] - offsets[1]);
                                } else {
                                        this.updateStyles();
                                        var offsets  = this.handle.cumulativeOffset();
                                        this.offsetX = (pointer[0] - offsets[0]);
                                        this.offsetY = (pointer[1] - offsets[1]);
                                }
                        }
                        Event.stop(event);
                }
        },
        
        update: function(event) {
                if(this.active) {
                        if(!this.dragging) this.dragging = true;
                        this.draw(event);
                        if(Prototype.Browser.WebKit) window.scrollBy(0,0);
                        Event.stop(event);
                }
        },
        
        draw: function(event) {
                var pointer = [Event.pointerX(event), Event.pointerY(event)];
                var offsets = this.track.cumulativeOffset();
                pointer[0] -= this.offsetX + offsets[0];
                pointer[1] -= this.offsetY + offsets[1];
                this.event = event;
                this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
                if(this.initialized && this.options.onSlide)
                        this.options.onSlide(this.value, this);
        },
        
        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.updateFinished();
        },
        
        updateFinished: function() {
                this.hiddenField.value=this.value;
                this.updateStyles();
                if(this.initialized && this.options.onChange) 
                        this.options.onChange(this.value, this);
                this.event = null;
                if (this.options['AutoPostBack']==true)
                {
                        Event.fireEvent(this.hiddenField,"change");
                }
        }

});