|
602
|
1 |
YUI.add('dial', function (Y, NAME) { |
|
|
2 |
|
|
|
3 |
/** |
|
|
4 |
* Create a circular dial value range input visualized as a draggable handle on a |
|
|
5 |
* background element. |
|
|
6 |
* |
|
|
7 |
* @module dial |
|
|
8 |
*/ |
|
|
9 |
var supportsVML = false; |
|
|
10 |
//testVMLNode; |
|
|
11 |
|
|
|
12 |
if (Y.UA.ie && Y.UA.ie < 9){ |
|
|
13 |
supportsVML = true; |
|
|
14 |
} |
|
|
15 |
|
|
|
16 |
var Lang = Y.Lang, |
|
|
17 |
Widget = Y.Widget, |
|
|
18 |
Node = Y.Node; |
|
|
19 |
|
|
|
20 |
/** |
|
|
21 |
* Create a dial to represent an input control capable of representing a |
|
|
22 |
* series of intermediate states based on the position of the Dial's handle. |
|
|
23 |
* These states are typically aligned to a value algorithm whereby the angle of the handle's |
|
|
24 |
* position corresponds to a given value. |
|
|
25 |
* |
|
|
26 |
* @class Dial |
|
|
27 |
* @extends Widget |
|
|
28 |
* @param config {Object} Configuration object |
|
|
29 |
* @constructor |
|
|
30 |
*/ |
|
|
31 |
function Dial(config) { |
|
|
32 |
Dial.superclass.constructor.apply(this, arguments); |
|
|
33 |
} |
|
|
34 |
|
|
|
35 |
// Y.Dial static properties |
|
|
36 |
|
|
|
37 |
/** |
|
|
38 |
* The identity of the widget. |
|
|
39 |
* |
|
|
40 |
* @property NAME |
|
|
41 |
* @type String |
|
|
42 |
* @default 'dial' |
|
|
43 |
* @readOnly |
|
|
44 |
* @protected |
|
|
45 |
* @static |
|
|
46 |
*/ |
|
|
47 |
Dial.NAME = "dial"; |
|
|
48 |
|
|
|
49 |
/** |
|
|
50 |
* Static property used to define the default attribute configuration of |
|
|
51 |
* the Widget. |
|
|
52 |
* |
|
|
53 |
* @property ATTRS |
|
|
54 |
* @type {Object} |
|
|
55 |
* @protected |
|
|
56 |
* @static |
|
|
57 |
*/ |
|
|
58 |
Dial.ATTRS = { |
|
|
59 |
|
|
|
60 |
/** |
|
|
61 |
* minimum value allowed |
|
|
62 |
* |
|
|
63 |
* @attribute min |
|
|
64 |
* @type {Number} |
|
|
65 |
* @default -220 |
|
|
66 |
*/ |
|
|
67 |
min : { |
|
|
68 |
value:-220 |
|
|
69 |
}, |
|
|
70 |
|
|
|
71 |
/** |
|
|
72 |
* maximum value allowed |
|
|
73 |
* |
|
|
74 |
* @attribute max |
|
|
75 |
* @type {Number} |
|
|
76 |
* @default 220 |
|
|
77 |
*/ |
|
|
78 |
max : { |
|
|
79 |
value:220 |
|
|
80 |
}, |
|
|
81 |
|
|
|
82 |
/** |
|
|
83 |
* diameter of the circular background object. |
|
|
84 |
* Other objects scale accordingly. |
|
|
85 |
* Set this only before rendering. |
|
|
86 |
* |
|
|
87 |
* @attribute diameter |
|
|
88 |
* @type {Number} the number of px in diameter |
|
|
89 |
* @default 100 |
|
|
90 |
* @writeOnce |
|
|
91 |
*/ |
|
|
92 |
diameter : { |
|
|
93 |
value:100 |
|
|
94 |
}, |
|
|
95 |
|
|
|
96 |
/** |
|
|
97 |
* diameter of the handle object which users drag to change the value. |
|
|
98 |
* Dial sets the pixel dimension of the handle equal to handleDiameter * diameter. |
|
|
99 |
* Set this only before rendering. |
|
|
100 |
* |
|
|
101 |
* @attribute handleDiameter |
|
|
102 |
* @type {Number} |
|
|
103 |
* @default 0.2 |
|
|
104 |
* @writeOnce |
|
|
105 |
*/ |
|
|
106 |
handleDiameter : { |
|
|
107 |
value:0.2 |
|
|
108 |
}, |
|
|
109 |
|
|
|
110 |
/** |
|
|
111 |
* diameter of the marker object which follows the angle of the handle during value changes. |
|
|
112 |
* Dial sets the pixel dimension of the marker equal to markerDiameter * diameter. |
|
|
113 |
* Set this only before rendering. |
|
|
114 |
* |
|
|
115 |
* @attribute markerDiameter |
|
|
116 |
* @type {Number} |
|
|
117 |
* @default 0.1 |
|
|
118 |
* @writeOnce |
|
|
119 |
*/ |
|
|
120 |
markerDiameter : { |
|
|
121 |
value:0.1 |
|
|
122 |
}, |
|
|
123 |
|
|
|
124 |
/** |
|
|
125 |
* diameter of the center button object. |
|
|
126 |
* Dial sets the pixel dimension of the centerButton equal to centerButtonDiameter * diameter. |
|
|
127 |
* Set this only before rendering. |
|
|
128 |
* |
|
|
129 |
* @attribute centerButtonDiameter |
|
|
130 |
* @type {Number} |
|
|
131 |
* @default 0.1 |
|
|
132 |
* @writeOnce |
|
|
133 |
*/ |
|
|
134 |
centerButtonDiameter : { |
|
|
135 |
value:0.5 |
|
|
136 |
}, |
|
|
137 |
|
|
|
138 |
/** |
|
|
139 |
* initial value of the Dial |
|
|
140 |
* |
|
|
141 |
* @attribute value |
|
|
142 |
* @type {Number} |
|
|
143 |
* @default 0 |
|
|
144 |
*/ |
|
|
145 |
value : { |
|
|
146 |
value:0, |
|
|
147 |
validator: function(val) { |
|
|
148 |
return this._validateValue(val); |
|
|
149 |
} |
|
|
150 |
}, |
|
|
151 |
|
|
|
152 |
/** |
|
|
153 |
* amount to increment/decrement the dial value |
|
|
154 |
* when the arrow up/down/left/right keys are pressed |
|
|
155 |
* |
|
|
156 |
* @attribute minorStep |
|
|
157 |
* @type {Number} |
|
|
158 |
* @default 1 |
|
|
159 |
*/ |
|
|
160 |
minorStep : { |
|
|
161 |
value:1 |
|
|
162 |
}, |
|
|
163 |
|
|
|
164 |
/** |
|
|
165 |
* amount to increment/decrement the dial value |
|
|
166 |
* when the page up/down keys are pressed |
|
|
167 |
* |
|
|
168 |
* @attribute majorStep |
|
|
169 |
* @type {Number} |
|
|
170 |
* @default 10 |
|
|
171 |
*/ |
|
|
172 |
majorStep : { |
|
|
173 |
value:10 |
|
|
174 |
}, |
|
|
175 |
|
|
|
176 |
/** |
|
|
177 |
* number of value increments in one 360 degree revolution |
|
|
178 |
* of the handle around the dial |
|
|
179 |
* |
|
|
180 |
* @attribute stepsPerRevolution |
|
|
181 |
* @type {Number} |
|
|
182 |
* @default 100 |
|
|
183 |
*/ |
|
|
184 |
stepsPerRevolution : { |
|
|
185 |
value:100 |
|
|
186 |
}, |
|
|
187 |
|
|
|
188 |
/** |
|
|
189 |
* number of decimal places of accuracy in the value |
|
|
190 |
* |
|
|
191 |
* @attribute decimalPlaces |
|
|
192 |
* @type {Number} |
|
|
193 |
* @default 0 |
|
|
194 |
*/ |
|
|
195 |
decimalPlaces : { |
|
|
196 |
value:0 |
|
|
197 |
}, |
|
|
198 |
|
|
|
199 |
/** |
|
|
200 |
* visible strings for the dial UI. This attribute is |
|
|
201 |
* defined by the base Widget class but has an empty value. The |
|
|
202 |
* Dial is simply providing a default value for the attribute. |
|
|
203 |
* Gets localized strings in the current language |
|
|
204 |
* |
|
|
205 |
* @attribute strings |
|
|
206 |
* @type {Object} the values are HTML strings |
|
|
207 |
* @default {label: 'My label', resetStr: 'Reset', tooltipHandle: 'Drag to set value'} |
|
|
208 |
*/ |
|
|
209 |
strings: { |
|
|
210 |
valueFn: function () { |
|
|
211 |
return Y.Intl.get('dial'); |
|
|
212 |
} |
|
|
213 |
}, |
|
|
214 |
|
|
|
215 |
/** |
|
|
216 |
* distance from the center of the dial to the |
|
|
217 |
* center of the marker and handle, when at rest. |
|
|
218 |
* The value is a percent of the radius of the dial. |
|
|
219 |
* |
|
|
220 |
* @attribute handleDistance |
|
|
221 |
* @type {number} |
|
|
222 |
* @default 0.75 |
|
|
223 |
*/ |
|
|
224 |
handleDistance:{ |
|
|
225 |
value:0.75 |
|
|
226 |
} |
|
|
227 |
|
|
|
228 |
}; |
|
|
229 |
|
|
|
230 |
/** |
|
|
231 |
* returns a properly formed yui class name |
|
|
232 |
* |
|
|
233 |
* @method |
|
|
234 |
* @param {String} string to be appended at the end of class name |
|
|
235 |
* @return |
|
|
236 |
* @private |
|
|
237 |
*/ |
|
|
238 |
function makeClassName(str) { |
|
|
239 |
return Y.ClassNameManager.getClassName(Dial.NAME, str); |
|
|
240 |
} |
|
|
241 |
|
|
|
242 |
/** array of static constants used to identify the classname applied to the Dial DOM objects |
|
|
243 |
* |
|
|
244 |
* @property CSS_CLASSES |
|
|
245 |
* @type {Array} |
|
|
246 |
* @private |
|
|
247 |
* @static |
|
|
248 |
*/ |
|
|
249 |
Dial.CSS_CLASSES = { |
|
|
250 |
label : makeClassName("label"), |
|
|
251 |
labelString : makeClassName("label-string"), |
|
|
252 |
valueString : makeClassName("value-string"), |
|
|
253 |
northMark : makeClassName("north-mark"), |
|
|
254 |
ring : makeClassName('ring'), |
|
|
255 |
ringVml : makeClassName('ring-vml'), |
|
|
256 |
marker : makeClassName("marker"), |
|
|
257 |
markerVml : makeClassName("marker-vml"), |
|
|
258 |
markerMaxMin : makeClassName("marker-max-min"), |
|
|
259 |
centerButton : makeClassName("center-button"), |
|
|
260 |
centerButtonVml : makeClassName('center-button-vml'), |
|
|
261 |
resetString : makeClassName("reset-string"), |
|
|
262 |
handle : makeClassName("handle"), |
|
|
263 |
handleVml : makeClassName("handle-vml"), |
|
|
264 |
hidden : makeClassName("hidden"), |
|
|
265 |
dragging : Y.ClassNameManager.getClassName("dd-dragging") |
|
|
266 |
}; |
|
|
267 |
|
|
|
268 |
/* Static constants used to define the markup templates used to create Dial DOM elements */ |
|
|
269 |
|
|
|
270 |
|
|
|
271 |
/** |
|
|
272 |
* template that will contain the Dial's label. |
|
|
273 |
* |
|
|
274 |
* @property LABEL_TEMPLATE |
|
|
275 |
* @type {String} |
|
|
276 |
* @default <div class="[...-label]"><span id="" class="[...-label-string]">{label}</span><span class="[...-value-string]"></span></div> |
|
|
277 |
* @protected |
|
|
278 |
*/ |
|
|
279 |
|
|
|
280 |
Dial.LABEL_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.label + '"><span id="" class="' + Dial.CSS_CLASSES.labelString + '">{label}</span><span class="' + Dial.CSS_CLASSES.valueString + '"></span></div>'; |
|
|
281 |
|
|
|
282 |
if(supportsVML === false){ |
|
|
283 |
/** |
|
|
284 |
* template that will contain the Dial's background ring. |
|
|
285 |
* |
|
|
286 |
* @property RING_TEMPLATE |
|
|
287 |
* @type {String} |
|
|
288 |
* @default <div class="[...-ring]"><div class="[...-northMark]"></div></div> |
|
|
289 |
* @protected |
|
|
290 |
*/ |
|
|
291 |
Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + '"><div class="' + Dial.CSS_CLASSES.northMark + '"></div></div>'; |
|
|
292 |
|
|
|
293 |
/** |
|
|
294 |
* template that will contain the Dial's current angle marker. |
|
|
295 |
* |
|
|
296 |
* @property MARKER_TEMPLATE |
|
|
297 |
* @type {String} |
|
|
298 |
* @default <div class="[...-marker] [...-marker-hidden]"><div class="[...-markerUser]"></div></div> |
|
|
299 |
* @protected |
|
|
300 |
*/ |
|
|
301 |
Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.marker + ' ' + Dial.CSS_CLASSES.hidden + '"></div>'; |
|
|
302 |
|
|
|
303 |
/** |
|
|
304 |
* template that will contain the Dial's center button. |
|
|
305 |
* |
|
|
306 |
* @property CENTER_BUTTON_TEMPLATE |
|
|
307 |
* @type {String} |
|
|
308 |
* @default <div class="[...-centerButton]"><div class="[...-resetString]">' + Y.Lang.sub('{resetStr}', Dial.ATTRS.strings.value) + '</div></div> |
|
|
309 |
* @protected |
|
|
310 |
*/ |
|
|
311 |
Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + '"><div class="' + Dial.CSS_CLASSES.resetString + ' ' + Dial.CSS_CLASSES.hidden + '">{resetStr}</div></div>'; |
|
|
312 |
|
|
|
313 |
/** |
|
|
314 |
* template that will contain the Dial's handle. |
|
|
315 |
* |
|
|
316 |
* @property HANDLE_TEMPLATE |
|
|
317 |
* @type {String} |
|
|
318 |
* @default <div class="[...-handle]"><div class="[...-handleUser]" aria-labelledby="" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0"></div></div>';// title="{tooltipHandle}" |
|
|
319 |
* @protected |
|
|
320 |
*/ |
|
|
321 |
Dial.HANDLE_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.handle + '" aria-labelledby="" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0" title="{tooltipHandle}">'; |
|
|
322 |
|
|
|
323 |
}else{ // VML case |
|
|
324 |
Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + ' ' + Dial.CSS_CLASSES.ringVml + '">'+ |
|
|
325 |
'<div class="' + Dial.CSS_CLASSES.northMark + '"></div>'+ |
|
|
326 |
'<v:oval strokecolor="#ceccc0" strokeweight="1px"><v:fill type=gradient color="#8B8A7F" color2="#EDEDEB" angle="45"/></v:oval>'+ |
|
|
327 |
'</div>'+ |
|
|
328 |
''; |
|
|
329 |
Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.markerVml + ' ' + Dial.CSS_CLASSES.hidden + '">'+ |
|
|
330 |
'<v:oval stroked="false">'+ |
|
|
331 |
'<v:fill opacity="20%" color="#000"/>'+ |
|
|
332 |
'</v:oval>'+ |
|
|
333 |
'</div>'+ |
|
|
334 |
''; |
|
|
335 |
Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + ' ' + Dial.CSS_CLASSES.centerButtonVml + '">'+ |
|
|
336 |
'<v:oval strokecolor="#ceccc0" strokeweight="1px">'+ |
|
|
337 |
'<v:fill type=gradient color="#C7C5B9" color2="#fefcf6" colors="35% #d9d7cb, 65% #fefcf6" angle="45"/>'+ |
|
|
338 |
'<v:shadow on="True" color="#000" opacity="10%" offset="2px, 2px"/>'+ |
|
|
339 |
'</v:oval>'+ |
|
|
340 |
'<div class="' + Dial.CSS_CLASSES.resetString + ' ' + Dial.CSS_CLASSES.hidden + '">{resetStr}</div>'+ |
|
|
341 |
'</div>'+ |
|
|
342 |
''; |
|
|
343 |
Dial.HANDLE_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.handleVml + '" aria-labelledby="" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0" title="{tooltipHandle}">'+ |
|
|
344 |
'<v:oval stroked="false">'+ |
|
|
345 |
'<v:fill opacity="20%" color="#6C3A3A"/>'+ |
|
|
346 |
'</v:oval>'+ |
|
|
347 |
'</div>'+ |
|
|
348 |
''; |
|
|
349 |
} |
|
|
350 |
|
|
|
351 |
/* Dial extends the base Widget class */ |
|
|
352 |
Y.extend(Dial, Widget, { |
|
|
353 |
|
|
|
354 |
/** |
|
|
355 |
* creates the DOM structure for the Dial. |
|
|
356 |
* |
|
|
357 |
* @method renderUI |
|
|
358 |
* @protected |
|
|
359 |
*/ |
|
|
360 |
renderUI : function() { |
|
|
361 |
this._renderLabel(); |
|
|
362 |
this._renderRing(); |
|
|
363 |
this._renderMarker(); |
|
|
364 |
this._renderCenterButton(); |
|
|
365 |
this._renderHandle(); |
|
|
366 |
|
|
|
367 |
// object handles |
|
|
368 |
this.contentBox = this.get("contentBox"); |
|
|
369 |
|
|
|
370 |
// constants |
|
|
371 |
this._originalValue = this.get('value'); |
|
|
372 |
this._minValue = this.get('min'); // saves doing a .get many times, but we need to remember to update this if/when we allow changing min or max after instantiation |
|
|
373 |
this._maxValue = this.get('max'); |
|
|
374 |
this._stepsPerRevolution = this.get('stepsPerRevolution'); |
|
|
375 |
this._minTimesWrapped = (Math.floor(this._minValue / this._stepsPerRevolution - 1)); |
|
|
376 |
this._maxTimesWrapped = (Math.floor(this._maxValue / this._stepsPerRevolution + 1)); |
|
|
377 |
|
|
|
378 |
// variables |
|
|
379 |
this._timesWrapped = 0; |
|
|
380 |
this._angle = this._getAngleFromValue(this.get('value')); |
|
|
381 |
this._prevAng = this._angle; |
|
|
382 |
|
|
|
383 |
// init |
|
|
384 |
this._setTimesWrappedFromValue(this._originalValue); |
|
|
385 |
this._handleNode.set('aria-valuemin', this._minValue); |
|
|
386 |
this._handleNode.set('aria-valuemax', this._maxValue); |
|
|
387 |
}, |
|
|
388 |
|
|
|
389 |
/** |
|
|
390 |
* Sets -webkit-border-radius to 50% of width/height of the ring, handle, marker, and center-button. |
|
|
391 |
* This is needed for iOS 3.x. |
|
|
392 |
* The objects render square if the radius is > 50% of the width/height |
|
|
393 |
* @method _setBorderRadius |
|
|
394 |
* @private |
|
|
395 |
*/ |
|
|
396 |
_setBorderRadius : function(){ |
|
|
397 |
this._ringNode.setStyles({'WebkitBorderRadius':this._ringNodeRadius + 'px', |
|
|
398 |
'MozBorderRadius':this._ringNodeRadius + 'px', |
|
|
399 |
'borderRadius':this._ringNodeRadius + 'px' |
|
|
400 |
}); |
|
|
401 |
this._handleNode.setStyles({'WebkitBorderRadius':this._handleNodeRadius + 'px', |
|
|
402 |
'MozBorderRadius':this._handleNodeRadius + 'px', |
|
|
403 |
'borderRadius':this._handleNodeRadius + 'px' |
|
|
404 |
}); |
|
|
405 |
this._markerNode.setStyles({'WebkitBorderRadius':this._markerNodeRadius + 'px', |
|
|
406 |
'MozBorderRadius':this._markerNodeRadius + 'px', |
|
|
407 |
'borderRadius':this._markerNodeRadius + 'px' |
|
|
408 |
}); |
|
|
409 |
this._centerButtonNode.setStyles({'WebkitBorderRadius':this._centerButtonNodeRadius + 'px', |
|
|
410 |
'MozBorderRadius':this._centerButtonNodeRadius + 'px', |
|
|
411 |
'borderRadius':this._centerButtonNodeRadius + 'px' |
|
|
412 |
}); |
|
|
413 |
}, |
|
|
414 |
|
|
|
415 |
/** |
|
|
416 |
* Handles the mouseenter on the centerButton |
|
|
417 |
* |
|
|
418 |
* @method _handleCenterButtonEnter |
|
|
419 |
* @protected |
|
|
420 |
*/ |
|
|
421 |
_handleCenterButtonEnter : function(){ |
|
|
422 |
this._resetString.removeClass(Dial.CSS_CLASSES.hidden); |
|
|
423 |
}, |
|
|
424 |
|
|
|
425 |
/** |
|
|
426 |
* Handles the mouseleave on the centerButton |
|
|
427 |
* |
|
|
428 |
* @method _handleCenterButtonLeave |
|
|
429 |
* @protected |
|
|
430 |
*/ |
|
|
431 |
_handleCenterButtonLeave : function(){ |
|
|
432 |
this._resetString.addClass(Dial.CSS_CLASSES.hidden); |
|
|
433 |
}, |
|
|
434 |
|
|
|
435 |
/** |
|
|
436 |
* Creates the Y.DD.Drag instance used for the handle movement and |
|
|
437 |
* binds Dial interaction to the configured value model. |
|
|
438 |
* |
|
|
439 |
* @method bindUI |
|
|
440 |
* @protected |
|
|
441 |
*/ |
|
|
442 |
bindUI : function() { |
|
|
443 |
|
|
|
444 |
this.after("valueChange", this._afterValueChange); |
|
|
445 |
|
|
|
446 |
var boundingBox = this.get("boundingBox"), |
|
|
447 |
// Looking for a key event which will fire continously across browsers while the key is held down. |
|
|
448 |
keyEvent = (!Y.UA.opera) ? "down:" : "press:", |
|
|
449 |
// 38, 40 = arrow up/down, 33, 34 = page up/down, 35 , 36 = end/home |
|
|
450 |
keyEventSpec = keyEvent + "38,40,33,34,35,36", |
|
|
451 |
// 37 , 39 = arrow left/right |
|
|
452 |
keyLeftRightSpec = keyEvent + "37,39", |
|
|
453 |
// 37 , 39 = arrow left/right + meta (command/apple key) for mac |
|
|
454 |
keyLeftRightSpecMeta = keyEvent + "37+meta,39+meta", |
|
|
455 |
Drag = Y.DD.Drag; |
|
|
456 |
|
|
|
457 |
Y.on("key", Y.bind(this._onDirectionKey, this), boundingBox, keyEventSpec); |
|
|
458 |
Y.on("key", Y.bind(this._onLeftRightKey, this), boundingBox, keyLeftRightSpec); |
|
|
459 |
boundingBox.on("key", this._onLeftRightKeyMeta, keyLeftRightSpecMeta, this); |
|
|
460 |
|
|
|
461 |
Y.on('mouseenter', Y.bind(this._handleCenterButtonEnter, this), this._centerButtonNode); |
|
|
462 |
Y.on('mouseleave', Y.bind(this._handleCenterButtonLeave, this), this._centerButtonNode); |
|
|
463 |
// Needed to replace mousedown/up with gesturemovestart/end to make behavior on touch devices work the same. |
|
|
464 |
Y.on('gesturemovestart', Y.bind(this._resetDial, this), this._centerButtonNode); //[#2530441] |
|
|
465 |
Y.on('gesturemoveend', Y.bind(this._handleCenterButtonMouseup, this), this._centerButtonNode); |
|
|
466 |
|
|
|
467 |
|
|
|
468 |
Y.on(Drag.START_EVENT, Y.bind(this._handleHandleMousedown, this), this._handleNode); |
|
|
469 |
Y.on(Drag.START_EVENT, Y.bind(this._handleMousedown, this), this._ringNode); // [#2530766] |
|
|
470 |
|
|
|
471 |
//TODO: Can this be merged this into the drag:end event listener to avoid another registration? |
|
|
472 |
Y.on('gesturemoveend', Y.bind(this._handleRingMouseup, this), this._ringNode); |
|
|
473 |
|
|
|
474 |
this._dd1 = new Drag({ //// [#2530206] changed global this._dd1 from just var dd1 = new Y.DD.drag so |
|
|
475 |
node: this._handleNode, |
|
|
476 |
on : { |
|
|
477 |
'drag:drag' : Y.bind(this._handleDrag, this), |
|
|
478 |
'drag:start' : Y.bind(this._handleDragStart, this), |
|
|
479 |
'drag:end' : Y.bind(this._handleDragEnd, this) //, |
|
|
480 |
} |
|
|
481 |
}); |
|
|
482 |
Y.bind(this._dd1.addHandle(this._ringNode), this); // [#2530206] added the ring as a handle to the dd1 (the dd of the handleNode) |
|
|
483 |
}, |
|
|
484 |
|
|
|
485 |
/** |
|
|
486 |
* Sets _timesWrapped based on Dial value |
|
|
487 |
* to net integer revolutions the user dragged the handle around the Dial |
|
|
488 |
* |
|
|
489 |
* @method _setTimesWrappedFromValue |
|
|
490 |
* @param val {Number} current value of the Dial |
|
|
491 |
* @private |
|
|
492 |
*/ |
|
|
493 |
_setTimesWrappedFromValue : function(val){ |
|
|
494 |
if(val % this._stepsPerRevolution === 0){ |
|
|
495 |
this._timesWrapped = (val / this._stepsPerRevolution); |
|
|
496 |
}else{ |
|
|
497 |
this._timesWrapped = Math.floor(val / this._stepsPerRevolution); |
|
|
498 |
} |
|
|
499 |
}, |
|
|
500 |
|
|
|
501 |
/** |
|
|
502 |
* gets the angle of the line from the center of the Dial to the center of the handle |
|
|
503 |
* |
|
|
504 |
* @method _getAngleFromHandleCenter |
|
|
505 |
* @param handleCenterX {number} |
|
|
506 |
* @param handleCenterY {number} |
|
|
507 |
* @return ang {number} the angle |
|
|
508 |
* @protected |
|
|
509 |
*/ |
|
|
510 |
_getAngleFromHandleCenter : function(handleCenterX, handleCenterY){ |
|
|
511 |
var ang = Math.atan( (this._dialCenterY - handleCenterY) / (this._dialCenterX - handleCenterX) ) * (180 / Math.PI); |
|
|
512 |
ang = ((this._dialCenterX - handleCenterX) < 0) ? ang + 90 : ang + 90 + 180; // Compensate for neg angles from Math.atan |
|
|
513 |
return ang; |
|
|
514 |
}, |
|
|
515 |
|
|
|
516 |
/** |
|
|
517 |
* calculates the XY of the center of the dial relative to the ring node. |
|
|
518 |
* This is needed for calculating the angle of the handle |
|
|
519 |
* |
|
|
520 |
* @method _calculateDialCenter |
|
|
521 |
* @protected |
|
|
522 |
*/ |
|
|
523 |
_calculateDialCenter : function(){ // #2531111 value, and marker don't track handle when dial position changes on page (resize when inline) |
|
|
524 |
this._dialCenterX = this._ringNode.get('offsetWidth') / 2; |
|
|
525 |
this._dialCenterY = this._ringNode.get('offsetHeight') / 2; |
|
|
526 |
}, |
|
|
527 |
|
|
|
528 |
/** |
|
|
529 |
* Handles the mouseup on the ring |
|
|
530 |
* |
|
|
531 |
* @method _handleRingMouseup |
|
|
532 |
* @protected |
|
|
533 |
*/ |
|
|
534 |
_handleRingMouseup : function(){ |
|
|
535 |
this._handleNode.focus(); // need to re-focus on the handle so keyboard is accessible [#2530206] |
|
|
536 |
}, |
|
|
537 |
|
|
|
538 |
/** |
|
|
539 |
* Handles the mouseup on the centerButton |
|
|
540 |
* |
|
|
541 |
* @method _handleCenterButtonMouseup |
|
|
542 |
* @protected |
|
|
543 |
*/ |
|
|
544 |
_handleCenterButtonMouseup : function(){ |
|
|
545 |
this._handleNode.focus(); // need to re-focus on the handle so keyboard is accessible [#2530206] |
|
|
546 |
}, |
|
|
547 |
|
|
|
548 |
/** |
|
|
549 |
* Handles the mousedown on the handle |
|
|
550 |
* |
|
|
551 |
* @method _handleHandleMousedown |
|
|
552 |
* @protected |
|
|
553 |
*/ |
|
|
554 |
_handleHandleMousedown : function(){ |
|
|
555 |
this._handleNode.focus(); // need to re-focus on the handle so keyboard is accessible [#2530206] |
|
|
556 |
// this is better done here instead of on _handleDragEnd |
|
|
557 |
// because we should make the keyboard accessible after a click of the handle |
|
|
558 |
}, |
|
|
559 |
|
|
|
560 |
/** |
|
|
561 |
* handles the user dragging the handle around the Dial, gets the angle, |
|
|
562 |
* checks for wrapping around top center. |
|
|
563 |
* Sets the new value of the Dial |
|
|
564 |
* |
|
|
565 |
* @method _handleDrag |
|
|
566 |
* @param e {DOMEvent} the drag event object |
|
|
567 |
* @protected |
|
|
568 |
*/ |
|
|
569 |
_handleDrag : function(e){ |
|
|
570 |
var handleCenterX, |
|
|
571 |
handleCenterY, |
|
|
572 |
ang, |
|
|
573 |
newValue; |
|
|
574 |
|
|
|
575 |
// The event was emitted from drag:drag of handle. |
|
|
576 |
// The center of the handle is top left position of the handle node + radius of handle. |
|
|
577 |
// This is different than a mousedown on the ring. |
|
|
578 |
handleCenterX = (parseInt(this._handleNode.getStyle('left'),10) + this._handleNodeRadius); |
|
|
579 |
handleCenterY = (parseInt(this._handleNode.getStyle('top'),10) + this._handleNodeRadius); |
|
|
580 |
ang = this._getAngleFromHandleCenter(handleCenterX, handleCenterY); |
|
|
581 |
|
|
|
582 |
// check for need to set timesWrapped |
|
|
583 |
if((this._prevAng > 270) && (ang < 90)){ // If wrapping, clockwise |
|
|
584 |
if(this._timesWrapped < this._maxTimesWrapped){ |
|
|
585 |
this._timesWrapped = (this._timesWrapped + 1); |
|
|
586 |
} |
|
|
587 |
}else if((this._prevAng < 90) && (ang > 270)){ // if un-wrapping, counter-clockwise |
|
|
588 |
if(this._timesWrapped > this._minTimesWrapped){ |
|
|
589 |
this._timesWrapped = (this._timesWrapped - 1); |
|
|
590 |
} |
|
|
591 |
} |
|
|
592 |
newValue = this._getValueFromAngle(ang); // This function needs the current _timesWrapped value. That's why it comes after the _timesWrapped code above |
|
|
593 |
|
|
|
594 |
// If you've gone past max more than one full revolution, we decrement the _timesWrapped value |
|
|
595 |
// This gives the effect of a ratchet mechanism. |
|
|
596 |
// It feels like you are never more than one revolution past max |
|
|
597 |
// The effect is the same for min, only in reverse. |
|
|
598 |
// We can't reset the _timesWrapped to the max or min here. |
|
|
599 |
// If we did, the next (continuous) drag would reset the value incorrectly. |
|
|
600 |
if(newValue > (this._maxValue + this._stepsPerRevolution) ){ |
|
|
601 |
this._timesWrapped --; |
|
|
602 |
}else if(newValue < (this._minValue - this._stepsPerRevolution) ){ |
|
|
603 |
this._timesWrapped ++; |
|
|
604 |
} |
|
|
605 |
this._prevAng = ang; // need to keep the previous angle in order to check for wrapping on the next drag, click, or keypress |
|
|
606 |
|
|
|
607 |
this._handleValuesBeyondMinMax(e, newValue); |
|
|
608 |
}, |
|
|
609 |
|
|
|
610 |
/** |
|
|
611 |
* handles a mousedown or gesturemovestart event on the ring node |
|
|
612 |
* |
|
|
613 |
* @method _handleMousedown |
|
|
614 |
* @param e {DOMEvent} the event object |
|
|
615 |
* @private |
|
|
616 |
*/ |
|
|
617 |
_handleMousedown : function(e){ // #2530306 |
|
|
618 |
|
|
|
619 |
if (this._ringNode.compareTo(e.target)) { |
|
|
620 |
var minAng = this._getAngleFromValue(this._minValue), |
|
|
621 |
maxAng = this._getAngleFromValue(this._maxValue), |
|
|
622 |
newValue, oppositeMidRangeAngle, |
|
|
623 |
handleCenterX, handleCenterY, |
|
|
624 |
ang; |
|
|
625 |
|
|
|
626 |
|
|
|
627 |
|
|
|
628 |
// The event was emitted from mousedown on the ring node, |
|
|
629 |
// so the center of the handle should be the XY of mousedown. |
|
|
630 |
if(Y.UA.ios){ // ios adds the scrollLeft and top onto clientX and Y in a native click |
|
|
631 |
handleCenterX = (e.clientX - this._ringNode.getX()); |
|
|
632 |
handleCenterY = (e.clientY - this._ringNode.getY()); |
|
|
633 |
}else{ |
|
|
634 |
handleCenterX = (e.clientX + Y.one('document').get('scrollLeft') - this._ringNode.getX()); |
|
|
635 |
handleCenterY = (e.clientY + Y.one('document').get('scrollTop') - this._ringNode.getY()); |
|
|
636 |
} |
|
|
637 |
ang = this._getAngleFromHandleCenter(handleCenterX, handleCenterY); |
|
|
638 |
|
|
|
639 |
/* /////////////////////////////////////////////////////////////////////////////////////////////////////// |
|
|
640 |
* The next sections of logic |
|
|
641 |
* set this._timesWrapped in the different cases of value range |
|
|
642 |
* and value range position, |
|
|
643 |
* then the Dial value is set at the end of this method |
|
|
644 |
*/ /////////////////////////////////////////////////////////////////////////////////////////////////////// |
|
|
645 |
|
|
|
646 |
|
|
|
647 |
//////////////////////////////////////////////////////////////////////////////////////////////////////////// |
|
|
648 |
if(this._maxValue - this._minValue > this._stepsPerRevolution){ |
|
|
649 |
|
|
|
650 |
// Case: range min-to-max is greater than stepsPerRevolution (one revolution) |
|
|
651 |
|
|
|
652 |
// This checks the shortest way around the dial between the prevAng and this ang. |
|
|
653 |
if(Math.abs(this._prevAng - ang) > 180){ // this crossed a wrapping |
|
|
654 |
|
|
|
655 |
// Only change the _timesWrapped if it's between minTimesWrapped and maxTimesWrapped |
|
|
656 |
if((this._timesWrapped > this._minTimesWrapped) && |
|
|
657 |
(this._timesWrapped < this._maxTimesWrapped) |
|
|
658 |
){ |
|
|
659 |
// this checks which direction, clock wise or CCW and incr or decr _timesWrapped |
|
|
660 |
this._timesWrapped = ((this._prevAng - ang) > 0) ? (this._timesWrapped + 1) : (this._timesWrapped - 1); |
|
|
661 |
} |
|
|
662 |
// special case of getting un-stuck from a min value case |
|
|
663 |
// where timesWrapped is minTimesWrapped but new ang won't trigger a cross wrap boundry |
|
|
664 |
// because prevAng is set to 0 or > 0 |
|
|
665 |
}else if( |
|
|
666 |
(this._timesWrapped === this._minTimesWrapped) && |
|
|
667 |
(ang - this._prevAng < 180) |
|
|
668 |
){ |
|
|
669 |
this._timesWrapped ++; |
|
|
670 |
} //it didn't cross a wrapping boundary |
|
|
671 |
|
|
|
672 |
} ///////////////////////////////////////////////////////////////////////////////////////////////////////// |
|
|
673 |
else if(this._maxValue - this._minValue === this._stepsPerRevolution){ |
|
|
674 |
// Case: range min-to-max === stepsPerRevolution (one revolution) |
|
|
675 |
// This means min and max will be at same angle |
|
|
676 |
// This does not mean they are at "north" |
|
|
677 |
|
|
|
678 |
if(ang < minAng){ // if mousedown angle is < minAng (and maxAng, because they're the same) |
|
|
679 |
// The only way it can be, is if min and max are not at north |
|
|
680 |
this._timesWrapped = 1; |
|
|
681 |
}else{ |
|
|
682 |
this._timesWrapped = 0; |
|
|
683 |
} |
|
|
684 |
|
|
|
685 |
} ////////////////////////////////////////////////////////////////////////////////////////////////////////// |
|
|
686 |
else if(minAng > maxAng){ |
|
|
687 |
// Case: range includes the wrap point (north) |
|
|
688 |
// Because of "else if"... |
|
|
689 |
// range is < stepsPerRevolution |
|
|
690 |
|
|
|
691 |
if( |
|
|
692 |
(this._prevAng >= minAng) && // if prev angle was greater than angle of min and... |
|
|
693 |
(ang <= (minAng + maxAng) / 2) // the angle of this click is less than |
|
|
694 |
// the angle opposite the mid-range angle, then... |
|
|
695 |
){ |
|
|
696 |
this._timesWrapped ++; |
|
|
697 |
}else if( |
|
|
698 |
(this._prevAng <= maxAng) && |
|
|
699 |
// if prev angle is < max angle and... |
|
|
700 |
|
|
|
701 |
(ang > (minAng + maxAng) / 2) |
|
|
702 |
// the angle of this click is greater than, |
|
|
703 |
// the angle opposite the mid-range angle and... |
|
|
704 |
|
|
|
705 |
){ |
|
|
706 |
this._timesWrapped --; |
|
|
707 |
} |
|
|
708 |
|
|
|
709 |
} //////////////////////////////////////////////////////////////////////////////////////////////////// |
|
|
710 |
else{ |
|
|
711 |
// "else" Case: min-to-max range doesn't include the wrap point |
|
|
712 |
// Because of "else if"... |
|
|
713 |
// range is still < stepsPerRevolution |
|
|
714 |
|
|
|
715 |
if ((ang < minAng) || (ang > maxAng)){ // angle is out of range |
|
|
716 |
oppositeMidRangeAngle = (((minAng + maxAng) / 2) + 180) % 360; |
|
|
717 |
// This is the bisection of the min-to-max range + 180. (opposite the bisection) |
|
|
718 |
|
|
|
719 |
if(oppositeMidRangeAngle > 180){ |
|
|
720 |
newValue = ((maxAng < ang) && (ang < oppositeMidRangeAngle)) ? this.get('max') : this.get('min'); |
|
|
721 |
}else{ //oppositeMidRangeAngle <= 180 |
|
|
722 |
newValue = ((minAng > ang) && (ang > oppositeMidRangeAngle)) ? this.get('min') : this.get('max'); |
|
|
723 |
} |
|
|
724 |
this._prevAng = this._getAngleFromValue(newValue); |
|
|
725 |
this.set('value', newValue); |
|
|
726 |
this._setTimesWrappedFromValue(newValue); |
|
|
727 |
return; |
|
|
728 |
} |
|
|
729 |
} |
|
|
730 |
|
|
|
731 |
// Now that _timesWrapped is set, set newValue ....................................................................... |
|
|
732 |
newValue = this._getValueFromAngle(ang); // This function needs the correct, current _timesWrapped value. |
|
|
733 |
|
|
|
734 |
|
|
|
735 |
/* updating _prevAng (previous angle) |
|
|
736 |
* When past min or max, _prevAng is set to the angle of min or max |
|
|
737 |
* Don't do this in a drag method, or it will affect wrapping, |
|
|
738 |
* causing the marker to stick at min, when min is 0 degrees (north) |
|
|
739 |
* #2532878 |
|
|
740 |
*/ |
|
|
741 |
if (newValue > this._maxValue) { |
|
|
742 |
this._prevAng = this._getAngleFromValue(this._maxValue); // #2530766 need for mousedown on the ring; causes prob for drag |
|
|
743 |
} else if (newValue < this._minValue) { |
|
|
744 |
this._prevAng = this._getAngleFromValue(this._minValue); |
|
|
745 |
} else { |
|
|
746 |
this._prevAng = ang; |
|
|
747 |
} |
|
|
748 |
|
|
|
749 |
this._handleValuesBeyondMinMax(e, newValue); |
|
|
750 |
} |
|
|
751 |
}, |
|
|
752 |
|
|
|
753 |
/** |
|
|
754 |
* handles the case where the value is less than min or greater than max |
|
|
755 |
* This is used both when handle is dragged and when the ring is clicked |
|
|
756 |
* |
|
|
757 |
* @method _handleValuesBeyondMinMax |
|
|
758 |
* @param e {DOMEvent} the event object |
|
|
759 |
* @param newValue {number} current value of the dial |
|
|
760 |
* @protected |
|
|
761 |
*/ |
|
|
762 |
_handleValuesBeyondMinMax : function(e, newValue){ // #2530306 |
|
|
763 |
// If _getValueFromAngle() is passed 0, it increments the _timesWrapped value. |
|
|
764 |
// handle hitting max and min and going beyond, stops at max or min |
|
|
765 |
if((newValue >= this._minValue) && (newValue <= this._maxValue)) { |
|
|
766 |
this.set('value', newValue); |
|
|
767 |
// [#2530206] transfer the mousedown event from the _ringNode to the _handleNode drag, so we can mousedown, then continue dragging |
|
|
768 |
if(e.currentTarget === this._ringNode){ |
|
|
769 |
// Delegate to DD's natural behavior |
|
|
770 |
this._dd1._handleMouseDownEvent(e); |
|
|
771 |
} |
|
|
772 |
} else if (newValue > this._maxValue) { |
|
|
773 |
this.set('value', this._maxValue); |
|
|
774 |
} else if (newValue < this._minValue) { |
|
|
775 |
this.set('value', this._minValue); |
|
|
776 |
} |
|
|
777 |
}, |
|
|
778 |
|
|
|
779 |
/** |
|
|
780 |
* handles the user starting to drag the handle around the Dial |
|
|
781 |
* |
|
|
782 |
* @method _handleDragStart |
|
|
783 |
* @param e {DOMEvent} the drag event object |
|
|
784 |
* @protected |
|
|
785 |
*/ |
|
|
786 |
_handleDragStart : function(e){ |
|
|
787 |
this._markerNode.removeClass(Dial.CSS_CLASSES.hidden); |
|
|
788 |
}, |
|
|
789 |
|
|
|
790 |
/* |
|
|
791 |
* When handle is handleDragEnd, this animates the return to the fixed dial |
|
|
792 |
*/ |
|
|
793 |
|
|
|
794 |
/** |
|
|
795 |
* handles the end of a user dragging the handle, animates the handle returning to |
|
|
796 |
* resting position. |
|
|
797 |
* |
|
|
798 |
* @method _handleDragEnd |
|
|
799 |
* @protected |
|
|
800 |
*/ |
|
|
801 |
_handleDragEnd : function(){ |
|
|
802 |
var node = this._handleNode; |
|
|
803 |
node.transition({ |
|
|
804 |
duration: 0.08, // seconds |
|
|
805 |
easing: 'ease-in', |
|
|
806 |
left: this._setNodeToFixedRadius(this._handleNode, true)[0] + 'px', |
|
|
807 |
top: this._setNodeToFixedRadius(this._handleNode, true)[1] + 'px' |
|
|
808 |
}, Y.bind(function(){ |
|
|
809 |
var value = this.get('value'); |
|
|
810 |
//[#2530206] only hide marker if not at max or min |
|
|
811 |
// more persistant user visibility of when the dial is at max or min |
|
|
812 |
if((value > this._minValue) && (value < this._maxValue)){ |
|
|
813 |
this._markerNode.addClass(Dial.CSS_CLASSES.hidden); |
|
|
814 |
}else{ |
|
|
815 |
this._setTimesWrappedFromValue(value); //#2530766 secondary bug when drag past max + cross wrapping boundry |
|
|
816 |
this._prevAng = this._getAngleFromValue(value); //#2530766 secondary bug when drag past max + cross wrapping boundry |
|
|
817 |
} |
|
|
818 |
}, this) |
|
|
819 |
); |
|
|
820 |
}, |
|
|
821 |
|
|
|
822 |
/** |
|
|
823 |
* returns the XY of the fixed position, handleDistance, from the center of the Dial (resting position). |
|
|
824 |
* The XY also represents the angle related to the current value. |
|
|
825 |
* If typeArray is true, [X,Y] is returned. |
|
|
826 |
* If typeArray is false, the XY of the obj node passed in is set. |
|
|
827 |
* |
|
|
828 |
* @method _setNodeToFixedRadius |
|
|
829 |
* @param obj {Node} |
|
|
830 |
* @param typeArray {Boolean} true returns an array [X,Y] |
|
|
831 |
* @protected |
|
|
832 |
* @return {Array} an array of [XY] is optionally returned |
|
|
833 |
*/ |
|
|
834 |
_setNodeToFixedRadius : function(obj, typeArray){ |
|
|
835 |
var thisAngle = (this._angle - 90), |
|
|
836 |
rad = (Math.PI / 180), |
|
|
837 |
newY = Math.round(Math.sin(thisAngle * rad) * this._handleDistance), |
|
|
838 |
newX = Math.round(Math.cos(thisAngle * rad) * this._handleDistance), |
|
|
839 |
dia = obj.get('offsetWidth'); //Ticket #2529852 |
|
|
840 |
|
|
|
841 |
newY = newY - (dia * 0.5); |
|
|
842 |
newX = newX - (dia * 0.5); |
|
|
843 |
if(typeArray){ // just need the style for css transform left and top to animate the handle drag:end |
|
|
844 |
return [(this._ringNodeRadius + newX), (this._ringNodeRadius + newY)]; |
|
|
845 |
}else{ |
|
|
846 |
obj.setStyle('left', (this._ringNodeRadius + newX) + 'px'); |
|
|
847 |
obj.setStyle('top', (this._ringNodeRadius + newY) + 'px'); |
|
|
848 |
} |
|
|
849 |
}, |
|
|
850 |
|
|
|
851 |
/** |
|
|
852 |
* Synchronizes the DOM state with the attribute settings. |
|
|
853 |
* |
|
|
854 |
* @method syncUI |
|
|
855 |
*/ |
|
|
856 |
syncUI : function() { |
|
|
857 |
// Make the marker and the resetString display so their placement and borderRadius can be calculated, then hide them again. |
|
|
858 |
// We would have used visibility:hidden in the css of this class, |
|
|
859 |
// but IE8 VML never returns to visible after applying visibility:hidden then removing it. |
|
|
860 |
this._setSizes(); |
|
|
861 |
this._calculateDialCenter(); // #2531111 initialize center of dial |
|
|
862 |
this._setBorderRadius(); |
|
|
863 |
this._uiSetValue(this.get("value")); |
|
|
864 |
this._markerNode.addClass(Dial.CSS_CLASSES.hidden); |
|
|
865 |
this._resetString.addClass(Dial.CSS_CLASSES.hidden); |
|
|
866 |
}, |
|
|
867 |
|
|
|
868 |
/** |
|
|
869 |
* sets the sizes of ring, center-button, marker, handle, and VML ovals in pixels. |
|
|
870 |
* Needed only because some IE versions |
|
|
871 |
* ignore CSS percent sizes/offsets. |
|
|
872 |
* so these must be set in pixels. |
|
|
873 |
* Normally these are set in % of the ring. |
|
|
874 |
* |
|
|
875 |
* @method _setSizes |
|
|
876 |
* @protected |
|
|
877 |
*/ |
|
|
878 |
_setSizes : function(){ |
|
|
879 |
var dia = this.get('diameter'), |
|
|
880 |
offset, offsetResetX, offsetResetY, |
|
|
881 |
setSize = function(node, dia, percent){ |
|
|
882 |
var suffix = 'px'; |
|
|
883 |
node.getElementsByTagName('oval').setStyle('width', (dia * percent) + suffix); |
|
|
884 |
node.getElementsByTagName('oval').setStyle('height', (dia * percent) + suffix); |
|
|
885 |
node.setStyle('width', (dia * percent) + suffix); |
|
|
886 |
node.setStyle('height', (dia * percent) + suffix); |
|
|
887 |
}; |
|
|
888 |
setSize(this._ringNode, dia, 1.0); |
|
|
889 |
setSize(this._handleNode, dia, this.get('handleDiameter')); |
|
|
890 |
setSize(this._markerNode, dia, this.get('markerDiameter')); |
|
|
891 |
setSize(this._centerButtonNode, dia, this.get('centerButtonDiameter')); |
|
|
892 |
|
|
|
893 |
// Set these (used for trig) this way instead of relative to dia, |
|
|
894 |
// in case they have borders, have images etc. |
|
|
895 |
this._ringNodeRadius = this._ringNode.get('offsetWidth') * 0.5; |
|
|
896 |
this._handleNodeRadius = this._handleNode.get('offsetWidth') * 0.5; |
|
|
897 |
this._markerNodeRadius = this._markerNode.get('offsetWidth') * 0.5; |
|
|
898 |
this._centerButtonNodeRadius = this._centerButtonNode.get('offsetWidth') * 0.5; |
|
|
899 |
this._handleDistance = this._ringNodeRadius * this.get('handleDistance'); |
|
|
900 |
// place the centerButton |
|
|
901 |
offset = (this._ringNodeRadius - this._centerButtonNodeRadius); |
|
|
902 |
this._centerButtonNode.setStyle('left', offset + 'px'); |
|
|
903 |
this._centerButtonNode.setStyle('top', offset + 'px'); |
|
|
904 |
/* |
|
|
905 |
Place the resetString |
|
|
906 |
This seems like it should be able to be done with CSS, |
|
|
907 |
But since there is also a VML oval in IE that is absolute positioned, |
|
|
908 |
The resetString ends up behind the VML oval. |
|
|
909 |
*/ |
|
|
910 |
offsetResetX = (this._centerButtonNodeRadius - (this._resetString.get('offsetWidth') * 0.5)); |
|
|
911 |
offsetResetY = (this._centerButtonNodeRadius - (this._resetString.get('offsetHeight') * 0.5)); |
|
|
912 |
this._resetString.setStyles({'left':offsetResetX + 'px', 'top':offsetResetY + 'px'}); |
|
|
913 |
}, |
|
|
914 |
|
|
|
915 |
|
|
|
916 |
/** |
|
|
917 |
* renders the DOM object for the Dial's label |
|
|
918 |
* |
|
|
919 |
* @method _renderLabel |
|
|
920 |
* @protected |
|
|
921 |
*/ |
|
|
922 |
_renderLabel : function() { |
|
|
923 |
var contentBox = this.get("contentBox"), |
|
|
924 |
label = contentBox.one("." + Dial.CSS_CLASSES.label); |
|
|
925 |
if (!label) { |
|
|
926 |
label = Node.create(Y.Lang.sub(Dial.LABEL_TEMPLATE, this.get('strings'))); |
|
|
927 |
contentBox.append(label); |
|
|
928 |
} |
|
|
929 |
this._labelNode = label; |
|
|
930 |
this._valueStringNode = this._labelNode.one("." + Dial.CSS_CLASSES.valueString); |
|
|
931 |
}, |
|
|
932 |
|
|
|
933 |
/** |
|
|
934 |
* renders the DOM object for the Dial's background ring |
|
|
935 |
* |
|
|
936 |
* @method _renderRing |
|
|
937 |
* @protected |
|
|
938 |
*/ |
|
|
939 |
_renderRing : function() { |
|
|
940 |
var contentBox = this.get("contentBox"), |
|
|
941 |
ring = contentBox.one("." + Dial.CSS_CLASSES.ring); |
|
|
942 |
if (!ring) { |
|
|
943 |
ring = contentBox.appendChild(Dial.RING_TEMPLATE); |
|
|
944 |
ring.setStyles({width:this.get('diameter') + 'px', height:this.get('diameter') + 'px'}); |
|
|
945 |
} |
|
|
946 |
this._ringNode = ring; |
|
|
947 |
}, |
|
|
948 |
|
|
|
949 |
/** |
|
|
950 |
* renders the DOM object for the Dial's background marker which |
|
|
951 |
* tracks the angle of the user dragging the handle |
|
|
952 |
* |
|
|
953 |
* @method _renderMarker |
|
|
954 |
* @protected |
|
|
955 |
*/ |
|
|
956 |
_renderMarker : function() { |
|
|
957 |
var contentBox = this.get("contentBox"), |
|
|
958 |
marker = contentBox.one("." + Dial.CSS_CLASSES.marker); |
|
|
959 |
if (!marker) { |
|
|
960 |
marker = contentBox.one('.' + Dial.CSS_CLASSES.ring).appendChild(Dial.MARKER_TEMPLATE); |
|
|
961 |
} |
|
|
962 |
this._markerNode = marker; |
|
|
963 |
}, |
|
|
964 |
|
|
|
965 |
/** |
|
|
966 |
* renders the DOM object for the Dial's center |
|
|
967 |
* |
|
|
968 |
* @method _renderCenterButton |
|
|
969 |
* @protected |
|
|
970 |
*/ |
|
|
971 |
_renderCenterButton : function() { |
|
|
972 |
var contentBox = this.get("contentBox"), |
|
|
973 |
centerButton = contentBox.one("." + Dial.CSS_CLASSES.centerButton); |
|
|
974 |
if (!centerButton) { |
|
|
975 |
centerButton = Node.create(Y.Lang.sub(Dial.CENTER_BUTTON_TEMPLATE, this.get('strings'))); |
|
|
976 |
contentBox.one('.' + Dial.CSS_CLASSES.ring).append(centerButton); |
|
|
977 |
} |
|
|
978 |
this._centerButtonNode = centerButton; |
|
|
979 |
this._resetString = this._centerButtonNode.one('.' + Dial.CSS_CLASSES.resetString); |
|
|
980 |
}, |
|
|
981 |
|
|
|
982 |
/** |
|
|
983 |
* renders the DOM object for the Dial's user draggable handle |
|
|
984 |
* |
|
|
985 |
* @method _renderHandle |
|
|
986 |
* @protected |
|
|
987 |
*/ |
|
|
988 |
_renderHandle : function() { |
|
|
989 |
var labelId = Dial.CSS_CLASSES.label + Y.guid(), //get this unique id once then use for handle and label for ARIA |
|
|
990 |
contentBox = this.get("contentBox"), |
|
|
991 |
handle = contentBox.one("." + Dial.CSS_CLASSES.handle); |
|
|
992 |
if (!handle) { |
|
|
993 |
handle = Node.create(Y.Lang.sub(Dial.HANDLE_TEMPLATE, this.get('strings'))); |
|
|
994 |
handle.setAttribute('aria-labelledby', labelId); // get unique id for specifying a label & handle for ARIA |
|
|
995 |
this._labelNode.one('.' + Dial.CSS_CLASSES.labelString).setAttribute('id', labelId); // When handle gets focus, screen reader will include label text when reading the value. |
|
|
996 |
contentBox.one('.' + Dial.CSS_CLASSES.ring).append(handle); |
|
|
997 |
} |
|
|
998 |
this._handleNode = handle; |
|
|
999 |
}, |
|
|
1000 |
|
|
|
1001 |
/** |
|
|
1002 |
* sets the visible UI label HTML string |
|
|
1003 |
* |
|
|
1004 |
* @method _setLabelString |
|
|
1005 |
* @param str {String} |
|
|
1006 |
* @protected |
|
|
1007 |
* @deprecated Use DialObjName.set('strings',{'label':'My new label'}); before DialObjName.render(); |
|
|
1008 |
|
|
|
1009 |
*/ |
|
|
1010 |
_setLabelString : function(str) { |
|
|
1011 |
this.get("contentBox").one("." + Dial.CSS_CLASSES.labelString).setHTML(str); |
|
|
1012 |
}, |
|
|
1013 |
|
|
|
1014 |
/** |
|
|
1015 |
* sets the visible UI label HTML string |
|
|
1016 |
* |
|
|
1017 |
* @method _setResetString |
|
|
1018 |
* @param str {String} |
|
|
1019 |
* @protected |
|
|
1020 |
* @deprecated Use DialObjName.set('strings',{'resetStr':'My new reset string'}); before DialObjName.render(); |
|
|
1021 |
*/ |
|
|
1022 |
_setResetString : function(str) { |
|
|
1023 |
this.get("contentBox").one("." + Dial.CSS_CLASSES.resetString).setHTML(str); |
|
|
1024 |
// this._setXYResetString(); // This used to recenter the string in the button. Done with CSS now. Method has been removed. |
|
|
1025 |
// this._resetString.setHTML(''); //We no longer show/hide the reset string with setHTML but by addClass and removeClass .yui3-dial-reset-string-hidden |
|
|
1026 |
}, |
|
|
1027 |
|
|
|
1028 |
/** |
|
|
1029 |
* sets the tooltip HTML string in the Dial's handle |
|
|
1030 |
* |
|
|
1031 |
* @method _setTooltipString |
|
|
1032 |
* @param str {String} |
|
|
1033 |
* @protected |
|
|
1034 |
* @deprecated Use DialObjName.set('strings',{'tooltipHandle':'My new tooltip'}); before DialObjName.render(); |
|
|
1035 |
*/ |
|
|
1036 |
_setTooltipString : function(str) { |
|
|
1037 |
this._handleNode.set('title', str); |
|
|
1038 |
}, |
|
|
1039 |
|
|
|
1040 |
/** |
|
|
1041 |
* sets the Dial's value in response to key events. |
|
|
1042 |
* Left and right keys are in a separate method |
|
|
1043 |
* in case an implementation wants to increment values |
|
|
1044 |
* but needs left and right arrow keys for other purposes. |
|
|
1045 |
* |
|
|
1046 |
* @method _onDirectionKey |
|
|
1047 |
* @param e {Event} the key event |
|
|
1048 |
* @protected |
|
|
1049 |
*/ |
|
|
1050 |
_onDirectionKey : function(e) { |
|
|
1051 |
e.preventDefault(); |
|
|
1052 |
switch (e.charCode) { |
|
|
1053 |
case 38: // up |
|
|
1054 |
this._incrMinor(); |
|
|
1055 |
break; |
|
|
1056 |
case 40: // down |
|
|
1057 |
this._decrMinor(); |
|
|
1058 |
break; |
|
|
1059 |
case 36: // home |
|
|
1060 |
this._setToMin(); |
|
|
1061 |
break; |
|
|
1062 |
case 35: // end |
|
|
1063 |
this._setToMax(); |
|
|
1064 |
break; |
|
|
1065 |
case 33: // page up |
|
|
1066 |
this._incrMajor(); |
|
|
1067 |
break; |
|
|
1068 |
case 34: // page down |
|
|
1069 |
this._decrMajor(); |
|
|
1070 |
break; |
|
|
1071 |
} |
|
|
1072 |
}, |
|
|
1073 |
|
|
|
1074 |
/** |
|
|
1075 |
* sets the Dial's value in response to left or right key events |
|
|
1076 |
* |
|
|
1077 |
* @method _onLeftRightKey |
|
|
1078 |
* @param e {Event} the key event |
|
|
1079 |
* @protected |
|
|
1080 |
*/ |
|
|
1081 |
_onLeftRightKey : function(e) { |
|
|
1082 |
e.preventDefault(); |
|
|
1083 |
switch (e.charCode) { |
|
|
1084 |
case 37: // left |
|
|
1085 |
this._decrMinor(); |
|
|
1086 |
break; |
|
|
1087 |
case 39: // right |
|
|
1088 |
this._incrMinor(); |
|
|
1089 |
break; |
|
|
1090 |
} |
|
|
1091 |
}, |
|
|
1092 |
|
|
|
1093 |
/** |
|
|
1094 |
* sets the Dial's value in response to left or right key events when a meta (mac command/apple) key is also pressed |
|
|
1095 |
* |
|
|
1096 |
* @method _onLeftRightKeyMeta |
|
|
1097 |
* @param e {Event} the key event |
|
|
1098 |
* @protected |
|
|
1099 |
*/ |
|
|
1100 |
_onLeftRightKeyMeta : function(e) { |
|
|
1101 |
e.preventDefault(); |
|
|
1102 |
switch (e.charCode) { |
|
|
1103 |
case 37: // left + meta |
|
|
1104 |
this._setToMin(); |
|
|
1105 |
break; |
|
|
1106 |
case 39: // right + meta |
|
|
1107 |
this._setToMax(); |
|
|
1108 |
break; |
|
|
1109 |
} |
|
|
1110 |
}, |
|
|
1111 |
|
|
|
1112 |
/** |
|
|
1113 |
* increments Dial value by a minor increment |
|
|
1114 |
* |
|
|
1115 |
* @method _incrMinor |
|
|
1116 |
* @protected |
|
|
1117 |
*/ |
|
|
1118 |
_incrMinor : function(){ |
|
|
1119 |
var newVal = (this.get('value') + this.get("minorStep")); |
|
|
1120 |
newVal = Math.min(newVal, this.get("max")); |
|
|
1121 |
// [#2530045] .toFixed returns a string. |
|
|
1122 |
// Dial's value needs a number. -0 makes it a number, but removes trailing zeros. |
|
|
1123 |
// Added toFixed(...) again in _uiSetValue where content of yui3-dial-value-string is set. |
|
|
1124 |
// Removing the toFixed here, loses the feature of "snap-to" when for example, stepsPerRevolution is 10 and decimalPlaces is 0. |
|
|
1125 |
this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0); |
|
|
1126 |
}, |
|
|
1127 |
|
|
|
1128 |
/** |
|
|
1129 |
* decrements Dial value by a minor increment |
|
|
1130 |
* |
|
|
1131 |
* @method _decrMinor |
|
|
1132 |
* @protected |
|
|
1133 |
*/ |
|
|
1134 |
_decrMinor : function(){ |
|
|
1135 |
var newVal = (this.get('value') - this.get("minorStep")); |
|
|
1136 |
newVal = Math.max(newVal, this.get("min")); |
|
|
1137 |
this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0); |
|
|
1138 |
}, |
|
|
1139 |
|
|
|
1140 |
/** |
|
|
1141 |
* increments Dial value by a major increment |
|
|
1142 |
* |
|
|
1143 |
* @method _incrMajor |
|
|
1144 |
* @protected |
|
|
1145 |
*/ |
|
|
1146 |
_incrMajor : function(){ |
|
|
1147 |
var newVal = (this.get('value') + this.get("majorStep")); |
|
|
1148 |
newVal = Math.min(newVal, this.get("max")); |
|
|
1149 |
this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0); |
|
|
1150 |
}, |
|
|
1151 |
|
|
|
1152 |
/** |
|
|
1153 |
* decrements Dial value by a major increment |
|
|
1154 |
* |
|
|
1155 |
* @method _decrMajor |
|
|
1156 |
* @protected |
|
|
1157 |
*/ |
|
|
1158 |
_decrMajor : function(){ |
|
|
1159 |
var newVal = (this.get('value') - this.get("majorStep")); |
|
|
1160 |
newVal = Math.max(newVal, this.get("min")); |
|
|
1161 |
this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0); |
|
|
1162 |
}, |
|
|
1163 |
|
|
|
1164 |
/** |
|
|
1165 |
* sets Dial value to dial's max attr |
|
|
1166 |
* |
|
|
1167 |
* @method _setToMax |
|
|
1168 |
* @protected |
|
|
1169 |
*/ |
|
|
1170 |
_setToMax : function(){ |
|
|
1171 |
this.set('value', this.get("max")); |
|
|
1172 |
}, |
|
|
1173 |
|
|
|
1174 |
/** |
|
|
1175 |
* sets Dial value to dial's min attr |
|
|
1176 |
* |
|
|
1177 |
* @method _setToMin |
|
|
1178 |
* @protected |
|
|
1179 |
*/ |
|
|
1180 |
_setToMin : function(){ |
|
|
1181 |
this.set('value', this.get("min")); |
|
|
1182 |
}, |
|
|
1183 |
|
|
|
1184 |
/** |
|
|
1185 |
* resets Dial value to the orignal initial value. |
|
|
1186 |
* |
|
|
1187 |
* @method _resetDial |
|
|
1188 |
* @protected |
|
|
1189 |
*/ |
|
|
1190 |
_resetDial : function(e){ |
|
|
1191 |
if(e){ |
|
|
1192 |
e.stopPropagation(); //[#2530206] need to add so mousedown doesn't propagate to ring and move the handle |
|
|
1193 |
} |
|
|
1194 |
this.set('value', this._originalValue); |
|
|
1195 |
this._resetString.addClass(Dial.CSS_CLASSES.hidden); //[#2530441] |
|
|
1196 |
this._handleNode.focus(); |
|
|
1197 |
}, |
|
|
1198 |
|
|
|
1199 |
/** |
|
|
1200 |
* returns the handle angle associated with the current value of the Dial. |
|
|
1201 |
* Returns a number between 0 and 360. |
|
|
1202 |
* |
|
|
1203 |
* @method _getAngleFromValue |
|
|
1204 |
* @param newVal {Number} the current value of the Dial |
|
|
1205 |
* @return {Number} the angle associated with the current Dial value |
|
|
1206 |
* @protected |
|
|
1207 |
*/ |
|
|
1208 |
_getAngleFromValue : function(newVal){ |
|
|
1209 |
var nonWrappedPartOfValue = newVal % this._stepsPerRevolution, |
|
|
1210 |
angleFromValue = nonWrappedPartOfValue / this._stepsPerRevolution * 360; |
|
|
1211 |
return (angleFromValue < 0) ? (angleFromValue + 360) : angleFromValue; |
|
|
1212 |
}, |
|
|
1213 |
|
|
|
1214 |
/** |
|
|
1215 |
* returns the value of the Dial calculated from the current handle angle |
|
|
1216 |
* |
|
|
1217 |
* @method _getValueFromAngle |
|
|
1218 |
* @param angle {Number} the current angle of the Dial's handle |
|
|
1219 |
* @return {Number} the current Dial value corresponding to the handle position |
|
|
1220 |
* @protected |
|
|
1221 |
*/ |
|
|
1222 |
_getValueFromAngle : function(angle){ |
|
|
1223 |
if(angle < 0){ |
|
|
1224 |
angle = (360 + angle); |
|
|
1225 |
}else if(angle === 0){ |
|
|
1226 |
angle = 360; |
|
|
1227 |
} |
|
|
1228 |
var value = (angle / 360) * this._stepsPerRevolution; |
|
|
1229 |
value = (value + (this._timesWrapped * this._stepsPerRevolution)); |
|
|
1230 |
//return Math.round(value * 100) / 100; |
|
|
1231 |
return value.toFixed(this.get('decimalPlaces')) - 0; |
|
|
1232 |
}, |
|
|
1233 |
|
|
|
1234 |
/** |
|
|
1235 |
* calls the method to update the UI whenever the Dial value changes |
|
|
1236 |
* |
|
|
1237 |
* @method _afterValueChange |
|
|
1238 |
* @param e {Event} |
|
|
1239 |
* @protected |
|
|
1240 |
*/ |
|
|
1241 |
_afterValueChange : function(e) { |
|
|
1242 |
this._uiSetValue(e.newVal); |
|
|
1243 |
}, |
|
|
1244 |
|
|
|
1245 |
/** |
|
|
1246 |
* Changes a value to have the correct decimal places per the attribute decimalPlaces |
|
|
1247 |
* |
|
|
1248 |
* @method _valueToDecimalPlaces |
|
|
1249 |
* @param val {Number} a raw value to set to the Dial |
|
|
1250 |
* @return {Number} the input val changed to have the correct decimal places |
|
|
1251 |
* @protected |
|
|
1252 |
*/ |
|
|
1253 |
_valueToDecimalPlaces : function(val) { // [#2530206] cleaned up and better user feedback of when it's max or min. |
|
|
1254 |
|
|
|
1255 |
}, |
|
|
1256 |
|
|
|
1257 |
/** |
|
|
1258 |
* Updates the UI display value of the Dial to reflect |
|
|
1259 |
* the value passed in. |
|
|
1260 |
* Makes all other needed UI display changes |
|
|
1261 |
* |
|
|
1262 |
* @method _uiSetValue |
|
|
1263 |
* @param val {Number} value of the Dial |
|
|
1264 |
* @protected |
|
|
1265 |
*/ |
|
|
1266 |
_uiSetValue : function(val) { // [#2530206] cleaned up and better user feedback of when it's max or min. |
|
|
1267 |
this._angle = this._getAngleFromValue(val); |
|
|
1268 |
if(this._handleNode.hasClass(Dial.CSS_CLASSES.dragging) === false){ |
|
|
1269 |
this._setTimesWrappedFromValue(val); |
|
|
1270 |
this._setNodeToFixedRadius(this._handleNode, false); |
|
|
1271 |
this._prevAng = this._getAngleFromValue(this.get('value')); |
|
|
1272 |
} |
|
|
1273 |
this._valueStringNode.setHTML(val.toFixed(this.get('decimalPlaces'))); // [#2530045] |
|
|
1274 |
this._handleNode.set('aria-valuenow', val); |
|
|
1275 |
this._handleNode.set('aria-valuetext', val); |
|
|
1276 |
this._setNodeToFixedRadius(this._markerNode, false); |
|
|
1277 |
if((val === this._maxValue) || (val === this._minValue)){ |
|
|
1278 |
this._markerNode.addClass(Dial.CSS_CLASSES.markerMaxMin); |
|
|
1279 |
if(supportsVML === true){ |
|
|
1280 |
this._markerNode.getElementsByTagName('fill').set('color', '#AB3232'); |
|
|
1281 |
} |
|
|
1282 |
this._markerNode.removeClass(Dial.CSS_CLASSES.hidden); |
|
|
1283 |
}else{ // not max or min |
|
|
1284 |
if(supportsVML === true){ |
|
|
1285 |
this._markerNode.getElementsByTagName('fill').set('color', '#000'); |
|
|
1286 |
} |
|
|
1287 |
this._markerNode.removeClass(Dial.CSS_CLASSES.markerMaxMin); |
|
|
1288 |
if(this._handleNode.hasClass(Dial.CSS_CLASSES.dragging) === false){ // if not max || min, and not dragging handle, hide the marker |
|
|
1289 |
this._markerNode.addClass(Dial.CSS_CLASSES.hidden); |
|
|
1290 |
} |
|
|
1291 |
} |
|
|
1292 |
}, |
|
|
1293 |
|
|
|
1294 |
/** |
|
|
1295 |
* value attribute default validator. Verifies that |
|
|
1296 |
* the value being set lies between the min/max value |
|
|
1297 |
* |
|
|
1298 |
* @method _validateValue |
|
|
1299 |
* @param val {Number} value of the Dial |
|
|
1300 |
* @protected |
|
|
1301 |
*/ |
|
|
1302 |
_validateValue: function(val) { |
|
|
1303 |
var min = this.get("min"), |
|
|
1304 |
max = this.get("max"); |
|
|
1305 |
return (Lang.isNumber(val) && val >= min && val <= max); |
|
|
1306 |
} |
|
|
1307 |
}); |
|
|
1308 |
Y.Dial = Dial; |
|
|
1309 |
|
|
|
1310 |
|
|
|
1311 |
}, '@VERSION@', { |
|
|
1312 |
"requires": [ |
|
|
1313 |
"widget", |
|
|
1314 |
"dd-drag", |
|
|
1315 |
"event-mouseenter", |
|
|
1316 |
"event-move", |
|
|
1317 |
"event-key", |
|
|
1318 |
"transition", |
|
|
1319 |
"intl" |
|
|
1320 |
], |
|
|
1321 |
"lang": [ |
|
|
1322 |
"en", |
|
|
1323 |
"es", |
|
|
1324 |
"hu" |
|
|
1325 |
], |
|
|
1326 |
"skinnable": true |
|
|
1327 |
}); |