CC-3496 : PlaylistBuilder, NowPlaying -> GUI representation gets broken while being resized
fixing now playing screen.
This commit is contained in:
Naomi Aro
parent
b39db57d0c
commit
bb1f94c796
1 changed files with 193 additions and 164 deletions
|
|
@ -1,11 +1,11 @@
|
||||||
$(document).ready(function(){
|
AIRTIME = (function(AIRTIME) {
|
||||||
|
|
||||||
var viewport = AIRTIME.utilities.findViewportDimensions(),
|
var viewport,
|
||||||
$lib = $("#library_content"),
|
$lib,
|
||||||
$libWrapper,
|
$libWrapper,
|
||||||
$builder = $("#show_builder"),
|
$builder,
|
||||||
widgetHeight = viewport.height - 180,
|
widgetHeight,
|
||||||
screenWidth = Math.floor(viewport.width - 120),
|
screenWidth,
|
||||||
oBaseDatePickerSettings,
|
oBaseDatePickerSettings,
|
||||||
oBaseTimePickerSettings,
|
oBaseTimePickerSettings,
|
||||||
oRange,
|
oRange,
|
||||||
|
|
@ -18,15 +18,13 @@ $(document).ready(function(){
|
||||||
"class": "close-round",
|
"class": "close-round",
|
||||||
"href": "#",
|
"href": "#",
|
||||||
"id": "sb_lib_close"
|
"id": "sb_lib_close"
|
||||||
});
|
}),
|
||||||
|
mod;
|
||||||
|
|
||||||
//set the heights of the main widgets.
|
if (AIRTIME.builderMain === undefined) {
|
||||||
$lib.height(widgetHeight);
|
AIRTIME.builderMain = {};
|
||||||
|
}
|
||||||
//builder takes all the screen on first load
|
mod = AIRTIME.builderMain;
|
||||||
$builder
|
|
||||||
.height(widgetHeight)
|
|
||||||
.width(screenWidth);
|
|
||||||
|
|
||||||
oBaseDatePickerSettings = {
|
oBaseDatePickerSettings = {
|
||||||
dateFormat: 'yy-mm-dd',
|
dateFormat: 'yy-mm-dd',
|
||||||
|
|
@ -42,170 +40,201 @@ $(document).ready(function(){
|
||||||
defaultTime: '0:00'
|
defaultTime: '0:00'
|
||||||
};
|
};
|
||||||
|
|
||||||
$builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
|
function setWidgetHeights() {
|
||||||
$builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
|
|
||||||
$builder.find(dateEndId).datepicker(oBaseDatePickerSettings);
|
|
||||||
$builder.find(timeEndId).timepicker(oBaseTimePickerSettings);
|
|
||||||
|
|
||||||
oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
|
|
||||||
AIRTIME.showbuilder.fnServerData.start = oRange.start;
|
|
||||||
AIRTIME.showbuilder.fnServerData.end = oRange.end;
|
|
||||||
|
|
||||||
if ($lib.filter(':visible').length > 0) {
|
|
||||||
|
|
||||||
$lib.width(Math.floor(screenWidth * 0.5));
|
|
||||||
|
|
||||||
$builder.width(Math.floor(screenWidth * 0.5))
|
|
||||||
.find("#sb_edit")
|
|
||||||
.remove()
|
|
||||||
.end();
|
|
||||||
}
|
|
||||||
|
|
||||||
AIRTIME.library.libraryInit();
|
|
||||||
AIRTIME.showbuilder.builderDataTable();
|
|
||||||
|
|
||||||
$libWrapper = $lib.find("#library_display_wrapper");
|
|
||||||
$libWrapper.prepend($libClose);
|
|
||||||
|
|
||||||
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 95);
|
|
||||||
|
|
||||||
$builder.on("click", "#sb_submit", function(ev){
|
|
||||||
var fn,
|
|
||||||
oRange,
|
|
||||||
op,
|
|
||||||
oTable = $('#show_builder_table').dataTable();
|
|
||||||
|
|
||||||
//reset timestamp value since input values could have changed.
|
//set the heights of the main widgets.
|
||||||
AIRTIME.showbuilder.resetTimestamp();
|
$lib.height(widgetHeight);
|
||||||
|
$builder.height(widgetHeight);
|
||||||
|
|
||||||
oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
|
if ($lib.filter(':visible').length > 0) {
|
||||||
|
|
||||||
fn = oTable.fnSettings().fnServerData;
|
|
||||||
fn.start = oRange.start;
|
|
||||||
fn.end = oRange.end;
|
|
||||||
|
|
||||||
op = $("div.sb-advanced-options");
|
|
||||||
if (op.is(":visible")) {
|
|
||||||
|
|
||||||
if (fn.ops === undefined) {
|
$lib.width(Math.floor(screenWidth * 0.5));
|
||||||
fn.ops = {};
|
|
||||||
}
|
$builder.width(Math.floor(screenWidth * 0.5))
|
||||||
fn.ops.showFilter = op.find("#sb_show_filter").val();
|
.find("#sb_edit")
|
||||||
fn.ops.myShows = op.find("#sb_my_shows").is(":checked") ? 1 : 0;
|
.remove()
|
||||||
|
.end();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
oTable.fnDraw();
|
|
||||||
});
|
|
||||||
|
|
||||||
$builder.on("click","#sb_edit", function () {
|
mod.onReady = function() {
|
||||||
var schedTable = $("#show_builder_table").dataTable();
|
//define module vars.
|
||||||
|
viewport = AIRTIME.utilities.findViewportDimensions(),
|
||||||
|
$lib = $("#library_content"),
|
||||||
|
$builder = $("#show_builder"),
|
||||||
|
widgetHeight = viewport.height - 180,
|
||||||
|
screenWidth = Math.floor(viewport.width - 120);
|
||||||
|
|
||||||
//reset timestamp to redraw the cursors.
|
$builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
|
||||||
AIRTIME.showbuilder.resetTimestamp();
|
$builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
|
||||||
|
$builder.find(dateEndId).datepicker(oBaseDatePickerSettings);
|
||||||
|
$builder.find(timeEndId).timepicker(oBaseTimePickerSettings);
|
||||||
|
|
||||||
$lib.show()
|
oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
|
||||||
.width(Math.floor(screenWidth * 0.5));
|
AIRTIME.showbuilder.fnServerData.start = oRange.start;
|
||||||
|
AIRTIME.showbuilder.fnServerData.end = oRange.end;
|
||||||
$builder.width(Math.floor(screenWidth * 0.5))
|
|
||||||
.find("#sb_edit")
|
|
||||||
.remove()
|
|
||||||
.end();
|
|
||||||
|
|
||||||
schedTable.fnDraw();
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: "/usersettings/set-now-playing-screen-settings",
|
|
||||||
type: "POST",
|
|
||||||
data: {settings : {library : true}, format: "json"},
|
|
||||||
dataType: "json",
|
|
||||||
success: function(){}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$lib.on("click", "#sb_lib_close", function() {
|
|
||||||
var schedTable = $("#show_builder_table").dataTable();
|
|
||||||
|
|
||||||
$lib.hide();
|
setWidgetHeights();
|
||||||
$builder.width(screenWidth)
|
AIRTIME.library.libraryInit();
|
||||||
.find(".sb-timerange")
|
AIRTIME.showbuilder.builderDataTable();
|
||||||
.append($toggleLib)
|
|
||||||
.end();
|
|
||||||
|
|
||||||
schedTable.fnDraw();
|
$libWrapper = $lib.find("#library_display_wrapper");
|
||||||
|
$libWrapper.prepend($libClose);
|
||||||
|
|
||||||
$.ajax({
|
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 95);
|
||||||
url: "/usersettings/set-now-playing-screen-settings",
|
|
||||||
type: "POST",
|
|
||||||
data: {settings : {library : false}, format: "json"},
|
|
||||||
dataType: "json",
|
|
||||||
success: function(){}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$builder.find('legend').click(function(ev, item){
|
|
||||||
|
|
||||||
var $fs = $(this).parents('fieldset');
|
$builder.on("click", "#sb_submit", function(ev){
|
||||||
|
var fn,
|
||||||
|
oRange,
|
||||||
|
op,
|
||||||
|
oTable = $('#show_builder_table').dataTable();
|
||||||
|
|
||||||
|
//reset timestamp value since input values could have changed.
|
||||||
|
AIRTIME.showbuilder.resetTimestamp();
|
||||||
|
|
||||||
|
oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
|
||||||
|
|
||||||
|
fn = oTable.fnSettings().fnServerData;
|
||||||
|
fn.start = oRange.start;
|
||||||
|
fn.end = oRange.end;
|
||||||
|
|
||||||
|
op = $("div.sb-advanced-options");
|
||||||
|
if (op.is(":visible")) {
|
||||||
|
|
||||||
|
if (fn.ops === undefined) {
|
||||||
|
fn.ops = {};
|
||||||
|
}
|
||||||
|
fn.ops.showFilter = op.find("#sb_show_filter").val();
|
||||||
|
fn.ops.myShows = op.find("#sb_my_shows").is(":checked") ? 1 : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
oTable.fnDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
$builder.on("click","#sb_edit", function () {
|
||||||
|
var schedTable = $("#show_builder_table").dataTable();
|
||||||
|
|
||||||
|
//reset timestamp to redraw the cursors.
|
||||||
|
AIRTIME.showbuilder.resetTimestamp();
|
||||||
|
|
||||||
|
$lib.show()
|
||||||
|
.width(Math.floor(screenWidth * 0.5));
|
||||||
|
|
||||||
|
$builder.width(Math.floor(screenWidth * 0.5))
|
||||||
|
.find("#sb_edit")
|
||||||
|
.remove()
|
||||||
|
.end();
|
||||||
|
|
||||||
|
schedTable.fnDraw();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: "/usersettings/set-now-playing-screen-settings",
|
||||||
|
type: "POST",
|
||||||
|
data: {settings : {library : true}, format: "json"},
|
||||||
|
dataType: "json",
|
||||||
|
success: function(){}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
if ($fs.hasClass("closed")) {
|
$lib.on("click", "#sb_lib_close", function() {
|
||||||
|
var schedTable = $("#show_builder_table").dataTable();
|
||||||
$fs.removeClass("closed");
|
|
||||||
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 150);
|
$lib.hide();
|
||||||
}
|
$builder.width(screenWidth)
|
||||||
else {
|
.find(".sb-timerange")
|
||||||
$fs.addClass("closed");
|
.append($toggleLib)
|
||||||
|
.end();
|
||||||
//set defaults for the options.
|
|
||||||
$fs.find('select').val(0);
|
schedTable.fnDraw();
|
||||||
$fs.find('input[type="checkbox"]').attr("checked", false);
|
|
||||||
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
|
$.ajax({
|
||||||
}
|
url: "/usersettings/set-now-playing-screen-settings",
|
||||||
});
|
type: "POST",
|
||||||
|
data: {settings : {library : false}, format: "json"},
|
||||||
//set click event for all my shows checkbox.
|
dataType: "json",
|
||||||
$builder.on("click", "#sb_my_shows", function(ev) {
|
success: function(){}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
if ($(this).is(':checked')) {
|
$builder.find('legend').click(function(ev, item){
|
||||||
$(ev.delegateTarget).find('#sb_show_filter').val(0);
|
|
||||||
}
|
var $fs = $(this).parents('fieldset');
|
||||||
});
|
|
||||||
|
if ($fs.hasClass("closed")) {
|
||||||
//set select event for choosing a show.
|
|
||||||
$builder.on("change", '#sb_show_filter', function(ev) {
|
$fs.removeClass("closed");
|
||||||
|
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 150);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$fs.addClass("closed");
|
||||||
|
|
||||||
|
//set defaults for the options.
|
||||||
|
$fs.find('select').val(0);
|
||||||
|
$fs.find('input[type="checkbox"]').attr("checked", false);
|
||||||
|
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
if ($(this).val() !== 0) {
|
//set click event for all my shows checkbox.
|
||||||
$(ev.delegateTarget).find('#sb_my_shows').attr("checked", false);
|
$builder.on("click", "#sb_my_shows", function(ev) {
|
||||||
}
|
|
||||||
});
|
if ($(this).is(':checked')) {
|
||||||
|
$(ev.delegateTarget).find('#sb_show_filter').val(0);
|
||||||
//check if the timeline viewed needs updating.
|
}
|
||||||
setInterval(function(){
|
});
|
||||||
var data = {},
|
|
||||||
oTable = $('#show_builder_table').dataTable(),
|
|
||||||
fn = oTable.fnSettings().fnServerData,
|
|
||||||
start = fn.start,
|
|
||||||
end = fn.end;
|
|
||||||
|
|
||||||
data["format"] = "json";
|
//set select event for choosing a show.
|
||||||
data["start"] = start;
|
$builder.on("change", '#sb_show_filter', function(ev) {
|
||||||
data["end"] = end;
|
|
||||||
data["timestamp"] = AIRTIME.showbuilder.getTimestamp();
|
if ($(this).val() !== 0) {
|
||||||
|
$(ev.delegateTarget).find('#sb_my_shows').attr("checked", false);
|
||||||
if (fn.hasOwnProperty("ops")) {
|
|
||||||
data["myShows"] = fn.ops.myShows;
|
|
||||||
data["showFilter"] = fn.ops.showFilter;
|
|
||||||
}
|
|
||||||
|
|
||||||
$.ajax( {
|
|
||||||
"dataType": "json",
|
|
||||||
"type": "GET",
|
|
||||||
"url": "/showbuilder/check-builder-feed",
|
|
||||||
"data": data,
|
|
||||||
"success": function(json) {
|
|
||||||
if (json.update === true) {
|
|
||||||
oTable.fnDraw();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} );
|
});
|
||||||
|
|
||||||
}, 5 * 1000); //need refresh in milliseconds
|
//check if the timeline viewed needs updating.
|
||||||
});
|
setInterval(function(){
|
||||||
|
var data = {},
|
||||||
|
oTable = $('#show_builder_table').dataTable(),
|
||||||
|
fn = oTable.fnSettings().fnServerData,
|
||||||
|
start = fn.start,
|
||||||
|
end = fn.end;
|
||||||
|
|
||||||
|
data["format"] = "json";
|
||||||
|
data["start"] = start;
|
||||||
|
data["end"] = end;
|
||||||
|
data["timestamp"] = AIRTIME.showbuilder.getTimestamp();
|
||||||
|
|
||||||
|
if (fn.hasOwnProperty("ops")) {
|
||||||
|
data["myShows"] = fn.ops.myShows;
|
||||||
|
data["showFilter"] = fn.ops.showFilter;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.ajax( {
|
||||||
|
"dataType": "json",
|
||||||
|
"type": "GET",
|
||||||
|
"url": "/showbuilder/check-builder-feed",
|
||||||
|
"data": data,
|
||||||
|
"success": function(json) {
|
||||||
|
if (json.update === true) {
|
||||||
|
oTable.fnDraw();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
|
||||||
|
}, 5 * 1000); //need refresh in milliseconds
|
||||||
|
};
|
||||||
|
|
||||||
|
mod.onResize = function() {
|
||||||
|
viewport = AIRTIME.utilities.findViewportDimensions(),
|
||||||
|
widgetHeight = viewport.height - 180,
|
||||||
|
screenWidth = Math.floor(viewport.width - 120);
|
||||||
|
|
||||||
|
setWidgetHeights();
|
||||||
|
};
|
||||||
|
|
||||||
|
return AIRTIME;
|
||||||
|
|
||||||
|
} (AIRTIME || {}));
|
||||||
|
|
||||||
|
$(document).ready(AIRTIME.builderMain.onReady);
|
||||||
|
$(window).resize(AIRTIME.builderMain.onResize);
|
||||||
Loading…
Add table
Add a link
Reference in a new issue