Congegni
/
sintonia
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Yuchen Wang 2012-01-08 10:33:11 -05:00
parent 8833f4462e
commit a1ccb9c42a
6 changed files with 274 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
airtime_mvc/application/controllers/LibraryController.php
View File

@ -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');

75
airtime_mvc/public/css/datatables/css/ColVis.css Normal file
View File

@ -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;
}

7
airtime_mvc/public/css/styles.css
View File

@ -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----*/

52
airtime_mvc/public/js/airtime/library/library.js
View File

@ -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"},
/* 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('<span class="fg-button ui-button ui-state-default" id="library_group_delete">Delete</span>' +
'<span class="fg-button ui-button ui-state-default" id="library_group_add">Add</span>');
$('#library_group_add').click(groupAdd);
$('#library_group_delete').click(confirmDeleteGroup);
$("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 ui-state-disabled" id="library_group_add">Add</span>');
}
$(document).ready(function() {

37
airtime_mvc/public/js/datatables/plugin/AIRTIME_DEV_README
View File

@ -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!!!

182
airtime_mvc/public/js/datatables/plugin/dataTables.ColVis.js
View File

@ -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 );
}
},
@ -448,8 +501,8 @@ ColVis.prototype = {
{
var
that = this,
nButton = document.createElement('button'),
nSpan = document.createElement('span');
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";
@ -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 );
} );
@ -480,15 +568,16 @@ ColVis.prototype = {
var
that = this,
oColumn = this.s.dt.aoColumns[i],
nButton = document.createElement('button'),
nSpan = document.createElement('span');
nButton = document.createElement('button'),
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);
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)? iWinWidth : iDocWidth) +"px";
nBackground.style.zIndex = "998";
var oStyle = this.dom.catcher.style;
oStyle.height = $(this.dom.button).outerHeight()+"px";
@ -710,18 +812,20 @@ ColVis.prototype = {
}
/* Visual corrections to try and keep the collection visible */
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 )
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<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;
@ -874,4 +992,4 @@ else
alert( "Warning: ColVis requires DataTables 1.7 or greater - www.datatables.net/download");
}
})(jQuery);
})(jQuery);