CC-1986: Configurable columns for media search

- Upgraded ColVis plugin to 1.7, as this one contains some bug-fix that we need
- Added CSS file for ColVis plugin, so that we don't have to modify the plugin code
- Added the Configure Columns UI code

airtime_mvc/application/controllers/LibraryController.php

@@ -32,12 +32,13 @@ class LibraryController extends Zend_Controller_Action
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/js/jquery.dataTables.js','text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.pluginAPI.js','text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.fnSetFilteringDelay.js','text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.ColVis.js','text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/library.js','text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/advancedsearch.js','text/javascript');
 
         $this->view->headLink()->appendStylesheet($baseUrl.'/css/media_library.css');
         $this->view->headLink()->appendStylesheet($baseUrl.'/css/contextmenu.css');
-
+        $this->view->headLink()->appendStylesheet($baseUrl.'/css/datatables/css/ColVis.css');
 
         $this->_helper->layout->setLayout('library');
         $this->_helper->viewRenderer->setResponseSegment('library');

airtime_mvc/public/css/datatables/css/ColVis.css

@@ -0,0 +1,75 @@
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * ColVis styles
+ */
+.ColVis {
+	float: right;
+	margin-bottom: 1em;
+}
+
+.ColVis_Button {
+	position: relative;
+	float: left;
+	margin-right: 3px;
+	padding: 3px 5px;
+	height: 30px;
+	background-color: #fff;
+	border: 1px solid #d0d0d0;
+	cursor: pointer;
+}
+
+button.ColVis_Button::-moz-focus-inner { 
+	border: none !important;
+	padding: 0;
+}
+
+.ColVis_text_hover {
+	border: 1px solid #999;
+	background-color: #f0f0f0;
+}
+
+div.ColVis_collectionBackground {
+	background-color: black;
+	z-index: 996;
+}
+
+div.ColVis_collection {
+	position: relative;
+	width: 130px;
+	background-color: #999;
+	padding: 3px;
+	border: 1px solid #ccc;
+	z-index: 998;
+}
+
+div.ColVis_collection button.ColVis_Button {
+	background-color: white;
+	width: 100%;
+	float: none;
+	margin-bottom: 2px;
+}
+
+div.ColVis_catcher {
+	position: absolute;
+	z-index: 997;
+}
+
+.disabled {
+	color: #999;
+}
+
+
+
+button.ColVis_Button {
+	text-align: left;
+}
+
+div.ColVis_collection button.ColVis_Button:hover {
+	border: 1px solid #999;
+	background-color: #f0f0f0;
+}
+
+span.ColVis_radio {
+	display: inline-block;
+	width: 20px;
+}

airtime_mvc/public/css/styles.css

@@ -623,13 +623,16 @@ dl.inline-list dd {
     vertical-align: top;
 }
 
-.library_toolbar .ui-button {
+.ColVis.TableTools .ui-button {
+    height: 21px;
+}
+.library_toolbar .ui-button, .ColVis.TableTools .ui-button {
     float: right;
     text-align:center;
     font-size:12px;
     font-weight:normal;
     padding: 0.2em 1em;
-    margin: 0.5em 0.2em;
+    margin: 0.5em 0.2em -0.5em 0.2em;
 }
 
 /*----END Data Table----*/

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

@@ -397,8 +397,28 @@ function toggleAll() {
     
     if (checked) {
         checkedCount = $('#library_display tbody tr').size();
+        enableGroupBtn('library_group_add', groupAdd);
+        enableGroupBtn('library_group_delete', confirmDeleteGroup);
     } else {
         checkedCount = 0;
+        disableGroupBtn('library_group_add');
+        disableGroupBtn('library_group_delete');
+    }
+}
+
+function enableGroupBtn(btnId, func) {
+    btnId = '#' + btnId;
+    if ($(btnId).hasClass('ui-state-disabled')) {
+        $(btnId).removeClass('ui-state-disabled');
+        $(btnId).click(func);
+    }
+}
+
+function disableGroupBtn(btnId) {
+    btnId = '#' + btnId;
+    if (!$(btnId).hasClass('ui-state-disabled')) {
+        $(btnId).addClass('ui-state-disabled');
+        $(btnId).unbind("click");
     }
 }
 
@@ -411,11 +431,17 @@ function checkBoxChanged() {
        if (checkedCount < size) {
            checkedCount++;
        }
+       enableGroupBtn('library_group_add', groupAdd);
+       enableGroupBtn('library_group_delete', confirmDeleteGroup);
        $(this).parent().parent().addClass('selected');
     } else {
-        if (!checked && checkedCount > 0) {
+        if (checkedCount > 0) {
             checkedCount--;
         }
+        if (checkedCount == 0) {
+            disableGroupBtn('library_group_add');
+            disableGroupBtn('library_group_delete');
+        }
         $(this).parent().parent().removeClass('selected');
     }
     
@@ -435,6 +461,9 @@ function setupGroupActions() {
     $('#library_display tbody tr').each(function() {
         $(this).find(":checkbox").change(checkBoxChanged);
     });
+    
+    disableGroupBtn('library_group_add');
+    disableGroupBtn('library_group_delete');
 }
 
 function fnShowHide(iCol) {
@@ -464,12 +493,12 @@ function createDataTable(data) {
 		"aoColumns": [
 		    /* Checkbox */  { "sTitle": "<input type='checkbox' name='cb_all'>", "bSortable": false, "bSearchable": false, "mDataProp": "checkbox", "sWidth": "25px", "sClass": "library_checkbox"},
 			/* Id */		{ "sName": "id", "bSearchable": false, "bVisible": false, "mDataProp": "id", "sClass": "library_id"},
-			/* Title */		{ "sTitle": "Title", "sName": "track_title", "mDataProp": "track_title", "sClass": "library_title"},
+			/* Title */		{ "sTitle": "Title", "sName": "track_title", "mDataProp": "track_title", "sWidth": "30%", "sClass": "library_title"},
 			/* Creator */	{ "sTitle": "Creator", "sName": "artist_name", "mDataProp": "artist_name", "sClass": "library_creator"},
 			/* Album */		 { "sTitle": "Album", "sName": "album_title", "mDataProp": "album_title", "sClass": "library_album"},
-			/* Genre */		{ "sTitle": "Genre", "sName": "genre", "mDataProp": "genre", "sClass": "library_genre"},
+			/* Genre */		{ "sTitle": "Genre", "sName": "genre", "mDataProp": "genre", "sWidth": "10%", "sClass": "library_genre"},
-			/* Length */	{ "sTitle": "Length", "sName": "length", "mDataProp": "length", "sWidth": "15%", "sClass": "library_length"},
+			/* Length */	{ "sTitle": "Length", "sName": "length", "mDataProp": "length", "sWidth": "16%", "sClass": "library_length"},
-			/* Type */		{ "sTitle": "Type", "sName": "ftype", "bSearchable": false, "mDataProp": "ftype", "sWidth": "7%", "sClass": "library_type"},
+			/* Type */		{ "sTitle": "Type", "sName": "ftype", "bSearchable": false, "mDataProp": "ftype", "sWidth": "9%", "sClass": "library_type"},
 		],
 		"aaSorting": [[2,'asc']],
 		"sPaginationType": "full_numbers",
@@ -480,15 +509,18 @@ function createDataTable(data) {
                 },
                 "iDisplayLength": getNumEntriesPreference(data),
                 "bStateSave": true,
-                "sDom": 'lfr<"H"C<"library_toolbar">>t<"F"ip>'
+                "sDom": 'lfr<"H"C<"library_toolbar">>t<"F"ip>',
+                "oColVis": {
+			"sAlign": "right",
+                        "aiExclude": [0, 1, 2],
+                        "sSize": "css"
+		}
     });
     dTable.fnSetFilteringDelay(350);
     
     
-    $("div.library_toolbar").html('<span class="fg-button ui-button ui-state-default" id="library_group_delete">Delete</span>' + 
+    $("div.library_toolbar").html('<span class="fg-button ui-button ui-state-default ui-state-disabled" id="library_group_delete">Delete</span>' + 
-        '<span class="fg-button ui-button ui-state-default" id="library_group_add">Add</span>');
+        '<span class="fg-button ui-button ui-state-default ui-state-disabled" id="library_group_add">Add</span>');
-    $('#library_group_add').click(groupAdd);
-    $('#library_group_delete').click(confirmDeleteGroup);
 }
 
 $(document).ready(function() {

airtime_mvc/public/js/datatables/plugin/AIRTIME_DEV_README

@@ -1,37 +0,0 @@
-Before you overwrite dataTables.ColVis.js, note that we have changed a few lines
-in this file.
-
-Running a diff between the original dataTables.ColVis.js and our modified one:
-
-@@ -556,7 +556,11 @@ ColVis.prototype = {
- 		nSpan.innerHTML = text;
- 		
- 		$(nButton).bind( sEvent, function (e) {
--			that._fnCollectionShow();
-+			if ($(".ColVis_collectionBackground").length == 0) {
-+                            that._fnCollectionShow();
-+                        } else {
-+                            that._fnCollectionHide();
-+                        }
- 			e.preventDefault();
- 		} );
- 		
-@@ -661,6 +665,7 @@ ColVis.prototype = {
- 		nHidden.style.top = iDivY+"px";
- 		nHidden.style.left = iDivX+"px";
- 		nHidden.style.display = "block";
-+                nHidden.style.zIndex = "999";
- 		$(nHidden).css('opacity',0);
- 		
- 		var iWinHeight = $(window).height(), iDocHeight = $(document).height(),
-@@ -668,6 +673,7 @@ ColVis.prototype = {
- 		
- 		nBackground.style.height = ((iWinHeight>iDocHeight)? iWinHeight : iDocHeight) +"px";
- 		nBackground.style.width = ((iWinWidth<iDocWidth)? iWinWidth : iDocWidth) +"px";
-+                nBackground.style.zIndex = "998";
- 		
- 		var oStyle = this.dom.catcher.style;
- 		oStyle.height = $(this.dom.button).outerHeight()+"px";
-
-Please make this change before updating!!!
-

airtime_mvc/public/js/datatables/plugin/dataTables.ColVis.js

@@ -1,6 +1,6 @@
 /*
  * File:        ColVis.js
- * Version:     1.0.6
+ * Version:     1.0.7.dev
  * CVS:         $Id$
  * Description: Controls for column visiblity in DataTables
  * Author:      Allan Jardine (www.sprymedia.co.uk)
@@ -121,6 +121,22 @@ ColVis = function( oDTSettings, oInit )
 		 */
 		"abOriginal": [],
 		
+		/**
+		 * Show Show-All button
+		 *  @property bShowAll
+		 *  @type     Array
+		 *  @default  []
+		 */
+		"bShowAll": false,
+		
+		/**
+		 * Show All button text
+		 *  @property sShowAll
+		 *  @type     String
+		 *  @default  Restore original
+		 */
+		"sShowAll": "Show All",
+		
 		/**
 		 * Show restore button
 		 *  @property bRestore
@@ -161,7 +177,16 @@ ColVis = function( oDTSettings, oInit )
 		 *  @type     String
 		 *  @default  auto
 		 */
-		"sSize": "auto"
+		"sSize": "auto",
+		
+		/**
+		 * Indicate if the column list should be positioned by Javascript, visually below the button
+		 * or allow CSS to do the positioning
+		 *  @property bCssPosition
+		 *  @type     boolean
+		 *  @default  false
+		 */
+		"bCssPosition": false
 	};
 	
 	
@@ -352,6 +377,16 @@ ColVis.prototype = {
 			this.s.sRestore = oConfig.sRestore;
 		}
 		
+		if ( typeof oConfig.bShowAll != 'undefined' )
+		{
+			this.s.bShowAll = oConfig.bShowAll;
+		}
+		
+		if ( typeof oConfig.sShowAll != 'undefined' )
+		{
+			this.s.sShowAll = oConfig.sShowAll;
+		}
+		
 		if ( typeof oConfig.sAlign != 'undefined' )
 		{
 			this.s.sAlign = oConfig.sAlign;
@@ -371,6 +406,16 @@ ColVis.prototype = {
 		{
 			this.s.fnLabel = oConfig.fnLabel;
 		}
+		
+		if ( typeof oConfig.sSize != 'undefined' )
+		{
+			this.s.sSize = oConfig.sSize;
+		}
+
+		if ( typeof oConfig.bCssPosition != 'undefined' )
+		{
+			this.s.bCssPosition = oConfig.bCssPosition;
+		}
 	},
 	
 	
@@ -435,6 +480,14 @@ ColVis.prototype = {
 			this.dom.buttons.push( nButton );
 			this.dom.collection.appendChild( nButton );
 		}
+		
+		if ( this.s.bShowAll )
+		{
+			nButton = this._fnDomShowAllButton();
+			nButton.className += " ColVis_ShowAll";
+			this.dom.buttons.push( nButton );
+			this.dom.collection.appendChild( nButton );
+		}
 	},
 	
 	
@@ -461,6 +514,41 @@ ColVis.prototype = {
 			{
 				that.s.dt.oInstance.fnSetColumnVis( i, that.s.abOriginal[i], false );
 			}
+			that._fnAdjustOpenRows();
+			that.s.dt.oInstance.fnDraw( false );
+		} );
+		
+		return nButton;
+	},
+	
+	
+	/**
+	 * Create a button which allows a "show all" action
+	 *  @method  _fnDomShowAllButton
+	 *  @returns {Node} Created button
+	 *  @private 
+	 */
+	"_fnDomShowAllButton": function ()
+	{
+		var
+			that = this,
+			nButton = document.createElement('button'),
+			nSpan = document.createElement('span');
+		
+		nButton.className = !this.s.dt.bJUI ? "ColVis_Button TableTools_Button" :
+			"ColVis_Button TableTools_Button ui-button ui-state-default";
+		nButton.appendChild( nSpan );
+		$(nSpan).html( '<span class="ColVis_title">'+this.s.sShowAll+'</span>' );
+		
+		$(nButton).click( function (e) {
+			for ( var i=0, iLen=that.s.abOriginal.length ; i<iLen ; i++ )
+			{
+				if (that.s.aiExclude.indexOf(i) === -1)
+				{
+					that.s.dt.oInstance.fnSetColumnVis( i, true, false );
+				}
+			}
+			that._fnAdjustOpenRows();
 			that.s.dt.oInstance.fnDraw( false );
 		} );
 		
@@ -481,14 +569,15 @@ ColVis.prototype = {
 			that = this,
 			oColumn = this.s.dt.aoColumns[i],
 			nButton = document.createElement('button'),
-		  nSpan = document.createElement('span');
+			nSpan = document.createElement('span'),
+			dt = this.s.dt;
 		
-		nButton.className = !this.s.dt.bJUI ? "ColVis_Button TableTools_Button" :
+		nButton.className = !dt.bJUI ? "ColVis_Button TableTools_Button" :
 			"ColVis_Button TableTools_Button ui-button ui-state-default";
 		nButton.appendChild( nSpan );
 		var sTitle = this.s.fnLabel===null ? oColumn.sTitle : this.s.fnLabel( i, oColumn.sTitle, oColumn.nTh );
 		$(nSpan).html(
-			'<span class="ColVis_radio"><input type="checkbox"></span>'+
+			'<span class="ColVis_radio"><input type="checkbox"/></span>'+
 			'<span class="ColVis_title">'+sTitle+'</span>' );
 		
 		$(nButton).click( function (e) {
@@ -503,7 +592,19 @@ ColVis.prototype = {
 			 */
 			var oldIndex = $.fn.dataTableExt.iApiIndex;
 			$.fn.dataTableExt.iApiIndex = that._fnDataTablesApiIndex.call(that);
+
+			// Optimisation for server-side processing when scrolling - don't do a full redraw
+			if ( dt.oFeatures.bServerSide && (dt.oScroll.sX !== "" || dt.oScroll.sY !== "" ) )
+			{
+				that.s.dt.oInstance.fnSetColumnVis( i, showHide, false );
+				that.s.dt.oInstance.oApi._fnScrollDraw( that.s.dt );
+				that._fnDrawCallback();
+			}
+			else
+			{
 				that.s.dt.oInstance.fnSetColumnVis( i, showHide );
+			}
+
 			$.fn.dataTableExt.iApiIndex = oldIndex; /* Restore */
 			
 			if ( that.s.fnStateChange !== null )
@@ -556,11 +657,7 @@ ColVis.prototype = {
 		nSpan.innerHTML = text;
 		
 		$(nButton).bind( sEvent, function (e) {
-			if ($(".ColVis_collectionBackground").length == 0) {
 			that._fnCollectionShow();
-                        } else {
-                            that._fnCollectionHide();
-                        }
 			e.preventDefault();
 		} );
 		
@@ -581,7 +678,11 @@ ColVis.prototype = {
 		nHidden.style.display = "none";
 		nHidden.className = !this.s.dt.bJUI ? "ColVis_collection TableTools_collection" :
 			"ColVis_collection TableTools_collection ui-buttonset ui-buttonset-multi";
+		
+		if ( !this.s.bCssPosition )
+		{
 			nHidden.style.position = "absolute";
+		}
 		$(nHidden).css('opacity', 0);
 		
 		return nHidden;
@@ -662,10 +763,12 @@ ColVis.prototype = {
 		var iDivX = parseInt(oPos.left, 10);
 		var iDivY = parseInt(oPos.top + $(this.dom.button).outerHeight(), 10);
 		
+		if ( !this.s.bCssPosition )
+		{
 			nHidden.style.top = iDivY+"px";
 			nHidden.style.left = iDivX+"px";
+		}
 		nHidden.style.display = "block";
-                nHidden.style.zIndex = "999";
 		$(nHidden).css('opacity',0);
 		
 		var iWinHeight = $(window).height(), iDocHeight = $(document).height(),
@@ -673,7 +776,6 @@ ColVis.prototype = {
 		
 		nBackground.style.height = ((iWinHeight>iDocHeight)? iWinHeight : iDocHeight) +"px";
 		nBackground.style.width = ((iWinWidth<iDocWidth)? iWinWidth : iDocWidth) +"px";
-                nBackground.style.zIndex = "998";
 		
 		var oStyle = this.dom.catcher.style;
 		oStyle.height = $(this.dom.button).outerHeight()+"px";
@@ -710,6 +812,8 @@ ColVis.prototype = {
 		}
 		
 		/* Visual corrections to try and keep the collection visible */
+		if ( !this.s.bCssPosition )
+		{
 			nHidden.style.left = this.s.sAlign=="left" ?
 				iDivX+"px" : (iDivX-$(nHidden).outerWidth()+$(this.dom.button).outerWidth())+"px";
 
@@ -720,7 +824,7 @@ ColVis.prototype = {
 			{
 				nHidden.style.left = (iDocWidth-iDivWidth)+"px";
 			}
-		
+		}
 		
 		/* This results in a very small delay for the end user but it allows the animation to be
 		 * much smoother. If you don't want the animation, then the setTimeout can be removed
@@ -765,6 +869,20 @@ ColVis.prototype = {
 				document.body.removeChild( that.dom.catcher );
 			} );
 		}
+	},
+	
+	
+	/**
+	 * 
+	 */
+	"_fnAdjustOpenRows": function ()
+	{
+		var aoOpen = this.s.dt.aoOpenRows;
+		var iVisible = this.s.dt.oApi._fnVisbleColumns( this.s.dt );
+		
+		for ( var i=0, iLen=aoOpen.length ; i<iLen ; i++ ) {
+			aoOpen[i].nTr.getElementsByTagName('td')[0].colSpan = iVisible;
+		}
 	}
 };
 
@@ -840,7 +958,7 @@ ColVis.prototype.CLASS = "ColVis";
  *  @type      String
  *  @default   See code
  */
-ColVis.VERSION = "1.0.6";
+ColVis.VERSION = "1.0.7.dev";
 ColVis.prototype.VERSION = ColVis.VERSION;