From bb1f94c796398523e92a928826c131df1968d05d Mon Sep 17 00:00:00 2001 From: Naomi Aro Date: Fri, 30 Mar 2012 15:33:52 +0200 Subject: [PATCH] CC-3496 : PlaylistBuilder, NowPlaying -> GUI representation gets broken while being resized fixing now playing screen. --- .../js/airtime/showbuilder/main_builder.js | 357 ++++++++++-------- 1 file changed, 193 insertions(+), 164 deletions(-) diff --git a/airtime_mvc/public/js/airtime/showbuilder/main_builder.js b/airtime_mvc/public/js/airtime/showbuilder/main_builder.js index a94d6d66b..80e9f1509 100644 --- a/airtime_mvc/public/js/airtime/showbuilder/main_builder.js +++ b/airtime_mvc/public/js/airtime/showbuilder/main_builder.js @@ -1,11 +1,11 @@ -$(document).ready(function(){ +AIRTIME = (function(AIRTIME) { - var viewport = AIRTIME.utilities.findViewportDimensions(), - $lib = $("#library_content"), + var viewport, + $lib, $libWrapper, - $builder = $("#show_builder"), - widgetHeight = viewport.height - 180, - screenWidth = Math.floor(viewport.width - 120), + $builder, + widgetHeight, + screenWidth, oBaseDatePickerSettings, oBaseTimePickerSettings, oRange, @@ -18,15 +18,13 @@ $(document).ready(function(){ "class": "close-round", "href": "#", "id": "sb_lib_close" - }); + }), + mod; - //set the heights of the main widgets. - $lib.height(widgetHeight); - - //builder takes all the screen on first load - $builder - .height(widgetHeight) - .width(screenWidth); + if (AIRTIME.builderMain === undefined) { + AIRTIME.builderMain = {}; + } + mod = AIRTIME.builderMain; oBaseDatePickerSettings = { dateFormat: 'yy-mm-dd', @@ -42,170 +40,201 @@ $(document).ready(function(){ defaultTime: '0:00' }; - $builder.find(dateStartId).datepicker(oBaseDatePickerSettings); - $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(); + function setWidgetHeights() { - //reset timestamp value since input values could have changed. - AIRTIME.showbuilder.resetTimestamp(); + //set the heights of the main widgets. + $lib.height(widgetHeight); + $builder.height(widgetHeight); - 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 ($lib.filter(':visible').length > 0) { - 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; + $lib.width(Math.floor(screenWidth * 0.5)); + + $builder.width(Math.floor(screenWidth * 0.5)) + .find("#sb_edit") + .remove() + .end(); } - - oTable.fnDraw(); - }); + } - $builder.on("click","#sb_edit", function () { - var schedTable = $("#show_builder_table").dataTable(); + mod.onReady = function() { + //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. - AIRTIME.showbuilder.resetTimestamp(); + $builder.find(dateStartId).datepicker(oBaseDatePickerSettings); + $builder.find(timeStartId).timepicker(oBaseTimePickerSettings); + $builder.find(dateEndId).datepicker(oBaseDatePickerSettings); + $builder.find(timeEndId).timepicker(oBaseTimePickerSettings); - $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(){} - }); - }); - - $lib.on("click", "#sb_lib_close", function() { - var schedTable = $("#show_builder_table").dataTable(); + oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId); + AIRTIME.showbuilder.fnServerData.start = oRange.start; + AIRTIME.showbuilder.fnServerData.end = oRange.end; - $lib.hide(); - $builder.width(screenWidth) - .find(".sb-timerange") - .append($toggleLib) - .end(); + setWidgetHeights(); + AIRTIME.library.libraryInit(); + AIRTIME.showbuilder.builderDataTable(); - schedTable.fnDraw(); + $libWrapper = $lib.find("#library_display_wrapper"); + $libWrapper.prepend($libClose); - $.ajax({ - 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){ + $builder.find('.dataTables_scrolling').css("max-height", widgetHeight - 95); - 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")) { - - $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); - } - }); - - //set click event for all my shows checkbox. - $builder.on("click", "#sb_my_shows", function(ev) { + $lib.on("click", "#sb_lib_close", function() { + var schedTable = $("#show_builder_table").dataTable(); + + $lib.hide(); + $builder.width(screenWidth) + .find(".sb-timerange") + .append($toggleLib) + .end(); + + schedTable.fnDraw(); + + $.ajax({ + url: "/usersettings/set-now-playing-screen-settings", + type: "POST", + data: {settings : {library : false}, format: "json"}, + dataType: "json", + success: function(){} + }); + }); - if ($(this).is(':checked')) { - $(ev.delegateTarget).find('#sb_show_filter').val(0); - } - }); - - //set select event for choosing a show. - $builder.on("change", '#sb_show_filter', function(ev) { + $builder.find('legend').click(function(ev, item){ + + var $fs = $(this).parents('fieldset'); + + if ($fs.hasClass("closed")) { + + $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) { - $(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; + //set click event for all my shows checkbox. + $builder.on("click", "#sb_my_shows", function(ev) { + + if ($(this).is(':checked')) { + $(ev.delegateTarget).find('#sb_show_filter').val(0); + } + }); - 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(); - } + //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); } - } ); + }); - }, 5 * 1000); //need refresh in milliseconds -}); \ No newline at end of file + //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); \ No newline at end of file