diff --git a/airtime_mvc/application/controllers/LibraryController.php b/airtime_mvc/application/controllers/LibraryController.php index 3402a7a61..606e1606f 100644 --- a/airtime_mvc/application/controllers/LibraryController.php +++ b/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'); diff --git a/airtime_mvc/public/css/datatables/css/ColVis.css b/airtime_mvc/public/css/datatables/css/ColVis.css new file mode 100644 index 000000000..95987b876 --- /dev/null +++ b/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; +} diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css index 7dc2ece42..6bf53511c 100644 --- a/airtime_mvc/public/css/styles.css +++ b/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----*/ diff --git a/airtime_mvc/public/js/airtime/library/library.js b/airtime_mvc/public/js/airtime/library/library.js index c3b6279e2..c70d776e6 100644 --- a/airtime_mvc/public/js/airtime/library/library.js +++ b/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": "", "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"}, - /* Length */ { "sTitle": "Length", "sName": "length", "mDataProp": "length", "sWidth": "15%", "sClass": "library_length"}, - /* Type */ { "sTitle": "Type", "sName": "ftype", "bSearchable": false, "mDataProp": "ftype", "sWidth": "7%", "sClass": "library_type"}, + /* Genre */ { "sTitle": "Genre", "sName": "genre", "mDataProp": "genre", "sWidth": "10%", "sClass": "library_genre"}, + /* Length */ { "sTitle": "Length", "sName": "length", "mDataProp": "length", "sWidth": "16%", "sClass": "library_length"}, + /* 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('Delete' + - 'Add'); - $('#library_group_add').click(groupAdd); - $('#library_group_delete').click(confirmDeleteGroup); + $("div.library_toolbar").html('Delete' + + 'Add'); } $(document).ready(function() { diff --git a/airtime_mvc/public/js/datatables/plugin/AIRTIME_DEV_README b/airtime_mvc/public/js/datatables/plugin/AIRTIME_DEV_README deleted file mode 100644 index f342d6044..000000000 --- a/airtime_mvc/public/js/datatables/plugin/AIRTIME_DEV_README +++ /dev/null @@ -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'+this.s.sShowAll+'' ); + + $(nButton).click( function (e) { + for ( var i=0, iLen=that.s.abOriginal.length ; i'+ + ''+ ''+sTitle+'' ); $(nButton).click( function (e) { @@ -503,7 +592,19 @@ ColVis.prototype = { */ var oldIndex = $.fn.dataTableExt.iApiIndex; $.fn.dataTableExt.iApiIndex = that._fnDataTablesApiIndex.call(that); - that.s.dt.oInstance.fnSetColumnVis( i, showHide ); + + // 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 ) @@ -546,8 +647,8 @@ ColVis.prototype = { { var that = this, - nButton = document.createElement('button'), - nSpan = document.createElement('span'), + nButton = document.createElement('button'), + nSpan = document.createElement('span'), sEvent = this.s.activate=="mouseover" ? "mouseover" : "click"; nButton.className = !this.s.dt.bJUI ? "ColVis_Button TableTools_Button" : @@ -556,11 +657,7 @@ ColVis.prototype = { nSpan.innerHTML = text; $(nButton).bind( sEvent, function (e) { - if ($(".ColVis_collectionBackground").length == 0) { - that._fnCollectionShow(); - } else { - that._fnCollectionHide(); - } + that._fnCollectionShow(); 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"; - nHidden.style.position = "absolute"; + + 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); - nHidden.style.top = iDivY+"px"; - nHidden.style.left = iDivX+"px"; + 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 ) + if ( !this.s.bCssPosition ) { - nHidden.style.left = (iDocWidth-iDivWidth)+"px"; + nHidden.style.left = this.s.sAlign=="left" ? + iDivX+"px" : (iDivX-$(nHidden).outerWidth()+$(this.dom.button).outerWidth())+"px"; + + var iDivWidth = $(nHidden).outerWidth(); + var iDivHeight = $(nHidden).outerHeight(); + + if ( iDivX + iDivWidth > iDocWidth ) + { + 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