- /**
- * @private
- * Returns the nearest thumb to a click event, along with its distance
- * @param {Object} local Object containing top and left values from a click event
- * @param {String} prop The property of local to compare on. Use 'left' for horizontal sliders, 'top' for vertical ones
- * @return {Object} The closest thumb object and its distance from the click event
- */
- getNearest: function(local, prop) {
- var localValue = prop == 'top' ? this.innerEl.getHeight() - local[prop] : local[prop],
- clickValue = this.reverseValue(localValue),
- nearestDistance = (this.maxValue - this.minValue) + 5, //add a small fudge for the end of the slider
- index = 0,
- nearest = null;
-
- for (var i=0; i < this.thumbs.length; i++) {
- var thumb = this.thumbs[i],
- value = thumb.value,
- dist = Math.abs(value - clickValue);
-
- if (Math.abs(dist <= nearestDistance)) {
- nearest = thumb;
- index = i;
- nearestDistance = dist;
- }
- }
- return nearest;
- },
-
- /**
- * @private
- * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
- * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
- * @param {Ext.EventObject} e The Event object
- */
- onKeyDown : function(e){
- /*
- * The behaviour for keyboard handling with multiple thumbs is currently undefined.
- * There's no real sane default for it, so leave it like this until we come up
- * with a better way of doing it.
- */
- if(this.disabled || this.thumbs.length !== 1){
- e.preventDefault();
- return;
- }
- var k = e.getKey(),
- val;
- switch(k){
- case e.UP:
- case e.RIGHT:
- e.stopEvent();
- val = e.ctrlKey ? this.maxValue : this.getValue(0) + this.keyIncrement;
- this.setValue(0, val, undefined, true);
- break;
- case e.DOWN:
- case e.LEFT:
- e.stopEvent();
- val = e.ctrlKey ? this.minValue : this.getValue(0) - this.keyIncrement;
- this.setValue(0, val, undefined, true);
- break;
- default:
- e.preventDefault();
- }
- },
-
- /**
- * @private
- * If using snapping, this takes a desired new value and returns the closest snapped
- * value to it
- * @param {Number} value The unsnapped value
- * @return {Number} The value of the nearest snap target
- */
- doSnap : function(value){
- if (!(this.increment && value)) {
- return value;
- }
- var newValue = value,
- inc = this.increment,
- m = value % inc;
- if (m != 0) {
- newValue -= m;
- if (m * 2 >= inc) {
- newValue += inc;
- } else if (m * 2 < -inc) {
- newValue -= inc;
- }
- }
- return newValue.constrain(this.minValue, this.maxValue);
- },
-
- // private
- afterRender : function(){
- Ext.slider.MultiSlider.superclass.afterRender.apply(this, arguments);
-
- for (var i=0; i < this.thumbs.length; i++) {
- var thumb = this.thumbs[i];
-
- if (thumb.value !== undefined) {
- var v = this.normalizeValue(thumb.value);
-
- if (v !== thumb.value) {
- // delete this.value;
- this.setValue(i, v, false);
- } else {
- this.moveThumb(i, this.translateValue(v), false);
- }
- }
- };
- },
-
- /**
- * @private
- * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
- * the ratio is 2
- * @return {Number} The ratio of pixels to mapped values
- */
- getRatio : function(){
- var w = this.innerEl.getWidth(),
- v = this.maxValue - this.minValue;
- return v == 0 ? w : (w/v);
- },
-
- /**
- * @private
- * Returns a snapped, constrained value when given a desired value
- * @param {Number} value Raw number value
- * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values
- */
- normalizeValue : function(v){
- v = this.doSnap(v);
- v = Ext.util.Format.round(v, this.decimalPrecision);
- v = v.constrain(this.minValue, this.maxValue);
- return v;
- },
-
- <div id="method-Ext.slider.MultiSlider-setMinValue"></div>/**
- * Sets the minimum value for the slider instance. If the current value is less than the
- * minimum value, the current value will be changed.
- * @param {Number} val The new minimum value
- */
- setMinValue : function(val){
- this.minValue = val;
- var i = 0,
- thumbs = this.thumbs,
- len = thumbs.length,
- t;
-
- for(; i < len; ++i){
- t = thumbs[i];
- t.value = t.value < val ? val : t.value;
- }
- this.syncThumb();
- },
-
- <div id="method-Ext.slider.MultiSlider-setMaxValue"></div>/**
- * Sets the maximum value for the slider instance. If the current value is more than the
- * maximum value, the current value will be changed.
- * @param {Number} val The new maximum value
- */
- setMaxValue : function(val){
- this.maxValue = val;
- var i = 0,
- thumbs = this.thumbs,
- len = thumbs.length,
- t;
-
- for(; i < len; ++i){
- t = thumbs[i];
- t.value = t.value > val ? val : t.value;
- }
- this.syncThumb();
- },
-
- <div id="method-Ext.slider.MultiSlider-setValue"></div>/**
- * Programmatically sets the value of the Slider. Ensures that the value is constrained within
- * the minValue and maxValue.
- * @param {Number} index Index of the thumb to move
- * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
- * @param {Boolean} animate Turn on or off animation, defaults to true
- */
- setValue : function(index, v, animate, changeComplete) {
- var thumb = this.thumbs[index],
- el = thumb.el;
-
- v = this.normalizeValue(v);
-
- if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value, thumb) !== false) {
- thumb.value = v;
- if(this.rendered){
- this.moveThumb(index, this.translateValue(v), animate !== false);
- this.fireEvent('change', this, v, thumb);
- if(changeComplete){
- this.fireEvent('changecomplete', this, v, thumb);
- }
- }
- }
- },
-
- /**
- * @private
- */
- translateValue : function(v) {
- var ratio = this.getRatio();
- return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
- },
-
- /**
- * @private
- * Given a pixel location along the slider, returns the mapped slider value for that pixel.
- * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50)
- * returns 200
- * @param {Number} pos The position along the slider to return a mapped value for
- * @return {Number} The mapped value for the given position
- */
- reverseValue : function(pos){
- var ratio = this.getRatio();
- return (pos + (this.minValue * ratio)) / ratio;
- },
-
- /**
- * @private
- * @param {Number} index Index of the thumb to move
- */
- moveThumb: function(index, v, animate){
- var thumb = this.thumbs[index].el;
-
- if(!animate || this.animate === false){
- thumb.setLeft(v);
- }else{
- thumb.shift({left: v, stopFx: true, duration:.35});
- }
- },
-
- // private
- focus : function(){
- this.focusEl.focus(10);
- },
-
- // private
- onResize : function(w, h){
- var thumbs = this.thumbs,
- len = thumbs.length,