diff options
Diffstat (limited to 'lib/dijit/form/HorizontalSlider.js')
| -rw-r--r-- | lib/dijit/form/HorizontalSlider.js | 526 |
1 files changed, 330 insertions, 196 deletions
diff --git a/lib/dijit/form/HorizontalSlider.js b/lib/dijit/form/HorizontalSlider.js index a0cb8cf2b..93dc4a0c2 100644 --- a/lib/dijit/form/HorizontalSlider.js +++ b/lib/dijit/form/HorizontalSlider.js @@ -1,209 +1,343 @@ /* - Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved. + Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. Available via Academic Free License >= 2.1 OR the modified BSD license. see: http://dojotoolkit.org/license for details */ -if(!dojo._hasResource["dijit.form.HorizontalSlider"]){ -dojo._hasResource["dijit.form.HorizontalSlider"]=true; +if(!dojo._hasResource["dijit.form.HorizontalSlider"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.form.HorizontalSlider"] = true; dojo.provide("dijit.form.HorizontalSlider"); dojo.require("dijit.form._FormWidget"); dojo.require("dijit._Container"); dojo.require("dojo.dnd.move"); dojo.require("dijit.form.Button"); dojo.require("dojo.number"); -dojo.require("dojo._base.fx"); -dojo.declare("dijit.form.HorizontalSlider",[dijit.form._FormValueWidget,dijit._Container],{templateString:dojo.cache("dijit.form","templates/HorizontalSlider.html","<table class=\"dijit dijitReset dijitSlider dijitSliderH\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" rules=\"none\" dojoAttachEvent=\"onkeypress:_onKeyPress,onkeyup:_onKeyUp\"\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"topDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationT dijitSliderDecorationH\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH\"\n\t\t\t><div class=\"dijitSliderDecrementIconH\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"decrementButton\"><span class=\"dijitSliderButtonInner\">-</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderLeftBumper\" dojoAttachEvent=\"onmousedown:_onClkDecBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><input dojoAttachPoint=\"valueNode\" type=\"hidden\" ${!nameAttrSetting}\n\t\t\t/><div class=\"dijitReset dijitSliderBarContainerH\" waiRole=\"presentation\" dojoAttachPoint=\"sliderBarContainer\"\n\t\t\t\t><div waiRole=\"presentation\" dojoAttachPoint=\"progressBar\" class=\"dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH\" dojoAttachEvent=\"onmousedown:_onBarClick\"\n\t\t\t\t\t><div class=\"dijitSliderMoveable dijitSliderMoveableH\"\n\t\t\t\t\t\t><div dojoAttachPoint=\"sliderHandle,focusNode\" class=\"dijitSliderImageHandle dijitSliderImageHandleH\" dojoAttachEvent=\"onmousedown:_onHandleClick\" waiRole=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"></div\n\t\t\t\t\t></div\n\t\t\t\t></div\n\t\t\t\t><div waiRole=\"presentation\" dojoAttachPoint=\"remainingBar\" class=\"dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH\" dojoAttachEvent=\"onmousedown:_onBarClick\"></div\n\t\t\t></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderRightBumper\" dojoAttachEvent=\"onmousedown:_onClkIncBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH\"\n\t\t\t><div class=\"dijitSliderIncrementIconH\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"incrementButton\"><span class=\"dijitSliderButtonInner\">+</span></div\n\t\t></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"containerNode,bottomDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n></table>\n"),value:0,showButtons:true,minimum:0,maximum:100,discreteValues:Infinity,pageIncrement:2,clickSelect:true,slideDuration:dijit.defaultDuration,widgetsInTemplate:true,attributeMap:dojo.delegate(dijit.form._FormWidget.prototype.attributeMap,{id:""}),baseClass:"dijitSlider",cssStateNodes:{incrementButton:"dijitSliderIncrementButton",decrementButton:"dijitSliderDecrementButton",focusNode:"dijitSliderThumb"},_mousePixelCoord:"pageX",_pixelCount:"w",_startingPixelCoord:"x",_startingPixelCount:"l",_handleOffsetCoord:"left",_progressPixelSize:"width",_onKeyUp:function(e){ -if(this.disabled||this.readOnly||e.altKey||e.ctrlKey||e.metaKey){ -return; -} -this._setValueAttr(this.value,true); -},_onKeyPress:function(e){ -if(this.disabled||this.readOnly||e.altKey||e.ctrlKey||e.metaKey){ -return; -} -switch(e.charOrCode){ -case dojo.keys.HOME: -this._setValueAttr(this.minimum,false); -break; -case dojo.keys.END: -this._setValueAttr(this.maximum,false); -break; -case ((this._descending||this.isLeftToRight())?dojo.keys.RIGHT_ARROW:dojo.keys.LEFT_ARROW): -case (this._descending===false?dojo.keys.DOWN_ARROW:dojo.keys.UP_ARROW): -case (this._descending===false?dojo.keys.PAGE_DOWN:dojo.keys.PAGE_UP): -this.increment(e); -break; -case ((this._descending||this.isLeftToRight())?dojo.keys.LEFT_ARROW:dojo.keys.RIGHT_ARROW): -case (this._descending===false?dojo.keys.UP_ARROW:dojo.keys.DOWN_ARROW): -case (this._descending===false?dojo.keys.PAGE_UP:dojo.keys.PAGE_DOWN): -this.decrement(e); -break; -default: -return; -} -dojo.stopEvent(e); -},_onHandleClick:function(e){ -if(this.disabled||this.readOnly){ -return; -} -if(!dojo.isIE){ -dijit.focus(this.sliderHandle); -} -dojo.stopEvent(e); -},_isReversed:function(){ -return !this.isLeftToRight(); -},_onBarClick:function(e){ -if(this.disabled||this.readOnly||!this.clickSelect){ -return; -} -dijit.focus(this.sliderHandle); -dojo.stopEvent(e); -var _1=dojo.position(this.sliderBarContainer,true); -var _2=e[this._mousePixelCoord]-_1[this._startingPixelCoord]; -this._setPixelValue(this._isReversed()?(_1[this._pixelCount]-_2):_2,_1[this._pixelCount],true); -this._movable.onMouseDown(e); -},_setPixelValue:function(_3,_4,_5){ -if(this.disabled||this.readOnly){ -return; -} -_3=_3<0?0:_4<_3?_4:_3; -var _6=this.discreteValues; -if(_6<=1||_6==Infinity){ -_6=_4; -} -_6--; -var _7=_4/_6; -var _8=Math.round(_3/_7); -this._setValueAttr((this.maximum-this.minimum)*_8/_6+this.minimum,_5); -},_setValueAttr:function(_9,_a){ -this.valueNode.value=this.value=_9; -dijit.setWaiState(this.focusNode,"valuenow",_9); -this.inherited(arguments); -var _b=(_9-this.minimum)/(this.maximum-this.minimum); -var _c=(this._descending===false)?this.remainingBar:this.progressBar; -var _d=(this._descending===false)?this.progressBar:this.remainingBar; -if(this._inProgressAnim&&this._inProgressAnim.status!="stopped"){ -this._inProgressAnim.stop(true); -} -if(_a&&this.slideDuration>0&&_c.style[this._progressPixelSize]){ -var _e=this; -var _f={}; -var _10=parseFloat(_c.style[this._progressPixelSize]); -var _11=this.slideDuration*(_b-_10/100); -if(_11==0){ -return; -} -if(_11<0){ -_11=0-_11; -} -_f[this._progressPixelSize]={start:_10,end:_b*100,units:"%"}; -this._inProgressAnim=dojo.animateProperty({node:_c,duration:_11,onAnimate:function(v){ -_d.style[_e._progressPixelSize]=(100-parseFloat(v[_e._progressPixelSize]))+"%"; -},onEnd:function(){ -delete _e._inProgressAnim; -},properties:_f}); -this._inProgressAnim.play(); -}else{ -_c.style[this._progressPixelSize]=(_b*100)+"%"; -_d.style[this._progressPixelSize]=((1-_b)*100)+"%"; -} -},_bumpValue:function(_12,_13){ -if(this.disabled||this.readOnly){ -return; -} -var s=dojo.getComputedStyle(this.sliderBarContainer); -var c=dojo._getContentBox(this.sliderBarContainer,s); -var _14=this.discreteValues; -if(_14<=1||_14==Infinity){ -_14=c[this._pixelCount]; -} -_14--; -var _15=(this.value-this.minimum)*_14/(this.maximum-this.minimum)+_12; -if(_15<0){ -_15=0; -} -if(_15>_14){ -_15=_14; -} -_15=_15*(this.maximum-this.minimum)/_14+this.minimum; -this._setValueAttr(_15,_13); -},_onClkBumper:function(val){ -if(this.disabled||this.readOnly||!this.clickSelect){ -return; -} -this._setValueAttr(val,true); -},_onClkIncBumper:function(){ -this._onClkBumper(this._descending===false?this.minimum:this.maximum); -},_onClkDecBumper:function(){ -this._onClkBumper(this._descending===false?this.maximum:this.minimum); -},decrement:function(e){ -this._bumpValue(e.charOrCode==dojo.keys.PAGE_DOWN?-this.pageIncrement:-1); -},increment:function(e){ -this._bumpValue(e.charOrCode==dojo.keys.PAGE_UP?this.pageIncrement:1); -},_mouseWheeled:function(evt){ -dojo.stopEvent(evt); -var _16=!dojo.isMozilla; -var _17=evt[(_16?"wheelDelta":"detail")]*(_16?1:-1); -this._bumpValue(_17<0?-1:1,true); -},startup:function(){ -if(this._started){ -return; -} -dojo.forEach(this.getChildren(),function(_18){ -if(this[_18.container]!=this.containerNode){ -this[_18.container].appendChild(_18.domNode); -} -},this); -this.inherited(arguments); -},_typematicCallback:function(_19,_1a,e){ -if(_19==-1){ -this._setValueAttr(this.value,true); -}else{ -this[(_1a==(this._descending?this.incrementButton:this.decrementButton))?"decrement":"increment"](e); -} -},postCreate:function(){ -if(this.showButtons){ -this.incrementButton.style.display=""; -this.decrementButton.style.display=""; -this._connects.push(dijit.typematic.addMouseListener(this.decrementButton,this,"_typematicCallback",25,500)); -this._connects.push(dijit.typematic.addMouseListener(this.incrementButton,this,"_typematicCallback",25,500)); -} -this.connect(this.domNode,!dojo.isMozilla?"onmousewheel":"DOMMouseScroll","_mouseWheeled"); -var _1b=dojo.declare(dijit.form._SliderMover,{widget:this}); -this._movable=new dojo.dnd.Moveable(this.sliderHandle,{mover:_1b}); -var _1c=dojo.query("label[for=\""+this.id+"\"]"); -if(_1c.length){ -_1c[0].id=(this.id+"_label"); -dijit.setWaiState(this.focusNode,"labelledby",_1c[0].id); -} -dijit.setWaiState(this.focusNode,"valuemin",this.minimum); -dijit.setWaiState(this.focusNode,"valuemax",this.maximum); -this.inherited(arguments); -this._layoutHackIE7(); -},destroy:function(){ -this._movable.destroy(); -if(this._inProgressAnim&&this._inProgressAnim.status!="stopped"){ -this._inProgressAnim.stop(true); -} -this._supportingWidgets=dijit.findWidgets(this.domNode); -this.inherited(arguments); -}}); -dojo.declare("dijit.form._SliderMover",dojo.dnd.Mover,{onMouseMove:function(e){ -var _1d=this.widget; -var _1e=_1d._abspos; -if(!_1e){ -_1e=_1d._abspos=dojo.position(_1d.sliderBarContainer,true); -_1d._setPixelValue_=dojo.hitch(_1d,"_setPixelValue"); -_1d._isReversed_=_1d._isReversed(); -} -var _1f=e[_1d._mousePixelCoord]-_1e[_1d._startingPixelCoord]; -_1d._setPixelValue_(_1d._isReversed_?(_1e[_1d._pixelCount]-_1f):_1f,_1e[_1d._pixelCount],false); -},destroy:function(e){ -dojo.dnd.Mover.prototype.destroy.apply(this,arguments); -var _20=this.widget; -_20._abspos=null; -_20._setValueAttr(_20.value,true); -}}); + + +dojo.declare( + "dijit.form.HorizontalSlider", + [dijit.form._FormValueWidget, dijit._Container], +{ + // summary: + // A form widget that allows one to select a value with a horizontally draggable handle + + templateString: dojo.cache("dijit.form", "templates/HorizontalSlider.html", "<table class=\"dijit dijitReset dijitSlider dijitSliderH\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" rules=\"none\" dojoAttachEvent=\"onkeypress:_onKeyPress,onkeyup:_onKeyUp\"\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"topDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationT dijitSliderDecorationH\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH\"\n\t\t\t><div class=\"dijitSliderDecrementIconH\" style=\"display:none\" dojoAttachPoint=\"decrementButton\"><span class=\"dijitSliderButtonInner\">-</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderLeftBumper\" dojoAttachEvent=\"onmousedown:_onClkDecBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><input dojoAttachPoint=\"valueNode\" type=\"hidden\" ${!nameAttrSetting}\n\t\t\t/><div class=\"dijitReset dijitSliderBarContainerH\" role=\"presentation\" dojoAttachPoint=\"sliderBarContainer\"\n\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"progressBar\" class=\"dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH\" dojoAttachEvent=\"onmousedown:_onBarClick\"\n\t\t\t\t\t><div class=\"dijitSliderMoveable dijitSliderMoveableH\"\n\t\t\t\t\t\t><div dojoAttachPoint=\"sliderHandle,focusNode\" class=\"dijitSliderImageHandle dijitSliderImageHandleH\" dojoAttachEvent=\"onmousedown:_onHandleClick\" role=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"></div\n\t\t\t\t\t></div\n\t\t\t\t></div\n\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"remainingBar\" class=\"dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH\" dojoAttachEvent=\"onmousedown:_onBarClick\"></div\n\t\t\t></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderRightBumper\" dojoAttachEvent=\"onmousedown:_onClkIncBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH\"\n\t\t\t><div class=\"dijitSliderIncrementIconH\" style=\"display:none\" dojoAttachPoint=\"incrementButton\"><span class=\"dijitSliderButtonInner\">+</span></div\n\t\t></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"containerNode,bottomDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n></table>\n"), + + // Overrides FormValueWidget.value to indicate numeric value + value: 0, + + // showButtons: [const] Boolean + // Show increment/decrement buttons at the ends of the slider? + showButtons: true, + + // minimum:: [const] Integer + // The minimum value the slider can be set to. + minimum: 0, + + // maximum: [const] Integer + // The maximum value the slider can be set to. + maximum: 100, + + // discreteValues: Integer + // If specified, indicates that the slider handle has only 'discreteValues' possible positions, + // and that after dragging the handle, it will snap to the nearest possible position. + // Thus, the slider has only 'discreteValues' possible values. + // + // For example, if minimum=10, maxiumum=30, and discreteValues=3, then the slider handle has + // three possible positions, representing values 10, 20, or 30. + // + // If discreteValues is not specified or if it's value is higher than the number of pixels + // in the slider bar, then the slider handle can be moved freely, and the slider's value will be + // computed/reported based on pixel position (in this case it will likely be fractional, + // such as 123.456789). + discreteValues: Infinity, + + // pageIncrement: Integer + // If discreteValues is also specified, this indicates the amount of clicks (ie, snap positions) + // that the slider handle is moved via pageup/pagedown keys. + // If discreteValues is not specified, it indicates the number of pixels. + pageIncrement: 2, + + // clickSelect: Boolean + // If clicking the slider bar changes the value or not + clickSelect: true, + + // slideDuration: Number + // The time in ms to take to animate the slider handle from 0% to 100%, + // when clicking the slider bar to make the handle move. + slideDuration: dijit.defaultDuration, + + // Flag to _Templated (TODO: why is this here? I see no widgets in the template.) + widgetsInTemplate: true, + + attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, { + id: "" + }), + + baseClass: "dijitSlider", + + // Apply CSS classes to up/down arrows and handle per mouse state + cssStateNodes: { + incrementButton: "dijitSliderIncrementButton", + decrementButton: "dijitSliderDecrementButton", + focusNode: "dijitSliderThumb" + }, + + _mousePixelCoord: "pageX", + _pixelCount: "w", + _startingPixelCoord: "x", + _startingPixelCount: "l", + _handleOffsetCoord: "left", + _progressPixelSize: "width", + + _onKeyUp: function(/*Event*/ e){ + if(this.disabled || this.readOnly || e.altKey || e.ctrlKey || e.metaKey){ return; } + this._setValueAttr(this.value, true); + }, + + _onKeyPress: function(/*Event*/ e){ + if(this.disabled || this.readOnly || e.altKey || e.ctrlKey || e.metaKey){ return; } + switch(e.charOrCode){ + case dojo.keys.HOME: + this._setValueAttr(this.minimum, false); + break; + case dojo.keys.END: + this._setValueAttr(this.maximum, false); + break; + // this._descending === false: if ascending vertical (min on top) + // (this._descending || this.isLeftToRight()): if left-to-right horizontal or descending vertical + case ((this._descending || this.isLeftToRight()) ? dojo.keys.RIGHT_ARROW : dojo.keys.LEFT_ARROW): + case (this._descending === false ? dojo.keys.DOWN_ARROW : dojo.keys.UP_ARROW): + case (this._descending === false ? dojo.keys.PAGE_DOWN : dojo.keys.PAGE_UP): + this.increment(e); + break; + case ((this._descending || this.isLeftToRight()) ? dojo.keys.LEFT_ARROW : dojo.keys.RIGHT_ARROW): + case (this._descending === false ? dojo.keys.UP_ARROW : dojo.keys.DOWN_ARROW): + case (this._descending === false ? dojo.keys.PAGE_UP : dojo.keys.PAGE_DOWN): + this.decrement(e); + break; + default: + return; + } + dojo.stopEvent(e); + }, + + _onHandleClick: function(e){ + if(this.disabled || this.readOnly){ return; } + if(!dojo.isIE){ + // make sure you get focus when dragging the handle + // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus) + dijit.focus(this.sliderHandle); + } + dojo.stopEvent(e); + }, + + _isReversed: function(){ + // summary: + // Returns true if direction is from right to left + // tags: + // protected extension + return !this.isLeftToRight(); + }, + + _onBarClick: function(e){ + if(this.disabled || this.readOnly || !this.clickSelect){ return; } + dijit.focus(this.sliderHandle); + dojo.stopEvent(e); + var abspos = dojo.position(this.sliderBarContainer, true); + var pixelValue = e[this._mousePixelCoord] - abspos[this._startingPixelCoord]; + this._setPixelValue(this._isReversed() ? (abspos[this._pixelCount] - pixelValue) : pixelValue, abspos[this._pixelCount], true); + this._movable.onMouseDown(e); + }, + + _setPixelValue: function(/*Number*/ pixelValue, /*Number*/ maxPixels, /*Boolean?*/ priorityChange){ + if(this.disabled || this.readOnly){ return; } + pixelValue = pixelValue < 0 ? 0 : maxPixels < pixelValue ? maxPixels : pixelValue; + var count = this.discreteValues; + if(count <= 1 || count == Infinity){ count = maxPixels; } + count--; + var pixelsPerValue = maxPixels / count; + var wholeIncrements = Math.round(pixelValue / pixelsPerValue); + this._setValueAttr((this.maximum-this.minimum)*wholeIncrements/count + this.minimum, priorityChange); + }, + + _setValueAttr: function(/*Number*/ value, /*Boolean?*/ priorityChange){ + // summary: + // Hook so set('value', value) works. + this._set("value", value); + this.valueNode.value = value; + dijit.setWaiState(this.focusNode, "valuenow", value); + this.inherited(arguments); + var percent = (value - this.minimum) / (this.maximum - this.minimum); + var progressBar = (this._descending === false) ? this.remainingBar : this.progressBar; + var remainingBar = (this._descending === false) ? this.progressBar : this.remainingBar; + if(this._inProgressAnim && this._inProgressAnim.status != "stopped"){ + this._inProgressAnim.stop(true); + } + if(priorityChange && this.slideDuration > 0 && progressBar.style[this._progressPixelSize]){ + // animate the slider + var _this = this; + var props = {}; + var start = parseFloat(progressBar.style[this._progressPixelSize]); + var duration = this.slideDuration * (percent-start/100); + if(duration == 0){ return; } + if(duration < 0){ duration = 0 - duration; } + props[this._progressPixelSize] = { start: start, end: percent*100, units:"%" }; + this._inProgressAnim = dojo.animateProperty({ node: progressBar, duration: duration, + onAnimate: function(v){ remainingBar.style[_this._progressPixelSize] = (100-parseFloat(v[_this._progressPixelSize])) + "%"; }, + onEnd: function(){ delete _this._inProgressAnim; }, + properties: props + }) + this._inProgressAnim.play(); + }else{ + progressBar.style[this._progressPixelSize] = (percent*100) + "%"; + remainingBar.style[this._progressPixelSize] = ((1-percent)*100) + "%"; + } + }, + + _bumpValue: function(signedChange, /*Boolean?*/ priorityChange){ + if(this.disabled || this.readOnly){ return; } + var s = dojo.getComputedStyle(this.sliderBarContainer); + var c = dojo._getContentBox(this.sliderBarContainer, s); + var count = this.discreteValues; + if(count <= 1 || count == Infinity){ count = c[this._pixelCount]; } + count--; + var value = (this.value - this.minimum) * count / (this.maximum - this.minimum) + signedChange; + if(value < 0){ value = 0; } + if(value > count){ value = count; } + value = value * (this.maximum - this.minimum) / count + this.minimum; + this._setValueAttr(value, priorityChange); + }, + + _onClkBumper: function(val){ + if(this.disabled || this.readOnly || !this.clickSelect){ return; } + this._setValueAttr(val, true); + }, + + _onClkIncBumper: function(){ + this._onClkBumper(this._descending === false ? this.minimum : this.maximum); + }, + + _onClkDecBumper: function(){ + this._onClkBumper(this._descending === false ? this.maximum : this.minimum); + }, + + decrement: function(/*Event*/ e){ + // summary: + // Decrement slider + // tags: + // private + this._bumpValue(e.charOrCode == dojo.keys.PAGE_DOWN ? -this.pageIncrement : -1); + }, + + increment: function(/*Event*/ e){ + // summary: + // Increment slider + // tags: + // private + this._bumpValue(e.charOrCode == dojo.keys.PAGE_UP ? this.pageIncrement : 1); + }, + + _mouseWheeled: function(/*Event*/ evt){ + // summary: + // Event handler for mousewheel where supported + dojo.stopEvent(evt); + var janky = !dojo.isMozilla; + var scroll = evt[(janky ? "wheelDelta" : "detail")] * (janky ? 1 : -1); + this._bumpValue(scroll < 0 ? -1 : 1, true); // negative scroll acts like a decrement + }, + + startup: function(){ + if(this._started){ return; } + + dojo.forEach(this.getChildren(), function(child){ + if(this[child.container] != this.containerNode){ + this[child.container].appendChild(child.domNode); + } + }, this); + + this.inherited(arguments); + }, + + _typematicCallback: function(/*Number*/ count, /*Object*/ button, /*Event*/ e){ + if(count == -1){ + this._setValueAttr(this.value, true); + }else{ + this[(button == (this._descending? this.incrementButton : this.decrementButton)) ? "decrement" : "increment"](e); + } + }, + + buildRendering: function(){ + this.inherited(arguments); + if(this.showButtons){ + this.incrementButton.style.display=""; + this.decrementButton.style.display=""; + } + + // find any associated label element and add to slider focusnode. + var label = dojo.query('label[for="'+this.id+'"]'); + if(label.length){ + label[0].id = (this.id+"_label"); + dijit.setWaiState(this.focusNode, "labelledby", label[0].id); + } + + dijit.setWaiState(this.focusNode, "valuemin", this.minimum); + dijit.setWaiState(this.focusNode, "valuemax", this.maximum); + }, + + postCreate: function(){ + this.inherited(arguments); + + if(this.showButtons){ + this._connects.push(dijit.typematic.addMouseListener( + this.decrementButton, this, "_typematicCallback", 25, 500)); + this._connects.push(dijit.typematic.addMouseListener( + this.incrementButton, this, "_typematicCallback", 25, 500)); + } + this.connect(this.domNode, !dojo.isMozilla ? "onmousewheel" : "DOMMouseScroll", "_mouseWheeled"); + + // define a custom constructor for a SliderMover that points back to me + var mover = dojo.declare(dijit.form._SliderMover, { + widget: this + }); + this._movable = new dojo.dnd.Moveable(this.sliderHandle, {mover: mover}); + + this._layoutHackIE7(); + }, + + destroy: function(){ + this._movable.destroy(); + if(this._inProgressAnim && this._inProgressAnim.status != "stopped"){ + this._inProgressAnim.stop(true); + } + this._supportingWidgets = dijit.findWidgets(this.domNode); // tells destroy about pseudo-child widgets (ruler/labels) + this.inherited(arguments); + } +}); + +dojo.declare("dijit.form._SliderMover", + dojo.dnd.Mover, +{ + onMouseMove: function(e){ + var widget = this.widget; + var abspos = widget._abspos; + if(!abspos){ + abspos = widget._abspos = dojo.position(widget.sliderBarContainer, true); + widget._setPixelValue_ = dojo.hitch(widget, "_setPixelValue"); + widget._isReversed_ = widget._isReversed(); + } + var coordEvent = e.touches ? e.touches[0] : e, // if multitouch take first touch for coords + pixelValue = coordEvent[widget._mousePixelCoord] - abspos[widget._startingPixelCoord]; + widget._setPixelValue_(widget._isReversed_ ? (abspos[widget._pixelCount]-pixelValue) : pixelValue, abspos[widget._pixelCount], false); + }, + + destroy: function(e){ + dojo.dnd.Mover.prototype.destroy.apply(this, arguments); + var widget = this.widget; + widget._abspos = null; + widget._setValueAttr(widget.value, true); + } +}); + } |