← Back to branch summary

~michael.nelson/ubuntu-webcatalog/1267731-import-sca-apps-error

« back to all changes in this revision

Viewing changes to src/webcatalog/static/yui/3.10.3/build/dial/dial-debug.js

  • Committer: Tarmac
  • Author(s): Stephen Stewart
  • Date: 2013-06-26 09:19:32 UTC
  • mfrom: (184.1.4 ubuntu-global-nav)
  • Revision ID: tarmac-20130626091932-8urtuli368k8p7ds
[r=beuno,jonas-drange] add ubuntu global nav to apps.ubuntu.com

Show diffs side-by-side

added added

removed removed

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