webapp/resources/datatables-1.9.4/media/src/core/core.sizing.js

   1 /**
   2  * Convert a CSS unit width to pixels (e.g. 2em)
   3  *  @param {string} sWidth width to be converted
   4  *  @param {node} nParent parent to get the with for (required for relative widths) - optional
   5  *  @returns {int} iWidth width in pixels
   6  *  @memberof DataTable#oApi
   7  */
   8 function _fnConvertToWidth ( sWidth, nParent )
   9 {
  10         if ( !sWidth || sWidth === null || sWidth === '' )
  11         {
  12                 return 0;
  13         }
  14
  15         if ( !nParent )
  16         {
  17                 nParent = document.body;
  18         }
  19
  20         var iWidth;
  21         var nTmp = document.createElement( "div" );
  22         nTmp.style.width = _fnStringToCss( sWidth );
  23
  24         nParent.appendChild( nTmp );
  25         iWidth = nTmp.offsetWidth;
  26         nParent.removeChild( nTmp );
  27
  28         return ( iWidth );
  29 }
  30
  31
  32 /**
  33  * Calculate the width of columns for the table
  34  *  @param {object} oSettings dataTables settings object
  35  *  @memberof DataTable#oApi
  36  */
  37 function _fnCalculateColumnWidths ( oSettings )
  38 {
  39         var iTableWidth = oSettings.nTable.offsetWidth;
  40         var iUserInputs = 0;
  41         var iTmpWidth;
  42         var iVisibleColumns = 0;
  43         var iColums = oSettings.aoColumns.length;
  44         var i, iIndex, iCorrector, iWidth;
  45         var oHeaders = $('th', oSettings.nTHead);
  46         var widthAttr = oSettings.nTable.getAttribute('width');
  47         var nWrapper = oSettings.nTable.parentNode;
  48
  49         /* Convert any user input sizes into pixel sizes */
  50         for ( i=0 ; i<iColums ; i++ )
  51         {
  52                 if ( oSettings.aoColumns[i].bVisible )
  53                 {
  54                         iVisibleColumns++;
  55
  56                         if ( oSettings.aoColumns[i].sWidth !== null )
  57                         {
  58                                 iTmpWidth = _fnConvertToWidth( oSettings.aoColumns[i].sWidthOrig,
  59                                         nWrapper );
  60                                 if ( iTmpWidth !== null )
  61                                 {
  62                                         oSettings.aoColumns[i].sWidth = _fnStringToCss( iTmpWidth );
  63                                 }
  64
  65                                 iUserInputs++;
  66                         }
  67                 }
  68         }
  69
  70         /* If the number of columns in the DOM equals the number that we have to process in
  71          * DataTables, then we can use the offsets that are created by the web-browser. No custom
  72          * sizes can be set in order for this to happen, nor scrolling used
  73          */
  74         if ( iColums == oHeaders.length && iUserInputs === 0 && iVisibleColumns == iColums &&
  75                 oSettings.oScroll.sX === "" && oSettings.oScroll.sY === "" )
  76         {
  77                 for ( i=0 ; i<oSettings.aoColumns.length ; i++ )
  78                 {
  79                         iTmpWidth = $(oHeaders[i]).width();
  80                         if ( iTmpWidth !== null )
  81                         {
  82                                 oSettings.aoColumns[i].sWidth = _fnStringToCss( iTmpWidth );
  83                         }
  84                 }
  85         }
  86         else
  87         {
  88                 /* Otherwise we are going to have to do some calculations to get the width of each column.
  89                  * Construct a 1 row table with the widest node in the data, and any user defined widths,
  90                  * then insert it into the DOM and allow the browser to do all the hard work of
  91                  * calculating table widths.
  92                  */
  93                 var
  94                         nCalcTmp = oSettings.nTable.cloneNode( false ),
  95                         nTheadClone = oSettings.nTHead.cloneNode(true),
  96                         nBody = document.createElement( 'tbody' ),
  97                         nTr = document.createElement( 'tr' ),
  98                         nDivSizing;
  99
 100                 nCalcTmp.removeAttribute( "id" );
 101                 nCalcTmp.appendChild( nTheadClone );
 102                 if ( oSettings.nTFoot !== null )
 103                 {
 104                         nCalcTmp.appendChild( oSettings.nTFoot.cloneNode(true) );
 105                         _fnApplyToChildren( function(n) {
 106                                 n.style.width = "";
 107                         }, nCalcTmp.getElementsByTagName('tr') );
 108                 }
 109
 110                 nCalcTmp.appendChild( nBody );
 111                 nBody.appendChild( nTr );
 112
 113                 /* Remove any sizing that was previously applied by the styles */
 114                 var jqColSizing = $('thead th', nCalcTmp);
 115                 if ( jqColSizing.length === 0 )
 116                 {
 117                         jqColSizing = $('tbody tr:eq(0)>td', nCalcTmp);
 118                 }
 119
 120                 /* Apply custom sizing to the cloned header */
 121                 var nThs = _fnGetUniqueThs( oSettings, nTheadClone );
 122                 iCorrector = 0;
 123                 for ( i=0 ; i<iColums ; i++ )
 124                 {
 125                         var oColumn = oSettings.aoColumns[i];
 126                         if ( oColumn.bVisible && oColumn.sWidthOrig !== null && oColumn.sWidthOrig !== "" )
 127                         {
 128                                 nThs[i-iCorrector].style.width = _fnStringToCss( oColumn.sWidthOrig );
 129                         }
 130                         else if ( oColumn.bVisible )
 131                         {
 132                                 nThs[i-iCorrector].style.width = "";
 133                         }
 134                         else
 135                         {
 136                                 iCorrector++;
 137                         }
 138                 }
 139
 140                 /* Find the biggest td for each column and put it into the table */
 141                 for ( i=0 ; i<iColums ; i++ )
 142                 {
 143                         if ( oSettings.aoColumns[i].bVisible )
 144                         {
 145                                 var nTd = _fnGetWidestNode( oSettings, i );
 146                                 if ( nTd !== null )
 147                                 {
 148                                         nTd = nTd.cloneNode(true);
 149                                         if ( oSettings.aoColumns[i].sContentPadding !== "" )
 150                                         {
 151                                                 nTd.innerHTML += oSettings.aoColumns[i].sContentPadding;
 152                                         }
 153                                         nTr.appendChild( nTd );
 154                                 }
 155                         }
 156                 }
 157
 158                 /* Build the table and 'display' it */
 159                 nWrapper.appendChild( nCalcTmp );
 160
 161                 /* When scrolling (X or Y) we want to set the width of the table as appropriate. However,
 162                  * when not scrolling leave the table width as it is. This results in slightly different,
 163                  * but I think correct behaviour
 164                  */
 165                 if ( oSettings.oScroll.sX !== "" && oSettings.oScroll.sXInner !== "" )
 166                 {
 167                         nCalcTmp.style.width = _fnStringToCss(oSettings.oScroll.sXInner);
 168                 }
 169                 else if ( oSettings.oScroll.sX !== "" )
 170                 {
 171                         nCalcTmp.style.width = "";
 172                         if ( $(nCalcTmp).width() < nWrapper.offsetWidth )
 173                         {
 174                                 nCalcTmp.style.width = _fnStringToCss( nWrapper.offsetWidth );
 175                         }
 176                 }
 177                 else if ( oSettings.oScroll.sY !== "" )
 178                 {
 179                         nCalcTmp.style.width = _fnStringToCss( nWrapper.offsetWidth );
 180                 }
 181                 else if ( widthAttr )
 182                 {
 183                         nCalcTmp.style.width = _fnStringToCss( widthAttr );
 184                 }
 185                 nCalcTmp.style.visibility = "hidden";
 186
 187                 /* Scrolling considerations */
 188                 _fnScrollingWidthAdjust( oSettings, nCalcTmp );
 189
 190                 /* Read the width's calculated by the browser and store them for use by the caller. We
 191                  * first of all try to use the elements in the body, but it is possible that there are
 192                  * no elements there, under which circumstances we use the header elements
 193                  */
 194                 var oNodes = $("tbody tr:eq(0)", nCalcTmp).children();
 195                 if ( oNodes.length === 0 )
 196                 {
 197                         oNodes = _fnGetUniqueThs( oSettings, $('thead', nCalcTmp)[0] );
 198                 }
 199
 200                 /* Browsers need a bit of a hand when a width is assigned to any columns when
 201                  * x-scrolling as they tend to collapse the table to the min-width, even if
 202                  * we sent the column widths. So we need to keep track of what the table width
 203                  * should be by summing the user given values, and the automatic values
 204                  */
 205                 if ( oSettings.oScroll.sX !== "" )
 206                 {
 207                         var iTotal = 0;
 208                         iCorrector = 0;
 209                         for ( i=0 ; i<oSettings.aoColumns.length ; i++ )
 210                         {
 211                                 if ( oSettings.aoColumns[i].bVisible )
 212                                 {
 213                                         if ( oSettings.aoColumns[i].sWidthOrig === null )
 214                                         {
 215                                                 iTotal += $(oNodes[iCorrector]).outerWidth();
 216                                         }
 217                                         else
 218                                         {
 219                                                 iTotal += parseInt(oSettings.aoColumns[i].sWidth.replace('px',''), 10) +
 220                                                         ($(oNodes[iCorrector]).outerWidth() - $(oNodes[iCorrector]).width());
 221                                         }
 222                                         iCorrector++;
 223                                 }
 224                         }
 225
 226                         nCalcTmp.style.width = _fnStringToCss( iTotal );
 227                         oSettings.nTable.style.width = _fnStringToCss( iTotal );
 228                 }
 229
 230                 iCorrector = 0;
 231                 for ( i=0 ; i<oSettings.aoColumns.length ; i++ )
 232                 {
 233                         if ( oSettings.aoColumns[i].bVisible )
 234                         {
 235                                 iWidth = $(oNodes[iCorrector]).width();
 236                                 if ( iWidth !== null && iWidth > 0 )
 237                                 {
 238                                         oSettings.aoColumns[i].sWidth = _fnStringToCss( iWidth );
 239                                 }
 240                                 iCorrector++;
 241                         }
 242                 }
 243
 244                 var cssWidth = $(nCalcTmp).css('width');
 245                 oSettings.nTable.style.width = (cssWidth.indexOf('%') !== -1) ?
 246                     cssWidth : _fnStringToCss( $(nCalcTmp).outerWidth() );
 247                 nCalcTmp.parentNode.removeChild( nCalcTmp );
 248         }
 249
 250         if ( widthAttr )
 251         {
 252                 oSettings.nTable.style.width = _fnStringToCss( widthAttr );
 253         }
 254 }
 255
 256
 257 /**
 258  * Adjust a table's width to take account of scrolling
 259  *  @param {object} oSettings dataTables settings object
 260  *  @param {node} n table node
 261  *  @memberof DataTable#oApi
 262  */
 263 function _fnScrollingWidthAdjust ( oSettings, n )
 264 {
 265         if ( oSettings.oScroll.sX === "" && oSettings.oScroll.sY !== "" )
 266         {
 267                 /* When y-scrolling only, we want to remove the width of the scroll bar so the table
 268                  * + scroll bar will fit into the area avaialble.
 269                  */
 270                 var iOrigWidth = $(n).width();
 271                 n.style.width = _fnStringToCss( $(n).outerWidth()-oSettings.oScroll.iBarWidth );
 272         }
 273         else if ( oSettings.oScroll.sX !== "" )
 274         {
 275                 /* When x-scrolling both ways, fix the table at it's current size, without adjusting */
 276                 n.style.width = _fnStringToCss( $(n).outerWidth() );
 277         }
 278 }
 279
 280
 281 /**
 282  * Get the widest node
 283  *  @param {object} oSettings dataTables settings object
 284  *  @param {int} iCol column of interest
 285  *  @returns {node} widest table node
 286  *  @memberof DataTable#oApi
 287  */
 288 function _fnGetWidestNode( oSettings, iCol )
 289 {
 290         var iMaxIndex = _fnGetMaxLenString( oSettings, iCol );
 291         if ( iMaxIndex < 0 )
 292         {
 293                 return null;
 294         }
 295
 296         if ( oSettings.aoData[iMaxIndex].nTr === null )
 297         {
 298                 var n = document.createElement('td');
 299                 n.innerHTML = _fnGetCellData( oSettings, iMaxIndex, iCol, '' );
 300                 return n;
 301         }
 302         return _fnGetTdNodes(oSettings, iMaxIndex)[iCol];
 303 }
 304
 305
 306 /**
 307  * Get the maximum strlen for each data column
 308  *  @param {object} oSettings dataTables settings object
 309  *  @param {int} iCol column of interest
 310  *  @returns {string} max string length for each column
 311  *  @memberof DataTable#oApi
 312  */
 313 function _fnGetMaxLenString( oSettings, iCol )
 314 {
 315         var iMax = -1;
 316         var iMaxIndex = -1;
 317
 318         for ( var i=0 ; i<oSettings.aoData.length ; i++ )
 319         {
 320                 var s = _fnGetCellData( oSettings, i, iCol, 'display' )+"";
 321                 s = s.replace( /<.*?>/g, "" );
 322                 if ( s.length > iMax )
 323                 {
 324                         iMax = s.length;
 325                         iMaxIndex = i;
 326                 }
 327         }
 328
 329         return iMaxIndex;
 330 }
 331
 332
 333 /**
 334  * Append a CSS unit (only if required) to a string
 335  *  @param {array} aArray1 first array
 336  *  @param {array} aArray2 second array
 337  *  @returns {int} 0 if match, 1 if length is different, 2 if no match
 338  *  @memberof DataTable#oApi
 339  */
 340 function _fnStringToCss( s )
 341 {
 342         if ( s === null )
 343         {
 344                 return "0px";
 345         }
 346
 347         if ( typeof s == 'number' )
 348         {
 349                 if ( s < 0 )
 350                 {
 351                         return "0px";
 352                 }
 353                 return s+"px";
 354         }
 355
 356         /* Check if the last character is not 0-9 */
 357         var c = s.charCodeAt( s.length-1 );
 358         if (c < 0x30 || c > 0x39)
 359         {
 360                 return s;
 361         }
 362         return s+"px";
 363 }
 364
 365
 366 /**
 367  * Get the width of a scroll bar in this browser being used
 368  *  @returns {int} width in pixels
 369  *  @memberof DataTable#oApi
 370  */
 371 function _fnScrollBarWidth ()
 372 {
 373         var inner = document.createElement('p');
 374         var style = inner.style;
 375         style.width = "100%";
 376         style.height = "200px";
 377         style.padding = "0px";
 378
 379         var outer = document.createElement('div');
 380         style = outer.style;
 381         style.position = "absolute";
 382         style.top = "0px";
 383         style.left = "0px";
 384         style.visibility = "hidden";
 385         style.width = "200px";
 386         style.height = "150px";
 387         style.padding = "0px";
 388         style.overflow = "hidden";
 389         outer.appendChild(inner);
 390
 391         document.body.appendChild(outer);
 392         var w1 = inner.offsetWidth;
 393         outer.style.overflow = 'scroll';
 394         var w2 = inner.offsetWidth;
 395         if ( w1 == w2 )
 396         {
 397                 w2 = outer.clientWidth;
 398         }
 399
 400         document.body.removeChild(outer);
 401         return (w1 - w2);
 402 }
 403