CC-3354 : playlist drag and drop

improving apperance of playlist drag and drop.

airtime_mvc/application/models/airtime/CcPlaylist.php

@@ -77,4 +77,26 @@ class CcPlaylist extends BaseCcPlaylist {
         }
     }
 
+    /**
+     * Computes the value of the aggregate column length
+     * Overridden to provide a default of 00:00:00 if the playlist is empty.
+     *
+     * @param PropelPDO $con A connection object
+     *
+     * @return mixed The scalar result from the aggregate query
+     */
+    public function computeDbLength(PropelPDO $con)
+    {
+        $stmt = $con->prepare('SELECT SUM(cliplength) FROM "cc_playlistcontents" WHERE cc_playlistcontents.PLAYLIST_ID = :p1');
+        $stmt->bindValue(':p1', $this->getDbId());
+        $stmt->execute();
+        $length = $stmt->fetchColumn();
+
+        if (is_null($length)) {
+            $length = "00:00:00";
+        }
+
+        return $length;
+    }
+
 } // CcPlaylist

airtime_mvc/public/css/playlist_builder.css

@@ -451,3 +451,13 @@ fieldset > legend {
 #fieldset-metadate_change {
 	clear:both;
 }
+
+div.helper li {
+    list-style: none;
+}
+
+li.spl_empty {
+    text-align: center;
+    height: 56px;
+    border:2px dashed black;
+}

airtime_mvc/public/js/airtime/library/events/library_playlistbuilder.js

@@ -20,12 +20,37 @@ var AIRTIME = (function(AIRTIME){
 		
 		$('#library_display tr[id ^= "au"]').draggable({
 			helper: function(){
-			    var selected = $('#library_display tr:not(:first) input:checked').parents('tr[id^="au"]');
+			    var selected = $('#library_display tr:not(:first) input:checked').parents('tr[id^="au"]'),
+			    	container,
+			    	message,
+			    	li = $("#side_playlist ul li:first"),
+			    	width = li.width(),
+			    	height = li.height();
+			    
 			    if (selected.length === 0) {
 			    	selected = $(this);
 			    }
-			    var container = $('<div/>').attr('id', 'draggingContainer');
+			    
-			    container.append(selected.clone());
+			    if (selected.length === 1) {
+			    	message = "Moving "+selected.length+" Item."
+			    }
+			    else {
+			    	message = "Moving "+selected.length+" Items."
+			    }
+			    
+			    container = $('<div class="helper"/>')
+			    	.append("<li/>")
+			    	.find("li")
+				    	.addClass("ui-state-default")
+			    		.append("<div/>")
+			    		.find("div")
+			    			.addClass("list-item-container")
+			    			.append(message)
+			    			.end()
+				    	.width(width)
+				    	.height(height)
+				    	.end();
+			        
 			    return container; 
 		    },
 			cursor: 'pointer',

airtime_mvc/public/js/airtime/library/spl.js

@@ -500,13 +500,25 @@ var AIRTIME = (function(AIRTIME){
 	    });
 		
 		sortableConf = (function(){
-			var origTrs,
+			var aReceiveItems,
 				html,
 				fnReceive,
 				fnUpdate;		
 			
 			fnReceive = function(event, ui) {
-				origTrs = ui.helper.find('tr[id^="au"]');
+				var selected = $('#library_display tr[id^="au"] input:checked').parents('tr'),
+					aItems = [];
+			
+				//if nothing is checked select the dragged item.
+			    if (selected.length === 0) {
+			    	selected = ui.item;
+			    }
+			    
+			    selected.each(function(i, el) { 
+			    	aItems.push($(el).data("aData").id);
+			    });
+				
+			    aReceiveItems = aItems;
 				html = ui.helper.html();
 			};
 			
@@ -527,17 +539,15 @@ var AIRTIME = (function(AIRTIME){
 				}
 				
 				//item was dragged in from library datatable
-				if (origTrs !== undefined) {
+				if (aReceiveItems !== undefined) {
 					
 					playlist.find("tr.ui-draggable")
 						.after(html)
 						.empty();
 					
-					origTrs.each(function(i, el){
+					aItems = aReceiveItems;
-						aItems.push($("#"+$(el).attr("id")).data("aData").id);
+					aReceiveItems = undefined;
-					});
 					
-					origTrs = undefined;
 					AIRTIME.playlist.fnAddItems(aItems, iAfter, sAddType);
 				}
 				//item was reordered.
@@ -553,6 +563,7 @@ var AIRTIME = (function(AIRTIME){
 				//http://stackoverflow.com/questions/2150002/jquery-ui-sortable-how-can-i-change-the-appearance-of-the-placeholder-object
 				placeholder: {
 			        element: function(currentItem) {
+						
 			            return $('<li class="placeholder ui-state-highlight"></li>')[0];
 			        },
 			        update: function(container, p) {