/[projects]/misc/horsensspejder-web/jquery/DataTables-1.9.4/media/src/core/core.scrolling.js
ViewVC logotype

Contents of /misc/horsensspejder-web/jquery/DataTables-1.9.4/media/src/core/core.scrolling.js

Parent Directory Parent Directory | Revision Log Revision Log


Revision 2125 - (show annotations) (download) (as text)
Wed Mar 12 19:30:05 2014 UTC (10 years, 3 months ago) by torben
File MIME type: application/javascript
File size: 16228 byte(s)
initial import
1 /**
2 * Add any control elements for the table - specifically scrolling
3 * @param {object} oSettings dataTables settings object
4 * @returns {node} Node to add to the DOM
5 * @memberof DataTable#oApi
6 */
7 function _fnFeatureHtmlTable ( oSettings )
8 {
9 /* Check if scrolling is enabled or not - if not then leave the DOM unaltered */
10 if ( oSettings.oScroll.sX === "" && oSettings.oScroll.sY === "" )
11 {
12 return oSettings.nTable;
13 }
14
15 /*
16 * The HTML structure that we want to generate in this function is:
17 * div - nScroller
18 * div - nScrollHead
19 * div - nScrollHeadInner
20 * table - nScrollHeadTable
21 * thead - nThead
22 * div - nScrollBody
23 * table - oSettings.nTable
24 * thead - nTheadSize
25 * tbody - nTbody
26 * div - nScrollFoot
27 * div - nScrollFootInner
28 * table - nScrollFootTable
29 * tfoot - nTfoot
30 */
31 var
32 nScroller = document.createElement('div'),
33 nScrollHead = document.createElement('div'),
34 nScrollHeadInner = document.createElement('div'),
35 nScrollBody = document.createElement('div'),
36 nScrollFoot = document.createElement('div'),
37 nScrollFootInner = document.createElement('div'),
38 nScrollHeadTable = oSettings.nTable.cloneNode(false),
39 nScrollFootTable = oSettings.nTable.cloneNode(false),
40 nThead = oSettings.nTable.getElementsByTagName('thead')[0],
41 nTfoot = oSettings.nTable.getElementsByTagName('tfoot').length === 0 ? null :
42 oSettings.nTable.getElementsByTagName('tfoot')[0],
43 oClasses = oSettings.oClasses;
44
45 nScrollHead.appendChild( nScrollHeadInner );
46 nScrollFoot.appendChild( nScrollFootInner );
47 nScrollBody.appendChild( oSettings.nTable );
48 nScroller.appendChild( nScrollHead );
49 nScroller.appendChild( nScrollBody );
50 nScrollHeadInner.appendChild( nScrollHeadTable );
51 nScrollHeadTable.appendChild( nThead );
52 if ( nTfoot !== null )
53 {
54 nScroller.appendChild( nScrollFoot );
55 nScrollFootInner.appendChild( nScrollFootTable );
56 nScrollFootTable.appendChild( nTfoot );
57 }
58
59 nScroller.className = oClasses.sScrollWrapper;
60 nScrollHead.className = oClasses.sScrollHead;
61 nScrollHeadInner.className = oClasses.sScrollHeadInner;
62 nScrollBody.className = oClasses.sScrollBody;
63 nScrollFoot.className = oClasses.sScrollFoot;
64 nScrollFootInner.className = oClasses.sScrollFootInner;
65
66 if ( oSettings.oScroll.bAutoCss )
67 {
68 nScrollHead.style.overflow = "hidden";
69 nScrollHead.style.position = "relative";
70 nScrollFoot.style.overflow = "hidden";
71 nScrollBody.style.overflow = "auto";
72 }
73
74 nScrollHead.style.border = "0";
75 nScrollHead.style.width = "100%";
76 nScrollFoot.style.border = "0";
77 nScrollHeadInner.style.width = oSettings.oScroll.sXInner !== "" ?
78 oSettings.oScroll.sXInner : "100%"; /* will be overwritten */
79
80 /* Modify attributes to respect the clones */
81 nScrollHeadTable.removeAttribute('id');
82 nScrollHeadTable.style.marginLeft = "0";
83 oSettings.nTable.style.marginLeft = "0";
84 if ( nTfoot !== null )
85 {
86 nScrollFootTable.removeAttribute('id');
87 nScrollFootTable.style.marginLeft = "0";
88 }
89
90 /* Move caption elements from the body to the header, footer or leave where it is
91 * depending on the configuration. Note that the DTD says there can be only one caption */
92 var nCaption = $(oSettings.nTable).children('caption');
93 if ( nCaption.length > 0 )
94 {
95 nCaption = nCaption[0];
96 if ( nCaption._captionSide === "top" )
97 {
98 nScrollHeadTable.appendChild( nCaption );
99 }
100 else if ( nCaption._captionSide === "bottom" && nTfoot )
101 {
102 nScrollFootTable.appendChild( nCaption );
103 }
104 }
105
106 /*
107 * Sizing
108 */
109 /* When x-scrolling add the width and a scroller to move the header with the body */
110 if ( oSettings.oScroll.sX !== "" )
111 {
112 nScrollHead.style.width = _fnStringToCss( oSettings.oScroll.sX );
113 nScrollBody.style.width = _fnStringToCss( oSettings.oScroll.sX );
114
115 if ( nTfoot !== null )
116 {
117 nScrollFoot.style.width = _fnStringToCss( oSettings.oScroll.sX );
118 }
119
120 /* When the body is scrolled, then we also want to scroll the headers */
121 $(nScrollBody).scroll( function (e) {
122 nScrollHead.scrollLeft = this.scrollLeft;
123
124 if ( nTfoot !== null )
125 {
126 nScrollFoot.scrollLeft = this.scrollLeft;
127 }
128 } );
129 }
130
131 /* When yscrolling, add the height */
132 if ( oSettings.oScroll.sY !== "" )
133 {
134 nScrollBody.style.height = _fnStringToCss( oSettings.oScroll.sY );
135 }
136
137 /* Redraw - align columns across the tables */
138 oSettings.aoDrawCallback.push( {
139 "fn": _fnScrollDraw,
140 "sName": "scrolling"
141 } );
142
143 /* Infinite scrolling event handlers */
144 if ( oSettings.oScroll.bInfinite )
145 {
146 $(nScrollBody).scroll( function() {
147 /* Use a blocker to stop scrolling from loading more data while other data is still loading */
148 if ( !oSettings.bDrawing && $(this).scrollTop() !== 0 )
149 {
150 /* Check if we should load the next data set */
151 if ( $(this).scrollTop() + $(this).height() >
152 $(oSettings.nTable).height() - oSettings.oScroll.iLoadGap )
153 {
154 /* Only do the redraw if we have to - we might be at the end of the data */
155 if ( oSettings.fnDisplayEnd() < oSettings.fnRecordsDisplay() )
156 {
157 _fnPageChange( oSettings, 'next' );
158 _fnCalculateEnd( oSettings );
159 _fnDraw( oSettings );
160 }
161 }
162 }
163 } );
164 }
165
166 oSettings.nScrollHead = nScrollHead;
167 oSettings.nScrollFoot = nScrollFoot;
168
169 return nScroller;
170 }
171
172
173 /**
174 * Update the various tables for resizing. It's a bit of a pig this function, but
175 * basically the idea to:
176 * 1. Re-create the table inside the scrolling div
177 * 2. Take live measurements from the DOM
178 * 3. Apply the measurements
179 * 4. Clean up
180 * @param {object} o dataTables settings object
181 * @returns {node} Node to add to the DOM
182 * @memberof DataTable#oApi
183 */
184 function _fnScrollDraw ( o )
185 {
186 var
187 nScrollHeadInner = o.nScrollHead.getElementsByTagName('div')[0],
188 nScrollHeadTable = nScrollHeadInner.getElementsByTagName('table')[0],
189 nScrollBody = o.nTable.parentNode,
190 i, iLen, j, jLen, anHeadToSize, anHeadSizers, anFootSizers, anFootToSize, oStyle, iVis,
191 nTheadSize, nTfootSize,
192 iWidth, aApplied=[], aAppliedFooter=[], iSanityWidth,
193 nScrollFootInner = (o.nTFoot !== null) ? o.nScrollFoot.getElementsByTagName('div')[0] : null,
194 nScrollFootTable = (o.nTFoot !== null) ? nScrollFootInner.getElementsByTagName('table')[0] : null,
195 ie67 = o.oBrowser.bScrollOversize,
196 zeroOut = function(nSizer) {
197 oStyle = nSizer.style;
198 oStyle.paddingTop = "0";
199 oStyle.paddingBottom = "0";
200 oStyle.borderTopWidth = "0";
201 oStyle.borderBottomWidth = "0";
202 oStyle.height = 0;
203 };
204
205 /*
206 * 1. Re-create the table inside the scrolling div
207 */
208
209 /* Remove the old minimised thead and tfoot elements in the inner table */
210 $(o.nTable).children('thead, tfoot').remove();
211
212 /* Clone the current header and footer elements and then place it into the inner table */
213 nTheadSize = $(o.nTHead).clone()[0];
214 o.nTable.insertBefore( nTheadSize, o.nTable.childNodes[0] );
215 anHeadToSize = o.nTHead.getElementsByTagName('tr');
216 anHeadSizers = nTheadSize.getElementsByTagName('tr');
217
218 if ( o.nTFoot !== null )
219 {
220 nTfootSize = $(o.nTFoot).clone()[0];
221 o.nTable.insertBefore( nTfootSize, o.nTable.childNodes[1] );
222 anFootToSize = o.nTFoot.getElementsByTagName('tr');
223 anFootSizers = nTfootSize.getElementsByTagName('tr');
224 }
225
226 /*
227 * 2. Take live measurements from the DOM - do not alter the DOM itself!
228 */
229
230 /* Remove old sizing and apply the calculated column widths
231 * Get the unique column headers in the newly created (cloned) header. We want to apply the
232 * calculated sizes to this header
233 */
234 if ( o.oScroll.sX === "" )
235 {
236 nScrollBody.style.width = '100%';
237 nScrollHeadInner.parentNode.style.width = '100%';
238 }
239
240 var nThs = _fnGetUniqueThs( o, nTheadSize );
241 for ( i=0, iLen=nThs.length ; i<iLen ; i++ )
242 {
243 iVis = _fnVisibleToColumnIndex( o, i );
244 nThs[i].style.width = o.aoColumns[iVis].sWidth;
245 }
246
247 if ( o.nTFoot !== null )
248 {
249 _fnApplyToChildren( function(n) {
250 n.style.width = "";
251 }, anFootSizers );
252 }
253
254 // If scroll collapse is enabled, when we put the headers back into the body for sizing, we
255 // will end up forcing the scrollbar to appear, making our measurements wrong for when we
256 // then hide it (end of this function), so add the header height to the body scroller.
257 if ( o.oScroll.bCollapse && o.oScroll.sY !== "" )
258 {
259 nScrollBody.style.height = (nScrollBody.offsetHeight + o.nTHead.offsetHeight)+"px";
260 }
261
262 /* Size the table as a whole */
263 iSanityWidth = $(o.nTable).outerWidth();
264 if ( o.oScroll.sX === "" )
265 {
266 /* No x scrolling */
267 o.nTable.style.width = "100%";
268
269 /* I know this is rubbish - but IE7 will make the width of the table when 100% include
270 * the scrollbar - which is shouldn't. When there is a scrollbar we need to take this
271 * into account.
272 */
273 if ( ie67 && ($('tbody', nScrollBody).height() > nScrollBody.offsetHeight ||
274 $(nScrollBody).css('overflow-y') == "scroll") )
275 {
276 o.nTable.style.width = _fnStringToCss( $(o.nTable).outerWidth() - o.oScroll.iBarWidth);
277 }
278 }
279 else
280 {
281 if ( o.oScroll.sXInner !== "" )
282 {
283 /* x scroll inner has been given - use it */
284 o.nTable.style.width = _fnStringToCss(o.oScroll.sXInner);
285 }
286 else if ( iSanityWidth == $(nScrollBody).width() &&
287 $(nScrollBody).height() < $(o.nTable).height() )
288 {
289 /* There is y-scrolling - try to take account of the y scroll bar */
290 o.nTable.style.width = _fnStringToCss( iSanityWidth-o.oScroll.iBarWidth );
291 if ( $(o.nTable).outerWidth() > iSanityWidth-o.oScroll.iBarWidth )
292 {
293 /* Not possible to take account of it */
294 o.nTable.style.width = _fnStringToCss( iSanityWidth );
295 }
296 }
297 else
298 {
299 /* All else fails */
300 o.nTable.style.width = _fnStringToCss( iSanityWidth );
301 }
302 }
303
304 /* Recalculate the sanity width - now that we've applied the required width, before it was
305 * a temporary variable. This is required because the column width calculation is done
306 * before this table DOM is created.
307 */
308 iSanityWidth = $(o.nTable).outerWidth();
309
310 /* We want the hidden header to have zero height, so remove padding and borders. Then
311 * set the width based on the real headers
312 */
313
314 // Apply all styles in one pass. Invalidates layout only once because we don't read any
315 // DOM properties.
316 _fnApplyToChildren( zeroOut, anHeadSizers );
317
318 // Read all widths in next pass. Forces layout only once because we do not change
319 // any DOM properties.
320 _fnApplyToChildren( function(nSizer) {
321 aApplied.push( _fnStringToCss( $(nSizer).width() ) );
322 }, anHeadSizers );
323
324 // Apply all widths in final pass. Invalidates layout only once because we do not
325 // read any DOM properties.
326 _fnApplyToChildren( function(nToSize, i) {
327 nToSize.style.width = aApplied[i];
328 }, anHeadToSize );
329
330 $(anHeadSizers).height(0);
331
332 /* Same again with the footer if we have one */
333 if ( o.nTFoot !== null )
334 {
335 _fnApplyToChildren( zeroOut, anFootSizers );
336
337 _fnApplyToChildren( function(nSizer) {
338 aAppliedFooter.push( _fnStringToCss( $(nSizer).width() ) );
339 }, anFootSizers );
340
341 _fnApplyToChildren( function(nToSize, i) {
342 nToSize.style.width = aAppliedFooter[i];
343 }, anFootToSize );
344
345 $(anFootSizers).height(0);
346 }
347
348 /*
349 * 3. Apply the measurements
350 */
351
352 /* "Hide" the header and footer that we used for the sizing. We want to also fix their width
353 * to what they currently are
354 */
355 _fnApplyToChildren( function(nSizer, i) {
356 nSizer.innerHTML = "";
357 nSizer.style.width = aApplied[i];
358 }, anHeadSizers );
359
360 if ( o.nTFoot !== null )
361 {
362 _fnApplyToChildren( function(nSizer, i) {
363 nSizer.innerHTML = "";
364 nSizer.style.width = aAppliedFooter[i];
365 }, anFootSizers );
366 }
367
368 /* Sanity check that the table is of a sensible width. If not then we are going to get
369 * misalignment - try to prevent this by not allowing the table to shrink below its min width
370 */
371 if ( $(o.nTable).outerWidth() < iSanityWidth )
372 {
373 /* The min width depends upon if we have a vertical scrollbar visible or not */
374 var iCorrection = ((nScrollBody.scrollHeight > nScrollBody.offsetHeight ||
375 $(nScrollBody).css('overflow-y') == "scroll")) ?
376 iSanityWidth+o.oScroll.iBarWidth : iSanityWidth;
377
378 /* IE6/7 are a law unto themselves... */
379 if ( ie67 && (nScrollBody.scrollHeight >
380 nScrollBody.offsetHeight || $(nScrollBody).css('overflow-y') == "scroll") )
381 {
382 o.nTable.style.width = _fnStringToCss( iCorrection-o.oScroll.iBarWidth );
383 }
384
385 /* Apply the calculated minimum width to the table wrappers */
386 nScrollBody.style.width = _fnStringToCss( iCorrection );
387 o.nScrollHead.style.width = _fnStringToCss( iCorrection );
388
389 if ( o.nTFoot !== null )
390 {
391 o.nScrollFoot.style.width = _fnStringToCss( iCorrection );
392 }
393
394 /* And give the user a warning that we've stopped the table getting too small */
395 if ( o.oScroll.sX === "" )
396 {
397 _fnLog( o, 1, "The table cannot fit into the current element which will cause column"+
398 " misalignment. The table has been drawn at its minimum possible width." );
399 }
400 else if ( o.oScroll.sXInner !== "" )
401 {
402 _fnLog( o, 1, "The table cannot fit into the current element which will cause column"+
403 " misalignment. Increase the sScrollXInner value or remove it to allow automatic"+
404 " calculation" );
405 }
406 }
407 else
408 {
409 nScrollBody.style.width = _fnStringToCss( '100%' );
410 o.nScrollHead.style.width = _fnStringToCss( '100%' );
411
412 if ( o.nTFoot !== null )
413 {
414 o.nScrollFoot.style.width = _fnStringToCss( '100%' );
415 }
416 }
417
418
419 /*
420 * 4. Clean up
421 */
422 if ( o.oScroll.sY === "" )
423 {
424 /* IE7< puts a vertical scrollbar in place (when it shouldn't be) due to subtracting
425 * the scrollbar height from the visible display, rather than adding it on. We need to
426 * set the height in order to sort this. Don't want to do it in any other browsers.
427 */
428 if ( ie67 )
429 {
430 nScrollBody.style.height = _fnStringToCss( o.nTable.offsetHeight+o.oScroll.iBarWidth );
431 }
432 }
433
434 if ( o.oScroll.sY !== "" && o.oScroll.bCollapse )
435 {
436 nScrollBody.style.height = _fnStringToCss( o.oScroll.sY );
437
438 var iExtra = (o.oScroll.sX !== "" && o.nTable.offsetWidth > nScrollBody.offsetWidth) ?
439 o.oScroll.iBarWidth : 0;
440 if ( o.nTable.offsetHeight < nScrollBody.offsetHeight )
441 {
442 nScrollBody.style.height = _fnStringToCss( o.nTable.offsetHeight+iExtra );
443 }
444 }
445
446 /* Finally set the width's of the header and footer tables */
447 var iOuterWidth = $(o.nTable).outerWidth();
448 nScrollHeadTable.style.width = _fnStringToCss( iOuterWidth );
449 nScrollHeadInner.style.width = _fnStringToCss( iOuterWidth );
450
451 // Figure out if there are scrollbar present - if so then we need a the header and footer to
452 // provide a bit more space to allow "overflow" scrolling (i.e. past the scrollbar)
453 var bScrolling = $(o.nTable).height() > nScrollBody.clientHeight || $(nScrollBody).css('overflow-y') == "scroll";
454 nScrollHeadInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px";
455
456 if ( o.nTFoot !== null )
457 {
458 nScrollFootTable.style.width = _fnStringToCss( iOuterWidth );
459 nScrollFootInner.style.width = _fnStringToCss( iOuterWidth );
460 nScrollFootInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px";
461 }
462
463 /* Adjust the position of the header in case we loose the y-scrollbar */
464 $(nScrollBody).scroll();
465
466 /* If sorting or filtering has occurred, jump the scrolling back to the top */
467 if ( o.bSorted || o.bFiltered )
468 {
469 nScrollBody.scrollTop = 0;
470 }
471 }
472
473
474 /**
475 * Apply a given function to the display child nodes of an element array (typically
476 * TD children of TR rows
477 * @param {function} fn Method to apply to the objects
478 * @param array {nodes} an1 List of elements to look through for display children
479 * @param array {nodes} an2 Another list (identical structure to the first) - optional
480 * @memberof DataTable#oApi
481 */
482 function _fnApplyToChildren( fn, an1, an2 )
483 {
484 var index=0, i=0, iLen=an1.length;
485 var nNode1, nNode2;
486
487 while ( i < iLen )
488 {
489 nNode1 = an1[i].firstChild;
490 nNode2 = an2 ? an2[i].firstChild : null;
491 while ( nNode1 )
492 {
493 if ( nNode1.nodeType === 1 )
494 {
495 if ( an2 )
496 {
497 fn( nNode1, nNode2, index );
498 }
499 else
500 {
501 fn( nNode1, index );
502 }
503 index++;
504 }
505 nNode1 = nNode1.nextSibling;
506 nNode2 = an2 ? nNode2.nextSibling : null;
507 }
508 i++;
509 }
510 }

  ViewVC Help
Powered by ViewVC 1.1.20