diff --git a/airtime_mvc/public/css/images/loader.gif b/airtime_mvc/public/css/images/loader.gif new file mode 100644 index 000000000..799d7f1aa Binary files /dev/null and b/airtime_mvc/public/css/images/loader.gif differ diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css index 4f08a3976..ed4eeb68b 100644 --- a/airtime_mvc/public/css/playlist_builder.css +++ b/airtime_mvc/public/css/playlist_builder.css @@ -456,4 +456,14 @@ div.helper li { li.spl_empty { height: 56px; +} + +.pl-overlay { + z-index:100; + opacity: 0.7; +} + +.pl-loading { + z-index:101; + background: transparent url(images/loader.gif) no-repeat 0 0; } \ No newline at end of file diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js index 90e8d603f..8d6ccfc92 100644 --- a/airtime_mvc/public/js/airtime/library/spl.js +++ b/airtime_mvc/public/js/airtime/library/spl.js @@ -5,6 +5,7 @@ var AIRTIME = (function(AIRTIME){ AIRTIME.playlist = {}; + var mod = AIRTIME.playlist; function isTimeValid(time) { @@ -287,7 +288,7 @@ var AIRTIME = (function(AIRTIME){ } function setPlaylistContent(json) { - + $('#spl_name > a') .empty() .append(json.name); @@ -302,7 +303,6 @@ var AIRTIME = (function(AIRTIME){ .append(json.html); setModified(json.modified); - redrawLib(); } @@ -634,49 +634,84 @@ var AIRTIME = (function(AIRTIME){ }); }; - mod.fnAddItems = function(aItems, iAfter, sAddType) { - var lastMod = getModified(); + function playlistRequest(sUrl, oData) { + var lastMod = getModified(), + plContent = $("#side_playlist"), + offset = plContent.offset(), + plHeight = plContent.height(), + plWidth = plContent.width(), + overlay, + loading; - $.post("/playlist/add-items", - {format: "json", "ids": aItems, "afterItem": iAfter, "type": sAddType, "modified": lastMod}, - function(json){ + oData["modified"] = lastMod; + oData["format"] = "json"; + + + overlay = $("
", { + "class": "pl-overlay ui-widget-content", + "css": { + "position": "absolute", + "top": offset.top, + "left": offset.left, + "height": plHeight + 16, + "width": plWidth + 16 + } + }).click(function(){ + return false; + }); + + loading = $("", { + "class": "pl-loading", + "css": { + "position": "absolute", + "top": offset.top + plHeight/2 - 120, + "left": offset.left + plWidth/2 - 120, + "height": 128, + "width": 128 + } + }); + + $("body") + .append(overlay) + .append(loading); + + $.post( + sUrl, + oData, + function(json){ + if (json.error !== undefined) { playlistError(json); } else { setPlaylistContent(json); } - }); + + loading.remove(); + overlay.remove(); + } + ); + } + + mod.fnAddItems = function(aItems, iAfter, sAddType) { + var sUrl = "/playlist/add-items"; + oData = {"ids": aItems, "afterItem": iAfter, "type": sAddType}; + + playlistRequest(sUrl, oData); }; mod.fnMoveItems = function(aIds, iAfter) { - var lastMod = getModified(); + var sUrl = "/playlist/move-items", + oData = {"ids": aIds, "afterItem": iAfter}; - $.post("/playlist/move-items", - {format: "json", "ids": aIds, "afterItem": iAfter, "modified": lastMod}, - function(json){ - if (json.error !== undefined) { - playlistError(json); - } - else { - setPlaylistContent(json); - } - }); + playlistRequest(sUrl, oData); }; mod.fnDeleteItems = function(aItems) { - var lastMod = getModified(); + var sUrl = "/playlist/delete-items", + oData = {"ids": aItems}; - $.post("/playlist/delete-items", - {format: "json", "ids": aItems, "modified": lastMod}, - function(json){ - if (json.error !== undefined) { - playlistError(json); - } - else { - setPlaylistContent(json); - } - }); + playlistRequest(sUrl, oData); }; mod.init = function() {