root / trunk / web / dojo / dijit / form / HorizontalSlider.js
History | View | Annotate | Download (10 KB)
1 | 9 | andrej.cim | /*
|
---|---|---|---|
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 | } |