gistfile1.js

/**
 * Reusable vertical slider component used on dashboard-upload tab and other tabs.
 */
T.Components.VerticalSlider = {
    dataNamespace: "VerticalSlider",
    container: null,
    pagesContainer: null,
    pages: null,

    /**
     * @param {jQuery} container Slider pages div wrap
     * @param {Object} options
     */
    init: function(container, options) {
        options = $.extend({
            // no options yet
        }, options);

        var c = this;
        this.container = container;
        this.container.data(this.dataNamespace, this);
        this.pagesContainer = container.find(".pages:first");

        // set styles
        container.css({overflow: "hidden", position: "relative"});
        this.pagesContainer.css({position: "relative"});
            
        container.bind("selectedPageChanged", function() {
            // switch to the selected page

            var $this = $(this); // container
            var pageIndex = parseInt($this.data("selectedPageIndex"));
            var page = c.pagesContainer.children(":eq(" + pageIndex + ")");

            var top = 0 - page.position().top;
            c.pagesContainer.animate({
                "margin-top" : top
            }, 500);

            // update height of container to height of page
            $this.stop(true).animate({
                "height": page.height()
            }, 300, function() {
                $this.trigger("afterHeightChanged");
            });
        });

        // bind page content change event that can be triggered by external code
        this.pages = this.pagesContainer.children(".page");
        this.pages.data(this.dataNamespace, this)
            .bind("contentChanged", this.onPageContentChanged);

        // select first page
        this.selectPageIndex(0);
            
        return this;
    },

    selectPageIndex: function(index) {        
        this.container.data("selectedPageIndex", parseInt(index)).trigger("selectedPageChanged");
    },

    onPageContentChanged: function() {
        // get the index of the page that changed
        // if the page that changed is the selected, refresh the slider so the height will be updated        
        var c = $(this).data(T.Components.VerticalSlider.dataNamespace);        
        if ($(this).index() == c.container.data("selectedPageIndex")) {            
            c.selectPageIndex($(this).index());
        }
    }
};