frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2025-03-01 10:31:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added assets + dependencies

Browse Source
This commit is contained in:
Bill Zimmerman
2015-02-25 14:08:14 +01:00
parent cb37f12f56
commit d5678d622e
748 changed files with 154165 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
bower_components/datatables-responsive/.bower.json vendored Executable file
View File

@@ -0,0 +1,23 @@
{
"name": "datatables-responsive",
"version": "1.0.3",
"main": [
"js/dataTables.responsive.js",
"css/dataTables.responsive.css"
],
"dependencies": {
"jquery": ">=1.7.0",
"datatables": ">=1.10.1"
},
"homepage": "https://github.com/DataTables/Responsive",
"_release": "1.0.3",
"_resolution": {
"type": "version",
"tag": "1.0.3",
"commit": "21e780fff0ebf78ca67f714d8ec07ca4f20a104b"
},
"_source": "git://github.com/DataTables/Responsive.git",
"_target": "~1.0.3",
"_originalSource": "datatables-responsive",
"_direct": true
}

1
bower_components/datatables-responsive/.gitignore vendored Executable file
View File

@@ -0,0 +1 @@
.sass-cache

0
bower_components/datatables-responsive/Readme.md vendored Executable file
View File

12
bower_components/datatables-responsive/bower.json vendored Executable file
View File

@@ -0,0 +1,12 @@
{
"name": "datatables-responsive",
"version": "1.0.2",
"main": [
"js/dataTables.responsive.js",
"css/dataTables.responsive.css"
],
"dependencies": {
"jquery": ">=1.7.0",
"datatables": ">=1.10.1"
}
}

94
bower_components/datatables-responsive/css/dataTables.responsive.css vendored Executable file
View File

@@ -0,0 +1,94 @@
table.dataTable.dtr-inline.collapsed tbody td:first-child,
table.dataTable.dtr-inline.collapsed tbody th:first-child {
position: relative;
padding-left: 30px;
cursor: pointer;
}
table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
top: 8px;
left: 4px;
height: 16px;
width: 16px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 16px;
text-align: center;
line-height: 14px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
content: '+';
background-color: #31b131;
}
table.dataTable.dtr-inline.collapsed tbody td:first-child.dataTables_empty:before,
table.dataTable.dtr-inline.collapsed tbody th:first-child.dataTables_empty:before {
display: none;
}
table.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before {
content: '-';
background-color: #d33333;
}
table.dataTable.dtr-inline.collapsed tbody tr.child td:before {
display: none;
}
table.dataTable.dtr-column tbody td.control,
table.dataTable.dtr-column tbody th.control {
position: relative;
cursor: pointer;
}
table.dataTable.dtr-column tbody td.control:before,
table.dataTable.dtr-column tbody th.control:before {
top: 50%;
left: 50%;
height: 16px;
width: 16px;
margin-top: -10px;
margin-left: -10px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 16px;
text-align: center;
line-height: 14px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
content: '+';
background-color: #31b131;
}
table.dataTable.dtr-column tbody tr.parent td.control:before,
table.dataTable.dtr-column tbody tr.parent th.control:before {
content: '-';
background-color: #d33333;
}
table.dataTable tr.child {
padding: 0.5em 1em;
}
table.dataTable tr.child:hover {
background: transparent !important;
}
table.dataTable tr.child ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
}
table.dataTable tr.child ul li {
border-bottom: 1px solid #efefef;
padding: 0.5em 0;
white-space: nowrap;
}
table.dataTable tr.child ul li:first-child {
padding-top: 0;
}
table.dataTable tr.child ul li:last-child {
border-bottom: none;
}
table.dataTable tr.child span.dtr-title {
display: inline-block;
min-width: 75px;
font-weight: bold;
}

133
bower_components/datatables-responsive/css/dataTables.responsive.scss vendored Executable file
View File

@@ -0,0 +1,133 @@
//
// Mixins
//
@mixin control() {
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 16px;
text-align: center;
line-height: 14px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
}
@mixin control-open() {
content: '+';
background-color: #31b131;
}
@mixin control-close() {
content: '-';
background-color: #d33333;
}
//
// Table styles
//
table.dataTable {
// Styling for the `inline` type
&.dtr-inline.collapsed tbody {
td:first-child,
th:first-child {
position: relative;
padding-left: 30px;
cursor: pointer;
&:before {
top: 8px;
left: 4px;
height: 16px;
width: 16px;
@include control;
@include control-open;
}
&.dataTables_empty:before {
display: none;
}
}
tr.parent {
td:first-child:before,
th:first-child:before {
@include control-close;
}
}
tr.child td:before {
display: none;
}
}
// Styling for the `column` type
&.dtr-column tbody {
td.control,
th.control {
position: relative;
cursor: pointer;
&:before {
top: 50%;
left: 50%;
height: 16px;
width: 16px;
margin-top: -10px;
margin-left: -10px;
@include control;
@include control-open;
}
}
tr.parent {
td.control:before,
th.control:before {
@include control-close;
}
}
}
// Child row styling
tr.child {
padding: 0.5em 1em;
&:hover {
background: transparent !important;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
li {
border-bottom: 1px solid #efefef;
padding: 0.5em 0;
white-space: nowrap;
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: none;
}
}
}
span.dtr-title {
display: inline-block;
min-width: 75px;
font-weight: bold;
}
span.dtr-data {}
}
}

34
bower_components/datatables-responsive/docs/api/responsive.index().xml vendored Executable file
View File

@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-api group="responsive">
<name>responsive.index()</name>
<summary>Obtain the cell index from a `-tag li` details element</summary>
<since>1.0.3</since>
<type type="function">
<signature>responsive.index( li )</signature>
<description>Calculate the cell index from a `-tag li` details element</description>
<parameter type="node|jQuery" name="li">
The `-tag li` node (or a jQuery collection containing the node) to get the cell index for.
</parameter>
<returns type="object">Cell object that contains the properties `row` and `column`. This object can be used as a DataTables `dt-type cell-selector`.</returns>
</type>
<description>
When working with Responsive's details rows it can often be useful to obtain a reference to the cell, row or column that the data shown in the details row comes from. This method provides that ability, returning an object that can be used as a `dt-type cell-selector` with the `dt-api cell()` method.
Note that this method requires the default renderer to be used for `r-init responsive.details.renderer`. If a custom method is used it will not be able to obtain the information required to calculate the indexes.
</description>
<example title="Add a class name to the host cell for data when clicked on"><![CDATA[
var table = $('#example').DataTable();
$('#example').on( 'click', 'li', function () {
var cellIndx = table.responsive.index( this );
$( table.cell( cellIndex ).node() )
.addClass( 'highlight' );
} );
]]></example>
</dt-api>

38
bower_components/datatables-responsive/docs/api/responsive.recalc().xml vendored Executable file
View File

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-api group="responsive">
<name>responsive.recalc()</name>
<summary>Recalculate the widths used by responsive after a change in the display</summary>
<since>1.0.1</since>
<type type="function">
<signature>responsive.recalc()</signature>
<description>Recalculate the widths used by responsive after a change in the display</description>
<returns type="DataTables.Api">DataTables API instance with the cached data for each selected cell in the result set</returns>
</type>
<description>
If a table is initialised while it is hidden (i.e. `display: none`) the browser will not calculate the width of columns (since the non-displayed element has no width!). As such, Responsive's calculations for which columns to show at the various widths will be incorrect in this situation.
To resolve this problem, this method is made available to trigger a recalculation of the column widths used by Responsive. Call it once the table is made visible to have Responsive display correctly.
It is worth noting that in many ways this method is similar to `dt-api columns.adjust()` and you will likely wish to use both together (see examples below).
</description>
<example title="Recalculate the responsive actions once the table is made visible"><![CDATA[
var table = $('#example').DataTable();
$('#example').css( 'display', 'table' );
table.responsive.recalc();
]]></example>
<example title="Use `columns.adjust()` and `responsive.recalc()`"><![CDATA[
$('#example').DataTable()
.columns.adjust()
.responsive.recalc();
]]></example>
</dt-api>

74
bower_components/datatables-responsive/docs/option/responsive.breakpoints.xml vendored Executable file
View File

@@ -0,0 +1,74 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<name>responsive.breakpoints</name>
<summary>Set the breakpoints for a Responsive instance</summary>
<since>Responsive 1.0.0</since>
<type type="array">
<description>
<![CDATA[
An array of objects, where each object contains two properties that describe each breakpoint:
* `name` - the breakpoint name allowing class targeting. This can be a single word, or append `\-[a-z]` to provide sub-breakpoints as the default does to allow, for example, tablet, tablet landscape or tablet portrait breakpoints.
* `width` - the width (pixels) of the page viewport at which this breakpoint will apply. The value given is the maximum size at which this breakpoint will be applied, and it will be used until the next breakpoint is found. For example, if using the default breakpoints (above), the `tablet-l` breakpoint will be applied for `768 < x <= 1024` (where `x` is the viewport width).
]]>
</description>
</type>
<default value="$.fn.dataTable.Responsive.breakpoints">
The default breakpoints used by Responsive are defined by the static array defined in this object. This provides the ability to set common breakpoints that are used by all tables easily, if required.
</default>
<description>
The visibility of columns in a DataTable with Responsive enabled can be controlled by breakpoints and class names matching those breakpoints (and other logical operations) . This provides the ability to exactly control which columns in a table will be visible in each device type. [See the Responsive manual](/extensions/responsive/classes) for more information.
The breakpoints that are used by a Responsive instance are unique to that instance (i.e. each table) allowing different breakpoints to be set for different tables is needed.
The default breakpoints defined by `$.fn.dataTable.Responsive.breakpoints` is:
```js
[
{ name: 'desktop', width: Infinity },
{ name: 'tablet-l', width: 1024 },
{ name: 'tablet-p', width: 768 },
{ name: 'mobile-l', width: 480 },
{ name: 'mobile-p', width: 320 }
]
```
Note that if you define your own array of breakpoints, ordering of the breakpoints is not important. Responsive will automatically sort the array into its required internal order before using it.
Please note that as with all other configuration options for Responsive, this option is an extension to the [default set of DataTables options](/reference/init). This property should be set in the DataTables initialisation object.
</description>
<example title="Set custom breakpoints in the DataTables initialisation"><![CDATA[
$('#example').DataTable( {
responsive: {
breakpoints: [
{ name: 'desktop', width: Infinity },
{ name: 'tablet', width: 1024 },
{ name: 'fablet', width: 768 },
{ name: 'phone', width: 480 }
]
}
} );
]]></example>
<example title="Set custom breakpoints using the defaults"><![CDATA[
$.fn.dataTable.Responsive.breakpoints = [
{ name: 'desktop', width: Infinity },
{ name: 'tablet', width: 1024 },
{ name: 'fablet', width: 768 },
{ name: 'phone', width: 480 }
];
$('#example').DataTable( {
responsive: true
} );
]]></example>
</dt-option>

65
bower_components/datatables-responsive/docs/option/responsive.details.renderer.xml vendored Executable file
View File

@@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<name>responsive.details.renderer</name>
<summary>Define the renderer used to display the child rows</summary>
<since>Responsive 1.0.0</since>
<type type="function">
<signature>renderer( api, rowIdx )</signature>
<parameter type="DataTables.Api" name="api">
DataTables API instance for the table in question
</parameter>
<parameter type="integer" name="rowIdx">
Row index for the row that the renderer is being asked to render. Use the `dt-api row()` and / or `dt-api cells()` methods to get information from the API about the row so the information can be rendered.
</parameter>
<returns type="boolean|string">
Two values can be returned:
* `-type boolean` `false` - Do not display a child row
* `-type string` - The information to be shown in the child row, including any required HTML.
</returns>
</type>
<default value="function">
Function that will display the hidden information in a `-tag ul/li` list.
</default>
<description>
The information contained in the details rows that are displayed by Responsive are created through this function. By default it will create a `-tag ul/li` list showing the data from cells that are hidden, but you can provide a custom function that will create a child row containing whatever information you wish to display.
This function is executed for every child row in a table, and is run whenever the column visibility of the table changes.
Please note that as with all other configuration options for Responsive, this option is an extension to the [default set of DataTables options](/reference/init). This property should be set in the DataTables initialisation object.
</description>
<example title="Custom renderer which displays the data that has been hidden in an HTML table"><![CDATA[
$('#example').DataTable( {
responsive: {
details: {
renderer: function ( api, rowIdx ) {
// Select hidden columns for the given row
var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
var header = $( api.column( cell.column ).header() );
return '<tr>'+
'<td>'+
header.text()+':'+
'</td> '+
'<td>'+
api.cell( cell ).data()+
'</td>'+
'</tr>';
} ).toArray().join('');
return data ?
$('<table/>').append( data ) :
false;
}
}
}
} );
]]></example>
</dt-option>

64
bower_components/datatables-responsive/docs/option/responsive.details.target.xml vendored Executable file
View File

@@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<name>responsive.details.target</name>
<summary>Column / selector for child row display control when using `column` details type</summary>
<since>Responsive 1.0.0</since>
<type type="number">
<description>
<![CDATA[
Column index to which the show / hide control should be attached. This can be `>=0` to count columns from the left, or `<0` to count from the right.
Please note that the column defined here should have the class `-string control` added to it. This allows the Responsive CSS to display a control icon to the end user.
]]>
</description>
</type>
<type type="string">
<description>
As a string, this option is used as a jQuery selector to determine what element(s) will activate the show / hide control for the details child rows. This provides the ability to use any element in a table - for example you can use the whole row, or a single `-tag img` element in the row.
</description>
</type>
<default value="0"/>
<description>
When the `column` type is selected for the `r-init responsive.details.type` option, this option provides the ability to control what element in the table will activate the show / hide control in each row. This can be one of an column index, or a jQuery selector, as detailed below.
If the `inline` option is used for `r-init responsive.details.type` this option has no effect.
Please note that as with all other configuration options for Responsive, this option is an extension to the [default set of DataTables options](/reference/init). This property should be set in the DataTables initialisation object.
</description>
<example title="Use the `column` control type and target the right most column"><![CDATA[
$('#example').DataTable( {
responsive: {
details: {
type: 'column',
target: -1
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: -1
} ]
} );
]]></example>
<example title="Use the whole row to show / hide the details row"><![CDATA[
$('#example').DataTable( {
responsive: {
details: {
type: 'column',
target: 'tr'
}
}
} );
]]></example>
</dt-option>

47
bower_components/datatables-responsive/docs/option/responsive.details.type.xml vendored Executable file
View File

@@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<name>responsive.details.type</name>
<summary>Set the child row display control type</summary>
<since>Responsive 1.0.0</since>
<type type="string">
<description>
The child row display type to use. This can be one of:
* `-string inline` - Use the first column to display the control element
* `-string column` - Use a whole column to display the control element. Note that if used as a column type and the `target` option is set to be a column index, the class assigned to that column in the DataTable should be `control` to allow the CSS to display a visual show / hide control to the end user.
</description>
</type>
<default value="inline"/>
<description>
Responsive has two built in methods of managing how the child row display control is shown to the end user:
* `inline` - where the first column in the table has additional padding added to it and the `:before` pseudo element is used to display the button.
* `column` - where a whole column is dedicated to the show / hide control.
The `inline` style is useful if you already have a table that you quickly want to add Responsive to without changing its structure, while the `column` type can be useful if you don't want the first column's layout to be modified by the padding required to make space for the inline display.
Please note that as with all other configuration options for Responsive, this option is an extension to the [default set of DataTables options](/reference/init). This property should be set in the DataTables initialisation object.
</description>
<example title="Use the `column` control type"><![CDATA[
$('#example').DataTable( {
responsive: {
details: {
type: 'column'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
} );
]]></example>
</dt-option>

53
bower_components/datatables-responsive/docs/option/responsive.details.xml vendored Executable file
View File

@@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<name>responsive.details</name>
<summary>Enable and configure the child rows shown by Responsive for collapsed tables</summary>
<since>Responsive 1.0.0</since>
<type type="boolean">
<description>
As a `-type boolean` value, this option will enable and disable the child row display of Responsive. `false` will disable the child rows completely (columns will simply be removed from the disable and their content not be accessible other than through the DataTables API), while `true` will enable the child rows, using the default values defined by the object `$.fn.dataTables.Responsive.defaults.details`.
</description>
</type>
<type type="object">
<description>
When given as an object, the child row display of Responsive will be enabled, and configuration options can be given to extend or override the defaults.
</description>
</type>
<default value="true">
Child rows will be disabled using the `inline` method (see `r-init responsive.details.type`).
</default>
<description>
Responsive has the ability to use DataTables' child rows feature to show information about any columns which have been removed from the display as a child row, which can be particularly useful for display complex information on small screen devices. Please see the [Responsive manual on the details rows](/extensions/responsive/details-rows) for further information.
This options provides the ability to configure how the details rows are handled by Responsive. In its simplest form as a boolean value, the details row display can be enabled or disabled, while as an object you have the ability to control how the rows are displayed and the control to show / hide the child rows.
Please note that as with all other configuration options for Responsive, this option is an extension to the [default set of DataTables options](/reference/init). This property should be set in the DataTables initialisation object.
</description>
<example title="Disable the details row display"><![CDATA[
$('#example').DataTable( {
responsive: {
details: false
}
} );
]]></example>
<example title="Set the `type` option for the details display"><![CDATA[
$('#example').DataTable( {
responsive: {
details: {
type: 'column'
}
}
} );
]]></example>
</dt-option>

49
bower_components/datatables-responsive/docs/option/responsive.xml vendored Executable file
View File

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="responsive">
<name>responsive</name>
<summary>Enable and configure the Responsive extension for DataTables</summary>
<since>Responsive 1.0.0</since>
<type type="boolean">
<description>
As a boolean value this property will enable Responsive on the DataTable that is being created. `true` will enable Responsive, while `false` will not (even if the table has a class of `-string responsive` or `-string dt-responsive`.
This is a short-cut option to enable Responsive with the default configuration options. Customisations can be made by giving this parameter as an object, see below.
</description>
</type>
<type type="object">
<description>
If given as an object, Responsive will be enabled on the target DataTable, with the Responsive defaults (`$.fn.dataTable.Responsive.defaults`) extended, and potentially overwritten, by the options provided in this object. This is how Responsive can be configured on an individual table basis, or through the defaults.
</description>
</type>
<default value="undefined">
Responsive will not be initialised by default
</default>
<description>
This option provides the ability to enable and configure Responsive for DataTables. In its simplest form as the boolean `true` it will enable Responsive with the default configuration options (as defined by `$.fn.dataTable.Responsive.defaults`). It can also be used as an object to provide custom configuration options as described below.
Please note that as with all other configuration options for Responsive, this option is an extension to the [default set of DataTables options](/reference/init). This property should be set in the DataTables initialisation object.
</description>
<example title="Enable Responsive for a table"><![CDATA[
$('#example').DataTable( {
responsive: true
} );
]]></example>
<example title="Enable Responsive with configuration options"><![CDATA[
$('#example').DataTable( {
responsive: {
details: false
}
} );
]]></example>
</dt-option>

BIN
bower_components/datatables-responsive/examples/.DS_Store vendored Executable file
View File

Binary file not shown.

38
bower_components/datatables-responsive/examples/child-rows/column-control.xml vendored Executable file
View File

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-details" table-class="display nowrap" order="2">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
type: 'column'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
} );
} );
]]>
</js>
<title lib="Responsive">Column controlled child rows</title>
<info><![CDATA[
Responsive has two built in methods for displaying the controlling element of the child rows; `inline` which is the default option and shows the control in the first column, and `column` which set a _control column_ as the control. The control column is shown only when there is some other column hidden, and is dedicated only to the show / hide control for the rows.
This example shows the `r-init responsive.details.type` option set to `column` to activate the control column. Note that by default the first column is used as the control, so additionally in the initialisation the `dt-init order` and `dt-init columns.orderable` options are used to disable sorting on this column.
]]></info>
</dt-example>

50
bower_components/datatables-responsive/examples/child-rows/custom-renderer.xml vendored Executable file
View File

@@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="5">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
renderer: function ( api, rowIdx ) {
// Select hidden columns for the given row
var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
var header = $( api.column( cell.column ).header() );
return '<tr>'+
'<td>'+
header.text()+':'+
'</td> '+
'<td>'+
api.cell( cell ).data()+
'</td>'+
'</tr>';
} ).toArray().join('');
return data ?
$('<table/>').append( data ) :
false;
}
}
}
} );
} );
]]>
</js>
<title lib="Responsive">Custom child row renderer</title>
<info><![CDATA[
The child row's for a collapsed table in Responsive, by default, show a `-tag ul/li` list of the data from the hidden columns. The `r-init responsive.details.renderer` option provide the ability to create your own custom renderer. It is given two parameters: the DataTables API instance for the table and the row index to use.
This example shows the `dt-api cells()` method being used to select the hidden columns and constructing a table of the data. You could refine the selector to select only certain columns, or show all columns, etc.
]]></info>
</dt-example>

28
bower_components/datatables-responsive/examples/child-rows/disable-child-rows.xml vendored Executable file
View File

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="1">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: false
}
} );
} );
]]>
</js>
<title lib="Responsive">Disable child rows</title>
<info><![CDATA[
By default, when Responsive collapses a table, it will show an option for the end user to expand the row, showing the details of the hidden columns in a child row. This can be disabled using the `r-init responsive.details` option and setting it to `false`, as shown in the example below. In this case the hidden data is not directly accessible to the end user.
]]></info>
</dt-example>

20
bower_components/datatables-responsive/examples/child-rows/index.xml vendored Executable file
View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example order="0">
<title lib="Responsive">Child row control</title>
<info><![CDATA[
When a column is removed from display by Responsive, the data is still available in the table and can be displayed in a DataTables _child row_ (see `dt-api row().child()`). By default Responsive will show child row controls in the first column when the table has been collapsed, allowing the end user to show / hide the information from the hidden columns.
Responsive has a number of options for display of the child rows:
* If child row display is enabled: `r-init responsive.details`
* How the show / hide control is displayed: `r-init responsive.details.type`
* How the child row is rendered: `r-init responsive.details.renderer`
This section shows examples of these options being used.
]]></info>
</dt-example>

38
bower_components/datatables-responsive/examples/child-rows/right-column.xml vendored Executable file
View File

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-details-right" table-class="display nowrap" order="3">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
type: 'column',
target: -1
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: -1
} ]
} );
} );
]]>
</js>
<title lib="Responsive">Column control - right</title>
<info><![CDATA[
When using the `column` child row control type, Responsive has the ability to use any column or element as the show / hide control for the row details. This is provided through the `r-init responsive.details.target` option, which can be either a column index, or a jQuery selector.
This example shows the last column in the table being used as the control column.
]]></info>
</dt-example>

39
bower_components/datatables-responsive/examples/child-rows/whole-row-control.xml vendored Executable file
View File

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-details" table-class="display nowrap" order="4">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
} );
} );
]]>
</js>
<title lib="Responsive">Whole row child row control</title>
<info><![CDATA[
When using the `column` details type in Responsive the `r-init responsive.details.target` option provides the ability to control what element is used to show / hide the child rows when the table is collapsed.
This example uses the `tr` selector to have the whole row act as the control.
]]></info>
</dt-example>

26
bower_components/datatables-responsive/examples/display-control/auto.xml vendored Executable file
View File

@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="1">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable();
} );
]]>
</js>
<title lib="Responsive">Automatic column hiding</title>
<info><![CDATA[
Responsive will automatically detect which columns have breakpoint class names assigned to them for visibility control. If no breakpoint class is found for a column, Responsive will determine automatically if the column should be shown or not at any particular viewport width. This is done by removing columns which cause the table to overflow the viewport, with the columns being removed from the right.
This example shows that simple case. On a desktop browser resize the window horizontally to see columns added and removed on-the-fly. On a tablet or mobile browser, change the screen's orientation.
]]></info>
</dt-example>

86
bower_components/datatables-responsive/examples/display-control/classes.xml vendored Executable file
View File

@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-class="display responsive nowrap" order="2">
<css lib="datatables responsive">
</css>
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "../../../../examples/ajax/data/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" },
{ "data": "extn" }
]
} );
} );
]]>
</js>
<title lib="Responsive">Class control</title>
<info><![CDATA[
You can tell Responsive what columns to want to be visible on different devices through the use of class names on the columns. The breakpoints are horizontal screen resolutions and the defaults are set for common devices:
* `desktop` x >= 1024px
* `tablet-l` (landscape) 768 <= x < 1024
* `tablet-p` (portrait) 480 <= x < 768
* `mobile-l` (landscape) 320 <= x < 480
* `mobile-p` (portrait) x < 320
You may leave the `-[lp]` option from the end if you wish to just target all tablet or mobile devices. Additionally to may add `min-`, `max-` or `not-` as a prefix to the class name to perform logic operations. For example `not-mobile` would cause a column to appear as visible on desktop and tablet devices, while `min-tablet-l` would require at least a horizontal width of 768 for the browser window to be shown, and be shown at all sizes larger.
Additionally, there are three special class names:
* `all` - Always display
* `none` - Don't display as a column, but show in the child row
* `never` - Never display
* `control` - Used for the `column` `r-init responsive.details.type` option.
Please [refer to the Responsive manual](//datatables.net/extensions/responsive/) for further details of these options.
This example shows the `salary` column visible on a desktop only - `office` and `age` require a tablet, while the `position` column requires a phone in landscape or larger. The `name` column is always visible and the `start date` is never visible.
This can be useful if you wish to change the format of the data shown on different devices, for example using a combination of `mobile` and `not-mobile` on two different columns would allow information to be formatted suitable for each device type.
]]></info>
<custom-table>
<div id="breakpoint"> </div>
<table id="example" class="display responsive" width="100%">
<thead>
<tr>
<th class="all">Name</th>
<th class="min-phone-l">Position</th>
<th class="min-tablet">Office</th>
<th class="min-tablet">Age</th>
<th class="never">Start date</th>
<th class="desktop">Salary</th>
<th class="none">Extn.</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</tfoot>
</table>
</custom-table>
</dt-example>

17
bower_components/datatables-responsive/examples/display-control/index.xml vendored Executable file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example order="0">
<title lib="Responsive">Display control</title>
<info><![CDATA[
Responsive has two basic modes of operation for controlling the visibility of columns at different display sizes. These two modes can be using either separately or together:
* Manually assigned class names for breakpoints - Assign a column a class name to tell Responsive which breakpoint(s) to show it in.
* Automatically - for columns without a breakpoint class name, it will be automatically removed if there is no room available on screen to show it. Columns are removed from the right, moving left.
This section explores these two options.
]]></info>
</dt-example>

65
bower_components/datatables-responsive/examples/display-control/init-classes.xml vendored Executable file
View File

@@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-class="display responsive nowrap" order="3">
<css lib="datatables responsive">
</css>
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "../../../../examples/ajax/data/objects.txt",
"columns": [
{ "data": "name", className: "all" },
{ "data": "position", className: "min-phone-l" },
{ "data": "office", className: "min-tablet" },
{ "data": "extn", className: "min-tablet" },
{ "data": "start_date", className: "never" },
{ "data": "salary", className: "desktop" },
{ "data": "extn", className: "none" }
]
} );
} );
]]>
</js>
<title lib="Responsive">Assigned class control</title>
<info><![CDATA[
This example exactly matches the functionality of the [class control example](classes.xml) but in this case the classes are assigned using the `dt-init columns.className` option.
]]></info>
<custom-table>
<div id="breakpoint"> </div>
<table id="example" class="display responsive" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</tfoot>
</table>
</custom-table>
</dt-example>

12
bower_components/datatables-responsive/examples/index.xml vendored Executable file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example order="0">
<title lib="Responsive">Responsive DataTables</title>
<info><![CDATA[
]]></info>
</dt-example>

BIN
bower_components/datatables-responsive/examples/initialisation/.DS_Store vendored Executable file
View File

Binary file not shown.

36
bower_components/datatables-responsive/examples/initialisation/ajax.xml vendored Executable file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="ajax" table-class="display responsive nowrap" order="4">
<css lib="datatables responsive">
div.container { max-width: 1200px }
</css>
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "../../../../examples/ajax/data/objects.txt",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
]]>
</js>
<title lib="Responsive">Ajax data</title>
<info><![CDATA[
This example shows the Responsive extension working with [Ajax sourced data](//datatables.net/manual/data) in the DataTable. Note that no special initialisation is required. Responsive is enabled by adding the `-string responsive` class to the `-tag table` element.
]]></info>
</dt-example>

26
bower_components/datatables-responsive/examples/initialisation/className.xml vendored Executable file
View File

@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="1">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable();
} );
]]>
</js>
<title lib="Responsive">Class name</title>
<info><![CDATA[
The easiest way to initialise the Responsive extension for DataTables is simply to add the class `-string responsive` to the table's class name. When the DataTable is initialised the Responsive extension will automatically enable itself on these tables.
The may also use the class `dt-responsive` to perform the same action, since `responsive` may be used in your stylesheet, or may have some other meaning in a CSS framework being used (for example Bootstrap).
]]></info>
</dt-example>

30
bower_components/datatables-responsive/examples/initialisation/default.xml vendored Executable file
View File

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="5">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$.extend( $.fn.dataTable.defaults, {
responsive: true
} );
$(document).ready(function() {
$('#example').DataTable();
} );
]]>
</js>
<title lib="Responsive">Default initialisation</title>
<info><![CDATA[
It can often be useful to be able to set a default value for DataTables' initialisation options, providing a common starting point for initialisation when working with multiple tables over many pages or even just on a single page. DataTables provides that ability through the `$.fn.dataTable.defaults` object which can have any of the [initialisation options](//datatables.net/reference/option) set.
Extending that ability, Responsive can also be set to initialise by default, as shown in this example thorugh the `$.fn.dataTable.defaults.responsive` property. Extending that, [all of the Responsive options](//datatables.net/extensions/responsive/reference/option/) can also be set using this configuration option (i.e. use `responsive` as an object).
]]></info>
</dt-example>

18
bower_components/datatables-responsive/examples/initialisation/index.xml vendored Executable file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example order="0">
<title lib="Responsive">Initialisation</title>
<info><![CDATA[
Responsive can be run on a DataTable in a number of different ways:
* By adding the class `responsive` or `dt-responsive` to the `-tag table`
* Using the `r-init responsive` option in the DataTables initialisation
* Use the `$.fn.dataTable.Responsive` constructor.
This set of examples demonstrates these initialisation options.
]]></info>
</dt-example>

30
bower_components/datatables-responsive/examples/initialisation/new.xml vendored Executable file
View File

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="3">
<css lib="datatables responsive">
div.container { max-width: 1200px }
</css>
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.Responsive( table );
} );
]]>
</js>
<title lib="Responsive">`new` constructor</title>
<info><![CDATA[
Responsive will automatically detect new DataTable instances being created on a page and initialise itself if it find the `r-init responsive` option or `responsive` class name on the table, as shown in the other examples.
The third way of initialising Responsive is manually creating a new instance using the `$.fn.dataTable.Responsive` class, as shown in this example (the other two methods are provided using this constructor in a `dt-event init` event handler!).
]]></info>
</dt-example>

30
bower_components/datatables-responsive/examples/initialisation/option.xml vendored Executable file
View File

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="2">
<css lib="datatables responsive">
div.container { max-width: 1200px }
</css>
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
]]>
</js>
<title lib="Responsive">Configuration option</title>
<info><![CDATA[
The Responsive extension for DataTables can be applied to a DataTable in one of two ways; with a specific class name on the table, or using the DataTables initialisation options. This method shows the latter, with the `r-init responsive` option being set to the boolean value `true`.
The `r-init responsive` option can be given as a boolean value, or as an object with configuration options. If as a boolean, as in this case, the default options are used.
]]></info>
</dt-example>

33
bower_components/datatables-responsive/examples/styling/bootstrap.xml vendored Executable file
View File

@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="table table-striped table-hover dt-responsive" order="1">
<css lib="bootstrap datatables-bootstrap responsive">
body { font-size: 140% }
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
</css>
<js lib="jquery datatables responsive datatables-bootstrap">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable();
} );
]]>
</js>
<title lib="Responsive">Bootstrap styling</title>
<info><![CDATA[
This example shows DataTables and the Responsive extension being used with the [Bootstrap](http://getbootstrap.com) framework providing the styling. The [DataTables / Bootstrap integration files](//datatables.net/manual/styling/bootstrap) prove seamless integration for DataTables to be used in a Bootstrap page.
Note that the `dt-responsive` class is used to indicate to the extension that it should be enabled on this page, as `responsive` [has special meaning in Bootstrap](http://getbootstrap.com/css/#tables-responsive). The `r-init responsive` option could also be used if required.
]]></info>
</dt-example>

29
bower_components/datatables-responsive/examples/styling/foundation.xml vendored Executable file
View File

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="tdisplay responsive" order="2">
<css lib="foundation datatables-foundation responsive">
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
</css>
<js lib="jquery datatables responsive datatables-foundation">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable();
} );
]]>
</js>
<title lib="Responsive">Foundation styling</title>
<info><![CDATA[
This example shows DataTables and the Responsive extension being used with the [Foundation](http://foundation.zurb.com) framework providing the styling. The [DataTables / Foundation integration files](//datatables.net/manual/styling/foundation) prove seamless integration for DataTables to be used in a Foundation page.
]]></info>
</dt-example>

12
bower_components/datatables-responsive/examples/styling/index.xml vendored Executable file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example order="0">
<title lib="Responsive">Styling</title>
<info><![CDATA[
Responsive requires very little styling information of its own, with styling needed only for the child row display when the table has been collapsed. As such, integrating Responsive with your application should be as simple as including the Javascript and base stylesheet! This section shows Responsive being styling using external CSS frameworks.
]]></info>
</dt-example>

818
bower_components/datatables-responsive/js/dataTables.responsive.js vendored Executable file
View File

@@ -0,0 +1,818 @@
/*! Responsive 1.0.3
* 2014 SpryMedia Ltd - datatables.net/license
*/
/**
* @summary Responsive
* @description Responsive tables plug-in for DataTables
* @version 1.0.3
* @file dataTables.responsive.js
* @author SpryMedia Ltd (www.sprymedia.co.uk)
* @contact www.sprymedia.co.uk/contact
* @copyright Copyright 2014 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(window, document, undefined) {
var factory = function( $, DataTable ) {
"use strict";
/**
* 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.1+
*
* @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.1' ) ) {
throw 'DataTables Responsive requires DataTables 1.10.1 or newer';
}
this.s = {
dt: new DataTable.Api( settings ),
columns: []
};
// 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
if ( opts && typeof opts.details === 'string' ) {
opts.details = { type: opts.details };
}
this.c = $.extend( true, {}, Responsive.defaults, DataTable.defaults.responsive, opts );
settings.responsive = this;
this._constructor();
};
Responsive.prototype = {
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Constructor
*/
/**
* Initialise the Responsive instance
*
* @private
*/
_constructor: function ()
{
var that = this;
var dt = this.s.dt;
dt.settings()[0]._responsive = this;
// Use DataTables' private throttle function to avoid processor thrashing
$(window).on( 'resize.dtr orientationchange.dtr', dt.settings()[0].oApi._fnThrottle( function () {
that._resize();
} ) );
// Destroy event handler
dt.on( 'destroy.dtr', function () {
$(window).off( 'resize.dtr orientationchange.dtr draw.dtr' );
} );
// 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;
} );
// Determine which columns are already hidden, and should therefore
// remain hidden. TODO - should this be done? See thread 22677
//
// this.s.alwaysHidden = dt.columns(':hidden').indexes();
this._classLogic();
this._resizeAuto();
// First pass - draw the table for the current viewport size
this._resize();
// Details handler
var details = this.c.details;
if ( details.type ) {
that._detailsInit();
this._detailsVis();
dt.on( 'column-visibility.dtr', function () {
that._detailsVis();
} );
// Redraw the details box on each draw. This is used until
// DataTables implements a native `updated` event for rows
dt.on( 'draw.dtr', function () {
dt.rows().iterator( 'row', function ( settings, idx ) {
var row = dt.row( idx );
if ( row.child.isShown() ) {
var info = that.c.details.renderer( dt, idx );
row.child( info, 'child' ).show();
}
} );
} );
$(dt.table().node()).addClass( 'dtr-'+details.type );
}
},
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 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;
// 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
var widthAvailable = dt.table().container().offsetWidth;
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 from the left) until we run out
// of room
for ( i=0, ien=display.length ; i<ien ; i++ ) {
if ( display[i] === '-' && ! columns[i].control ) {
display[i] = usedWidth - columns[i].minWidth < 0 ?
false :
true;
usedWidth -= columns[i].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 columns = this.s.dt.columns().eq(0).map( function (i) {
var className = this.column(i).header().className;
return {
className: className,
includeIn: [],
auto: false,
control: false,
never: className.match(/\bnever\b/) ? true : false
};
} );
// 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 (xxx need extra information)
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' || className === '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;
},
/**
* 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';
}
// type.target can be a string jQuery selector or a column index
var target = details.target;
var selector = typeof target === 'string' ? target : 'td';
// Click handler to show / hide the details rows when they are available
$( dt.table().body() ).on( 'click', 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') );
if ( row.child.isShown() ) {
row.child( false );
$( row.node() ).removeClass( 'parent' );
}
else {
var info = that.c.details.renderer( dt, row[0] );
row.child( info, 'child' ).show();
$( row.node() ).addClass( 'parent' );
}
} );
},
/**
* Update the child rows in the table whenever the column visibility changes
*
* @private
*/
_detailsVis: function ()
{
var that = this;
var dt = this.s.dt;
// Find how many columns are hidden
var hiddenColumns = dt.columns().indexes().filter( function ( idx ) {
var col = dt.column( idx );
if ( col.visible() ) {
return null;
}
// Only counts as hidden if it doesn't have the `never` class
return $( col.header() ).hasClass( 'never' ) ? null : idx;
} );
var haveHidden = true;
if ( hiddenColumns.length === 0 || ( hiddenColumns.length === 1 && this.s.columns[ hiddenColumns[0] ].control ) ) {
haveHidden = false;
}
if ( haveHidden ) {
// Got hidden columns
$( dt.table().node() ).addClass('collapsed');
// Show all existing child rows
dt.rows().eq(0).each( function (idx) {
var row = dt.row( idx );
if ( row.child() ) {
var info = that.c.details.renderer( dt, row[0] );
// The renderer can return false to have no child row
if ( info === false ) {
row.child.hide();
}
else {
row.child( info, 'child' ).show();
}
}
} );
}
else {
// No hidden columns
$( dt.table().node() ).removeClass('collapsed');
// Hide all existing child rows
dt.rows().eq(0).each( function (idx) {
dt.row( idx ).child.hide();
} );
}
},
/**
* Find a breakpoint object from a name
* @param {string} name Breakpoint name to find
* @return {object} Breakpoint description object
*/
_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];
}
}
},
/**
* 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 dt = this.s.dt;
var width = $(window).width();
var breakpoints = this.c.breakpoints;
var breakpoint = breakpoints[0].name;
// Determine what breakpoint we are currently at
for ( var 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 columns = this._columnsVisiblity( breakpoint );
dt.columns().eq(0).each( function ( colIdx, i ) {
dt.column( colIdx ).visible( columns[i] );
} );
},
/**
* 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().cloneNode( false ) ).appendTo( clonedTable );
// This is a bit slow, but we need to get a clone of each row that
// includes all columns. As such, try to do this as little as possible.
dt.rows( { page: 'current' } ).indexes().flatten().each( function ( idx ) {
var clone = dt.row( idx ).node().cloneNode( true );
if ( dt.columns( ':hidden' ).flatten().length ) {
$(clone).append( dt.cells( idx, ':hidden' ).nodes().to$().clone() );
}
$(clone).appendTo( clonedBody );
} );
var cells = dt.columns().header().to$().clone( false ).wrapAll('tr').appendTo( clonedHeader );
var inserted = $('<div/>')
.css( {
width: 1,
height: 1,
overflow: 'hidden'
} )
.append( clonedTable )
.insertBefore( dt.table().node() );
// The cloned header now contains the smallest that each column can be
dt.columns().eq(0).each( function ( idx ) {
columns[idx].minWidth = cells[ idx ].offsetWidth || 0;
} );
inserted.remove();
}
};
/**
* 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 }
];
/**
* 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:
*
* * `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: {
renderer: function ( api, rowIdx ) {
var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
var header = $( api.column( cell.column ).header() );
var idx = api.cell( cell ).index();
if ( header.hasClass( 'control' ) || header.hasClass( 'never' ) ) {
return '';
}
// Use a non-public DT API method to render the data for display
// This needs to be updated when DT adds a suitable method for
// this type of data retrieval
var dtPrivate = api.settings()[0];
var cellData = dtPrivate.oApi._fnGetCellData(
dtPrivate, idx.row, idx.column, 'display'
);
return '<li data-dtr-index="'+idx.column+'">'+
'<span class="dtr-title">'+
header.text()+':'+
'</span> '+
'<span class="dtr-data">'+
cellData+
'</span>'+
'</li>';
} ).toArray().join('');
return data ?
$('<ul data-dtr-index="'+rowIdx+'"/>').append( data ) :
false;
},
target: 0,
type: 'inline'
}
};
/*
* 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.recalc()', function () {
this.iterator( 'table', function ( ctx ) {
if ( ctx._responsive ) {
ctx._responsive._resizeAuto();
ctx._responsive._resize();
}
} );
} );
Api.register( 'responsive.index()', function ( li ) {
li = $(li);
return {
column: li.data('dtr-index'),
row: li.parent().data('dtr-index')
};
} );
/**
* Version information
*
* @name Responsive.version
* @static
*/
Responsive.version = '1.0.3';
$.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( 'init.dt.dtr', function (e, settings, json) {
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;
}; // /factory
// Define as an AMD module if possible
if ( typeof define === 'function' && define.amd ) {
define( ['jquery', 'datatables'], factory );
}
else if ( typeof exports === 'object' ) {
// Node/CommonJS
factory( require('jquery'), require('datatables') );
}
else if ( jQuery && !jQuery.fn.dataTable.Responsive ) {
// Otherwise simply initialise as normal, stopping multiple evaluation
factory( jQuery, jQuery.fn.dataTable );
}
})(window, document);

30
bower_components/datatables-responsive/make.sh vendored Executable file
View File

@@ -0,0 +1,30 @@
#!/bin/sh
OUT_DIR=$1
DEBUG=$2
# Change into script's own dir
cd $(dirname $0)
DT_SRC=$(dirname $(dirname $(pwd)))
DT_BUILT="${DT_SRC}/built/DataTables"
. $DT_SRC/build/include.sh
# Copy CSS
scss_compile css/dataTables.responsive.scss
rsync -r css $OUT_DIR
# Copy images
#rsync -r images $OUT_DIR
# Copy JS
rsync -r js $OUT_DIR
js_compress $OUT_DIR/js/dataTables.responsive.js
# Copy and build examples
rsync -r examples $OUT_DIR
examples_process $OUT_DIR/examples
# Readme
cp Readme.md $OUT_DIR