Dial.js revision f51c5d369e8c6bc97e7b9486fc706325ffe1f0ad
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff/**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Create a circular dial value range input visualized as a draggable handle on a
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * background element.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @module dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var supportsVML = false;
189003a5b9ed3b1168f3331a2d4213bb08bf0d86Jeff Conniff //testVMLNode;
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if (Y.UA.ie && Y.UA.ie < 9){
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff supportsVML = true;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var Lang = Y.Lang,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Widget = Y.Widget,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Node = Y.Node;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Create a dial to represent an input control capable of representing a
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * series of intermediate states based on the position of the Dial's handle.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * These states are typically aligned to a value algorithm whereby the angle of the handle's
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * position corresponds to a given value.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @class Dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @extends Widget
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param config {Object} Configuration object
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @constructor
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff function Dial(config) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.superclass.constructor.apply(this, arguments);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
f47f024e093853ad3957be898687fc8317a835daJeff Conniff // Y.Dial static properties
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * The identity of the widget.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property NAME
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type String
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 'dial'
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @readOnly
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @static
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.NAME = "dial";
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Static property used to define the default attribute configuration of
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * the Widget.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property ATTRS
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Object}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @static
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.ATTRS = {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * minimum value allowed
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute min
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default -220
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff min : {
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff value:-220
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * maximum value allowed
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute max
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 220
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff max : {
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff value:220
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff * diameter of the circular background object.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Other objects scale accordingly.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Set this only before rendering.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute diameter
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number} the number of px in diameter
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 100
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @writeOnce
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff diameter : {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff value:100
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * diameter of the handle object which users drag to change the value.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Dial sets the pixel dimension of the handle equal to handleDiameter * diameter.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Set this only before rendering.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff *
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @attribute handleDiameter
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @type {Number}
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @default 0.2
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @writeOnce
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff handleDiameter : {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff value:0.2
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * diameter of the marker object which follows the angle of the handle during value changes.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Dial sets the pixel dimension of the marker equal to markerDiameter * diameter.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Set this only before rendering.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff *
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @attribute markerDiameter
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @type {Number}
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @default 0.1
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @writeOnce
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff markerDiameter : {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff value:0.1
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * diameter of the center button object.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Dial sets the pixel dimension of the centerButton equal to centerButtonDiameter * diameter.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Set this only before rendering.
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff *
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @attribute centerButtonDiameter
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @type {Number}
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff * @default 0.1
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @writeOnce
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff centerButtonDiameter : {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff value:0.5
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * initial value of the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 0
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff value : {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff value:0,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff validator: function(val) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff return this._validateValue(val);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * amount to increment/decrement the dial value
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * when the arrow up/down/left/right keys are pressed
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute minorStep
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 1
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff minorStep : {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff value:1
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * amount to increment/decrement the dial value
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * when the page up/down keys are pressed
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute majorStep
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 10
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff majorStep : {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff value:10
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * number of value increments in one 360 degree revolution
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * of the handle around the dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @attribute stepsPerRevolution
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 100
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff stepsPerRevolution : {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff value:100
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * number of decimal places of accuracy in the value
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff *
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @attribute decimalPlaces
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @type {Number}
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @default 0
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff decimalPlaces : {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff value:0
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * visible strings for the dial UI. This attribute is
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * defined by the base Widget class but has an empty value. The
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Dial is simply providing a default value for the attribute.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Gets localized strings in the current language
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute strings
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @type {Object} the values are HTML strings
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff * @default {label: 'My label', resetStr: 'Reset', tooltipHandle: 'Drag to set value'}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff strings: {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff valueFn: function () {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff return Y.Intl.get('dial');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff },
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * distance from the center of the dial to the
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * center of the marker and handle, when at rest.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * The value is a percent of the radius of the dial.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
7928e2ef0532df9064d9374ceda31d6ab080eb2dJeff Conniff * @attribute handleDistance
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {number}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 0.75
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff handleDistance:{
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff value:0.75
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff };
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * returns a properly formed yui class name
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param {String} string to be appended at the end of class name
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @return
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @private
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff function makeClassName(str) {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff return Y.ClassNameManager.getClassName(Dial.NAME, str);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
8318d5e58f691e33af95ced531746726ad592bb7Jeff Conniff /** array of static constants used to identify the classname applied to the Dial DOM objects
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property CSS_CLASSES
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Array}
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @static
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff Dial.CSS_CLASSES = {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff label : makeClassName("label"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff labelString : makeClassName("label-string"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff valueString : makeClassName("value-string"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff northMark : makeClassName("north-mark"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff ring : makeClassName('ring'),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff ringVml : makeClassName('ring-vml'),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff marker : makeClassName("marker"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff markerVml : makeClassName("marker-vml"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff markerMaxMin : makeClassName("marker-max-min"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff centerButton : makeClassName("center-button"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff centerButtonVml : makeClassName('center-button-vml'),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff resetString : makeClassName("reset-string"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff handle : makeClassName("handle"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff handleVml : makeClassName("handle-vml"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff hidden : makeClassName("hidden"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff dragging : Y.ClassNameManager.getClassName("dd-dragging")
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff };
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff /* Static constants used to define the markup templates used to create Dial DOM elements */
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's label.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property LABEL_TEMPLATE
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @type {HTML}
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff * @default &lt;div class="[...-label]">&lt;span id="" class="[...-label-string]">{label}&lt;/span>&lt;span class="[...-value-string]">&lt;/span>&lt;/div>
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff 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>';
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(supportsVML === false){
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's background ring.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property RING_TEMPLATE
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @type {HTML}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default &lt;div class="[...-ring]">&lt;div class="[...-northMark]">&lt;/div>&lt;/div>
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + '"><div class="' + Dial.CSS_CLASSES.northMark + '"></div></div>';
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's current angle marker.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property MARKER_TEMPLATE
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @type {HTML}
3e16868ea3bfcadfeeb8e23aca5bb2317a6a8ba9Jeff Conniff * @default &lt;div class="[...-marker] [...-marker-hidden]">&lt;div class="[...-markerUser]">&lt;/div>&lt;/div>
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.marker + ' ' + Dial.CSS_CLASSES.hidden + '"></div>';
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's center button.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property CENTER_BUTTON_TEMPLATE
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @type {HTML}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default &lt;div class="[...-centerButton]">&lt;div class="[...-resetString]">' + Y.substitute('{resetStr}', Dial.ATTRS.strings.value) + '&lt;/div>&lt;/div>
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff 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
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's handle.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
10d8bafc5c24f3a4285cf6060a1935ba5cfc4b85Luke Smith * @property HANDLE_TEMPLATE
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * @type {HTML}
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff * @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}"
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff 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}">';
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }else{ // VML case
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + ' ' + Dial.CSS_CLASSES.ringVml + '">'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<div class="' + Dial.CSS_CLASSES.northMark + '"></div>'+
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff '<v:oval strokecolor="#ceccc0" strokeweight="1px"><v:fill type=gradient color="#8B8A7F" color2="#EDEDEB" angle="45"/></v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '';
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.markerVml + ' ' + Dial.CSS_CLASSES.hidden + '">'+
04f7ef259d54aeab53258697e1e7f8856adcc8a6Jeff Conniff '<v:oval stroked="false">'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff '<v:fill opacity="20%" color="#000"/>'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff '</v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '';
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + ' ' + Dial.CSS_CLASSES.centerButtonVml + '">'+
2aa0883432cf56a974eb9261afcf6ede4313384cJeff 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"/>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</v:oval>'+
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff '<div class="' + Dial.CSS_CLASSES.resetString + ' ' + Dial.CSS_CLASSES.hidden + '">{resetStr}</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '';
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff 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}">'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff '<v:oval stroked="false">'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff '<v:fill opacity="20%" color="#6C3A3A"/>'+
624b3d25f12c6e63f607b2690315293ad7ef6481Jeff Conniff '</v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '';
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff /* Dial extends the base Widget class */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.extend(Dial, Widget, {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * creates the DOM structure for the Dial.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method renderUI
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff renderUI : function() {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._renderLabel();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._renderRing();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._renderMarker();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._renderCenterButton();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._renderHandle();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // object handles
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.contentBox = this.get("contentBox");
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // constants
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._originalValue = this.get('value');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 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
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._maxValue = this.get('max');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._stepsPerRevolution = this.get('stepsPerRevolution');
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff this._minTimesWrapped = (Math.floor(this._minValue / this._stepsPerRevolution - 1));
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff this._maxTimesWrapped = (Math.floor(this._maxValue / this._stepsPerRevolution + 1));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // variables
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped = 0;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._angle = this._getAngleFromValue(this.get('value'));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._prevAng = this._angle;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // init
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._setTimesWrappedFromValue(this._originalValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleNode.set('aria-valuemin', this._minValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleNode.set('aria-valuemax', this._maxValue);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
e81cc12bafc201061ba76fdfd173f1412371e0ecJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Sets -webkit-border-radius to 50% of width/height of the ring, handle, marker, and center-button.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * This is needed for iOS 3.x.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * The objects render square if the radius is > 50% of the width/height
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _setBorderRadius
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @private
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _setBorderRadius : function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._ringNode.setStyles({'WebkitBorderRadius':this._ringNodeRadius + 'px',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'MozBorderRadius':this._ringNodeRadius + 'px',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'borderRadius':this._ringNodeRadius + 'px'
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff });
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleNode.setStyles({'WebkitBorderRadius':this._handleNodeRadius + 'px',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'MozBorderRadius':this._handleNodeRadius + 'px',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'borderRadius':this._handleNodeRadius + 'px'
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff });
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.setStyles({'WebkitBorderRadius':this._markerNodeRadius + 'px',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'MozBorderRadius':this._markerNodeRadius + 'px',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'borderRadius':this._markerNodeRadius + 'px'
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff });
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._centerButtonNode.setStyles({'WebkitBorderRadius':this._centerButtonNodeRadius + 'px',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'MozBorderRadius':this._centerButtonNodeRadius + 'px',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'borderRadius':this._centerButtonNodeRadius + 'px'
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff });
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff /**
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * Handles the mouseenter on the centerButton
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff *
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @method _handleCenterButtonEnter
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @protected
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff */
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff _handleCenterButtonEnter : function(){
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff this._resetString.removeClass(Dial.CSS_CLASSES.hidden);
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff },
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff /**
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * Handles the mouseleave on the centerButton
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff *
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @method _handleCenterButtonLeave
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @protected
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff */
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff _handleCenterButtonLeave : function(){
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff this._resetString.addClass(Dial.CSS_CLASSES.hidden);
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff },
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Creates the Y.DD.Drag instance used for the handle movement and
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * binds Dial interaction to the configured value model.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method bindUI
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff bindUI : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this.after("valueChange", this._afterValueChange);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var boundingBox = this.get("boundingBox"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Looking for a key event which will fire continously across browsers while the key is held down.
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff keyEventSpec = (!Y.UA.opera) ? "down:" : "press:",
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff keyLeftRightSpec = (!Y.UA.opera) ? "down:" : "press:";
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // 38, 40 = arrow up/down, 33, 34 = page up/down, 35 , 36 = end/home
41af0d917f0352d732a7dbf9c9594f3ef30b82a0Jeff Conniff keyEventSpec += "38,40,33,34,35,36";
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // 37 , 39 = arrow left/right
41af0d917f0352d732a7dbf9c9594f3ef30b82a0Jeff Conniff keyLeftRightSpec += "37,39";
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.on("key", Y.bind(this._onDirectionKey, this), boundingBox, keyEventSpec);
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff Y.on("key", Y.bind(this._onLeftRightKey, this), boundingBox, keyLeftRightSpec);
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff Y.on('mouseenter', Y.bind(this._handleCenterButtonEnter, this), this._centerButtonNode);
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff Y.on('mouseleave', Y.bind(this._handleCenterButtonLeave, this), this._centerButtonNode);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Needed to replace mousedown/up with gesturemovestart/end to make behavior on touch devices work the same.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff Y.on('gesturemovestart', Y.bind(this._resetDial, this), this._centerButtonNode); //[#2530441]
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff Y.on('gesturemoveend', Y.bind(this._handleCenterButtonMouseup, this), this._centerButtonNode);
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff Y.on('gesturemovestart', Y.bind(this._handleHandleMousedown, this), this._handleNode);
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff Y.on('gesturemovestart', Y.bind(this._handleMousedown, this), this._ringNode); // [#2530766]
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff Y.on('gesturemoveend', Y.bind(this._handleRingMouseup, this), this._ringNode);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._dd1 = new Y.DD.Drag({ //// [#2530206] changed global this._dd1 from just var dd1 = new Y.DD.drag so
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff node: this._handleNode,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff on : {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'drag:drag' : Y.bind(this._handleDrag, this),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'drag:start' : Y.bind(this._handleDragStart, this),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff 'drag:end' : Y.bind(this._handleDragEnd, this) //,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff });
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff Y.bind(this._dd1.addHandle(this._ringNode), this); // [#2530206] added the ring as a handle to the dd1 (the dd of the handleNode)
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Sets _timesWrapped based on Dial value
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * to net integer revolutions the user dragged the handle around the Dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _setTimesWrappedFromValue
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param val {Number} current value of the Dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @private
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _setTimesWrappedFromValue : function(val){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(val % this._stepsPerRevolution === 0){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped = (val / this._stepsPerRevolution);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else{
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped = Math.floor(val / this._stepsPerRevolution);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * gets the angle of the line from the center of the Dial to the center of the handle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _getAngleFromHandleCenter
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff * @param handleCenterX {number}
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff * @param handleCenterY {number}
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @return ang {number} the angle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _getAngleFromHandleCenter : function(handleCenterX, handleCenterY){
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff var ang = Math.atan( (this._dialCenterY - handleCenterY) / (this._dialCenterX - handleCenterX) ) * (180 / Math.PI);
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff ang = ((this._dialCenterX - handleCenterX) < 0) ? ang + 90 : ang + 90 + 180; // Compensate for neg angles from Math.atan
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff return ang;
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
b5f4e5800a70a87e769d27222144299256fdb5c5Jeff Conniff /**
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff * calculates the XY of the center of the dial relative to the ring node.
b5f4e5800a70a87e769d27222144299256fdb5c5Jeff Conniff * This is needed for calculating the angle of the handle
b5f4e5800a70a87e769d27222144299256fdb5c5Jeff Conniff *
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff * @method _calculateDialCenter
b5f4e5800a70a87e769d27222144299256fdb5c5Jeff Conniff * @protected
b5f4e5800a70a87e769d27222144299256fdb5c5Jeff Conniff */
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff _calculateDialCenter : function(){ // #2531111 value, and marker don't track handle when dial position changes on page (resize when inline)
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff this._dialCenterX = this._ringNode.get('offsetWidth') / 2;
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff this._dialCenterY = this._ringNode.get('offsetHeight') / 2;
b5f4e5800a70a87e769d27222144299256fdb5c5Jeff Conniff },
b5f4e5800a70a87e769d27222144299256fdb5c5Jeff Conniff
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff /**
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * Handles the mouseup on the ring
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff *
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @method _handleRingMouseup
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @protected
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff */
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff _handleRingMouseup : function(){
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff this._handleNode.focus(); // need to re-focus on the handle so keyboard is accessible [#2530206]
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff },
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff /**
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * Handles the mouseup on the centerButton
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff *
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @method _handleCenterButtonMouseup
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @protected
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff */
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff _handleCenterButtonMouseup : function(){
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff this._handleNode.focus(); // need to re-focus on the handle so keyboard is accessible [#2530206]
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff },
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff /**
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * Handles the mousedown on the handle
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff *
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @method _handleHandleMousedown
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff * @protected
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff */
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff _handleHandleMousedown : function(){
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff this._handleNode.focus(); // need to re-focus on the handle so keyboard is accessible [#2530206]
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff // this is better done here instead of on _handleDragEnd
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff // because we should make the keyboard accessible after a click of the handle
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff },
43505e8a0a678fc9e08ebf98acad98ca67eff976Jeff Conniff
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * handles the user dragging the handle around the Dial, gets the angle,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * checks for wrapping around top center.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Sets the new value of the Dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _handleDrag
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @param e {DOMEvent} the drag event object
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _handleDrag : function(e){
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff var handleCenterX,
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff handleCenterY,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff ang,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newValue;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff // The event was emitted from drag:drag of handle.
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff // The center of the handle is top left position of the handle node + radius of handle.
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff // This is different than a mousedown on the ring.
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff handleCenterX = (parseInt(this._handleNode.getStyle('left'),10) + this._handleNodeRadius);
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff handleCenterY = (parseInt(this._handleNode.getStyle('top'),10) + this._handleNodeRadius);
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff ang = this._getAngleFromHandleCenter(handleCenterX, handleCenterY);
7e21402185b2bb1c42859a8dca7863be3759647dJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // check for need to set timesWrapped
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if((this._prevAng > 270) && (ang < 90)){ // If wrapping, clockwise
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(this._timesWrapped < this._maxTimesWrapped){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped = (this._timesWrapped + 1);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else if((this._prevAng < 90) && (ang > 270)){ // if un-wrapping, counter-clockwise
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(this._timesWrapped > this._minTimesWrapped){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped = (this._timesWrapped - 1);
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newValue = this._getValueFromAngle(ang); // This function needs the current _timesWrapped value. That's why it comes after the _timesWrapped code above
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // If you've gone past max more than one full revolution, we decrement the _timesWrapped value
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // This gives the effect of a ratchet mechanism.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // It feels like you are never more than one revolution past max
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // The effect is the same for min, only in reverse.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // We can't reset the _timesWrapped to the max or min here.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // If we did, the next (continuous) drag would reset the value incorrectly.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(newValue > (this._maxValue + this._stepsPerRevolution) ){
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff this._timesWrapped --;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff }else if(newValue < (this._minValue - this._stepsPerRevolution) ){
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff this._timesWrapped ++;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._prevAng = ang; // need to keep the previous angle in order to check for wrapping on the next drag, click, or keypress
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleValuesBeyondMinMax(e, newValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff * handles a mousedown or gesturemovestart event on the ring node
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _handleMousedown
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param e {DOMEvent} the event object
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @private
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _handleMousedown : function(e){ // #2530306
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var minAng = this._getAngleFromValue(this._minValue),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff maxAng = this._getAngleFromValue(this._maxValue),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newValue, oppositeMidRangeAngle,
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff handleCenterX, handleCenterY,
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff ang;
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff // The event was emitted from mousedown on the ring node,
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff // so the center of the handle should be the XY of mousedown.
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff if(Y.UA.ios){ // ios adds the scrollLeft and top onto clientX and Y in a native click
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff handleCenterX = (e.clientX - this._ringNode.getX());
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff handleCenterY = (e.clientY - this._ringNode.getY());
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff }else{
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff handleCenterX = (e.clientX + Y.one('document').get('scrollLeft') - this._ringNode.getX());
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff handleCenterY = (e.clientY + Y.one('document').get('scrollTop') - this._ringNode.getY());
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff }
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff ang = this._getAngleFromHandleCenter(handleCenterX, handleCenterY);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /* ///////////////////////////////////////////////////////////////////////////////////////////////////////
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * The next sections of logic
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * set this._timesWrapped in the different cases of value range
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * and value range position,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * then the Dial value is set at the end of this method
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */ ///////////////////////////////////////////////////////////////////////////////////////////////////////
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff ////////////////////////////////////////////////////////////////////////////////////////////////////////////
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(this._maxValue - this._minValue > this._stepsPerRevolution){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Case: range min-to-max is greater than stepsPerRevolution (one revolution)
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff // This checks the shortest way around the dial between the prevAng and this ang.
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff if(Math.abs(this._prevAng - ang) > 180){ // this crossed a wrapping
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff // Only change the _timesWrapped if it's between minTimesWrapped and maxTimesWrapped
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff if((this._timesWrapped > this._minTimesWrapped) &&
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff (this._timesWrapped < this._maxTimesWrapped)
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff ){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // this checks which direction, clock wise or CCW and incr or decr _timesWrapped
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped = ((this._prevAng - ang) > 0) ? (this._timesWrapped + 1) : (this._timesWrapped - 1);
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff }
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff // special case of getting un-stuck from a min value case
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff // where timesWrapped is minTimesWrapped but new ang won't trigger a cross wrap boundry
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff // because prevAng is set to 0 or > 0
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else if(
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff (this._timesWrapped === this._minTimesWrapped) &&
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff (ang - this._prevAng < 180)
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff ){
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff this._timesWrapped ++;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff } //it didn't cross a wrapping boundary
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff } /////////////////////////////////////////////////////////////////////////////////////////////////////////
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff else if(this._maxValue - this._minValue === this._stepsPerRevolution){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Case: range min-to-max === stepsPerRevolution (one revolution)
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // This means min and max will be at same angle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // This does not mean they are at "north"
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(ang < minAng){ // if mousedown angle is < minAng (and maxAng, because they're the same)
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // The only way it can be, is if min and max are not at north
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped = 1;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else{
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped = 0;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff } //////////////////////////////////////////////////////////////////////////////////////////////////////////
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff else if(minAng > maxAng){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Case: range includes the wrap point (north)
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Because of "else if"...
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // range is < stepsPerRevolution
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff (this._prevAng >= minAng) && // if prev angle was greater than angle of min and...
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff (ang <= (minAng + maxAng) / 2) // the angle of this click is less than
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff // the angle opposite the mid-range angle, then...
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff ){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped ++;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else if(
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff (this._prevAng <= maxAng) &&
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // if prev angle is < max angle and...
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff (ang > (minAng + maxAng) / 2)
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // the angle of this click is greater than,
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff // the angle opposite the mid-range angle and...
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff ){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._timesWrapped --;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff } ////////////////////////////////////////////////////////////////////////////////////////////////////
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff else{
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // "else" Case: min-to-max range doesn't include the wrap point
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Because of "else if"...
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // range is still < stepsPerRevolution
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if ((ang < minAng) || (ang > maxAng)){ // angle is out of range
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff oppositeMidRangeAngle = (((minAng + maxAng) / 2) + 180) % 360;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // This is the bisection of the min-to-max range + 180. (opposite the bisection)
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(oppositeMidRangeAngle > 180){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newValue = ((maxAng < ang) && (ang < oppositeMidRangeAngle)) ? this.get('max') : this.get('min');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else{ //oppositeMidRangeAngle <= 180
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newValue = ((minAng > ang) && (ang > oppositeMidRangeAngle)) ? this.get('min') : this.get('max');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._prevAng = this._getAngleFromValue(newValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', newValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._setTimesWrappedFromValue(newValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff return;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
dfce478dfa2a75c4dfcacb60b7321f9ef37c8477Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Now that _timesWrapped is set value .......................................................................
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newValue = this._getValueFromAngle(ang); // This function needs the correct, current _timesWrapped value.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._prevAng = ang;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleValuesBeyondMinMax(e, newValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * handles the case where the value is less than min or greater than max
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _handleValuesBeyondMinMax
189003a5b9ed3b1168f3331a2d4213bb08bf0d86Jeff Conniff * @param e {DOMEvent} the event object
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param newValue {number} current value of the dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _handleValuesBeyondMinMax : function(e, newValue){ // #2530306
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff // If _getValueFromAngle() is passed 0, it increments the _timesWrapped value.
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff // handle hitting max and min and going beyond, stops at max or min
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff if((newValue >= this._minValue) && (newValue <= this._maxValue)) {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', newValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // [#2530206] transfer the mousedown event from the _ringNode to the _handleNode drag, so we can mousedown, then continue dragging
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(e.currentTarget === this._ringNode){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Delegate to DD's natural behavior
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._dd1._handleMouseDownEvent(e);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff }else if(newValue > this._maxValue){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', this._maxValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(e.type === 'gesturemovestart'){
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff this._prevAng = this._getAngleFromValue(this._maxValue); // #2530766 need for mousedown on the ring; causes prob for drag
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff }
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff }else if(newValue < this._minValue){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', this._minValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(e.type === 'gesturemovestart'){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._prevAng = this._getAngleFromValue(this._minValue);
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff }
3909982acea3ffce1cb7435b87bee218e423c1ddJeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * handles the user starting to drag the handle around the Dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _handleDragStart
f47f024e093853ad3957be898687fc8317a835daJeff Conniff * @param e {DOMEvent} the drag event object
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _handleDragStart : function(e){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.removeClass(Dial.CSS_CLASSES.hidden);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /*
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * When handle is handleDragEnd, this animates the return to the fixed dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * handles the end of a user dragging the handle, animates the handle returning to
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * resting position.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _handleDragEnd
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _handleDragEnd : function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var node = this._handleNode;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff node.transition({
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff duration: 0.08, // seconds
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff easing: 'ease-in',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff left: this._setNodeToFixedRadius(this._handleNode, true)[0] + 'px',
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff top: this._setNodeToFixedRadius(this._handleNode, true)[1] + 'px'
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }, Y.bind(function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var value = this.get('value');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff //[#2530206] only hide marker if not at max or min
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // more persistant user visibility of when the dial is at max or min
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if((value > this._minValue) && (value < this._maxValue)){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.addClass(Dial.CSS_CLASSES.hidden);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else{
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff this._setTimesWrappedFromValue(value); //#2530766 secondary bug when drag past max + cross wrapping boundry
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff this._prevAng = this._getAngleFromValue(value); //#2530766 secondary bug when drag past max + cross wrapping boundry
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }, this)
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff );
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * returns the XY of the fixed position, handleDistance, from the center of the Dial (resting position).
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * The XY also represents the angle related to the current value.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * If typeArray is true, [X,Y] is returned.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * If typeArray is false, the XY of the obj node passed in is set.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _setNodeToFixedRadius
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param obj {Node}
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param typeArray {Boolean} true returns an array [X,Y]
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @return {Array} an array of [XY] is optionally returned
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _setNodeToFixedRadius : function(obj, typeArray){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var thisAngle = (this._angle - 90),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff rad = (Math.PI / 180),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newY = Math.round(Math.sin(thisAngle * rad) * this._handleDistance),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newX = Math.round(Math.cos(thisAngle * rad) * this._handleDistance),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff dia = obj.get('offsetWidth'); //Ticket #2529852
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newY = newY - (dia * 0.5);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newX = newX - (dia * 0.5);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(typeArray){ // just need the style for css transform left and top to animate the handle drag:end
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff return [(this._ringNodeRadius + newX), (this._ringNodeRadius + newY)];
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else{
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff obj.setStyle('left', (this._ringNodeRadius + newX) + 'px');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff obj.setStyle('top', (this._ringNodeRadius + newY) + 'px');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Synchronizes the DOM state with the attribute settings.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method syncUI
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff syncUI : function() {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Make the marker and the resetString display so their placement and borderRadius can be calculated, then hide them again.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // We would have used visibility:hidden in the css of this class,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // but IE8 VML never returns to visible after applying visibility:hidden then removing it.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._setSizes();
7ef04b5748675b524f9891e401b90ba8a0162b07Jeff Conniff this._calculateDialCenter(); // #2531111 initialize center of dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._setBorderRadius();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._uiSetValue(this.get("value"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.addClass(Dial.CSS_CLASSES.hidden);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._resetString.addClass(Dial.CSS_CLASSES.hidden);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * sets the sizes of ring, center-button, marker, handle, and VML ovals in pixels.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Needed only because some IE versions
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * ignore CSS percent sizes/offsets.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * so these must be set in pixels.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Normally these are set in % of the ring.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _setSizes
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _setSizes : function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var dia = this.get('diameter'),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff offset, offsetResetX, offsetResetY,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff setSize = function(node, dia, percent){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var suffix = 'px';
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff node.getElementsByTagName('oval').setStyle('width', (dia * percent) + suffix);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff node.getElementsByTagName('oval').setStyle('height', (dia * percent) + suffix);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff node.setStyle('width', (dia * percent) + suffix);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff node.setStyle('height', (dia * percent) + suffix);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff };
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff setSize(this._ringNode, dia, 1.0);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff setSize(this._handleNode, dia, this.get('handleDiameter'));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff setSize(this._markerNode, dia, this.get('markerDiameter'));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff setSize(this._centerButtonNode, dia, this.get('centerButtonDiameter'));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Set these (used for trig) this way instead of relative to dia,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // in case they have borders, have images etc.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._ringNodeRadius = this._ringNode.get('offsetWidth') * 0.5;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleNodeRadius = this._handleNode.get('offsetWidth') * 0.5;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNodeRadius = this._markerNode.get('offsetWidth') * 0.5;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._centerButtonNodeRadius = this._centerButtonNode.get('offsetWidth') * 0.5;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleDistance = this._ringNodeRadius * this.get('handleDistance');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // place the centerButton
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff offset = (this._ringNodeRadius - this._centerButtonNodeRadius);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._centerButtonNode.setStyle('left', offset + 'px');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._centerButtonNode.setStyle('top', offset + 'px');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /*
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff Place the resetString
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff This seems like it should be able to be done with CSS,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff But since there is also a VML oval in IE that is absolute positioned,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff The resetString ends up behind the VML oval.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff offsetResetX = (this._centerButtonNodeRadius - (this._resetString.get('offsetWidth') * 0.5));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff offsetResetY = (this._centerButtonNodeRadius - (this._resetString.get('offsetHeight') * 0.5));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._resetString.setStyles({'left':offsetResetX + 'px', 'top':offsetResetY + 'px'});
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * renders the DOM object for the Dial's label
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _renderLabel
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _renderLabel : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var contentBox = this.get("contentBox"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff label = contentBox.one("." + Dial.CSS_CLASSES.label);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if (!label) {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff label = Node.create(Y.substitute(Dial.LABEL_TEMPLATE, this.get('strings')));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff contentBox.append(label);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._labelNode = label;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._valueStringNode = this._labelNode.one("." + Dial.CSS_CLASSES.valueString);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * renders the DOM object for the Dial's background ring
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _renderRing
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _renderRing : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var contentBox = this.get("contentBox"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff ring = contentBox.one("." + Dial.CSS_CLASSES.ring);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if (!ring) {
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff ring = contentBox.appendChild(Dial.RING_TEMPLATE);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff ring.setStyles({width:this.get('diameter') + 'px', height:this.get('diameter') + 'px'});
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._ringNode = ring;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * renders the DOM object for the Dial's background marker which
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * tracks the angle of the user dragging the handle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _renderMarker
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _renderMarker : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var contentBox = this.get("contentBox"),
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff marker = contentBox.one("." + Dial.CSS_CLASSES.marker);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if (!marker) {
2aa0883432cf56a974eb9261afcf6ede4313384cJeff Conniff marker = contentBox.one('.' + Dial.CSS_CLASSES.ring).appendChild(Dial.MARKER_TEMPLATE);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerNode = marker;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * renders the DOM object for the Dial's center
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _renderCenterButton
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _renderCenterButton : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var contentBox = this.get("contentBox"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff centerButton = contentBox.one("." + Dial.CSS_CLASSES.centerButton);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if (!centerButton) {
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff centerButton = Node.create(Y.substitute(Dial.CENTER_BUTTON_TEMPLATE, this.get('strings')));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff contentBox.one('.' + Dial.CSS_CLASSES.ring).append(centerButton);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._centerButtonNode = centerButton;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._resetString = this._centerButtonNode.one('.' + Dial.CSS_CLASSES.resetString);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * renders the DOM object for the Dial's user draggable handle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _renderHandle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff _renderHandle : function() {
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff var labelId = Dial.CSS_CLASSES.label + Y.guid(), //get this unique id once then use for handle and label for ARIA
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff contentBox = this.get("contentBox"),
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff handle = contentBox.one("." + Dial.CSS_CLASSES.handle);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if (!handle) {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff handle = Node.create(Y.substitute(Dial.HANDLE_TEMPLATE, this.get('strings')));
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff handle.setAttribute('aria-labelledby', labelId); // get unique id for specifying a label & handle for ARIA
f51c5d369e8c6bc97e7b9486fc706325ffe1f0adJeff Conniff this._labelNode.one('.' + Dial.CSS_CLASSES.labelString).setAttribute('id', labelId); // When handle gets focus, screen reader will include label text when reading the value.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff contentBox.one('.' + Dial.CSS_CLASSES.ring).append(handle);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._handleNode = handle;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * sets the visible UI label HTML string
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _setLabelString
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param str {HTML}
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @deprecated Use DialObjName.set('strings',{'label':'My new label'}); before DialObjName.render();
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
db4ce980273cc4e9e42eebf699de9b44b51768a4Jeff Conniff _setLabelString : function(str) {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this.get("contentBox").one("." + Dial.CSS_CLASSES.labelString).setContent(str);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * sets the visible UI label HTML string
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _setResetString
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param str {HTML}
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @deprecated Use DialObjName.set('strings',{'resetStr':'My new reset string'}); before DialObjName.render();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
db4ce980273cc4e9e42eebf699de9b44b51768a4Jeff Conniff _setResetString : function(str) {
691af6c84a00ad5f629ffcfa3b1e42c38da5da4fJeff Conniff this.get("contentBox").one("." + Dial.CSS_CLASSES.resetString).setContent(str);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // this._setXYResetString(); // This used to recenter the string in the button. Done with CSS now. Method has been removed.
91f1deca7427bc48d15c263856f567a6bab97394Jeff 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 },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
aa1805d3af3a9ac854fadba9707e18ee5f006804Jeff Conniff * sets the tooltip HTML string in the Dial's handle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _setTooltipString
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param str {HTML}
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @deprecated Use DialObjName.set('strings',{'tooltipHandle':'My new tooltip'}); before DialObjName.render();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
db4ce980273cc4e9e42eebf699de9b44b51768a4Jeff Conniff _setTooltipString : function(str) {
41a8874f3c14857a5a311a43eaf30a123f376771Jeff Conniff this._handleNode.set('title', str);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * sets the Dial's value in response to key events.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Left and right keys are in a separate method
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * in case an implementation wants to increment values
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * but needs left and right arrow keys for other purposes.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _onDirectionKey
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param e {Event} the key event
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _onDirectionKey : function(e) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff e.preventDefault();
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff switch (e.charCode) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 38: // up
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._incrMinor();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 40: // down
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._decrMinor();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 36: // home
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._resetDial();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 35: // end
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff this._setToMax();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 33: // page up
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._incrMajor();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 34: // page down
44c68f247b9311ea767cb4656220793317e3383bJeff Conniff this._decrMajor();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff break;
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * sets the Dial's value in response to left or right key events
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _onLeftRightKey
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param e {Event} the key event
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff _onLeftRightKey : function(e) {
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff e.preventDefault();
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff switch (e.charCode) {
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff case 37: // left
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._decrMinor();
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff break;
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff case 39: // right
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._incrMinor();
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff break;
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff }
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * increments Dial value by a minor increment
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _incrMinor
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _incrMinor : function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var newVal = (this.get('value') + this.get("minorStep"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newVal = Math.min(newVal, this.get("max"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // [#2530045] .toFixed returns a string.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Dial's value needs a number. -0 makes it a number, but removes trailing zeros.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Added toFixed(...) again in _uiSetValue where content of yui3-dial-value-string is set.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff // Removing the toFixed here, loses the feature of "snap-to" when for example, stepsPerRevolution is 10 and decimalPlaces is 0.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * decrements Dial value by a minor increment
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _decrMinor
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _decrMinor : function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var newVal = (this.get('value') - this.get("minorStep"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newVal = Math.max(newVal, this.get("min"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * increments Dial value by a major increment
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _incrMajor
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _incrMajor : function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var newVal = (this.get('value') + this.get("majorStep"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newVal = Math.min(newVal, this.get("max"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * decrements Dial value by a major increment
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _decrMajor
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _decrMajor : function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var newVal = (this.get('value') - this.get("majorStep"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff newVal = Math.max(newVal, this.get("min"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', newVal.toFixed(this.get('decimalPlaces')) - 0);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * sets Dial value to dial's max attr
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _setToMax
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _setToMax : function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', this.get("max"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * sets Dial value to dial's min attr
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _setToMin
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _setToMin : function(){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', this.get("min"));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * resets Dial value to the orignal initial value.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _resetDial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _resetDial : function(e){
0ed6176253fa9ba4e1c0825cca2f4cd707681f02Jeff Conniff if(e){
0ed6176253fa9ba4e1c0825cca2f4cd707681f02Jeff Conniff e.stopPropagation(); //[#2530206] need to add so mousedown doesn't propagate to ring and move the handle
0ed6176253fa9ba4e1c0825cca2f4cd707681f02Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this.set('value', this._originalValue);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._resetString.addClass(Dial.CSS_CLASSES.hidden); //[#2530441]
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleNode.focus();
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * returns the handle angle associated with the current value of the Dial.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Returns a number between 0 and 360.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _getAngleFromValue
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param newVal {Number} the current value of the Dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @return {Number} the angle associated with the current Dial value
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _getAngleFromValue : function(newVal){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var nonWrappedPartOfValue = newVal % this._stepsPerRevolution,
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff angleFromValue = nonWrappedPartOfValue / this._stepsPerRevolution * 360;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff return (angleFromValue < 0) ? (angleFromValue + 360) : angleFromValue;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * returns the value of the Dial calculated from the current handle angle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _getValueFromAngle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param angle {Number} the current angle of the Dial's handle
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @return {Number} the current Dial value corresponding to the handle position
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff _getValueFromAngle : function(angle){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(angle < 0){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff angle = (360 + angle);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else if(angle === 0){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff angle = 360;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff var value = (angle / 360) * this._stepsPerRevolution;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff value = (value + (this._timesWrapped * this._stepsPerRevolution));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff //return Math.round(value * 100) / 100;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff return value.toFixed(this.get('decimalPlaces')) - 0;
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * calls the method to update the UI whenever the Dial value changes
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _afterValueChange
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param e {Event}
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _afterValueChange : function(e) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._uiSetValue(e.newVal);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff * Changes a value to have the correct decimal places per the attribute decimalPlaces
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _valueToDecimalPlaces
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param val {Number} a raw value to set to the Dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @return {Number} the input val changed to have the correct decimal places
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff _valueToDecimalPlaces : function(val) { // [#2530206] cleaned up and better user feedback of when it's max or min.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff },
ee795fdb0aaa73a9c3d348fd05149c573012185aJeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
2353184083624510261e335c156a05e8cae2fc41Jeff Conniff * Updates the UI display value of the Dial to reflect
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * the value passed in.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * Makes all other needed UI display changes
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _uiSetValue
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param val {Number} value of the Dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
4af2659c7f72aa2813a2eea32fcc568bbea27de7Jeff Conniff _uiSetValue : function(val) { // [#2530206] cleaned up and better user feedback of when it's max or min.
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._angle = this._getAngleFromValue(val);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(this._handleNode.hasClass(Dial.CSS_CLASSES.dragging) === false){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._setTimesWrappedFromValue(val);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._setNodeToFixedRadius(this._handleNode, false);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._prevAng = this._getAngleFromValue(this.get('value'));
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._valueStringNode.setContent(val.toFixed(this.get('decimalPlaces'))); // [#2530045]
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleNode.set('aria-valuenow', val);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._handleNode.set('aria-valuetext', val);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._setNodeToFixedRadius(this._markerNode, false);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if((val === this._maxValue) || (val === this._minValue)){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.addClass(Dial.CSS_CLASSES.markerMaxMin);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(supportsVML === true){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.getElementsByTagName('fill').set('color', '#AB3232');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.removeClass(Dial.CSS_CLASSES.hidden);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }else{ // not max or min
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(supportsVML === true){
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.getElementsByTagName('fill').set('color', '#000');
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.removeClass(Dial.CSS_CLASSES.markerMaxMin);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff if(this._handleNode.hasClass(Dial.CSS_CLASSES.dragging) === false){ // if not max || min, and not dragging handle, hide the marker
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff this._markerNode.addClass(Dial.CSS_CLASSES.hidden);
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff /**
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * value attribute default validator. Verifies that
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * the value being set lies between the min/max value
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff *
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @method _validateValue
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @param val {Number} value of the Dial
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff * @protected
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _validateValue: function(val) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var min = this.get("min"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff max = this.get("max");
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff return (Lang.isNumber(val) && val >= min && val <= max);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff });
91f1deca7427bc48d15c263856f567a6bab97394Jeff Conniff Y.Dial = Dial;