GPQAPP

1
/*! Responsive 2.2.9
2
 * 2014-2021 SpryMedia Ltd - datatables.net/license
3
 */
4

5
/**
6
 * @summary     Responsive
7
 * @description Responsive tables plug-in for DataTables
8
 * @version     2.2.9
9
 * @file        dataTables.responsive.js
10
 * @author      SpryMedia Ltd (www.sprymedia.co.uk)
11
 * @contact     www.sprymedia.co.uk/contact
12
 * @copyright   Copyright 2014-2021 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';
50
var 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
 */
98
var 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).innerWidth();
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).innerWidth();
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
			dt.cells('.dtr-control').nodes().to$().removeClass('dtr-control');
185

186
			// Restore the columns that we've hidden
187
			$.each( that.s.current, function ( i, val ) {
188
				if ( val === false ) {
189
					that._setColumnVis( i, true );
190
				}
191
			} );
192
		} );
193

194
		// Reorder the breakpoints array here in case they have been added out
195
		// of order
196
		this.c.breakpoints.sort( function (a, b) {
197
			return a.width < b.width ? 1 :
198
				a.width > b.width ? -1 : 0;
199
		} );
200

201
		this._classLogic();
202
		this._resizeAuto();
203

204
		// Details handler
205
		var details = this.c.details;
206

207
		if ( details.type !== false ) {
208
			that._detailsInit();
209

210
			// DataTables will trigger this event on every column it shows and
211
			// hides individually
212
			dt.on( 'column-visibility.dtr', function () {
213
				// Use a small debounce to allow multiple columns to be set together
214
				if ( that._timer ) {
215
					clearTimeout( that._timer );
216
				}
217

218
				that._timer = setTimeout( function () {
219
					that._timer = null;
220

221
					that._classLogic();
222
					that._resizeAuto();
223
					that._resize(true);
224

225
					that._redrawChildren();
226
				}, 100 );
227
			} );
228

229
			// Redraw the details box on each draw which will happen if the data
230
			// has changed. This is used until DataTables implements a native
231
			// `updated` event for rows
232
			dt.on( 'draw.dtr', function () {
233
				that._redrawChildren();
234
			} );
235

236
			$(dt.table().node()).addClass( 'dtr-'+details.type );
237
		}
238

239
		dt.on( 'column-reorder.dtr', function (e, settings, details) {
240
			that._classLogic();
241
			that._resizeAuto();
242
			that._resize(true);
243
		} );
244

245
		// Change in column sizes means we need to calc
246
		dt.on( 'column-sizing.dtr', function () {
247
			that._resizeAuto();
248
			that._resize();
249
		});
250

251
		// On Ajax reload we want to reopen any child rows which are displayed
252
		// by responsive
253
		dt.on( 'preXhr.dtr', function () {
254
			var rowIds = [];
255
			dt.rows().every( function () {
256
				if ( this.child.isShown() ) {
257
					rowIds.push( this.id(true) );
258
				}
259
			} );
260

261
			dt.one( 'draw.dtr', function () {
262
				that._resizeAuto();
263
				that._resize();
264

265
				dt.rows( rowIds ).every( function () {
266
					that._detailsDisplay( this, false );
267
				} );
268
			} );
269
		});
270

271
		dt
272
			.on( 'draw.dtr', function () {
273
				that._controlClass();
274
			})
275
			.on( 'init.dtr', function (e, settings, details) {
276
				if ( e.namespace !== 'dt' ) {
277
					return;
278
				}
279

280
				that._resizeAuto();
281
				that._resize();
282

283
				// If columns were hidden, then DataTables needs to adjust the
284
				// column sizing
285
				if ( $.inArray( false, that.s.current ) ) {
286
					dt.columns.adjust();
287
				}
288
			} );
289

290
		// First pass - draw the table for the current viewport size
291
		this._resize();
292
	},
293

294

295
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
296
	 * Private methods
297
	 */
298

299
	/**
300
	 * Calculate the visibility for the columns in a table for a given
301
	 * breakpoint. The result is pre-determined based on the class logic if
302
	 * class names are used to control all columns, but the width of the table
303
	 * is also used if there are columns which are to be automatically shown
304
	 * and hidden.
305
	 *
306
	 * @param  {string} breakpoint Breakpoint name to use for the calculation
307
	 * @return {array} Array of boolean values initiating the visibility of each
308
	 *   column.
309
	 *  @private
310
	 */
311
	_columnsVisiblity: function ( breakpoint )
312
	{
313
		var dt = this.s.dt;
314
		var columns = this.s.columns;
315
		var i, ien;
316

317
		// Create an array that defines the column ordering based first on the
318
		// column's priority, and secondly the column index. This allows the
319
		// columns to be removed from the right if the priority matches
320
		var order = columns
321
			.map( function ( col, idx ) {
322
				return {
323
					columnIdx: idx,
324
					priority: col.priority
325
				};
326
			} )
327
			.sort( function ( a, b ) {
328
				if ( a.priority !== b.priority ) {
329
					return a.priority - b.priority;
330
				}
331
				return a.columnIdx - b.columnIdx;
332
			} );
333

334
		// Class logic - determine which columns are in this breakpoint based
335
		// on the classes. If no class control (i.e. `auto`) then `-` is used
336
		// to indicate this to the rest of the function
337
		var display = $.map( columns, function ( col, i ) {
338
			if ( dt.column(i).visible() === false ) {
339
				return 'not-visible';
340
			}
341
			return col.auto && col.minWidth === null ?
342
				false :
343
				col.auto === true ?
344
					'-' :
345
					$.inArray( breakpoint, col.includeIn ) !== -1;
346
		} );
347

348
		// Auto column control - first pass: how much width is taken by the
349
		// ones that must be included from the non-auto columns
350
		var requiredWidth = 0;
351
		for ( i=0, ien=display.length ; i<ien ; i++ ) {
352
			if ( display[i] === true ) {
353
				requiredWidth += columns[i].minWidth;
354
			}
355
		}
356

357
		// Second pass, use up any remaining width for other columns. For
358
		// scrolling tables we need to subtract the width of the scrollbar. It
359
		// may not be requires which makes this sub-optimal, but it would
360
		// require another full redraw to make complete use of those extra few
361
		// pixels
362
		var scrolling = dt.settings()[0].oScroll;
363
		var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
364
		var widthAvailable = dt.table().container().offsetWidth - bar;
365
		var usedWidth = widthAvailable - requiredWidth;
366

367
		// Control column needs to always be included. This makes it sub-
368
		// optimal in terms of using the available with, but to stop layout
369
		// thrashing or overflow. Also we need to account for the control column
370
		// width first so we know how much width is available for the other
371
		// columns, since the control column might not be the first one shown
372
		for ( i=0, ien=display.length ; i<ien ; i++ ) {
373
			if ( columns[i].control ) {
374
				usedWidth -= columns[i].minWidth;
375
			}
376
		}
377

378
		// Allow columns to be shown (counting by priority and then right to
379
		// left) until we run out of room
380
		var empty = false;
381
		for ( i=0, ien=order.length ; i<ien ; i++ ) {
382
			var colIdx = order[i].columnIdx;
383

384
			if ( display[colIdx] === '-' && ! columns[colIdx].control && columns[colIdx].minWidth ) {
385
				// Once we've found a column that won't fit we don't let any
386
				// others display either, or columns might disappear in the
387
				// middle of the table
388
				if ( empty || usedWidth - columns[colIdx].minWidth < 0 ) {
389
					empty = true;
390
					display[colIdx] = false;
391
				}
392
				else {
393
					display[colIdx] = true;
394
				}
395

396
				usedWidth -= columns[colIdx].minWidth;
397
			}
398
		}
399

400
		// Determine if the 'control' column should be shown (if there is one).
401
		// This is the case when there is a hidden column (that is not the
402
		// control column). The two loops look inefficient here, but they are
403
		// trivial and will fly through. We need to know the outcome from the
404
		// first , before the action in the second can be taken
405
		var showControl = false;
406

407
		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
408
			if ( ! columns[i].control && ! columns[i].never && display[i] === false ) {
409
				showControl = true;
410
				break;
411
			}
412
		}
413

414
		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
415
			if ( columns[i].control ) {
416
				display[i] = showControl;
417
			}
418

419
			// Replace not visible string with false from the control column detection above
420
			if ( display[i] === 'not-visible' ) {
421
				display[i] = false;
422
			}
423
		}
424

425
		// Finally we need to make sure that there is at least one column that
426
		// is visible
427
		if ( $.inArray( true, display ) === -1 ) {
428
			display[0] = true;
429
		}
430

431
		return display;
432
	},
433

434

435
	/**
436
	 * Create the internal `columns` array with information about the columns
437
	 * for the table. This includes determining which breakpoints the column
438
	 * will appear in, based upon class names in the column, which makes up the
439
	 * vast majority of this method.
440
	 *
441
	 * @private
442
	 */
443
	_classLogic: function ()
444
	{
445
		var that = this;
446
		var calc = {};
447
		var breakpoints = this.c.breakpoints;
448
		var dt = this.s.dt;
449
		var columns = dt.columns().eq(0).map( function (i) {
450
			var column = this.column(i);
451
			var className = column.header().className;
452
			var priority = dt.settings()[0].aoColumns[i].responsivePriority;
453
			var dataPriority = column.header().getAttribute('data-priority');
454

455
			if ( priority === undefined ) {
456
				priority = dataPriority === undefined || dataPriority === null?
457
					10000 :
458
					dataPriority * 1;
459
			}
460

461
			return {
462
				className: className,
463
				includeIn: [],
464
				auto:      false,
465
				control:   false,
466
				never:     className.match(/\bnever\b/) ? true : false,
467
				priority:  priority
468
			};
469
		} );
470

471
		// Simply add a breakpoint to `includeIn` array, ensuring that there are
472
		// no duplicates
473
		var add = function ( colIdx, name ) {
474
			var includeIn = columns[ colIdx ].includeIn;
475

476
			if ( $.inArray( name, includeIn ) === -1 ) {
477
				includeIn.push( name );
478
			}
479
		};
480

481
		var column = function ( colIdx, name, operator, matched ) {
482
			var size, i, ien;
483

484
			if ( ! operator ) {
485
				columns[ colIdx ].includeIn.push( name );
486
			}
487
			else if ( operator === 'max-' ) {
488
				// Add this breakpoint and all smaller
489
				size = that._find( name ).width;
490

491
				for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
492
					if ( breakpoints[i].width <= size ) {
493
						add( colIdx, breakpoints[i].name );
494
					}
495
				}
496
			}
497
			else if ( operator === 'min-' ) {
498
				// Add this breakpoint and all larger
499
				size = that._find( name ).width;
500

501
				for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
502
					if ( breakpoints[i].width >= size ) {
503
						add( colIdx, breakpoints[i].name );
504
					}
505
				}
506
			}
507
			else if ( operator === 'not-' ) {
508
				// Add all but this breakpoint
509
				for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
510
					if ( breakpoints[i].name.indexOf( matched ) === -1 ) {
511
						add( colIdx, breakpoints[i].name );
512
					}
513
				}
514
			}
515
		};
516

517
		// Loop over each column and determine if it has a responsive control
518
		// class
519
		columns.each( function ( col, i ) {
520
			var classNames = col.className.split(' ');
521
			var hasClass = false;
522

523
			// Split the class name up so multiple rules can be applied if needed
524
			for ( var k=0, ken=classNames.length ; k<ken ; k++ ) {
525
				var className = classNames[k].trim();
526

527
				if ( className === 'all' ) {
528
					// Include in all
529
					hasClass = true;
530
					col.includeIn = $.map( breakpoints, function (a) {
531
						return a.name;
532
					} );
533
					return;
534
				}
535
				else if ( className === 'none' || col.never ) {
536
					// Include in none (default) and no auto
537
					hasClass = true;
538
					return;
539
				}
540
				else if ( className === 'control' || className === 'dtr-control' ) {
541
					// Special column that is only visible, when one of the other
542
					// columns is hidden. This is used for the details control
543
					hasClass = true;
544
					col.control = true;
545
					return;
546
				}
547

548
				$.each( breakpoints, function ( j, breakpoint ) {
549
					// Does this column have a class that matches this breakpoint?
550
					var brokenPoint = breakpoint.name.split('-');
551
					var re = new RegExp( '(min\\-|max\\-|not\\-)?('+brokenPoint[0]+')(\\-[_a-zA-Z0-9])?' );
552
					var match = className.match( re );
553

554
					if ( match ) {
555
						hasClass = true;
556

557
						if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
558
							// Class name matches breakpoint name fully
559
							column( i, breakpoint.name, match[1], match[2]+match[3] );
560
						}
561
						else if ( match[2] === brokenPoint[0] && ! match[3] ) {
562
							// Class name matched primary breakpoint name with no qualifier
563
							column( i, breakpoint.name, match[1], match[2] );
564
						}
565
					}
566
				} );
567
			}
568

569
			// If there was no control class, then automatic sizing is used
570
			if ( ! hasClass ) {
571
				col.auto = true;
572
			}
573
		} );
574

575
		this.s.columns = columns;
576
	},
577

578
	/**
579
	 * Update the cells to show the correct control class / button
580
	 * @private
581
	 */
582
	_controlClass: function ()
583
	{
584
		if ( this.c.details.type === 'inline' ) {
585
			var dt = this.s.dt;
586
			var columnsVis = this.s.current;
587
			var firstVisible = $.inArray(true, columnsVis);
588

589
			// Remove from any cells which shouldn't have it
590
			dt.cells(
591
				null,
592
				function(idx) {
593
					return idx !== firstVisible;
594
				},
595
				{page: 'current'}
596
			)
597
				.nodes()
598
				.to$()
599
				.filter('.dtr-control')
600
				.removeClass('dtr-control');
601

602
			dt.cells(null, firstVisible, {page: 'current'})
603
				.nodes()
604
				.to$()
605
				.addClass('dtr-control');
606
		}
607
	},
608

609
	/**
610
	 * Show the details for the child row
611
	 *
612
	 * @param  {DataTables.Api} row    API instance for the row
613
	 * @param  {boolean}        update Update flag
614
	 * @private
615
	 */
616
	_detailsDisplay: function ( row, update )
617
	{
618
		var that = this;
619
		var dt = this.s.dt;
620
		var details = this.c.details;
621

622
		if ( details && details.type !== false ) {
623
			var res = details.display( row, update, function () {
624
				return details.renderer(
625
					dt, row[0], that._detailsObj(row[0])
626
				);
627
			} );
628

629
			if ( res === true || res === false ) {
630
				$(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
631
			}
632
		}
633
	},
634

635

636
	/**
637
	 * Initialisation for the details handler
638
	 *
639
	 * @private
640
	 */
641
	_detailsInit: function ()
642
	{
643
		var that    = this;
644
		var dt      = this.s.dt;
645
		var details = this.c.details;
646

647
		// The inline type always uses the first child as the target
648
		if ( details.type === 'inline' ) {
649
			details.target = 'td.dtr-control, th.dtr-control';
650
		}
651

652
		// Keyboard accessibility
653
		dt.on( 'draw.dtr', function () {
654
			that._tabIndexes();
655
		} );
656
		that._tabIndexes(); // Initial draw has already happened
657

658
		$( dt.table().body() ).on( 'keyup.dtr', 'td, th', function (e) {
659
			if ( e.keyCode === 13 && $(this).data('dtr-keyboard') ) {
660
				$(this).click();
661
			}
662
		} );
663

664
		// type.target can be a string jQuery selector or a column index
665
		var target   = details.target;
666
		var selector = typeof target === 'string' ? target : 'td, th';
667

668
		if ( target !== undefined || target !== null ) {
669
			// Click handler to show / hide the details rows when they are available
670
			$( dt.table().body() )
671
				.on( 'click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
672
					// If the table is not collapsed (i.e. there is no hidden columns)
673
					// then take no action
674
					if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
675
						return;
676
					}
677

678
					// Check that the row is actually a DataTable's controlled node
679
					if ( $.inArray( $(this).closest('tr').get(0), dt.rows().nodes().toArray() ) === -1 ) {
680
						return;
681
					}
682

683
					// For column index, we determine if we should act or not in the
684
					// handler - otherwise it is already okay
685
					if ( typeof target === 'number' ) {
686
						var targetIdx = target < 0 ?
687
							dt.columns().eq(0).length + target :
688
							target;
689

690
						if ( dt.cell( this ).index().column !== targetIdx ) {
691
							return;
692
						}
693
					}
694

695
					// $().closest() includes itself in its check
696
					var row = dt.row( $(this).closest('tr') );
697

698
					// Check event type to do an action
699
					if ( e.type === 'click' ) {
700
						// The renderer is given as a function so the caller can execute it
701
						// only when they need (i.e. if hiding there is no point is running
702
						// the renderer)
703
						that._detailsDisplay( row, false );
704
					}
705
					else if ( e.type === 'mousedown' ) {
706
						// For mouse users, prevent the focus ring from showing
707
						$(this).css('outline', 'none');
708
					}
709
					else if ( e.type === 'mouseup' ) {
710
						// And then re-allow at the end of the click
711
						$(this).trigger('blur').css('outline', '');
712
					}
713
				} );
714
		}
715
	},
716

717

718
	/**
719
	 * Get the details to pass to a renderer for a row
720
	 * @param  {int} rowIdx Row index
721
	 * @private
722
	 */
723
	_detailsObj: function ( rowIdx )
724
	{
725
		var that = this;
726
		var dt = this.s.dt;
727

728
		return $.map( this.s.columns, function( col, i ) {
729
			// Never and control columns should not be passed to the renderer
730
			if ( col.never || col.control ) {
731
				return;
732
			}
733

734
			var dtCol = dt.settings()[0].aoColumns[ i ];
735

736
			return {
737
				className:   dtCol.sClass,
738
				columnIndex: i,
739
				data:        dt.cell( rowIdx, i ).render( that.c.orthogonal ),
740
				hidden:      dt.column( i ).visible() && !that.s.current[ i ],
741
				rowIndex:    rowIdx,
742
				title:       dtCol.sTitle !== null ?
743
					dtCol.sTitle :
744
					$(dt.column(i).header()).text()
745
			};
746
		} );
747
	},
748

749

750
	/**
751
	 * Find a breakpoint object from a name
752
	 *
753
	 * @param  {string} name Breakpoint name to find
754
	 * @return {object}      Breakpoint description object
755
	 * @private
756
	 */
757
	_find: function ( name )
758
	{
759
		var breakpoints = this.c.breakpoints;
760

761
		for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
762
			if ( breakpoints[i].name === name ) {
763
				return breakpoints[i];
764
			}
765
		}
766
	},
767

768

769
	/**
770
	 * Re-create the contents of the child rows as the display has changed in
771
	 * some way.
772
	 *
773
	 * @private
774
	 */
775
	_redrawChildren: function ()
776
	{
777
		var that = this;
778
		var dt = this.s.dt;
779

780
		dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
781
			var row = dt.row( idx );
782

783
			that._detailsDisplay( dt.row( idx ), true );
784
		} );
785
	},
786

787

788
	/**
789
	 * Alter the table display for a resized viewport. This involves first
790
	 * determining what breakpoint the window currently is in, getting the
791
	 * column visibilities to apply and then setting them.
792
	 *
793
	 * @param  {boolean} forceRedraw Force a redraw
794
	 * @private
795
	 */
796
	_resize: function (forceRedraw)
797
	{
798
		var that = this;
799
		var dt = this.s.dt;
800
		var width = $(window).innerWidth();
801
		var breakpoints = this.c.breakpoints;
802
		var breakpoint = breakpoints[0].name;
803
		var columns = this.s.columns;
804
		var i, ien;
805
		var oldVis = this.s.current.slice();
806

807
		// Determine what breakpoint we are currently at
808
		for ( i=breakpoints.length-1 ; i>=0 ; i-- ) {
809
			if ( width <= breakpoints[i].width ) {
810
				breakpoint = breakpoints[i].name;
811
				break;
812
			}
813
		}
814
		
815
		// Show the columns for that break point
816
		var columnsVis = this._columnsVisiblity( breakpoint );
817
		this.s.current = columnsVis;
818

819
		// Set the class before the column visibility is changed so event
820
		// listeners know what the state is. Need to determine if there are
821
		// any columns that are not visible but can be shown
822
		var collapsedClass = false;
823
	
824
		for ( i=0, ien=columns.length ; i<ien ; i++ ) {
825
			if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control && ! dt.column(i).visible() === false ) {
826
				collapsedClass = true;
827
				break;
828
			}
829
		}
830

831
		$( dt.table().node() ).toggleClass( 'collapsed', collapsedClass );
832

833
		var changed = false;
834
		var visible = 0;
835

836
		dt.columns().eq(0).each( function ( colIdx, i ) {
837
			if ( columnsVis[i] === true ) {
838
				visible++;
839
			}
840

841
			if ( forceRedraw || columnsVis[i] !== oldVis[i] ) {
842
				changed = true;
843
				that._setColumnVis( colIdx, columnsVis[i] );
844
			}
845
		} );
846

847
		if ( changed ) {
848
			this._redrawChildren();
849

850
			// Inform listeners of the change
851
			$(dt.table().node()).trigger( 'responsive-resize.dt', [dt, this.s.current] );
852

853
			// If no records, update the "No records" display element
854
			if ( dt.page.info().recordsDisplay === 0 ) {
855
				$('td', dt.table().body()).eq(0).attr('colspan', visible);
856
			}
857
		}
858

859
		that._controlClass();
860
	},
861

862

863
	/**
864
	 * Determine the width of each column in the table so the auto column hiding
865
	 * has that information to work with. This method is never going to be 100%
866
	 * perfect since column widths can change slightly per page, but without
867
	 * seriously compromising performance this is quite effective.
868
	 *
869
	 * @private
870
	 */
871
	_resizeAuto: function ()
872
	{
873
		var dt = this.s.dt;
874
		var columns = this.s.columns;
875

876
		// Are we allowed to do auto sizing?
877
		if ( ! this.c.auto ) {
878
			return;
879
		}
880

881
		// Are there any columns that actually need auto-sizing, or do they all
882
		// have classes defined
883
		if ( $.inArray( true, $.map( columns, function (c) { return c.auto; } ) ) === -1 ) {
884
			return;
885
		}
886

887
		// Need to restore all children. They will be reinstated by a re-render
888
		if ( ! $.isEmptyObject( _childNodeStore ) ) {
889
			$.each( _childNodeStore, function ( key ) {
890
				var idx = key.split('-');
891

892
				_childNodesRestore( dt, idx[0]*1, idx[1]*1 );
893
			} );
894
		}
895

896
		// Clone the table with the current data in it
897
		var tableWidth   = dt.table().node().offsetWidth;
898
		var columnWidths = dt.columns;
899
		var clonedTable  = dt.table().node().cloneNode( false );
900
		var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
901
		var clonedBody   = $( dt.table().body() ).clone( false, false ).empty().appendTo( clonedTable ); // use jQuery because of IE8
902

903
		clonedTable.style.width = 'auto';
904

905
		// Header
906
		var headerCells = dt.columns()
907
			.header()
908
			.filter( function (idx) {
909
				return dt.column(idx).visible();
910
			} )
911
			.to$()
912
			.clone( false )
913
			.css( 'display', 'table-cell' )
914
			.css( 'width', 'auto' )
915
			.css( 'min-width', 0 );
916

917
		// Body rows - we don't need to take account of DataTables' column
918
		// visibility since we implement our own here (hence the `display` set)
919
		$(clonedBody)
920
			.append( $(dt.rows( { page: 'current' } ).nodes()).clone( false ) )
921
			.find( 'th, td' ).css( 'display', '' );
922

923
		// Footer
924
		var footer = dt.table().footer();
925
		if ( footer ) {
926
			var clonedFooter = $( footer.cloneNode( false ) ).appendTo( clonedTable );
927
			var footerCells = dt.columns()
928
				.footer()
929
				.filter( function (idx) {
930
					return dt.column(idx).visible();
931
				} )
932
				.to$()
933
				.clone( false )
934
				.css( 'display', 'table-cell' );
935

936
			$('<tr/>')
937
				.append( footerCells )
938
				.appendTo( clonedFooter );
939
		}
940

941
		$('<tr/>')
942
			.append( headerCells )
943
			.appendTo( clonedHeader );
944

945
		// In the inline case extra padding is applied to the first column to
946
		// give space for the show / hide icon. We need to use this in the
947
		// calculation
948
		if ( this.c.details.type === 'inline' ) {
949
			$(clonedTable).addClass( 'dtr-inline collapsed' );
950
		}
951
		
952
		// It is unsafe to insert elements with the same name into the DOM
953
		// multiple times. For example, cloning and inserting a checked radio
954
		// clears the chcecked state of the original radio.
955
		$( clonedTable ).find( '[name]' ).removeAttr( 'name' );
956

957
		// A position absolute table would take the table out of the flow of
958
		// our container element, bypassing the height and width (Scroller)
959
		$( clonedTable ).css( 'position', 'relative' )
960
		
961
		var inserted = $('<div/>')
962
			.css( {
963
				width: 1,
964
				height: 1,
965
				overflow: 'hidden',
966
				clear: 'both'
967
			} )
968
			.append( clonedTable );
969

970
		inserted.insertBefore( dt.table().node() );
971

972
		// The cloned header now contains the smallest that each column can be
973
		headerCells.each( function (i) {
974
			var idx = dt.column.index( 'fromVisible', i );
975
			columns[ idx ].minWidth =  this.offsetWidth || 0;
976
		} );
977

978
		inserted.remove();
979
	},
980

981
	/**
982
	 * Get the state of the current hidden columns - controlled by Responsive only
983
	 */
984
	_responsiveOnlyHidden: function ()
985
	{
986
		var dt = this.s.dt;
987

988
		return $.map( this.s.current, function (v, i) {
989
			// If the column is hidden by DataTables then it can't be hidden by
990
			// Responsive!
991
			if ( dt.column(i).visible() === false ) {
992
				return true;
993
			}
994
			return v;
995
		} );
996
	},
997

998
	/**
999
	 * Set a column's visibility.
1000
	 *
1001
	 * We don't use DataTables' column visibility controls in order to ensure
1002
	 * that column visibility can Responsive can no-exist. Since only IE8+ is
1003
	 * supported (and all evergreen browsers of course) the control of the
1004
	 * display attribute works well.
1005
	 *
1006
	 * @param {integer} col      Column index
1007
	 * @param {boolean} showHide Show or hide (true or false)
1008
	 * @private
1009
	 */
1010
	_setColumnVis: function ( col, showHide )
1011
	{
1012
		var dt = this.s.dt;
1013
		var display = showHide ? '' : 'none'; // empty string will remove the attr
1014

1015
		$( dt.column( col ).header() ).css( 'display', display );
1016
		$( dt.column( col ).footer() ).css( 'display', display );
1017
		dt.column( col ).nodes().to$().css( 'display', display );
1018

1019
		// If the are child nodes stored, we might need to reinsert them
1020
		if ( ! $.isEmptyObject( _childNodeStore ) ) {
1021
			dt.cells( null, col ).indexes().each( function (idx) {
1022
				_childNodesRestore( dt, idx.row, idx.column );
1023
			} );
1024
		}
1025
	},
1026

1027

1028
	/**
1029
	 * Update the cell tab indexes for keyboard accessibility. This is called on
1030
	 * every table draw - that is potentially inefficient, but also the least
1031
	 * complex option given that column visibility can change on the fly. Its a
1032
	 * shame user-focus was removed from CSS 3 UI, as it would have solved this
1033
	 * issue with a single CSS statement.
1034
	 *
1035
	 * @private
1036
	 */
1037
	_tabIndexes: function ()
1038
	{
1039
		var dt = this.s.dt;
1040
		var cells = dt.cells( { page: 'current' } ).nodes().to$();
1041
		var ctx = dt.settings()[0];
1042
		var target = this.c.details.target;
1043

1044
		cells.filter( '[data-dtr-keyboard]' ).removeData( '[data-dtr-keyboard]' );
1045

1046
		if ( typeof target === 'number' ) {
1047
			dt.cells( null, target, { page: 'current' } ).nodes().to$()
1048
				.attr( 'tabIndex', ctx.iTabIndex )
1049
				.data( 'dtr-keyboard', 1 );
1050
		}
1051
		else {
1052
			// This is a bit of a hack - we need to limit the selected nodes to just
1053
			// those of this table
1054
			if ( target === 'td:first-child, th:first-child' ) {
1055
				target = '>td:first-child, >th:first-child';
1056
			}
1057

1058
			$( target, dt.rows( { page: 'current' } ).nodes() )
1059
				.attr( 'tabIndex', ctx.iTabIndex )
1060
				.data( 'dtr-keyboard', 1 );
1061
		}
1062
	}
1063
} );
1064

1065

1066
/**
1067
 * List of default breakpoints. Each item in the array is an object with two
1068
 * properties:
1069
 *
1070
 * * `name` - the breakpoint name.
1071
 * * `width` - the breakpoint width
1072
 *
1073
 * @name Responsive.breakpoints
1074
 * @static
1075
 */
1076
Responsive.breakpoints = [
1077
	{ name: 'desktop',  width: Infinity },
1078
	{ name: 'tablet-l', width: 1024 },
1079
	{ name: 'tablet-p', width: 768 },
1080
	{ name: 'mobile-l', width: 480 },
1081
	{ name: 'mobile-p', width: 320 }
1082
];
1083

1084

1085
/**
1086
 * Display methods - functions which define how the hidden data should be shown
1087
 * in the table.
1088
 *
1089
 * @namespace
1090
 * @name Responsive.defaults
1091
 * @static
1092
 */
1093
Responsive.display = {
1094
	childRow: function ( row, update, render ) {
1095
		if ( update ) {
1096
			if ( $(row.node()).hasClass('parent') ) {
1097
				row.child( render(), 'child' ).show();
1098

1099
				return true;
1100
			}
1101
		}
1102
		else {
1103
			if ( ! row.child.isShown()  ) {
1104
				row.child( render(), 'child' ).show();
1105
				$( row.node() ).addClass( 'parent' );
1106

1107
				return true;
1108
			}
1109
			else {
1110
				row.child( false );
1111
				$( row.node() ).removeClass( 'parent' );
1112

1113
				return false;
1114
			}
1115
		}
1116
	},
1117

1118
	childRowImmediate: function ( row, update, render ) {
1119
		if ( (! update && row.child.isShown()) || ! row.responsive.hasHidden() ) {
1120
			// User interaction and the row is show, or nothing to show
1121
			row.child( false );
1122
			$( row.node() ).removeClass( 'parent' );
1123

1124
			return false;
1125
		}
1126
		else {
1127
			// Display
1128
			row.child( render(), 'child' ).show();
1129
			$( row.node() ).addClass( 'parent' );
1130

1131
			return true;
1132
		}
1133
	},
1134

1135
	// This is a wrapper so the modal options for Bootstrap and jQuery UI can
1136
	// have options passed into them. This specific one doesn't need to be a
1137
	// function but it is for consistency in the `modal` name
1138
	modal: function ( options ) {
1139
		return function ( row, update, render ) {
1140
			if ( ! update ) {
1141
				// Show a modal
1142
				var close = function () {
1143
					modal.remove(); // will tidy events for us
1144
					$(document).off( 'keypress.dtr' );
1145
				};
1146

1147
				var modal = $('<div class="dtr-modal"/>')
1148
					.append( $('<div class="dtr-modal-display"/>')
1149
						.append( $('<div class="dtr-modal-content"/>')
1150
							.append( render() )
1151
						)
1152
						.append( $('<div class="dtr-modal-close">&times;</div>' )
1153
							.click( function () {
1154
								close();
1155
							} )
1156
						)
1157
					)
1158
					.append( $('<div class="dtr-modal-background"/>')
1159
						.click( function () {
1160
							close();
1161
						} )
1162
					)
1163
					.appendTo( 'body' );
1164

1165
				$(document).on( 'keyup.dtr', function (e) {
1166
					if ( e.keyCode === 27 ) {
1167
						e.stopPropagation();
1168

1169
						close();
1170
					}
1171
				} );
1172
			}
1173
			else {
1174
				$('div.dtr-modal-content')
1175
					.empty()
1176
					.append( render() );
1177
			}
1178

1179
			if ( options && options.header ) {
1180
				$('div.dtr-modal-content').prepend(
1181
					'<h2>'+options.header( row )+'</h2>'
1182
				);
1183
			}
1184
		};
1185
	}
1186
};
1187

1188

1189
var _childNodeStore = {};
1190

1191
function _childNodes( dt, row, col ) {
1192
	var name = row+'-'+col;
1193

1194
	if ( _childNodeStore[ name ] ) {
1195
		return _childNodeStore[ name ];
1196
	}
1197

1198
	// https://jsperf.com/childnodes-array-slice-vs-loop
1199
	var nodes = [];
1200
	var children = dt.cell( row, col ).node().childNodes;
1201
	for ( var i=0, ien=children.length ; i<ien ; i++ ) {
1202
		nodes.push( children[i] );
1203
	}
1204

1205
	_childNodeStore[ name ] = nodes;
1206

1207
	return nodes;
1208
}
1209

1210
function _childNodesRestore( dt, row, col ) {
1211
	var name = row+'-'+col;
1212

1213
	if ( ! _childNodeStore[ name ] ) {
1214
		return;
1215
	}
1216

1217
	var node = dt.cell( row, col ).node();
1218
	var store = _childNodeStore[ name ];
1219
	var parent = store[0].parentNode;
1220
	var parentChildren = parent.childNodes;
1221
	var a = [];
1222

1223
	for ( var i=0, ien=parentChildren.length ; i<ien ; i++ ) {
1224
		a.push( parentChildren[i] );
1225
	}
1226

1227
	for ( var j=0, jen=a.length ; j<jen ; j++ ) {
1228
		node.appendChild( a[j] );
1229
	}
1230

1231
	_childNodeStore[ name ] = undefined;
1232
}
1233

1234

1235
/**
1236
 * Display methods - functions which define how the hidden data should be shown
1237
 * in the table.
1238
 *
1239
 * @namespace
1240
 * @name Responsive.defaults
1241
 * @static
1242
 */
1243
Responsive.renderer = {
1244
	listHiddenNodes: function () {
1245
		return function ( api, rowIdx, columns ) {
1246
			var ul = $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>');
1247
			var found = false;
1248

1249
			var data = $.each( columns, function ( i, col ) {
1250
				if ( col.hidden ) {
1251
					var klass = col.className ?
1252
						'class="'+ col.className +'"' :
1253
						'';
1254
	
1255
					$(
1256
						'<li '+klass+' data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
1257
							'<span class="dtr-title">'+
1258
								col.title+
1259
							'</span> '+
1260
						'</li>'
1261
					)
1262
						.append( $('<span class="dtr-data"/>').append( _childNodes( api, col.rowIndex, col.columnIndex ) ) )// api.cell( col.rowIndex, col.columnIndex ).node().childNodes ) )
1263
						.appendTo( ul );
1264

1265
					found = true;
1266
				}
1267
			} );
1268

1269
			return found ?
1270
				ul :
1271
				false;
1272
		};
1273
	},
1274

1275
	listHidden: function () {
1276
		return function ( api, rowIdx, columns ) {
1277
			var data = $.map( columns, function ( col ) {
1278
				var klass = col.className ?
1279
					'class="'+ col.className +'"' :
1280
					'';
1281

1282
				return col.hidden ?
1283
					'<li '+klass+' data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
1284
						'<span class="dtr-title">'+
1285
							col.title+
1286
						'</span> '+
1287
						'<span class="dtr-data">'+
1288
							col.data+
1289
						'</span>'+
1290
					'</li>' :
1291
					'';
1292
			} ).join('');
1293

1294
			return data ?
1295
				$('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>').append( data ) :
1296
				false;
1297
		}
1298
	},
1299

1300
	tableAll: function ( options ) {
1301
		options = $.extend( {
1302
			tableClass: ''
1303
		}, options );
1304

1305
		return function ( api, rowIdx, columns ) {
1306
			var data = $.map( columns, function ( col ) {
1307
				var klass = col.className ?
1308
					'class="'+ col.className +'"' :
1309
					'';
1310

1311
				return '<tr '+klass+' data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
1312
						'<td>'+col.title+':'+'</td> '+
1313
						'<td>'+col.data+'</td>'+
1314
					'</tr>';
1315
			} ).join('');
1316

1317
			return $('<table class="'+options.tableClass+' dtr-details" width="100%"/>').append( data );
1318
		}
1319
	}
1320
};
1321

1322
/**
1323
 * Responsive default settings for initialisation
1324
 *
1325
 * @namespace
1326
 * @name Responsive.defaults
1327
 * @static
1328
 */
1329
Responsive.defaults = {
1330
	/**
1331
	 * List of breakpoints for the instance. Note that this means that each
1332
	 * instance can have its own breakpoints. Additionally, the breakpoints
1333
	 * cannot be changed once an instance has been creased.
1334
	 *
1335
	 * @type {Array}
1336
	 * @default Takes the value of `Responsive.breakpoints`
1337
	 */
1338
	breakpoints: Responsive.breakpoints,
1339

1340
	/**
1341
	 * Enable / disable auto hiding calculations. It can help to increase
1342
	 * performance slightly if you disable this option, but all columns would
1343
	 * need to have breakpoint classes assigned to them
1344
	 *
1345
	 * @type {Boolean}
1346
	 * @default  `true`
1347
	 */
1348
	auto: true,
1349

1350
	/**
1351
	 * Details control. If given as a string value, the `type` property of the
1352
	 * default object is set to that value, and the defaults used for the rest
1353
	 * of the object - this is for ease of implementation.
1354
	 *
1355
	 * The object consists of the following properties:
1356
	 *
1357
	 * * `display` - A function that is used to show and hide the hidden details
1358
	 * * `renderer` - function that is called for display of the child row data.
1359
	 *   The default function will show the data from the hidden columns
1360
	 * * `target` - Used as the selector for what objects to attach the child
1361
	 *   open / close to
1362
	 * * `type` - `false` to disable the details display, `inline` or `column`
1363
	 *   for the two control types
1364
	 *
1365
	 * @type {Object|string}
1366
	 */
1367
	details: {
1368
		display: Responsive.display.childRow,
1369

1370
		renderer: Responsive.renderer.listHidden(),
1371

1372
		target: 0,
1373

1374
		type: 'inline'
1375
	},
1376

1377
	/**
1378
	 * Orthogonal data request option. This is used to define the data type
1379
	 * requested when Responsive gets the data to show in the child row.
1380
	 *
1381
	 * @type {String}
1382
	 */
1383
	orthogonal: 'display'
1384
};
1385

1386

1387
/*
1388
 * API
1389
 */
1390
var Api = $.fn.dataTable.Api;
1391

1392
// Doesn't do anything - work around for a bug in DT... Not documented
1393
Api.register( 'responsive()', function () {
1394
	return this;
1395
} );
1396

1397
Api.register( 'responsive.index()', function ( li ) {
1398
	li = $(li);
1399

1400
	return {
1401
		column: li.data('dtr-index'),
1402
		row:    li.parent().data('dtr-index')
1403
	};
1404
} );
1405

1406
Api.register( 'responsive.rebuild()', function () {
1407
	return this.iterator( 'table', function ( ctx ) {
1408
		if ( ctx._responsive ) {
1409
			ctx._responsive._classLogic();
1410
		}
1411
	} );
1412
} );
1413

1414
Api.register( 'responsive.recalc()', function () {
1415
	return this.iterator( 'table', function ( ctx ) {
1416
		if ( ctx._responsive ) {
1417
			ctx._responsive._resizeAuto();
1418
			ctx._responsive._resize();
1419
		}
1420
	} );
1421
} );
1422

1423
Api.register( 'responsive.hasHidden()', function () {
1424
	var ctx = this.context[0];
1425

1426
	return ctx._responsive ?
1427
		$.inArray( false, ctx._responsive._responsiveOnlyHidden() ) !== -1 :
1428
		false;
1429
} );
1430

1431
Api.registerPlural( 'columns().responsiveHidden()', 'column().responsiveHidden()', function () {
1432
	return this.iterator( 'column', function ( settings, column ) {
1433
		return settings._responsive ?
1434
			settings._responsive._responsiveOnlyHidden()[ column ] :
1435
			false;
1436
	}, 1 );
1437
} );
1438

1439

1440
/**
1441
 * Version information
1442
 *
1443
 * @name Responsive.version
1444
 * @static
1445
 */
1446
Responsive.version = '2.2.9';
1447

1448

1449
$.fn.dataTable.Responsive = Responsive;
1450
$.fn.DataTable.Responsive = Responsive;
1451

1452
// Attach a listener to the document which listens for DataTables initialisation
1453
// events so we can automatically initialise
1454
$(document).on( 'preInit.dt.dtr', function (e, settings, json) {
1455
	if ( e.namespace !== 'dt' ) {
1456
		return;
1457
	}
1458

1459
	if ( $(settings.nTable).hasClass( 'responsive' ) ||
1460
		 $(settings.nTable).hasClass( 'dt-responsive' ) ||
1461
		 settings.oInit.responsive ||
1462
		 DataTable.defaults.responsive
1463
	) {
1464
		var init = settings.oInit.responsive;
1465

1466
		if ( init !== false ) {
1467
			new Responsive( settings, $.isPlainObject( init ) ? init : {}  );
1468
		}
1469
	}
1470
} );
1471

1472

1473
return Responsive;
1474
}));
1475