sintonia/airtime_mvc/public/js/airtime/showbuilder/tabs.js

var AIRTIME = (function(AIRTIME){
        /**
         * AIRTIME module namespace object
         */
    var mod,
        /**
         * Tab counter to use as unique tab IDs that can be
         * retrieved from the DOM
         *
         * @type {number}
         */
        $tabCount = 0,
        /**
         * Map of Tab IDs (by tabCount) to object UIDs so
         * Tabs can be referenced either by ID (from the DOM)
         * or by UID (from object data)
         *
         * @type {{}}
         */
        $tabMap = {},
        /**
         * Map of object UIDs to currently open Tab objects
         *
         * @type {{}}
         */
        $openTabs = {},
        /**
         * The currently active (open) Tab object
         *
         * @type {Tab}
         */
        $activeTab,
        /**
         * Singleton object used to reference the schedule tab
         *
         * @type {ScheduleTab}
         */
        $scheduleTab;

    if (AIRTIME.tabs === undefined) {
        AIRTIME.tabs = {};
    }
    mod = AIRTIME.tabs;

    /*  #####################################################
                  Object Initialization and Functions
        ##################################################### */

    /**
     * Tab object constructor
     *
     * @param {string} html the HTML to render as the tab contents
     * @param {string} uid  the unique ID for the tab. Uses the values in
     *                      AIRTIME.library.MediaTypeStringEnum and the object ID
     *                      to create a string of the form TYPE_ID.
     * @returns {Tab}       the created Tab object
     * @constructor
     */
    var Tab = function(html, uid) {
        var self = this;

        AIRTIME.library.selectNone();

        var existingTab = $openTabs[uid];
        if (existingTab) {
            existingTab.switchTo();
            return existingTab;
        }
        self.id = ++$tabCount;
        self.uid = uid;

        // TODO: clean this up a bit and use js instead of strings to create elements
        var wrapper = "<div data-tab-id='" + self.id + "' id='pl-tab-content-" + self.id + "' class='side_playlist pl-content'><div class='editor_pane_wrapper'></div></div>",
            t = $("#show_builder").append(wrapper).find("#pl-tab-content-" + self.id),
            pane = $(".editor_pane_wrapper:last").append(html),
            name = pane.find("#track_title").length > 0 ? pane.find("#track_title").val() + $.i18n._(" - Metadata Editor")
                : pane.find(".playlist_name_display").val(),
            tab =
                "<li data-tab-id='" + self.id + "' id='pl-tab-" + self.id + "' role='presentation' class='active'>" +
                    "<a href='javascript:void(0)'>" +
                        "<span class='tab-name'>" + name + "</span>" +
                        "<span href='#' class='lib_pl_close icon-remove'></span>" +
                    "</a>" +
                "</li>",
            tabs = $(".nav.nav-tabs");

        $(".nav.nav-tabs li").removeClass("active");
        tabs.append(tab);

        var newTab = $("#pl-tab-" + self.id);

        self.wrapper = pane;
        self.contents = t;
        self.tab = newTab;

        $openTabs[uid] = self;
        $tabMap[self.id] = uid;

        self._init();
        self.switchTo();
        return self;
    };

    /**
     * Private initialization function for Tab objects
     *
     * Assigns default action handlers to the tab DOM element
     *
     * @private
     */
    Tab.prototype._init = function() {
        var self = this;
        self.assignTabClickHandler(function(e) {
            if (!$(this).hasClass('active')) {
                self.switchTo();
            }
        });

        self.assignTabCloseClickHandler(function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).unbind("click"); // Prevent repeated clicks in quick succession from closing multiple tabs

            // We need to update the text on the add button
            AIRTIME.library.checkAddButton();
            // We also need to run the draw callback to update how dragged items are drawn
            AIRTIME.library.fnDrawCallback();
            self.close();
        });

        self.contents.on("click", ".toggle-editor-form", function(event) {
            self.contents.find(".inner_editor_wrapper").slideToggle(200);
            var buttonIcon = $(this).find('.icon-white');
            buttonIcon.toggleClass('icon-chevron-up');
            buttonIcon.toggleClass('icon-chevron-down');
        });
    };

    /**
     * Internal destructor. Can be assigned via assignOnCloseHandler
     *
     * @private
     */
    Tab.prototype._destroy = function () {};

    /**
     * Assign the given function f as the click handler for the tab
     *
     * @param {function} f the function to call when the tab is clicked
     */
    Tab.prototype.assignTabClickHandler = function(f) {
        var self = this;
        self.tab.unbind("click").on("click", function (e) {
            // Always close on middle mouse press
            if (e.which == 2) {
                // Simulate a click on the close tab button so any
                // additional on-close behaviour is executed
                self.tab.find(".lib_pl_close").click();
                return;
            }
            f();
        });
    };

    /**
     * Assign the given function f as the click handler for the tab close button
     *
     * @param {function} f the function to call when the tab's close button is clicked
     */
    Tab.prototype.assignTabCloseClickHandler = function(f) {
        this.tab.find(".lib_pl_close").unbind("click").click(f);
    };

    /**
     * Assign an implicit destructor
     *
     * @param {function} fn function to run when this Tab is destroyed
     */
    Tab.prototype.assignOnCloseHandler = function (fn) {
        this._destroy = fn;
    };

    /**
     * Open this tab in the right-hand pane and set it as the currently active tab
     */
    Tab.prototype.switchTo = function() {
        var self = this;
        $activeTab.contents.hide().removeClass("active-tab");
        self.contents.addClass("active-tab").show();

        $activeTab.tab.removeClass("active");
        self.tab.addClass("active");

        mod.updateActiveTab();

        // In case we're adding a tab that wraps to the next row
        // It's better to call this here so we don't have to call it in multiple places
        mod.onResize();
        return this;  // For chaining
    };

    /**
     * Close the tab. Switches to the nearest open tab, prioritizing the
     * more recent (rightmost) tabs
     */
    Tab.prototype.close = function() {
        var self = this;

        var ascTabs = Object.keys($openTabs).sort(function(a, b){return a-b}),
            pos = ascTabs.indexOf(self.uid),
            toTab = pos < ascTabs.length-1 ? $openTabs[ascTabs[++pos]] : $openTabs[ascTabs[--pos]];
        delete $openTabs[self.uid];  // Remove this tab from the open tab array
        delete $tabMap[self.id];  // Remove this tab from the internal tab mapping

        // Remove the relevant DOM elements (the tab and its contents)
        if (self.uid !== 0) {
            self.tab.remove();
            self.contents.remove();
        } else {
            // only hide scheduled shows tab so we can still interact with it.
            self.tab.hide();
            self.contents.hide();
        }


        if (self.isActive() && toTab) {  // Closing the current tab, otherwise we don't need to switch tabs
            toTab.switchTo();
        } else {
            mod.onResize();
        }

        if (Object.keys($openTabs).length < 1) {
            $('#show_builder').hide();
        }

        self._destroy();
    };

    /**
     * Set the visible Tab name to the given string
     *
     * @param {string} name the name to set
     */
    Tab.prototype.setName = function(name) {
        this.tab.find(".tab-name").text(name);
        return this;  // For chaining
    };

    /**
     * Check if the Tab object is the currently active (open) Tab
     *
     * @returns {boolean} true if the Tab is the currently active Tab
     */
    Tab.prototype.isActive = function() {
        return this.contents.get(0) == $activeTab.contents.get(0);
    };

    /**
     * ScheduledTab object constructor
     *
     * The schedule tab is present in the DOM already on load, and we
     * need to be able to reference it in the same way as other tabs
     * (to avoid duplication and confusion) so we define it statically
     *
     * @constructor
     */
    var ScheduleTab = function() {
        var self = this, uid = 0,
            tab = $("#schedule-tab"),
            pane = $("#show_builder"),
            contents = pane.find(".outer-datatable-wrapper");
        self.id = 0;
        self.uid = uid;

        tab.data("tab-id", self.id);

        self.wrapper = pane;
        self.contents = contents;
        self.tab = tab;

        self.assignTabClickHandler(function(e) {
            if (!self.isActive()) {
                self.switchTo();
            }
        });

        self.assignTabCloseClickHandler(function(e) {
            self.close();
        });

        $openTabs[uid] = self;
        $tabMap[self.id] = uid;
    };
    /**
     * Subclass the Tab object
     * @type {Tab}
     */
    ScheduleTab.prototype = Object.create(Tab.prototype);
    ScheduleTab.prototype.constructor = ScheduleTab;

    /*  #####################################################
                           Module Functions
        ##################################################### */

    /**
     * Initialize the singleton ScheduleTab object on startup
     */
    mod.initScheduleTab = function() {
        $scheduleTab = new ScheduleTab();
        $activeTab = $scheduleTab;
    };

    /**
     * Create a new Tab object and open it in the ShowBuilder pane
     *
     * @param {string} html         the HTML to render as the tab contents
     * @param {string} uid          the unique ID for the tab. Uses the values in
     *                              AIRTIME.library.MediaTypeStringEnum and the object ID
     * @param {function} callback   an optional callback function to call once the
     *                              Tab object is initialized
     * @returns {Tab}               the created Tab object
     */
    mod.openTab = function(html, uid, callback) {
        $('#show_builder').show();
        var newTab = new Tab(html, uid);
        if (callback) callback(newTab);
        return newTab;
    };

    /**
     * open the schedule tab if if was closed
     *
     * @returns {Tab}
     */
    mod.openScheduleTab = function() {
        var $scheduleTab = this.getScheduleTab();
        $('#show_builder').show();
        $openTabs[0] = $scheduleTab;
        $scheduleTab.tab.show();
        $scheduleTab.contents.show();
        $scheduleTab.switchTo();
        $scheduleTab.assignTabCloseClickHandler(function(e) {
            $scheduleTab.close();
        });
    };

    /**
     * Updates the currently active tab
     *
     * Called when the user switches tabs for any reason
     *
     * NOTE: this function updates the currently active playlist
     *       as a side-effect, which is necessary for playlist tabs
     *       but not for other types of tabs... would be good to
     *       get rid of this dependency at some point
     */
    mod.updateActiveTab = function() {
        var t = $(".nav.nav-tabs .active");
        $activeTab = mod.get(t.data("tab-id"));
        if (!$activeTab) $activeTab = $scheduleTab;
        if ($activeTab.contents.hasClass("pl-content")) {
            AIRTIME.playlist.setCurrent($activeTab.contents);
        }
    };

    /**
     * Get the ScheduleTab object
     *
     * @returns {ScheduleTab}
     */
    mod.getScheduleTab = function() {
        return $scheduleTab;
    };

    /**
     * Get the currently active (open) Tab object
     *
     * @returns {Tab} the currently active tab
     */
    mod.getActiveTab = function() {
        return $activeTab;
    };

    /**
     * Given a tab id, get the corresponding Tab object
     *
     * @param {int|string}      id the tab or object ID of the Tab to retrieve
     * @returns {Tab|undefined} the Tab object with the given ID, or undefined
     *                          if no Tab with the given ID exists
     */
    mod.get = function(id) {
        return $.isNumeric(id) ? $openTabs[$tabMap[id]] : $openTabs[id];
    };

    /**
     * Adjust the margins on the right-hand pane when we have multiple rows of tabs
     */
    mod.onResize = function() {
        var h = $(".panel-header .nav").height();
        $(".pl-content").css("margin-top", h + 5); // 8px extra for padding
        $("#show_builder_table_wrapper").css("top", h + 5);
    };

    /**
     * Expose the Tab object so it can be subclassed
     *
     * @type {Function}
     */
    mod.Tab = Tab;

    return AIRTIME;

}(AIRTIME || {}));

$(document).ready(function() {
    var sb = $("#show_builder");
    // Add text scrolling to tab names
    sb.addTitles(".tab-name");
    sb.find(".nav.nav-tabs").sortable({
        containment: "parent",
        distance: 25
    });
    // Initialize the ScheduleTab
    AIRTIME.tabs.initScheduleTab();
});
$(window).resize(AIRTIME.tabs.onResize);