Dial.js revision 736745cee753d967cf5fb1063c21578ecca61b4a
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 */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var supportsVML = false;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(Y.config.doc.namespaces && Y.config.doc.namespaces.add){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.config.doc.namespaces.add(
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff 'v', // vml namespace
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff 'urn:schemas-microsoft-com:vml',
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '#default#VML' // required for IE8
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff );
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(Y.config.doc.createElement('v:oval').strokeColor){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff supportsVML = true;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var Lang = Y.Lang,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Widget = Y.Widget,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Node = Y.Node;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Create a dial to represent an input control capable of representing a
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * series of intermediate states based on the position of the Dial's handle.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * These states are typically aligned to a value algorithm whereby the angle of the handle's
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * position corresponds to a given value.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @class Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @extends Widget
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param config {Object} Configuration object
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @constructor
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff function Dial(config) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.superclass.constructor.apply(this, arguments);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff // static properties
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * The identity of the widget.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.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 *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.ATTRS
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Object}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @static
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.ATTRS = {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * diameter of the circular background object
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * other objects scale accordingly
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute diameter
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number} the number of px in diameter
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 100
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff diameter : {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff value:100
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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 },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * amount to increment/decrement the dial value
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * amount to increment/decrement the dial value
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * number of value increments in one 360 degree revolution
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * of the handle around the dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute stepsPerRev
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Number}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 100
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff stepsPerRev : {
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff value:100
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * visible strings for the dial UI. This attribute is
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * defined by the base Widget class but has an empty value. The
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Dial is simply providing a default value for the attribute.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute strings
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Object}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default {label: 'My label', resetStr: 'Reset', tooltipHandle: 'Press the ... for reset.'}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff strings: {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff value: {label: 'My label',
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff resetStr: 'Reset',
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff tooltipHandle: 'Press the arrow up/down/left/right keys for minor increments, page up/down for major increments, home for reset.'
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * distance from the center of the dial to the
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * resting place of the center of the handle and marker.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * The value is a percent of the radius of the dial.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @attribute handleDist
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {number}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default 0.75
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff handleDist:{
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff value:0.75
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff };
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * returns a properly formed yui class name
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @function
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param {String} string to be appended at the end of class name
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @return
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff function makeClassName(str) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff return Y.ClassNameManager.getClassName(Dial.NAME, str);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * array of static constants used to identify the classname applied to the Dial DOM objects
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.CSS_CLASSES
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {Array}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @static
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.CSS_CLASSES = {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff input : Dial.INPUT_CLASS = makeClassName("value"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff label : Dial.LABEL_CLASS = makeClassName("label"),
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff labelString : Dial.LABEL_CLASS = makeClassName("label-string"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff valueString : Dial.LABEL_CLASS = makeClassName("value-string"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff northMark : Dial.NORTH_MARK_CLASS = makeClassName("north-mark"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff ring : Dial.RING_CLASS = makeClassName('ring'),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff ringVml : Dial.RING_CLASS = makeClassName('ring-vml'),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff marker : Dial.MARKER_CLASS = makeClassName("marker"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff markerUser : Dial.MARKER_USER_CLASS = makeClassName("marker-user"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff centerButton : Dial.CENTER_BUTTON_CLASS = makeClassName("center-button"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff centerButtonVml : Dial.RING_CLASS = makeClassName('center-button-vml'),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff resetString : Dial.RESET_STRING_CLASS = makeClassName("reset-str"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff handle : Dial.HANDLE_CLASS = makeClassName("handle"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff handleUser : Dial.HANDLE_USER_CLASS = makeClassName("handle-user")
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff };
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff /* Static constants used to define the markup templates used to create Dial DOM elements */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff //var strs = this.get('strings');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var strs = Dial.ATTRS.strings.value, //('strings');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff labelId = Dial.CSS_CLASSES.label + Y.guid();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's label.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.LABEL_TEMPLATE
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {String}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default <div>...</div>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff Dial.LABEL_TEMPLATE = '<div id="' + labelId + '" class="' + Dial.CSS_CLASSES.label + '"><span class="' + Dial.CSS_CLASSES.labelString + '">{label}</span><span class="' + Dial.CSS_CLASSES.valueString + '"></span></div>';
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's text input field.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.INPUT_TEMPLATE
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {String}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default &lt;input type="text" class="..."/>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.INPUT_TEMPLATE = '<input type="text" class="' + Dial.CSS_CLASSES.input + '">';
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(supportsVML === false){
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's background ring.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.RING_TEMPLATE
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {String}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default &lt;div class="[...-ring]">&lt;div class="[...-northMark]">&lt;/div>&lt;/div>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + '"><div class="' + Dial.CSS_CLASSES.northMark + '"></div></div>';
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's current angle marker.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.MARKER_TEMPLATE
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {String}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default &lt;div class="[...-marker] marker-hidden">&lt;div class="[...-markerUser]">&lt;/div>&lt;/div>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.marker + ' marker-hidden"><div class="' + Dial.CSS_CLASSES.markerUser + '"></div></div>';
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's center button.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.CENTER_BUTTON_TEMPLATE
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {String}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default &lt;div class="[...-centerButton]">&lt;div class="[...-resetString]">' + Y.substitute('{resetStr}', Dial.ATTRS.strings.value) + '&lt;/div>&lt;/div>
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + '"><div class="' + Dial.CSS_CLASSES.resetString + '">{resetStr}</div></div>';
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * template that will contain the Dial's handle.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @property Dial.HANDLE_TEMPLATE
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @type {String}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @default &lt;div class="[...-handle]">&lt;div class="[...-handleUser]" aria-labelledby="' + labelId + '" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0">&lt;/div>&lt;/div>';// title="{tooltipHandle}"
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff Dial.HANDLE_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.handle + '"><div class="' + Dial.CSS_CLASSES.handleUser + '" aria-labelledby="' + labelId + '" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0" title="{tooltipHandle}"></div></div>';// title="{tooltipHandle}"
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }else{ // VML case
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + '">'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<div class="' + Dial.CSS_CLASSES.northMark + '"></div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval strokecolor="#ceccc0" strokeweight="1px" class="' + Dial.CSS_CLASSES.ringVml + '"><v:fill type=gradient color="#8B8A7F" color2="#EDEDEB" angle="45"/></v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval></v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '';
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.marker + ' marker-hidden">'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval stroked="false" class="' + Dial.CSS_CLASSES.markerUser + '">'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:fill opacity="20%" color="#000"/>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval></v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '';
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + '">'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval strokecolor="#ceccc0" strokeweight="1px" class="' + Dial.CSS_CLASSES.centerButtonVml + '">'+
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>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval></v:oval>'+
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff '<div class="' + Dial.CSS_CLASSES.resetString + '">{resetStr}</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '';
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.HANDLE_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.handle + '">'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval stroked="false" class="' + Dial.CSS_CLASSES.handleUser + '"'+
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff ' aria-labelledby="' + labelId + '" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider" tabindex="0" title="{tooltipHandle}">'+ //title="{tooltipHandle}"
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:fill opacity="20%" color="#6C3A3A"/>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '<v:oval></v:oval>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '</div>'+
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff '';
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * The HTML_PARSER static constant is used by the Widget base class to populate
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * the configuration for the dial instance from markup already on the page.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff *
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * The Dial class attempts to set the value of the dial widget if it
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * finds the appropriate input element on the page.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Dial.HTML_PARSER = {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff value: function (srcNode) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var val = parseInt(srcNode.get("value"),10);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff return Y.Lang.isNumber(val) ? val : null;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff };
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff /* Dial extends the base Widget class */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.extend(Dial, Widget, {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * creates the DOM structure for the Dial.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method renderUI
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff renderUI : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._renderLabel();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._renderInput();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._renderRing();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._renderMarker();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._renderCenterButton();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._renderHandle();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // object handles
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this.contentBox = this.get("contentBox");
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // constants
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._centerX = this.get('diameter') / 2;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._centerY = this.get('diameter') / 2;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._centerYOnPage = (this._ringNode.getY() + this._centerY);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._centerXOnPage = (this._ringNode.getX() + this._centerX);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._handleDist = this._centerX * this.get('handleDist');
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this._originalValue = this.get('value');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // variables
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._timesWrapped = 0;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._angle = 0;
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this._setTimesWrapedFromValue(this.get('value'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // init Aria
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._handleUserNode.set('aria-valuemin', this.get('min'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._handleUserNode.set('aria-valuemax', this.get('max'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Creates the Y.DD.Drag instance used for the handle movement and
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * binds Dial interaction to the configured value model.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method bindUI
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff bindUI : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this.after("valueChange", this._afterValueChange);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var boundingBox = this.get("boundingBox"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // Looking for a key event which will fire continously across browsers while the key is held down.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // 37 , 39 = arrow left/right, 38, 40 = arrow up/down, 33, 34 = page up/down, 35 , 36 = end/home
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff keyEventSpec = (!Y.UA.opera) ? "down:" : "press:";
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff keyEventSpec += "37, 39, 38, 40, 33, 34, 35, 36";
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.on("key", Y.bind(this._onDirectionKey, this), boundingBox, keyEventSpec);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.on("keyup", Y.bind(this._numberKey, this), this._inputNode);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.on('mouseenter', Y.bind(this._dialCenterOver, this), this._centerButtonNode);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.on('mouseleave', Y.bind(this._dialCenterOut, this), this._centerButtonNode);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.on('click', Y.bind(this._resetDial, this), this._centerButtonNode);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var dd1 = new Y.DD.Drag({
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff node: this._handleNode,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff on : {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff 'drag:drag' : Y.bind(this._handleDrag, this),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff 'drag:start' : Y.bind(this._handleDragStart, this),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff 'drag:end' : Y.bind(this._handleDragEnd, this)
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff });
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Sets _timesWrapped based on Dial value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * to net integer revolutions the user dragged the handle around the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _setTimesWrapedFromValue
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param val {Number} current value of the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff _setTimesWrapedFromValue : function(val){
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff if(val % this.get('stepsPerRev') === 0){
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this._timesWrapped = (val / this.get('stepsPerRev')) -1;
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff }else{
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this._timesWrapped = Math.floor(val / this.get('stepsPerRev'));
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff }
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Sets the string in the object the user clicks to reset the Dial value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _dialCenterOver
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _dialCenterOver : function(e){
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._resetString.setContent(Y.substitute('{resetStr}', this.get('strings')));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Sets the string in the object the user clicks to reset the Dial value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _dialCenterOut
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _dialCenterOut : function(e){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._resetString.setContent('');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * resets Dial value to zero. Stores the handle X location required for future drag starts.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _resetDial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _resetDial : function(){
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this.set('value', this._originalValue);
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this._setTimesWrapedFromValue(this.get('value'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._prevX = this._handleNode.getX();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff //this._inputNode.focus();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * handles the user dragging the handle around the Dial, calculates the angle,
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * checks for wrapping around top center, handles exceeding min or max values
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _handleDrag
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _handleDrag : function(e){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var ang = Math.atan( (this._centerYOnPage - e.pageY) / (this._centerXOnPage - e.pageX) ) * (180 / Math.PI),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff deltaX = (this._centerXOnPage - e.pageX);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(deltaX < 0){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff ang = (ang + 90);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }else{
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff ang = (ang - 90);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // check for need to set timesWrapped
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff if(e.pageY < this._centerYOnPage){ //if handle is above the middle of the dial...
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff if((this._prevX <= this._centerXOnPage) && (e.pageX > this._centerXOnPage)){ // If wrapping, clockwise
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this._timesWrapped = (this._timesWrapped + 1);
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff }else if((this._prevX > this._centerXOnPage) && (e.pageX <= this._centerXOnPage)){ // if un-wrapping, counter-clockwise
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this._timesWrapped = (this._timesWrapped - 1);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff// Y.log('this._centerYOnPage: ' + this._centerXOnPage + '.....e.pageX: '+ e.pageX + '.......wrap: ' + this._timesWrapped + '......ang: ' + ang);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._prevX = e.pageX;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var newValue = this._getValueFromAngle(ang); // This function needs the current _timesWrapped value
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff // handle hitting max and min and going beyond, stops at max or min
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff //if((newValue > this.get('min')) && (newValue < this.get('max'))) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if((newValue > this.get('min')) && (newValue < this.get('max'))) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this.set('value', newValue);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }else if(newValue > this.get('max')){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this.set('value', this.get('max'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }else if(newValue < this.get('min')){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this.set('value', this.get('min'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * handles the user starting to drag the handle around the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _handleDragStart
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _handleDragStart : function(e){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerNode.removeClass('marker-hidden');
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff if(!this._prevX){
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this._prevX = this._handleNode.getX();
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff /*
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * When handle is handleDragEnd, this animates the return to the fixed dial
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * handles the end of a user dragging the handle, animates the handle returning to
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * resting position.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _handleDragEnd
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _handleDragEnd : function(){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var node = this._handleNode;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff node.transition({
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff duration: 0.08, // seconds
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff easing: 'ease-in',
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff left: this._setNodeToFixedRadius()[0] + 'px',
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff top: this._setNodeToFixedRadius()[1] + 'px'
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }, Y.bind(function(){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerNode.addClass('marker-hidden');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._prevX = this._handleNode.getX(); //makes us ready for next drag.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }, this)
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff );
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff this._setTimesWrapedFromValue(this.get('value'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff// this._inputNode.focus();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff// this._inputNode.select();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * returns the XY of the fixed position, handleDist, from the center of the Dial (resting position)
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * The XY also represents the angle related to the current value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * If no param is passed, [X,Y] is returned.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * If param is passed, the XY of the node passed is set.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _setNodeToFixedRadius
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param obj {Node}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @return {Array} an array of [XY] is optionally returned
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _setNodeToFixedRadius : function(obj){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var thisAngle = (this._angle - 90),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff rad = (Math.PI / 180);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var newY = Math.round(Math.sin(thisAngle * rad) * this._handleDist);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var newX = Math.round(Math.cos(thisAngle * rad) * this._handleDist);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(obj){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff obj.setXY([(this._ringNode.getX() + this._centerX + newX), (this._ringNode.getY() + this._centerY + newY)]);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }else{ // just need the style for css transform left and top to animate the handle drag:end
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff return [this._centerX + newX, this._centerX + newY];
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * Synchronizes the DOM state with the attribute settings.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method syncUI
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff syncUI : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._uiSetValue(this.get("value"));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * renders the DOM object for the Dial's text input
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _renderInput
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _renderInput : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var contentBox = this.get("contentBox"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff input = contentBox.one("." + Dial.CSS_CLASSES.input);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if (!input) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff input = Node.create(Dial.INPUT_TEMPLATE);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff contentBox.append(input);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._inputNode = input;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * renders the DOM object for the Dial's label
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _renderLabel
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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) {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff label = Node.create(Y.substitute(Dial.LABEL_TEMPLATE, this.get('strings')));
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff contentBox.append(label);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._labelNode = label;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._valueStringNode = this._labelNode.one("." + Dial.CSS_CLASSES.valueString);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * renders the DOM object for the Dial's background ring
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _renderRing
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff ring = Node.create(Dial.RING_TEMPLATE);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff contentBox.append(ring);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff ring.setStyles({width:this.get('diameter') + 'px', height:this.get('diameter') + 'px'});
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._ringNode = ring;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * renders the DOM object for the Dial's background marker which
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * tracks the angle of the user dragging the handle
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _renderMarker
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _renderMarker : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var contentBox = this.get("contentBox"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff marker = contentBox.one("." + Dial.CSS_CLASSES.marker);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if (!marker) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff marker = Node.create(Dial.MARKER_TEMPLATE);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff contentBox.one('.' + Dial.CSS_CLASSES.ring).append(marker);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerNode = marker;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerUserNode = this._markerNode.one('.' + Dial.CSS_CLASSES.markerUser);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * places the centerbutton's reset string in the center of the button
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * based on the size of the string object
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _setXYResetString
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff _setXYResetString : function(){
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._resetString.setStyle('top', (this._centerButtonNode.get('region').height / 2) - (this._resetString.get('region').height / 2) + 'px');
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._resetString.setStyle('left', (this._centerButtonNode.get('region').width / 2) - (this._resetString.get('region').width / 2) + 'px');
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * renders the DOM object for the Dial's center
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _renderCenterButton
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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) {
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._resetString = this._centerButtonNode.one('.' + Dial.CSS_CLASSES.resetString);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._setXYResetString(); // centering the reset string in the button
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._resetString.setContent('');
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff var offset = (this._ringNode.get('region').width - this._centerButtonNode.get('region').width) / 2;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._centerButtonNode.setXY([(this._ringNode.getX() + offset), (this._ringNode.getY() + offset)]);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * renders the DOM object for the Dial's user draggable handle
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _renderHandle
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _renderHandle : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var contentBox = this.get("contentBox"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff 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')));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff contentBox.one('.' + Dial.CSS_CLASSES.ring).append(handle);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._handleNode = handle;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._handleUserNode = this._handleNode.one('.' + Dial.CSS_CLASSES.handleUser);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * sets the visible UI label string
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method setLabelString
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param str {String}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff setLabelString : function(str) {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this.get("contentBox").one("." + Dial.CSS_CLASSES.labelString).setContent(str);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * sets the visible UI label string
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method setResetString
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param str {String}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff setResetString : function(str) {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this.set('strings.resetStr', str);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this.get("contentBox").one("." + Dial.CSS_CLASSES.resetString).setContent(str);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._setXYResetString(); // recenters the string in the button
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._resetString.setContent('');
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * sets the tooltip string in the Dial's handle
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method setTooltipString
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param str {String}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff setTooltipString : function(str) {
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this.get("contentBox").one("." + Dial.CSS_CLASSES.handleUser).set('title', str);
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * Override the default content box value, since we don't want the srcNode
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * to be the content box for dial.
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _defaultCB
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _defaultCB : function() {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff return null;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * sets the Dial's value in response to key events
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _onDirectionKey
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param e {Event}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _onDirectionKey : function(e) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff e.preventDefault();
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var currVal = this.get("value"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal = currVal,
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff minorStep = this.get("minorStep"),
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff majorStep = this.get("majorStep");
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff switch (e.charCode) { //37 , 39 = arrow left/right, 38, 40 = arrow up/down, 33, 34 = page up/down, 35 , 36 = end/home
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 38: // up
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal += minorStep;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal = Math.min(newVal, this.get("max"));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 40: // down
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal -= minorStep;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal = Math.max(newVal, this.get("min"));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 37: // left
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal -= minorStep;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal = Math.max(newVal, this.get("min"));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 39: // right
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal += minorStep;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal = Math.min(newVal, this.get("max"));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 36: // home
24ef71067b8f34f90df1fc636a73424647c97f4bJeff Conniff newVal = this._originalValue;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 35: // end
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal = this.get('max');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 33: // page up
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal += majorStep;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal = Math.min(newVal, this.get("max"));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff case 34: // page down
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal -= majorStep;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff newVal = Math.max(newVal, this.get("min"));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff break;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if (newVal !== currVal) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this.set('value', newVal);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._prevX = this._handleNode.getX();
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff this._setTimesWrapedFromValue(this.get('value'));
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff// also IE seems to require 2 tab keystrokes to start responding to arrow keys etc. to modify value
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff// screen reader having trouble with IE6?
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff// alert("aria-valuenow: " + Y.one('.' + Dial.CSS_CLASSES.handleUser).get('aria-valuenow'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff// alert("aria-valuetext: " + Y.one('.' + Dial.CSS_CLASSES.handleUser).get('aria-valuetext'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * returns the handle angle associated with the current value of the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _getAngleFromValue
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param newVal {Number} the current value of the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @return {Number} the angle associated with the current Dial value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _getAngleFromValue : function(newVal){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var nonWrapedPartOfValue = newVal % this.get('stepsPerRev');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var angleFromValue = nonWrapedPartOfValue / this.get('stepsPerRev') * 360;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff return angleFromValue;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * returns the value of the Dial calculated from the current handle angle
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _getValueFromAngle
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param angle {Number} the current angle of the Dial's handle
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @return {Number} the current Dial value corresponding to the handle position
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _getValueFromAngle : function(angle){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(angle < 0){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff angle = (360 + angle);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }else if(angle === 0){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff angle = 360;
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var value = Math.round((angle / 360) * this.get('stepsPerRev'));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff return (value + (this._timesWrapped * this.get('stepsPerRev')) );
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * sets the value of the Dial equal to the value of the text input field
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _numberKey
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param e {Event}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _numberKey : function(e){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff var val = parseInt(e.target.get('value'),10);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(this._validateValue(val)){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this.set('value', Math.round(val));
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * calls the method to update the UI whenever the Dial value changes
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _afterValueChange
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param e {Event}
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _afterValueChange : function(e) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._uiSetValue(e.newVal);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * Updates the value of the input box to reflect
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * the value passed in.
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * Makes all other needed UI display changes
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _uiSetValue
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param val {Number} value of the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @protected
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff */
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff _uiSetValue : function(val) {
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._inputNode.set("value", val);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._valueStringNode.setContent(val);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._angle = this._getAngleFromValue(val);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._handleUserNode.set('aria-valuenow', val);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._handleUserNode.set('aria-valuetext', val);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._setNodeToFixedRadius(this._handleNode);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._setNodeToFixedRadius(this._markerNode);
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if((val === this.get('max')) || (val === this.get('min'))){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(this._markerUserNode.hasClass('marker-max-min') === false){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerUserNode.addClass('marker-max-min');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(supportsVML === true){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerUserNode.one('fill').set('color', '#AB3232');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }else{
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(supportsVML === true){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerUserNode.one('fill').set('color', '#000');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff if(this._markerUserNode.hasClass('marker-max-min') === true){
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff this._markerUserNode.removeClass('marker-max-min');
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff }
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff },
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff /**
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * value attribute default validator. Verifies that
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff * the value being set lies between the min/max value
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff *
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @method _validateValue
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @param val {Number} value of the Dial
736745cee753d967cf5fb1063c21578ecca61b4aJeff Conniff * @private
736745cee753d967cf5fb1063c21578ecca61b4aJeff 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 });
df71f95acec70ebddf0ab97cc1e0ff2b70048017Jeff Conniff Y.Dial = Dial;