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