root / trunk / web / dojo / dijit / form / HorizontalSlider.js
History | View | Annotate | Download (10 KB)
1 |
/*
|
---|---|
2 |
Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
|
3 |
Available via Academic Free License >= 2.1 OR the modified BSD license.
|
4 |
see: http://dojotoolkit.org/license for details
|
5 |
*/
|
6 |
|
7 |
|
8 |
if(!dojo._hasResource["dijit.form.HorizontalSlider"]){ |
9 |
dojo._hasResource["dijit.form.HorizontalSlider"]=true; |
10 |
dojo.provide("dijit.form.HorizontalSlider");
|
11 |
dojo.require("dijit.form._FormWidget");
|
12 |
dojo.require("dijit._Container");
|
13 |
dojo.require("dojo.dnd.move");
|
14 |
dojo.require("dijit.form.Button");
|
15 |
dojo.require("dojo.number");
|
16 |
dojo.require("dojo._base.fx");
|
17 |
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){ |
18 |
if(this.disabled||this.readOnly||e.altKey||e.ctrlKey||e.metaKey){ |
19 |
return;
|
20 |
} |
21 |
this._setValueAttr(this.value,true); |
22 |
},_onKeyPress:function(e){ |
23 |
if(this.disabled||this.readOnly||e.altKey||e.ctrlKey||e.metaKey){ |
24 |
return;
|
25 |
} |
26 |
switch(e.charOrCode){
|
27 |
case dojo.keys.HOME:
|
28 |
this._setValueAttr(this.minimum,false); |
29 |
break;
|
30 |
case dojo.keys.END:
|
31 |
this._setValueAttr(this.maximum,false); |
32 |
break;
|
33 |
case ((this._descending||this.isLeftToRight())?dojo.keys.RIGHT_ARROW:dojo.keys.LEFT_ARROW): |
34 |
case (this._descending===false?dojo.keys.DOWN_ARROW:dojo.keys.UP_ARROW): |
35 |
case (this._descending===false?dojo.keys.PAGE_DOWN:dojo.keys.PAGE_UP): |
36 |
this.increment(e);
|
37 |
break;
|
38 |
case ((this._descending||this.isLeftToRight())?dojo.keys.LEFT_ARROW:dojo.keys.RIGHT_ARROW): |
39 |
case (this._descending===false?dojo.keys.UP_ARROW:dojo.keys.DOWN_ARROW): |
40 |
case (this._descending===false?dojo.keys.PAGE_UP:dojo.keys.PAGE_DOWN): |
41 |
this.decrement(e);
|
42 |
break;
|
43 |
default:
|
44 |
return;
|
45 |
} |
46 |
dojo.stopEvent(e); |
47 |
},_onHandleClick:function(e){ |
48 |
if(this.disabled||this.readOnly){ |
49 |
return;
|
50 |
} |
51 |
if(!dojo.isIE){
|
52 |
dijit.focus(this.sliderHandle);
|
53 |
} |
54 |
dojo.stopEvent(e); |
55 |
},_isReversed:function(){ |
56 |
return !this.isLeftToRight(); |
57 |
},_onBarClick:function(e){ |
58 |
if(this.disabled||this.readOnly||!this.clickSelect){ |
59 |
return;
|
60 |
} |
61 |
dijit.focus(this.sliderHandle);
|
62 |
dojo.stopEvent(e); |
63 |
var _1=dojo.position(this.sliderBarContainer,true); |
64 |
var _2=e[this._mousePixelCoord]-_1[this._startingPixelCoord]; |
65 |
this._setPixelValue(this._isReversed()?(_1[this._pixelCount]-_2):_2,_1[this._pixelCount],true); |
66 |
this._movable.onMouseDown(e);
|
67 |
},_setPixelValue:function(_3,_4,_5){ |
68 |
if(this.disabled||this.readOnly){ |
69 |
return;
|
70 |
} |
71 |
_3=_3<0?0:_4<_3?_4:_3; |
72 |
var _6=this.discreteValues; |
73 |
if(_6<=1||_6==Infinity){ |
74 |
_6=_4; |
75 |
} |
76 |
_6--; |
77 |
var _7=_4/_6;
|
78 |
var _8=Math.round(_3/_7);
|
79 |
this._setValueAttr((this.maximum-this.minimum)*_8/_6+this.minimum,_5); |
80 |
},_setValueAttr:function(_9,_a){ |
81 |
this.valueNode.value=this.value=_9; |
82 |
dijit.setWaiState(this.focusNode,"valuenow",_9); |
83 |
this.inherited(arguments); |
84 |
var _b=(_9-this.minimum)/(this.maximum-this.minimum); |
85 |
var _c=(this._descending===false)?this.remainingBar:this.progressBar; |
86 |
var _d=(this._descending===false)?this.progressBar:this.remainingBar; |
87 |
if(this._inProgressAnim&&this._inProgressAnim.status!="stopped"){ |
88 |
this._inProgressAnim.stop(true); |
89 |
} |
90 |
if(_a&&this.slideDuration>0&&_c.style[this._progressPixelSize]){ |
91 |
var _e=this; |
92 |
var _f={};
|
93 |
var _10=parseFloat(_c.style[this._progressPixelSize]); |
94 |
var _11=this.slideDuration*(_b-_10/100); |
95 |
if(_11==0){ |
96 |
return;
|
97 |
} |
98 |
if(_11<0){ |
99 |
_11=0-_11;
|
100 |
} |
101 |
_f[this._progressPixelSize]={start:_10,end:_b*100,units:"%"}; |
102 |
this._inProgressAnim=dojo.animateProperty({node:_c,duration:_11,onAnimate:function(v){ |
103 |
_d.style[_e._progressPixelSize]=(100-parseFloat(v[_e._progressPixelSize]))+"%"; |
104 |
},onEnd:function(){ |
105 |
delete _e._inProgressAnim;
|
106 |
},properties:_f});
|
107 |
this._inProgressAnim.play();
|
108 |
}else{
|
109 |
_c.style[this._progressPixelSize]=(_b*100)+"%"; |
110 |
_d.style[this._progressPixelSize]=((1-_b)*100)+"%"; |
111 |
} |
112 |
},_bumpValue:function(_12,_13){ |
113 |
if(this.disabled||this.readOnly){ |
114 |
return;
|
115 |
} |
116 |
var s=dojo.getComputedStyle(this.sliderBarContainer); |
117 |
var c=dojo._getContentBox(this.sliderBarContainer,s); |
118 |
var _14=this.discreteValues; |
119 |
if(_14<=1||_14==Infinity){ |
120 |
_14=c[this._pixelCount];
|
121 |
} |
122 |
_14--; |
123 |
var _15=(this.value-this.minimum)*_14/(this.maximum-this.minimum)+_12; |
124 |
if(_15<0){ |
125 |
_15=0;
|
126 |
} |
127 |
if(_15>_14){
|
128 |
_15=_14; |
129 |
} |
130 |
_15=_15*(this.maximum-this.minimum)/_14+this.minimum; |
131 |
this._setValueAttr(_15,_13);
|
132 |
},_onClkBumper:function(val){ |
133 |
if(this.disabled||this.readOnly||!this.clickSelect){ |
134 |
return;
|
135 |
} |
136 |
this._setValueAttr(val,true); |
137 |
},_onClkIncBumper:function(){ |
138 |
this._onClkBumper(this._descending===false?this.minimum:this.maximum); |
139 |
},_onClkDecBumper:function(){ |
140 |
this._onClkBumper(this._descending===false?this.maximum:this.minimum); |
141 |
},decrement:function(e){ |
142 |
this._bumpValue(e.charOrCode==dojo.keys.PAGE_DOWN?-this.pageIncrement:-1); |
143 |
},increment:function(e){ |
144 |
this._bumpValue(e.charOrCode==dojo.keys.PAGE_UP?this.pageIncrement:1); |
145 |
},_mouseWheeled:function(evt){ |
146 |
dojo.stopEvent(evt); |
147 |
var _16=!dojo.isMozilla;
|
148 |
var _17=evt[(_16?"wheelDelta":"detail")]*(_16?1:-1); |
149 |
this._bumpValue(_17<0?-1:1,true); |
150 |
},startup:function(){ |
151 |
if(this._started){ |
152 |
return;
|
153 |
} |
154 |
dojo.forEach(this.getChildren(),function(_18){ |
155 |
if(this[_18.container]!=this.containerNode){ |
156 |
this[_18.container].appendChild(_18.domNode);
|
157 |
} |
158 |
},this);
|
159 |
this.inherited(arguments); |
160 |
},_typematicCallback:function(_19,_1a,e){ |
161 |
if(_19==-1){ |
162 |
this._setValueAttr(this.value,true); |
163 |
}else{
|
164 |
this[(_1a==(this._descending?this.incrementButton:this.decrementButton))?"decrement":"increment"](e); |
165 |
} |
166 |
},postCreate:function(){ |
167 |
if(this.showButtons){ |
168 |
this.incrementButton.style.display=""; |
169 |
this.decrementButton.style.display=""; |
170 |
this._connects.push(dijit.typematic.addMouseListener(this.decrementButton,this,"_typematicCallback",25,500)); |
171 |
this._connects.push(dijit.typematic.addMouseListener(this.incrementButton,this,"_typematicCallback",25,500)); |
172 |
} |
173 |
this.connect(this.domNode,!dojo.isMozilla?"onmousewheel":"DOMMouseScroll","_mouseWheeled"); |
174 |
var _1b=dojo.declare(dijit.form._SliderMover,{widget:this}); |
175 |
this._movable=new dojo.dnd.Moveable(this.sliderHandle,{mover:_1b}); |
176 |
var _1c=dojo.query("label[for=\""+this.id+"\"]"); |
177 |
if(_1c.length){
|
178 |
_1c[0].id=(this.id+"_label"); |
179 |
dijit.setWaiState(this.focusNode,"labelledby",_1c[0].id); |
180 |
} |
181 |
dijit.setWaiState(this.focusNode,"valuemin",this.minimum); |
182 |
dijit.setWaiState(this.focusNode,"valuemax",this.maximum); |
183 |
this.inherited(arguments); |
184 |
this._layoutHackIE7();
|
185 |
},destroy:function(){ |
186 |
this._movable.destroy();
|
187 |
if(this._inProgressAnim&&this._inProgressAnim.status!="stopped"){ |
188 |
this._inProgressAnim.stop(true); |
189 |
} |
190 |
this._supportingWidgets=dijit.findWidgets(this.domNode); |
191 |
this.inherited(arguments); |
192 |
}}); |
193 |
dojo.declare("dijit.form._SliderMover",dojo.dnd.Mover,{onMouseMove:function(e){ |
194 |
var _1d=this.widget; |
195 |
var _1e=_1d._abspos;
|
196 |
if(!_1e){
|
197 |
_1e=_1d._abspos=dojo.position(_1d.sliderBarContainer,true);
|
198 |
_1d._setPixelValue_=dojo.hitch(_1d,"_setPixelValue");
|
199 |
_1d._isReversed_=_1d._isReversed(); |
200 |
} |
201 |
var _1f=e[_1d._mousePixelCoord]-_1e[_1d._startingPixelCoord];
|
202 |
_1d._setPixelValue_(_1d._isReversed_?(_1e[_1d._pixelCount]-_1f):_1f,_1e[_1d._pixelCount],false);
|
203 |
},destroy:function(e){ |
204 |
dojo.dnd.Mover.prototype.destroy.apply(this,arguments); |
205 |
var _20=this.widget; |
206 |
_20._abspos=null;
|
207 |
_20._setValueAttr(_20.value,true);
|
208 |
}}); |
209 |
} |