DataTables/media/src/core/core.scrolling.js

/**
 * Add any control elements for the table - specifically scrolling
 *  @param {object} oSettings dataTables settings object
 *  @returns {node} Node to add to the DOM
 *  @memberof DataTable#oApi
 */
function _fnFeatureHtmlTable ( oSettings )
{
	/* Check if scrolling is enabled or not - if not then leave the DOM unaltered */
	if ( oSettings.oScroll.sX === "" && oSettings.oScroll.sY === "" )
	{
		return oSettings.nTable;
	}
	
	/*
	 * The HTML structure that we want to generate in this function is:
	 *  div - nScroller
	 *    div - nScrollHead
	 *      div - nScrollHeadInner
	 *        table - nScrollHeadTable
	 *          thead - nThead
	 *    div - nScrollBody
	 *      table - oSettings.nTable
	 *        thead - nTheadSize
	 *        tbody - nTbody
	 *    div - nScrollFoot
	 *      div - nScrollFootInner
	 *        table - nScrollFootTable
	 *          tfoot - nTfoot
	 */
	var
	 	nScroller = document.createElement('div'),
	 	nScrollHead = document.createElement('div'),
	 	nScrollHeadInner = document.createElement('div'),
	 	nScrollBody = document.createElement('div'),
	 	nScrollFoot = document.createElement('div'),
	 	nScrollFootInner = document.createElement('div'),
	 	nScrollHeadTable = oSettings.nTable.cloneNode(false),
	 	nScrollFootTable = oSettings.nTable.cloneNode(false),
		nThead = oSettings.nTable.getElementsByTagName('thead')[0],
	 	nTfoot = oSettings.nTable.getElementsByTagName('tfoot').length === 0 ? null : 
			oSettings.nTable.getElementsByTagName('tfoot')[0],
		oClasses = oSettings.oClasses;
	
	nScrollHead.appendChild( nScrollHeadInner );
	nScrollFoot.appendChild( nScrollFootInner );
	nScrollBody.appendChild( oSettings.nTable );
	nScroller.appendChild( nScrollHead );
	nScroller.appendChild( nScrollBody );
	nScrollHeadInner.appendChild( nScrollHeadTable );
	nScrollHeadTable.appendChild( nThead );
	if ( nTfoot !== null )
	{
		nScroller.appendChild( nScrollFoot );
		nScrollFootInner.appendChild( nScrollFootTable );
		nScrollFootTable.appendChild( nTfoot );
	}
	
	nScroller.className = oClasses.sScrollWrapper;
	nScrollHead.className = oClasses.sScrollHead;
	nScrollHeadInner.className = oClasses.sScrollHeadInner;
	nScrollBody.className = oClasses.sScrollBody;
	nScrollFoot.className = oClasses.sScrollFoot;
	nScrollFootInner.className = oClasses.sScrollFootInner;
	
	if ( oSettings.oScroll.bAutoCss )
	{
		nScrollHead.style.overflow = "hidden";
		nScrollHead.style.position = "relative";
		nScrollFoot.style.overflow = "hidden";
		nScrollBody.style.overflow = "auto";
	}
	
	nScrollHead.style.border = "0";
	nScrollHead.style.width = "100%";
	nScrollFoot.style.border = "0";
	nScrollHeadInner.style.width = oSettings.oScroll.sXInner !== "" ?
		oSettings.oScroll.sXInner : "100%"; /* will be overwritten */
	
	/* Modify attributes to respect the clones */
	nScrollHeadTable.removeAttribute('id');
	nScrollHeadTable.style.marginLeft = "0";
	oSettings.nTable.style.marginLeft = "0";
	if ( nTfoot !== null )
	{
		nScrollFootTable.removeAttribute('id');
		nScrollFootTable.style.marginLeft = "0";
	}
	
	/* Move caption elements from the body to the header, footer or leave where it is
	 * depending on the configuration. Note that the DTD says there can be only one caption */
	var nCaption = $(oSettings.nTable).children('caption');
	if ( nCaption.length > 0 )
	{
		nCaption = nCaption[0];
		if ( nCaption._captionSide === "top" )
		{
			nScrollHeadTable.appendChild( nCaption );
		}
		else if ( nCaption._captionSide === "bottom" && nTfoot )
		{
			nScrollFootTable.appendChild( nCaption );
		}
	}
	
	/*
	 * Sizing
	 */
	/* When x-scrolling add the width and a scroller to move the header with the body */
	if ( oSettings.oScroll.sX !== "" )
	{
		nScrollHead.style.width = _fnStringToCss( oSettings.oScroll.sX );
		nScrollBody.style.width = _fnStringToCss( oSettings.oScroll.sX );
		
		if ( nTfoot !== null )
		{
			nScrollFoot.style.width = _fnStringToCss( oSettings.oScroll.sX );	
		}
		
		/* When the body is scrolled, then we also want to scroll the headers */
		$(nScrollBody).scroll( function (e) {
			nScrollHead.scrollLeft = this.scrollLeft;
			
			if ( nTfoot !== null )
			{
				nScrollFoot.scrollLeft = this.scrollLeft;
			}
		} );
	}
	
	/* When yscrolling, add the height */
	if ( oSettings.oScroll.sY !== "" )
	{
		nScrollBody.style.height = _fnStringToCss( oSettings.oScroll.sY );
	}
	
	/* Redraw - align columns across the tables */
	oSettings.aoDrawCallback.push( {
		"fn": _fnScrollDraw,
		"sName": "scrolling"
	} );
	
	/* Infinite scrolling event handlers */
	if ( oSettings.oScroll.bInfinite )
	{
		$(nScrollBody).scroll( function() {
			/* Use a blocker to stop scrolling from loading more data while other data is still loading */
			if ( !oSettings.bDrawing && $(this).scrollTop() !== 0 )
			{
				/* Check if we should load the next data set */
				if ( $(this).scrollTop() + $(this).height() > 
					$(oSettings.nTable).height() - oSettings.oScroll.iLoadGap )
				{
					/* Only do the redraw if we have to - we might be at the end of the data */
					if ( oSettings.fnDisplayEnd() < oSettings.fnRecordsDisplay() )
					{
						_fnPageChange( oSettings, 'next' );
						_fnCalculateEnd( oSettings );
						_fnDraw( oSettings );
					}
				}
			}
		} );
	}
	
	oSettings.nScrollHead = nScrollHead;
	oSettings.nScrollFoot = nScrollFoot;
	
	return nScroller;
}


/**
 * Update the various tables for resizing. It's a bit of a pig this function, but
 * basically the idea to:
 *   1. Re-create the table inside the scrolling div
 *   2. Take live measurements from the DOM
 *   3. Apply the measurements
 *   4. Clean up
 *  @param {object} o dataTables settings object
 *  @returns {node} Node to add to the DOM
 *  @memberof DataTable#oApi
 */
function _fnScrollDraw ( o )
{
	var
		nScrollHeadInner = o.nScrollHead.getElementsByTagName('div')[0],
		nScrollHeadTable = nScrollHeadInner.getElementsByTagName('table')[0],
		nScrollBody = o.nTable.parentNode,
		i, iLen, j, jLen, anHeadToSize, anHeadSizers, anFootSizers, anFootToSize, oStyle, iVis,
		nTheadSize, nTfootSize,
		iWidth, aApplied=[], aAppliedFooter=[], iSanityWidth,
		nScrollFootInner = (o.nTFoot !== null) ? o.nScrollFoot.getElementsByTagName('div')[0] : null,
		nScrollFootTable = (o.nTFoot !== null) ? nScrollFootInner.getElementsByTagName('table')[0] : null,
		ie67 = o.oBrowser.bScrollOversize,
		zeroOut = function(nSizer) {
			oStyle = nSizer.style;
			oStyle.paddingTop = "0";
			oStyle.paddingBottom = "0";
			oStyle.borderTopWidth = "0";
			oStyle.borderBottomWidth = "0";
			oStyle.height = 0;
		};
	
	/*
	 * 1. Re-create the table inside the scrolling div
	 */
	
	/* Remove the old minimised thead and tfoot elements in the inner table */
	$(o.nTable).children('thead, tfoot').remove();

	/* Clone the current header and footer elements and then place it into the inner table */
	nTheadSize = $(o.nTHead).clone()[0];
	o.nTable.insertBefore( nTheadSize, o.nTable.childNodes[0] );
	
	if ( o.nTFoot !== null )
	{
		nTfootSize = $(o.nTFoot).clone()[0];
		o.nTable.insertBefore( nTfootSize, o.nTable.childNodes[1] );
	}
	
	/*
	 * 2. Take live measurements from the DOM - do not alter the DOM itself!
	 */
	
	/* Remove old sizing and apply the calculated column widths
	 * Get the unique column headers in the newly created (cloned) header. We want to apply the
	 * calculated sizes to this header
	 */
	if ( o.oScroll.sX === "" )
	{
		nScrollBody.style.width = '100%';
		nScrollHeadInner.parentNode.style.width = '100%';
	}
	
	var nThs = _fnGetUniqueThs( o, nTheadSize );
	for ( i=0, iLen=nThs.length ; i<iLen ; i++ )
	{
		iVis = _fnVisibleToColumnIndex( o, i );
		nThs[i].style.width = o.aoColumns[iVis].sWidth;
	}
	
	if ( o.nTFoot !== null )
	{
		_fnApplyToChildren( function(n) {
			n.style.width = "";
		}, nTfootSize.getElementsByTagName('tr') );
	}

	// If scroll collapse is enabled, when we put the headers back into the body for sizing, we
	// will end up forcing the scrollbar to appear, making our measurements wrong for when we
	// then hide it (end of this function), so add the header height to the body scroller.
	if ( o.oScroll.bCollapse && o.oScroll.sY !== "" )
	{
		nScrollBody.style.height = (nScrollBody.offsetHeight + o.nTHead.offsetHeight)+"px";
	}
	
	/* Size the table as a whole */
	iSanityWidth = $(o.nTable).outerWidth();
	if ( o.oScroll.sX === "" )
	{
		/* No x scrolling */
		o.nTable.style.width = "100%";
		
		/* I know this is rubbish - but IE7 will make the width of the table when 100% include
		 * the scrollbar - which is shouldn't. When there is a scrollbar we need to take this
		 * into account.
		 */
		if ( ie67 && ($('tbody', nScrollBody).height() > nScrollBody.offsetHeight || 
			$(nScrollBody).css('overflow-y') == "scroll")  )
		{
			o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth() - o.oScroll.iBarWidth);
		}
	}
	else
	{
		if ( o.oScroll.sXInner !== "" )
		{
			/* x scroll inner has been given - use it */
			o.nTable.style.width = _fnStringToCss(o.oScroll.sXInner);
		}
		else if ( iSanityWidth == $(nScrollBody).width() &&
		   $(nScrollBody).height() < $(o.nTable).height() )
		{
			/* There is y-scrolling - try to take account of the y scroll bar */
			o.nTable.style.width = _fnStringToCss( iSanityWidth-o.oScroll.iBarWidth );
			if ( $(o.nTable).outerWidth() > iSanityWidth-o.oScroll.iBarWidth )
			{
				/* Not possible to take account of it */
				o.nTable.style.width = _fnStringToCss( iSanityWidth );
			}
		}
		else
		{
			/* All else fails */
			o.nTable.style.width = _fnStringToCss( iSanityWidth );
		}
	}
	
	/* Recalculate the sanity width - now that we've applied the required width, before it was
	 * a temporary variable. This is required because the column width calculation is done
	 * before this table DOM is created.
	 */
	iSanityWidth = $(o.nTable).outerWidth();
	
	/* We want the hidden header to have zero height, so remove padding and borders. Then
	 * set the width based on the real headers
	 */
	anHeadToSize = o.nTHead.getElementsByTagName('tr');
	anHeadSizers = nTheadSize.getElementsByTagName('tr');
	
	// Apply all styles in one pass. Invalidates layout only once because we don't read any 
	// DOM properties.
	_fnApplyToChildren( zeroOut, anHeadSizers );
	 
	// Read all widths in next pass. Forces layout only once because we do not change 
	// any DOM properties.
	_fnApplyToChildren( function(nSizer) {
		aApplied.push( _fnStringToCss( $(nSizer).width() ) );
	}, anHeadSizers );
	 
	// Apply all widths in final pass. Invalidates layout only once because we do not
	// read any DOM properties.
	_fnApplyToChildren( function(nToSize, i) {
		nToSize.style.width = aApplied[i];
	}, anHeadToSize );

	$(anHeadSizers).height(0);
	
	/* Same again with the footer if we have one */
	if ( o.nTFoot !== null )
	{
		anFootSizers = nTfootSize.getElementsByTagName('tr');
		anFootToSize = o.nTFoot.getElementsByTagName('tr');
		
		_fnApplyToChildren( zeroOut, anFootSizers );
		 
		_fnApplyToChildren( function(nSizer) {
			aAppliedFooter.push( _fnStringToCss( $(nSizer).width() ) );
		}, anFootSizers );
		 
		_fnApplyToChildren( function(nToSize, i) {
			nToSize.style.width = aAppliedFooter[i];
		}, anFootToSize );

		$(anFootSizers).height(0);
	}
	
	/*
	 * 3. Apply the measurements
	 */
	
	/* "Hide" the header and footer that we used for the sizing. We want to also fix their width
	 * to what they currently are
	 */
	_fnApplyToChildren( function(nSizer, i) {
		nSizer.innerHTML = "";
		nSizer.style.width = aApplied[i];
	}, anHeadSizers );
	
	if ( o.nTFoot !== null )
	{
		_fnApplyToChildren( function(nSizer, i) {
			nSizer.innerHTML = "";
			nSizer.style.width = aAppliedFooter[i];
		}, anFootSizers );
	}
	
	/* Sanity check that the table is of a sensible width. If not then we are going to get
	 * misalignment - try to prevent this by not allowing the table to shrink below its min width
	 */
	if ( $(o.nTable).outerWidth() < iSanityWidth )
	{
		/* The min width depends upon if we have a vertical scrollbar visible or not */
		var iCorrection = ((nScrollBody.scrollHeight > nScrollBody.offsetHeight || 
			$(nScrollBody).css('overflow-y') == "scroll")) ?
				iSanityWidth+o.oScroll.iBarWidth : iSanityWidth;
		
		/* IE6/7 are a law unto themselves... */
		if ( ie67 && (nScrollBody.scrollHeight > 
			nScrollBody.offsetHeight || $(nScrollBody).css('overflow-y') == "scroll")  )
		{
			o.nTable.style.width = _fnStringToCss( iCorrection-o.oScroll.iBarWidth );
		}
		
		/* Apply the calculated minimum width to the table wrappers */
		nScrollBody.style.width = _fnStringToCss( iCorrection );
		o.nScrollHead.style.width = _fnStringToCss( iCorrection );
		
		if ( o.nTFoot !== null )
		{
			o.nScrollFoot.style.width = _fnStringToCss( iCorrection );
		}
		
		/* And give the user a warning that we've stopped the table getting too small */
		if ( o.oScroll.sX === "" )
		{
			_fnLog( o, 1, "The table cannot fit into the current element which will cause column"+
				" misalignment. The table has been drawn at its minimum possible width." );
		}
		else if ( o.oScroll.sXInner !== "" )
		{
			_fnLog( o, 1, "The table cannot fit into the current element which will cause column"+
				" misalignment. Increase the sScrollXInner value or remove it to allow automatic"+
				" calculation" );
		}
	}
	else
	{
		nScrollBody.style.width = _fnStringToCss( '100%' );
		o.nScrollHead.style.width = _fnStringToCss( '100%' );
		
		if ( o.nTFoot !== null )
		{
			o.nScrollFoot.style.width = _fnStringToCss( '100%' );
		}
	}
	
	
	/*
	 * 4. Clean up
	 */
	if ( o.oScroll.sY === "" )
	{
		/* IE7< puts a vertical scrollbar in place (when it shouldn't be) due to subtracting
		 * the scrollbar height from the visible display, rather than adding it on. We need to
		 * set the height in order to sort this. Don't want to do it in any other browsers.
		 */
		if ( ie67 )
		{
			nScrollBody.style.height = _fnStringToCss( o.nTable.offsetHeight+o.oScroll.iBarWidth );
		}
	}
	
	if ( o.oScroll.sY !== "" && o.oScroll.bCollapse )
	{
		nScrollBody.style.height = _fnStringToCss( o.oScroll.sY );
		
		var iExtra = (o.oScroll.sX !== "" && o.nTable.offsetWidth > nScrollBody.offsetWidth) ?
		 	o.oScroll.iBarWidth : 0;
		if ( o.nTable.offsetHeight < nScrollBody.offsetHeight )
		{
			nScrollBody.style.height = _fnStringToCss( o.nTable.offsetHeight+iExtra );
		}
	}
	
	/* Finally set the width's of the header and footer tables */
	var iOuterWidth = $(o.nTable).outerWidth();
	nScrollHeadTable.style.width = _fnStringToCss( iOuterWidth );
	nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth );

	// Figure out if there are scrollbar present - if so then we need a the header and footer to
	// provide a bit more space to allow "overflow" scrolling (i.e. past the scrollbar)
	var bScrolling = $(o.nTable).height() > nScrollBody.clientHeight || $(nScrollBody).css('overflow-y') == "scroll";
	nScrollHeadInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px";
	
	if ( o.nTFoot !== null )
	{
		nScrollFootTable.style.width = _fnStringToCss( iOuterWidth );
		nScrollFootInner.style.width = _fnStringToCss( iOuterWidth );
		nScrollFootInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px";
	}

	/* Adjust the position of the header in case we loose the y-scrollbar */
	$(nScrollBody).scroll();
	
	/* If sorting or filtering has occurred, jump the scrolling back to the top */
	if ( o.bSorted || o.bFiltered )
	{
		nScrollBody.scrollTop = 0;
	}
}


/**
 * Apply a given function to the display child nodes of an element array (typically
 * TD children of TR rows
 *  @param {function} fn Method to apply to the objects
 *  @param array {nodes} an1 List of elements to look through for display children
 *  @param array {nodes} an2 Another list (identical structure to the first) - optional
 *  @memberof DataTable#oApi
 */
function _fnApplyToChildren( fn, an1, an2 )
{
	var index=0, i=0, iLen=an1.length;
	var nNode1, nNode2;

	while ( i < iLen )
	{
		nNode1 = an1[i].firstChild;
		nNode2 = an2 ? an2[i].firstChild : null;
		while ( nNode1 )
		{
			if ( nNode1.nodeType === 1 )
			{
				if ( an2 )
				{
					fn( nNode1, nNode2, index );
				}
				else
				{
					fn( nNode1, index );
				}
				index++;
			}
			nNode1 = nNode1.nextSibling;
			nNode2 = an2 ? nNode2.nextSibling : null;
		}
		i++;
	}
}