source: public/vendors/dataTable/Responsive-2.2.3/js/dataTables.responsive.js@ 79aa35c

Last change on this file since 79aa35c was 7304c7f, checked in by beratkjufliju <kufliju@…>, 3 years ago

added user authentication, create & forgot password methods and blades

  • Property mode set to 100644
File size: 37.7 KB
Line 
1/*! Responsive 2.2.3
2 * 2014-2018 SpryMedia Ltd - datatables.net/license
3 */
4
5/**
6 * @summary Responsive
7 * @description Responsive tables plug-in for DataTables
8 * @version 2.2.3
9 * @file dataTables.responsive.js
10 * @author SpryMedia Ltd (www.sprymedia.co.uk)
11 * @contact www.sprymedia.co.uk/contact
12 * @copyright Copyright 2014-2018 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(function( factory ){
24 if ( typeof define === 'function' && define.amd ) {
25 // AMD
26 define( ['jquery', 'datatables.net'], function ( $ ) {
27 return factory( $, window, document );
28 } );
29 }
30 else if ( typeof exports === 'object' ) {
31 // CommonJS
32 module.exports = function (root, $) {
33 if ( ! root ) {
34 root = window;
35 }
36
37 if ( ! $ || ! $.fn.dataTable ) {
38 $ = require('datatables.net')(root, $).$;
39 }
40
41 return factory( $, root, root.document );
42 };
43 }
44 else {
45 // Browser
46 factory( jQuery, window, document );
47 }
48}(function( $, window, document, undefined ) {
49'use strict';
50var DataTable = $.fn.dataTable;
51
52
53/**
54 * Responsive is a plug-in for the DataTables library that makes use of
55 * DataTables' ability to change the visibility of columns, changing the
56 * visibility of columns so the displayed columns fit into the table container.
57 * The end result is that complex tables will be dynamically adjusted to fit
58 * into the viewport, be it on a desktop, tablet or mobile browser.
59 *
60 * Responsive for DataTables has two modes of operation, which can used
61 * individually or combined:
62 *
63 * * Class name based control - columns assigned class names that match the
64 * breakpoint logic can be shown / hidden as required for each breakpoint.
65 * * Automatic control - columns are automatically hidden when there is no
66 * room left to display them. Columns removed from the right.
67 *
68 * In additional to column visibility control, Responsive also has built into
69 * options to use DataTables' child row display to show / hide the information
70 * from the table that has been hidden. There are also two modes of operation
71 * for this child row display:
72 *
73 * * Inline - when the control element that the user can use to show / hide
74 * child rows is displayed inside the first column of the table.
75 * * Column - where a whole column is dedicated to be the show / hide control.
76 *
77 * Initialisation of Responsive is performed by:
78 *
79 * * Adding the class `responsive` or `dt-responsive` to the table. In this case
80 * Responsive will automatically be initialised with the default configuration
81 * options when the DataTable is created.
82 * * Using the `responsive` option in the DataTables configuration options. This
83 * can also be used to specify the configuration options, or simply set to
84 * `true` to use the defaults.
85 *
86 * @class
87 * @param {object} settings DataTables settings object for the host table
88 * @param {object} [opts] Configuration options
89 * @requires jQuery 1.7+
90 * @requires DataTables 1.10.3+
91 *
92 * @example
93 * $('#example').DataTable( {
94 * responsive: true
95 * } );
96 * } );
97 */
98var Responsive = function ( settings, opts ) {
99 // Sanity check that we are using DataTables 1.10 or newer
100 if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.10' ) ) {
101 throw 'DataTables Responsive requires DataTables 1.10.10 or newer';
102 }
103
104 this.s = {
105 dt: new DataTable.Api( settings ),
106 columns: [],
107 current: []
108 };
109
110 // Check if responsive has already been initialised on this table
111 if ( this.s.dt.settings()[0].responsive ) {
112 return;
113 }
114
115 // details is an object, but for simplicity the user can give it as a string
116 // or a boolean
117 if ( opts && typeof opts.details === 'string' ) {
118 opts.details = { type: opts.details };
119 }
120 else if ( opts && opts.details === false ) {
121 opts.details = { type: false };
122 }
123 else if ( opts && opts.details === true ) {
124 opts.details = { type: 'inline' };
125 }
126
127 this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
128 settings.responsive = this;
129 this._constructor();
130};
131
132$.extend( Responsive.prototype, {
133 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
134 * Constructor
135 */
136
137 /**
138 * Initialise the Responsive instance
139 *
140 * @private
141 */
142 _constructor: function ()
143 {
144 var that = this;
145 var dt = this.s.dt;
146 var dtPrivateSettings = dt.settings()[0];
147 var oldWindowWidth = $(window).width();
148
149 dt.settings()[0]._responsive = this;
150
151 // Use DataTables' throttle function to avoid processor thrashing on
152 // resize
153 $(window).on( 'resize.dtr orientationchange.dtr', DataTable.util.throttle( function () {
154 // iOS has a bug whereby resize can fire when only scrolling
155 // See: http://stackoverflow.com/questions/8898412
156 var width = $(window).width();
157
158 if ( width !== oldWindowWidth ) {
159 that._resize();
160 oldWindowWidth = width;
161 }
162 } ) );
163
164 // DataTables doesn't currently trigger an event when a row is added, so
165 // we need to hook into its private API to enforce the hidden rows when
166 // new data is added
167 dtPrivateSettings.oApi._fnCallbackReg( dtPrivateSettings, 'aoRowCreatedCallback', function (tr, data, idx) {
168 if ( $.inArray( false, that.s.current ) !== -1 ) {
169 $('>td, >th', tr).each( function ( i ) {
170 var idx = dt.column.index( 'toData', i );
171
172 if ( that.s.current[idx] === false ) {
173 $(this).css('display', 'none');
174 }
175 } );
176 }
177 } );
178
179 // Destroy event handler
180 dt.on( 'destroy.dtr', function () {
181 dt.off( '.dtr' );
182 $( dt.table().body() ).off( '.dtr' );
183 $(window).off( 'resize.dtr orientationchange.dtr' );
184
185 // Restore the columns that we've hidden
186 $.each( that.s.current, function ( i, val ) {
187 if ( val === false ) {
188 that._setColumnVis( i, true );
189 }
190 } );
191 } );
192
193 // Reorder the breakpoints array here in case they have been added out
194 // of order
195 this.c.breakpoints.sort( function (a, b) {
196 return a.width < b.width ? 1 :
197 a.width > b.width ? -1 : 0;
198 } );
199
200 this._classLogic();
201 this._resizeAuto();
202
203 // Details handler
204 var details = this.c.details;
205
206 if ( details.type !== false ) {
207 that._detailsInit();
208
209 // DataTables will trigger this event on every column it shows and
210 // hides individually
211 dt.on( 'column-visibility.dtr', function () {
212 // Use a small debounce to allow multiple columns to be set together
213 if ( that._timer ) {
214 clearTimeout( that._timer );
215 }
216
217 that._timer = setTimeout( function () {
218 that._timer = null;
219
220 that._classLogic();
221 that._resizeAuto();
222 that._resize();
223
224 that._redrawChildren();
225 }, 100 );
226 } );
227
228 // Redraw the details box on each draw which will happen if the data
229 // has changed. This is used until DataTables implements a native
230 // `updated` event for rows
231 dt.on( 'draw.dtr', function () {
232 that._redrawChildren();
233 } );
234
235 $(dt.table().node()).addClass( 'dtr-'+details.type );
236 }
237
238 dt.on( 'column-reorder.dtr', function (e, settings, details) {
239 that._classLogic();
240 that._resizeAuto();
241 that._resize();
242 } );
243
244 // Change in column sizes means we need to calc
245 dt.on( 'column-sizing.dtr', function () {
246 that._resizeAuto();
247 that._resize();
248 });
249
250 // On Ajax reload we want to reopen any child rows which are displayed
251 // by responsive
252 dt.on( 'preXhr.dtr', function () {
253 var rowIds = [];
254 dt.rows().every( function () {
255 if ( this.child.isShown() ) {
256 rowIds.push( this.id(true) );
257 }
258 } );
259
260 dt.one( 'draw.dtr', function () {
261 that._resizeAuto();
262 that._resize();
263
264 dt.rows( rowIds ).every( function () {
265 that._detailsDisplay( this, false );
266 } );
267 } );
268 });
269
270 dt.on( 'init.dtr', function (e, settings, details) {
271 that._resizeAuto();
272 that._resize();
273
274 // If columns were hidden, then DataTables needs to adjust the
275 // column sizing
276 if ( $.inArray( false, that.s.current ) ) {
277 dt.columns.adjust();
278 }
279 } );
280
281 // First pass - draw the table for the current viewport size
282 this._resize();
283 },
284
285
286 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
287 * Private methods
288 */
289
290 /**
291 * Calculate the visibility for the columns in a table for a given
292 * breakpoint. The result is pre-determined based on the class logic if
293 * class names are used to control all columns, but the width of the table
294 * is also used if there are columns which are to be automatically shown
295 * and hidden.
296 *
297 * @param {string} breakpoint Breakpoint name to use for the calculation
298 * @return {array} Array of boolean values initiating the visibility of each
299 * column.
300 * @private
301 */
302 _columnsVisiblity: function ( breakpoint )
303 {
304 var dt = this.s.dt;
305 var columns = this.s.columns;
306 var i, ien;
307
308 // Create an array that defines the column ordering based first on the
309 // column's priority, and secondly the column index. This allows the
310 // columns to be removed from the right if the priority matches
311 var order = columns
312 .map( function ( col, idx ) {
313 return {
314 columnIdx: idx,
315 priority: col.priority
316 };
317 } )
318 .sort( function ( a, b ) {
319 if ( a.priority !== b.priority ) {
320 return a.priority - b.priority;
321 }
322 return a.columnIdx - b.columnIdx;
323 } );
324
325 // Class logic - determine which columns are in this breakpoint based
326 // on the classes. If no class control (i.e. `auto`) then `-` is used
327 // to indicate this to the rest of the function
328 var display = $.map( columns, function ( col, i ) {
329 if ( dt.column(i).visible() === false ) {
330 return 'not-visible';
331 }
332 return col.auto && col.minWidth === null ?
333 false :
334 col.auto === true ?
335 '-' :
336 $.inArray( breakpoint, col.includeIn ) !== -1;
337 } );
338
339 // Auto column control - first pass: how much width is taken by the
340 // ones that must be included from the non-auto columns
341 var requiredWidth = 0;
342 for ( i=0, ien=display.length ; i<ien ; i++ ) {
343 if ( display[i] === true ) {
344 requiredWidth += columns[i].minWidth;
345 }
346 }
347
348 // Second pass, use up any remaining width for other columns. For
349 // scrolling tables we need to subtract the width of the scrollbar. It
350 // may not be requires which makes this sub-optimal, but it would
351 // require another full redraw to make complete use of those extra few
352 // pixels
353 var scrolling = dt.settings()[0].oScroll;
354 var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
355 var widthAvailable = dt.table().container().offsetWidth - bar;
356 var usedWidth = widthAvailable - requiredWidth;
357
358 // Control column needs to always be included. This makes it sub-
359 // optimal in terms of using the available with, but to stop layout
360 // thrashing or overflow. Also we need to account for the control column
361 // width first so we know how much width is available for the other
362 // columns, since the control column might not be the first one shown
363 for ( i=0, ien=display.length ; i<ien ; i++ ) {
364 if ( columns[i].control ) {
365 usedWidth -= columns[i].minWidth;
366 }
367 }
368
369 // Allow columns to be shown (counting by priority and then right to
370 // left) until we run out of room
371 var empty = false;
372 for ( i=0, ien=order.length ; i<ien ; i++ ) {
373 var colIdx = order[i].columnIdx;
374
375 if ( display[colIdx] === '-' && ! columns[colIdx].control && columns[colIdx].minWidth ) {
376 // Once we've found a column that won't fit we don't let any
377 // others display either, or columns might disappear in the
378 // middle of the table
379 if ( empty || usedWidth - columns[colIdx].minWidth < 0 ) {
380 empty = true;
381 display[colIdx] = false;
382 }
383 else {
384 display[colIdx] = true;
385 }
386
387 usedWidth -= columns[colIdx].minWidth;
388 }
389 }
390
391 // Determine if the 'control' column should be shown (if there is one).
392 // This is the case when there is a hidden column (that is not the
393 // control column). The two loops look inefficient here, but they are
394 // trivial and will fly through. We need to know the outcome from the
395 // first , before the action in the second can be taken
396 var showControl = false;
397
398 for ( i=0, ien=columns.length ; i<ien ; i++ ) {
399 if ( ! columns[i].control && ! columns[i].never && display[i] === false ) {
400 showControl = true;
401 break;
402 }
403 }
404
405 for ( i=0, ien=columns.length ; i<ien ; i++ ) {
406 if ( columns[i].control ) {
407 display[i] = showControl;
408 }
409
410 // Replace not visible string with false from the control column detection above
411 if ( display[i] === 'not-visible' ) {
412 display[i] = false;
413 }
414 }
415
416 // Finally we need to make sure that there is at least one column that
417 // is visible
418 if ( $.inArray( true, display ) === -1 ) {
419 display[0] = true;
420 }
421
422 return display;
423 },
424
425
426 /**
427 * Create the internal `columns` array with information about the columns
428 * for the table. This includes determining which breakpoints the column
429 * will appear in, based upon class names in the column, which makes up the
430 * vast majority of this method.
431 *
432 * @private
433 */
434 _classLogic: function ()
435 {
436 var that = this;
437 var calc = {};
438 var breakpoints = this.c.breakpoints;
439 var dt = this.s.dt;
440 var columns = dt.columns().eq(0).map( function (i) {
441 var column = this.column(i);
442 var className = column.header().className;
443 var priority = dt.settings()[0].aoColumns[i].responsivePriority;
444
445 if ( priority === undefined ) {
446 var dataPriority = $(column.header()).data('priority');
447
448 priority = dataPriority !== undefined ?
449 dataPriority * 1 :
450 10000;
451 }
452
453 return {
454 className: className,
455 includeIn: [],
456 auto: false,
457 control: false,
458 never: className.match(/\bnever\b/) ? true : false,
459 priority: priority
460 };
461 } );
462
463 // Simply add a breakpoint to `includeIn` array, ensuring that there are
464 // no duplicates
465 var add = function ( colIdx, name ) {
466 var includeIn = columns[ colIdx ].includeIn;
467
468 if ( $.inArray( name, includeIn ) === -1 ) {
469 includeIn.push( name );
470 }
471 };
472
473 var column = function ( colIdx, name, operator, matched ) {
474 var size, i, ien;
475
476 if ( ! operator ) {
477 columns[ colIdx ].includeIn.push( name );
478 }
479 else if ( operator === 'max-' ) {
480 // Add this breakpoint and all smaller
481 size = that._find( name ).width;
482
483 for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
484 if ( breakpoints[i].width <= size ) {
485 add( colIdx, breakpoints[i].name );
486 }
487 }
488 }
489 else if ( operator === 'min-' ) {
490 // Add this breakpoint and all larger
491 size = that._find( name ).width;
492
493 for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
494 if ( breakpoints[i].width >= size ) {
495 add( colIdx, breakpoints[i].name );
496 }
497 }
498 }
499 else if ( operator === 'not-' ) {
500 // Add all but this breakpoint
501 for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
502 if ( breakpoints[i].name.indexOf( matched ) === -1 ) {
503 add( colIdx, breakpoints[i].name );
504 }
505 }
506 }
507 };
508
509 // Loop over each column and determine if it has a responsive control
510 // class
511 columns.each( function ( col, i ) {
512 var classNames = col.className.split(' ');
513 var hasClass = false;
514
515 // Split the class name up so multiple rules can be applied if needed
516 for ( var k=0, ken=classNames.length ; k<ken ; k++ ) {
517 var className = $.trim( classNames[k] );
518
519 if ( className === 'all' ) {
520 // Include in all
521 hasClass = true;
522 col.includeIn = $.map( breakpoints, function (a) {
523 return a.name;
524 } );
525 return;
526 }
527 else if ( className === 'none' || col.never ) {
528 // Include in none (default) and no auto
529 hasClass = true;
530 return;
531 }
532 else if ( className === 'control' ) {
533 // Special column that is only visible, when one of the other
534 // columns is hidden. This is used for the details control
535 hasClass = true;
536 col.control = true;
537 return;
538 }
539
540 $.each( breakpoints, function ( j, breakpoint ) {
541 // Does this column have a class that matches this breakpoint?
542 var brokenPoint = breakpoint.name.split('-');
543 var re = new RegExp( '(min\\-|max\\-|not\\-)?('+brokenPoint[0]+')(\\-[_a-zA-Z0-9])?' );
544 var match = className.match( re );
545
546 if ( match ) {
547 hasClass = true;
548
549 if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
550 // Class name matches breakpoint name fully
551 column( i, breakpoint.name, match[1], match[2]+match[3] );
552 }
553 else if ( match[2] === brokenPoint[0] && ! match[3] ) {
554 // Class name matched primary breakpoint name with no qualifier
555 column( i, breakpoint.name, match[1], match[2] );
556 }
557 }
558 } );
559 }
560
561 // If there was no control class, then automatic sizing is used
562 if ( ! hasClass ) {
563 col.auto = true;
564 }
565 } );
566
567 this.s.columns = columns;
568 },
569
570
571 /**
572 * Show the details for the child row
573 *
574 * @param {DataTables.Api} row API instance for the row
575 * @param {boolean} update Update flag
576 * @private
577 */
578 _detailsDisplay: function ( row, update )
579 {
580 var that = this;
581 var dt = this.s.dt;
582 var details = this.c.details;
583
584 if ( details && details.type !== false ) {
585 var res = details.display( row, update, function () {
586 return details.renderer(
587 dt, row[0], that._detailsObj(row[0])
588 );
589 } );
590
591 if ( res === true || res === false ) {
592 $(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
593 }
594 }
595 },
596
597
598 /**
599 * Initialisation for the details handler
600 *
601 * @private
602 */
603 _detailsInit: function ()
604 {
605 var that = this;
606 var dt = this.s.dt;
607 var details = this.c.details;
608
609 // The inline type always uses the first child as the target
610 if ( details.type === 'inline' ) {
611 details.target = 'td:first-child, th:first-child';
612 }
613
614 // Keyboard accessibility
615 dt.on( 'draw.dtr', function () {
616 that._tabIndexes();
617 } );
618 that._tabIndexes(); // Initial draw has already happened
619
620 $( dt.table().body() ).on( 'keyup.dtr', 'td, th', function (e) {
621 if ( e.keyCode === 13 && $(this).data('dtr-keyboard') ) {
622 $(this).click();
623 }
624 } );
625
626 // type.target can be a string jQuery selector or a column index
627 var target = details.target;
628 var selector = typeof target === 'string' ? target : 'td, th';
629
630 // Click handler to show / hide the details rows when they are available
631 $( dt.table().body() )
632 .on( 'click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
633 // If the table is not collapsed (i.e. there is no hidden columns)
634 // then take no action
635 if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
636 return;
637 }
638
639 // Check that the row is actually a DataTable's controlled node
640 if ( $.inArray( $(this).closest('tr').get(0), dt.rows().nodes().toArray() ) === -1 ) {
641 return;
642 }
643
644 // For column index, we determine if we should act or not in the
645 // handler - otherwise it is already okay
646 if ( typeof target === 'number' ) {
647 var targetIdx = target < 0 ?
648 dt.columns().eq(0).length + target :
649 target;
650
651 if ( dt.cell( this ).index().column !== targetIdx ) {
652 return;
653 }
654 }
655
656 // $().closest() includes itself in its check
657 var row = dt.row( $(this).closest('tr') );
658
659 // Check event type to do an action
660 if ( e.type === 'click' ) {
661 // The renderer is given as a function so the caller can execute it
662 // only when they need (i.e. if hiding there is no point is running
663 // the renderer)
664 that._detailsDisplay( row, false );
665 }
666 else if ( e.type === 'mousedown' ) {
667 // For mouse users, prevent the focus ring from showing
668 $(this).css('outline', 'none');
669 }
670 else if ( e.type === 'mouseup' ) {
671 // And then re-allow at the end of the click
672 $(this).blur().css('outline', '');
673 }
674 } );
675 },
676
677
678 /**
679 * Get the details to pass to a renderer for a row
680 * @param {int} rowIdx Row index
681 * @private
682 */
683 _detailsObj: function ( rowIdx )
684 {
685 var that = this;
686 var dt = this.s.dt;
687
688 return $.map( this.s.columns, function( col, i ) {
689 // Never and control columns should not be passed to the renderer
690 if ( col.never || col.control ) {
691 return;
692 }
693
694 return {
695 title: dt.settings()[0].aoColumns[ i ].sTitle,
696 data: dt.cell( rowIdx, i ).render( that.c.orthogonal ),
697 hidden: dt.column( i ).visible() && !that.s.current[ i ],
698 columnIndex: i,
699 rowIndex: rowIdx
700 };
701 } );
702 },
703
704
705 /**
706 * Find a breakpoint object from a name
707 *
708 * @param {string} name Breakpoint name to find
709 * @return {object} Breakpoint description object
710 * @private
711 */
712 _find: function ( name )
713 {
714 var breakpoints = this.c.breakpoints;
715
716 for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
717 if ( breakpoints[i].name === name ) {
718 return breakpoints[i];
719 }
720 }
721 },
722
723
724 /**
725 * Re-create the contents of the child rows as the display has changed in
726 * some way.
727 *
728 * @private
729 */
730 _redrawChildren: function ()
731 {
732 var that = this;
733 var dt = this.s.dt;
734
735 dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
736 var row = dt.row( idx );
737
738 that._detailsDisplay( dt.row( idx ), true );
739 } );
740 },
741
742
743 /**
744 * Alter the table display for a resized viewport. This involves first
745 * determining what breakpoint the window currently is in, getting the
746 * column visibilities to apply and then setting them.
747 *
748 * @private
749 */
750 _resize: function ()
751 {
752 var that = this;
753 var dt = this.s.dt;
754 var width = $(window).width();
755 var breakpoints = this.c.breakpoints;
756 var breakpoint = breakpoints[0].name;
757 var columns = this.s.columns;
758 var i, ien;
759 var oldVis = this.s.current.slice();
760
761 // Determine what breakpoint we are currently at
762 for ( i=breakpoints.length-1 ; i>=0 ; i-- ) {
763 if ( width <= breakpoints[i].width ) {
764 breakpoint = breakpoints[i].name;
765 break;
766 }
767 }
768
769 // Show the columns for that break point
770 var columnsVis = this._columnsVisiblity( breakpoint );
771 this.s.current = columnsVis;
772
773 // Set the class before the column visibility is changed so event
774 // listeners know what the state is. Need to determine if there are
775 // any columns that are not visible but can be shown
776 var collapsedClass = false;
777 for ( i=0, ien=columns.length ; i<ien ; i++ ) {
778 if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control && ! dt.column(i).visible() === false ) {
779 collapsedClass = true;
780 break;
781 }
782 }
783
784 $( dt.table().node() ).toggleClass( 'collapsed', collapsedClass );
785
786 var changed = false;
787 var visible = 0;
788
789 dt.columns().eq(0).each( function ( colIdx, i ) {
790 if ( columnsVis[i] === true ) {
791 visible++;
792 }
793
794 if ( columnsVis[i] !== oldVis[i] ) {
795 changed = true;
796 that._setColumnVis( colIdx, columnsVis[i] );
797 }
798 } );
799
800 if ( changed ) {
801 this._redrawChildren();
802
803 // Inform listeners of the change
804 $(dt.table().node()).trigger( 'responsive-resize.dt', [dt, this.s.current] );
805
806 // If no records, update the "No records" display element
807 if ( dt.page.info().recordsDisplay === 0 ) {
808 $('td', dt.table().body()).eq(0).attr('colspan', visible);
809 }
810 }
811 },
812
813
814 /**
815 * Determine the width of each column in the table so the auto column hiding
816 * has that information to work with. This method is never going to be 100%
817 * perfect since column widths can change slightly per page, but without
818 * seriously compromising performance this is quite effective.
819 *
820 * @private
821 */
822 _resizeAuto: function ()
823 {
824 var dt = this.s.dt;
825 var columns = this.s.columns;
826
827 // Are we allowed to do auto sizing?
828 if ( ! this.c.auto ) {
829 return;
830 }
831
832 // Are there any columns that actually need auto-sizing, or do they all
833 // have classes defined
834 if ( $.inArray( true, $.map( columns, function (c) { return c.auto; } ) ) === -1 ) {
835 return;
836 }
837
838 // Need to restore all children. They will be reinstated by a re-render
839 if ( ! $.isEmptyObject( _childNodeStore ) ) {
840 $.each( _childNodeStore, function ( key ) {
841 var idx = key.split('-');
842
843 _childNodesRestore( dt, idx[0]*1, idx[1]*1 );
844 } );
845 }
846
847 // Clone the table with the current data in it
848 var tableWidth = dt.table().node().offsetWidth;
849 var columnWidths = dt.columns;
850 var clonedTable = dt.table().node().cloneNode( false );
851 var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
852 var clonedBody = $( dt.table().body() ).clone( false, false ).empty().appendTo( clonedTable ); // use jQuery because of IE8
853
854 // Header
855 var headerCells = dt.columns()
856 .header()
857 .filter( function (idx) {
858 return dt.column(idx).visible();
859 } )
860 .to$()
861 .clone( false )
862 .css( 'display', 'table-cell' )
863 .css( 'min-width', 0 );
864
865 // Body rows - we don't need to take account of DataTables' column
866 // visibility since we implement our own here (hence the `display` set)
867 $(clonedBody)
868 .append( $(dt.rows( { page: 'current' } ).nodes()).clone( false ) )
869 .find( 'th, td' ).css( 'display', '' );
870
871 // Footer
872 var footer = dt.table().footer();
873 if ( footer ) {
874 var clonedFooter = $( footer.cloneNode( false ) ).appendTo( clonedTable );
875 var footerCells = dt.columns()
876 .footer()
877 .filter( function (idx) {
878 return dt.column(idx).visible();
879 } )
880 .to$()
881 .clone( false )
882 .css( 'display', 'table-cell' );
883
884 $('<tr/>')
885 .append( footerCells )
886 .appendTo( clonedFooter );
887 }
888
889 $('<tr/>')
890 .append( headerCells )
891 .appendTo( clonedHeader );
892
893 // In the inline case extra padding is applied to the first column to
894 // give space for the show / hide icon. We need to use this in the
895 // calculation
896 if ( this.c.details.type === 'inline' ) {
897 $(clonedTable).addClass( 'dtr-inline collapsed' );
898 }
899
900 // It is unsafe to insert elements with the same name into the DOM
901 // multiple times. For example, cloning and inserting a checked radio
902 // clears the chcecked state of the original radio.
903 $( clonedTable ).find( '[name]' ).removeAttr( 'name' );
904
905 // A position absolute table would take the table out of the flow of
906 // our container element, bypassing the height and width (Scroller)
907 $( clonedTable ).css( 'position', 'relative' )
908
909 var inserted = $('<div/>')
910 .css( {
911 width: 1,
912 height: 1,
913 overflow: 'hidden',
914 clear: 'both'
915 } )
916 .append( clonedTable );
917
918 inserted.insertBefore( dt.table().node() );
919
920 // The cloned header now contains the smallest that each column can be
921 headerCells.each( function (i) {
922 var idx = dt.column.index( 'fromVisible', i );
923 columns[ idx ].minWidth = this.offsetWidth || 0;
924 } );
925
926 inserted.remove();
927 },
928
929 /**
930 * Set a column's visibility.
931 *
932 * We don't use DataTables' column visibility controls in order to ensure
933 * that column visibility can Responsive can no-exist. Since only IE8+ is
934 * supported (and all evergreen browsers of course) the control of the
935 * display attribute works well.
936 *
937 * @param {integer} col Column index
938 * @param {boolean} showHide Show or hide (true or false)
939 * @private
940 */
941 _setColumnVis: function ( col, showHide )
942 {
943 var dt = this.s.dt;
944 var display = showHide ? '' : 'none'; // empty string will remove the attr
945
946 $( dt.column( col ).header() ).css( 'display', display );
947 $( dt.column( col ).footer() ).css( 'display', display );
948 dt.column( col ).nodes().to$().css( 'display', display );
949
950 // If the are child nodes stored, we might need to reinsert them
951 if ( ! $.isEmptyObject( _childNodeStore ) ) {
952 dt.cells( null, col ).indexes().each( function (idx) {
953 _childNodesRestore( dt, idx.row, idx.column );
954 } );
955 }
956 },
957
958
959 /**
960 * Update the cell tab indexes for keyboard accessibility. This is called on
961 * every table draw - that is potentially inefficient, but also the least
962 * complex option given that column visibility can change on the fly. Its a
963 * shame user-focus was removed from CSS 3 UI, as it would have solved this
964 * issue with a single CSS statement.
965 *
966 * @private
967 */
968 _tabIndexes: function ()
969 {
970 var dt = this.s.dt;
971 var cells = dt.cells( { page: 'current' } ).nodes().to$();
972 var ctx = dt.settings()[0];
973 var target = this.c.details.target;
974
975 cells.filter( '[data-dtr-keyboard]' ).removeData( '[data-dtr-keyboard]' );
976
977 if ( typeof target === 'number' ) {
978 dt.cells( null, target, { page: 'current' } ).nodes().to$()
979 .attr( 'tabIndex', ctx.iTabIndex )
980 .data( 'dtr-keyboard', 1 );
981 }
982 else {
983 // This is a bit of a hack - we need to limit the selected nodes to just
984 // those of this table
985 if ( target === 'td:first-child, th:first-child' ) {
986 target = '>td:first-child, >th:first-child';
987 }
988
989 $( target, dt.rows( { page: 'current' } ).nodes() )
990 .attr( 'tabIndex', ctx.iTabIndex )
991 .data( 'dtr-keyboard', 1 );
992 }
993 }
994} );
995
996
997/**
998 * List of default breakpoints. Each item in the array is an object with two
999 * properties:
1000 *
1001 * * `name` - the breakpoint name.
1002 * * `width` - the breakpoint width
1003 *
1004 * @name Responsive.breakpoints
1005 * @static
1006 */
1007Responsive.breakpoints = [
1008 { name: 'desktop', width: Infinity },
1009 { name: 'tablet-l', width: 1024 },
1010 { name: 'tablet-p', width: 768 },
1011 { name: 'mobile-l', width: 480 },
1012 { name: 'mobile-p', width: 320 }
1013];
1014
1015
1016/**
1017 * Display methods - functions which define how the hidden data should be shown
1018 * in the table.
1019 *
1020 * @namespace
1021 * @name Responsive.defaults
1022 * @static
1023 */
1024Responsive.display = {
1025 childRow: function ( row, update, render ) {
1026 if ( update ) {
1027 if ( $(row.node()).hasClass('parent') ) {
1028 row.child( render(), 'child' ).show();
1029
1030 return true;
1031 }
1032 }
1033 else {
1034 if ( ! row.child.isShown() ) {
1035 row.child( render(), 'child' ).show();
1036 $( row.node() ).addClass( 'parent' );
1037
1038 return true;
1039 }
1040 else {
1041 row.child( false );
1042 $( row.node() ).removeClass( 'parent' );
1043
1044 return false;
1045 }
1046 }
1047 },
1048
1049 childRowImmediate: function ( row, update, render ) {
1050 if ( (! update && row.child.isShown()) || ! row.responsive.hasHidden() ) {
1051 // User interaction and the row is show, or nothing to show
1052 row.child( false );
1053 $( row.node() ).removeClass( 'parent' );
1054
1055 return false;
1056 }
1057 else {
1058 // Display
1059 row.child( render(), 'child' ).show();
1060 $( row.node() ).addClass( 'parent' );
1061
1062 return true;
1063 }
1064 },
1065
1066 // This is a wrapper so the modal options for Bootstrap and jQuery UI can
1067 // have options passed into them. This specific one doesn't need to be a
1068 // function but it is for consistency in the `modal` name
1069 modal: function ( options ) {
1070 return function ( row, update, render ) {
1071 if ( ! update ) {
1072 // Show a modal
1073 var close = function () {
1074 modal.remove(); // will tidy events for us
1075 $(document).off( 'keypress.dtr' );
1076 };
1077
1078 var modal = $('<div class="dtr-modal"/>')
1079 .append( $('<div class="dtr-modal-display"/>')
1080 .append( $('<div class="dtr-modal-content"/>')
1081 .append( render() )
1082 )
1083 .append( $('<div class="dtr-modal-close">&times;</div>' )
1084 .click( function () {
1085 close();
1086 } )
1087 )
1088 )
1089 .append( $('<div class="dtr-modal-background"/>')
1090 .click( function () {
1091 close();
1092 } )
1093 )
1094 .appendTo( 'body' );
1095
1096 $(document).on( 'keyup.dtr', function (e) {
1097 if ( e.keyCode === 27 ) {
1098 e.stopPropagation();
1099
1100 close();
1101 }
1102 } );
1103 }
1104 else {
1105 $('div.dtr-modal-content')
1106 .empty()
1107 .append( render() );
1108 }
1109
1110 if ( options && options.header ) {
1111 $('div.dtr-modal-content').prepend(
1112 '<h2>'+options.header( row )+'</h2>'
1113 );
1114 }
1115 };
1116 }
1117};
1118
1119
1120var _childNodeStore = {};
1121
1122function _childNodes( dt, row, col ) {
1123 var name = row+'-'+col;
1124
1125 if ( _childNodeStore[ name ] ) {
1126 return _childNodeStore[ name ];
1127 }
1128
1129 // https://jsperf.com/childnodes-array-slice-vs-loop
1130 var nodes = [];
1131 var children = dt.cell( row, col ).node().childNodes;
1132 for ( var i=0, ien=children.length ; i<ien ; i++ ) {
1133 nodes.push( children[i] );
1134 }
1135
1136 _childNodeStore[ name ] = nodes;
1137
1138 return nodes;
1139}
1140
1141function _childNodesRestore( dt, row, col ) {
1142 var name = row+'-'+col;
1143
1144 if ( ! _childNodeStore[ name ] ) {
1145 return;
1146 }
1147
1148 var node = dt.cell( row, col ).node();
1149 var store = _childNodeStore[ name ];
1150 var parent = store[0].parentNode;
1151 var parentChildren = parent.childNodes;
1152 var a = [];
1153
1154 for ( var i=0, ien=parentChildren.length ; i<ien ; i++ ) {
1155 a.push( parentChildren[i] );
1156 }
1157
1158 for ( var j=0, jen=a.length ; j<jen ; j++ ) {
1159 node.appendChild( a[j] );
1160 }
1161
1162 _childNodeStore[ name ] = undefined;
1163}
1164
1165
1166/**
1167 * Display methods - functions which define how the hidden data should be shown
1168 * in the table.
1169 *
1170 * @namespace
1171 * @name Responsive.defaults
1172 * @static
1173 */
1174Responsive.renderer = {
1175 listHiddenNodes: function () {
1176 return function ( api, rowIdx, columns ) {
1177 var ul = $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>');
1178 var found = false;
1179
1180 var data = $.each( columns, function ( i, col ) {
1181 if ( col.hidden ) {
1182 $(
1183 '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
1184 '<span class="dtr-title">'+
1185 col.title+
1186 '</span> '+
1187 '</li>'
1188 )
1189 .append( $('<span class="dtr-data"/>').append( _childNodes( api, col.rowIndex, col.columnIndex ) ) )// api.cell( col.rowIndex, col.columnIndex ).node().childNodes ) )
1190 .appendTo( ul );
1191
1192 found = true;
1193 }
1194 } );
1195
1196 return found ?
1197 ul :
1198 false;
1199 };
1200 },
1201
1202 listHidden: function () {
1203 return function ( api, rowIdx, columns ) {
1204 var data = $.map( columns, function ( col ) {
1205 return col.hidden ?
1206 '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
1207 '<span class="dtr-title">'+
1208 col.title+
1209 '</span> '+
1210 '<span class="dtr-data">'+
1211 col.data+
1212 '</span>'+
1213 '</li>' :
1214 '';
1215 } ).join('');
1216
1217 return data ?
1218 $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>').append( data ) :
1219 false;
1220 }
1221 },
1222
1223 tableAll: function ( options ) {
1224 options = $.extend( {
1225 tableClass: ''
1226 }, options );
1227
1228 return function ( api, rowIdx, columns ) {
1229 var data = $.map( columns, function ( col ) {
1230 return '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
1231 '<td>'+col.title+':'+'</td> '+
1232 '<td>'+col.data+'</td>'+
1233 '</tr>';
1234 } ).join('');
1235
1236 return $('<table class="'+options.tableClass+' dtr-details" width="100%"/>').append( data );
1237 }
1238 }
1239};
1240
1241/**
1242 * Responsive default settings for initialisation
1243 *
1244 * @namespace
1245 * @name Responsive.defaults
1246 * @static
1247 */
1248Responsive.defaults = {
1249 /**
1250 * List of breakpoints for the instance. Note that this means that each
1251 * instance can have its own breakpoints. Additionally, the breakpoints
1252 * cannot be changed once an instance has been creased.
1253 *
1254 * @type {Array}
1255 * @default Takes the value of `Responsive.breakpoints`
1256 */
1257 breakpoints: Responsive.breakpoints,
1258
1259 /**
1260 * Enable / disable auto hiding calculations. It can help to increase
1261 * performance slightly if you disable this option, but all columns would
1262 * need to have breakpoint classes assigned to them
1263 *
1264 * @type {Boolean}
1265 * @default `true`
1266 */
1267 auto: true,
1268
1269 /**
1270 * Details control. If given as a string value, the `type` property of the
1271 * default object is set to that value, and the defaults used for the rest
1272 * of the object - this is for ease of implementation.
1273 *
1274 * The object consists of the following properties:
1275 *
1276 * * `display` - A function that is used to show and hide the hidden details
1277 * * `renderer` - function that is called for display of the child row data.
1278 * The default function will show the data from the hidden columns
1279 * * `target` - Used as the selector for what objects to attach the child
1280 * open / close to
1281 * * `type` - `false` to disable the details display, `inline` or `column`
1282 * for the two control types
1283 *
1284 * @type {Object|string}
1285 */
1286 details: {
1287 display: Responsive.display.childRow,
1288
1289 renderer: Responsive.renderer.listHidden(),
1290
1291 target: 0,
1292
1293 type: 'inline'
1294 },
1295
1296 /**
1297 * Orthogonal data request option. This is used to define the data type
1298 * requested when Responsive gets the data to show in the child row.
1299 *
1300 * @type {String}
1301 */
1302 orthogonal: 'display'
1303};
1304
1305
1306/*
1307 * API
1308 */
1309var Api = $.fn.dataTable.Api;
1310
1311// Doesn't do anything - work around for a bug in DT... Not documented
1312Api.register( 'responsive()', function () {
1313 return this;
1314} );
1315
1316Api.register( 'responsive.index()', function ( li ) {
1317 li = $(li);
1318
1319 return {
1320 column: li.data('dtr-index'),
1321 row: li.parent().data('dtr-index')
1322 };
1323} );
1324
1325Api.register( 'responsive.rebuild()', function () {
1326 return this.iterator( 'table', function ( ctx ) {
1327 if ( ctx._responsive ) {
1328 ctx._responsive._classLogic();
1329 }
1330 } );
1331} );
1332
1333Api.register( 'responsive.recalc()', function () {
1334 return this.iterator( 'table', function ( ctx ) {
1335 if ( ctx._responsive ) {
1336 ctx._responsive._resizeAuto();
1337 ctx._responsive._resize();
1338 }
1339 } );
1340} );
1341
1342Api.register( 'responsive.hasHidden()', function () {
1343 var ctx = this.context[0];
1344
1345 return ctx._responsive ?
1346 $.inArray( false, ctx._responsive.s.current ) !== -1 :
1347 false;
1348} );
1349
1350Api.registerPlural( 'columns().responsiveHidden()', 'column().responsiveHidden()', function () {
1351 return this.iterator( 'column', function ( settings, column ) {
1352 return settings._responsive ?
1353 settings._responsive.s.current[ column ] :
1354 false;
1355 }, 1 );
1356} );
1357
1358
1359/**
1360 * Version information
1361 *
1362 * @name Responsive.version
1363 * @static
1364 */
1365Responsive.version = '2.2.3';
1366
1367
1368$.fn.dataTable.Responsive = Responsive;
1369$.fn.DataTable.Responsive = Responsive;
1370
1371// Attach a listener to the document which listens for DataTables initialisation
1372// events so we can automatically initialise
1373$(document).on( 'preInit.dt.dtr', function (e, settings, json) {
1374 if ( e.namespace !== 'dt' ) {
1375 return;
1376 }
1377
1378 if ( $(settings.nTable).hasClass( 'responsive' ) ||
1379 $(settings.nTable).hasClass( 'dt-responsive' ) ||
1380 settings.oInit.responsive ||
1381 DataTable.defaults.responsive
1382 ) {
1383 var init = settings.oInit.responsive;
1384
1385 if ( init !== false ) {
1386 new Responsive( settings, $.isPlainObject( init ) ? init : {} );
1387 }
1388 }
1389} );
1390
1391
1392return Responsive;
1393}));
Note: See TracBrowser for help on using the repository browser.