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);