Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

CC-3496 : PlaylistBuilder, NowPlaying -> GUI representation gets broken while being resized

Browse source 
fixing now playing screen.
This commit is contained in:
Naomi Aro 2012-03-30 15:33:52 +02:00
parent b39db57d0c
commit bb1f94c796
1 changed files with 193 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

317
airtime_mvc/public/js/airtime/showbuilder/main_builder.js
View file

@ -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); //set the heights of the main widgets.
AIRTIME.showbuilder.fnServerData.start = oRange.start; $lib.height(widgetHeight);
AIRTIME.showbuilder.fnServerData.end = oRange.end; $builder.height(widgetHeight);
if ($lib.filter(':visible').length > 0) { if ($lib.filter(':visible').length > 0) {
$lib.width(Math.floor(screenWidth * 0.5)); $lib.width(Math.floor(screenWidth * 0.5));
$builder.width(Math.floor(screenWidth * 0.5)) $builder.width(Math.floor(screenWidth * 0.5))
.find("#sb_edit") .find("#sb_edit")
.remove() .remove()
.end(); .end();
} }
}
AIRTIME.library.libraryInit(); mod.onReady = function() {
AIRTIME.showbuilder.builderDataTable(); //define module vars.
viewport = AIRTIME.utilities.findViewportDimensions(),
$lib = $("#library_content"),
$builder = $("#show_builder"),
widgetHeight = viewport.height - 180,
screenWidth = Math.floor(viewport.width - 120);
$libWrapper = $lib.find("#library_display_wrapper"); $builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
$libWrapper.prepend($libClose); $builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
$builder.find(dateEndId).datepicker(oBaseDatePickerSettings);
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 95); $builder.find(timeEndId).timepicker(oBaseTimePickerSettings);
$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); oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
AIRTIME.showbuilder.fnServerData.start = oRange.start;
AIRTIME.showbuilder.fnServerData.end = oRange.end;
fn = oTable.fnSettings().fnServerData; setWidgetHeights();
fn.start = oRange.start; AIRTIME.library.libraryInit();
fn.end = oRange.end; AIRTIME.showbuilder.builderDataTable();
op = $("div.sb-advanced-options"); $libWrapper = $lib.find("#library_display_wrapper");
if (op.is(":visible")) { $libWrapper.prepend($libClose);
if (fn.ops === undefined) { $builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 95);
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_submit", function(ev){
}); var fn,
oRange,
op,
oTable = $('#show_builder_table').dataTable();
$builder.on("click","#sb_edit", function () { //reset timestamp value since input values could have changed.
var schedTable = $("#show_builder_table").dataTable(); AIRTIME.showbuilder.resetTimestamp();
//reset timestamp to redraw the cursors. oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
AIRTIME.showbuilder.resetTimestamp();
$lib.show() fn = oTable.fnSettings().fnServerData;
.width(Math.floor(screenWidth * 0.5)); fn.start = oRange.start;
fn.end = oRange.end;
$builder.width(Math.floor(screenWidth * 0.5)) op = $("div.sb-advanced-options");
.find("#sb_edit") if (op.is(":visible")) {
.remove()
.end();
schedTable.fnDraw(); 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;
}
$.ajax({ oTable.fnDraw();
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() { $builder.on("click","#sb_edit", function () {
var schedTable = $("#show_builder_table").dataTable(); var schedTable = $("#show_builder_table").dataTable();
$lib.hide(); //reset timestamp to redraw the cursors.
$builder.width(screenWidth) AIRTIME.showbuilder.resetTimestamp();
.find(".sb-timerange")
.append($toggleLib)
.end();
schedTable.fnDraw(); $lib.show()
.width(Math.floor(screenWidth * 0.5));
$.ajax({ $builder.width(Math.floor(screenWidth * 0.5))
url: "/usersettings/set-now-playing-screen-settings", .find("#sb_edit")
type: "POST", .remove()
data: {settings : {library : false}, format: "json"}, .end();
dataType: "json",
success: function(){}
});
});
$builder.find('legend').click(function(ev, item){ schedTable.fnDraw();
var $fs = $(this).parents('fieldset'); $.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"); $lib.hide();
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 150); $builder.width(screenWidth)
} .find(".sb-timerange")
else { .append($toggleLib)
$fs.addClass("closed"); .end();
//set defaults for the options. schedTable.fnDraw();
$fs.find('select').val(0);
$fs.find('input[type="checkbox"]').attr("checked", false);
$builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
}
});
//set click event for all my shows checkbox. $.ajax({
$builder.on("click", "#sb_my_shows", function(ev) { url: "/usersettings/set-now-playing-screen-settings",
type: "POST",
data: {settings : {library : false}, format: "json"},
dataType: "json",
success: function(){}
});
});
if ($(this).is(':checked')) { $builder.find('legend').click(function(ev, item){
$(ev.delegateTarget).find('#sb_show_filter').val(0);
}
});
//set select event for choosing a show. var $fs = $(this).parents('fieldset');
$builder.on("change", '#sb_show_filter', function(ev) {
if ($(this).val() !== 0) { if ($fs.hasClass("closed")) {
$(ev.delegateTarget).find('#sb_my_shows').attr("checked", false);
}
});
//check if the timeline viewed needs updating. $fs.removeClass("closed");
setInterval(function(){ $builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 150);
var data = {}, }
oTable = $('#show_builder_table').dataTable(), else {
fn = oTable.fnSettings().fnServerData, $fs.addClass("closed");
start = fn.start,
end = fn.end;
data["format"] = "json"; //set defaults for the options.
data["start"] = start; $fs.find('select').val(0);
data["end"] = end; $fs.find('input[type="checkbox"]').attr("checked", false);
data["timestamp"] = AIRTIME.showbuilder.getTimestamp(); $builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 110);
}
});
if (fn.hasOwnProperty("ops")) { //set click event for all my shows checkbox.
data["myShows"] = fn.ops.myShows; $builder.on("click", "#sb_my_shows", function(ev) {
data["showFilter"] = fn.ops.showFilter;
}
$.ajax( { if ($(this).is(':checked')) {
"dataType": "json", $(ev.delegateTarget).find('#sb_show_filter').val(0);
"type": "GET",
"url": "/showbuilder/check-builder-feed",
"data": data,
"success": function(json) {
if (json.update === true) {
oTable.fnDraw();
}
} }
} ); });
}, 5 * 1000); //need refresh in milliseconds //set select event for choosing a show.
}); $builder.on("change", '#sb_show_filter', function(ev) {
if ($(this).val() !== 0) {
$(ev.delegateTarget).find('#sb_my_shows').attr("checked", false);
}
});
//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);