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

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>