From f5761fd03c24b1166cfc6b51181cb97c00356c88 Mon Sep 17 00:00:00 2001 From: Naomi Aro Date: Thu, 26 Jan 2012 19:10:37 +0100 Subject: [PATCH] CC-3174 : show builder status icon on left side of table static check mark in the footer currently --- .../controllers/LibraryController.php | 2 +- .../controllers/ShowbuilderController.php | 1 + airtime_mvc/application/models/Schedule.php | 2 +- .../application/models/ShowBuilder.php | 39 +- .../public/js/airtime/showbuilder/builder.js | 39 +- .../plugin/dataTables.FixedHeader.js | 916 ++++++++++++++++++ 6 files changed, 981 insertions(+), 18 deletions(-) create mode 100644 airtime_mvc/public/js/datatables/plugin/dataTables.FixedHeader.js diff --git a/airtime_mvc/application/controllers/LibraryController.php b/airtime_mvc/application/controllers/LibraryController.php index 7ff27b7bb..0d499c9d6 100644 --- a/airtime_mvc/application/controllers/LibraryController.php +++ b/airtime_mvc/application/controllers/LibraryController.php @@ -43,7 +43,7 @@ class LibraryController extends Zend_Controller_Action $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/datatables/plugin/dataTables.ColReorder.js','text/javascript'); + $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.ColReorderResize.js','text/javascript'); $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.FixedColumns.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'); diff --git a/airtime_mvc/application/controllers/ShowbuilderController.php b/airtime_mvc/application/controllers/ShowbuilderController.php index eb383c159..5da2c875f 100644 --- a/airtime_mvc/application/controllers/ShowbuilderController.php +++ b/airtime_mvc/application/controllers/ShowbuilderController.php @@ -32,6 +32,7 @@ class ShowbuilderController 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.ColVis.js','text/javascript'); //$this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.ColReorder.js','text/javascript'); + $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.FixedHeader.js','text/javascript'); $this->view->headScript()->appendFile($baseUrl.'/js/airtime/showbuilder/builder.js','text/javascript'); $this->view->headLink()->appendStylesheet($baseUrl.'/css/jquery.ui.timepicker.css'); diff --git a/airtime_mvc/application/models/Schedule.php b/airtime_mvc/application/models/Schedule.php index 1884a4ea5..c3e655b53 100644 --- a/airtime_mvc/application/models/Schedule.php +++ b/airtime_mvc/application/models/Schedule.php @@ -314,7 +314,7 @@ class Application_Model_Schedule { si.starts AS si_starts, si.ends AS si_ends, si.time_filled AS si_time_filled, si.record AS si_record, si.rebroadcast AS si_rebroadcast, si.id AS si_id, - sched.starts AS sched_starts, sched.ends AS sched_ends, + sched.starts AS sched_starts, sched.ends AS sched_ends, sched.id AS sched_id, ft.track_title AS file_track_title, ft.artist_name AS file_artist_name, ft.album_title AS file_album_title, ft.length AS file_length diff --git a/airtime_mvc/application/models/ShowBuilder.php b/airtime_mvc/application/models/ShowBuilder.php index c031a3057..507224548 100644 --- a/airtime_mvc/application/models/ShowBuilder.php +++ b/airtime_mvc/application/models/ShowBuilder.php @@ -10,10 +10,15 @@ class Application_Model_ShowBuilder { "header" => false, "footer" => false, "empty" => false, + "checkbox" => false, + "id" => "", "instance" => "", "starts" => "", "ends" => "", - "title" => "" + "runtime" => "", + "title" => "", + "creator" => "", + "album" => "" ); /* @@ -27,6 +32,26 @@ class Application_Model_ShowBuilder { $this->timezone = date_default_timezone_get(); } + /* + * @param DateInterval $p_interval + * + * @return string $runtime + */ + private function formatDuration($p_interval){ + + $hours = $p_interval->format("%h"); + $mins = $p_interval->format("%i"); + + if( $hours == 0) { + $runtime = $p_interval->format("%i:%S"); + } + else { + $runtime = $p_interval->format("%h:%I:%S"); + } + + return $runtime; + } + private function makeFooterRow() { $row = $this->defaultRowArray; @@ -44,6 +69,8 @@ class Application_Model_ShowBuilder { $showEndDT = new DateTime($p_item["si_ends"], new DateTimeZone("UTC")); $showEndDT->setTimezone(new DateTimeZone($this->timezone)); + //$diff = + $row["header"] = true; $row["starts"] = $showStartDT->format("Y-m-d H:i"); $row["ends"] = $showEndDT->format("Y-m-d H:i"); @@ -62,10 +89,16 @@ class Application_Model_ShowBuilder { $schedEndDT = new DateTime($p_item["sched_ends"], new DateTimeZone("UTC")); $schedEndDT->setTimezone(new DateTimeZone($this->timezone)); + $runtime = $schedStartDT->diff($schedEndDT); + + $row["id"] = $p_item["sched_id"]; $row["instance"] = $p_item["si_id"]; - $row["starts"] = $schedStartDT->format("Y-m-d H:i:s"); - $row["ends"] = $schedEndDT->format("Y-m-d H:i:s"); + $row["starts"] = $schedStartDT->format("H:i:s"); + $row["ends"] = $schedEndDT->format("H:i:s"); + $row["runtime"] = $this->formatDuration($runtime); $row["title"] = $p_item["file_track_title"]; + $row["creator"] = $p_item["file_artist_name"]; + $row["album"] = $p_item["file_album_title"]; } //show is empty else { diff --git a/airtime_mvc/public/js/airtime/showbuilder/builder.js b/airtime_mvc/public/js/airtime/showbuilder/builder.js index dd7133286..38600398a 100644 --- a/airtime_mvc/public/js/airtime/showbuilder/builder.js +++ b/airtime_mvc/public/js/airtime/showbuilder/builder.js @@ -135,15 +135,15 @@ var fnServerData = function fnServerData( sSource, aoData, fnCallback ) { var fnShowBuilderRowCallback = function ( nRow, aData, iDisplayIndex, iDisplayIndexFull ){ var i, sSeparatorHTML, - fnPrepareSeparatorRow; + fnPrepareSeparatorRow, + node; fnPrepareSeparatorRow = function(sRowContent, sClass) { - var node; - node = nRow.children[0]; + node = nRow.children[1]; node.innerHTML = sRowContent; node.setAttribute('colspan',100); - for (i = 1; i < nRow.children.length; i = i+1) { + for (i = 2; i < nRow.children.length; i = i+1) { node = nRow.children[i]; node.innerHTML = ""; node.setAttribute("style", "display : none"); @@ -153,10 +153,17 @@ var fnShowBuilderRowCallback = function ( nRow, aData, iDisplayIndex, iDisplayIn }; if (aData.header === true) { + node = nRow.children[0]; + node.innerHTML = ''; + sSeparatorHTML = ''+aData.title+''+aData.starts+''+aData.ends+''; fnPrepareSeparatorRow(sSeparatorHTML, "show-builder-header"); } else if (aData.footer === true) { + + node = nRow.children[0]; + node.innerHTML = ''; + sSeparatorHTML = 'Show Footer'; fnPrepareSeparatorRow(sSeparatorHTML, "show-builder-footer"); } @@ -165,7 +172,7 @@ var fnShowBuilderRowCallback = function ( nRow, aData, iDisplayIndex, iDisplayIn }; $(document).ready(function() { - var dTable, + var oTable, oBaseDatePickerSettings, oBaseTimePickerSettings; @@ -187,13 +194,17 @@ $(document).ready(function() { defaultTime: '0:00' }; - dTable = $('#show_builder_table').dataTable( { + oTable = $('#show_builder_table').dataTable( { "aoColumns": [ - /* hidden */ {"mDataProp": "instance", "bVisible": false, "sTitle": "hidden"}, - /* instance */{"mDataProp": "instance", "sTitle": "si_id"}, - /* starts */{"mDataProp": "starts", "sTitle": "starts"}, - /* ends */{"mDataProp": "ends", "sTitle": "ends"}, - /* title */{"mDataProp": "title", "sTitle": "track_title"} + /* checkbox */ {"mDataProp": "checkbox", "sTitle": "", "sWidth": "25px"}, + // /* scheduled id */{"mDataProp": "id", "sTitle": "id", "bVisible": false, "sWidth": "1px"}, + // /* instance */{"mDataProp": "instance", "sTitle": "si_id"}, + /* starts */{"mDataProp": "starts", "sTitle": "Airtime"}, + /* ends */{"mDataProp": "ends", "sTitle": "Off Air"}, + /* runtime */{"mDataProp": "runtime", "sTitle": "Runtime"}, + /* title */{"mDataProp": "title", "sTitle": "Title"}, + /* creator */{"mDataProp": "creator", "sTitle": "Creator"}, + /* album */{"mDataProp": "album", "sTitle": "Album"} ], "asStripClasses": [ 'odd' ], @@ -209,7 +220,7 @@ $(document).ready(function() { "fnRowCallback": fnShowBuilderRowCallback, "oColVis": { - "aiExclude": [ 0 ] + "aiExclude": [ 0, 1 ] }, // R = ColReorder, C = ColVis, see datatables doc for others @@ -218,12 +229,14 @@ $(document).ready(function() { //options for infinite scrolling //"bScrollInfinite": true, //"bScrollCollapse": true, - "sScrollY": "400px", + //"sScrollY": "400px", "sAjaxDataProp": "schedule", "sAjaxSource": "/showbuilder/builder-feed" }); + //new FixedHeader( oTable ); + new FixedColumns( oTable ); $( "#show_builder_datepicker_start" ).datepicker(oBaseDatePickerSettings); diff --git a/airtime_mvc/public/js/datatables/plugin/dataTables.FixedHeader.js b/airtime_mvc/public/js/datatables/plugin/dataTables.FixedHeader.js new file mode 100644 index 000000000..e00ce1f34 --- /dev/null +++ b/airtime_mvc/public/js/datatables/plugin/dataTables.FixedHeader.js @@ -0,0 +1,916 @@ +/* + * File: FixedHeader.js + * Version: 2.0.5 + * Description: "Fix" a header at the top of the table, so it scrolls with the table + * Author: Allan Jardine (www.sprymedia.co.uk) + * Created: Wed 16 Sep 2009 19:46:30 BST + * Language: Javascript + * License: GPL v2 or BSD 3 point style + * Project: Just a little bit of fun - enjoy :-) + * Contact: www.sprymedia.co.uk/contact + * + * Copyright 2009-2010 Allan Jardine, all rights reserved. + * + * This source file is free software, under either the GPL v2 license or a + * BSD style license, available at: + * http://datatables.net/license_gpl2 + * http://datatables.net/license_bsd + */ + +/* + * Function: FixedHeader + * Purpose: Provide 'fixed' header, footer and columns on an HTML table + * Returns: object:FixedHeader - must be called with 'new' + * Inputs: mixed:mTable - target table + * 1. DataTable object - when using FixedHeader with DataTables, or + * 2. HTML table node - when using FixedHeader without DataTables + * object:oInit - initialisation settings, with the following properties (each optional) + * bool:top - fix the header (default true) + * bool:bottom - fix the footer (default false) + * bool:left - fix the left most column (default false) + * bool:right - fix the right most column (default false) + * int:zTop - fixed header zIndex + * int:zBottom - fixed footer zIndex + * int:zLeft - fixed left zIndex + * int:zRight - fixed right zIndex + */ +var FixedHeader = function ( mTable, oInit ) { + /* Sanity check - you just know it will happen */ + if ( typeof this.fnInit != 'function' ) + { + alert( "FixedHeader warning: FixedHeader must be initialised with the 'new' keyword." ); + return; + } + + var that = this; + var oSettings = { + "aoCache": [], + "oSides": { + "top": true, + "bottom": false, + "left": false, + "right": false + }, + "oZIndexes": { + "top": 104, + "bottom": 103, + "left": 102, + "right": 101 + }, + "oMes": { + "iTableWidth": 0, + "iTableHeight": 0, + "iTableLeft": 0, + "iTableRight": 0, /* note this is left+width, not actually "right" */ + "iTableTop": 0, + "iTableBottom": 0 /* note this is top+height, not actually "bottom" */ + }, + "nTable": null, + "bUseAbsPos": false, + "bFooter": false + }; + + /* + * Function: fnGetSettings + * Purpose: Get the settings for this object + * Returns: object: - settings object + * Inputs: - + */ + this.fnGetSettings = function () { + return oSettings; + }; + + /* + * Function: fnUpdate + * Purpose: Update the positioning and copies of the fixed elements + * Returns: - + * Inputs: - + */ + this.fnUpdate = function () { + this._fnUpdateClones(); + this._fnUpdatePositions(); + }; + + /* + * Function: fnPosition + * Purpose: Update the positioning of the fixed elements + * Returns: - + * Inputs: - + */ + this.fnPosition = function () { + this._fnUpdatePositions(); + }; + + /* Let's do it */ + this.fnInit( mTable, oInit ); + + /* Store the instance on the DataTables object for easy access */ + if ( typeof mTable.fnSettings == 'function' ) + { + mTable._oPluginFixedHeader = this; + } +}; + + +/* + * Variable: FixedHeader + * Purpose: Prototype for FixedHeader + * Scope: global + */ +FixedHeader.prototype = { + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Initialisation + */ + + /* + * Function: fnInit + * Purpose: The "constructor" + * Returns: - + * Inputs: {as FixedHeader function} + */ + fnInit: function ( oTable, oInit ) + { + var s = this.fnGetSettings(); + var that = this; + + /* Record the user definable settings */ + this.fnInitSettings( s, oInit ); + + /* DataTables specific stuff */ + if ( typeof oTable.fnSettings == 'function' ) + { + if ( typeof oTable.fnVersionCheck == 'functon' && + oTable.fnVersionCheck( '1.6.0' ) !== true ) + { + alert( "FixedHeader 2 required DataTables 1.6.0 or later. "+ + "Please upgrade your DataTables installation" ); + return; + } + + var oDtSettings = oTable.fnSettings(); + + if ( oDtSettings.oScroll.sX != "" || oDtSettings.oScroll.sY != "" ) + { + alert( "FixedHeader 2 is not supported with DataTables' scrolling mode at this time" ); + return; + } + + s.nTable = oDtSettings.nTable; + oDtSettings.aoDrawCallback.push( { + "fn": function () { + FixedHeader.fnMeasure(); + that._fnUpdateClones.call(that); + that._fnUpdatePositions.call(that); + }, + "sName": "FixedHeader" + } ); + } + else + { + s.nTable = oTable; + } + + s.bFooter = ($('>tfoot', s.nTable).length > 0) ? true : false; + + /* "Detect" browsers that don't support absolute positioing - or have bugs */ + s.bUseAbsPos = (jQuery.browser.msie && (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0")); + + /* Add the 'sides' that are fixed */ + if ( s.oSides.top ) + { + s.aoCache.push( that._fnCloneTable( "fixedHeader", "FixedHeader_Header", that._fnCloneThead ) ); + } + if ( s.oSides.bottom ) + { + s.aoCache.push( that._fnCloneTable( "fixedFooter", "FixedHeader_Footer", that._fnCloneTfoot ) ); + } + if ( s.oSides.left ) + { + s.aoCache.push( that._fnCloneTable( "fixedLeft", "FixedHeader_Left", that._fnCloneTLeft ) ); + } + if ( s.oSides.right ) + { + s.aoCache.push( that._fnCloneTable( "fixedRight", "FixedHeader_Right", that._fnCloneTRight ) ); + } + + /* Event listeners for window movement */ + FixedHeader.afnScroll.push( function () { + that._fnUpdatePositions.call(that); + } ); + + jQuery(window).resize( function () { + FixedHeader.fnMeasure(); + that._fnUpdateClones.call(that); + that._fnUpdatePositions.call(that); + } ); + + /* Get things right to start with */ + FixedHeader.fnMeasure(); + that._fnUpdateClones(); + that._fnUpdatePositions(); + }, + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Support functions + */ + + /* + * Function: fnInitSettings + * Purpose: Take the user's settings and copy them to our local store + * Returns: - + * Inputs: object:s - the local settings object + * object:oInit - the user's settings object + */ + fnInitSettings: function ( s, oInit ) + { + if ( typeof oInit != 'undefined' ) + { + if ( typeof oInit.top != 'undefined' ) { + s.oSides.top = oInit.top; + } + if ( typeof oInit.bottom != 'undefined' ) { + s.oSides.bottom = oInit.bottom; + } + if ( typeof oInit.left != 'undefined' ) { + s.oSides.left = oInit.left; + } + if ( typeof oInit.right != 'undefined' ) { + s.oSides.right = oInit.right; + } + + if ( typeof oInit.zTop != 'undefined' ) { + s.oZIndexes.top = oInit.zTop; + } + if ( typeof oInit.zBottom != 'undefined' ) { + s.oZIndexes.bottom = oInit.zBottom; + } + if ( typeof oInit.zLeft != 'undefined' ) { + s.oZIndexes.left = oInit.zLeft; + } + if ( typeof oInit.zRight != 'undefined' ) { + s.oZIndexes.right = oInit.zRight; + } + } + + /* Detect browsers which have poor position:fixed support so we can use absolute positions. + * This is much slower since the position must be updated for each scroll, but widens + * compatibility + */ + s.bUseAbsPos = (jQuery.browser.msie && + (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0")); + }, + + /* + * Function: _fnCloneTable + * Purpose: Clone the table node and do basic initialisation + * Returns: - + * Inputs: - + */ + _fnCloneTable: function ( sType, sClass, fnClone ) + { + var s = this.fnGetSettings(); + var nCTable; + + /* We know that the table _MUST_ has a DIV wrapped around it, because this is simply how + * DataTables works. Therefore, we can set this to be relatively position (if it is not + * alreadu absolute, and use this as the base point for the cloned header + */ + if ( jQuery(s.nTable.parentNode).css('position') != "absolute" ) + { + s.nTable.parentNode.style.position = "relative"; + } + + /* Just a shallow clone will do - we only want the table node */ + nCTable = s.nTable.cloneNode( false ); + nCTable.removeAttribute( 'id' ); + + var nDiv = document.createElement( 'div' ); + nDiv.style.position = "absolute"; + nDiv.style.top = "0px"; + nDiv.style.left = "0px"; + nDiv.className += " FixedHeader_Cloned "+sType+" "+sClass; + + /* Set the zIndexes */ + if ( sType == "fixedHeader" ) + { + nDiv.style.zIndex = s.oZIndexes.top; + } + if ( sType == "fixedFooter" ) + { + nDiv.style.zIndex = s.oZIndexes.bottom; + } + if ( sType == "fixedLeft" ) + { + nDiv.style.zIndex = s.oZIndexes.left; + } + else if ( sType == "fixedRight" ) + { + nDiv.style.zIndex = s.oZIndexes.right; + } + + /* remove margins since we are going to poistion it absolutely */ + nCTable.style.margin = "0"; + + /* Insert the newly cloned table into the DOM, on top of the "real" header */ + nDiv.appendChild( nCTable ); + document.body.appendChild( nDiv ); + + return { + "nNode": nCTable, + "nWrapper": nDiv, + "sType": sType, + "sPosition": "", + "sTop": "", + "sLeft": "", + "fnClone": fnClone + }; + }, + + /* + * Function: _fnUpdatePositions + * Purpose: Get the current positioning of the table in the DOM + * Returns: - + * Inputs: - + */ + _fnMeasure: function () + { + var + s = this.fnGetSettings(), + m = s.oMes, + jqTable = jQuery(s.nTable), + oOffset = jqTable.offset(), + iParentScrollTop = this._fnSumScroll( s.nTable.parentNode, 'scrollTop' ), + iParentScrollLeft = this._fnSumScroll( s.nTable.parentNode, 'scrollLeft' ); + + m.iTableWidth = jqTable.outerWidth(); + m.iTableHeight = jqTable.outerHeight(); + m.iTableLeft = oOffset.left + s.nTable.parentNode.scrollLeft; + m.iTableTop = oOffset.top + iParentScrollTop; + m.iTableRight = m.iTableLeft + m.iTableWidth; + m.iTableRight = FixedHeader.oDoc.iWidth - m.iTableLeft - m.iTableWidth; + m.iTableBottom = FixedHeader.oDoc.iHeight - m.iTableTop - m.iTableHeight; + }, + + /* + * Function: _fnSumScroll + * Purpose: Sum node parameters all the way to the top + * Returns: int: sum + * Inputs: node:n - node to consider + * string:side - scrollTop or scrollLeft + */ + _fnSumScroll: function ( n, side ) + { + var i = n[side]; + while ( n = n.parentNode ) + { + if ( n.nodeName != 'HTML' && n.nodeName != 'BODY' ) + { + break; + } + i = n[side]; + } + return i; + }, + + /* + * Function: _fnUpdatePositions + * Purpose: Loop over the fixed elements for this table and update their positions + * Returns: - + * Inputs: - + */ + _fnUpdatePositions: function () + { + var s = this.fnGetSettings(); + this._fnMeasure(); + + for ( var i=0, iLen=s.aoCache.length ; i oWin.iScrollTop ) + { + /* Above the table */ + this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style ); + } + else if ( oWin.iScrollTop > oMes.iTableTop+iTbodyHeight ) + { + /* At the bottom of the table */ + this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+iTbodyHeight)+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style ); + } + else + { + /* In the middle of the table */ + if ( s.bUseAbsPos ) + { + this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', oWin.iScrollTop+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style ); + } + else + { + this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', "0px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft)+"px", 'left', nTable.style ); + } + } + }, + + /* + * Function: _fnUpdateCache + * Purpose: Check the cache and update cache and value if needed + * Returns: - + * Inputs: object:oCache - local cache object + * string:sCache - cache property + * string:sSet - value to set + * string:sProperty - object property to set + * object:oObj - object to update + */ + _fnUpdateCache: function ( oCache, sCache, sSet, sProperty, oObj ) + { + if ( oCache[sCache] != sSet ) + { + oObj[sProperty] = sSet; + oCache[sCache] = sSet; + } + }, + + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Cloning functions + */ + + /* + * Function: _fnCloneThead + * Purpose: Clone the thead element + * Returns: - + * Inputs: object:oCache - the cahced values for this fixed element + */ + _fnCloneThead: function ( oCache ) + { + var s = this.fnGetSettings(); + var nTable = oCache.nNode; + + /* Set the wrapper width to match that of the cloned table */ + oCache.nWrapper.style.width = jQuery(s.nTable).outerWidth()+"px"; + + /* Remove any children the cloned table has */ + while ( nTable.childNodes.length > 0 ) + { + jQuery('thead th', nTable).unbind( 'click' ); + nTable.removeChild( nTable.childNodes[0] ); + } + + /* Clone the DataTables header */ + var nThead = jQuery('thead', s.nTable).clone(true)[0]; + nTable.appendChild( nThead ); + + /* Copy the widths across - apparently a clone isn't good enough for this */ + jQuery("thead>tr th", s.nTable).each( function (i) { + jQuery("thead>tr th:eq("+i+")", nTable).width( jQuery(this).width() ); + } ); + + jQuery("thead>tr td", s.nTable).each( function (i) { + jQuery("thead>tr td:eq("+i+")", nTable).width( jQuery(this).width() ); + } ); + }, + + /* + * Function: _fnCloneTfoot + * Purpose: Clone the tfoot element + * Returns: - + * Inputs: object:oCache - the cahced values for this fixed element + */ + _fnCloneTfoot: function ( oCache ) + { + var s = this.fnGetSettings(); + var nTable = oCache.nNode; + + /* Set the wrapper width to match that of the cloned table */ + oCache.nWrapper.style.width = jQuery(s.nTable).outerWidth()+"px"; + + /* Remove any children the cloned table has */ + while ( nTable.childNodes.length > 0 ) + { + nTable.removeChild( nTable.childNodes[0] ); + } + + /* Clone the DataTables footer */ + var nTfoot = jQuery('tfoot', s.nTable).clone(true)[0]; + nTable.appendChild( nTfoot ); + + /* Copy the widths across - apparently a clone isn't good enough for this */ + jQuery("tfoot:eq(0)>tr th", s.nTable).each( function (i) { + jQuery("tfoot:eq(0)>tr th:eq("+i+")", nTable).width( jQuery(this).width() ); + } ); + + jQuery("tfoot:eq(0)>tr td", s.nTable).each( function (i) { + jQuery("tfoot:eq(0)>tr th:eq("+i+")", nTable)[0].style.width( jQuery(this).width() ); + } ); + }, + + /* + * Function: _fnCloneTLeft + * Purpose: Clone the left column + * Returns: - + * Inputs: object:oCache - the cahced values for this fixed element + */ + _fnCloneTLeft: function ( oCache ) + { + var s = this.fnGetSettings(); + var nTable = oCache.nNode; + var nBody = $('tbody', s.nTable)[0]; + var iCols = $('tbody tr:eq(0) td', s.nTable).length; + var bRubbishOldIE = ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0")); + + /* Remove any children the cloned table has */ + while ( nTable.childNodes.length > 0 ) + { + nTable.removeChild( nTable.childNodes[0] ); + } + + /* Is this the most efficient way to do this - it looks horrible... */ + nTable.appendChild( jQuery("thead", s.nTable).clone(true)[0] ); + nTable.appendChild( jQuery("tbody", s.nTable).clone(true)[0] ); + if ( s.bFooter ) + { + nTable.appendChild( jQuery("tfoot", s.nTable).clone(true)[0] ); + } + + jQuery('thead tr th:gt(0)', nTable).remove(); + jQuery('tfoot tr th:gt(0)', nTable).remove(); + + /* Remove unneeded cells */ + $('tbody tr', nTable).each( function (k) { + $('td:gt(0)', this).remove(); + } ); + + this.fnEqualiseHeights( 'tbody', nBody.parentNode, nTable ); + + var iWidth = jQuery('thead tr th:eq(0)', s.nTable).outerWidth(); + nTable.style.width = iWidth+"px"; + oCache.nWrapper.style.width = iWidth+"px"; + }, + + /* + * Function: _fnCloneTRight + * Purpose: Clone the right most colun + * Returns: - + * Inputs: object:oCache - the cahced values for this fixed element + */ + _fnCloneTRight: function ( oCache ) + { + var s = this.fnGetSettings(); + var nBody = $('tbody', s.nTable)[0]; + var nTable = oCache.nNode; + var iCols = jQuery('tbody tr:eq(0) td', s.nTable).length; + var bRubbishOldIE = ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0")); + + /* Remove any children the cloned table has */ + while ( nTable.childNodes.length > 0 ) + { + nTable.removeChild( nTable.childNodes[0] ); + } + + /* Is this the most efficient way to do this - it looks horrible... */ + nTable.appendChild( jQuery("thead", s.nTable).clone(true)[0] ); + nTable.appendChild( jQuery("tbody", s.nTable).clone(true)[0] ); + if ( s.bFooter ) + { + nTable.appendChild( jQuery("tfoot", s.nTable).clone(true)[0] ); + } + jQuery('thead tr th:not(:nth-child('+iCols+'n))', nTable).remove(); + jQuery('tfoot tr th:not(:nth-child('+iCols+'n))', nTable).remove(); + + /* Remove unneeded cells */ + $('tbody tr', nTable).each( function (k) { + $('td:lt('+(iCols-1)+')', this).remove(); + } ); + + this.fnEqualiseHeights( 'tbody', nBody.parentNode, nTable ); + + var iWidth = jQuery('thead tr th:eq('+(iCols-1)+')', s.nTable).outerWidth(); + nTable.style.width = iWidth+"px"; + oCache.nWrapper.style.width = iWidth+"px"; + }, + + + /** + * Equalise the heights of the rows in a given table node in a cross browser way. Note that this + * is more or less lifted as is from FixedColumns + * @method fnEqualiseHeights + * @returns void + * @param {string} parent Node type - thead, tbody or tfoot + * @param {element} original Original node to take the heights from + * @param {element} clone Copy the heights to + * @private + */ + "fnEqualiseHeights": function ( parent, original, clone ) + { + var that = this, + jqBoxHack = $(parent+' tr:eq(0)', original).children(':eq(0)'), + iBoxHack = jqBoxHack.outerHeight() - jqBoxHack.height(), + bRubbishOldIE = ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0")); + + /* Remove cells which are not needed and copy the height from the original table */ + $(parent+' tr', clone).each( function (k) { + /* Can we use some kind of object detection here?! This is very nasty - damn browsers */ + if ( $.browser.mozilla || $.browser.opera ) + { + $(this).children().height( $(parent+' tr:eq('+k+')', original).outerHeight() ); + } + else + { + $(this).children().height( $(parent+' tr:eq('+k+')', original).outerHeight() - iBoxHack ); + } + + if ( !bRubbishOldIE ) + { + $(parent+' tr:eq('+k+')', original).height( $(parent+' tr:eq('+k+')', original).outerHeight() ); + } + } ); + } +}; + + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Static properties and methods + * We use these for speed! This information is common to all instances of FixedHeader, so no + * point if having them calculated and stored for each different instance. + */ + +/* + * Variable: oWin + * Purpose: Store information about the window positioning + * Scope: FixedHeader + */ +FixedHeader.oWin = { + "iScrollTop": 0, + "iScrollRight": 0, + "iScrollBottom": 0, + "iScrollLeft": 0, + "iHeight": 0, + "iWidth": 0 +}; + +/* + * Variable: oDoc + * Purpose: Store information about the document size + * Scope: FixedHeader + */ +FixedHeader.oDoc = { + "iHeight": 0, + "iWidth": 0 +}; + +/* + * Variable: afnScroll + * Purpose: Array of functions that are to be used for the scrolling components + * Scope: FixedHeader + */ +FixedHeader.afnScroll = []; + +/* + * Function: fnMeasure + * Purpose: Update the measurements for the window and document + * Returns: - + * Inputs: - + */ +FixedHeader.fnMeasure = function () +{ + var + jqWin = jQuery(window), + jqDoc = jQuery(document), + oWin = FixedHeader.oWin, + oDoc = FixedHeader.oDoc; + + oDoc.iHeight = jqDoc.height(); + oDoc.iWidth = jqDoc.width(); + + oWin.iHeight = jqWin.height(); + oWin.iWidth = jqWin.width(); + oWin.iScrollTop = jqWin.scrollTop(); + oWin.iScrollLeft = jqWin.scrollLeft(); + oWin.iScrollRight = oDoc.iWidth - oWin.iScrollLeft - oWin.iWidth; + oWin.iScrollBottom = oDoc.iHeight - oWin.iScrollTop - oWin.iHeight; +}; + + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Global processing + */ + +/* + * Just one 'scroll' event handler in FixedHeader, which calls the required components. This is + * done as an optimisation, to reduce calculation and proagation time + */ +jQuery(window).scroll( function () { + FixedHeader.fnMeasure(); + for ( var i=0, iLen=FixedHeader.afnScroll.length ; i