dial-debug.js revision 41af0d917f0352d732a7dbf9c9594f3ef30b82a0
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Create a circular dial value range input visualized as a draggable handle on a
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * background element.
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff * @module dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Create a dial to represent an input control capable of representing a
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * series of intermediate states based on the position of the Dial's handle.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * These states are typically aligned to a value algorithm whereby the angle of the handle's
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * position corresponds to a given value.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @class Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @extends Widget
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param config {Object} Configuration object
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @constructor
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.superclass.constructor.apply(this, arguments);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff // Y.Dial static properties
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * The identity of the widget.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.NAME
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type String
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 'dial'
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Static property used to define the default attribute configuration of
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * the Widget.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.ATTRS
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Object}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * minimum value allowed
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute min
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @default -220
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * maximum value allowed
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute max
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @default 220
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff * diameter of the circular background object.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Other objects scale accordingly
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Set this only before rendering.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute diameter
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff * @type {Number} the number of px in diameter
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 100
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @writeOnce
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * diameter of the handle object which users drag to change the value.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * Dial sets the pixel dimension of the marker equal to markerDiameter * diameter
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * Set this only before rendering.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @attribute handleDiameter
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @type {Number}
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @default 0.2
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @writeOnce
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * diameter of the marker object which follows the angle of the handle during value changes.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * Scaled relative to the diameter attribute
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * Dial sets the pixel dimension of the marker equal to markerDiameter * diameter
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * Set this only before rendering.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @attribute markerDiameter
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @type {Number}
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @default 0.1
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @writeOnce
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * diameter of the center button object.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * Dial sets the pixel dimension of the centerButton equal to centerButtonDiameter * diameter
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * Set this only before rendering.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @attribute centerButtonDiameter
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @type {Number}
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @default 0.1
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @writeOnce
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * initial value of the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @default 0
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * amount to increment/decrement the dial value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * when the arrow up/down/left/right keys are pressed
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute minorStep
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @default 1
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * amount to increment/decrement the dial value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * when the page up/down keys are pressed
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute majorStep
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @default 10
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * number of value increments in one 360 degree revolution
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * of the handle around the dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute stepsPerRevolution
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @default 100
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * number of decimal places of accuracy in the value
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @attribute decimalPlaces
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @type {Number}
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @default 0
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * visible strings for the dial UI. This attribute is
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * defined by the base Widget class but has an empty value. The
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Dial is simply providing a default value for the attribute.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Gets localized strings in the current language
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @attribute strings
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Object} the values are HTML strings
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @default {label: 'My label', resetStr: 'Reset', tooltipHandle: 'Drag to set value'}
59927fc7ef43db5ef49fce3811b307e2f0a4267cJeff Conniff valueFn: function () {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * distance from the center of the dial to the
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * resting place of the center of the handle and marker.
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * The value is a percent of the radius of the dial.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute handleDistance
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {number}
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @default 0.75
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * returns a properly formed yui class name
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param {String} string to be appended at the end of class name
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff return Y.ClassNameManager.getClassName(Dial.NAME, str);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * array of static constants used to identify the classname applied to the Dial DOM objects
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.CSS_CLASSES
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Array}
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff centerButtonVml : makeClassName('center-button-vml'),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff dragging : Y.ClassNameManager.getClassName("dd-dragging")
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff /* Static constants used to define the markup templates used to create Dial DOM elements */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var labelId = Dial.CSS_CLASSES.label + Y.guid(); //get this unique id once then use
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's label.
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @property Dial.LABEL_TEMPLATE
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @type {HTML}
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @default <div id="' + labelId + '" class="[...-label]"><span class="[...-label-string]">{label}</span><span class="[...-value-string]"></span></div>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff Dial.LABEL_TEMPLATE = '<div id="' + labelId + '" class="' + Dial.CSS_CLASSES.label + '"><span class="' + Dial.CSS_CLASSES.labelString + '">{label}</span><span class="' + Dial.CSS_CLASSES.valueString + '"></span></div>';
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff if(supportsVML === false){
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's background ring.
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @property Dial.RING_TEMPLATE
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {HTML}
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @default <div class="[...-ring]"><div class="[...-northMark]"></div></div>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + '"><div class="' + Dial.CSS_CLASSES.northMark + '"></div></div>';
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's current angle marker.
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @property Dial.MARKER_TEMPLATE
3e16868ea3bfcadfeeb8e23aca5bb2317a6a8ba9Jeff Conniff * @type {HTML}
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @default <div class="[...-marker] [...-marker-hidden]"><div class="[...-markerUser]"></div></div>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.marker + ' ' + Dial.CSS_CLASSES.hidden + '"></div>';
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's center button.
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @property Dial.CENTER_BUTTON_TEMPLATE
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {HTML}
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @default <div class="[...-centerButton]"><div class="[...-resetString]">' + Y.substitute('{resetStr}', Dial.ATTRS.strings.value) + '</div></div>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + '"><div class="' + Dial.CSS_CLASSES.resetString + ' ' + Dial.CSS_CLASSES.hidden + '">{resetStr}</div></div>';
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's handle.
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @property Dial.HANDLE_TEMPLATE
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {HTML}
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @default <div class="[...-handle]"><div class="[...-handleUser]" aria-labelledby="' + labelId + '" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0"></div></div>';// title="{tooltipHandle}"
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.HANDLE_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.handle + '" aria-labelledby="' + labelId + '" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0" title="{tooltipHandle}">';
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff }else{ // VML case
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + ' ' + Dial.CSS_CLASSES.ringVml + '">'+
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff '<div class="' + Dial.CSS_CLASSES.northMark + '"></div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval strokecolor="#ceccc0" strokeweight="1px"><v:fill type=gradient color="#8B8A7F" color2="#EDEDEB" angle="45"/></v:oval>'+
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.markerVml + ' ' + Dial.CSS_CLASSES.hidden + '">'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff '<v:oval stroked="false">'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff '<v:fill opacity="20%" color="#000"/>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</v:oval>'+
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + ' ' + Dial.CSS_CLASSES.centerButtonVml + '">'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval strokecolor="#ceccc0" strokeweight="1px">'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:fill type=gradient color="#C7C5B9" color2="#fefcf6" colors="35% #d9d7cb, 65% #fefcf6" angle="45"/>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:shadow on="True" color="#000" opacity="10%" offset="2px, 2px"/>'+
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff '</v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<div class="' + Dial.CSS_CLASSES.resetString + ' ' + Dial.CSS_CLASSES.hidden + '">{resetStr}</div>'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff Dial.HANDLE_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.handleVml + '" aria-labelledby="' + labelId + '" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0" title="{tooltipHandle}">'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff '<v:oval stroked="false">'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff '<v:fill opacity="20%" color="#6C3A3A"/>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff /* Dial extends the base Widget class */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * creates the DOM structure for the Dial.
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @method renderUI
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff renderUI : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // object handles
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff // constants
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff // variables
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._angle = this._getAngleFromValue(this.get('value'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._setTimesWrappedFromValue(this._originalValue);
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff this._handleNode.set('aria-valuemin', this.get('min'));
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff this._handleNode.set('aria-valuemax', this.get('max'));
e81cc12bafc201061ba76fdfd173f1412371e0ecJeff Conniff * Sets -webkit-border-radius to 50% of width/height of the ring, handle-user, marker-user, and center-button.
e81cc12bafc201061ba76fdfd173f1412371e0ecJeff Conniff * This is needed for iOS 3.x.
e81cc12bafc201061ba76fdfd173f1412371e0ecJeff Conniff * The objects render square if the radius is > 50% of the width/height
e81cc12bafc201061ba76fdfd173f1412371e0ecJeff Conniff * @method _setBorderRadius
e81cc12bafc201061ba76fdfd173f1412371e0ecJeff Conniff this._ringNode.setStyles({'WebkitBorderRadius':this._ringNodeRadius + 'px',
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff this._handleNode.setStyles({'WebkitBorderRadius':this._handleNodeRadius + 'px',
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff 'MozBorderRadius':this._handleNodeRadius + 'px',
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff this._markerNode.setStyles({'WebkitBorderRadius':this._markerNodeRadius + 'px',
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff 'MozBorderRadius':this._markerNodeRadius + 'px',
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff this._centerButtonNode.setStyles({'WebkitBorderRadius':this._centerButtonNodeRadius + 'px',
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff 'MozBorderRadius':this._centerButtonNodeRadius + 'px',
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff 'borderRadius':this._centerButtonNodeRadius + 'px'
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff * Creates the Y.DD.Drag instance used for the handle movement and
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * binds Dial interaction to the configured value model.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method bindUI
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
f47f024e093853ad3957be898687fc8317a835daJeff Conniff bindUI : function() {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this.after("valueChange", this._afterValueChange);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // Looking for a key event which will fire continously across browsers while the key is held down.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff keyEventSpec = (!Y.UA.opera) ? "down:" : "press:",
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff keyLeftRightSpec = (!Y.UA.opera) ? "down:" : "press:";
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff // 38, 40 = arrow up/down, 33, 34 = page up/down, 35 , 36 = end/home
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff // 37 , 39 = arrow left/right
41af0d917f0352d732a7dbf9c9594f3ef30b82a0Jeff Conniff Y.on("key", Y.bind(this._onDirectionKey, this), boundingBox, keyEventSpec);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.on("key", Y.bind(this._onLeftRightKey, this), boundingBox, keyLeftRightSpec);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.on('mouseenter', function(){this.one('.' + Dial.CSS_CLASSES.resetString).removeClass(Dial.CSS_CLASSES.hidden);}, this._centerButtonNode);
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff Y.on('mouseleave', function(){this.one('.' + Dial.CSS_CLASSES.resetString).addClass(Dial.CSS_CLASSES.hidden);}, this._centerButtonNode);
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff Y.on('click', Y.bind(this._resetDial, this), this._centerButtonNode);
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff Y.on('mousedown', Y.bind(function(){this._handleNode.focus();}, this), this._handleNode);
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff 'drag:start' : Y.bind(this._handleDragStart, this),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * Sets _timesWrapped based on Dial value
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * to net integer revolutions the user dragged the handle around the Dial
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @method _setTimesWrappedFromValue
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param val {Number} current value of the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff if(val % this.get('stepsPerRevolution') === 0){
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff this._timesWrapped = (val / this.get('stepsPerRevolution'));
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._timesWrapped = Math.floor(val / this.get('stepsPerRevolution'));
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff * handles the user dragging the handle around the Dial, calculates the angle,
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * checks for wrapping around top center, handles exceeding min or max values
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff * @method _handleDrag
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param e {DOMEvent} the drag event object
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff _handleDrag : function(e){
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff var handleCenterX = (e.pageX + this._handleNodeRadius),
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff handleCenterY = (e.pageY + this._handleNodeRadius),
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff ang = Math.atan( (this._centerYOnPage - handleCenterY) / (this._centerXOnPage - handleCenterX) ) * (180 / Math.PI),
7e21402185b2bb1c42859a8dca7863be3759647dJeff Conniff ang = ((this._centerXOnPage - handleCenterX) < 0) ? ang + 90 : ang + 90 + 180;
82cdeb4d776987d0e2501978b1e1c50143931bbcJeff Conniff // check for need to set timesWrapped
7e21402185b2bb1c42859a8dca7863be3759647dJeff Conniff if((this._prevAng > 270) && (ang < 90)){ // If wrapping, clockwise
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff }else if((this._prevAng < 90) && (ang > 270)){ // if un-wrapping, counter-clockwise
7e21402185b2bb1c42859a8dca7863be3759647dJeff Conniff newValue = this._getValueFromAngle(ang); // This function needs the current _timesWrapped value
7e21402185b2bb1c42859a8dca7863be3759647dJeff Conniff // handle hitting max and min and going beyond, stops at max or min
41a8874f3c14857a5a311a43eaf30a123f376771Jeff Conniff * handles the user starting to drag the handle around the Dial
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @method _handleDragStart
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff * @param e {DOMEvent} the drag event object
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @protected
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff this._markerNode.removeClass(Dial.CSS_CLASSES.hidden);
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff this._centerYOnPage = (this._ringNode.getY() + this._ringNodeRadius);
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff this._centerXOnPage = (this._ringNode.getX() + this._ringNodeRadius);
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff * When handle is handleDragEnd, this animates the return to the fixed dial
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff * handles the end of a user dragging the handle, animates the handle returning to
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * resting position.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @method _handleDragEnd
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff left: this._setNodeToFixedRadius(this._handleNode, true)[0] + 'px',
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff top: this._setNodeToFixedRadius(this._handleNode, true)[1] + 'px'
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff }, Y.bind(function(){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerNode.addClass(Dial.CSS_CLASSES.hidden);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * returns the XY of the fixed position, handleDistance, from the center of the Dial (resting position)
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * The XY also represents the angle related to the current value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * If typeArray is true, [X,Y] is returned.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * If typeArray is false, the XY of the node passed is set.
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @method _setNodeToFixedRadius
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param obj {Node}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @param typeArray {Boolean} true returns an array [X,Y]
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @return {Array} an array of [XY] is optionally returned
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _setNodeToFixedRadius : function(obj, typeArray){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newY = Math.round(Math.sin(thisAngle * rad) * this._handleDistance),
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff newX = Math.round(Math.cos(thisAngle * rad) * this._handleDistance),
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff dia = obj.get('offsetWidth'); //Ticket #2529852
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff if(typeArray){ // just need the style for css transform left and top to animate the handle drag:end
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff return [(this._ringNodeRadius + newX), (this._ringNodeRadius + newY)];
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff obj.setStyle('left', (this._ringNodeRadius + newX) + 'px');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff obj.setStyle('top', (this._ringNodeRadius + newY) + 'px');
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff * Synchronizes the DOM state with the attribute settings.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method syncUI
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff syncUI : function() {
f47f024e093853ad3957be898687fc8317a835daJeff Conniff // Make the marker and the resetString display so their placement and borderRadius can be calculated, then hide them again.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff // We would have used visibility:hidden in the css of this class,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // but IE8 VML never returns to visible after applying visibility:hidden then removing it.
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff this._markerNode.removeClass('yui3-dial-hidden');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._resetString.removeClass('yui3-dial-hidden');
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff this._resetString.addClass('yui3-dial-hidden');
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * sets the sizes of ring, center-button, marker and handle VML ovals in pixels.
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff * Needed only in some IE versions
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * that ignore percent style sizes/offsets.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * so these must be set in pixels.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * Normally these are set in % of the ring.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @method _setSizes //FIXME: this name should have VML removed, doing for all.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
11b81e1c54469a27a52271a2bcff20794d259d27Jeff Conniff node.getElementsByTagName('oval').setStyle('width', (dia * percent) + suffix);
11b81e1c54469a27a52271a2bcff20794d259d27Jeff Conniff node.getElementsByTagName('oval').setStyle('height', (dia * percent) + suffix);
11b81e1c54469a27a52271a2bcff20794d259d27Jeff Conniff node.setStyle('width', (dia * percent) + suffix);
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff node.setStyle('height', (dia * percent) + suffix);
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff setSize(this._handleNode, dia, this.get('handleDiameter'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff setSize(this._markerNode, dia, this.get('markerDiameter'));
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff setSize(this._centerButtonNode, dia, this.get('centerButtonDiameter'));
7e21402185b2bb1c42859a8dca7863be3759647dJeff Conniff // Set these (used for trig) this way instead of relative to dia,
7e21402185b2bb1c42859a8dca7863be3759647dJeff Conniff // in case they have borders, have images etc.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._ringNodeRadius = this._ringNode.get('offsetWidth') * 0.5;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._handleNodeRadius = this._handleNode.get('offsetWidth') * 0.5;
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff this._markerNodeRadius = this._markerNode.get('offsetWidth') * 0.5;
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff this._centerButtonNodeRadius = this._centerButtonNode.get('offsetWidth') * 0.5;
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff this._handleDistance = this._ringNodeRadius * this.get('handleDistance');
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff // place the centerButton
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff var offset = (this._ringNodeRadius - this._centerButtonNodeRadius);
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff this._centerButtonNode.setStyle('left', offset + 'px');
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff this._centerButtonNode.setStyle('top', offset + 'px');
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff Place the resetString
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff This seems like it should be able to be done with CSS,
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff But since there is also a VML oval in IE that is absolute positioned,
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff The resetString ends up behind the VML oval.
41a8874f3c14857a5a311a43eaf30a123f376771Jeff Conniff var offsetResetX = (this._centerButtonNodeRadius - (this._resetString.get('offsetWidth') * 0.5));
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff var offsetResetY = (this._centerButtonNodeRadius - (this._resetString.get('offsetHeight') * 0.5));
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff this._resetString.setStyles({'left':offsetResetX + 'px', 'top':offsetResetY + 'px'});
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * renders the DOM object for the Dial's label
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @method _renderLabel
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @protected
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff _renderLabel : function() {
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff label = contentBox.one("." + Dial.CSS_CLASSES.label);
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff label = Node.create(Y.substitute(Dial.LABEL_TEMPLATE, this.get('strings')));
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff this._valueStringNode = this._labelNode.one("." + Dial.CSS_CLASSES.valueString);
11b81e1c54469a27a52271a2bcff20794d259d27Jeff Conniff * renders the DOM object for the Dial's background ring
11b81e1c54469a27a52271a2bcff20794d259d27Jeff Conniff * @method _renderRing
11b81e1c54469a27a52271a2bcff20794d259d27Jeff Conniff * @protected
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff _renderRing : function() {
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff ring = contentBox.one("." + Dial.CSS_CLASSES.ring);
e81cc12bafc201061ba76fdfd173f1412371e0ecJeff Conniff ring = contentBox.appendChild(Dial.RING_TEMPLATE);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff ring.setStyles({width:this.get('diameter') + 'px', height:this.get('diameter') + 'px'});
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * renders the DOM object for the Dial's background marker which
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * tracks the angle of the user dragging the handle
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @method _renderMarker
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff marker = contentBox.one("." + Dial.CSS_CLASSES.marker);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff marker = contentBox.one('.' + Dial.CSS_CLASSES.ring).appendChild(Dial.MARKER_TEMPLATE);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * renders the DOM object for the Dial's center
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @method _renderCenterButton
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff centerButton = contentBox.one("." + Dial.CSS_CLASSES.centerButton);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff centerButton = Node.create(Y.substitute(Dial.CENTER_BUTTON_TEMPLATE, this.get('strings')));
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff contentBox.one('.' + Dial.CSS_CLASSES.ring).append(centerButton);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._resetString = this._centerButtonNode.one('.' + Dial.CSS_CLASSES.resetString);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * renders the DOM object for the Dial's user draggable handle
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @method _renderHandle
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff handle = contentBox.one("." + Dial.CSS_CLASSES.handle);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff handle = Node.create(Y.substitute(Dial.HANDLE_TEMPLATE, this.get('strings')));
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff contentBox.one('.' + Dial.CSS_CLASSES.ring).append(handle);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * sets the visible UI label HTML string
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @method _setLabelString
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @param str {HTML}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @deprecated Use DialObjName.set('strings',{'label':'My new label'}); before DialObjName.render();
dcb17c0ed0cc508b4c74234b7477b05e6a8723ebJeff Conniff this.get("contentBox").one("." + Dial.CSS_CLASSES.labelString).setContent(str);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * sets the visible UI label HTML string
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @method _setResetString
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param str {HTML}
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @deprecated Use DialObjName.set('strings',{'resetStr':'My new reset string'}); before DialObjName.render();
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this.get("contentBox").one("." + Dial.CSS_CLASSES.resetString).setContent(str);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // this._setXYResetString(); // This used to recenter the string in the button. Done with CSS now. Method has been removed.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // this._resetString.setContent(''); //We no longer show/hide the reset string with setContent but by addClass and removeClass .yui3-dial-reset-string-hidden
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * sets the tooltip HTML string in the Dial's handle
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _setTooltipString
db4ce980273cc4e9e42eebf699de9b44b51768a4Jeff Conniff * @param str {HTML}
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @protected
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @deprecated Use DialObjName.set('strings',{'tooltipHandle':'My new tooltip'}); before DialObjName.render();
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * sets the Dial's value in response to key events.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Left and right keys are in a separate method
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * in case an implementation wants to increment values
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * but needs left and right arrow keys for other purposes.
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @method _onDirectionKey
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @param e {Event} the key event
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @protected
db4ce980273cc4e9e42eebf699de9b44b51768a4Jeff Conniff _onDirectionKey : function(e) {
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * sets the Dial's value in response to left or right key events
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _onLeftRightKey
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @param e {Event} the key event
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _onLeftRightKey : function(e) {
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * increments Dial value by a minor increment
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * @method _incrMinor
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var newVal = (this.get('value') + this.get("minorStep"));
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0);
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * decrements Dial value by a minor increment
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @method _decrMinor
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff * @protected
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff var newVal = (this.get('value') - this.get("minorStep"));
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0);
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff * increments Dial value by a major increment
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @method _incrMajor
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @protected
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff var newVal = (this.get('value') + this.get("majorStep"));
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0);
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff * decrements Dial value by a major increment
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff * @method _decrMajor
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff * @protected
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff var newVal = (this.get('value') - this.get("majorStep"));
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0);
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * sets Dial value to dial's max attr
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @method _decrMajor
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @protected
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * sets Dial value to dial's min attr
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @method _decrMajor
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @protected
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * resets Dial value to the orignal initial value.
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @method _resetDial
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @protected
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * returns the handle angle associated with the current value of the Dial. Returns a number between 0 and 360.
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @method _getAngleFromValue
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @param newVal {Number} the current value of the Dial
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @return {Number} the angle associated with the current Dial value
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @protected
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff var nonWrappedPartOfValue = newVal % this.get('stepsPerRevolution');
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff var angleFromValue = nonWrappedPartOfValue / this.get('stepsPerRevolution') * 360;
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff return (angleFromValue < 0) ? (angleFromValue + 360) : angleFromValue;
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * returns the value of the Dial calculated from the current handle angle
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @method _getValueFromAngle
59927fc7ef43db5ef49fce3811b307e2f0a4267cJeff Conniff * @param angle {Number} the current angle of the Dial's handle
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @return {Number} the current Dial value corresponding to the handle position
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @protected
59927fc7ef43db5ef49fce3811b307e2f0a4267cJeff Conniff var value = (angle / 360) * this.get('stepsPerRevolution');
41a8874f3c14857a5a311a43eaf30a123f376771Jeff Conniff value = (value + (this._timesWrapped * this.get('stepsPerRevolution')));
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff //return Math.round(value * 100) / 100;
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff return value.toFixed(this.get('decimalPlaces')) - 0;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * calls the method to update the UI whenever the Dial value changes
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _afterValueChange
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @param e {Event}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Updates the UI display value of the Dial to reflect
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * the value passed in.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Makes all other needed UI display changes
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _uiSetValue
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param val {Number} value of the Dial
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @protected
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(this._handleNode.hasClass(Dial.CSS_CLASSES.dragging) === false){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._setNodeToFixedRadius(this._handleNode, false);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._prevAng = this._getAngleFromValue(this.get('value'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._setNodeToFixedRadius(this._markerNode, false);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff if((val === this.get('max')) || (val === this.get('min'))){
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff if(this._markerNode.hasClass('marker-max-min') === false){
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._markerNode.getElementsByTagName('fill').set('color', '#AB3232');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerNode.getElementsByTagName('fill').set('color', '#000');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(this._markerNode.hasClass('marker-max-min') === true){
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff this._markerNode.removeClass('marker-max-min');
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff * value attribute default validator. Verifies that
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff * the value being set lies between the min/max value
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff * @method _validateValue
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff * @param val {Number} value of the Dial
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff return (Lang.isNumber(val) && val >= min && val <= max);
59927fc7ef43db5ef49fce3811b307e2f0a4267cJeff Conniff}, '@VERSION@' ,{requires:['widget', 'dd-drag', 'substitute', 'event-mouseenter', 'transition', 'intl'], skinnable:true, lang:['en','es' ]});