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

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

This commit is contained in:
Naomi Aro 2012-03-30 16:04:00 +02:00
parent bb1f94c796
commit 6ddc8288be
2 changed files with 105 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
airtime_mvc/public/js/airtime/library/spl.js
View File

@ -4,9 +4,16 @@
var AIRTIME = (function(AIRTIME){ var AIRTIME = (function(AIRTIME){
AIRTIME.playlist = {}; if (AIRTIME.playlist === undefined) {
AIRTIME.playlist = {};
}
var mod = AIRTIME.playlist; var mod = AIRTIME.playlist,
viewport,
$lib,
$pl,
widgetHeight,
width;
function isTimeValid(time) { function isTimeValid(time) {
var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$"); var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$");
@ -316,62 +323,60 @@ var AIRTIME = (function(AIRTIME){
} }
//sets events dynamically for playlist entries (each row in the playlist) //sets events dynamically for playlist entries (each row in the playlist)
function setPlaylistEntryEvents(el) { function setPlaylistEntryEvents() {
$(el).delegate("#spl_sortable .ui-icon-closethick", $pl.delegate("#spl_sortable .ui-icon-closethick",
{"click": function(ev){ {"click": function(ev){
var id; var id;
id = parseInt($(this).attr("id").split("_").pop(), 10); id = parseInt($(this).attr("id").split("_").pop(), 10);
AIRTIME.playlist.fnDeleteItems([id]); AIRTIME.playlist.fnDeleteItems([id]);
}}); }});
$(el).delegate(".spl_fade_control", $pl.delegate(".spl_fade_control",
{"click": openFadeEditor}); {"click": openFadeEditor});
$(el).delegate(".spl_cue", $pl.delegate(".spl_cue",
{"click": openCueEditor}); {"click": openCueEditor});
//add the play function to the play icon //add the play function to the play icon
$(el).delegate(".big_play", $pl.delegate(".big_play",
{"click": openAudioPreview}); {"click": openAudioPreview});
} }
//sets events dynamically for the cue editor. //sets events dynamically for the cue editor.
function setCueEvents(el) { function setCueEvents() {
$(el).delegate(".spl_cue_in span", $pl.delegate(".spl_cue_in span",
{"focusout": changeCueIn, {"focusout": changeCueIn,
"keydown": submitOnEnter}); "keydown": submitOnEnter});
$(el).delegate(".spl_cue_out span", $pl.delegate(".spl_cue_out span",
{"focusout": changeCueOut, {"focusout": changeCueOut,
"keydown": submitOnEnter}); "keydown": submitOnEnter});
} }
//sets events dynamically for the fade editor. //sets events dynamically for the fade editor.
function setFadeEvents(el) { function setFadeEvents() {
$(el).delegate(".spl_fade_in span", $pl.delegate(".spl_fade_in span",
{"focusout": changeFadeIn, {"focusout": changeFadeIn,
"keydown": submitOnEnter}); "keydown": submitOnEnter});
$(el).delegate(".spl_fade_out span", $pl.delegate(".spl_fade_out span",
{"focusout": changeFadeOut, {"focusout": changeFadeOut,
"keydown": submitOnEnter}); "keydown": submitOnEnter});
} }
function initialEvents() { function initialEvents() {
var playlist = $("#side_playlist"), var cachedDescription;
cachedDescription;
//main playlist fades events //main playlist fades events
playlist.on("click", "#spl_crossfade", function() { $pl.on("click", "#spl_crossfade", function() {
var lastMod = getModified(); var lastMod = getModified();
if ($(this).hasClass("ui-state-active")) { if ($(this).hasClass("ui-state-active")) {
$(this).removeClass("ui-state-active"); $(this).removeClass("ui-state-active");
playlist.find("#crossfade_main").hide(); $pl.find("#crossfade_main").hide();
} }
else { else {
$(this).addClass("ui-state-active"); $(this).addClass("ui-state-active");
@ -385,21 +390,21 @@ var AIRTIME = (function(AIRTIME){
playlistError(json); playlistError(json);
} }
else { else {
playlist.find("span.spl_main_fade_in") $pl.find("span.spl_main_fade_in")
.empty() .empty()
.append(json.fadeIn); .append(json.fadeIn);
playlist.find("span.spl_main_fade_out") $pl.find("span.spl_main_fade_out")
.empty() .empty()
.append(json.fadeOut); .append(json.fadeOut);
playlist.find("#crossfade_main").show(); $pl.find("#crossfade_main").show();
} }
}); });
} }
}); });
playlist.on("blur", "span.spl_main_fade_in", function(event){ $pl.on("blur", "span.spl_main_fade_in", function(event){
event.stopPropagation(); event.stopPropagation();
var url = "/Playlist/set-playlist-fades", var url = "/Playlist/set-playlist-fades",
@ -422,7 +427,7 @@ var AIRTIME = (function(AIRTIME){
}); });
}); });
playlist.on("blur", "span.spl_main_fade_out", function(event){ $pl.on("blur", "span.spl_main_fade_out", function(event){
event.stopPropagation(); event.stopPropagation();
var url = "/Playlist/set-playlist-fades", var url = "/Playlist/set-playlist-fades",
@ -445,20 +450,20 @@ var AIRTIME = (function(AIRTIME){
}); });
}); });
playlist.on("keydown", "span.spl_main_fade_in, span.spl_main_fade_out", submitOnEnter); $pl.on("keydown", "span.spl_main_fade_in, span.spl_main_fade_out", submitOnEnter);
playlist.on("click", "#crossfade_main > .ui-icon-closethick", function(){ $pl.on("click", "#crossfade_main > .ui-icon-closethick", function(){
playlist.find("#spl_crossfade").removeClass("ui-state-active"); $pl.find("#spl_crossfade").removeClass("ui-state-active");
playlist.find("#crossfade_main").hide(); $pl.find("#crossfade_main").hide();
}); });
//end main playlist fades. //end main playlist fades.
//edit playlist name event //edit playlist name event
playlist.on("keydown", "#playlist_name_display", submitOnEnter); $pl.on("keydown", "#playlist_name_display", submitOnEnter);
playlist.on("blur", "#playlist_name_display", editName); $pl.on("blur", "#playlist_name_display", editName);
//edit playlist description events //edit playlist description events
playlist.on("click", "legend", function(){ $pl.on("click", "legend", function(){
var $fs = $(this).parents("fieldset"); var $fs = $(this).parents("fieldset");
if ($fs.hasClass("closed")) { if ($fs.hasClass("closed")) {
@ -470,8 +475,8 @@ var AIRTIME = (function(AIRTIME){
} }
}); });
playlist.on("click", "#description_save", function(){ $pl.on("click", "#description_save", function(){
var textarea = playlist.find("#fieldset-metadate_change textarea"), var textarea = $pl.find("#fieldset-metadate_change textarea"),
description = textarea.val(), description = textarea.val(),
url, url,
lastMod = getModified();; lastMod = getModified();;
@ -487,25 +492,23 @@ var AIRTIME = (function(AIRTIME){
else{ else{
setModified(json.modified); setModified(json.modified);
textarea.val(json.description); textarea.val(json.description);
playlist.find("#fieldset-metadate_change").addClass("closed"); $pl.find("#fieldset-metadate_change").addClass("closed");
redrawLib(); redrawLib();
} }
}); });
}); });
playlist.on("click", "#description_cancel", function(){ $pl.on("click", "#description_cancel", function(){
var textarea = playlist.find("#fieldset-metadate_change textarea"); var textarea = $pl.find("#fieldset-metadate_change textarea");
textarea.val(cachedDescription); textarea.val(cachedDescription);
playlist.find("#fieldset-metadate_change").addClass("closed"); $pl.find("#fieldset-metadate_change").addClass("closed");
}); });
//end edit playlist description events. //end edit playlist description events.
} }
function setUpPlaylist(playlist) { function setUpPlaylist() {
var playlist = $("#side_playlist"), var sortableConf;
sortableConf;
sortableConf = (function(){ sortableConf = (function(){
var aReceiveItems, var aReceiveItems,
@ -556,7 +559,7 @@ var AIRTIME = (function(AIRTIME){
//item was dragged in from library datatable //item was dragged in from library datatable
if (aReceiveItems !== undefined) { if (aReceiveItems !== undefined) {
playlist.find("tr.ui-draggable") $pl.find("tr.ui-draggable")
.after(html) .after(html)
.empty(); .empty();
@ -595,7 +598,7 @@ var AIRTIME = (function(AIRTIME){
}; };
}()); }());
playlist.find("#spl_sortable").sortable(sortableConf); $pl.find("#spl_sortable").sortable(sortableConf);
} }
mod.fnNew = function() { mod.fnNew = function() {
@ -720,21 +723,66 @@ var AIRTIME = (function(AIRTIME){
}; };
mod.init = function() { mod.init = function() {
var playlist = $("#side_playlist");
$(playlist).delegate("#spl_new", $pl.delegate("#spl_new",
{"click": AIRTIME.playlist.fnNew}); {"click": AIRTIME.playlist.fnNew});
$(playlist).delegate("#spl_delete", {"click": function(ev){ $pl.delegate("#spl_delete", {"click": function(ev){
AIRTIME.playlist.fnDelete(); AIRTIME.playlist.fnDelete();
}}); }});
setPlaylistEntryEvents(playlist); setPlaylistEntryEvents();
setCueEvents(playlist); setCueEvents();
setFadeEvents(playlist); setFadeEvents();
initialEvents(); initialEvents();
setUpPlaylist(playlist); setUpPlaylist();
};
function setWidgetSize() {
viewport = AIRTIME.utilities.findViewportDimensions();
widgetHeight = viewport.height - 185;
width = Math.floor(viewport.width - 110);
$lib.height(widgetHeight)
.width(Math.floor(width * 0.55));
$pl.height(widgetHeight)
.width(Math.floor(width * 0.45));
}
mod.onReady = function() {
$lib = $("#library_content");
$pl = $("#side_playlist");
setWidgetSize();
AIRTIME.library.libraryInit();
AIRTIME.playlist.init();
$pl.find(".ui-icon-alert").qtip({
content: {
text: "File does not exist on disk..."
},
position:{
adjust: {
resize: true,
method: "flip flip"
},
at: "right center",
my: "left top",
viewport: $(window)
},
style: {
classes: "ui-tooltip-dark"
},
show: 'mouseover',
hide: 'mouseout'
});
};
mod.onResize = function() {
setWidgetSize();
}; };
return AIRTIME; return AIRTIME;
@ -742,40 +790,5 @@ var AIRTIME = (function(AIRTIME){
}(AIRTIME || {})); }(AIRTIME || {}));
$(document).ready(function() { $(document).ready(AIRTIME.playlist.onReady);
$(window).resize(AIRTIME.playlist.onResize);
var viewport = AIRTIME.utilities.findViewportDimensions(),
lib = $("#library_content"),
pl = $("#side_playlist"),
widgetHeight = viewport.height - 185,
width = Math.floor(viewport.width - 110);
lib.height(widgetHeight)
.width(Math.floor(width * 0.55));
pl.height(widgetHeight)
.width(Math.floor(width * 0.45));
AIRTIME.library.libraryInit();
AIRTIME.playlist.init();
pl.find(".ui-icon-alert").qtip({
content: {
text: "File does not exist on disk..."
},
position:{
adjust: {
resize: true,
method: "flip flip"
},
at: "right center",
my: "left top",
viewport: $(window)
},
style: {
classes: "ui-tooltip-dark"
},
show: 'mouseover',
hide: 'mouseout'
});
});

14
airtime_mvc/public/js/airtime/showbuilder/main_builder.js
View File

@ -41,6 +41,9 @@ AIRTIME = (function(AIRTIME) {
}; };
function setWidgetHeights() { function setWidgetHeights() {
viewport = AIRTIME.utilities.findViewportDimensions();
widgetHeight = viewport.height - 180;
screenWidth = Math.floor(viewport.width - 120);
//set the heights of the main widgets. //set the heights of the main widgets.
$lib.height(widgetHeight); $lib.height(widgetHeight);
@ -59,11 +62,8 @@ AIRTIME = (function(AIRTIME) {
mod.onReady = function() { mod.onReady = function() {
//define module vars. //define module vars.
viewport = AIRTIME.utilities.findViewportDimensions(), $lib = $("#library_content");
$lib = $("#library_content"), $builder = $("#show_builder");
$builder = $("#show_builder"),
widgetHeight = viewport.height - 180,
screenWidth = Math.floor(viewport.width - 120);
$builder.find(dateStartId).datepicker(oBaseDatePickerSettings); $builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
$builder.find(timeStartId).timepicker(oBaseTimePickerSettings); $builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
@ -225,10 +225,6 @@ AIRTIME = (function(AIRTIME) {
}; };
mod.onResize = function() { mod.onResize = function() {
viewport = AIRTIME.utilities.findViewportDimensions(),
widgetHeight = viewport.height - 180,
screenWidth = Math.floor(viewport.width - 120);
setWidgetHeights(); setWidgetHeights();
}; };