CC-5450 : Refactor Media Management (Classes/DB) in Airtime

fixing up the JS button class, can select things properly per tab.
This commit is contained in:
Naomi 2014-01-16 18:15:34 -05:00
parent 2815cf773f
commit 819b4f1326
9 changed files with 278 additions and 48 deletions

View File

@ -40,10 +40,10 @@ class LibraryController extends Zend_Controller_Action
$this->view->headScript()->appendFile($baseUrl.'js/airtime/buttons/buttons.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/utilities/utilities.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/events/lib_playlistbuilder.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/lib_separate_table.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
//$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/library.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
//$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/events/library_playlistbuilder.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/playlist/playlist.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headLink()->appendStylesheet($baseUrl.'css/media_library.css?'.$CC_CONFIG['airtime_version']);
$this->view->headLink()->appendStylesheet($baseUrl.'css/jquery.contextMenu.css?'.$CC_CONFIG['airtime_version']);
$this->view->headLink()->appendStylesheet($baseUrl.'css/datatables/css/ColVis.css?'.$CC_CONFIG['airtime_version']);
@ -51,10 +51,6 @@ class LibraryController extends Zend_Controller_Action
$this->view->headLink()->appendStylesheet($baseUrl.'css/waveform.css?'.$CC_CONFIG['airtime_version']);
$this->view->headLink()->appendStylesheet($baseUrl.'css/playlist_builder.css?'.$CC_CONFIG['airtime_version']);
//$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/spl.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
//$this->view->headScript()->appendFile($baseUrl.'js/airtime/playlist/smart_blockbuilder.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/playlist/playlist.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/waveformplaylist/observer/observer.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/waveformplaylist/config.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/waveformplaylist/curves.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');

View File

@ -90,8 +90,7 @@ class ScheduleController extends Zend_Controller_Action
$this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.columnFilter.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/buttons/buttons.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
//$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/events/library_showbuilder.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
//$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/library.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/events/lib_showbuilder.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/lib_separate_table.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/showbuilder/builder.js?'.$CC_CONFIG['airtime_version'],'text/javascript');

View File

@ -128,8 +128,7 @@ class ShowbuilderController extends Zend_Controller_Action
//only include library things on the page if the user can see it.
if (!$disableLib) {
//$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/library.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
//$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/events/library_showbuilder.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/events/lib_showbuilder.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/lib_separate_table.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
$data = Application_Model_Preference::getCurrentLibraryTableSetting();

View File

@ -1,17 +1,18 @@
var AIRTIME = (function(AIRTIME) {
var mod, DEFAULT_CLASS = 'ui-button ui-state-default', DISABLED_CLASS = 'ui-state-disabled';
var mod,
DEFAULT_CLASS = 'ui-button ui-state-default',
DISABLED_CLASS = 'ui-state-disabled';
if (AIRTIME.button === undefined) {
AIRTIME.button = {};
}
mod = AIRTIME.button;
mod.isDisabled = function(c, useParent) {
//c is a unique class on the <button>
mod.isDisabled = function(c) {
var button = $("." + c);
if (useParent) {
button = button.parent();
}
//disable the <button>
if (button.hasClass(DISABLED_CLASS)) {
return true;
}
@ -19,25 +20,19 @@ var AIRTIME = (function(AIRTIME) {
return false;
};
mod.enableButton = function(c, useParent) {
if (useParent) {
var button = $("." + c).parent();
} else {
var button = $("." + c);
}
//c is a unique class on the <button>
mod.enableButton = function(c) {
var button = $("." + c);
if (button.hasClass(DISABLED_CLASS)) {
button.removeClass(DISABLED_CLASS);
button.removeAttr('disabled');
}
};
mod.disableButton = function(c, useParent) {
if (useParent) {
var button = $("." + c).parent();
} else {
var button = $("." + c);
}
//c is a unique class on the <button>
mod.disableButton = function(c) {
var button = $("." + c);
if (!button.hasClass(DISABLED_CLASS)) {
button.addClass(DISABLED_CLASS);

View File

@ -0,0 +1,34 @@
var AIRTIME = (function(AIRTIME) {
var mod;
if (AIRTIME.library === undefined) {
AIRTIME.library = {};
}
mod = AIRTIME.library;
mod.setupToolbar = function(tabId) {
var $toolbar = $("#"+tabId+" .fg-toolbar:first"),
$menu = mod.createToolbarButtons();
$toolbar.append($menu);
};
mod.checkAddButton = function(tabId) {
};
mod.checkDeleteButton = function(tabId) {
};
mod.checkToolBarIcons = function(tabId) {
mod.checkAddButton();
mod.checkDeleteButton();
};
return AIRTIME;
}(AIRTIME || {}));

View File

@ -0,0 +1,34 @@
var AIRTIME = (function(AIRTIME) {
var mod;
if (AIRTIME.library === undefined) {
AIRTIME.library = {};
}
mod = AIRTIME.library;
mod.setupToolbar = function(tabId) {
var $toolbar = $("#"+tabId+" .fg-toolbar:first"),
$menu = mod.createToolbarButtons();
$toolbar.append($menu);
};
mod.checkAddButton = function(tabId) {
};
mod.checkDeleteButton = function(tabId) {
};
mod.checkToolBarIcons = function(tabId) {
mod.checkAddButton();
mod.checkDeleteButton();
};
return AIRTIME;
}(AIRTIME || {}));

View File

@ -8,7 +8,9 @@ var AIRTIME = (function(AIRTIME) {
mod = AIRTIME.library;
mod.checkAddButton = function() {
var selected = mod.getChosenItemsLength(), $cursor = $('tr.cursor-selected-row'), check = false;
var selected = mod.getChosenItemsLength(),
$cursor = $('tr.cursor-selected-row'),
check = false;
// make sure library items are selected and a cursor is selected.
if (selected !== 0 && $cursor.length !== 0) {

View File

@ -5,6 +5,10 @@ var AIRTIME = (function(AIRTIME) {
}
var mod = AIRTIME.library;
//stored in format chosenItems[tabname] = object of chosen ids for the tab.
var chosenItems = {},
LIB_SELECTED_CLASS = "lib-selected";
function createDatatable(config) {
var table = $("#"+config.id).dataTable({
@ -33,7 +37,7 @@ var AIRTIME = (function(AIRTIME) {
"bAutoWidth": true,
"sDom": 'Rl<"#library_display_type">f<"dt-process-rel"r><"H"<"library_toolbar"C>><"dataTables_scrolling"t><"F"ip>',
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).data("aData", aData);
$(nRow).data("aData", aData);
}
});
@ -68,6 +72,148 @@ var AIRTIME = (function(AIRTIME) {
}
});
}
//$el is a select table row <tr>
mod.addToChosen = function($el) {
var data = $el.data('aData'),
tabId = $el.parents("div.ui-tabs-panel").attr("id");
if (chosenItems[tabId] === undefined) {
chosenItems[tabId] = {};
}
chosenItems[tabId][data.Id] = $el.data('aData');
};
//$el is a select table row <tr>
mod.removeFromChosen = function($el) {
var data = $el.data('aData'),
tabId = $el.parents("div.ui-tabs-panel").attr("id");
// used to not keep dragged items selected.
if (!$el.hasClass(LIB_SELECTED_CLASS)) {
delete chosenItems[tabId][data.Id];
}
};
//$el is a select table row <tr>
mod.highlightItem = function($el) {
var $input = $el.find("input");
$input.attr("checked", true);
$el.addClass(LIB_SELECTED_CLASS);
};
//$el is a select table row <tr>
mod.unHighlightItem = function($el) {
var $input = $el.find("input");
$input.attr("checked", false);
$el.removeClass(LIB_SELECTED_CLASS);
};
//$el is a select table row <tr>
mod.selectItem = function($el) {
mod.highlightItem($el);
mod.addToChosen($el);
mod.checkToolBarIcons();
};
//$el is a select table row <tr>
mod.deselectItem = function($el) {
mod.unHighlightItem($el);
mod.removeFromChosen($el);
mod.checkToolBarIcons();
};
/*
* selects all items which the user can currently see. (behaviour taken from
* gmail)
*
* by default the items are selected in reverse order so we need to reverse
* it back
*/
mod.selectCurrentPage = function() {
$.fn.reverse = [].reverse;
var $inputs = $libTable.find("tbody input:checkbox"),
$trs = $inputs.parents("tr").reverse();
$inputs.attr("checked", true);
$trs.addClass(LIB_SELECTED_CLASS);
$trs.each(function(i, el){
$el = $(this);
mod.addToChosen($el);
});
mod.checkToolBarIcons();
};
/*
* deselects all items that the user can currently see. (behaviour taken
* from gmail)
*/
mod.deselectCurrentPage = function() {
var $inputs = $libTable.find("tbody input:checkbox"),
$trs = $inputs.parents("tr"),
id;
$inputs.attr("checked", false);
$trs.removeClass(LIB_SELECTED_CLASS);
$trs.each(function(i, el){
$el = $(this);
id = $el.attr("id");
delete chosenItems[id];
});
mod.checkToolBarIcons();
};
mod.selectNone = function() {
var $inputs = $libTable.find("tbody input:checkbox"),
$trs = $inputs.parents("tr");
$inputs.attr("checked", false);
$trs.removeClass(LIB_SELECTED_CLASS);
chosenItems = {};
mod.checkToolBarIcons();
};
mod.createToolbarButtons = function() {
var $menu = $("<div class='btn-toolbar' />");
$menu
.append("<div class='btn-group'>" +
"<button class='btn btn-small dropdown-toggle' data-toggle='dropdown'>" +
$.i18n._("Select")+" <span class='caret'></span>" +
"</button>" +
"<ul class='dropdown-menu'>" +
"<li id='sb-select-page'><a href='#'>"+$.i18n._("Select this page")+"</a></li>" +
"<li id='sb-dselect-page'><a href='#'>"+$.i18n._("Deselect this page")+"</a></li>" +
"<li id='sb-dselect-all'><a href='#'>"+$.i18n._("Deselect all")+"</a></li>" +
"</ul>" +
"</div>")
.append("<div class='btn-group'>" +
"<button class='btn btn-small' id='library-plus'>" +
"<i class='icon-white icon-plus'></i>" +
"<span id='lib-plus-text'></span>" +
"</button>" +
"</div>")
.append("<div class='btn-group'>" +
"<button class='btn btn-small' id='sb-trash'>" +
"<i class='icon-white icon-trash'></i>" +
"</button>" +
"</div>");
return $menu;
};
mod.onReady = function () {
@ -121,7 +267,6 @@ var AIRTIME = (function(AIRTIME) {
}
};
$("#lib_tabs").tabs({
show: function( event, ui ) {
var tab = tabsInit[ui.panel.id];
@ -139,6 +284,7 @@ var AIRTIME = (function(AIRTIME) {
source: tab.source
});
mod.setupToolbar(ui.panel.id);
tab.initialized = true;
}
@ -219,10 +365,35 @@ var AIRTIME = (function(AIRTIME) {
});
});
$library.on("click", "input[type=checkbox]", function(ev) {
var $cb = $(this),
$prev,
$tr = $cb.parents("tr"),
$trs;
if ($cb.is(":checked")) {
if (ev.shiftKey) {
$prev = $libTable.find("tbody").find("tr."+LIB_SELECTED_CLASS).eq(-1);
$trs = $prev.nextUntil($tr);
$trs.each(function(i, el){
mod.selectItem($(el));
});
}
mod.selectItem($tr);
}
else {
mod.deselectItem($tr);
}
});
// begin context menu initialization.
$.contextMenu({
selector: '#lib_tabs td',
trigger: "left",
trigger: "none",
ignoreRightClick: true,
build: function($el, e) {

View File

@ -109,10 +109,10 @@ var AIRTIME = (function(AIRTIME){
var $selectable = $sbTable.find("tbody").find("input:checkbox");
if ($selectable.length !== 0) {
AIRTIME.button.enableButton("btn-group #timeline-select", false);
AIRTIME.button.enableButton("sb-select");
}
else {
AIRTIME.button.disableButton("btn-group #timeline-select", false);
AIRTIME.button.disableButton("sb-select");
}
//need to check if the 'Select' button is disabled
@ -125,10 +125,10 @@ var AIRTIME = (function(AIRTIME){
var $over = $sbTable.find(".sb-over.sb-allowed");
if ($over.length !== 0) {
AIRTIME.button.enableButton("icon-cut", true);
AIRTIME.button.enableButton("sb-overbooked");
}
else {
AIRTIME.button.disableButton("icon-cut", true);
AIRTIME.button.disableButton("sb-overbooked");
}
};
@ -136,10 +136,10 @@ var AIRTIME = (function(AIRTIME){
var $selected = $sbTable.find("tbody").find("input:checkbox").filter(":checked");
if ($selected.length !== 0) {
AIRTIME.button.enableButton("icon-trash", true);
AIRTIME.button.enableButton("sb-trash");
}
else {
AIRTIME.button.disableButton("icon-trash", true);
AIRTIME.button.disableButton("sb-trash");
}
};
@ -147,10 +147,10 @@ var AIRTIME = (function(AIRTIME){
var $current = $sbTable.find("."+NOW_PLAYING_CLASS);
if ($current.length !== 0) {
AIRTIME.button.enableButton("icon-step-forward", true);
AIRTIME.button.enableButton("sb-current");
}
else {
AIRTIME.button.disableButton("icon-step-forward", true);
AIRTIME.button.disableButton("sb-current");
}
};
@ -170,10 +170,10 @@ var AIRTIME = (function(AIRTIME){
}
if (canCancel === true) {
AIRTIME.button.enableButton("icon-ban-circle", true);
AIRTIME.button.enableButton("sb-cancel");
}
else {
AIRTIME.button.disableButton("icon-ban-circle", true);
AIRTIME.button.disableButton("sb-cancel");
}
};
@ -1033,7 +1033,7 @@ var AIRTIME = (function(AIRTIME){
$menu = $("<div class='btn-toolbar'/>");
$menu.append("<div class='btn-group'>" +
"<button class='btn btn-small dropdown-toggle' id='timeline-select' data-toggle='dropdown'>" +
"<button class='btn btn-small dropdown-toggle sb-select' id='timeline-select' data-toggle='dropdown'>" +
$.i18n._("Select")+" <span class='caret'></span>" +
"</button>" +
"<ul class='dropdown-menu'>" +
@ -1042,20 +1042,20 @@ var AIRTIME = (function(AIRTIME){
"</ul>" +
"</div>")
.append("<div class='btn-group'>" +
"<button title='"+$.i18n._("Remove overbooked tracks")+"' class='ui-state-disabled btn btn-small' disabled='disabled'>" +
"<button title='"+$.i18n._("Remove overbooked tracks")+"' class='ui-state-disabled btn btn-small sb-overbooked' disabled='disabled'>" +
"<i class='icon-white icon-cut'></i></button></div>")
.append("<div class='btn-group'>" +
"<button title='"+$.i18n._("Remove selected scheduled items")+"' class='ui-state-disabled btn btn-small' disabled='disabled'>" +
"<button title='"+$.i18n._("Remove selected scheduled items")+"' class='ui-state-disabled btn btn-small sb-trash' disabled='disabled'>" +
"<i class='icon-white icon-trash'></i></button></div>");
//if 'Add/Remove content' was chosen from the context menu
//in the Calendar do not append these buttons
if ($(".ui-dialog-content").length === 0) {
$menu.append("<div class='btn-group'>" +
"<button title='"+$.i18n._("Jump to the current playing track")+"' class='ui-state-disabled btn btn-small' disabled='disabled'>" +
"<button title='"+$.i18n._("Jump to the current playing track")+"' class='ui-state-disabled btn btn-small sb-current' disabled='disabled'>" +
"<i class='icon-white icon-step-forward'></i></button></div>")
.append("<div class='btn-group'>" +
"<button title='"+$.i18n._("Cancel current show")+"' class='ui-state-disabled btn btn-small btn-danger' disabled='disabled'>" +
"<button title='"+$.i18n._("Cancel current show")+"' class='ui-state-disabled btn btn-small btn-danger sb-cancel' disabled='disabled'>" +
"<i class='icon-white icon-ban-circle'></i></button></div>");
}