gistfile1.js

/**
 * InfoViewer
 */

var InfoViewer,
    INFO_VIEWER = 'infoViewer',
    ATTRS       = {},
    TRANSITIONS = {},
    
    INFO_NODES  = 'infoNodes',
    STEP        = 'step',
    
    CONTENT_BOX = 'contentBox',
    
    CHANGE      = 'Change',
    
    STEP_IN     = 'stepIn',
    STEP_OUT    = 'stepOut',
    
    YLang       = Y.Lang,
    isValue     = YLang.isValue,
    isNumber    = YLang.isNumber;

// *** Attributes *** //

ATTRS[ INFO_NODES ] = { initOnly: true };
ATTRS[ STEP ]       = { validator: isNumber };

// *** InfoViewer *** //

InfoViewer = Y.Base.create(INFO_VIEWER, Y.Widget, [], {
    
    // *** Prototype *** //
    
    // *** Lifecycle Methods *** //
    
    initializer : function () {
        
        if ( ! this.get(INFO_NODES)) {
            Y.error(INFO_VIEWER + ' needs to be configured with: ' + INFO_NODES);
        }
    },
    
    destructor : function () {},
    
    bindUI : function () {
        
        this.after(STEP+CHANGE, this._afterStepChange);
    },
    
    syncUI : function () {
        
        this._uiSetStep(this.get(STEP));
    },
    
    // *** Public Methods *** //
    
    // *** Private Methods *** //
    
    _uiSetStep : function (newStep, prevStep) {
        
        var contentBox      = this.get(CONTENT_BOX),
            infoNodes       = this.get(INFO_NODES),
            prevInfoNode    = isValue(prevStep) ? infoNodes.item(prevStep) : null,
            newInfoNode     = infoNodes.item(newStep);
            
        if (prevInfoNode) {
            contentBox.transition(STEP_OUT, function(){
                this.transition(STEP_IN, {
                    height      : {
                        delay       : 0,
                        duration    : 0.10,
                        easing      : 'ease-in',
                        value       : function(){
                            var oldHeight   = this.getComputedStyle('height'),
                                newHeight   = this.setContent(newInfoNode).getComputedStyle('height');
                            this.setStyle('height', oldHeight);
                            return newHeight;
                        }
                    }
                });
            });
        } else if ( ! this.get('rendered')) {
            contentBox.transition({
                duration    : 0.10,
                easing      : 'ease-in',
                height      : {
                    value   : function(){
                        var oldHeight   = this.getComputedStyle('height'),
                            newHeight   = this.setContent(newInfoNode.setStyle('opacity', 0)).getComputedStyle('height');
                        this.setStyle('height', oldHeight);
                        return newHeight;
                    }
                }
            }, function(){
                this.setStyle('height', 'auto');
                newInfoNode.transition({
                    duration    : 0.20,
                    opacity     : 1
                });
            });
        }
    },
    
    _afterStepChange : function (e) {
        
        this._uiSetStep(e.newVal, e.prevVal);
    }
    
}, {
    
    // *** Static *** //
    
    ATTRS       : ATTRS,
    TRANSITIONS : TRANSITIONS
    
});

// *** Transitions *** //

TRANSITIONS[ STEP_IN ] = {
    height      : {
        delay       : 0,
        duration    : 0.10,
        easing      : 'ease-in'
    },
    left        : {
        delay       : 0.10,
        duration    : 0.20,
        value       : 0,
        easing      : 'ease-in'
    },
    opacity     : {
        delay       : 0.10,
        duration    : 0.20,
        value       : 1
    },
    on          : {
        start   : function(){
            this.setStyles({
                position    : 'relative',
                left        : '400px',
                opacity     : 0
            });
        },
        end     : function(){
            this.setStyle('height', 'auto');
        }
    }
};

TRANSITIONS[ STEP_OUT ] = {
    left        : {
        duration    : 0.20,
        value       : '-400px',
        easing      : 'ease-out'
    },
    opacity     : {
        duration    : 0.20,
        value       : 0
    },
    on          : {
        start   : function(){
            this.setStyle('position', 'relative');
        }
    }
};

Y.mix(Y.Transition.fx, TRANSITIONS);

// *** Namespace *** //

Y.InfoViewer = InfoViewer;