ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/plugins/datatables/extensions/Responsive/js/dataTables.responsive.js

   1 /*! Responsive 1.0.6
   2  * 2014-2015 SpryMedia Ltd - datatables.net/license
   3  */
   4
   5 /**
   6  * @summary     Responsive
   7  * @description Responsive tables plug-in for DataTables
   8  * @version     1.0.6
   9  * @file        dataTables.responsive.js
  10  * @author      SpryMedia Ltd (www.sprymedia.co.uk)
  11  * @contact     www.sprymedia.co.uk/contact
  12  * @copyright   Copyright 2014-2015 SpryMedia Ltd.
  13  *
  14  * This source file is free software, available under the following license:
  15  *   MIT license - http://datatables.net/license/mit
  16  *
  17  * This source file is distributed in the hope that it will be useful, but
  18  * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  19  * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
  20  *
  21  * For details please refer to: http://www.datatables.net
  22  */
  23
  24 (function(window, document, undefined) {
  25
  26
  27 var factory = function( $, DataTable ) {
  28 "use strict";
  29
  30 /**
  31  * Responsive is a plug-in for the DataTables library that makes use of
  32  * DataTables' ability to change the visibility of columns, changing the
  33  * visibility of columns so the displayed columns fit into the table container.
  34  * The end result is that complex tables will be dynamically adjusted to fit
  35  * into the viewport, be it on a desktop, tablet or mobile browser.
  36  *
  37  * Responsive for DataTables has two modes of operation, which can used
  38  * individually or combined:
  39  *
  40  * * Class name based control - columns assigned class names that match the
  41  *   breakpoint logic can be shown / hidden as required for each breakpoint.
  42  * * Automatic control - columns are automatically hidden when there is no
  43  *   room left to display them. Columns removed from the right.
  44  *
  45  * In additional to column visibility control, Responsive also has built into
  46  * options to use DataTables' child row display to show / hide the information
  47  * from the table that has been hidden. There are also two modes of operation
  48  * for this child row display:
  49  *
  50  * * Inline - when the control element that the user can use to show / hide
  51  *   child rows is displayed inside the first column of the table.
  52  * * Column - where a whole column is dedicated to be the show / hide control.
  53  *
  54  * Initialisation of Responsive is performed by:
  55  *
  56  * * Adding the class `responsive` or `dt-responsive` to the table. In this case
  57  *   Responsive will automatically be initialised with the default configuration
  58  *   options when the DataTable is created.
  59  * * Using the `responsive` option in the DataTables configuration options. This
  60  *   can also be used to specify the configuration options, or simply set to
  61  *   `true` to use the defaults.
  62  *
  63  *  @class
  64  *  @param {object} settings DataTables settings object for the host table
  65  *  @param {object} [opts] Configuration options
  66  *  @requires jQuery 1.7+
  67  *  @requires DataTables 1.10.1+
  68  *
  69  *  @example
  70  *      $('#example').DataTable( {
  71  *        responsive: true
  72  *      } );
  73  *    } );
  74  */
  75 var Responsive = function ( settings, opts ) {
  76         // Sanity check that we are using DataTables 1.10 or newer
  77         if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.1' ) ) {
  78                 throw 'DataTables Responsive requires DataTables 1.10.1 or newer';
  79         }
  80
  81         this.s = {
  82                 dt: new DataTable.Api( settings ),
  83                 columns: []
  84         };
  85
  86         // Check if responsive has already been initialised on this table
  87         if ( this.s.dt.settings()[0].responsive ) {
  88                 return;
  89         }
  90
  91         // details is an object, but for simplicity the user can give it as a string
  92         if ( opts && typeof opts.details === 'string' ) {
  93                 opts.details = { type: opts.details };
  94         }
  95
  96         this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
  97         settings.responsive = this;
  98         this._constructor();
  99 };
 100
 101 Responsive.prototype = {
 102         /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 103          * Constructor
 104          */
 105
 106         /**
 107          * Initialise the Responsive instance
 108          *
 109          * @private
 110          */
 111         _constructor: function ()
 112         {
 113                 var that = this;
 114                 var dt = this.s.dt;
 115
 116                 dt.settings()[0]._responsive = this;
 117
 118                 // Use DataTables' private throttle function to avoid processor thrashing
 119                 $(window).on( 'resize.dtr orientationchange.dtr', dt.settings()[0].oApi._fnThrottle( function () {
 120                         that._resize();
 121                 } ) );
 122
 123                 // Destroy event handler
 124                 dt.on( 'destroy.dtr', function () {
 125                         $(window).off( 'resize.dtr orientationchange.dtr draw.dtr' );
 126                 } );
 127
 128                 // Reorder the breakpoints array here in case they have been added out
 129                 // of order
 130                 this.c.breakpoints.sort( function (a, b) {
 131                         return a.width < b.width ? 1 :
 132                                 a.width > b.width ? -1 : 0;
 133                 } );
 134
 135                 // Determine which columns are already hidden, and should therefore
 136                 // remain hidden. todo - should this be done? See thread 22677
 137                 //
 138                 // this.s.alwaysHidden = dt.columns(':hidden').indexes();
 139
 140                 this._classLogic();
 141                 this._resizeAuto();
 142
 143                 // Details handler
 144                 var details = this.c.details;
 145                 if ( details.type ) {
 146                         that._detailsInit();
 147                         this._detailsVis();
 148
 149                         dt.on( 'column-visibility.dtr', function () {
 150                                 that._detailsVis();
 151                         } );
 152
 153                         // Redraw the details box on each draw. This is used until
 154                         // DataTables implements a native `updated` event for rows
 155                         dt.on( 'draw.dtr', function () {
 156                                 dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
 157                                         var row = dt.row( idx );
 158
 159                                         if ( row.child.isShown() ) {
 160                                                 var info = that.c.details.renderer( dt, idx );
 161                                                 row.child( info, 'child' ).show();
 162                                         }
 163                                 } );
 164                         } );
 165
 166                         $(dt.table().node()).addClass( 'dtr-'+details.type );
 167                 }
 168
 169                 // First pass - draw the table for the current viewport size
 170                 this._resize();
 171         },
 172
 173
 174         /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 175          * Private methods
 176          */
 177
 178         /**
 179          * Calculate the visibility for the columns in a table for a given
 180          * breakpoint. The result is pre-determined based on the class logic if
 181          * class names are used to control all columns, but the width of the table
 182          * is also used if there are columns which are to be automatically shown
 183          * and hidden.
 184          *
 185          * @param  {string} breakpoint Breakpoint name to use for the calculation
 186          * @return {array} Array of boolean values initiating the visibility of each
 187          *   column.
 188          *  @private
 189          */
 190         _columnsVisiblity: function ( breakpoint )
 191         {
 192                 var dt = this.s.dt;
 193                 var columns = this.s.columns;
 194                 var i, ien;
 195
 196                 // Class logic - determine which columns are in this breakpoint based
 197                 // on the classes. If no class control (i.e. `auto`) then `-` is used
 198                 // to indicate this to the rest of the function
 199                 var display = $.map( columns, function ( col ) {
 200                         return col.auto && col.minWidth === null ?
 201                                 false :
 202                                 col.auto === true ?
 203                                         '-' :
 204                                         $.inArray( breakpoint, col.includeIn ) !== -1;
 205                 } );
 206
 207                 // Auto column control - first pass: how much width is taken by the
 208                 // ones that must be included from the non-auto columns
 209                 var requiredWidth = 0;
 210                 for ( i=0, ien=display.length ; i<ien ; i++ ) {
 211                         if ( display[i] === true ) {
 212                                 requiredWidth += columns[i].minWidth;
 213                         }
 214                 }
 215
 216                 // Second pass, use up any remaining width for other columns. For
 217                 // scrolling tables we need to subtract the width of the scrollbar. It
 218                 // may not be requires which makes this sub-optimal, but it would
 219                 // require another full redraw to make complete use of those extra few
 220                 // pixels
 221                 var scrolling = dt.settings()[0].oScroll;
 222                 var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
 223                 var widthAvailable = dt.table().container().offsetWidth - bar;
 224                 var usedWidth = widthAvailable - requiredWidth;
 225
 226                 // Control column needs to always be included. This makes it sub-
 227                 // optimal in terms of using the available with, but to stop layout
 228                 // thrashing or overflow. Also we need to account for the control column
 229                 // width first so we know how much width is available for the other
 230                 // columns, since the control column might not be the first one shown
 231                 for ( i=0, ien=display.length ; i<ien ; i++ ) {
 232                         if ( columns[i].control ) {
 233                                 usedWidth -= columns[i].minWidth;
 234                         }
 235                 }
 236
 237                 // Allow columns to be shown (counting from the left) until we run out
 238                 // of room
 239                 var empty = false;
 240                 for ( i=0, ien=display.length ; i<ien ; i++ ) {
 241                         if ( display[i] === '-' && ! columns[i].control ) {
 242                                 // Once we've found a column that won't fit we don't let any
 243                                 // others display either, or columns might disappear in the
 244                                 // middle of the table
 245                                 if ( empty || usedWidth - columns[i].minWidth < 0 ) {
 246                                         empty = true;
 247                                         display[i] = false;
 248                                 }
 249                                 else {
 250                                         display[i] = true;
 251                                 }
 252
 253                                 usedWidth -= columns[i].minWidth;
 254                         }
 255                 }
 256
 257                 // Determine if the 'control' column should be shown (if there is one).
 258                 // This is the case when there is a hidden column (that is not the
 259                 // control column). The two loops look inefficient here, but they are
 260                 // trivial and will fly through. We need to know the outcome from the
 261                 // first , before the action in the second can be taken
 262                 var showControl = false;
 263
 264                 for ( i=0, ien=columns.length ; i<ien ; i++ ) {
 265                         if ( ! columns[i].control && ! columns[i].never && ! display[i] ) {
 266                                 showControl = true;
 267                                 break;
 268                         }
 269                 }
 270
 271                 for ( i=0, ien=columns.length ; i<ien ; i++ ) {
 272                         if ( columns[i].control ) {
 273                                 display[i] = showControl;
 274                         }
 275                 }
 276
 277                 // Finally we need to make sure that there is at least one column that
 278                 // is visible
 279                 if ( $.inArray( true, display ) === -1 ) {
 280                         display[0] = true;
 281                 }
 282
 283                 return display;
 284         },
 285
 286
 287         /**
 288          * Create the internal `columns` array with information about the columns
 289          * for the table. This includes determining which breakpoints the column
 290          * will appear in, based upon class names in the column, which makes up the
 291          * vast majority of this method.
 292          *
 293          * @private
 294          */
 295         _classLogic: function ()
 296         {
 297                 var that = this;
 298                 var calc = {};
 299                 var breakpoints = this.c.breakpoints;
 300                 var columns = this.s.dt.columns().eq(0).map( function (i) {
 301                         var className = this.column(i).header().className;
 302
 303                         return {
 304                                 className: className,
 305                                 includeIn: [],
 306                                 auto:      false,
 307                                 control:   false,
 308                                 never:     className.match(/\bnever\b/) ? true : false
 309                         };
 310                 } );
 311
 312                 // Simply add a breakpoint to `includeIn` array, ensuring that there are
 313                 // no duplicates
 314                 var add = function ( colIdx, name ) {
 315                         var includeIn = columns[ colIdx ].includeIn;
 316
 317                         if ( $.inArray( name, includeIn ) === -1 ) {
 318                                 includeIn.push( name );
 319                         }
 320                 };
 321
 322                 var column = function ( colIdx, name, operator, matched ) {
 323                         var size, i, ien;
 324
 325                         if ( ! operator ) {
 326                                 columns[ colIdx ].includeIn.push( name );
 327                         }
 328                         else if ( operator === 'max-' ) {
 329                                 // Add this breakpoint and all smaller
 330                                 size = that._find( name ).width;
 331
 332                                 for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
 333                                         if ( breakpoints[i].width <= size ) {
 334                                                 add( colIdx, breakpoints[i].name );
 335                                         }
 336                                 }
 337                         }
 338                         else if ( operator === 'min-' ) {
 339                                 // Add this breakpoint and all larger
 340                                 size = that._find( name ).width;
 341
 342                                 for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
 343                                         if ( breakpoints[i].width >= size ) {
 344                                                 add( colIdx, breakpoints[i].name );
 345                                         }
 346                                 }
 347                         }
 348                         else if ( operator === 'not-' ) {
 349                                 // Add all but this breakpoint (xxx need extra information)
 350
 351                                 for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
 352                                         if ( breakpoints[i].name.indexOf( matched ) === -1 ) {
 353                                                 add( colIdx, breakpoints[i].name );
 354                                         }
 355                                 }
 356                         }
 357                 };
 358
 359                 // Loop over each column and determine if it has a responsive control
 360                 // class
 361                 columns.each( function ( col, i ) {
 362                         var classNames = col.className.split(' ');
 363                         var hasClass = false;
 364
 365                         // Split the class name up so multiple rules can be applied if needed
 366                         for ( var k=0, ken=classNames.length ; k<ken ; k++ ) {
 367                                 var className = $.trim( classNames[k] );
 368
 369                                 if ( className === 'all' ) {
 370                                         // Include in all
 371                                         hasClass = true;
 372                                         col.includeIn = $.map( breakpoints, function (a) {
 373                                                 return a.name;
 374                                         } );
 375                                         return;
 376                                 }
 377                                 else if ( className === 'none' || className === 'never' ) {
 378                                         // Include in none (default) and no auto
 379                                         hasClass = true;
 380                                         return;
 381                                 }
 382                                 else if ( className === 'control' ) {
 383                                         // Special column that is only visible, when one of the other
 384                                         // columns is hidden. This is used for the details control
 385                                         hasClass = true;
 386                                         col.control = true;
 387                                         return;
 388                                 }
 389
 390                                 $.each( breakpoints, function ( j, breakpoint ) {
 391                                         // Does this column have a class that matches this breakpoint?
 392                                         var brokenPoint = breakpoint.name.split('-');
 393                                         var re = new RegExp( '(min\\-|max\\-|not\\-)?('+brokenPoint[0]+')(\\-[_a-zA-Z0-9])?' );
 394                                         var match = className.match( re );
 395
 396                                         if ( match ) {
 397                                                 hasClass = true;
 398
 399                                                 if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
 400                                                         // Class name matches breakpoint name fully
 401                                                         column( i, breakpoint.name, match[1], match[2]+match[3] );
 402                                                 }
 403                                                 else if ( match[2] === brokenPoint[0] && ! match[3] ) {
 404                                                         // Class name matched primary breakpoint name with no qualifier
 405                                                         column( i, breakpoint.name, match[1], match[2] );
 406                                                 }
 407                                         }
 408                                 } );
 409                         }
 410
 411                         // If there was no control class, then automatic sizing is used
 412                         if ( ! hasClass ) {
 413                                 col.auto = true;
 414                         }
 415                 } );
 416
 417                 this.s.columns = columns;
 418         },
 419
 420
 421         /**
 422          * Initialisation for the details handler
 423          *
 424          * @private
 425          */
 426         _detailsInit: function ()
 427         {
 428                 var that    = this;
 429                 var dt      = this.s.dt;
 430                 var details = this.c.details;
 431
 432                 // The inline type always uses the first child as the target
 433                 if ( details.type === 'inline' ) {
 434                         details.target = 'td:first-child';
 435                 }
 436
 437                 // type.target can be a string jQuery selector or a column index
 438                 var target   = details.target;
 439                 var selector = typeof target === 'string' ? target : 'td';
 440
 441                 // Click handler to show / hide the details rows when they are available
 442                 $( dt.table().body() ).on( 'click', selector, function (e) {
 443                         // If the table is not collapsed (i.e. there is no hidden columns)
 444                         // then take no action
 445                         if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
 446                                 return;
 447                         }
 448
 449                         // Check that the row is actually a DataTable's controlled node
 450                         if ( ! dt.row( $(this).closest('tr') ).length ) {
 451                                 return;
 452                         }
 453
 454                         // For column index, we determine if we should act or not in the
 455                         // handler - otherwise it is already okay
 456                         if ( typeof target === 'number' ) {
 457                                 var targetIdx = target < 0 ?
 458                                         dt.columns().eq(0).length + target :
 459                                         target;
 460
 461                                 if ( dt.cell( this ).index().column !== targetIdx ) {
 462                                         return;
 463                                 }
 464                         }
 465
 466                         // $().closest() includes itself in its check
 467                         var row = dt.row( $(this).closest('tr') );
 468
 469                         if ( row.child.isShown() ) {
 470                                 row.child( false );
 471                                 $( row.node() ).removeClass( 'parent' );
 472                         }
 473                         else {
 474                                 var info = that.c.details.renderer( dt, row[0] );
 475                                 row.child( info, 'child' ).show();
 476                                 $( row.node() ).addClass( 'parent' );
 477                         }
 478                 } );
 479         },
 480
 481
 482         /**
 483          * Update the child rows in the table whenever the column visibility changes
 484          *
 485          * @private
 486          */
 487         _detailsVis: function ()
 488         {
 489                 var that = this;
 490                 var dt = this.s.dt;
 491
 492                 // Find how many columns are hidden
 493                 var hiddenColumns = dt.columns().indexes().filter( function ( idx ) {
 494                         var col = dt.column( idx );
 495
 496                         if ( col.visible() ) {
 497                                 return null;
 498                         }
 499
 500                         // Only counts as hidden if it doesn't have the `never` class
 501                         return $( col.header() ).hasClass( 'never' ) ? null : idx;
 502                 } );
 503                 var haveHidden = true;
 504
 505                 if ( hiddenColumns.length === 0 || ( hiddenColumns.length === 1 && this.s.columns[ hiddenColumns[0] ].control ) ) {
 506                         haveHidden = false;
 507                 }
 508
 509                 if ( haveHidden ) {
 510                         // Show all existing child rows
 511                         dt.rows( { page: 'current' } ).eq(0).each( function (idx) {
 512                                 var row = dt.row( idx );
 513
 514                                 if ( row.child() ) {
 515                                         var info = that.c.details.renderer( dt, row[0] );
 516
 517                                         // The renderer can return false to have no child row
 518                                         if ( info === false ) {
 519                                                 row.child.hide();
 520                                         }
 521                                         else {
 522                                                 row.child( info, 'child' ).show();
 523                                         }
 524                                 }
 525                         } );
 526                 }
 527                 else {
 528                         // Hide all existing child rows
 529                         dt.rows( { page: 'current' } ).eq(0).each( function (idx) {
 530                                 dt.row( idx ).child.hide();
 531                         } );
 532                 }
 533         },
 534
 535
 536         /**
 537          * Find a breakpoint object from a name
 538          * @param  {string} name Breakpoint name to find
 539          * @return {object}      Breakpoint description object
 540          */
 541         _find: function ( name )
 542         {
 543                 var breakpoints = this.c.breakpoints;
 544
 545                 for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
 546                         if ( breakpoints[i].name === name ) {
 547                                 return breakpoints[i];
 548                         }
 549                 }
 550         },
 551
 552
 553         /**
 554          * Alter the table display for a resized viewport. This involves first
 555          * determining what breakpoint the window currently is in, getting the
 556          * column visibilities to apply and then setting them.
 557          *
 558          * @private
 559          */
 560         _resize: function ()
 561         {
 562                 var dt = this.s.dt;
 563                 var width = $(window).width();
 564                 var breakpoints = this.c.breakpoints;
 565                 var breakpoint = breakpoints[0].name;
 566                 var columns = this.s.columns;
 567                 var i, ien;
 568
 569                 // Determine what breakpoint we are currently at
 570                 for ( i=breakpoints.length-1 ; i>=0 ; i-- ) {
 571                         if ( width <= breakpoints[i].width ) {
 572                                 breakpoint = breakpoints[i].name;
 573                                 break;
 574                         }
 575                 }
 576
 577                 // Show the columns for that break point
 578                 var columnsVis = this._columnsVisiblity( breakpoint );
 579
 580                 // Set the class before the column visibility is changed so event
 581                 // listeners know what the state is. Need to determine if there are
 582                 // any columns that are not visible but can be shown
 583                 var collapsedClass = false;
 584                 for ( i=0, ien=columns.length ; i<ien ; i++ ) {
 585                         if ( columnsVis[i] === false && ! columns[i].never ) {
 586                                 collapsedClass = true;
 587                                 break;
 588                         }
 589                 }
 590
 591                 $( dt.table().node() ).toggleClass('collapsed', collapsedClass );
 592
 593                 dt.columns().eq(0).each( function ( colIdx, i ) {
 594                         dt.column( colIdx ).visible( columnsVis[i] );
 595                 } );
 596         },
 597
 598
 599         /**
 600          * Determine the width of each column in the table so the auto column hiding
 601          * has that information to work with. This method is never going to be 100%
 602          * perfect since column widths can change slightly per page, but without
 603          * seriously compromising performance this is quite effective.
 604          *
 605          * @private
 606          */
 607         _resizeAuto: function ()
 608         {
 609                 var dt = this.s.dt;
 610                 var columns = this.s.columns;
 611
 612                 // Are we allowed to do auto sizing?
 613                 if ( ! this.c.auto ) {
 614                         return;
 615                 }
 616
 617                 // Are there any columns that actually need auto-sizing, or do they all
 618                 // have classes defined
 619                 if ( $.inArray( true, $.map( columns, function (c) { return c.auto; } ) ) === -1 ) {
 620                         return;
 621                 }
 622
 623                 // Clone the table with the current data in it
 624                 var tableWidth   = dt.table().node().offsetWidth;
 625                 var columnWidths = dt.columns;
 626                 var clonedTable  = dt.table().node().cloneNode( false );
 627                 var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
 628                 var clonedBody   = $( dt.table().body().cloneNode( false ) ).appendTo( clonedTable );
 629
 630                 $( dt.table().footer() ).clone( false ).appendTo( clonedTable );
 631
 632                 // This is a bit slow, but we need to get a clone of each row that
 633                 // includes all columns. As such, try to do this as little as possible.
 634                 dt.rows( { page: 'current' } ).indexes().flatten().each( function ( idx ) {
 635                         var clone = dt.row( idx ).node().cloneNode( true );
 636
 637                         if ( dt.columns( ':hidden' ).flatten().length ) {
 638                                 $(clone).append( dt.cells( idx, ':hidden' ).nodes().to$().clone() );
 639                         }
 640
 641                         $(clone).appendTo( clonedBody );
 642                 } );
 643
 644                 var cells = dt.columns().header().to$().clone( false );
 645                 $('<tr/>')
 646                         .append( cells )
 647                         .appendTo( clonedHeader );
 648
 649                 // In the inline case extra padding is applied to the first column to
 650                 // give space for the show / hide icon. We need to use this in the
 651                 // calculation
 652                 if ( this.c.details.type === 'inline' ) {
 653                         $(clonedTable).addClass( 'dtr-inline collapsed' );
 654                 }
 655
 656                 var inserted = $('<div/>')
 657                         .css( {
 658                                 width: 1,
 659                                 height: 1,
 660                                 overflow: 'hidden'
 661                         } )
 662                         .append( clonedTable );
 663
 664                 // Remove columns which are not to be included
 665                 inserted.find('th.never, td.never').remove();
 666
 667                 inserted.insertBefore( dt.table().node() );
 668
 669                 // The cloned header now contains the smallest that each column can be
 670                 dt.columns().eq(0).each( function ( idx ) {
 671                         columns[idx].minWidth = cells[ idx ].offsetWidth || 0;
 672                 } );
 673
 674                 inserted.remove();
 675         }
 676 };
 677
 678
 679 /**
 680  * List of default breakpoints. Each item in the array is an object with two
 681  * properties:
 682  *
 683  * * `name` - the breakpoint name.
 684  * * `width` - the breakpoint width
 685  *
 686  * @name Responsive.breakpoints
 687  * @static
 688  */
 689 Responsive.breakpoints = [
 690         { name: 'desktop',  width: Infinity },
 691         { name: 'tablet-l', width: 1024 },
 692         { name: 'tablet-p', width: 768 },
 693         { name: 'mobile-l', width: 480 },
 694         { name: 'mobile-p', width: 320 }
 695 ];
 696
 697
 698 /**
 699  * Responsive default settings for initialisation
 700  *
 701  * @namespace
 702  * @name Responsive.defaults
 703  * @static
 704  */
 705 Responsive.defaults = {
 706         /**
 707          * List of breakpoints for the instance. Note that this means that each
 708          * instance can have its own breakpoints. Additionally, the breakpoints
 709          * cannot be changed once an instance has been creased.
 710          *
 711          * @type {Array}
 712          * @default Takes the value of `Responsive.breakpoints`
 713          */
 714         breakpoints: Responsive.breakpoints,
 715
 716         /**
 717          * Enable / disable auto hiding calculations. It can help to increase
 718          * performance slightly if you disable this option, but all columns would
 719          * need to have breakpoint classes assigned to them
 720          *
 721          * @type {Boolean}
 722          * @default  `true`
 723          */
 724         auto: true,
 725
 726         /**
 727          * Details control. If given as a string value, the `type` property of the
 728          * default object is set to that value, and the defaults used for the rest
 729          * of the object - this is for ease of implementation.
 730          *
 731          * The object consists of the following properties:
 732          *
 733          * * `renderer` - function that is called for display of the child row data.
 734          *   The default function will show the data from the hidden columns
 735          * * `target` - Used as the selector for what objects to attach the child
 736          *   open / close to
 737          * * `type` - `false` to disable the details display, `inline` or `column`
 738          *   for the two control types
 739          *
 740          * @type {Object|string}
 741          */
 742         details: {
 743                 renderer: function ( api, rowIdx ) {
 744                         var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
 745                                 var header = $( api.column( cell.column ).header() );
 746                                 var idx = api.cell( cell ).index();
 747
 748                                 if ( header.hasClass( 'control' ) || header.hasClass( 'never' ) ) {
 749                                         return '';
 750                                 }
 751
 752                                 // Use a non-public DT API method to render the data for display
 753                                 // This needs to be updated when DT adds a suitable method for
 754                                 // this type of data retrieval
 755                                 var dtPrivate = api.settings()[0];
 756                                 var cellData = dtPrivate.oApi._fnGetCellData(
 757                                         dtPrivate, idx.row, idx.column, 'display'
 758                                 );
 759                                 var title = header.text();
 760                                 if ( title ) {
 761                                         title = title + ':';
 762                                 }
 763
 764                                 return '<li data-dtr-index="'+idx.column+'">'+
 765                                                 '<span class="dtr-title">'+
 766                                                         title+
 767                                                 '</span> '+
 768                                                 '<span class="dtr-data">'+
 769                                                         cellData+
 770                                                 '</span>'+
 771                                         '</li>';
 772                         } ).toArray().join('');
 773
 774                         return data ?
 775                                 $('<ul data-dtr-index="'+rowIdx+'"/>').append( data ) :
 776                                 false;
 777                 },
 778
 779                 target: 0,
 780
 781                 type: 'inline'
 782         }
 783 };
 784
 785
 786 /*
 787  * API
 788  */
 789 var Api = $.fn.dataTable.Api;
 790
 791 // Doesn't do anything - work around for a bug in DT... Not documented
 792 Api.register( 'responsive()', function () {
 793         return this;
 794 } );
 795
 796 Api.register( 'responsive.index()', function ( li ) {
 797         li = $(li);
 798
 799         return {
 800                 column: li.data('dtr-index'),
 801                 row:    li.parent().data('dtr-index')
 802         };
 803 } );
 804
 805 Api.register( 'responsive.rebuild()', function () {
 806         return this.iterator( 'table', function ( ctx ) {
 807                 if ( ctx._responsive ) {
 808                         ctx._responsive._classLogic();
 809                 }
 810         } );
 811 } );
 812
 813 Api.register( 'responsive.recalc()', function () {
 814         return this.iterator( 'table', function ( ctx ) {
 815                 if ( ctx._responsive ) {
 816                         ctx._responsive._resizeAuto();
 817                         ctx._responsive._resize();
 818                 }
 819         } );
 820 } );
 821
 822
 823 /**
 824  * Version information
 825  *
 826  * @name Responsive.version
 827  * @static
 828  */
 829 Responsive.version = '1.0.6';
 830
 831
 832 $.fn.dataTable.Responsive = Responsive;
 833 $.fn.DataTable.Responsive = Responsive;
 834
 835 // Attach a listener to the document which listens for DataTables initialisation
 836 // events so we can automatically initialise
 837 $(document).on( 'init.dt.dtr', function (e, settings, json) {
 838         if ( e.namespace !== 'dt' ) {
 839                 return;
 840         }
 841
 842         if ( $(settings.nTable).hasClass( 'responsive' ) ||
 843                  $(settings.nTable).hasClass( 'dt-responsive' ) ||
 844                  settings.oInit.responsive ||
 845                  DataTable.defaults.responsive
 846         ) {
 847                 var init = settings.oInit.responsive;
 848
 849                 if ( init !== false ) {
 850                         new Responsive( settings, $.isPlainObject( init ) ? init : {}  );
 851                 }
 852         }
 853 } );
 854
 855 return Responsive;
 856 }; // /factory
 857
 858
 859 // Define as an AMD module if possible
 860 if ( typeof define === 'function' && define.amd ) {
 861         define( ['jquery', 'datatables'], factory );
 862 }
 863 else if ( typeof exports === 'object' ) {
 864     // Node/CommonJS
 865     factory( require('jquery'), require('datatables') );
 866 }
 867 else if ( jQuery && !jQuery.fn.dataTable.Responsive ) {
 868         // Otherwise simply initialise as normal, stopping multiple evaluation
 869         factory( jQuery, jQuery.fn.dataTable );
 870 }
 871
 872
 873 })(window, document);