dial/js/Dial.js

	Dial.js revision df71f95acec70ebddf0ab97cc1e0ff2b70048017
    var supportsVML = false;
    if(Y.config.doc.namespaces && Y.config.doc.namespaces.add){
        Y.config.doc.namespaces.add(
            'v', // vml namespace
            'urn:schemas-microsoft-com:vml',
            '#default#VML' // required for IE8
        );
        if(Y.config.doc.createElement('v:oval').strokeColor){
            supportsVML = true;
        }
    }

    var Lang = Y.Lang,
        Widget = Y.Widget,
        Node = Y.Node;

    /* Dial class constructor */
    function Dial(config) {
        Dial.superclass.constructor.apply(this, arguments);
    }

    /*
     * Required NAME static field, to identify the Widget class and
     * used as an event prefix, to generate class names etc. (set to the
     * class name in camel case).
     * Jeff says, "Camel doesn't seem to work for me. spinWheel didn't work."
     */
    Dial.NAME = "dial";

    /*
     * The attribute configuration for the Dial widget. Attributes can be
     * defined with default values, get/set functions and validator functions
     * as with any other class extending Base.
     */
    Dial.ATTRS = {
        // The minimum value for the dial.
        min : {
            value:0
        },

        // The maximum value for the dial.
        max : {
            value:100
        },

        // The diameter of the dial
        diameter : {
            value:100
        },

        // The current value of the dial.
        value : {
            value:0,
            validator: function(val) {
                return this._validateValue(val);
            }
        },

        // Amount to increment/decrement the dial when the buttons or arrow up/down keys are pressed.
        minorStep : {
            value:1
        },

        // Amount to increment/decrement the dial when the page up/down keys are pressed.
        majorStep : {
            value:10
        },

        // The value increments in 360 degrees of rotation
        stepsPerRev : {
            value:365
        },

        // The strings for the dial UI. This attribute is
        // defined by the base Widget class but has an empty value. The
        // dial is simply providing a default value for the attribute.
        strings: {
            value: {label: 'My label',
                resetStr: 'Reset',
                tooltipHandle: 'Press the arrow up/down/left/right keys for minor increments, page up/down for major increments, home for reset.'
            }
        },

        // The distance from the center of the dial to the resting place of the center of the handle and marker.
        // The value is a percent of the radius of the dial
        handleDist:{
            value:0.75
        }
    };

    /* Static constant used to identify the classname applied to the spinwheels value field */
    function makeClassName(str) {
        return Y.ClassNameManager.getClassName(Dial.NAME, str);
    }
    Dial.CSS_CLASSES = {
        input : Dial.INPUT_CLASS = makeClassName("value"),
        label : Dial.LABEL_CLASS = makeClassName("label"),
        valueString : Dial.LABEL_CLASS = makeClassName("value-string"),
        northMark : Dial.NORTH_MARK_CLASS = makeClassName("north-mark"),
        ring : Dial.RING_CLASS = makeClassName('ring'),
        ringVml : Dial.RING_CLASS = makeClassName('ring-vml'),
        marker : Dial.MARKER_CLASS = makeClassName("marker"),
        markerUser : Dial.MARKER_USER_CLASS = makeClassName("marker-user"),
        centerButton : Dial.CENTER_BUTTON_CLASS = makeClassName("center-button"),
        centerButtonVml : Dial.RING_CLASS = makeClassName('center-button-vml'),
        resetString : Dial.RESET_STRING_CLASS = makeClassName("reset-str"),
        handle : Dial.HANDLE_CLASS = makeClassName("handle"),
        handleUser : Dial.HANDLE_USER_CLASS = makeClassName("handle-user")
    };


    /* Static constants used to define the markup templates used to create Dial DOM elements */
    //var strs = this.get('strings');
    var strs = Dial.ATTRS.strings.value, //('strings');
    labelId = Dial.CSS_CLASSES.label + Y.guid();

    Dial.LABEL_TEMPLATE = '<div id="' + labelId + '" class="' + Dial.CSS_CLASSES.label + '">' + Y.substitute('{label}', strs) + ':<span class="' + Dial.CSS_CLASSES.valueString + '"></span></div>';
    Dial.INPUT_TEMPLATE = '<input type="text" class="' + Dial.CSS_CLASSES.input + '">';


    if(supportsVML === false){
        Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + '"><div class="' + Dial.CSS_CLASSES.northMark + '"></div></div>';
        Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.marker + ' marker-hidden"><div class="' + Dial.CSS_CLASSES.markerUser + '"></div></div>';
        Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + '"><div class="' + Dial.CSS_CLASSES.resetString + '">' + Y.substitute('{resetStr}', Dial.ATTRS.strings.value) + '</div></div>';
        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"></div></div>';// title="' + Y.substitute('{tooltipHandle}', strs) + '"

    }else{ // VML case
        Dial.RING_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.ring + '">'+
                                '<div class="' + Dial.CSS_CLASSES.northMark + '"></div>'+
                                    '<v:oval strokecolor="#ceccc0" strokeweight="1px" class="' + Dial.CSS_CLASSES.ringVml + '"><v:fill type=gradient color="#8B8A7F" color2="#EDEDEB" angle="45"/></v:oval>'+
                                    '<v:oval></v:oval>'+
                                '</div>'+
                                '';
        Dial.MARKER_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.marker + ' marker-hidden">'+
                                    '<v:oval stroked="false" class="' + Dial.CSS_CLASSES.markerUser + '">'+
                                        '<v:fill opacity="20%" color="#000"/>'+
                                    '</v:oval>'+
                                    '<v:oval></v:oval>'+
                                '</div>'+
                                '';
        Dial.CENTER_BUTTON_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.centerButton + '">'+
                                            '<v:oval strokecolor="#ceccc0" strokeweight="1px" class="' + Dial.CSS_CLASSES.centerButtonVml + '">'+
                                                '<v:fill type=gradient color="#C7C5B9" color2="#fefcf6" colors="35% #d9d7cb, 65% #fefcf6" angle="45"/>'+
                                                '<v:shadow on="True" color="#000" opacity="10%" offset="2px, 2px"/>'+
                                            '</v:oval>'+
                                            '<v:oval></v:oval>'+
                                            '<div class="' + Dial.CSS_CLASSES.resetString + '">' + Y.substitute('{resetStr}', Dial.ATTRS.strings.value) + '</div>'+
                                    '</div>'+
                                    '';
        Dial.HANDLE_TEMPLATE = '<div class="' + Dial.CSS_CLASSES.handle + '">'+
                                    '<v:oval stroked="false" class="' + Dial.CSS_CLASSES.handleUser + '"'+
                                    ' aria-labelledby="' + labelId + '" aria-valuetext="" aria-valuemax="" aria-valuemin="" aria-valuenow="" role="slider"  tabindex="0" >'+ //title="' + Y.substitute('{tooltipHandle}', strs) + '"
                                        '<v:fill opacity="20%" color="#6C3A3A"/>'+
                                    '</v:oval>'+
                                    '<v:oval></v:oval>'+
                                '</div>'+
                                '';
    }

    /*
     * The HTML_PARSER static constant is used by the Widget base class to populate
     * the configuration for the dial instance from markup already on the page.
     *
     * The Dial class attempts to set the value of the dial widget if it
     * finds the appropriate input element on the page.
     */
    Dial.HTML_PARSER = {
        value: function (srcNode) {
            var val = parseInt(srcNode.get("value"),10);
            return Y.Lang.isNumber(val) ? val : null;
        }
    };

    /* Dial extends the base Widget class */
    Y.extend(Dial, Widget, {

        /*
         * renderUI is part of the lifecycle introduced by the
         * Widget class. Widget's renderer method invokes:
         *
         *     renderUI()
         *     bindUI()
         *     syncUI()
         *
         * renderUI is intended to be used by the Widget subclass
         * to create or insert new elements into the DOM.
         *
         * For dial the method adds the input (if it's not already
         * present in the markup), and creates the inc/dec buttons
         */
        renderUI : function() {
            this._renderLabel();
            this._renderInput();
            this._renderRing();
            this._renderMarker();
            this._renderCenterButton();
            this._renderHandle();


            // object handles
            this.contentBox = this.get("contentBox");

            // constants
            this._centerX = this.get('diameter') / 2;
            this._centerY = this.get('diameter') / 2;
            this._centerYOnPage = (this._ringNode.getY() + this._centerY);
            this._centerXOnPage = (this._ringNode.getX() + this._centerX);
            this._handleDist = this._centerX * this.get('handleDist');

            // variables
            this._timesWrapped = 0;
            this._angle = 0;
            //this._prevX = this._centerXOnPage;

            // init Aria
            this._handleUserNode.set('aria-valuemin', this.get('min'));
            this._handleUserNode.set('aria-valuemax', this.get('max'));

        },

        /*
         * bindUI is intended to be used by the Widget subclass
         * to bind any event listeners which will drive the Widget UI.
         *
         * It will generally bind event listeners for attribute change
         * events, to update the state of the rendered UI in response
         * to attribute value changes, and also attach any DOM events,
         * to activate the UI.
         *
         * For dial, the method:
         *
         * - Sets up the attribute change listener for the "value" attribute
         *
         * - Binds key listeners for the arrow/page keys
         * - Binds mouseup/down listeners on the boundingBox, document respectively.
         * - Binds a simple change listener on the input box.
         */
        bindUI : function() {
            this.after("valueChange", this._afterValueChange);

            var boundingBox = this.get("boundingBox"),

            // Looking for a key event which will fire continously across browsers while the key is held down.
            // 37 , 39 = arrow left/right, 38, 40 = arrow up/down, 33, 34 = page up/down,  35 , 36 = end/home
            keyEventSpec = (!Y.UA.opera) ? "down:" : "press:";
            keyEventSpec += "37, 39, 38, 40, 33, 34, 35, 36";

            Y.on("key", Y.bind(this._onDirectionKey, this), boundingBox, keyEventSpec);
            Y.on("keyup", Y.bind(this._numberKey, this), this._inputNode);

            Y.on('mouseenter', Y.bind(this._dialCenterOver, this), this._centerButtonNode);
            Y.on('mouseleave', Y.bind(this._dialCenterOut, this), this._centerButtonNode);
            Y.on('click', Y.bind(this._resetDial, this), this._centerButtonNode);

            var dd1 = new Y.DD.Drag({
                node: this._handleNode,
                on : {
                    'drag:drag' : Y.bind(this._handleDrag, this),
                    'drag:start' : Y.bind(this._handleDragStart, this),
                    'drag:end' : Y.bind(this._handleDragEnd, this)
                }
            });
        },
        _dialCenterOver : function(e){
            this._resetString.setContent(Y.substitute('{resetStr}', Dial.ATTRS.strings.value));
        },
        _dialCenterOut : function(e){
            this._resetString.setContent('');
        },
        /*
         * Reset all to zero and set dial and handle positions
         */
        _resetDial : function(){
            this.set('value', 0);
            this._timesWrapped = -1;
            this._prevX = this._handleNode.getX();
            //this._inputNode.focus();
        },
        _handleDrag : function(e){
            var ang = Math.atan( (this._centerYOnPage - e.pageY)  /  (this._centerXOnPage - e.pageX)  ) * (180 / Math.PI),
            deltaX = (this._centerXOnPage - e.pageX);
            if(deltaX < 0){
                ang = (ang + 90);
            }else{
                ang = (ang - 90);
            }
            // check for need to set timesWrapped
            if(this._markerUserNode.hasClass('marker-max-min') === false){
                if(e.pageY < this._centerYOnPage){ //if handle is above the middle of the dial...
                    if((this._prevX <= this._centerXOnPage) && (e.pageX > this._centerXOnPage)){ // If wrapping, clockwise
                        this._timesWrapped = (this._timesWrapped + 1);
                    }else if((this._prevX > this._centerXOnPage) && (e.pageX <= this._centerXOnPage)){ // if un-wrapping, counter-clockwise
                        this._timesWrapped = (this._timesWrapped - 1);
                    }
                }
            }
//          Y.log('this._centerYOnPage: ' + this._centerXOnPage + '.....e.pageX: '+ e.pageX + '.......wrap: ' + this._timesWrapped + '......ang: ' + ang);
            this._prevX = e.pageX;
            var newValue = this._getValueFromAngle(ang); // This function needs the current _timesWrapped value
            // handle hitting max and min and going beyond, stops at max or min
            //if((newValue > this.get('min')) && (newValue < this.get('max'))) {
            if((newValue > this.get('min')) && (newValue < this.get('max'))) {
                this.set('value', newValue);
            }else if(newValue > this.get('max')){
                this.set('value', this.get('max'));
            }else if(newValue < this.get('min')){
                this.set('value', this.get('min'));
            }
        },
        _handleDragStart : function(e){
            this._markerNode.removeClass('marker-hidden');
        },

        /*
         * When handle is handleDragEnd, this animates the return to the fixed dial
         */
        _handleDragEnd : function(){
            var node = this._handleNode;
                node.transition({
                    duration: 0.08, // seconds
                    easing: 'ease-in',
                    left: this._setNodeToFixedRadius()[0] + 'px',
                    top: this._setNodeToFixedRadius()[1] + 'px'
                }, Y.bind(function(){
                        this._markerNode.addClass('marker-hidden');
                        this._prevX = this._handleNode.getX(); //makes us ready for next drag.
                    }, this)
                );
//          this._inputNode.focus();
//          this._inputNode.select();
        },

        /*
         * Sets the XY of the node to the fixed dial within the control (resting position)
         * Sets it according to the angle related to the current value
         * In the case of handle drag:end, no obj is passed so
         * this just returns [X,Y] for style transform
         */
         _setNodeToFixedRadius : function(obj){
            var thisAngle = (this._angle - 90),
            rad = (Math.PI / 180);
            var newY = Math.round(Math.sin(thisAngle * rad) * this._handleDist);
            var newX = Math.round(Math.cos(thisAngle * rad) * this._handleDist);
            if(obj){
        //      obj.setXY([(this._centerXOnPage + newX), (this._centerYOnPage + newY)]);
                obj.setXY([(this._ringNode.getX() + this._centerX + newX), (this._ringNode.getY() + this._centerY + newY)]);
            }else{ // just need the style for css transform left and top to animate the handle drag:end
                return [this._centerX + newX, this._centerX + newY];
            }
         },

        /*
         * syncUI is intended to be used by the Widget subclass to
         * update the UI to reflect the current state of the widget.
         *
         * For dial, the method sets the value of the input field,
         * to match the current state of the value attribute.
         */
        syncUI : function() {
            this._uiSetValue(this.get("value"));
        },

        /*
         * Creates the input control for the dial and adds it to
         * the widget's content box, if not already in the markup.
         */
        _renderInput : function() {
            var contentBox = this.get("contentBox"),
                input = contentBox.one("." + Dial.CSS_CLASSES.input);
            if (!input) {
                input = Node.create(Dial.INPUT_TEMPLATE);
                contentBox.append(input);
            }
            this._inputNode = input;
        },
        _renderLabel : function() {
            var contentBox = this.get("contentBox"),
                label = contentBox.one("." + Dial.CSS_CLASSES.label);
            if (!label) {
                label = Node.create(Dial.LABEL_TEMPLATE);
                contentBox.append(label);
            }
            this._labelNode = label;
            this._valueStringNode = this._labelNode.one("." + Dial.CSS_CLASSES.valueString);
        },
        _renderRing : function() {
            var contentBox = this.get("contentBox"),
                ring = contentBox.one("." + Dial.CSS_CLASSES.ring);
            if (!ring) {
                ring = Node.create(Dial.RING_TEMPLATE);
                contentBox.append(ring);
                ring.setStyles({width:this.get('diameter') + 'px', height:this.get('diameter') + 'px'});
            }
            this._ringNode = ring;
        },
        _renderMarker : function() {
            var contentBox = this.get("contentBox"),
            marker = contentBox.one("." + Dial.CSS_CLASSES.marker);
            if (!marker) {
                marker = Node.create(Dial.MARKER_TEMPLATE);
                contentBox.one('.' + Dial.CSS_CLASSES.ring).append(marker);
            }
            this._markerNode = marker;
            this._markerUserNode = this._markerNode.one('.' + Dial.CSS_CLASSES.markerUser);

        },
        _renderCenterButton : function() {
            var contentBox = this.get("contentBox"),
                centerButton = contentBox.one("." + Dial.CSS_CLASSES.centerButton);
            if (!centerButton) {
                centerButton = Node.create(Dial.CENTER_BUTTON_TEMPLATE);
                contentBox.one('.' + Dial.CSS_CLASSES.ring).append(centerButton);
            }
            this._centerButtonNode = centerButton;
            this._resetString = this._centerButtonNode.one('.' + Dial.CSS_CLASSES.resetString);
            // centering the reset string in the button
            this._resetString.setStyle('top', (this._centerButtonNode.get('region').height / 2) - (this._resetString.get('region').height / 2) + 'px');
            this._resetString.setStyle('left', (this._centerButtonNode.get('region').width / 2) - (this._resetString.get('region').width / 2) + 'px');
            this._resetString.setContent('');
            var offset = this._ringNode.get('region').width * 0.25;
            this._centerButtonNode.setXY([(this._ringNode.getX() + offset), (this._ringNode.getY() + offset)]);

        },
        _renderHandle : function() {
            var contentBox = this.get("contentBox"),
                handle = contentBox.one("." + Dial.CSS_CLASSES.handle);
            if (!handle) {
                handle = Node.create(Dial.HANDLE_TEMPLATE);
                contentBox.one('.' + Dial.CSS_CLASSES.ring).append(handle);
            }
            this._handleNode = handle;
            this._handleUserNode = this._handleNode.one('.' + Dial.CSS_CLASSES.handleUser);
        },


        /*
         * Override the default content box value, since we don't want the srcNode
         * to be the content box for dial.
         */
        _defaultCB : function() {
            return null;
        },

        /*
         * Bounding box Arrow up/down, Page up/down key listener.
         *
         * Increments/Decrement the dial value, based on the key pressed.
         */
        _onDirectionKey : function(e) {
            e.preventDefault();
            var currVal = this.get("value"),
                newVal = currVal,
                minorStep = this.get("minorStep"),
                majorStep = this.get("majorStep");

            switch (e.charCode) { //37 , 39 = arrow left/right, 38, 40 = arrow up/down, 33, 34 = page up/down,  35 , 36 = end/home
                case 38: // up
                    newVal += minorStep;
                    newVal = Math.min(newVal, this.get("max"));
                    break;
                case 40: // down
                    newVal -= minorStep;
                    newVal = Math.max(newVal, this.get("min"));
                    break;
                case 37: // left
                    newVal -= minorStep;
                    newVal = Math.max(newVal, this.get("min"));
                    break;
                case 39: // right
                    newVal += minorStep;
                    newVal = Math.min(newVal, this.get("max"));
                    break;
                case 36: // home
                    newVal = 0;
                    break;
                case 35: // end
                    newVal = this.get('max');
                    break;
                case 33: // page up
                    newVal += majorStep;
                    newVal = Math.min(newVal, this.get("max"));
                    break;
                case 34: // page down
                    newVal -= majorStep;
                    newVal = Math.max(newVal, this.get("min"));
                    break;
            }

            if (newVal !== currVal) {
                this.set('value', newVal);
                this._prevX = this._handleNode.getX();
                if(newVal === 0){
                    this._timesWrapped = -1;
                }else{
                    this._timesWrapped = Math.floor(newVal / this.get('stepsPerRev'));
                }
            }
//          also IE seems to require 2 tab keystrokes to start responding to arrow keys etc. to modify value
//          screen reader having trouble with IE6?
//          alert("aria-valuenow: " + Y.one('.' + Dial.CSS_CLASSES.handleUser).get('aria-valuenow'));
//          alert("aria-valuetext: " + Y.one('.' + Dial.CSS_CLASSES.handleUser).get('aria-valuetext'));
        },
        _getAngleFromValue : function(newVal){
            var nonWrapedPartOfValue = newVal % this.get('stepsPerRev');
            var angleFromValue = nonWrapedPartOfValue / this.get('stepsPerRev') * 360;
            return angleFromValue;
        },

        _getValueFromAngle : function(angle){
            if(angle < 0){
                angle = (360 + angle);
            }else if(angle === 0){
                angle = 360;
            }
            var value = Math.round((angle / 360) * this.get('stepsPerRev'));
            return (value + (this._timesWrapped * this.get('stepsPerRev'))  );
        },
        _numberKey : function(e){
            var val = parseInt(e.target.get('value'),10);
            if(this._validateValue(val)){
                this.set('value', Math.round(val));
            }
        },

        /*
         * value attribute change listener. Updates the
         * value in the rendered input box, whenever the
         * attribute value changes.
         */
        _afterValueChange : function(e) {
            this._uiSetValue(e.newVal);
        },

        /*
         * Updates the value of the input box to reflect
         * the value passed in.
         * Makes all other needed UI display changes
         */
        _uiSetValue : function(val) {
            this._inputNode.set("value", val);
            this._valueStringNode.setContent(val);
            this._angle = this._getAngleFromValue(val);
            this._handleUserNode.set('aria-valuenow', val);
            this._handleUserNode.set('aria-valuetext', val);
            this._setNodeToFixedRadius(this._handleNode);
            this._setNodeToFixedRadius(this._markerNode);
            if((val === this.get('max')) || (val === this.get('min'))){
                if(this._markerUserNode.hasClass('marker-max-min') === false){
                    this._markerUserNode.addClass('marker-max-min');
                    if(supportsVML === true){
                        this._markerUserNode.one('fill').set('color', '#AB3232');
                    }
                }
            }else{
                if(supportsVML === true){
                    this._markerUserNode.one('fill').set('color', '#000');
                }
                if(this._markerUserNode.hasClass('marker-max-min') === true){
                    this._markerUserNode.removeClass('marker-max-min');
                }
            }
        },

        /*
         * value attribute default validator. Verifies that
         * the value being set lies between the min/max value
         */
        _validateValue: function(val) {
            var min = this.get("min"),
                max = this.get("max");
            return (Lang.isNumber(val) && val >= min && val <= max);
        }
    });
    Y.Dial = Dial;