SAAS-948 - tab layout for right-hand pane

This commit is contained in:
Duncan Sommerville 2015-07-31 18:28:16 -04:00
parent 0b430a894b
commit f138dc6b47
21 changed files with 1402 additions and 259 deletions

View file

@ -9,17 +9,12 @@ div.ColVis_collectionBackground {
}
.wrapper {
position: absolute;
/* Height of the top panel */
top: 141px;
bottom: 0;
/*background: #242424;*/
background: #111;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow-y: auto;
overflow-x: hidden;
display: -webkit-box;
display: -moz-box;
@ -28,6 +23,8 @@ div.ColVis_collectionBackground {
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
overflow: auto;
}
/* Usability hint */
@ -57,40 +54,98 @@ div.ColVis_collectionBackground {
/* Show Builder*/
.content-pane {
position: relative;
border: 1px solid #202020;
border-top: 1px solid #353535;
border-left: 1px solid #2a2a2a;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.65);
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,.65);
box-shadow: inset 0 0 6px rgba(0,0,0,.65);
background-color: #242424;
}
.wide-panel {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;
/* Account for the left pane */
flex: 6 auto;
min-width: 555px;
}
.btn {
color: #efefef;
}
.outer-datatable-wrapper {
position: relative;
flex: 1;
}
@media screen and (max-height: 650px) {
#master-panel {
display: none;
}
.wrapper {
top: 40px !important;
}
}
@media screen and (max-width: 1475px) {
#library_content, #show_builder, #side_playlist, #media_type_nav {
/*height: auto !important;*/
max-height: 50% !important;
.wrapper {
-webkit-flex-flow: column !important;
flex-flow: column !important;
}
.content-pane {
height: auto !important;
width: 100% !important;
}
.wide-panel {
flex: 8 100%;
min-height: 50%;
}
#side_playlist {
margin-top: 0 !important;
}
#media_type_nav div {
float: left;
width: 20%;
text-align: center;
margin: auto;
#media_type_nav {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#media_type_nav .btn-group {
flex: 1 100%;
}
#media_type_nav .dropdown-menu {
width: 100%;
text-align: center;
}
#media_type_nav .media_type_selector {
flex: 1 100%;
margin-top: 3px;
}
}
@media screen and (max-width: 780px) {
#library_content .dataTables_filter input[type="text"] {
position: relative;
width: calc(100% - 10px) !important;
margin: 0 .5em .5em 0;
}
.wrapper {
height: calc(100% - 166px) !important; /* Correct for margins */
height: 100% !important; /* Correct for margins */
padding: 0 15px 15px !important;
margin-top: 10px; /* This is only necessary if we aren't using a responsive menu! */
}
}
@ -101,23 +156,11 @@ div.ColVis_collectionBackground {
}
}
.btn {
color: #efefef;
}
/* Library */
#library_content {
margin-right: 10px;
overflow: hidden !important;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
#library_content .dataTables_filter {
@ -143,67 +186,56 @@ div.ColVis_collectionBackground {
color: #555555;
}
#library_content legend {
position: absolute;
top: 0;
padding-top: 4px;
font-size: 14px;
}
#library_content legend, #library_content span, #library_content label {
font-weight: normal;
color: #efefef;
}
#library_content .fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix {
.fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix {
position: absolute;
right: 0;
left: 0;
bottom: 0;
}
#library_display_wrapper {
flex: 1 100%;
}
#library_display_wrapper, #show_builder_table_wrapper {
position: absolute;
top: 36px;
top: 4px;
bottom: 4px;
right: 4px;
left: 4px;
/*background-color: #474747;*/
}
#library_content, #show_builder, #side_playlist, #media_type_nav {
position: relative;
height: 95%;
border: 1px solid #202020;
border-top: 1px solid #272727;
border-left: 1px solid #272727;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.65);
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,.65);
box-shadow: inset 0 0 6px rgba(0,0,0,.65);
background-color: #242424;
}
#library_content, #show_builder, #side_playlist {
/* Account for the left pane */
flex: 5 auto;
min-width: 470px;
}
#library_content .dataTables_scrolling {
.dataTables_scrolling {
position: absolute;
bottom: 38px;
bottom: 38px; /* 38 px is the size of the header/footer */
top: 38px;
left: 0;
left: 1px; /* Border */
right: 0;
}
#filter_options{
position: absolute;
top: 4px;
left: 4px;
right: 4px;
#filter_options {
text-align: center;
padding: 15px 0 15px 15px;
margin: 0;
border: none;
}
flex: 1 100%;
#advanced_search {
margin-top: 15px;
}
.panel-header {
position: relative;
top: 4px;
}
/* Timeline */
@ -221,6 +253,7 @@ div.ColVis_collectionBackground {
}
#sb_submit {
font-weight: normal;
text-decoration: none;
padding: 4px;
color: #efefef;
@ -228,10 +261,8 @@ div.ColVis_collectionBackground {
}
.sb-options-form {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
position: relative;
padding: 5px;
float: left;
}
@ -240,29 +271,64 @@ div.ColVis_collectionBackground {
line-height: 26px;
}
.dataTables_scrolling.sb-padded {
position: absolute;
top: 38px;
bottom: 4px;
right: 0;
left: 0;
}
#sb_show_filter {
float: right;
margin-left: 4px;
}
#show_builder_table_wrapper {
bottom: 0;
.nav-tabs {
border-bottom: 1px solid #474747;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0;
margin: 0 4px 0;
}
.nav-tabs a {
padding: 4px 8px !important;
color: #efefef;
font-size: 14px;
text-decoration: none;
background-color: rgba(71,71,71,.5);
}
.nav-tabs :not(.active) a:hover {
background-color: rgba(239, 76, 10, .5) !important;
border: 1px solid transparent !important;
border-bottom: 1px solid #474747 !important;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
color: #efefef;
background-color: #474747;
border: 1px solid #474747;
border-bottom-color: transparent;
cursor: default;
}
/* Media editors */
#side_playlist {
float: right;
color: #efefef;
font-size: inherit;
overflow: hidden;
width: 100%; /* Override because we're using flexbox */
overflow-x: hidden;
overflow-y: auto;
position: relative;
flex: 1;
}
.editor_pane_wrapper {
padding: 4px;
}
#spl_sortable .list-item-container {
cursor: move;
}
/* Media type selector */
@ -270,6 +336,7 @@ div.ColVis_collectionBackground {
#media_type_nav {
flex: 1 auto;
margin-right: 10px;
text-align: center;
}
#media_type_nav div {
@ -278,6 +345,7 @@ div.ColVis_collectionBackground {
#new_media_selector {
width: 100%;
font-size: 14px;
}
.media_type_selector {
@ -286,7 +354,6 @@ div.ColVis_collectionBackground {
font-family: Roboto, "Open Sans", sans-serif;
font-size: 16px;
font-weight: 400;
width: 100%;
margin: 10px 10px 0 0;
-webkit-transition: color 0.2s linear;
@ -318,19 +385,21 @@ div.ColVis_collectionBackground {
overflow: auto;
}
.helper.ui-draggable-dragging {
z-index: 9999;
}
.datatable tr, .datatable td {
border: none !important;
}
/* This is so dragged items show up above the layout */
.ui-draggable-dragging {
z-index: 9999;
position: fixed !important;
}
/* Uploads/Dropzone */
#upload_form {
width: 100%;
min-width: 470px;
min-width: 555px;
background: none;
border: 2px dashed #efefef;

View file

@ -3310,13 +3310,27 @@ dd .stream-status {
/* Usability Hints */
/*
* This is a temporary solution to a larger issue;
* we should revisit this (and really all of the
* absolute positioning in Airtime) when we want
* to focus on responsive design.
*/
.usability_hint + .wrapper {
top: 170px;
}
.usability_hint {
padding: 5px 10px 5px 10px;
margin-bottom: 10px;
border: 1px solid #ff611f;
background-color: #ff611f;
color: white;
font-size: 14px;
position: absolute;
top: 139px;
width: 100%;
z-index: 1;
}
.usability_hint a {

View file

@ -392,7 +392,7 @@ var AIRTIME = (function(AIRTIME) {
$.post(baseUrl+"playlist/close-playlist",
{"format": "json", "type": currentObjType},
function(json) {
$("#side_playlist").empty().append(json.html);
$("#editor_pane_wrapper").empty().append(json.html);
});
}
}
@ -685,7 +685,7 @@ var AIRTIME = (function(AIRTIME) {
"oLanguage": datatables_dict,
// R = ColReorder, C = ColVis
"sDom": 'R<"#library_display_type"><"dt-process-rel"r><"H"<"library_toolbar"Cf>><"dataTables_scrolling"t><"F"ilp>>',
"sDom": 'R<"dt-process-rel"r><"H"<"library_toolbar"Cf>><"dataTables_scrolling"t><"F"ilp>>',
"oColVis": {
"sAlign": "right",

View file

@ -15,7 +15,9 @@ var AIRTIME = (function(AIRTIME){
$togglePl = $("<button id='pl_edit' class='btn btn-small' href='#' title='"+$.i18n._("Open Media Builder")+"'>"+$.i18n._("Open Media Builder")+"</button>"),
widgetHeight,
resizeTimeout,
width;
width,
$plCount = 0,
$openTabs = {};
function isTimeValid(time) {
//var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$");
@ -32,6 +34,7 @@ var AIRTIME = (function(AIRTIME){
function playlistError(json) {
alert(json.error);
closeTab();
openPlaylist(json);
}
@ -67,7 +70,7 @@ var AIRTIME = (function(AIRTIME){
event.stopPropagation();
var span = $(this),
id = span.parent().attr("id").split("_").pop(),
url = baseUrl+"Playlist/set-cue",
url = baseUrl+"new-playlist/set-cue",
cueIn = $.trim(span.text()),
li = span.parents("li"),
unqid = li.attr("unqid"),
@ -104,7 +107,7 @@ var AIRTIME = (function(AIRTIME){
event.stopPropagation();
var span = $(this),
id = span.parent().attr("id").split("_").pop(),
url = baseUrl+"Playlist/set-cue",
url = baseUrl+"new-playlist/set-cue",
cueOut = $.trim(span.text()),
li = span.parents("li"),
unqid = li.attr("unqid"),
@ -141,7 +144,7 @@ var AIRTIME = (function(AIRTIME){
/* used from waveform pop-up */
function changeCues($el, id, cueIn, cueOut) {
var url = baseUrl+"Playlist/set-cue",
var url = baseUrl+"new-playlist/set-cue",
lastMod = getModified(),
type = $('#obj_type').val(),
li,
@ -211,7 +214,7 @@ var AIRTIME = (function(AIRTIME){
/* used from waveform pop-up */
function changeCrossfade($el, id1, id2, fadeIn, fadeOut, offset, id) {
var url = baseUrl+"Playlist/set-crossfade",
var url = baseUrl+"new-playlist/set-crossfade",
lastMod = getModified(),
type = $('#obj_type').val();
@ -229,7 +232,7 @@ var AIRTIME = (function(AIRTIME){
setPlaylistContent(json);
$li = $('#side_playlist li[unqid='+id+']');
$li = $pl.find('li[unqid='+id+']');
$li.find('.crossfade').toggle();
highlightActive($li.find('.spl_fade_control'));
});
@ -240,7 +243,7 @@ var AIRTIME = (function(AIRTIME){
var span = $(this),
id = span.parent().attr("id").split("_").pop(),
url = baseUrl+"Playlist/set-fade",
url = baseUrl+"new-playlist/set-fade",
fadeIn = $.trim(span.text()),
li = span.parents("li"),
unqid = li.attr("unqid"),
@ -267,7 +270,7 @@ var AIRTIME = (function(AIRTIME){
setPlaylistContent(json);
li = $('#side_playlist li[unqid='+unqid+']');
li = $pl.find('li[unqid='+unqid+']');
li.find('.crossfade').toggle();
highlightActive(li.find('.spl_fade_control'));
});
@ -278,7 +281,7 @@ var AIRTIME = (function(AIRTIME){
var span = $(this),
id = span.parent().attr("id").split("_").pop(),
url = baseUrl+"Playlist/set-fade",
url = baseUrl+"new-playlist/set-fade",
fadeOut = $.trim(span.text()),
li = span.parents("li"),
unqid = li.attr("unqid"),
@ -305,7 +308,7 @@ var AIRTIME = (function(AIRTIME){
setPlaylistContent(json);
li = $('#side_playlist li[unqid='+unqid+']');
li = $pl.find('li[unqid='+unqid+']');
li.find('.crossfade').toggle();
highlightActive(li.find('.spl_fade_control'));
});
@ -358,6 +361,9 @@ var AIRTIME = (function(AIRTIME){
var nameElement = $(this);
//remove any newlines if user somehow snuck them in (easy to do if dragging/dropping text)
nameElement.text(nameElement.text().replace("\n", ""));
var name = $pl.find("#playlist_name_display").text();
$(".nav.nav-tabs .active a").text(name);
}
function redrawLib() {
@ -392,12 +398,12 @@ var AIRTIME = (function(AIRTIME){
}
function setFadeIcon(){
var contents = $("#spl_sortable");
var contents = $pl.find("#spl_sortable");
var show = contents.is(":visible");
var empty = $(".spl_empty");
var empty = $pl.find(".spl_empty");
if (!show || empty.length > 0) {
$("#spl_crossfade").hide();
$pl.find("#spl_crossfade").hide();
} else {
//get list of playlist contents
var list = contents.children();
@ -407,33 +413,60 @@ var AIRTIME = (function(AIRTIME){
var last = list.last();
if (first.find(':first-child').children().attr('blockid') !== undefined &&
last.find(':first-child').children().attr('blockid') !== undefined) {
$("#spl_crossfade").hide();
$pl.find("#spl_crossfade").hide();
} else {
$("#spl_crossfade").show();
$pl.find("#spl_crossfade").show();
}
}
}
function getId() {
return parseInt($("#obj_id").val(), 10);
return parseInt($pl.find("#obj_id").val(), 10);
}
function getModified() {
return parseInt($("#obj_lastMod").val(), 10);
return parseInt($pl.find("#obj_lastMod").val(), 10);
}
function setModified(modified) {
$("#obj_lastMod").val(modified);
$pl.find("#obj_lastMod").val(modified);
}
function openPlaylist(json) {
$("#side_playlist")
.empty()
.append(json.html);
$plCount++;
var tabId = $openTabs[json.id];
if ($openTabs[json.id] !== undefined) {
AIRTIME.showbuilder.switchTab($(".pl-tab-content-" + tabId), $("#pl-tab-" + tabId));
return;
}
setUpPlaylist();
setCueEvents();
setFadeEvents();
var wrapper = "<div id='side_playlist' class='pl-content pl-tab-content-" + $plCount + "'><div class='editor_pane_wrapper'></div></div>",
t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $plCount),
pane = $(".editor_pane_wrapper:last"),
name = pane.append(json.html).find("#playlist_name_display").text(),
tab = "<li id='pl-tab-" + $plCount + "' role='presentation' class='active'><a href='#'>" + name + "</a></li>",
tabs = $(".nav.nav-tabs");
if (json.id) {
$openTabs[json.id] = $plCount;
}
$(".nav.nav-tabs li").removeClass("active");
tabs.append(tab);
var newTab = $("#pl-tab-" + $plCount);
newTab.on("click", function() {
AIRTIME.showbuilder.switchTab(t, newTab);
$.post(baseUrl+'new-playlist/edit',
{format: "json", id: t.find("#obj_id").val(), type: t.find("#obj_type").val()});
});
AIRTIME.showbuilder.switchTab(t, newTab);
AIRTIME.playlist.init();
//setUpPlaylist();
//setCueEvents();
//setFadeEvents();
// functions in smart_blockbuilder.js
setupUI();
@ -452,6 +485,13 @@ var AIRTIME = (function(AIRTIME){
$("#pl_edit").hide();
}
function closeTab() {
delete $openTabs[$(".active-tab").find("#obj_id").val()];
$(".nav.nav-tabs .active").remove();
$pl.remove();
AIRTIME.showbuilder.switchTab($("#show_builder .outer-datatable-wrapper"), $("#timeline-tab"));
}
//Purpose of this function is to iterate over all playlist elements
//and verify whether they can be previewed by the browser or not. If not
//then the playlist element is greyed out
@ -514,11 +554,10 @@ var AIRTIME = (function(AIRTIME){
}
}
});
}
};
//sets events dynamically for playlist entries (each row in the playlist)
function setPlaylistEntryEvents() {
$pl.delegate("#spl_sortable .ui-icon-closethick",
{"click": function(ev){
var id;
@ -537,7 +576,7 @@ var AIRTIME = (function(AIRTIME){
var id = parseInt($(this).attr("id").split("_").pop(), 10);
var blockId = parseInt($(this).attr("blockId"), 10);
if ($(this).hasClass('close')) {
var sUrl = baseUrl+"playlist/get-block-info";
var sUrl = baseUrl+"new-playlist/get-block-info";
mod.disableUI();
$.post(sUrl, {format:"json", id:blockId}, function(data){
$html = "";
@ -624,7 +663,7 @@ var AIRTIME = (function(AIRTIME){
//main playlist fades events
$pl.on("click", "#spl_crossfade", function() {
var lastMod = getModified(),
type = $('#obj_type').val();
type = $pl.find('#obj_type').val();
if ($(this).hasClass("ui-state-active")) {
$(this).removeClass("ui-state-active");
@ -633,7 +672,7 @@ var AIRTIME = (function(AIRTIME){
else {
$(this).addClass("ui-state-active");
var url = baseUrl+'Playlist/get-playlist-fades';
var url = baseUrl+'new-playlist/get-playlist-fades';
$.post(url,
{format: "json", modified: lastMod, type: type},
function(json){
@ -670,11 +709,11 @@ var AIRTIME = (function(AIRTIME){
$pl.on("blur", "span.spl_main_fade_in", function(event){
event.stopPropagation();
var url = baseUrl+"Playlist/set-playlist-fades",
var url = baseUrl+"new-playlist/set-playlist-fades",
span = $(this),
fadeIn = $.trim(span.text()),
lastMod = getModified(),
type = $('#obj_type').val();
type = $pl.find('#obj_type').val();
if (!isFadeValid(fadeIn)){
showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
@ -694,11 +733,11 @@ var AIRTIME = (function(AIRTIME){
$pl.on("blur", "span.spl_main_fade_out", function(event){
event.stopPropagation();
var url = baseUrl+"Playlist/set-playlist-fades",
var url = baseUrl+"new-playlist/set-playlist-fades",
span = $(this),
fadeOut = $.trim(span.text()),
lastMod = getModified(),
type = $('#obj_type').val();
type = $pl.find('#obj_type').val();
if (!isFadeValid(fadeOut)){
showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
@ -743,14 +782,14 @@ var AIRTIME = (function(AIRTIME){
$pl.on("click", 'button[id="playlist_shuffle_button"]', function(){
obj_id = $('input[id="obj_id"]').val();
url = baseUrl+"Playlist/shuffle";
url = baseUrl+"new-playlist/shuffle";
enableLoadingIcon();
$.post(url, {format: "json", obj_id: obj_id}, function(json){
if (json.error !== undefined) {
alert(json.error);
}
AIRTIME.playlist.fnOpenPlaylist(json);
$pl.find(".editor_pane_wrapper").empty().append(json.html);
if (json.result == "0") {
$pl.find('.success').text($.i18n._('Playlist shuffled'));
$pl.find('.success').show();
@ -760,7 +799,7 @@ var AIRTIME = (function(AIRTIME){
});
});
$pl.on("click", "#webstream_save", function(){
$pl.find("#webstream_save").on("click", function(){
//get all fields and POST to server
//description
//stream url
@ -775,7 +814,7 @@ var AIRTIME = (function(AIRTIME){
//hide any previous errors (if any)
$("#side_playlist .errors").empty().hide();
var url = baseUrl+'Webstream/save';
var url = baseUrl+'new-webstream/save';
$.post(url,
{format: "json", id:id, description: description, url:streamurl, length: length, name: name},
function(json){
@ -815,7 +854,7 @@ var AIRTIME = (function(AIRTIME){
$lib.on("click", "#pl_edit", function() {
openPlaylistPanel();
$.ajax( {
$.ajax({
url : baseUrl+"usersettings/set-library-screen-settings",
type : "POST",
data : {
@ -830,18 +869,19 @@ var AIRTIME = (function(AIRTIME){
$pl.on("click", "#lib_pl_close", function() {
$pl.hide();
$("#show_builder").show();
// 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();
var name = $('#playlist_name_display').text().trim();
var name = $pl.find('#playlist_name_display').text().trim();
if ((name == "Untitled Playlist"
|| name == "Untitled Smart Block")
&& $("#spl_sortable .spl_empty").length == 1) {
&& $pl.find("#spl_sortable .spl_empty").length == 1) {
mod.fnDelete();
} else {
closeTab();
}
$.ajax( {
@ -857,16 +897,16 @@ var AIRTIME = (function(AIRTIME){
});
});
$('#save_button').live("click", function(event){
$pl.on("click", "#save_button", function(event) {
/* Smart blocks: get name, description, and criteria
* Playlists: get name, description
*/
var criteria = $('form').serializeArray(),
block_name = $('#playlist_name_display').text(),
block_desc = $('textarea[name="description"]').val(),
save_action = baseUrl+'Playlist/save',
obj_id = $('input[id="obj_id"]').val(),
obj_type = $('#obj_type').val(),
var criteria = $pl.find('form').serializeArray(),
block_name = $pl.find('#playlist_name_display').text(),
block_desc = $pl.find('textarea[name="description"]').val(),
save_action = baseUrl+'new-playlist/save',
obj_id = $pl.find('input[id="obj_id"]').val(),
obj_type = $pl.find('#obj_type').val(),
lastMod = getModified(),
dt = $('table[id="library_display"]').dataTable();
enableLoadingIcon();
@ -894,8 +934,8 @@ var AIRTIME = (function(AIRTIME){
);
});
$("#pl-bl-clear-content").live("click", function(event) {
var sUrl = baseUrl+"playlist/empty-content",
$pl.find("#pl-bl-clear-content").live("click", function(event) {
var sUrl = baseUrl+"new-playlist/empty-content",
oData = {};
playlistRequest(sUrl, oData);
});
@ -994,9 +1034,7 @@ var AIRTIME = (function(AIRTIME){
}
mod.fnNew = function() {
var url = baseUrl+'Playlist/new';
$("#side_playlist").show();
$("#show_builder").hide();
var url = baseUrl+'new-playlist/new';
stopAudioPreview();
@ -1009,9 +1047,7 @@ var AIRTIME = (function(AIRTIME){
};
mod.fnWsNew = function() {
var url = baseUrl+'Webstream/new';
$("#side_playlist").show();
$("#show_builder").hide();
var url = baseUrl+'new-webstream/new';
stopAudioPreview();
@ -1025,9 +1061,7 @@ var AIRTIME = (function(AIRTIME){
mod.fnNewBlock = function() {
var url = baseUrl+'Playlist/new';
$("#side_playlist").show();
$("#show_builder").hide();
var url = baseUrl+'new-playlist/new';
stopAudioPreview();
@ -1040,18 +1074,14 @@ var AIRTIME = (function(AIRTIME){
};
mod.fnEdit = function(id, type, url) {
$("#side_playlist").show();
$("#show_builder").hide();
if ($pl.is(":hidden")) {
openPlaylistPanel();
}
//openPlaylistPanel();
stopAudioPreview();
$.post(url,
{format: "json", id: id, type: type},
function(json){
openPlaylist(json);
redrawLib();
});
};
@ -1062,13 +1092,14 @@ var AIRTIME = (function(AIRTIME){
stopAudioPreview();
id = (plid === undefined) ? getId() : plid;
lastMod = getModified();
type = $('#obj_type').val();
url = baseUrl+'Playlist/delete';
type = $pl.find('#obj_type').val();
url = baseUrl+'new-playlist/delete';
$.post(url,
{format: "json", ids: id, modified: lastMod, type: type},
function(json){
openPlaylist(json);
function(json) {
closeTab();
// openPlaylist(json);
redrawLib();
});
};
@ -1079,8 +1110,8 @@ var AIRTIME = (function(AIRTIME){
stopAudioPreview();
id = (wsid === undefined) ? getId() : wsid;
lastMod = getModified();
type = $('#obj_type').val();
url = baseUrl+'Webstream/delete';
type = $pl.find('#obj_type').val();
url = baseUrl+'new-webstream/delete';
$.post(url,
{format: "json", ids: id, modified: lastMod, type: type},
@ -1110,18 +1141,13 @@ var AIRTIME = (function(AIRTIME){
};
mod.enableUI = function() {
$lib.unblock();
$pl.unblock();
//Block UI changes the postion to relative to display the messages.
$lib.css("position", "static");
$pl.css("position", "static");
setupUI();
};
function playlistResponse(json){
if (json.error !== undefined) {
playlistError(json);
}
@ -1135,7 +1161,7 @@ var AIRTIME = (function(AIRTIME){
function playlistRequest(sUrl, oData) {
var lastMod,
obj_type = $('#obj_type').val();
obj_type = $pl.find('#obj_type').val();
mod.disableUI();
@ -1153,20 +1179,20 @@ var AIRTIME = (function(AIRTIME){
}
mod.fnAddItems = function(aItems, iAfter, sAddType) {
var sUrl = baseUrl+"playlist/add-items";
var sUrl = baseUrl+"new-playlist/add-items";
oData = {"aItems": aItems, "afterItem": iAfter, "type": sAddType};
playlistRequest(sUrl, oData);
};
mod.fnMoveItems = function(aIds, iAfter) {
var sUrl = baseUrl+"playlist/move-items",
var sUrl = baseUrl+"new-playlist/move-items",
oData = {"ids": aIds, "afterItem": iAfter};
playlistRequest(sUrl, oData);
};
mod.fnDeleteItems = function(aItems) {
var sUrl = baseUrl+"playlist/delete-items",
var sUrl = baseUrl+"new-playlist/delete-items",
oData = {"ids": aItems};
playlistRequest(sUrl, oData);
@ -1399,10 +1425,12 @@ var AIRTIME = (function(AIRTIME){
});
};
mod.setAsActive = function() {
$pl = $(".active-tab");
};
mod.init = function() {
$('#new-playlist').live('click', function(){AIRTIME.playlist.fnNew();});
$('#new-smart-block').live('click', function(){AIRTIME.playlist.fnNewBlock();});
$('#new-webstream').live('click', function(){AIRTIME.playlist.fnWsNew();});
AIRTIME.playlist.setAsActive();
$pl.delegate("#spl_delete", {"click": function(ev){
AIRTIME.playlist.fnDelete();
@ -1427,15 +1455,6 @@ var AIRTIME = (function(AIRTIME){
initialEvents();
setUpPlaylist();
};
mod.onReady = function() {
$lib = $("#library_content");
$pl = $("#side_playlist");
$pl.hide();
AIRTIME.playlist.init();
$pl.find(".ui-icon-alert").qtip({
content: {
@ -1443,8 +1462,8 @@ var AIRTIME = (function(AIRTIME){
},
position: {
adjust: {
resize: true,
method: "flip flip"
resize: true,
method: "flip flip"
},
at: "right center",
my: "left top",
@ -1458,6 +1477,16 @@ var AIRTIME = (function(AIRTIME){
});
};
mod.onReady = function() {
$lib = $("#library_content");
$('#new-playlist').live('click', function(){AIRTIME.playlist.fnNew();});
$('#new-smart-block').live('click', function(){AIRTIME.playlist.fnNewBlock();});
$('#new-webstream').live('click', function(){AIRTIME.playlist.fnWsNew();});
AIRTIME.playlist.init();
};
mod.onResize = function() {
};

View file

@ -28,7 +28,7 @@ var AIRTIME = (function(AIRTIME) {
AIRTIME.button.disableButton("btn-group #library-plus", false);
}
if ($("#show_builder").is(":visible")) {
if ($("#show_builder_table").is(":visible")) {
if ($cursor.length !== 0) {
btnText = $.i18n._('Add after selected items');
} else if (current.length !== 0) {
@ -70,7 +70,7 @@ var AIRTIME = (function(AIRTIME) {
mod.redrawChosen();
mod.checkToolBarIcons();
if ($("#show_builder").is(":visible")) {
if ($("#show_builder_table").is(":visible")) {
$('#library_display tr.lib-audio, tr.lib-pl, tr.lib-stream')
.draggable(
{
@ -154,7 +154,7 @@ var AIRTIME = (function(AIRTIME) {
mod.dblClickAdd = function(data, type) {
var i, length, temp, aMediaIds = [], aSchedIds = [], aData = [];
if ($("#show_builder").is(":visible")) {
if ($("#show_builder_table").is(":visible")) {
// process selected files/playlists.
aMediaIds.push({
"id": data.id,
@ -309,10 +309,10 @@ var AIRTIME = (function(AIRTIME) {
buildEditMetadataDialog(json);
});
} else if (data.ftype === "playlist" || data.ftype === "block") {
AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl+'Playlist/edit');
AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl+'new-playlist/edit');
AIRTIME.playlist.validatePlaylistElements();
} else if (data.ftype === "stream") {
AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl + 'Webstream/edit');
AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl + 'new-webstream/edit');
}
});

View file

@ -540,7 +540,7 @@ var AIRTIME = (function(AIRTIME) {
dataType: "json"
});
*/
colReorderMap = oData.ColReorder;
},
"fnStateLoad": function fnLibStateLoad(oSettings) {

View file

@ -106,6 +106,19 @@ var AIRTIME = (function(AIRTIME){
}
};
mod.switchTab = function(tab, el) {
$(".active-tab").hide().removeClass("active-tab");
tab.addClass("active-tab").show();
$(".nav.nav-tabs .active").removeClass("active");
el.addClass("active");
if (tab.hasClass("pl-content")) {
AIRTIME.playlist.setAsActive();
}
};
mod.checkSelectButton = function() {
var $selectable = $sbTable.find("tr");
@ -260,10 +273,6 @@ var AIRTIME = (function(AIRTIME){
mod.enableUI = function() {
$lib.unblock();
$sbContent.unblock();
//Block UI changes the postion to relative to display the messages.
$lib.css("position", "static");
$sbContent.css("position", "static");
};
mod.fnItemCallback = function(json) {
@ -726,7 +735,7 @@ var AIRTIME = (function(AIRTIME){
},
// R = ColReorder, C = ColVis
"sDom": 'R<"dt-process-rel"r><"sb-padded"<"H"C>><"dataTables_scrolling sb-padded"t>',
"sDom": 'R<"dt-process-rel"r><"sb-padded"<"H"C>><"dataTables_scrolling sb-padded"t><"F">',
"oColVis": {
"aiExclude": [ 0, 1 ],
@ -950,7 +959,10 @@ var AIRTIME = (function(AIRTIME){
$sbTable.sortable(sortableConf);
//start setup of the builder toolbar.
$toolbar = $(".sb-content .fg-toolbar");
$toolbar = $(".sb-content .fg-toolbar:first");
var footer = $(".sb-content .fg-toolbar:last"),
timerange = $(".sb-timerange");
footer.append(timerange);
$menu = $("<div class='btn-toolbar'/>");
$menu.append("<div class='btn-group'>" +

View file

@ -160,6 +160,10 @@ AIRTIME = (function(AIRTIME) {
$builder = $("#show_builder");
$fs = $builder.find('fieldset');
$("#timeline-tab").on("click", function() {
AIRTIME.showbuilder.switchTab($("#show_builder .outer-datatable-wrapper"), $(this));
});
/*
* Icon hover states for search.
*/