SAAS-948 - tab layout for right-hand pane
This commit is contained in:
parent
0b430a894b
commit
f138dc6b47
21 changed files with 1402 additions and 259 deletions
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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() {
|
||||
};
|
||||
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -540,7 +540,7 @@ var AIRTIME = (function(AIRTIME) {
|
|||
dataType: "json"
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
colReorderMap = oData.ColReorder;
|
||||
},
|
||||
"fnStateLoad": function fnLibStateLoad(oSettings) {
|
||||
|
|
|
@ -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'>" +
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue