SAAS-1165 - initial work on left-hand pane for podcast episodes

This commit is contained in:
Duncan Sommerville 2015-11-04 13:22:33 -05:00
parent b4ec3eeb3f
commit e7869b54c7
5 changed files with 118 additions and 48 deletions

View File

@ -16,6 +16,7 @@
<div class="outer-datatable-wrapper"> <div class="outer-datatable-wrapper">
<table id="library_display" cellpadding="0" cellspacing="0" class="datatable"></table> <table id="library_display" cellpadding="0" cellspacing="0" class="datatable"></table>
<table id="podcast_table" cellpadding="0" cellspacing="0" class="datatable"></table> <table id="podcast_table" cellpadding="0" cellspacing="0" class="datatable"></table>
<table id="podcast_episodes_table" cellpadding="0" cellspacing="0" class="datatable"></table>
</div> </div>
</div> </div>

View File

@ -8,7 +8,8 @@ var AIRTIME = (function(AIRTIME) {
chosenItems = {}, chosenItems = {},
visibleChosenItems = {}, visibleChosenItems = {},
$previouslySelected, $previouslySelected,
flagForDeselection = false; flagForDeselection = false,
$datatables = {};
// we need to know whether the criteria value is string or // we need to know whether the criteria value is string or
@ -87,6 +88,13 @@ var AIRTIME = (function(AIRTIME) {
"stream": "ws" "stream": "ws"
}); });
mod.DataTableTypeEnum = Object.freeze({
//FILE: "au",
LIBRARY : "library",
PODCAST : "podcast",
PODCAST_EPISODES: "podcastEpisodes"
});
// TODO: once the new manual pages are added, change links! // TODO: once the new manual pages are added, change links!
mod.placeholder = function(mediaType) { mod.placeholder = function(mediaType) {
switch (mediaType) { switch (mediaType) {
@ -744,7 +752,7 @@ var AIRTIME = (function(AIRTIME) {
}); });
$datatables[mod.DataTableTypeEnum.LIBRARY] = mod.libraryDataTable;
/* ############################################ /* ############################################
END DATATABLES END DATATABLES
@ -864,7 +872,14 @@ var AIRTIME = (function(AIRTIME) {
} }
} }
AIRTIME.library.setCurrentTable(); var selected = $("a[href$='"+location.hash+"']"), table;
if (selected.parent().data("selection-id") == AIRTIME.library.MediaTypeIntegerEnum.PODCAST) {
table = mod.DataTableTypeEnum.PODCAST;
} else {
table = mod.DataTableTypeEnum.LIBRARY;
}
AIRTIME.library.setCurrentTable(table);
setColumnFilter(oTable); setColumnFilter(oTable);
oTable.fnSetFilteringDelay(350); oTable.fnSetFilteringDelay(350);
@ -1230,20 +1245,20 @@ var AIRTIME = (function(AIRTIME) {
}; };
mod.setCurrentTable = function() { mod.setCurrentTable = function (table) {
var selected = $("a[href$='"+location.hash+"']"); var dt = $datatables[table],
if (selected.parent().data("selection-id") == AIRTIME.library.MediaTypeIntegerEnum.PODCAST) { wrapper = $(dt).closest(".dataTables_wrapper");
$("#library_display_wrapper").hide(); $("#library_content").find(".dataTables_wrapper").hide();
$('#podcast_table_wrapper').show(); wrapper.show();
oTable = mod.podcastDataTable; oTable = dt;
} else { oTable.fnDraw();
$('#podcast_table_wrapper').hide();
$("#library_display_wrapper").show();
oTable = mod.libraryDataTable;
}
}; };
/** Create the podcast datatable widget */ /**
* Create the podcast datatable widget
*
* XXX: should this be moved to podcast.js
*/
mod.initPodcastDatatable = function() mod.initPodcastDatatable = function()
{ {
var aoColumns = [ var aoColumns = [
@ -1286,9 +1301,59 @@ var AIRTIME = (function(AIRTIME) {
} }
}); });
mod._initPodcastEpisodeDatatable();
mod.podcastTableWidget.assignDblClickHandler(function () {
var podcast = mod.podcastDataTable.fnGetData($(this).index());
mod.podcastEpisodeTableWidget.reload(podcast.id);
mod.setCurrentTable(mod.DataTableTypeEnum.PODCAST_EPISODES);
});
mod.podcastDataTable = mod.podcastTableWidget.getDatatable(); mod.podcastDataTable = mod.podcastTableWidget.getDatatable();
$datatables[mod.DataTableTypeEnum.PODCAST] = mod.podcastDataTable;
}; };
/**
* Initialize the podcast episode view for the left-hand pane
*
* @private
*/
mod._initPodcastEpisodeDatatable = function () {
var buttons = {
addToScheduleBtn: {
// TODO: compatibility with checkAddButton function
title : $.i18n._('Add to Schedule'),
iconClass : '',
extraBtnClass : 'btn-small',
elementId : '',
eventHandlers : {
click: function (e) {
console.log(mod.podcastEpisodeDataTable.fnGetData($(this).index()));
}
}
}
};
mod.podcastEpisodeTableWidget = AIRTIME.podcast.initPodcastEpisodeDatatable(
$("#podcast_episodes_table"),
{
bServerSide : false,
sAjaxSource : null,
// Initialize the table with empty data so we can defer loading
// If we load sequentially there's a delay before the table appears
aaData : {},
aoColumns : [
/* GUID */ { "sTitle" : "" , "mDataProp" : "guid" , "sClass" : "podcast_episodes_guid" , "bVisible" : false },
/* Title */ { "sTitle" : $.i18n._("Title") , "mDataProp" : "title" , "sClass" : "podcast_episodes_title" , "sWidth" : "170px" },
/* Author */ { "sTitle" : $.i18n._("Author") , "mDataProp" : "author" , "sClass" : "podcast_episodes_author" , "sWidth" : "170px" },
/* Description */ { "sTitle" : $.i18n._("Description") , "mDataProp" : "description" , "sClass" : "podcast_episodes_description" , "sWidth" : "300px" },
/* Link */ { "sTitle" : $.i18n._("Link") , "mDataProp" : "link" , "sClass" : "podcast_episodes_link" , "sWidth" : "170px" },
/* Publication Date */ { "sTitle" : $.i18n._("Publication Date") , "mDataProp" : "pub_date" , "sClass" : "podcast_episodes_pub_date" , "sWidth" : "170px" }
]
},
buttons
);
mod.podcastEpisodeDataTable = $datatables[mod.DataTableTypeEnum.PODCAST_EPISODES] = mod.podcastEpisodeTableWidget.getDatatable();
};
mod.libraryInit = libraryInit; mod.libraryInit = libraryInit;

View File

@ -122,8 +122,12 @@ var AIRTIME = (function (AIRTIME) {
/* Publication Date */ { "sTitle" : $.i18n._("Publication Date") , "mDataProp" : "pub_date" , "sClass" : "podcast_episodes_pub_date" , "sWidth" : "170px" } /* Publication Date */ { "sTitle" : $.i18n._("Publication Date") , "mDataProp" : "pub_date" , "sClass" : "podcast_episodes_pub_date" , "sWidth" : "170px" }
] ]
}, },
buttons = {}; buttons = { slideToggle: {} };
self.episodeTable = AIRTIME.podcast.initPodcastEpisodeDatatable($scope.podcast, $scope.tab, params, buttons); self.episodeTable = AIRTIME.podcast.initPodcastEpisodeDatatable(
$scope.tab.contents.find('.podcast_episodes'),
params,
buttons
);
self.reloadEpisodeTable(); self.reloadEpisodeTable();
}; };
@ -172,7 +176,6 @@ var AIRTIME = (function (AIRTIME) {
$stationPodcastTab = undefined; $stationPodcastTab = undefined;
}; };
/** /**
* For the station podcast. * For the station podcast.
* *
@ -239,8 +242,8 @@ var AIRTIME = (function (AIRTIME) {
self.deleteSelectedEpisodes(); self.deleteSelectedEpisodes();
} }
} }
} },
slideToggle: {}
}, },
params = { params = {
sAjaxSource : endpoint + $scope.podcast.id + '/episodes', sAjaxSource : endpoint + $scope.podcast.id + '/episodes',
@ -251,7 +254,11 @@ var AIRTIME = (function (AIRTIME) {
] ]
}; };
this.episodeTable = AIRTIME.podcast.initPodcastEpisodeDatatable($scope.podcast, $scope.tab, params, buttons); this.episodeTable = AIRTIME.podcast.initPodcastEpisodeDatatable(
$scope.tab.contents.find('.podcast_episodes'),
params,
buttons
);
}; };
/** /**
@ -441,23 +448,23 @@ var AIRTIME = (function (AIRTIME) {
* *
* Selection for the internal table represents episodes marked for ingest and is disabled for ingested episodes. * Selection for the internal table represents episodes marked for ingest and is disabled for ingested episodes.
* *
* @param {Object} podcast the podcast data JSON object. * @param {Object} domNode the jQuery DOM node to create the table inside.
* @param {Tab} tab Tab object the podcast will be opened in
* @param {Object} params JSON object containing datatables parameters to override * @param {Object} params JSON object containing datatables parameters to override
* @param {Object} buttons JSON object containing datatables button parameters * @param {Object} buttons JSON object containing datatables button parameters
* *
* @returns {*} the created Table object * @returns {*} the created Table object
*/ */
mod.initPodcastEpisodeDatatable = function(podcast, tab, params, buttons) { mod.initPodcastEpisodeDatatable = function(domNode, params, buttons) {
buttons = $.extend({ if ('slideToggle' in buttons)
slideToggle: { buttons = $.extend(true, {
title : '', slideToggle: {
iconClass : 'spl-no-r-margin icon-chevron-up', title : '',
extraBtnClass : 'toggle-editor-form', iconClass : 'spl-no-r-margin icon-chevron-up',
elementId : '', extraBtnClass : 'toggle-editor-form',
eventHandlers : {} elementId : '',
} eventHandlers : {}
}, buttons); }
}, buttons);
params = $.extend(params, params = $.extend(params,
{ {
oColVis: { oColVis: {
@ -476,12 +483,11 @@ var AIRTIME = (function (AIRTIME) {
_initPodcastTable(); _initPodcastTable();
} }
// Set up the div with id "podcast_table" as a datatable.
var podcastEpisodesTableWidget = new PodcastTable( var podcastEpisodesTableWidget = new PodcastTable(
tab.contents.find('.podcast_episodes'), // DOM node to create the table inside. domNode, // DOM node to create the table inside.
true, // Enable item selection true, // Enable item selection
buttons, // Toolbar buttons buttons, // Toolbar buttons
params // Datatables overrides. params // Datatables overrides.
); );
podcastEpisodesTableWidget.getDatatable().addTitles("td"); podcastEpisodesTableWidget.getDatatable().addTitles("td");

View File

@ -140,27 +140,21 @@ AIRTIME = (function(AIRTIME) {
$(window).on('hashchange', function() { $(window).on('hashchange', function() {
var selected = $("a[href$='"+location.hash+"']"), var selected = $("a[href$='"+location.hash+"']"),
dashboardLink = $(".media_type_selector:first"), dashboardLink = $(".media_type_selector:first"),
t; tableType;
if (selected.parent().data("selection-id") == AIRTIME.library.MediaTypeIntegerEnum.PODCAST) { if (selected.parent().data("selection-id") == AIRTIME.library.MediaTypeIntegerEnum.PODCAST) {
$("#library_display_wrapper").hide(); tableType = AIRTIME.library.DataTableTypeEnum.PODCAST;
$("#podcast_table_wrapper").show();
t = AIRTIME.library.podcastDataTable;
} else { } else {
$("#library_display_wrapper").show(); tableType = AIRTIME.library.DataTableTypeEnum.LIBRARY;
$("#podcast_table_wrapper").hide();
t = AIRTIME.library.libraryDataTable;
} }
AIRTIME.library.setCurrentTable();
dashboardLink.find("a").attr("href", selected.attr("href")); dashboardLink.find("a").attr("href", selected.attr("href"));
AIRTIME.library.selectNone(); AIRTIME.library.selectNone();
$(".media_type_selector").each(function () { $(".media_type_selector").each(function () {
$(this).removeClass("selected"); $(this).removeClass("selected");
}); });
selected.parent().addClass("selected"); selected.parent().addClass("selected");
t.fnDraw(); AIRTIME.library.setCurrentTable(tableType);
$("#library_filter").text(selected.text()); $("#library_filter").text(selected.text());
// Highlight the dashboard link // Highlight the dashboard link
dashboardLink.addClass("highlight"); dashboardLink.addClass("highlight");

View File

@ -94,6 +94,10 @@ var AIRTIME = (function(AIRTIME) {
return self; return self;
}; };
Table.prototype.assignDblClickHandler = function(fn) {
$(this._datatable, 'tbody tr').on('dblclick', this._SELECTORS.SELECTION_TABLE_ROW, fn);
};
/* Set up global event handlers for the datatable. /* Set up global event handlers for the datatable.
* @param bItemSelection Whether or not row selection behaviour should be enabled for this widget. * @param bItemSelection Whether or not row selection behaviour should be enabled for this widget.