--- /dev/null
+/**
+ * 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] );
+ anHeadToSize = o.nTHead.getElementsByTagName('tr');
+ anHeadSizers = nTheadSize.getElementsByTagName('tr');
+
+ if ( o.nTFoot !== null )
+ {
+ nTfootSize = $(o.nTFoot).clone()[0];
+ o.nTable.insertBefore( nTfootSize, o.nTable.childNodes[1] );
+ anFootToSize = o.nTFoot.getElementsByTagName('tr');
+ anFootSizers = nTfootSize.getElementsByTagName('tr');
+ }
+
+ /*
+ * 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 = "";
+ }, anFootSizers );
+ }
+
+ // 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
+ */
+
+ // 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 )
+ {
+ _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++;
+ }
+}
+
git://source.jalview.org / proteocache.git / blobdiff