CC-3174 : showbuilder

adding checks to enable/disable buttons for playlist & timeline.

airtime_mvc/application/controllers/LibraryController.php

@@ -55,6 +55,7 @@ class LibraryController extends Zend_Controller_Action
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.FixedColumns.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.TableTools.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
 
+        $this->view->headScript()->appendFile($baseUrl.'/js/airtime/buttons/buttons.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/library.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
 
         $this->view->headLink()->appendStylesheet($baseUrl.'/css/media_library.css?'.$CC_CONFIG['airtime_version']);

airtime_mvc/public/js/airtime/buttons/buttons.js

@@ -0,0 +1,29 @@
+var AIRTIME = (function(AIRTIME){
+	var mod,
+		DEFAULT_CLASS = 'ui-button ui-state-default',
+		DISABLED_CLASS = 'ui-state-disabled';
+	
+	if (AIRTIME.button === undefined) {
+		AIRTIME.button = {};
+	}
+	mod = AIRTIME.button;
+	
+	mod.enableButton = function(c) {
+		var button = $("."+c).find("button");
+		
+	    if (button.hasClass(DISABLED_CLASS)) {
+	        button.removeClass(DISABLED_CLASS);
+	    }
+	};
+
+	mod.disableButton = function(c) {
+		var button = $("."+c).find("button");
+		
+	    if (!button.hasClass(DISABLED_CLASS)) {
+	        button.addClass(DISABLED_CLASS);
+	    }
+	};
+	
+	return AIRTIME;
+	
+}(AIRTIME || {}));

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

@@ -8,6 +8,24 @@ var AIRTIME = (function(AIRTIME){
 	AIRTIME.library.events = {};
 	mod = AIRTIME.library.events;
 
+    mod.enableAddButtonCheck = function() {
+    	var selected = $('#library_display tr[id ^= "au"] input[type=checkbox]').filter(":checked"),
+    		sortable = $('#spl_sortable'),
+    		check = false;
+    	
+    	//make sure audioclips are selected and a playlist is currently open.
+    	if (selected.length !== 0 && sortable.length !== 0) {
+    		check = true;
+    	}
+    	
+    	if (check === true) {
+	    	AIRTIME.button.enableButton("library_group_add");
+	    }
+	    else {
+	    	AIRTIME.button.disableButton("library_group_add");
+	    }
+    };
+	
 	mod.fnRowCallback = function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
 		var $nRow = $(nRow);
 		
@@ -63,7 +81,6 @@ var AIRTIME = (function(AIRTIME){
 	 */
 	mod.setupLibraryToolbar = function( oLibTable ) {
 		var aButtons,
-			fnResetCol,
 			fnAddSelectedItems;
 		
 		fnAddSelectedItems = function() {
@@ -89,8 +106,8 @@ var AIRTIME = (function(AIRTIME){
 		//[1] = id 
 		//[2] = enabled
 		//[3] = click event
-		aButtons = [["Delete", "library_group_delete", true, AIRTIME.library.fnDeleteSelectedItems], 
+		aButtons = [["Delete", "library_group_delete", false, AIRTIME.library.fnDeleteSelectedItems], 
-	                ["Add", "library_group_add", true, fnAddSelectedItems]];
+	                ["Add", "library_group_add", false, fnAddSelectedItems]];
 		
 		addToolBarButtonsLibrary(aButtons);
 	};

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

@@ -8,6 +8,24 @@ var AIRTIME = (function(AIRTIME){
 	AIRTIME.library.events = {};
 	mod = AIRTIME.library.events;
 	
+	mod.enableAddButtonCheck = function() {
+    	var selected = $('#library_display tr input[type=checkbox]').filter(":checked"),
+    		cursor = $('tr.cursor-selected-row'),
+    		check = false;
+    	
+    	//make sure library items are selected and a cursor is selected.
+    	if (selected.length !== 0 && cursor.length !== 0) {
+    		check = true;
+    	}
+    	
+    	if (check === true) {
+	    	AIRTIME.button.enableButton("library_group_add");
+	    }
+	    else {
+	    	AIRTIME.button.disableButton("library_group_add");
+	    }
+    };
+	
 	mod.fnRowCallback = function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
 		var $nRow = $(nRow);
 		
@@ -21,7 +39,6 @@ var AIRTIME = (function(AIRTIME){
 		$('#library_display tr:not(:first)').draggable({
 			helper: function(){
 			    var selected = $('#library_display tr:not(:first) input:checked').parents('tr'),
-			    	aItems = [],
 			    	container,
 			    	thead = $("#show_builder_table thead"),
 			    	colspan = thead.find("th").length,
@@ -34,10 +51,10 @@ var AIRTIME = (function(AIRTIME){
 			    }
 			    
 			    if (selected.length === 1) {
-			    	message = "Moving "+selected.length+" Item."
+			    	message = "Moving "+selected.length+" Item.";
 			    }
 			    else {
-			    	message = "Moving "+selected.length+" Items."
+			    	message = "Moving "+selected.length+" Items.";
 			    }
 			    
 			    container = $('<div/>').attr('id', 'draggingContainer')
@@ -61,8 +78,6 @@ var AIRTIME = (function(AIRTIME){
 	
 	mod.setupLibraryToolbar = function(oLibTable) {
 		var aButtons,
-			fnTest,
-			fnResetCol,
 			fnAddSelectedItems,
 		
 		fnAddSelectedItems = function() {
@@ -93,12 +108,13 @@ var AIRTIME = (function(AIRTIME){
 			
 			AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);	
 		};
+		
 		//[0] = button text
 		//[1] = id 
 		//[2] = enabled
 		//[3] = click event
-		aButtons = [["Delete", "library_group_delete", true, AIRTIME.library.fnDeleteSelectedItems], 
+		aButtons = [["Delete", "library_group_delete", false, AIRTIME.library.fnDeleteSelectedItems], 
-		           ["Add", "library_group_add", true, fnAddSelectedItems]];
+		           ["Add", "library_group_add", false, fnAddSelectedItems]];
 		
 		addToolBarButtonsLibrary(aButtons);
 	};

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

@@ -43,13 +43,12 @@ var AIRTIME = (function(AIRTIME){
 function addToolBarButtonsLibrary(aButtons) {
 	var i,
 		length = aButtons.length,
-		libToolBar,
+		libToolBar = $(".library_toolbar"),
 		html,
 		buttonClass = '',
 		DEFAULT_CLASS = 'ui-button ui-state-default',
-		DISABLED_CLASS = 'ui-state-disabled';
+		DISABLED_CLASS = 'ui-state-disabled',
-	
+		fn;
-	libToolBar = $(".library_toolbar");
 	
 	for ( i = 0; i < length; i += 1 ) {
 		buttonClass = '';
@@ -59,23 +58,27 @@ function addToolBarButtonsLibrary(aButtons) {
 			buttonClass += DISABLED_CLASS;
 		}
 		
-		html = '<div id="'+aButtons[i][1]+'" class="ColVis TableTools"><button class="'+DEFAULT_CLASS+' '+buttonClass+'"><span>'+aButtons[i][0]+'</span></button></div>';	
+		html = '<div class="ColVis TableTools '+aButtons[i][1]+'"><button class="'+DEFAULT_CLASS+' '+buttonClass+'"><span>'+aButtons[i][0]+'</span></button></div>';
 		libToolBar.append(html);
-		libToolBar.find("#"+aButtons[i][1]).click(aButtons[i][3]);
-	}
-}
 		
-function enableGroupBtn(btnId, func) {
+		//create a closure to preserve the state of i.
-    btnId = '#' + btnId;
+		(function(index){
-    if ($(btnId).hasClass('ui-state-disabled')) {
+			
-        $(btnId).removeClass('ui-state-disabled');
+			libToolBar.find("."+aButtons[index][1]).click(function(){
-    }
+				fn = function() {
-}
+					var $button = $(this).find("button");
+					
+					//only call the passed function if the button is enabled.
+					if (!$button.hasClass(DISABLED_CLASS)) {
+						aButtons[index][3]();
+					}	
+				};
+				
+				fn.call(this);
+			});
+			
+		}(i));
 			
-function disableGroupBtn(btnId) {
-    btnId = '#' + btnId;
-    if (!$(btnId).hasClass('ui-state-disabled')) {
-        $(btnId).addClass('ui-state-disabled');
 	}
 }
 
@@ -400,24 +403,40 @@ $(document).ready(function() {
         	"sRowSelect": "multi",
 			"aButtons": [],
 			"fnRowSelected": function ( node ) {
+				var selected;
                     
                 //seems to happen if everything is selected
                 if ( node === null) {
-                	oTable.find("input[type=checkbox]").attr("checked", true);
+                	selected = oTable.find("input[type=checkbox]");
+                	selected.attr("checked", true);
                 }
                 else {
                 	$(node).find("input[type=checkbox]").attr("checked", true);
+                	selected = oTable.find("input[type=checkbox]").filter(":checked");
                 }
+                
+                //checking to enable buttons
+                AIRTIME.button.enableButton("library_group_delete");
+                AIRTIME.library.events.enableAddButtonCheck();
             },
             "fnRowDeselected": function ( node ) {
+            	var selected;
              
               //seems to happen if everything is deselected
                 if ( node === null) {
                 	oTable.find("input[type=checkbox]").attr("checked", false);
+                	selected = [];
                 }
                 else {
                 	$(node).find("input[type=checkbox]").attr("checked", false);
+                	selected = oTable.find("input[type=checkbox]").filter(":checked");
                 }
+                
+                //checking to disable buttons
+                if (selected.length === 0) {
+                	AIRTIME.button.disableButton("library_group_delete");
+                }
+                AIRTIME.library.events.enableAddButtonCheck();
             }
 		},
 		
@@ -472,7 +491,7 @@ $(document).ready(function() {
         ignoreRightClick: true,
         
         build: function($el, e) {
-    		var x, request, data, screen, items, callback, $tr;
+    		var data, screen, items, callback, $tr;
     		
     		$tr = $el.parent();
     		data = $tr.data("aData");
@@ -527,7 +546,7 @@ $(document).ready(function() {
         						
         						media.push({"id": data.id, "type": data.ftype});
         						$.post(oItems.del.url, {format: "json", media: media }, function(json){
-        							var oTable, tr;
+        							var oTable;
         							
         							if (json.message) {
         								alert(json.message);

airtime_mvc/public/js/airtime/showbuilder/builder.js

@@ -419,16 +419,26 @@ $(document).ready(function() {
                 else {
                 	$(node).find("input[type=checkbox]").attr("checked", true);
                 }
+                
+                //checking to enable buttons
+                AIRTIME.button.enableButton("sb_delete");
             },
             "fnRowDeselected": function ( node ) {
+            	var selected;
             		       	
               //seems to happen if everything is deselected
                 if ( node === null) {
-                	var oTable = $("#show_builder_table").dataTable();
+                	tableDiv.find("input[type=checkbox]").attr("checked", false);
-                	oTable.find("input[type=checkbox]").attr("checked", false);
+                	selected = [];
                 }
                 else {
                 	$(node).find("input[type=checkbox]").attr("checked", false);
+                	selected = tableDiv.find("input[type=checkbox]").filter(":checked");
+                }
+                
+                //checking to disable buttons
+                if (selected.length === 0) {
+                	AIRTIME.button.disableButton("sb_delete");
                 }
             }
 		},
@@ -521,9 +531,7 @@ $(document).ready(function() {
 		
 		fnReceive = function(event, ui) {
 			var aItems = [],
-				oLibTT = TableTools.fnGetInstance('library_display'),
+				oLibTT = TableTools.fnGetInstance('library_display');
-				i,
-				length;
 		
 			aItems = oLibTT.fnGetSelectedData();
 			
@@ -579,7 +587,7 @@ $(document).ready(function() {
 	tableDiv.sortable(sortableConf);
 	
 	$("#show_builder .fg-toolbar")
-		.append('<div class="ColVis TableTools"><button class="ui-button ui-state-default"><span>Delete</span></button></div>')
+		.append('<div class="ColVis TableTools sb_delete"><button class="ui-button ui-state-default ui-state-disabled"><span>Delete</span></button></div>')
 		.click(fnRemoveSelectedItems);
 	
 	//set things like a reference to the table.
@@ -587,15 +595,19 @@ $(document).ready(function() {
 	
 	//add event to cursors.
 	tableDiv.find("tbody").on("click", "div.marker", function(event){
-		var tr = $(this).parents("tr");
+		var tr = $(this).parents("tr"),
+			cursorSelClass = "cursor-selected-row";
 		
-		if (tr.hasClass("cursor-selected-row")) {
+		if (tr.hasClass(cursorSelClass)) {
-			tr.removeClass("cursor-selected-row");
+			tr.removeClass(cursorSelClass);
 		}
 		else {
-			tr.addClass("cursor-selected-row");
+			tr.addClass(cursorSelClass);
 		}
 		
+		//check if add button can still be enabled.
+		AIRTIME.library.events.enableAddButtonCheck();
+		
 		return false;
 	});