Beginnings of Guide Widget Module

gistfile1.js

    /**
     * Guide
     * 
     * Provides an interactive Guide Widget (Overlay) to present content in a series of Steps.
     * 
     * GuideSteps are Widgets with WidgetStdMod support and are children to a Guide.
     * These Steps also have WidgetPositionAlign support which is overloaded to reference related content for the Step;
     * meaning a GuideStep can be aligned with it’s related content on the page, and when active,
     * the Guide Overlay will position itself according the currently-selected Step’s defined alignment.
     * 
     * Beyond providing containment for rendering GuideSteps, a Guide will only show the content of one Step at a time.
     * A Guide provides navigation between it’s Steps both as a navigation list rendered in the Overlay
     * and a ‘next’ button to select the next GuideStep child in the list.
     */
    
    var Guide,
        GUIDE           = 'guide',
        
        GuideStep,
        GUIDE_STEP      = 'guideStep',
        
        STEPS_NODE      = 'stepsNode',
        NAVIGATION      = 'navigation',
        NAVIGATION_NODE = 'navigationNode',
        
        CHANGE          = 'Change',
        
        BOUNDING_BOX    = 'boundingBox',
        CONTENT_BOX     = 'contentBox',
        
        STD_HEADER      = Y.WidgetStdMod.STD_HEADER,
        
        getCN = Y.ClassNameManager.getClassName,
        
        DOT = '.',
        
        STD_SECTION_CLASS_NAMES = Y.WidgetStdMod.SECTION_CLASS_NAMES,
        STEPS                   = 'steps',
        STEP                    = 'step',
        
        YLang       = Y.Lang,
        isString    = YLang.isString,
        isBoolean   = YLang.isBoolean;
    
    // *** GuideStep *** //
    
    GuideStep = Y.Base.create(GUIDE_STEP, Y.Widget, [Y.WidgetStdMod, Y.WidgetPositionAlign, Y.WidgetChild], {
        
        // *** Prototype *** //
        
        BOUNDING_TEMPLATE : '<li><li>',
        
        // *** Lifecycle Methods *** //
        
        // *** Widget Methods *** //
        
        _uiSetAlign : function(node, points) {
            
            // delegate UI alignment to Guide (parent) if this GuideStep is selected.
            if (this.get('selected')) {
                this.get('parent').align(node, points);
            }
        }
        
        // *** Public Methods *** //
        
        // *** Private Methods *** //
        
    }, {
        
        // *** Static *** //
        
        ATTRS : {
            
            strings : {
                value : {
                    defLabel : 'Step '
                }
            },
            
            /**
             * @attribute   label
             * @type        {String}
             * @default     "Step x"
             * @description The name of the GuideStep, and will be used in navigation.
             *              The initial value will be parsed from the text content .yui3-widget-hd,
             *              or get assigned the default value: "Step " + (index + 1), e.g. "Step 1".
             */
            label : {
                validator   : isString,
                valueFn     : function () {
                    
                    return ( this.getString('defLabel') + (this.get('index') + 1) );
                }
            }
            
        },
        
        HTML_PARSER : {
            
            label : function (srcNode) {
                
                return srcNode.one(DOT+STD_SECTION_CLASS_NAMES[STD_HEADER]).get('text');
            }
            
        }
        
    });
    
    // *** Guide *** //
    
    Guide = Y.Base.create(GUIDE, Y.Overlay, [Y.WidgetParent], {
        
        // *** Prototype *** //
        
        STEPS_TEMPLATE              : '<ol></ol>',
        NAVIGATION_TEMPLATE         : '<ol></ol>',
        NAVIGATION_ITEM_TEMPLATE    : '<li></li>',
        
        // *** Lifecycle Methods *** //
        
        renderUI : function () {
            
            var stepsNode       = this.get(STEPS_NODE),
                navigation      = this.get(NAVIGATION),
                navigationNode  = this.get(NAVIGATION_NODE);
            
            // Append the stepsNode into the bodyContent; this is where GuideSteps are rendered.
            this.getStdModNode(Y.WidgetStdMod.BODY).append(stepsNode);
            this._childrenContainer = stepsNode;
            
            // Added navigationNode to contentBox when we want GuideStep navigation.
            if (navigation && navigationNode) {
                this.each(function(step){
                    navigationNode.appendChild(this.NAVIGATION_ITEM_TEMPLATE)
                        .addClass(this.getClassName(NAVIGATION, STEP))
                        .set('text', step.get('label'));
                });
                this.get(CONTENT_BOX).append(navigationNode);
            }
        },
        
        bindUI : function () {
            
            
        },
        
        syncUI : function () {
            
            
        },
        
        // *** Public Methods *** //
        
        // *** Private Methods *** //
        
        _defStepsNodeValueFn : function () {
            
            return Y.Node.create(this.STEPS_TEMPLATE);
        },
        
        _setStepsNode : function (node) {
            
            node = Y.one(node);
            
            if (node) {
                node.addClass(this.getClassName(STEPS));
            }
            
            return node;
        },
        
        _defNavigationNodeValueFn : function () {
            
            return ( this.get(NAVIGATION) ? Y.Node.create(this.NAVIGATION_TEMPLATE) : null );
        },
        
        _setNavigationNode : function (node) {
            
            node = Y.one(node);
            
            if (node) {
                node.addClass(this.getClassName(NAVIGATION));
            }
            
            return node;
        }
        
    }, {
        
        // *** Static *** //
        
        ATTRS : {
            
            // Override value
            defaultChildType : {
                value : GuideStep
            },
            
            /**
             * @attribute   stepsNode
             * @type        {Node}
             * @default     node
             * @description The children container Node where the GuideSteps are rendered into.
             */
            stepsNode : {
                valueFn     : '_defStepsNodeValueFn',
                setter      : '_setStepsNode',
                writeOnce   : true
            },
        
            /**
             * @attribute   navigation
             * @type        {Boolean}
             * @default     true
             * @description Whether or not to render a navigation list for the Guide’s Steps.
             */
            navigation : {
                value       : true,
                validator   : isBoolean,
                initOnly    : true
            },
            
            /**
             * @attibute    navigationNode
             * @type        {Node}
             * @default     node
             * @description The Node for the navigation for the GuideSteps as a list of the GuideStep labels
             */
            navigationNode : {
                valueFn     : '_defNavigationNodeValueFn',
                setter      : '_setNavigationNode',
                writeOnce   : true
            }
            
        },
        
        HTML_PARSER : {
            
            stepsNode : DOT+getCN(GUIDE, STEPS),
            
            navigationNode : DOT+getCN(GUIDE, NAVIGATION)
            
        }
        
    });
    
    // *** Namespace *** //
    
    Y.namespace('TTW');
    Y.TTW.Guide     = Guide;
    Y.TTW.GuideStep = GuideStep;