1318 |
alexandre_ |
1 |
/*
|
|
|
2 |
Copyright (c) 2004-2006, The Dojo Foundation
|
|
|
3 |
All Rights Reserved.
|
|
|
4 |
|
|
|
5 |
Licensed under the Academic Free License version 2.1 or above OR the
|
|
|
6 |
modified BSD license. For more information on Dojo licensing, see:
|
|
|
7 |
|
|
|
8 |
http://dojotoolkit.org/community/licensing.shtml
|
|
|
9 |
*/
|
|
|
10 |
|
1422 |
alexandre_ |
11 |
|
|
|
12 |
|
1318 |
alexandre_ |
13 |
dojo.provide("dojo.widget.Slider");
|
|
|
14 |
dojo.require("dojo.event.*");
|
|
|
15 |
dojo.require("dojo.dnd.*");
|
|
|
16 |
dojo.require("dojo.dnd.HtmlDragMove");
|
|
|
17 |
dojo.require("dojo.widget.*");
|
|
|
18 |
dojo.require("dojo.html.layout");
|
|
|
19 |
dojo.widget.defineWidget("dojo.widget.Slider", dojo.widget.HtmlWidget, {minimumX:0, minimumY:0, maximumX:10, maximumY:10, snapValuesX:0, snapValuesY:0, _snapToGrid:true, isEnableX:true, isEnableY:true, _valueSizeX:0, _valueSizeY:0, _minX:0, _minY:0, _constraintWidth:0, _constraintHeight:0, _clipLeft:0, _clipRight:0, _clipTop:0, _clipBottom:0, _clipXdelta:0, _clipYdelta:0, initialValueX:0, initialValueY:0, flipX:false, flipY:false, clickSelect:true, activeDrag:false, templateCssString:".sliderMain {\n border: 0px !important;\n border-spacing: 0px !important;\n line-height: 0px !important;\n padding: 0px !important;\n display: -moz-inline-table !important;\n display: inline !important;\n -moz-user-focus: normal !important;\n}\n\n.sliderComponent {\n border: 0px;\n padding: 0px;\n margin: 0px;\n}\n\n.sliderHandle { \n top: 0px;\n left: 0px;\n z-index: 1000;\n position: absolute !important;\n}\n\n.sliderOutsetButton { \n border-style: outset;\n border-width: 0px 1px 1px 0px;\n border-color: black;\n}\n\n.sliderInsetButton { \n border-style: inset;\n border-width: 1px 0px 0px 1px;\n border-color: black;\n}\n\n.sliderButtonY {\n margin: 0px;\n padding: 0px;\n z-index: 900;\n}\n\n.sliderButtonX {\n margin: 0px;\n padding: 0px;\n z-index: 900;\n}\n\n.sliderBackground { \n z-index: 0;\n display: block !important;\n position: relative !important;\n}\n\n.sliderProgressBackground { \n z-index: 800;\n position: absolute !important;\n clip: rect(0px,0px,0px,0px);\n}\n\n.sliderBackgroundSizeOnly { \n}\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/Slider.css"), templateString:"<table _=\"weird end tag formatting is to prevent whitespace from becoming \" \n\tclass=\"sliderMain\" \n\tdojoAttachPoint=\"focusNode\" \n\tdojoAttachEvent=\"onmousedown:_setFocus; onkey:_handleKeyEvents; onkeyup:_buttonReleased; onmouseup:_buttonReleased; onmousewheel:_mouseWheeled;\"\n\ttabindex=\"0\" cols=3 cellpadding=0 cellspacing=0 style=\"\">\n\t<tr valign=middle align=center>\n\t\t<td class=\"sliderComponent\" colspan=3 dojoAttachPoint=topBorderNode style=\"\"\n\t\t\t><img class=\"sliderOutsetButton sliderButtonY\"\n\t\t\t\tdojoAttachPoint=topButtonNode \n\t\t\t\tdojoAttachEvent=\"onmousedown:_topButtonPressed; onmousemove:_discardEvent; ondblclick:_topButtonDoubleClicked;\"\n\t\t\t\tsrc=\"${this.topButtonSrc}\" \n\t\t\t\tstyle=\"${this.buttonStyleY}\"\n\t\t></td>\n\t</tr>\n\t<tr valign=middle align=center>\n\t\t<td class=\"sliderComponent\" dojoAttachPoint=leftBorderNode style=\"\"\n\t\t\t><img class=\"sliderOutsetButton sliderButtonX\"\n\t\t\t\tdojoAttachPoint=leftButtonNode\n\t\t\t\tdojoAttachEvent=\"onmousedown:_leftButtonPressed; onmousemove:_discardEvent; ondblclick:_leftButtonDoubleClicked;\"\n\t\t\t\tsrc=\"${this.leftButtonSrc}\" \n\t\t\t\tstyle=\"${this.buttonStyleX}\"\n\t\t></td>\n\t\t<td dojoAttachPoint=constrainingContainerNode \n\t\t\tclass=\"sliderComponent sliderBackground\"\n\t\t\tstyle=\"${this.backgroundStyle}\"\n\t\t\t><img src=\"${this.handleSrc}\" \n\t\t\t\tclass=sliderHandle\n\t\t\t\tdojoAttachPoint=sliderHandleNode\n\t\t\t\tstyle=\"${this.handleStyle}\"\n\t\t\t><img src=\"${this.progressBackgroundSrc}\"\n\t\t\t\tclass=\"sliderBackgroundSizeOnly sliderProgressBackground\"\n\t\t\t\tdojoAttachPoint=progressBackgroundNode\n\t\t\t\tstyle=\"${this.backgroundSize}\"\n\t\t\t><img src=\"${this.backgroundSrc}\" \n\t\t\t\tclass=sliderBackgroundSizeOnly\n\t\t\t\tdojoAttachPoint=sliderBackgroundNode\n\t\t\t\tstyle=\"${this.backgroundSize}\"\n\t\t></td>\n\t\t<td class=\"sliderComponent\" dojoAttachPoint=rightBorderNode style=\"\"\n\t\t\t><img class=\"sliderOutsetButton sliderButtonX\"\n\t\t\t\tdojoAttachPoint=rightButtonNode\n\t\t\t\tdojoAttachEvent=\"onmousedown:_rightButtonPressed; onmousemove:_discardEvent; ondblclick:_rightButtonDoubleClicked;\"\n\t\t\t\tsrc=\"${this.rightButtonSrc}\" \n\t\t\t\tstyle=\"${this.buttonStyleX}\"\n\t\t></td>\n\t</tr>\n\t<tr valign=middle align=center>\n\t\t<td class=\"sliderComponent\" colspan=3 dojoAttachPoint=bottomBorderNode style=\"\"\n\t\t\t><img class=\"sliderOutsetButton sliderButtonY\"\n\t\t\t\tdojoAttachPoint=bottomButtonNode \n\t\t\t\tdojoAttachEvent=\"onmousedown:_bottomButtonPressed; onmousemove:_discardEvent; ondblclick:_bottomButtonDoubleClicked;\"\n\t\t\t\tsrc=\"${this.bottomButtonSrc}\" \n\t\t\t\tstyle=\"${this.buttonStyleY}\"\n\t\t></td>\n\t</tr>\n</table>\n", _isDragInProgress:false, bottomButtonSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/slider_down_arrow.png"), topButtonSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/slider_up_arrow.png"), leftButtonSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/slider_left_arrow.png"), rightButtonSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/slider_right_arrow.png"), backgroundSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/blank.gif"), progressBackgroundSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/blank.gif"), backgroundSize:"width:200px;height:200px;", backgroundStyle:"", buttonStyleX:"", buttonStyleY:"", handleStyle:"", handleSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/slider-button.png"), showButtons:true, _eventCount:0, _typamaticTimer:null, _typamaticFunction:null, defaultTimeout:500, timeoutChangeRate:0.9, _currentTimeout:this.defaultTimeout, _handleKeyEvents:function (evt) {
|
|
|
20 |
if (!evt.key) {
|
|
|
21 |
return;
|
|
|
22 |
}
|
|
|
23 |
if (!evt.ctrlKey && !evt.altKey) {
|
|
|
24 |
switch (evt.key) {
|
|
|
25 |
case evt.KEY_LEFT_ARROW:
|
|
|
26 |
dojo.event.browser.stopEvent(evt);
|
|
|
27 |
this._leftButtonPressed(evt);
|
|
|
28 |
return;
|
|
|
29 |
case evt.KEY_RIGHT_ARROW:
|
|
|
30 |
dojo.event.browser.stopEvent(evt);
|
|
|
31 |
this._rightButtonPressed(evt);
|
|
|
32 |
return;
|
|
|
33 |
case evt.KEY_DOWN_ARROW:
|
|
|
34 |
dojo.event.browser.stopEvent(evt);
|
|
|
35 |
this._bottomButtonPressed(evt);
|
|
|
36 |
return;
|
|
|
37 |
case evt.KEY_UP_ARROW:
|
|
|
38 |
dojo.event.browser.stopEvent(evt);
|
|
|
39 |
this._topButtonPressed(evt);
|
|
|
40 |
return;
|
|
|
41 |
}
|
|
|
42 |
}
|
|
|
43 |
this._eventCount++;
|
|
|
44 |
}, _pressButton:function (buttonNode) {
|
|
|
45 |
buttonNode.className = buttonNode.className.replace("Outset", "Inset");
|
|
|
46 |
}, _releaseButton:function (buttonNode) {
|
|
|
47 |
buttonNode.className = buttonNode.className.replace("Inset", "Outset");
|
|
|
48 |
}, _buttonPressed:function (evt, buttonNode) {
|
|
|
49 |
this._setFocus();
|
|
|
50 |
if (typeof evt == "object") {
|
|
|
51 |
if (this._typamaticTimer != null) {
|
|
|
52 |
if (this._typamaticNode == buttonNode) {
|
|
|
53 |
return;
|
|
|
54 |
}
|
|
|
55 |
clearTimeout(this._typamaticTimer);
|
|
|
56 |
}
|
|
|
57 |
this._buttonReleased(null);
|
|
|
58 |
this._eventCount++;
|
|
|
59 |
this._typamaticTimer = null;
|
|
|
60 |
this._currentTimeout = this.defaultTimeout;
|
|
|
61 |
dojo.event.browser.stopEvent(evt);
|
|
|
62 |
} else {
|
|
|
63 |
if (evt != this._eventCount) {
|
|
|
64 |
this._buttonReleased(null);
|
|
|
65 |
return false;
|
|
|
66 |
}
|
|
|
67 |
}
|
|
|
68 |
if (buttonNode == this.leftButtonNode && this.isEnableX) {
|
|
|
69 |
this._snapX(dojo.html.getPixelValue(this.sliderHandleNode, "left") - this._valueSizeX);
|
|
|
70 |
} else {
|
|
|
71 |
if (buttonNode == this.rightButtonNode && this.isEnableX) {
|
|
|
72 |
this._snapX(dojo.html.getPixelValue(this.sliderHandleNode, "left") + this._valueSizeX);
|
|
|
73 |
} else {
|
|
|
74 |
if (buttonNode == this.topButtonNode && this.isEnableY) {
|
|
|
75 |
this._snapY(dojo.html.getPixelValue(this.sliderHandleNode, "top") - this._valueSizeY);
|
|
|
76 |
} else {
|
|
|
77 |
if (buttonNode == this.bottomButtonNode && this.isEnableY) {
|
|
|
78 |
this._snapY(dojo.html.getPixelValue(this.sliderHandleNode, "top") + this._valueSizeY);
|
|
|
79 |
} else {
|
|
|
80 |
return false;
|
|
|
81 |
}
|
|
|
82 |
}
|
|
|
83 |
}
|
|
|
84 |
}
|
|
|
85 |
this._pressButton(buttonNode);
|
|
|
86 |
this.notifyListeners();
|
|
|
87 |
this._typamaticNode = buttonNode;
|
|
|
88 |
this._typamaticTimer = dojo.lang.setTimeout(this, "_buttonPressed", this._currentTimeout, this._eventCount, buttonNode);
|
|
|
89 |
this._currentTimeout = Math.round(this._currentTimeout * this.timeoutChangeRate);
|
|
|
90 |
return false;
|
|
|
91 |
}, _bottomButtonPressed:function (evt) {
|
|
|
92 |
return this._buttonPressed(evt, this.bottomButtonNode);
|
|
|
93 |
}, _bottomButtonDoubleClicked:function (evt) {
|
|
|
94 |
var rc = this._bottomButtonPressed(evt);
|
|
|
95 |
dojo.lang.setTimeout(this, "_buttonReleased", 50, null);
|
|
|
96 |
return rc;
|
|
|
97 |
}, _topButtonPressed:function (evt) {
|
|
|
98 |
return this._buttonPressed(evt, this.topButtonNode);
|
|
|
99 |
}, _topButtonDoubleClicked:function (evt) {
|
|
|
100 |
var rc = this._topButtonPressed(evt);
|
|
|
101 |
dojo.lang.setTimeout(this, "_buttonReleased", 50, null);
|
|
|
102 |
return rc;
|
|
|
103 |
}, _leftButtonPressed:function (evt) {
|
|
|
104 |
return this._buttonPressed(evt, this.leftButtonNode);
|
|
|
105 |
}, _leftButtonDoubleClicked:function (evt) {
|
|
|
106 |
var rc = this._leftButtonPressed(evt);
|
|
|
107 |
dojo.lang.setTimeout(this, "_buttonReleased", 50, null);
|
|
|
108 |
return rc;
|
|
|
109 |
}, _rightButtonPressed:function (evt) {
|
|
|
110 |
return this._buttonPressed(evt, this.rightButtonNode);
|
|
|
111 |
}, _rightButtonDoubleClicked:function (evt) {
|
|
|
112 |
var rc = this._rightButtonPressed(evt);
|
|
|
113 |
dojo.lang.setTimeout(this, "_buttonReleased", 50, null);
|
|
|
114 |
return rc;
|
|
|
115 |
}, _buttonReleased:function (evt) {
|
|
|
116 |
if (typeof evt == "object" && evt != null && typeof evt.keyCode != "undefined" && evt.keyCode != null) {
|
|
|
117 |
var keyCode = evt.keyCode;
|
|
|
118 |
switch (keyCode) {
|
|
|
119 |
case evt.KEY_LEFT_ARROW:
|
|
|
120 |
case evt.KEY_RIGHT_ARROW:
|
|
|
121 |
case evt.KEY_DOWN_ARROW:
|
|
|
122 |
case evt.KEY_UP_ARROW:
|
|
|
123 |
dojo.event.browser.stopEvent(evt);
|
|
|
124 |
break;
|
|
|
125 |
}
|
|
|
126 |
}
|
|
|
127 |
this._releaseButton(this.topButtonNode);
|
|
|
128 |
this._releaseButton(this.bottomButtonNode);
|
|
|
129 |
this._releaseButton(this.leftButtonNode);
|
|
|
130 |
this._releaseButton(this.rightButtonNode);
|
|
|
131 |
this._eventCount++;
|
|
|
132 |
if (this._typamaticTimer != null) {
|
|
|
133 |
clearTimeout(this._typamaticTimer);
|
|
|
134 |
}
|
|
|
135 |
this._typamaticTimer = null;
|
|
|
136 |
this._currentTimeout = this.defaultTimeout;
|
|
|
137 |
}, _mouseWheeled:function (evt) {
|
|
|
138 |
var scrollAmount = 0;
|
|
|
139 |
if (typeof evt.wheelDelta == "number") {
|
|
|
140 |
scrollAmount = evt.wheelDelta;
|
|
|
141 |
} else {
|
|
|
142 |
if (typeof evt.detail == "number") {
|
|
|
143 |
scrollAmount = -evt.detail;
|
|
|
144 |
}
|
|
|
145 |
}
|
|
|
146 |
if (this.isEnableY) {
|
|
|
147 |
if (scrollAmount > 0) {
|
|
|
148 |
this._topButtonPressed(evt);
|
|
|
149 |
this._buttonReleased(evt);
|
|
|
150 |
} else {
|
|
|
151 |
if (scrollAmount < 0) {
|
|
|
152 |
this._bottomButtonPressed(evt);
|
|
|
153 |
this._buttonReleased(evt);
|
|
|
154 |
}
|
|
|
155 |
}
|
|
|
156 |
} else {
|
|
|
157 |
if (this.isEnableX) {
|
|
|
158 |
if (scrollAmount > 0) {
|
|
|
159 |
this._rightButtonPressed(evt);
|
|
|
160 |
this._buttonReleased(evt);
|
|
|
161 |
} else {
|
|
|
162 |
if (scrollAmount < 0) {
|
|
|
163 |
this._leftButtonPressed(evt);
|
|
|
164 |
this._buttonReleased(evt);
|
|
|
165 |
}
|
|
|
166 |
}
|
|
|
167 |
}
|
|
|
168 |
}
|
|
|
169 |
}, _discardEvent:function (evt) {
|
|
|
170 |
dojo.event.browser.stopEvent(evt);
|
|
|
171 |
}, _setFocus:function () {
|
|
|
172 |
if (this.focusNode.focus) {
|
|
|
173 |
this.focusNode.focus();
|
|
|
174 |
}
|
|
|
175 |
}, fillInTemplate:function (args, frag) {
|
|
|
176 |
var source = this.getFragNodeRef(frag);
|
|
|
177 |
dojo.html.copyStyle(this.domNode, source);
|
|
|
178 |
var padding = this.domNode.style.padding;
|
|
|
179 |
if (dojo.lang.isString(padding) && padding != "" && padding != "0px" && padding != "0px 0px 0px 0px") {
|
|
|
180 |
this.topBorderNode.style.padding = this.bottomBorderNode.style.padding = padding;
|
|
|
181 |
this.topBorderNode.style.paddingBottom = "0px";
|
|
|
182 |
this.bottomBorderNode.style.paddingTop = "0px";
|
|
|
183 |
this.rightBorderNode.style.paddingRight = this.domNode.style.paddingRight;
|
|
|
184 |
this.leftBorderNode.style.paddingLeft = this.domNode.style.paddingLeft;
|
|
|
185 |
this.domNode.style.padding = "0px 0px 0px 0px";
|
|
|
186 |
}
|
|
|
187 |
var borderWidth = this.domNode.style.borderWidth;
|
|
|
188 |
if (dojo.lang.isString(borderWidth) && borderWidth != "" && borderWidth != "0px" && borderWidth != "0px 0px 0px 0px") {
|
|
|
189 |
this.topBorderNode.style.borderStyle = this.rightBorderNode.style.borderStyle = this.bottomBorderNode.style.borderStyle = this.leftBorderNode.style.borderStyle = this.domNode.style.borderStyle;
|
|
|
190 |
this.topBorderNode.style.borderColor = this.rightBorderNode.style.borderColor = this.bottomBorderNode.style.borderColor = this.leftBorderNode.style.borderColor = this.domNode.style.borderColor;
|
|
|
191 |
this.topBorderNode.style.borderWidth = this.bottomBorderNode.style.borderWidth = borderWidth;
|
|
|
192 |
this.topBorderNode.style.borderBottomWidth = "0px";
|
|
|
193 |
this.bottomBorderNode.style.borderTopWidth = "0px";
|
|
|
194 |
this.rightBorderNode.style.borderRightWidth = this.domNode.style.borderRightWidth;
|
|
|
195 |
this.leftBorderNode.style.borderLeftWidth = this.domNode.style.borderLeftWidth;
|
|
|
196 |
this.domNode.style.borderWidth = "0px 0px 0px 0px";
|
|
|
197 |
}
|
|
|
198 |
this._handleMove = new dojo.widget._SliderDragMoveSource(this.sliderHandleNode);
|
|
|
199 |
this._handleMove.setParent(this);
|
|
|
200 |
if (this.clickSelect) {
|
|
|
201 |
dojo.event.connect(this.constrainingContainerNode, "onmousedown", this, "_onClick");
|
|
|
202 |
}
|
|
|
203 |
if (this.isEnableX) {
|
|
|
204 |
this.setValueX(!isNaN(this.initialValueX) ? this.initialValueX : (!isNaN(this.minimumX) ? this.minimumX : 0));
|
|
|
205 |
}
|
|
|
206 |
if (!this.isEnableX || !this.showButtons) {
|
|
|
207 |
this.rightButtonNode.style.width = "1px";
|
|
|
208 |
this.rightButtonNode.style.visibility = "hidden";
|
|
|
209 |
this.leftButtonNode.style.width = "1px";
|
|
|
210 |
this.leftButtonNode.style.visibility = "hidden";
|
|
|
211 |
}
|
|
|
212 |
if (this.isEnableY) {
|
|
|
213 |
this.setValueY(!isNaN(this.initialValueY) ? this.initialValueY : (!isNaN(this.minimumY) ? this.minimumY : 0));
|
|
|
214 |
}
|
|
|
215 |
if (!this.isEnableY || !this.showButtons) {
|
|
|
216 |
this.bottomButtonNode.style.width = "1px";
|
|
|
217 |
this.bottomButtonNode.style.visibility = "hidden";
|
|
|
218 |
this.topButtonNode.style.width = "1px";
|
|
|
219 |
this.topButtonNode.style.visibility = "hidden";
|
|
|
220 |
}
|
|
|
221 |
if (this.focusNode.addEventListener) {
|
|
|
222 |
this.focusNode.addEventListener("DOMMouseScroll", dojo.lang.hitch(this, "_mouseWheeled"), false);
|
|
|
223 |
}
|
|
|
224 |
}, _snapX:function (x) {
|
|
|
225 |
if (x < 0) {
|
|
|
226 |
x = 0;
|
|
|
227 |
} else {
|
|
|
228 |
if (x > this._constraintWidth) {
|
|
|
229 |
x = this._constraintWidth;
|
|
|
230 |
} else {
|
|
|
231 |
var selectedValue = Math.round(x / this._valueSizeX);
|
|
|
232 |
x = Math.round(selectedValue * this._valueSizeX);
|
|
|
233 |
}
|
|
|
234 |
}
|
|
|
235 |
this.sliderHandleNode.style.left = x + "px";
|
|
|
236 |
if (this.flipX) {
|
|
|
237 |
this._clipLeft = x + this._clipXdelta;
|
|
|
238 |
} else {
|
|
|
239 |
this._clipRight = x + this._clipXdelta;
|
|
|
240 |
}
|
|
|
241 |
this.progressBackgroundNode.style.clip = "rect(" + this._clipTop + "px," + this._clipRight + "px," + this._clipBottom + "px," + this._clipLeft + "px)";
|
|
|
242 |
}, _calc_valueSizeX:function () {
|
|
|
243 |
var constrainingCtrBox = dojo.html.getContentBox(this.constrainingContainerNode);
|
|
|
244 |
var sliderHandleBox = dojo.html.getContentBox(this.sliderHandleNode);
|
|
|
245 |
if (isNaN(constrainingCtrBox.width) || isNaN(sliderHandleBox.width) || constrainingCtrBox.width <= 0 || sliderHandleBox.width <= 0) {
|
|
|
246 |
return false;
|
|
|
247 |
}
|
|
|
248 |
this._constraintWidth = constrainingCtrBox.width + dojo.html.getPadding(this.constrainingContainerNode).width - sliderHandleBox.width;
|
|
|
249 |
if (this.flipX) {
|
|
|
250 |
this._clipLeft = this._clipRight = constrainingCtrBox.width;
|
|
|
251 |
} else {
|
|
|
252 |
this._clipLeft = this._clipRight = 0;
|
|
|
253 |
}
|
|
|
254 |
this._clipXdelta = sliderHandleBox.width >> 1;
|
|
|
255 |
if (!this.isEnableY) {
|
|
|
256 |
this._clipTop = 0;
|
|
|
257 |
this._clipBottom = constrainingCtrBox.height;
|
|
|
258 |
}
|
|
|
259 |
if (this._constraintWidth <= 0) {
|
|
|
260 |
return false;
|
|
|
261 |
}
|
|
|
262 |
if (this.snapValuesX == 0) {
|
|
|
263 |
this.snapValuesX = this._constraintWidth + 1;
|
|
|
264 |
}
|
|
|
265 |
this._valueSizeX = this._constraintWidth / (this.snapValuesX - 1);
|
|
|
266 |
return true;
|
|
|
267 |
}, setValueX:function (value) {
|
|
|
268 |
if (0 == this._valueSizeX) {
|
|
|
269 |
if (this._calc_valueSizeX() == false) {
|
|
|
270 |
dojo.lang.setTimeout(this, "setValueX", 100, value);
|
|
|
271 |
return;
|
|
|
272 |
}
|
|
|
273 |
}
|
|
|
274 |
if (isNaN(value)) {
|
|
|
275 |
value = 0;
|
|
|
276 |
}
|
|
|
277 |
if (value > this.maximumX) {
|
|
|
278 |
value = this.maximumX;
|
|
|
279 |
} else {
|
|
|
280 |
if (value < this.minimumX) {
|
|
|
281 |
value = this.minimumX;
|
|
|
282 |
}
|
|
|
283 |
}
|
|
|
284 |
var pixelPercent = (value - this.minimumX) / (this.maximumX - this.minimumX);
|
|
|
285 |
if (this.flipX) {
|
|
|
286 |
pixelPercent = 1 - pixelPercent;
|
|
|
287 |
}
|
|
|
288 |
this._snapX(pixelPercent * this._constraintWidth);
|
|
|
289 |
this.notifyListeners();
|
|
|
290 |
}, getValueX:function () {
|
|
|
291 |
var pixelPercent = dojo.html.getPixelValue(this.sliderHandleNode, "left") / this._constraintWidth;
|
|
|
292 |
if (this.flipX) {
|
|
|
293 |
pixelPercent = 1 - pixelPercent;
|
|
|
294 |
}
|
|
|
295 |
return Math.round(pixelPercent * (this.snapValuesX - 1)) * ((this.maximumX - this.minimumX) / (this.snapValuesX - 1)) + this.minimumX;
|
|
|
296 |
}, _snapY:function (y) {
|
|
|
297 |
if (y < 0) {
|
|
|
298 |
y = 0;
|
|
|
299 |
} else {
|
|
|
300 |
if (y > this._constraintHeight) {
|
|
|
301 |
y = this._constraintHeight;
|
|
|
302 |
} else {
|
|
|
303 |
var selectedValue = Math.round(y / this._valueSizeY);
|
|
|
304 |
y = Math.round(selectedValue * this._valueSizeY);
|
|
|
305 |
}
|
|
|
306 |
}
|
|
|
307 |
this.sliderHandleNode.style.top = y + "px";
|
|
|
308 |
if (this.flipY) {
|
|
|
309 |
this._clipTop = y + this._clipYdelta;
|
|
|
310 |
} else {
|
|
|
311 |
this._clipBottom = y + this._clipYdelta;
|
|
|
312 |
}
|
|
|
313 |
this.progressBackgroundNode.style.clip = "rect(" + this._clipTop + "px," + this._clipRight + "px," + this._clipBottom + "px," + this._clipLeft + "px)";
|
|
|
314 |
}, _calc_valueSizeY:function () {
|
|
|
315 |
var constrainingCtrBox = dojo.html.getContentBox(this.constrainingContainerNode);
|
|
|
316 |
var sliderHandleBox = dojo.html.getContentBox(this.sliderHandleNode);
|
|
|
317 |
if (isNaN(constrainingCtrBox.height) || isNaN(sliderHandleBox.height) || constrainingCtrBox.height <= 0 || sliderHandleBox.height <= 0) {
|
|
|
318 |
return false;
|
|
|
319 |
}
|
|
|
320 |
this._constraintHeight = constrainingCtrBox.height + dojo.html.getPadding(this.constrainingContainerNode).height - sliderHandleBox.height;
|
|
|
321 |
if (this.flipY) {
|
|
|
322 |
this._clipTop = this._clipBottom = constrainingCtrBox.height;
|
|
|
323 |
} else {
|
|
|
324 |
this._clipTop = this._clipBottom = 0;
|
|
|
325 |
}
|
|
|
326 |
this._clipYdelta = sliderHandleBox.height >> 1;
|
|
|
327 |
if (!this.isEnableX) {
|
|
|
328 |
this._clipLeft = 0;
|
|
|
329 |
this._clipRight = constrainingCtrBox.width;
|
|
|
330 |
}
|
|
|
331 |
if (this._constraintHeight <= 0) {
|
|
|
332 |
return false;
|
|
|
333 |
}
|
|
|
334 |
if (this.snapValuesY == 0) {
|
|
|
335 |
this.snapValuesY = this._constraintHeight + 1;
|
|
|
336 |
}
|
|
|
337 |
this._valueSizeY = this._constraintHeight / (this.snapValuesY - 1);
|
|
|
338 |
return true;
|
|
|
339 |
}, setValueY:function (value) {
|
|
|
340 |
if (0 == this._valueSizeY) {
|
|
|
341 |
if (this._calc_valueSizeY() == false) {
|
|
|
342 |
dojo.lang.setTimeout(this, "setValueY", 100, value);
|
|
|
343 |
return;
|
|
|
344 |
}
|
|
|
345 |
}
|
|
|
346 |
if (isNaN(value)) {
|
|
|
347 |
value = 0;
|
|
|
348 |
}
|
|
|
349 |
if (value > this.maximumY) {
|
|
|
350 |
value = this.maximumY;
|
|
|
351 |
} else {
|
|
|
352 |
if (value < this.minimumY) {
|
|
|
353 |
value = this.minimumY;
|
|
|
354 |
}
|
|
|
355 |
}
|
|
|
356 |
var pixelPercent = (value - this.minimumY) / (this.maximumY - this.minimumY);
|
|
|
357 |
if (this.flipY) {
|
|
|
358 |
pixelPercent = 1 - pixelPercent;
|
|
|
359 |
}
|
|
|
360 |
this._snapY(pixelPercent * this._constraintHeight);
|
|
|
361 |
this.notifyListeners();
|
|
|
362 |
}, getValueY:function () {
|
|
|
363 |
var pixelPercent = dojo.html.getPixelValue(this.sliderHandleNode, "top") / this._constraintHeight;
|
|
|
364 |
if (this.flipY) {
|
|
|
365 |
pixelPercent = 1 - pixelPercent;
|
|
|
366 |
}
|
|
|
367 |
return Math.round(pixelPercent * (this.snapValuesY - 1)) * ((this.maximumY - this.minimumY) / (this.snapValuesY - 1)) + this.minimumY;
|
|
|
368 |
}, _onClick:function (evt) {
|
|
|
369 |
if (this._isDragInProgress) {
|
|
|
370 |
return;
|
|
|
371 |
}
|
|
|
372 |
var parent = dojo.html.getAbsolutePosition(this.constrainingContainerNode, true, dojo.html.boxSizing.MARGIN_BOX);
|
|
|
373 |
var content = dojo.html.getContentBox(this._handleMove.domNode);
|
|
|
374 |
if (this.isEnableX) {
|
|
|
375 |
var x = evt.pageX - parent.x - (content.width >> 1);
|
|
|
376 |
this._snapX(x);
|
|
|
377 |
}
|
|
|
378 |
if (this.isEnableY) {
|
|
|
379 |
var y = evt.pageY - parent.y - (content.height >> 1);
|
|
|
380 |
this._snapY(y);
|
|
|
381 |
}
|
|
|
382 |
this.notifyListeners();
|
|
|
383 |
}, notifyListeners:function () {
|
|
|
384 |
this.onValueChanged(this.getValueX(), this.getValueY());
|
|
|
385 |
}, onValueChanged:function (x, y) {
|
|
|
386 |
}});
|
|
|
387 |
dojo.widget.defineWidget("dojo.widget.SliderHorizontal", dojo.widget.Slider, {isEnableX:true, isEnableY:false, initialValue:"", snapValues:"", minimum:"", maximum:"", buttonStyle:"", backgroundSize:"height:10px;width:200px;", backgroundSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/slider-bg.gif"), flip:false, postMixInProperties:function () {
|
|
|
388 |
dojo.widget.SliderHorizontal.superclass.postMixInProperties.apply(this, arguments);
|
|
|
389 |
if (!isNaN(parseFloat(this.initialValue))) {
|
|
|
390 |
this.initialValueX = parseFloat(this.initialValue);
|
|
|
391 |
}
|
|
|
392 |
if (!isNaN(parseFloat(this.minimum))) {
|
|
|
393 |
this.minimumX = parseFloat(this.minimum);
|
|
|
394 |
}
|
|
|
395 |
if (!isNaN(parseFloat(this.maximum))) {
|
|
|
396 |
this.maximumX = parseFloat(this.maximum);
|
|
|
397 |
}
|
|
|
398 |
if (!isNaN(parseInt(this.snapValues))) {
|
|
|
399 |
this.snapValuesX = parseInt(this.snapValues);
|
|
|
400 |
}
|
|
|
401 |
if (dojo.lang.isString(this.buttonStyle) && this.buttonStyle != "") {
|
|
|
402 |
this.buttonStyleX = this.buttonStyle;
|
|
|
403 |
}
|
|
|
404 |
if (dojo.lang.isBoolean(this.flip)) {
|
|
|
405 |
this.flipX = this.flip;
|
|
|
406 |
}
|
|
|
407 |
}, notifyListeners:function () {
|
|
|
408 |
this.onValueChanged(this.getValueX());
|
|
|
409 |
}, getValue:function () {
|
|
|
410 |
return this.getValueX();
|
|
|
411 |
}, setValue:function (value) {
|
|
|
412 |
this.setValueX(value);
|
|
|
413 |
}, onValueChanged:function (value) {
|
|
|
414 |
}});
|
|
|
415 |
dojo.widget.defineWidget("dojo.widget.SliderVertical", dojo.widget.Slider, {isEnableX:false, isEnableY:true, initialValue:"", snapValues:"", minimum:"", maximum:"", buttonStyle:"", backgroundSize:"width:10px;height:200px;", backgroundSrc:dojo.uri.moduleUri("dojo.widget", "templates/images/slider-bg-vert.gif"), flip:false, postMixInProperties:function () {
|
|
|
416 |
dojo.widget.SliderVertical.superclass.postMixInProperties.apply(this, arguments);
|
|
|
417 |
if (!isNaN(parseFloat(this.initialValue))) {
|
|
|
418 |
this.initialValueY = parseFloat(this.initialValue);
|
|
|
419 |
}
|
|
|
420 |
if (!isNaN(parseFloat(this.minimum))) {
|
|
|
421 |
this.minimumY = parseFloat(this.minimum);
|
|
|
422 |
}
|
|
|
423 |
if (!isNaN(parseFloat(this.maximum))) {
|
|
|
424 |
this.maximumY = parseFloat(this.maximum);
|
|
|
425 |
}
|
|
|
426 |
if (!isNaN(parseInt(this.snapValues))) {
|
|
|
427 |
this.snapValuesY = parseInt(this.snapValues);
|
|
|
428 |
}
|
|
|
429 |
if (dojo.lang.isString(this.buttonStyle) && this.buttonStyle != "") {
|
|
|
430 |
this.buttonStyleY = this.buttonStyle;
|
|
|
431 |
}
|
|
|
432 |
if (dojo.lang.isBoolean(this.flip)) {
|
|
|
433 |
this.flipY = this.flip;
|
|
|
434 |
}
|
|
|
435 |
}, notifyListeners:function () {
|
|
|
436 |
this.onValueChanged(this.getValueY());
|
|
|
437 |
}, getValue:function () {
|
|
|
438 |
return this.getValueY();
|
|
|
439 |
}, setValue:function (value) {
|
|
|
440 |
this.setValueY(value);
|
|
|
441 |
}, onValueChanged:function (value) {
|
|
|
442 |
}});
|
|
|
443 |
dojo.declare("dojo.widget._SliderDragMoveSource", dojo.dnd.HtmlDragMoveSource, {slider:null, onDragStart:function (evt) {
|
|
|
444 |
this.slider._isDragInProgress = true;
|
|
|
445 |
var dragObj = this.createDragMoveObject();
|
|
|
446 |
this.slider.notifyListeners();
|
|
|
447 |
return dragObj;
|
|
|
448 |
}, onDragEnd:function (evt) {
|
|
|
449 |
this.slider._isDragInProgress = false;
|
|
|
450 |
this.slider.notifyListeners();
|
|
|
451 |
}, createDragMoveObject:function () {
|
|
|
452 |
var dragObj = new dojo.widget._SliderDragMoveObject(this.dragObject, this.type);
|
|
|
453 |
dragObj.slider = this.slider;
|
|
|
454 |
if (this.dragClass) {
|
|
|
455 |
dragObj.dragClass = this.dragClass;
|
|
|
456 |
}
|
|
|
457 |
return dragObj;
|
|
|
458 |
}, setParent:function (slider) {
|
|
|
459 |
this.slider = slider;
|
|
|
460 |
}});
|
|
|
461 |
dojo.declare("dojo.widget._SliderDragMoveObject", dojo.dnd.HtmlDragMoveObject, {slider:null, onDragMove:function (evt) {
|
|
|
462 |
this.updateDragOffset();
|
|
|
463 |
if (this.slider.isEnableX) {
|
|
|
464 |
var x = this.dragOffset.x + evt.pageX;
|
|
|
465 |
this.slider._snapX(x);
|
|
|
466 |
}
|
|
|
467 |
if (this.slider.isEnableY) {
|
|
|
468 |
var y = this.dragOffset.y + evt.pageY;
|
|
|
469 |
this.slider._snapY(y);
|
|
|
470 |
}
|
|
|
471 |
if (this.slider.activeDrag) {
|
|
|
472 |
this.slider.notifyListeners();
|
|
|
473 |
}
|
|
|
474 |
}});
|
|
|
475 |
|