first commit
This commit is contained in:
Senad Uka
27
public/bower_components/filament-tablesaw/.bower.json
vendored
Executable file
27
public/bower_components/filament-tablesaw/.bower.json
vendored
Executable file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "filament-tablesaw",
|
||||
"main": [
|
||||
"dist/tablesaw.js",
|
||||
"dist/tablesaw.css",
|
||||
"dist/icons/**"
|
||||
],
|
||||
"ignore": [
|
||||
"**/.*"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.11.2",
|
||||
"respond": ">=1.4.2"
|
||||
},
|
||||
"homepage": "https://github.com/filamentgroup/tablesaw",
|
||||
"version": "2.0.3",
|
||||
"_release": "2.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v2.0.3",
|
||||
"commit": "1c7ccc4d34101ab07641d2165c5573ac0cf067b0"
|
||||
},
|
||||
"_source": "https://github.com/filamentgroup/tablesaw.git",
|
||||
"_target": "^2.0.3",
|
||||
"_originalSource": "filament-tablesaw",
|
||||
"_direct": true
|
||||
}
|
||||
31
public/bower_components/filament-tablesaw/CONTRIBUTING.md
vendored
Executable file
31
public/bower_components/filament-tablesaw/CONTRIBUTING.md
vendored
Executable file
@@ -0,0 +1,31 @@
|
||||
# Contributing
|
||||
|
||||
## Important notes
|
||||
Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory!
|
||||
|
||||
### Code style
|
||||
Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
|
||||
|
||||
### PhantomJS
|
||||
While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers.
|
||||
|
||||
## Modifying the code
|
||||
First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed.
|
||||
|
||||
Test that Grunt's CLI is installed by running `grunt --version`. If the command isn't found, run `npm install -g grunt-cli`. For more information about installing Grunt, see the [getting started guide](http://gruntjs.com/getting-started).
|
||||
|
||||
1. Fork and clone the repo.
|
||||
1. Run `npm install` to install all dependencies (including Grunt).
|
||||
1. Run `grunt` to grunt this project.
|
||||
|
||||
Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken.
|
||||
|
||||
## Submitting pull requests
|
||||
|
||||
1. Create a new branch, please don't work in your `master` branch directly.
|
||||
1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail.
|
||||
1. Fix stuff.
|
||||
1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done.
|
||||
1. Open `test/*.html` unit test file(s) in non-headless web browsers to ensure tests pass everywhere.
|
||||
1. Update the documentation to reflect any changes.
|
||||
1. Push to your fork and submit a pull request.
|
||||
228
public/bower_components/filament-tablesaw/Gruntfile.js
vendored
Executable file
228
public/bower_components/filament-tablesaw/Gruntfile.js
vendored
Executable file
@@ -0,0 +1,228 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = function(grunt) {
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
// Metadata.
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
|
||||
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
|
||||
'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
|
||||
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.company %>;' +
|
||||
' Licensed <%= pkg.license %> */\n',
|
||||
// Task configuration.
|
||||
clean: {
|
||||
dependencies: ['dist/dependencies/'],
|
||||
post: ['dist/tmp/', 'dist/**/*.min.*']
|
||||
},
|
||||
copy: {
|
||||
jquery: {
|
||||
src: 'node_modules/jquery/dist/jquery.js',
|
||||
dest: 'dist/dependencies/jquery.js'
|
||||
},
|
||||
respond: {
|
||||
src: 'node_modules/respond.js/dest/respond.src.js',
|
||||
dest: 'dist/dependencies/respond.js'
|
||||
},
|
||||
qunit: {
|
||||
files: [{
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: [ 'node_modules/qunitjs/qunit/*' ],
|
||||
dest: 'dist/dependencies/',
|
||||
filter: 'isFile'
|
||||
}]
|
||||
}
|
||||
},
|
||||
concat: {
|
||||
options: {
|
||||
banner: '<%= banner %>',
|
||||
stripBanners: true
|
||||
},
|
||||
jsautoinit: {
|
||||
src: ['src/tables-init.js'],
|
||||
dest: 'dist/<%= pkg.name %>-init.js'
|
||||
},
|
||||
jsall: {
|
||||
src: [
|
||||
'src/tables.js',
|
||||
'src/tables.stack.js',
|
||||
'src/tables.btnmarkup.js',
|
||||
'src/tables.columntoggle.js',
|
||||
'src/tables.swipetoggle.js',
|
||||
'src/tables.sortable.js',
|
||||
'src/tables.minimap.js',
|
||||
'src/tables.modeswitch.js'
|
||||
],
|
||||
dest: 'dist/<%= pkg.name %>.js'
|
||||
},
|
||||
jsstack: {
|
||||
src: [
|
||||
'src/tables.js',
|
||||
'src/tables.stack.js'
|
||||
],
|
||||
dest: 'dist/stackonly/<%= pkg.name %>.stackonly.js'
|
||||
},
|
||||
cssall: {
|
||||
src: [
|
||||
'src/tables.css',
|
||||
'src/tables.toolbar.css',
|
||||
'src/tables.skin.css',
|
||||
'src/tables.stack.css',
|
||||
'src/tables.stack-default-breakpoint.css',
|
||||
'src/tables.swipetoggle.css',
|
||||
'src/tables.columntoggle.css',
|
||||
'src/tables.sortable.css',
|
||||
'src/tables.minimap.css'
|
||||
],
|
||||
dest: 'dist/tmp/<%= pkg.name %>.myth.css'
|
||||
},
|
||||
cssbare: {
|
||||
src: [
|
||||
'src/tables.css',
|
||||
'src/tables.toolbar.css',
|
||||
'src/tables.stack.css',
|
||||
'src/tables.stack-default-breakpoint.css',
|
||||
'src/tables.swipetoggle.css',
|
||||
'src/tables.columntoggle.css',
|
||||
'src/tables.sortable.css',
|
||||
'src/tables.minimap.css',
|
||||
'src/tables.modeswitch.css'
|
||||
],
|
||||
dest: 'dist/tmp/<%= pkg.name %>.bare.myth.css'
|
||||
},
|
||||
cssstack: {
|
||||
src: [
|
||||
'src/tables.css',
|
||||
'src/tables.stack.css',
|
||||
'src/tables.stack-default-breakpoint.css'
|
||||
],
|
||||
dest: 'dist/tmp/<%= pkg.name %>.stackonly.myth.css'
|
||||
},
|
||||
cssstackmixinpre: {
|
||||
src: [
|
||||
'src/tables.css',
|
||||
'src/tables.stack.css'
|
||||
],
|
||||
dest: 'dist/tmp/<%= pkg.name %>.stackonly.myth.scss'
|
||||
},
|
||||
cssstackmixinpost: {
|
||||
src: [
|
||||
'dist/tmp/<%= pkg.name %>.stackonly-sans-mixin.scss',
|
||||
'src/tables.stack-mixin.scss'
|
||||
],
|
||||
dest: 'dist/stackonly/<%= pkg.name %>.stackonly.scss'
|
||||
}
|
||||
},
|
||||
qunit: {
|
||||
files: ['test/**/*.html']
|
||||
},
|
||||
jshint: {
|
||||
gruntfile: {
|
||||
options: {
|
||||
jshintrc: '.jshintrc'
|
||||
},
|
||||
src: 'Gruntfile.js'
|
||||
},
|
||||
src: {
|
||||
options: {
|
||||
jshintrc: 'src/.jshintrc'
|
||||
},
|
||||
src: ['src/**/*.js']
|
||||
},
|
||||
test: {
|
||||
options: {
|
||||
jshintrc: 'test/.jshintrc'
|
||||
},
|
||||
src: ['test/**/*.js']
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
gruntfile: {
|
||||
files: '<%= jshint.gruntfile.src %>',
|
||||
tasks: ['jshint:gruntfile']
|
||||
},
|
||||
src: {
|
||||
files: ['<%= concat.cssall.src %>', '<%= concat.jsall.src %>', '<%= concat.jsautoinit.src %>'],
|
||||
tasks: ['src']
|
||||
},
|
||||
test: {
|
||||
files: '<%= jshint.test.src %>',
|
||||
tasks: ['jshint:test', 'qunit']
|
||||
},
|
||||
},
|
||||
uglify: {
|
||||
js: {
|
||||
files: {
|
||||
'dist/<%= pkg.name %>.min.js': [ 'dist/<%= pkg.name %>.js' ],
|
||||
'dist/stackonly/<%= pkg.name %>.stackonly.min.js': [ 'dist/stackonly/<%= pkg.name %>.stackonly.js' ]
|
||||
}
|
||||
}
|
||||
},
|
||||
cssmin: {
|
||||
css: {
|
||||
files: {
|
||||
'dist/<%= pkg.name %>.min.css': [ 'dist/<%= pkg.name %>.css' ],
|
||||
'dist/bare/<%= pkg.name %>.bare.min.css': [ 'dist/bare/<%= pkg.name %>.bare.css' ],
|
||||
'dist/stackonly/<%= pkg.name %>.stackonly.min.css': [ 'dist/stackonly/<%= pkg.name %>.stackonly.css' ]
|
||||
}
|
||||
}
|
||||
},
|
||||
bytesize: {
|
||||
dist: {
|
||||
src: [
|
||||
'dist/<%= pkg.name %>.min.css',
|
||||
'dist/<%= pkg.name %>.min.js',
|
||||
'dist/bare/<%= pkg.name %>.bare.min.css',
|
||||
'dist/stackonly/<%= pkg.name %>.stackonly.min.css',
|
||||
'dist/stackonly/<%= pkg.name %>.stackonly.min.js'
|
||||
]
|
||||
}
|
||||
},
|
||||
'gh-pages': {
|
||||
options: {},
|
||||
src: ['dist/**/*', 'demo/**/*', 'test/**/*']
|
||||
},
|
||||
myth: {
|
||||
dist: {
|
||||
files: {
|
||||
'dist/<%= pkg.name %>.css': '<%= concat.cssall.dest %>',
|
||||
'dist/bare/<%= pkg.name %>.bare.css': '<%= concat.cssbare.dest %>',
|
||||
'dist/stackonly/<%= pkg.name %>.stackonly.css': '<%= concat.cssstack.dest %>',
|
||||
'dist/tmp/<%= pkg.name %>.stackonly-sans-mixin.scss': '<%= concat.cssstackmixinpre.dest %>'
|
||||
}
|
||||
}
|
||||
},
|
||||
compress: {
|
||||
main: {
|
||||
options: {
|
||||
archive: 'dist/tablesaw-<%= pkg.version %>.zip',
|
||||
mode: 'zip',
|
||||
pretty: true
|
||||
},
|
||||
files: [
|
||||
{expand: true, cwd: 'dist/', src: ['*'], dest: 'tablesaw/'},
|
||||
{expand: true, cwd: 'dist/', src: ['dependencies/*'], dest: 'tablesaw/'},
|
||||
{expand: true, cwd: 'dist/', src: ['stackonly/*'], dest: 'tablesaw/'},
|
||||
{expand: true, cwd: 'dist/', src: ['bare/*'], dest: 'tablesaw/'}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
|
||||
|
||||
// Default task.
|
||||
grunt.registerTask('travis', ['jshint', 'qunit']);
|
||||
grunt.registerTask('concat-pre', ['concat:jsautoinit', 'concat:jsall', 'concat:jsstack', 'concat:cssall', 'concat:cssbare', 'concat:cssstack', 'concat:cssstackmixinpre']);
|
||||
grunt.registerTask('concat-post', ['concat:cssstackmixinpost']);
|
||||
grunt.registerTask('src', ['concat-pre', 'myth', 'concat-post', 'clean:dependencies', 'copy', 'clean:post']);
|
||||
grunt.registerTask('filesize', ['uglify', 'cssmin', 'bytesize', 'clean:post']);
|
||||
|
||||
grunt.registerTask('default', ['jshint', 'src', 'qunit', 'filesize']);
|
||||
|
||||
// Deploy
|
||||
grunt.registerTask('deploy', ['default', 'gh-pages']);
|
||||
|
||||
};
|
||||
22
public/bower_components/filament-tablesaw/LICENSE
vendored
Executable file
22
public/bower_components/filament-tablesaw/LICENSE
vendored
Executable file
@@ -0,0 +1,22 @@
|
||||
Copyright (c) 2013 Filament Group
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
245
public/bower_components/filament-tablesaw/README.md
vendored
Executable file
245
public/bower_components/filament-tablesaw/README.md
vendored
Executable file
@@ -0,0 +1,245 @@
|
||||
# Tablesaw [](https://travis-ci.org/filamentgroup/tablesaw)
|
||||
|
||||
[ ](http://www.filamentgroup.com/)
|
||||
|
||||
A set of jQuery plugins for responsive tables.
|
||||
|
||||
## Table Modes
|
||||
|
||||
### Stack
|
||||
|
||||
The Stack Table stacks the table headers to a two column layout with headers on the left when the viewport width is less than `40em` (`640px`).
|
||||
|
||||
```html
|
||||
<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
|
||||
```
|
||||
|
||||
|
||||
|
||||
* [Stack Table Demo](http://filamentgroup.github.io/tablesaw/demo/stack.html)
|
||||
|
||||
If you only want to use the Stack Table and don’t want all the extra features below (save yourself some bytes), Tablesaw provides a Stack-Only version.
|
||||
|
||||
* [Stack-Only Table Demo](http://filamentgroup.github.io/tablesaw/demo/stackonly.html)
|
||||
|
||||
#### Opt out of inline labels
|
||||
|
||||
To opt-out of inline label creation (the table header cell text that shows at small breakpoints) on a per-table basis, use `<table data-tablesaw-no-labels>`; on a per-row basis, use `<tr data-tablesaw-no-labels>`.
|
||||
|
||||
### Toggle
|
||||
|
||||
The Column Toggle Table allows the user to select which columns they want to be visible.
|
||||
|
||||
<table data-tablesaw-mode="columntoggle">
|
||||
|
||||
Table headers must have a `data-tablesaw-priority` attribute to be eligible to toggle. `data-tablesaw-priority` is a numeric value from 1 to 6, which determine default breakpoints at which a column will show. The breakpoint defaults are:
|
||||
|
||||
```html
|
||||
<th data-tablesaw-priority="persist"><!-- Not eligible for toggle, always shows --></th>
|
||||
<th data-tablesaw-priority="1"><!-- Shows at (min-width: 20em) (320px) --></th>
|
||||
<th data-tablesaw-priority="2"><!-- Shows at (min-width: 30em) (480px) --></th>
|
||||
<th data-tablesaw-priority="3"><!-- Shows at (min-width: 40em) (640px) --></th>
|
||||
<th data-tablesaw-priority="4"><!-- Shows at (min-width: 50em) (800px) --></th>
|
||||
<th data-tablesaw-priority="5"><!-- Shows at (min-width: 60em) (960px) --></th>
|
||||
<th data-tablesaw-priority="6"><!-- Shows at (min-width: 70em) (1120px) --></th>
|
||||
```
|
||||
|
||||
Keep in mind that the priorities are not exclusive—multiple columns can reuse the same priority value.
|
||||
|
||||
#### Add a Mini Map
|
||||
|
||||
<table data-tablesaw-mode="columntoggle" data-tablesaw-minimap>
|
||||
|
||||
|
||||
|
||||
* [Column Toggle Demo](http://filamentgroup.github.io/tablesaw/demo/toggle.html)
|
||||
|
||||
### Swipe
|
||||
|
||||
Allows the user to use the swipe gesture (or use the left and right buttons) to navigate the columns.
|
||||
|
||||
```html
|
||||
<table data-tablesaw-mode="swipe">
|
||||
```
|
||||
|
||||
Columns also respect the `data-tablesaw-priority="persist"` attribute.
|
||||
|
||||
```html
|
||||
<th data-tablesaw-priority="persist"><!-- Always shows --></th>
|
||||
```
|
||||
|
||||
#### Add a Mini Map
|
||||
|
||||
```html
|
||||
<table data-tablesaw-mode="swipe" data-tablesaw-minimap>
|
||||
```
|
||||
|
||||
|
||||
|
||||
* [Swipe Demo](http://filamentgroup.github.io/tablesaw/demo/swipe.html)
|
||||
|
||||
#### Advanced: Configure Swipe Thresholds
|
||||
|
||||
Add a Tablesaw `config` object after including the Tablesaw JavaScript.
|
||||
|
||||
```js
|
||||
Tablesaw.config = {
|
||||
swipe: {
|
||||
horizontalThreshold: 15,
|
||||
verticalThreshold: 20
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
* [Configure Swipe Threshold Demo](http://filamentgroup.github.io/tablesaw/demo/swipe-config.html)
|
||||
|
||||
## Mini Map
|
||||
|
||||
Use `data-tablesaw-minimap` to add a series of small dots to show which columns are currently visible and which are hidden. Only available on `swipe` and `columntoggle` tables. Examples available above.
|
||||
|
||||
## Mode Switcher
|
||||
|
||||
```html
|
||||
<table data-tablesaw-mode-switch>
|
||||
|
||||
<!-- With a different default mode -->
|
||||
<table data-tablesaw-mode="swipe" data-tablesaw-mode-switch>
|
||||
|
||||
<!-- Exclude a mode from the switcher -->
|
||||
<table data-tablesaw-mode-switch data-tablesaw-mode-exclude="columntoggle">
|
||||
```
|
||||
|
||||
|
||||
|
||||
* [Mode Switcher Demo](http://filamentgroup.github.io/tablesaw/demo/modeswitch.html)
|
||||
|
||||
## Sortable
|
||||
|
||||
The “sortable” option allows the user to sort the table data by clicking on the table headers. Since all the columns may not be visible on smaller breakpoints (or not there at all if using the “stack” table mode), relying solely on the column headers to choose the table sort isn’t practical. To address this, there is an optional `data-tablesaw-sortable-switch` attribute on the table that adds a select menu auto-populated with the names of each column in the table with options for choosing ascending or descending sort direction. Data options on table headers can be used to control which columns are sortable (`data-tablesaw-sortable-col`) and the default sort order (`data-tablesaw-sortable-default-col`).
|
||||
|
||||
```html
|
||||
<table data-tablesaw-sortable>
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Default column -->
|
||||
<th data-tablesaw-sortable-col data-tablesaw-sortable-default-col>Rank</th>
|
||||
<th data-tablesaw-sortable-col>Movie Title</th>
|
||||
<th data-tablesaw-sortable-col data-sortable-numeric>Year</th>
|
||||
<th data-tablesaw-sortable-col data-sortable-numeric><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<!-- Unsortable column -->
|
||||
<th>Reviews</th>
|
||||
</tr>
|
||||
</thead>
|
||||
...
|
||||
```
|
||||
|
||||
Use `data-tablesaw-sortable-switch` to add a select form element to manually choose the sort order.
|
||||
|
||||
<table data-tablesaw-sortable data-tablesaw-sortable-switch>
|
||||
|
||||
|
||||
|
||||
* [Sortable Demo](http://filamentgroup.github.io/tablesaw/demo/sort.html)
|
||||
|
||||
### Custom Sort Functions
|
||||
|
||||
We also provide the option to specify Custom Sort functions on individual columns ([working example](http://filamentgroup.github.io/tablesaw/demo/sort-custom.html)). In the contrived example below, we want to sort full dates (e.g. `12/02/2014`) just on the year.
|
||||
|
||||
```
|
||||
// Add a data function to the table header cell
|
||||
$( "th#custom-sort" ).data( "tablesaw-sort", function( ascending ) {
|
||||
// return a function
|
||||
return function( a, b ) {
|
||||
// use a.cell and b.cell for cell values
|
||||
var dateA = a.cell.split( "/" ),
|
||||
dateB = b.cell.split( "/" ),
|
||||
yearA = parseInt( dateA[ 2 ], 10 ),
|
||||
yearB = parseInt( dateB[ 2 ], 10 );
|
||||
|
||||
if( ascending ) {
|
||||
return yearA > yearB;
|
||||
} else { // descending
|
||||
return yearA < yearB;
|
||||
}
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
## Kitchen ~~Table~~ Sink
|
||||
|
||||
All of the above options combined into a single table.
|
||||
|
||||
* [Kitchen Sink Demo](http://filamentgroup.github.io/tablesaw/demo/kitchensink.html)
|
||||
|
||||
## Getting Started
|
||||
|
||||
TableSaw requires [Respond.js](https://github.com/scottjehl/Respond) for IE8- support.
|
||||
|
||||
### Using Stack-Only TableSaw
|
||||
|
||||
As shown above, we provide a Stack-mode-only package of TableSaw. It’s a barebones version that doesn’t include any of the other features above.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="tablesaw.css">
|
||||
<!--[if lt IE 9]><script src="dependencies/respond.js"></script><!--<![endif]-->
|
||||
<script src="tablesaw.js"></script>
|
||||
<script src="tablesaw-init.js"></script>
|
||||
```
|
||||
|
||||
And then:
|
||||
|
||||
```html
|
||||
<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
|
||||
```
|
||||
|
||||
Check out [the Stack-Only demo](http://filamentgroup.github.io/tablesaw/demo/stackonly.html) to see a working example.
|
||||
|
||||
### Using Stack-Only TableSaw SCSS Mixin
|
||||
|
||||
To easily customize the breakpoint at which the stack table switches, use the SCSS mixin. First, include the `tablesaw.stackonly.scss` file instead of `tablesaw.stackonly.css` in your SASS. Then, use a parent selector on your table.
|
||||
|
||||
```html
|
||||
<div class="my-parent-selector">
|
||||
<table class="tablesaw" data-tablesaw-mode="stack">
|
||||
```
|
||||
|
||||
Include the mixin like so:
|
||||
|
||||
```scss
|
||||
.my-parent-selector {
|
||||
@include tablesaw-stack( 50em );
|
||||
}
|
||||
```
|
||||
|
||||
The argument to `tablesaw-stack` is the breakpoint at which the table will switch from columns to stacked.
|
||||
|
||||
### The Full TableSaw
|
||||
|
||||
If you want the other modes, it’ll take a little bit more configuration.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="tablesaw.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="dependencies/respond.js"></script><!--<![endif]-->
|
||||
<script src="dependencies/jquery.js"></script>
|
||||
<script src="tablesaw.js"></script>
|
||||
<script src="tablesaw-init.js"></script>
|
||||
```
|
||||
|
||||
Check out any of the demos above for complete working examples.
|
||||
|
||||
### Using Bare TableSaw
|
||||
|
||||
Tablesaw is designed to be a drop-in solution, providing table styles as well as responsive table functionality.
|
||||
|
||||
If you would like the full functionality of the TableSaw plugin. but the plugin's default table styles don't fit in with your project, use the `tablesaw.bare.css` file instead of the standard `tablesaw.css` file for a much lighter default style which is significantly easier to customize.
|
||||
|
||||
To see what all TableSaw functionality looks like with this alternate stylesheet applied.
|
||||
|
||||
* [Bare CSS Demo](http://filamentgroup.github.io/tablesaw/demo/bare.html)
|
||||
|
||||
## [Tests](http://filamentgroup.github.io/tablesaw/test/tablesaw.html)
|
||||
|
||||
## Building the Project Locally
|
||||
|
||||
Run `npm install` to install dependencies and then `grunt` to build the project files into the `dist` folder.
|
||||
15
public/bower_components/filament-tablesaw/bower.json
vendored
Executable file
15
public/bower_components/filament-tablesaw/bower.json
vendored
Executable file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "filament-tablesaw",
|
||||
"main": [
|
||||
"dist/tablesaw.js",
|
||||
"dist/tablesaw.css",
|
||||
"dist/icons/**"
|
||||
],
|
||||
"ignore": [
|
||||
"**/.*"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.11.2",
|
||||
"respond": ">=1.4.2"
|
||||
}
|
||||
}
|
||||
67
public/bower_components/filament-tablesaw/demo/ajax-init-stack.html
vendored
Executable file
67
public/bower_components/filament-tablesaw/demo/ajax-init-stack.html
vendored
Executable file
@@ -0,0 +1,67 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
|
||||
<script>
|
||||
$( document ).ready(function() {
|
||||
var mydata = [
|
||||
{"Name":"A", "P1":"1", "P2":"2", "P3":"3", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"B", "P1":"4", "P2":"5", "P3":"6", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"C", "P1":"7", "P2":"8", "P3":"9", "P4":"1", "P5":"2", "P6":"3"}
|
||||
];
|
||||
|
||||
$( '#ajaxed' ).html( "<table class='tablesaw tablesaw-stack' data-tablesaw-mode='stack' id='mytable'><thead><tr><th scope='col' data-tablesaw-priority='persist'>Name</th><th scope='col'>P1</th><th scope='col'>P2</th><th scope='col'>P3</th><th scope='col'>P4</th><th scope='col'>P5</th><th scope='col'>P6</th></tr></thead><tbody id='place1'></tbody></table>" );
|
||||
|
||||
var tbody = $( '#mytable tbody' ), props = ["Name","P1","P2","P3","P4","P5","P6"];
|
||||
|
||||
$.each( mydata, function(i, value){
|
||||
var tr = $('<tr>');
|
||||
|
||||
$.each(props, function(i, prop){
|
||||
$('<td>').html(value[prop]).appendTo(tr);
|
||||
});
|
||||
|
||||
tbody.append(tr);
|
||||
});
|
||||
|
||||
$('#mytable').table().data( "table" ).refresh();
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Swipe Table</h2>
|
||||
|
||||
<div id="ajaxed"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
67
public/bower_components/filament-tablesaw/demo/ajax-init.html
vendored
Executable file
67
public/bower_components/filament-tablesaw/demo/ajax-init.html
vendored
Executable file
@@ -0,0 +1,67 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
|
||||
<script>
|
||||
$( document ).ready(function() {
|
||||
var mydata = [
|
||||
{"Name":"A", "P1":"1", "P2":"2", "P3":"3", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"B", "P1":"4", "P2":"5", "P3":"6", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"C", "P1":"7", "P2":"8", "P3":"9", "P4":"1", "P5":"2", "P6":"3"}
|
||||
];
|
||||
|
||||
$( '#ajaxed' ).html( "<table class='tablesaw' data-tablesaw-mode='swipe' id='mytable'><thead><tr><th scope='col' data-tablesaw-priority='persist'>Name</th><th scope='col'>P1</th><th scope='col'>P2</th><th scope='col'>P3</th><th scope='col'>P4</th><th scope='col'>P5</th><th scope='col'>P6</th></tr></thead><tbody id='place1'></tbody></table>" );
|
||||
|
||||
var tbody = $( '#mytable tbody' ), props = ["Name","P1","P2","P3","P4","P5","P6"];
|
||||
|
||||
$.each( mydata, function(i, value){
|
||||
var tr = $('<tr>');
|
||||
|
||||
$.each(props, function(i, prop){
|
||||
$('<td>').html(value[prop]).appendTo(tr);
|
||||
});
|
||||
|
||||
tbody.append(tr);
|
||||
});
|
||||
|
||||
$('#mytable').table().data( "table" ).refresh();
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Swipe Table</h2>
|
||||
|
||||
<div id="ajaxed"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
137
public/bower_components/filament-tablesaw/demo/bare.html
vendored
Executable file
137
public/bower_components/filament-tablesaw/demo/bare.html
vendored
Executable file
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Column Toggle Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/bare/tablesaw.bare.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html" class="current">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Bare Table</h2>
|
||||
<p>A demo which includes all TableSaw functionality, as per the <a href="kitchensink.html">Kitchen Sink</a> demo, but uses the "bare" css file. This file removes much of the default styling provided by the TableSaw plugin, allowing users to more easily customize table styles to better suit the needs of their projects..</p>
|
||||
<table id="table2" class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
158
public/bower_components/filament-tablesaw/demo/caption.html
vendored
Executable file
158
public/bower_components/filament-tablesaw/demo/caption.html
vendored
Executable file
@@ -0,0 +1,158 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Column Toggle Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html" class="current">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h3 class="docs">Swipe Mode, ModeSwitch, Minimap, Sortable, SortableSwitch</h3>
|
||||
<table id="table2" class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
|
||||
<caption>This is a table caption</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Reviews</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane">Citizen Kane</a></td>
|
||||
<td class="har">1</td>
|
||||
<td>1941</td>
|
||||
<td>100%</td>
|
||||
<td>74</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)">Casablanca</a></td>
|
||||
<td>2</td>
|
||||
<td>1942</td>
|
||||
<td>97%</td>
|
||||
<td>64</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/The_Godfather">The Godfather</a></td>
|
||||
<td>3</td>
|
||||
<td>1972</td>
|
||||
<td>97%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)">Gone with the Wind</a></td>
|
||||
<td>4</td>
|
||||
<td>1939</td>
|
||||
<td>96%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
53
public/bower_components/filament-tablesaw/demo/demo.css
vendored
Executable file
53
public/bower_components/filament-tablesaw/demo/demo.css
vendored
Executable file
@@ -0,0 +1,53 @@
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
font: 100%/1.2 sans-serif;
|
||||
}
|
||||
|
||||
:link {
|
||||
color: #1593D3;
|
||||
}
|
||||
|
||||
:visited {
|
||||
color: #38C;
|
||||
}
|
||||
/* Logo */
|
||||
.header {
|
||||
background: #247201 url(http://filamentgroup.com/images/headerbg-new.jpg) no-repeat bottom left;
|
||||
}
|
||||
#fg-logo {
|
||||
text-indent: -9999px;
|
||||
margin: 0 auto;
|
||||
width: 287px;
|
||||
height: 52px;
|
||||
background-image: url(http://filamentgroup.com/images/fg-logo-icon.png);
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
|
||||
#fg-logo {
|
||||
background-size: 287px 52px;
|
||||
background-image: url(http://filamentgroup.com/images/fg-logo-icon-lrg.png);
|
||||
}
|
||||
}
|
||||
|
||||
/* Customized Demo CSS for our Demo Tables */
|
||||
.tablesaw-columntoggle td.title a,
|
||||
.tablesaw-swipe td.title a {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 10em;
|
||||
}
|
||||
@media (min-width: 40em) {
|
||||
td.title {
|
||||
max-width: 12em;
|
||||
}
|
||||
.tablesaw-stack td.title a {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 10em;
|
||||
max-width: 40vw;
|
||||
}
|
||||
}
|
||||
97
public/bower_components/filament-tablesaw/demo/issues/109.html
vendored
Executable file
97
public/bower_components/filament-tablesaw/demo/issues/109.html
vendored
Executable file
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
<link rel="stylesheet" href="/tablesaw/dist/tablesaw.css">
|
||||
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
|
||||
<script src="/tablesaw/dist/tablesaw.js"></script>
|
||||
<script src="/tablesaw/dist/tablesaw-init.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table id="table2" class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist" data-sortable-numeric="false">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">1 Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">3 Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
62
public/bower_components/filament-tablesaw/demo/issues/110.html
vendored
Executable file
62
public/bower_components/filament-tablesaw/demo/issues/110.html
vendored
Executable file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
<link rel="stylesheet" href="/tablesaw/dist/tablesaw.css">
|
||||
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
|
||||
<script src="/tablesaw/dist/tablesaw.js"></script>
|
||||
<script src="/tablesaw/dist/tablesaw-init.js"></script>
|
||||
<script>
|
||||
$( document ).ready(function() {
|
||||
var mydata = [
|
||||
{"Name":"A", "P1":"1", "P2":"2", "P3":"3", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"B", "P1":"4", "P2":"5", "P3":"6", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"C", "P1":"7", "P2":"8", "P3":"9", "P4":"1", "P5":"2", "P6":"3"}
|
||||
];
|
||||
|
||||
$( '#ajaxed' ).html( "<table class='tablesaw' data-tablesaw-mode='columntoggle' id='mytable'><thead><tr><th scope='col' data-tablesaw-priority='persist'>Name</th><th scope='col' data-tablesaw-priority='1'>P1</th><th scope='col' data-tablesaw-priority='1'>P2</th><th scope='col' data-tablesaw-priority='2'>P3</th><th scope='col' data-tablesaw-priority='3'>P4</th><th scope='col' data-tablesaw-priority='4'>P5</th><th scope='col' data-tablesaw-priority='5'>P6</th></tr></thead><tbody id='place1'></tbody></table>" );
|
||||
|
||||
var tbody = $( '#mytable tbody' ), props = ["Name","P1","P2","P3","P4","P5","P6"];
|
||||
|
||||
$.each( mydata, function(i, value){
|
||||
var tr = $('<tr>');
|
||||
|
||||
$.each(props, function(i, prop){
|
||||
$('<td>').html(value[prop]).appendTo(tr);
|
||||
});
|
||||
|
||||
tbody.append(tr);
|
||||
});
|
||||
$(document).trigger( "enhance.tablesaw" );
|
||||
|
||||
window.setTimeout(function() {
|
||||
var mydata = [
|
||||
{"Name":"D", "P1":"1", "P2":"2", "P3":"3", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"E", "P1":"4", "P2":"5", "P3":"6", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"F", "P1":"7", "P2":"8", "P3":"9", "P4":"1", "P5":"2", "P6":"3"}
|
||||
];
|
||||
var tbody = $( '#mytable tbody' ), props = ["Name","P1","P2","P3","P4","P5","P6"];
|
||||
|
||||
$.each( mydata, function(i, value){
|
||||
var tr = $('<tr>');
|
||||
|
||||
$.each(props, function(i, prop){
|
||||
$('<td>').html(value[prop]).appendTo(tr);
|
||||
});
|
||||
|
||||
tbody.append(tr);
|
||||
$('#mytable').table().data( "table" ).refresh();
|
||||
});
|
||||
}, 5000);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body cz-shortcut-listen="true">
|
||||
<div class="docs-main">
|
||||
<h2>Swipe Table</h2>
|
||||
<div id="ajaxed"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
85
public/bower_components/filament-tablesaw/demo/issues/ajax-init-tbody.html
vendored
Executable file
85
public/bower_components/filament-tablesaw/demo/issues/ajax-init-tbody.html
vendored
Executable file
@@ -0,0 +1,85 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
|
||||
<script>
|
||||
$( document ).ready(function() {
|
||||
var mydata = [
|
||||
{"Name":"A", "P1":"1", "P2":"2", "P3":"3", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"B", "P1":"4", "P2":"5", "P3":"6", "P4":"1", "P5":"2", "P6":"3"},
|
||||
{"Name":"C", "P1":"7", "P2":"8", "P3":"9", "P4":"1", "P5":"2", "P6":"3"}
|
||||
];
|
||||
|
||||
var tbody = $( '#mytable tbody' ), props = ["Name","P1","P2","P3","P4","P5","P6"];
|
||||
|
||||
$.each( mydata, function(i, value){
|
||||
var tr = $('<tr>');
|
||||
|
||||
$.each(props, function(i, prop){
|
||||
$('<td>').html(value[prop]).appendTo(tr);
|
||||
});
|
||||
|
||||
tbody.append(tr);
|
||||
});
|
||||
|
||||
$('#mytable').table().data( "table" ).refresh();
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Swipe Table</h2>
|
||||
|
||||
<table class='tablesaw' data-tablesaw-mode='swipe' id='mytable'>
|
||||
<thead>
|
||||
<tr><th data-tablesaw-priority='persist'>Name</th><th>P1</th><th>P2</th><th>P3</th><th>P4</th><th>P5</th><th>P6</th></tr>
|
||||
</thead>
|
||||
<tbody id="place1">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
139
public/bower_components/filament-tablesaw/demo/issues/charset-test-issue-106.php
vendored
Executable file
139
public/bower_components/filament-tablesaw/demo/issues/charset-test-issue-106.php
vendored
Executable file
@@ -0,0 +1,139 @@
|
||||
<?php
|
||||
header( "Content-Type:text/html; charset=windows-1250" );
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html" class="current">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Sortable Table</h2>
|
||||
<h3 class="docs">Default appearance (with optional sortable-switch)</h3>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-sortable data-tablesaw-sortable-switch>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
83
public/bower_components/filament-tablesaw/demo/issues/hideempty.html
vendored
Executable file
83
public/bower_components/filament-tablesaw/demo/issues/hideempty.html
vendored
Executable file
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Stack Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html" class="current">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Stack Table</h2>
|
||||
<p>The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.</p>
|
||||
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Skill</th>
|
||||
<th>Last Entry</th>
|
||||
<th>Alphabet</th>
|
||||
<th>More Alphabet</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bartender</td>
|
||||
<td>May 2, 1:34p John K.</td>
|
||||
<td>A, B, C, D</td>
|
||||
<td>E, F, G, H</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Host</td>
|
||||
<td>May 11, 12:45a</td>
|
||||
<td>A, B, C, D</td>
|
||||
<td>E, F, G, H</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Waiter</td>
|
||||
<td>May 10, 1:15a</td>
|
||||
<td></td>
|
||||
<td>E, F, G, H</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
83
public/bower_components/filament-tablesaw/demo/issues/issue-31.html
vendored
Executable file
83
public/bower_components/filament-tablesaw/demo/issues/issue-31.html
vendored
Executable file
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Stack Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html" class="current">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Stack Table</h2>
|
||||
<p>The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.</p>
|
||||
<table class="tablesaw" data-tablesaw-mode="stack">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Skill</th>
|
||||
<th>Last Entry</th>
|
||||
<th>Alphabet</th>
|
||||
<th>More Alphabet</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr data-tablesaw-no-labels>
|
||||
<td>Footer</td>
|
||||
<td>May 11, 12:45a</td>
|
||||
<td>A, B, C, D</td>
|
||||
<td>E, F, G, H</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bartender</td>
|
||||
<td>May 2, 1:34p John K.</td>
|
||||
<td>A, B, C, D</td>
|
||||
<td>E, F, G, H</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Host</td>
|
||||
<td>May 11, 12:45a</td>
|
||||
<td>A, B, C, D</td>
|
||||
<td>E, F, G, H</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
526
public/bower_components/filament-tablesaw/demo/issues/issue-32.html
vendored
Executable file
526
public/bower_components/filament-tablesaw/demo/issues/issue-32.html
vendored
Executable file
@@ -0,0 +1,526 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
|
||||
<style>
|
||||
/* .spec-detail-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: solid 1px #c9c9c9;
|
||||
text-align: left;
|
||||
}
|
||||
.spec-detail-table td, .spec-detail-table th {
|
||||
border-right: solid 1px #c9c9c9;
|
||||
border-bottom: solid 1px #c9c9c9;
|
||||
border-top: solid 1px #ffffff;
|
||||
vertical-align: top;
|
||||
background-color: #ffffff;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 22px;
|
||||
padding: 15px;
|
||||
text-align: inherit;
|
||||
white-space: inherit;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
.spec-detail-table td.column-1, .spec-detail-table th.column-1 {
|
||||
background-color: #e2e2e2;
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
.spec-detail-table td:nth-child(last), .spec-detail-table th:nth-child(last) {
|
||||
border-right: none;
|
||||
width: 150px;
|
||||
}*/
|
||||
</style>
|
||||
|
||||
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>Issue 32</h1>
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="column-1" data-tablesaw-priority="persist">
|
||||
Ad Type
|
||||
</th>
|
||||
<th class="column-2">
|
||||
Desktop Billboard
|
||||
</th>
|
||||
<th class="column-3">
|
||||
Desktop Tablet / Rectangle
|
||||
</th>
|
||||
<th class="column-4">
|
||||
Tablet Leaderboard
|
||||
</th>
|
||||
<th class="column-5">
|
||||
|
||||
Smart Phone<br />
|
||||
Standart Wide<br/>
|
||||
Banner
|
||||
|
||||
</th>
|
||||
<th class="column-6">
|
||||
|
||||
Smarth Phone<br />
|
||||
Rectangle
|
||||
|
||||
</th>
|
||||
<th class="column-7">
|
||||
Data point
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Ad Size
|
||||
</td>
|
||||
<td class="column-2">
|
||||
970x250
|
||||
</td>
|
||||
<td class="column-3">
|
||||
300x250
|
||||
</td>
|
||||
<td class="column-4">
|
||||
728x90
|
||||
</td>
|
||||
<td class="column-5">
|
||||
320x50
|
||||
</td>
|
||||
<td class="column-6">
|
||||
300x250
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Retina Ad Size
|
||||
</td>
|
||||
<td class="column-2">
|
||||
970x250
|
||||
</td>
|
||||
<td class="column-3">
|
||||
300x250
|
||||
</td>
|
||||
<td class="column-4">
|
||||
728x90
|
||||
</td>
|
||||
<td class="column-5">
|
||||
320x50
|
||||
</td>
|
||||
<td class="column-6">
|
||||
300x250
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Expanded Size
|
||||
</td>
|
||||
<td class="column-2">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-3">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-4">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-5">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-6">
|
||||
640x960
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Expanded Direction
|
||||
</td>
|
||||
<td class="column-2">
|
||||
None(Leave behind 970x90)
|
||||
</td>
|
||||
<td class="column-3">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-4">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-5">
|
||||
Up
|
||||
</td>
|
||||
<td class="column-6">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Looping & Max. Length of Anim.
|
||||
</td>
|
||||
<td class="column-2">
|
||||
:15max
|
||||
</td>
|
||||
<td class="column-3">
|
||||
3 loop limit, 15 sec max
|
||||
</td>
|
||||
<td class="column-4">
|
||||
3 loop limit, 15 sec max
|
||||
</td>
|
||||
<td class="column-5">
|
||||
3 loop limit, 15 sec max
|
||||
</td>
|
||||
<td class="column-6">
|
||||
3 loop limit, 15 sec max
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Datapoint
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Frames per Second
|
||||
</td>
|
||||
<td class="column-2">
|
||||
18fps
|
||||
</td>
|
||||
<td class="column-3">
|
||||
24fps
|
||||
</td>
|
||||
<td class="column-4">
|
||||
24fps
|
||||
</td>
|
||||
<td class="column-5">
|
||||
24fps
|
||||
</td>
|
||||
<td class="column-6">
|
||||
24fps
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Max Initial Load File Size(k)
|
||||
</td>
|
||||
<td class="column-2">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-3">
|
||||
50k
|
||||
</td>
|
||||
<td class="column-4">
|
||||
50k
|
||||
</td>
|
||||
<td class="column-5">
|
||||
100k
|
||||
</td>
|
||||
<td class="column-6">
|
||||
200k
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Max Full Load File Size Flash/Rich Media (k)
|
||||
</td>
|
||||
<td class="column-2">
|
||||
100k (1.2MB for video)
|
||||
</td>
|
||||
<td class="column-3">
|
||||
100k (2.2MB for video)
|
||||
</td>
|
||||
<td class="column-4">
|
||||
100k (2.2MB for video)
|
||||
</td>
|
||||
<td class="column-5">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-6">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Max Expanded File Size
|
||||
</td>
|
||||
<td class="column-2">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-3">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-4">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-5">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-6">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Max Expanded File Size: HQ, Double Density/Retina
|
||||
</td>
|
||||
<td class="column-2">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-3">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-4">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-5">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-6">
|
||||
60k
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Accepted formats
|
||||
</td>
|
||||
<td class="column-2">
|
||||
|
||||
Panel: Layered PSDs built to size
|
||||
or fla's & swf's (both fla & swf
|
||||
needed together)
|
||||
|
||||
|
||||
Video: .mov or .avi
|
||||
(.mov preferred)
|
||||
|
||||
</td>
|
||||
<td class="column-3">
|
||||
gif/.jpeg, .swf, rich media, html
|
||||
</td>
|
||||
<td class="column-4">
|
||||
.gif/.jpeg, .
|
||||
swf, rich
|
||||
media, html
|
||||
</td>
|
||||
<td class="column-5">
|
||||
GIF, JPG,
|
||||
Animating
|
||||
GIF, PNG
|
||||
</td>
|
||||
<td class="column-6">
|
||||
GIF, JPG,
|
||||
Animating
|
||||
GIF, PNG
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
3rd Party Tracking
|
||||
Accepted
|
||||
</td>
|
||||
<td class="column-2">
|
||||
yes
|
||||
</td>
|
||||
<td class="column-3">
|
||||
yes
|
||||
</td>
|
||||
<td class="column-4">
|
||||
yes
|
||||
</td>
|
||||
<td class="column-5">
|
||||
|
||||
Y (1 click & 1
|
||||
impression
|
||||
tracker per
|
||||
each ad size,
|
||||
both standard
|
||||
& expanded
|
||||
states)
|
||||
|
||||
</td>
|
||||
<td class="column-6">
|
||||
|
||||
Y (1 click & 1
|
||||
impression
|
||||
tracker per
|
||||
each ad size,
|
||||
both standard
|
||||
& expanded
|
||||
states)
|
||||
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Sound Allowed
|
||||
</td>
|
||||
<td class="column-2">
|
||||
Yes, on click
|
||||
</td>
|
||||
<td class="column-3">
|
||||
Yes, on click
|
||||
</td>
|
||||
<td class="column-4">
|
||||
Yes, on click
|
||||
</td>
|
||||
<td class="column-5">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-6">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Video Allowed
|
||||
</td>
|
||||
<td class="column-2">
|
||||
See Notes
|
||||
</td>
|
||||
<td class="column-3">
|
||||
Yes, on click
|
||||
</td>
|
||||
<td class="column-4">
|
||||
Yes, on click
|
||||
</td>
|
||||
<td class="column-5">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-6">
|
||||
N/A
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="column-1" data-tablesaw-priority="persist">
|
||||
Notes
|
||||
</td>
|
||||
<td class="column-2">
|
||||
|
||||
CTA: Include a "(X) close"
|
||||
button at the top right of the
|
||||
panel
|
||||
<br />
|
||||
970x90 leave-behind: include
|
||||
applicable branding. Format:
|
||||
.gif or .jpg.
|
||||
<br />
|
||||
Video: Panel should be
|
||||
designed with an area reserved
|
||||
for video. Must have coding for
|
||||
player controls (minimum of
|
||||
stop/play, mute/unmute).
|
||||
Video files cannot be third-party
|
||||
served.
|
||||
<br />
|
||||
For more information, including
|
||||
style guides please visit :
|
||||
<a href="www.iab.net/risingstars">www.iab.net/risingstars</a>
|
||||
|
||||
</td>
|
||||
<td class="column-3">
|
||||
|
||||
Cannot expand on Homepage or
|
||||
Leaderboard. (For Video Enabled
|
||||
300x250s: Minimum required
|
||||
controls = Play, Pause, Mute
|
||||
(volume control to zero (0)
|
||||
output may be included instead
|
||||
of or in addition to Mute control).
|
||||
<br />
|
||||
Audio must be user initiated
|
||||
(on click: mute/ un-mute);
|
||||
default state is muted.)
|
||||
|
||||
</td>
|
||||
<td class="column-4">
|
||||
|
||||
Cannot
|
||||
expand on
|
||||
Leaderboard.
|
||||
<br />
|
||||
Must provide
|
||||
backup .gif/
|
||||
.jpg along
|
||||
with any
|
||||
swf/html
|
||||
5 creative
|
||||
|
||||
</td>
|
||||
<td class="column-5">
|
||||
|
||||
Expandable
|
||||
Ads Should
|
||||
be HTML5.
|
||||
<br />
|
||||
Please see
|
||||
list of certified
|
||||
vendors for
|
||||
Mobile Rich
|
||||
Media.
|
||||
|
||||
</td>
|
||||
<td class="column-6">
|
||||
|
||||
Expandable
|
||||
Ads Should
|
||||
be HTML5.
|
||||
<br />
|
||||
Please see
|
||||
list of certified
|
||||
vendors for
|
||||
Mobile Rich
|
||||
Media.
|
||||
|
||||
</td>
|
||||
<td class="column-7">
|
||||
Data point
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
83
public/bower_components/filament-tablesaw/demo/issues/issue-35.html
vendored
Executable file
83
public/bower_components/filament-tablesaw/demo/issues/issue-35.html
vendored
Executable file
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Stack Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html" class="current">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Stack Table</h2>
|
||||
<p>The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.</p>
|
||||
<table style="width: 100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<table class="tablesaw" data-tablesaw-mode="stack">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Skill</th>
|
||||
<th>Last Entry</th>
|
||||
<th>Alphabet</th>
|
||||
<th>More Alphabet</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bartender</td>
|
||||
<td>May 2, 1:34p John K.</td>
|
||||
<td>A, B, C, D</td>
|
||||
<td>E, F, G, H</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Host</td>
|
||||
<td>May 11, 12:45a</td>
|
||||
<td>A, B, C, D</td>
|
||||
<td>E, F, G, H</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
public/bower_components/filament-tablesaw/demo/issues/issue-37.html
vendored
Executable file
44
public/bower_components/filament-tablesaw/demo/issues/issue-37.html
vendored
Executable file
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Stack Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- <div style="position:relative;"> -->
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-tablesaw-priority="persist">rental unit address</th>
|
||||
<th>rooms</th>
|
||||
<th>fee</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1600 Pennsylvania Ave NW, Washington</td>
|
||||
<td>200 i imagine i've seen the west wing</td>
|
||||
<td>$200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10 downing street , London</td>
|
||||
<td>20 i imagine, I've seen ouse of Cards</td>
|
||||
<td>$200,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- </div> -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
159
public/bower_components/filament-tablesaw/demo/issues/issue-48-49.html
vendored
Executable file
159
public/bower_components/filament-tablesaw/demo/issues/issue-48-49.html
vendored
Executable file
@@ -0,0 +1,159 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Stack Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
|
||||
<caption>Table 3: Summary of Evidence—Mammography Trials for Women Younger than 50 Years—Breast Cancer Mortality</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="1" rowspan="2">Study</th>
|
||||
<th colspan="1" rowspan="2">Age at entry (years)</th>
|
||||
<th colspan="1" rowspan="2">Screening interval (months)</th>
|
||||
<th colspan="1" rowspan="2">Year study began</th>
|
||||
<th colspan="2" rowspan="1">Total study sample size</th>
|
||||
<th colspan="3" rowspan="1">Breast cancer mortality<sup><a class="footnote-ref" href="#fn-iii">iii</a></sup> at mid-range follow-up (6 to 8 years)</th>
|
||||
<th colspan="3" rowspan="1">Breast cancer mortality<sup><a class="footnote-ref" href="#fn-iii">iii</a></sup> at 14-year follow-up</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Study group</th>
|
||||
<th>Control group</th>
|
||||
<th>Study group</th>
|
||||
<th>Control group</th>
|
||||
<th>RR (95% CI)</th>
|
||||
<th>Study group</th>
|
||||
<th>Control group</th>
|
||||
<th>RR (95% CI)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>HIP<sup><a class="footnote-ref" href="#fn-66">66</a></sup></td>
|
||||
<td>40–49</td>
|
||||
<td>12</td>
|
||||
<td>1963</td>
|
||||
<td>13,740</td>
|
||||
<td>13,740</td>
|
||||
<td>19</td>
|
||||
<td>20</td>
|
||||
<td>0.95 (0.51–1.78)</td>
|
||||
<td>64</td>
|
||||
<td>82</td>
|
||||
<td>0.78 (0.56–1.08)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Malmö<sup><a class="footnote-ref" href="#fn-58">58</a></sup></td>
|
||||
<td>45–54</td>
|
||||
<td>18–24</td>
|
||||
<td>1976</td>
|
||||
<td>13,568</td>
|
||||
<td>12,279</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td>53</td>
|
||||
<td>66</td>
|
||||
<td>0.73 (0.51–1.04)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Östergötland (E-County)<sup><a class="footnote-ref" href="#fn-65">65</a></sup></td>
|
||||
<td>40–49</td>
|
||||
<td>24</td>
|
||||
<td>1977</td>
|
||||
<td>10,285</td>
|
||||
<td>10,459</td>
|
||||
<td>15</td>
|
||||
<td>15</td>
|
||||
<td>1.03 (0.50–2.11)</td>
|
||||
<td>31</td>
|
||||
<td>30</td>
|
||||
<td>1.05 (0.64–1.73)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kopparberg (W-County)<sup><a class="footnote-ref" href="#fn-65">65</a></sup></td>
|
||||
<td>40–49</td>
|
||||
<td>24</td>
|
||||
<td>1977</td>
|
||||
<td>9,582</td>
|
||||
<td>5,031</td>
|
||||
<td>13</td>
|
||||
<td>9</td>
|
||||
<td>0.76 (0.32–1.77)</td>
|
||||
<td>22</td>
|
||||
<td>16</td>
|
||||
<td>0.72 (0.38–1.37)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CNBSS-1<sup><a class="footnote-ref" href="#fn-56">56</a></sup></td>
|
||||
<td>40–49</td>
|
||||
<td>12</td>
|
||||
<td>1980</td>
|
||||
<td>25,214</td>
|
||||
<td>25,216</td>
|
||||
<td>38</td>
|
||||
<td>28</td>
|
||||
<td>1.36 (0.84–2.21)</td>
|
||||
<td>105</td>
|
||||
<td>108</td>
|
||||
<td>0.97 (0.74–1.27)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Stockholm<sup><a class="footnote-ref" href="#fn-64">64</a></sup></td>
|
||||
<td>40–49</td>
|
||||
<td>28</td>
|
||||
<td>1981</td>
|
||||
<td>14,303</td>
|
||||
<td>8,021</td>
|
||||
<td>16</td>
|
||||
<td>8</td>
|
||||
<td>1.09 (0.40–3.00)</td>
|
||||
<td>34</td>
|
||||
<td>13</td>
|
||||
<td>1.47 (0.77–2.78)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Göteborg<sup><a class="footnote-ref" href="#fn-63">63</a></sup></td>
|
||||
<td>39–49</td>
|
||||
<td>18</td>
|
||||
<td>1982</td>
|
||||
<td>11,724</td>
|
||||
<td>14,217</td>
|
||||
<td>16</td>
|
||||
<td>33</td>
|
||||
<td>0.59 (0.33–1.06)</td>
|
||||
<td>34</td>
|
||||
<td>59</td>
|
||||
<td>0.70 (0.46–1.06)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UK AGE<sup><a class="footnote-ref" href="#fn-61">61</a></sup></td>
|
||||
<td>39–41</td>
|
||||
<td>12</td>
|
||||
<td>1991</td>
|
||||
<td>53,884</td>
|
||||
<td>106,956</td>
|
||||
<td>26</td>
|
||||
<td>65</td>
|
||||
<td>0.79 (0.48–1.27)</td>
|
||||
<td>105</td>
|
||||
<td>251</td>
|
||||
<td>0.83 (0.66–1.04)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
180
public/bower_components/filament-tablesaw/demo/issues/issue-65.html
vendored
Executable file
180
public/bower_components/filament-tablesaw/demo/issues/issue-65.html
vendored
Executable file
@@ -0,0 +1,180 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html" class="current">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Sortable Table</h2>
|
||||
<h3 class="docs">Default appearance (with optional sortable-switch <select>)</h3>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-sortable data-tablesaw-sortable-switch>
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-tablesaw-sortable-col data-tablesaw-sortable-default-col>Rank</th>
|
||||
<th data-tablesaw-sortable-col>Movie Title</th>
|
||||
<th id="third" data-tablesaw-sortable-col>Year</th>
|
||||
<th data-tablesaw-sortable-col><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th>Reviews</th>
|
||||
<th data-tablesaw-sortable-col data-sortable-numeric>Box Office</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
|
||||
<td>1941</td>
|
||||
<td>100%</td>
|
||||
<td>74</td>
|
||||
<td>$2M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">citizen kane</a></td>
|
||||
<td>1941</td>
|
||||
<td>100%</td>
|
||||
<td>74</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1.2</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">citizen blane</a></td>
|
||||
<td>1941</td>
|
||||
<td>100%</td>
|
||||
<td>74</td>
|
||||
<td>$12M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1.3</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">citizen Lane</a></td>
|
||||
<td>1941</td>
|
||||
<td>100%</td>
|
||||
<td>74</td>
|
||||
<td>$4.2M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>2</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
|
||||
<td>1942</td>
|
||||
<td>97%</td>
|
||||
<td>64</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>3</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
|
||||
<td>1972</td>
|
||||
<td>97%</td>
|
||||
<td>87</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>4</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
|
||||
<td>1939</td>
|
||||
<td>96%</td>
|
||||
<td>87</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>5</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>6</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove ...</a></td>
|
||||
<td>1964</td>
|
||||
<td>92%</td>
|
||||
<td>74</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>7</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
|
||||
<td>1967</td>
|
||||
<td>-91%</td>
|
||||
<td>122</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>8</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
|
||||
<td>1939</td>
|
||||
<td>+90%</td>
|
||||
<td>72</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>9</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
|
||||
<td>1952</td>
|
||||
<td>89%</td>
|
||||
<td>85</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>9</th>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
|
||||
<td>1952</td>
|
||||
<td>-89%</td>
|
||||
<td>85</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>10</th>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
|
||||
<td>2010</td>
|
||||
<td>84%</td>
|
||||
<td>78</td>
|
||||
<td>$1M</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
207
public/bower_components/filament-tablesaw/demo/issues/issue-74.html
vendored
Executable file
207
public/bower_components/filament-tablesaw/demo/issues/issue-74.html
vendored
Executable file
@@ -0,0 +1,207 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../dist/tablesaw.css">
|
||||
<script src="../../dist/dependencies/jquery.js"></script>
|
||||
<script src="../../dist/tablesaw.js"></script>
|
||||
<script src="../../dist/tablesaw-init.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<!-- <table class="table-saw tablesaw tablesaw-swipe" data-mode="swipe" style="margin:0 auto;"> -->
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe" style="margin:0 auto;">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-tablesaw-priority="persist"></th>
|
||||
|
||||
<th class="text-center">
|
||||
<a href="#"><span class="primary" data-icon="F" style="float:right;top:5px;right:5px; font-size:1.2em;"></span></a>
|
||||
<br>
|
||||
<img src="http://placehold.it/100x100&text=1">
|
||||
<br>
|
||||
<h5 class="item-name-table">Diamond Solitaire Ring ½ ct. Princess-cut, 14k White Gold</h5>
|
||||
<small class="small">In Stock, Online Only</small>
|
||||
<h5>$4,299.99</h5>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="small-6 column">
|
||||
<span class="button expand secondary">Add to Wishlist</span>
|
||||
</div>
|
||||
<div class="small-6 column">
|
||||
<span class="button expand">Add to Cart</span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="text-center">
|
||||
<a href="#"><span class="primary" data-icon="F" style="float:right;top:5px;right:5px; font-size:1.2em;"></span></a>
|
||||
<br>
|
||||
<img src="http://placehold.it/100x100&text=1">
|
||||
<br>
|
||||
<h3 class="item-name-table">Le Vian Necklace 1 ⅞ ct tw Diamonds 14k Vanilla Gold</h3>
|
||||
<small class="small">In Stock, Online Only</small>
|
||||
<h5>$5,299.99</h5>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="small-6 column">
|
||||
<span class="button expand secondary">Add to Wishlist</span>
|
||||
</div>
|
||||
<div class="small-6 column">
|
||||
<span class="button expand">Add to Cart</span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="text-center">
|
||||
<a href="#"><span class="primary" data-icon="F" style="float:right;top:5px;right:5px; font-size:1.2em;"></span></a>
|
||||
<br>
|
||||
<img src="http://placehold.it/100x100&text=1">
|
||||
<br>
|
||||
<h3 class="item-name-table">Diamond Earrings ¾ ct tw Round-cut 14K White Gold</h3>
|
||||
<small class="small">In Stock, Online Only</small>
|
||||
<h5>$2,299.99</h5>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="small-6 column">
|
||||
<span class="button expand secondary">Add to Wishlist</span>
|
||||
</div>
|
||||
<div class="small-6 column">
|
||||
<span class="button expand">Add to Cart</span>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<!-- <tr class="head">
|
||||
<th>Product Information</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr> -->
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Information</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
101
public/bower_components/filament-tablesaw/demo/kitchensink-nomodeswitch.html
vendored
Executable file
101
public/bower_components/filament-tablesaw/demo/kitchensink-nomodeswitch.html
vendored
Executable file
@@ -0,0 +1,101 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Column Toggle Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html" class="current">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h3 class="docs">Swipe Mode, <del>ModeSwitch</del>, Minimap, Sortable, SortableSwitch</h3>
|
||||
<table id="table2" class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Reviews</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane">Citizen Kane</a></td>
|
||||
<td class="har">1</td>
|
||||
<td>1941</td>
|
||||
<td>100%</td>
|
||||
<td>74</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)">Casablanca</a></td>
|
||||
<td>2</td>
|
||||
<td>1942</td>
|
||||
<td>97%</td>
|
||||
<td>64</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/The_Godfather">The Godfather</a></td>
|
||||
<td>3</td>
|
||||
<td>1972</td>
|
||||
<td>97%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)">Gone with the Wind</a></td>
|
||||
<td>4</td>
|
||||
<td>1939</td>
|
||||
<td>96%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)">Lawrence of Arabia</a></td>
|
||||
<td>5</td>
|
||||
<td>1962</td>
|
||||
<td>94%</td>
|
||||
<td>87</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
137
public/bower_components/filament-tablesaw/demo/kitchensink.html
vendored
Executable file
137
public/bower_components/filament-tablesaw/demo/kitchensink.html
vendored
Executable file
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Column Toggle Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html" class="current">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Kitchen Sink</h2>
|
||||
<p>This demonstration table contains all of the bells and whistles available in tablesaw: Swipe Mode, ModeSwitch, Minimap, Sortable, and SortableSwitch.</p>
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
221
public/bower_components/filament-tablesaw/demo/modeswitch.html
vendored
Executable file
221
public/bower_components/filament-tablesaw/demo/modeswitch.html
vendored
Executable file
@@ -0,0 +1,221 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html" class="current">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Mode Switch Table</h2>
|
||||
<p>The mode switcher allows the user to select which tablesaw view to use.</p>
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-mode-switch data-tablesaw-minimap>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Exclude columntoggle Mode</h2>
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-mode-switch data-tablesaw-minimap data-tablesaw-mode-exclude="columntoggle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
157
public/bower_components/filament-tablesaw/demo/sort-custom.html
vendored
Executable file
157
public/bower_components/filament-tablesaw/demo/sort-custom.html
vendored
Executable file
@@ -0,0 +1,157 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#custom-sort" ).data( "tablesaw-sort", function( ascending ) {
|
||||
return function( a, b ) {
|
||||
// a.cell
|
||||
// a.element
|
||||
// a.rowNum
|
||||
var yearA = a.cell.split( "/" ),
|
||||
yearB = b.cell.split( "/" );
|
||||
|
||||
if( ascending ) {
|
||||
return parseInt( yearA[ 1 ], 10 ) - parseInt( yearB[ 1 ], 10 );
|
||||
} else {
|
||||
// descending
|
||||
return parseInt( yearB[ 1 ], 10 ) - parseInt( yearA[ 1 ], 10 );
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html" class="current">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Sortable Table</h2>
|
||||
<h3 class="docs">Default appearance (with optional sortable-switch)</h3>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-sortable data-tablesaw-sortable-switch>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th id="custom-sort" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>11/2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>12/1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>3/2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>5/2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>9/2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>1/2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>3/2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>4/2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>11/2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>12/2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
137
public/bower_components/filament-tablesaw/demo/sort.html
vendored
Executable file
137
public/bower_components/filament-tablesaw/demo/sort.html
vendored
Executable file
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html" class="current">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Sortable Table</h2>
|
||||
<h3 class="docs">Default appearance (with optional sortable-switch)</h3>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-sortable data-tablesaw-sortable-switch>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
142
public/bower_components/filament-tablesaw/demo/stack.html
vendored
Executable file
142
public/bower_components/filament-tablesaw/demo/stack.html
vendored
Executable file
@@ -0,0 +1,142 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Stack Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
<style>
|
||||
.democolwidth {
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html" class="current">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Stack Table</h2>
|
||||
<p>The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.</p>
|
||||
<table class="tablesaw" data-tablesaw-mode="stack">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
138
public/bower_components/filament-tablesaw/demo/stackonly.html
vendored
Executable file
138
public/bower_components/filament-tablesaw/demo/stackonly.html
vendored
Executable file
@@ -0,0 +1,138 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Stack Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/stackonly/tablesaw.stackonly.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/stackonly/tablesaw.stackonly.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html" class="current">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>(Only the) Stack Table</h2>
|
||||
<p>If you only want to use the Stack Table and don’t want all the extra features and modes packaged with the full Tablesaw (save yourself some bytes), we do provide a Stack-Only version shown below.</p>
|
||||
<p>The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.</p>
|
||||
<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
255
public/bower_components/filament-tablesaw/demo/swipe-config.html
vendored
Executable file
255
public/bower_components/filament-tablesaw/demo/swipe-config.html
vendored
Executable file
@@ -0,0 +1,255 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script>
|
||||
Tablesaw.config = {
|
||||
swipe: {
|
||||
horizontalThreshold: 20, // default is 15
|
||||
verticalThreshold: 40 // default is 30
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html" class="current">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Swipe Table</h2>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe" data-minimap>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-priority="persist">Name</th>
|
||||
<th scope="col">Rank</th>
|
||||
<th scope="col">Money</th>
|
||||
<th scope="col">Money</th>
|
||||
<th scope="col">A (1–5)</th>
|
||||
<th scope="col">B (1–5)</th>
|
||||
<th scope="col">C (%)</th>
|
||||
<th scope="col">D (1–5)</th>
|
||||
<th scope="col">E (1–5)</th>
|
||||
<th scope="col">F (1–5)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Amanda
|
||||
</a>
|
||||
</td>
|
||||
<td class="current-ranking">1</td>
|
||||
<td>19.45</td>
|
||||
<td>18.72</td>
|
||||
<td>5</td>
|
||||
<td>5</td>
|
||||
<td>98</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Dave
|
||||
</a>
|
||||
</td>
|
||||
<td>2</td>
|
||||
<td>36.32</td>
|
||||
<td>20.52</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
<td>87</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Kristen
|
||||
</a>
|
||||
</td>
|
||||
<td>3</td>
|
||||
<td>35.23</td>
|
||||
<td>21.36</td>
|
||||
<td>2</td>
|
||||
<td>5</td>
|
||||
<td>89</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Kenny
|
||||
</a>
|
||||
</td>
|
||||
<td>4</td>
|
||||
<td>34.65</td>
|
||||
<td>27.15</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>98</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Kenny
|
||||
</a>
|
||||
</td>
|
||||
<td>4</td>
|
||||
<td>34.65</td>
|
||||
<td>27.15</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>98</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Kenny
|
||||
</a>
|
||||
</td>
|
||||
<td>4</td>
|
||||
<td>34.65</td>
|
||||
<td>27.15</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>98</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Kenny
|
||||
</a>
|
||||
</td>
|
||||
<td>4</td>
|
||||
<td>34.65</td>
|
||||
<td>27.15</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>98</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Kenny
|
||||
</a>
|
||||
</td>
|
||||
<td>4</td>
|
||||
<td>34.65</td>
|
||||
<td>27.15</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>98</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Kenny
|
||||
</a>
|
||||
</td>
|
||||
<td>4</td>
|
||||
<td>34.65</td>
|
||||
<td>27.15</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>98</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Kenny
|
||||
</a>
|
||||
</td>
|
||||
<td>4</td>
|
||||
<td>34.65</td>
|
||||
<td>27.15</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>98</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ranked-name">
|
||||
<a href="#">
|
||||
Kenny
|
||||
</a>
|
||||
</td>
|
||||
<td>4</td>
|
||||
<td>34.65</td>
|
||||
<td>27.15</td>
|
||||
<td>4</td>
|
||||
<td>4</td>
|
||||
<td>98</td>
|
||||
<td>5</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
227
public/bower_components/filament-tablesaw/demo/swipe-container.html
vendored
Executable file
227
public/bower_components/filament-tablesaw/demo/swipe-container.html
vendored
Executable file
@@ -0,0 +1,227 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
<style>
|
||||
/*.tablesaw.tablesaw.tablesaw {
|
||||
width: 50%;
|
||||
}*/
|
||||
</style>
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html" class="current">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main" style="width: 40%">
|
||||
<h2>Swipe Table</h2>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Swipe Table with Mini Map</h3>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-minimap>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
138
public/bower_components/filament-tablesaw/demo/swipe-fixcols-media.html
vendored
Executable file
138
public/bower_components/filament-tablesaw/demo/swipe-fixcols-media.html
vendored
Executable file
@@ -0,0 +1,138 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html" class="current">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Swipe Table</h2>
|
||||
|
||||
<h3>Swipe Table with Mini Map</h3>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-minimap data-tablesaw-swipe-media="(min-width: 40em)">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
222
public/bower_components/filament-tablesaw/demo/swipe.html
vendored
Executable file
222
public/bower_components/filament-tablesaw/demo/swipe.html
vendored
Executable file
@@ -0,0 +1,222 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Sortable Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html" class="current">Swipe Table</a>
|
||||
<a href="toggle.html">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<h2>Swipe Table</h2>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="title" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Swipe Table with Mini Map</h3>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-minimap>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
224
public/bower_components/filament-tablesaw/demo/toggle.html
vendored
Executable file
224
public/bower_components/filament-tablesaw/demo/toggle.html
vendored
Executable file
@@ -0,0 +1,224 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TableSaw Column Toggle Table</title>
|
||||
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
|
||||
|
||||
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="../dist/tablesaw-init.js"></script>
|
||||
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-header">
|
||||
<div class="company">
|
||||
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
|
||||
<span class="description">A group of plugins for responsive tables.</span>
|
||||
</h1>
|
||||
<ul class="outbound-links">
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
|
||||
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<div class="docs-globalnav">
|
||||
<nav class="docs-nav">
|
||||
<a href="kitchensink.html">Kitchen Sink</a>
|
||||
<a href="modeswitch.html">Mode Switch</a>
|
||||
<a href="sort.html">Sortable</a>
|
||||
<a href="stack.html">Stack</a>
|
||||
<a href="stackonly.html">Stack Only</a>
|
||||
<a href="swipe.html">Swipe Table</a>
|
||||
<a href="toggle.html" class="current">Toggle</a>
|
||||
<a href="bare.html">Bare</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
|
||||
<h2>Column Toggle Table</h2>
|
||||
<p>The Column Toggle Table allows the user to select which columns they want to be visible.</p>
|
||||
<table class="tablesaw" data-tablesaw-mode="columntoggle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Column Toggle Table with Mini Map</h2>
|
||||
|
||||
<table class="tablesaw" data-tablesaw-mode="columntoggle" data-tablesaw-minimap>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
|
||||
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
|
||||
<td>1</td>
|
||||
<td>2009</td>
|
||||
<td>83%</td>
|
||||
<td>$2.7B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
|
||||
<td>2</td>
|
||||
<td>1997</td>
|
||||
<td>88%</td>
|
||||
<td>$2.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
|
||||
<td>3</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.5B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
|
||||
<td>4</td>
|
||||
<td>2011</td>
|
||||
<td>96%</td>
|
||||
<td>$1.3B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
|
||||
<td>5</td>
|
||||
<td>2013</td>
|
||||
<td>89%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
|
||||
<td>6</td>
|
||||
<td>2013</td>
|
||||
<td>78%</td>
|
||||
<td>$1.2B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
|
||||
<td>7</td>
|
||||
<td>2011</td>
|
||||
<td>36%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
|
||||
<td>8</td>
|
||||
<td>2003</td>
|
||||
<td>95%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
|
||||
<td>9</td>
|
||||
<td>2012</td>
|
||||
<td>92%</td>
|
||||
<td>$1.1B</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
|
||||
<td>10</td>
|
||||
<td>2014</td>
|
||||
<td>18%</td>
|
||||
<td>$1.0B</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/bower_components/filament-tablesaw/docs/columntoggle-minimap.gif
vendored
Executable file
BIN
public/bower_components/filament-tablesaw/docs/columntoggle-minimap.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
public/bower_components/filament-tablesaw/docs/mode-switch.gif
vendored
Executable file
BIN
public/bower_components/filament-tablesaw/docs/mode-switch.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
public/bower_components/filament-tablesaw/docs/sortable.png
vendored
Executable file
BIN
public/bower_components/filament-tablesaw/docs/sortable.png
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/bower_components/filament-tablesaw/docs/stack.gif
vendored
Executable file
BIN
public/bower_components/filament-tablesaw/docs/stack.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
BIN
public/bower_components/filament-tablesaw/docs/swipe-minimap.gif
vendored
Executable file
BIN
public/bower_components/filament-tablesaw/docs/swipe-minimap.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
47
public/bower_components/filament-tablesaw/package.json
vendored
Executable file
47
public/bower_components/filament-tablesaw/package.json
vendored
Executable file
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "tablesaw",
|
||||
"title": "Tablesaw",
|
||||
"description": "A set of plugins for responsive tables.",
|
||||
"version": "2.0.3",
|
||||
"homepage": "https://github.com/filamentgroup/tablesaw",
|
||||
"author": {
|
||||
"name": "Zach Leatherman",
|
||||
"company": "Filament Group",
|
||||
"email": "zach@filamentgroup.com",
|
||||
"url": "http://filamentgroup.com/"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/filamentgroup/tablesaw.git"
|
||||
},
|
||||
"bugs": "https://github.com/filamentgroup/tablesaw/issues",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "./node_modules/.bin/grunt travis"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^2.2.3",
|
||||
"respond.js": "^1.4.2",
|
||||
"shoestring": "^1.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "^1.0.1",
|
||||
"grunt-bytesize": "~0.2.0",
|
||||
"grunt-contrib-clean": "~1.0.0",
|
||||
"grunt-contrib-compress": "~1.2.0",
|
||||
"grunt-contrib-concat": "~1.0.1",
|
||||
"grunt-contrib-copy": "~1.0.0",
|
||||
"grunt-contrib-cssmin": "^1.0.1",
|
||||
"grunt-contrib-jshint": "~1.0.0",
|
||||
"grunt-contrib-qunit": "~1.2.0",
|
||||
"grunt-contrib-uglify": "^1.0.1",
|
||||
"grunt-contrib-watch": "~1.0.0",
|
||||
"grunt-gh-pages": "~1.1.0",
|
||||
"grunt-myth": "~1.1.0",
|
||||
"matchdep": "~1.0.1",
|
||||
"qunitjs": "^1.23.1"
|
||||
}
|
||||
}
|
||||
15
public/bower_components/filament-tablesaw/src/tables-init.js
vendored
Executable file
15
public/bower_components/filament-tablesaw/src/tables-init.js
vendored
Executable file
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
* tablesaw: A set of plugins for responsive tables
|
||||
* Copyright (c) 2013 Filament Group, Inc.
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
;(function( $ ) {
|
||||
|
||||
// DOM-ready auto-init of plugins.
|
||||
// Many plugins bind to an "enhance" event to init themselves on dom ready, or when new markup is inserted into the DOM
|
||||
$( function(){
|
||||
$( document ).trigger( "enhance.tablesaw" );
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
85
public/bower_components/filament-tablesaw/src/tables.btnmarkup.js
vendored
Executable file
85
public/bower_components/filament-tablesaw/src/tables.btnmarkup.js
vendored
Executable file
@@ -0,0 +1,85 @@
|
||||
/*
|
||||
* tablesaw: A set of plugins for responsive tables
|
||||
* Button component
|
||||
* Copyright (c) 2013 Filament Group, Inc.
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
;(function( $ ) {
|
||||
var pluginName = "tablesawbtn",
|
||||
methods = {
|
||||
_create: function(){
|
||||
return $( this ).each(function() {
|
||||
$( this )
|
||||
.trigger( "beforecreate." + pluginName )
|
||||
[ pluginName ]( "_init" )
|
||||
.trigger( "create." + pluginName );
|
||||
});
|
||||
},
|
||||
_init: function(){
|
||||
var oEl = $( this ),
|
||||
sel = this.getElementsByTagName( "select" )[ 0 ];
|
||||
|
||||
if( sel ) {
|
||||
$( this )
|
||||
.addClass( "btn-select" )
|
||||
[ pluginName ]( "_select", sel );
|
||||
}
|
||||
return oEl;
|
||||
},
|
||||
_select: function( sel ) {
|
||||
var update = function( oEl, sel ) {
|
||||
var opts = $( sel ).find( "option" ),
|
||||
label, el, children;
|
||||
|
||||
opts.each(function() {
|
||||
var opt = this;
|
||||
if( opt.selected ) {
|
||||
label = document.createTextNode( opt.text );
|
||||
}
|
||||
});
|
||||
|
||||
children = oEl.childNodes;
|
||||
if( opts.length > 0 ){
|
||||
for( var i = 0, l = children.length; i < l; i++ ) {
|
||||
el = children[ i ];
|
||||
|
||||
if( el && el.nodeType === 3 ) {
|
||||
oEl.replaceChild( label, el );
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
update( this, sel );
|
||||
$( this ).bind( "change refresh", function() {
|
||||
update( this, sel );
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Collection method.
|
||||
$.fn[ pluginName ] = function( arrg, a, b, c ) {
|
||||
return this.each(function() {
|
||||
|
||||
// if it's a method
|
||||
if( arrg && typeof( arrg ) === "string" ){
|
||||
return $.fn[ pluginName ].prototype[ arrg ].call( this, a, b, c );
|
||||
}
|
||||
|
||||
// don't re-init
|
||||
if( $( this ).data( pluginName + "active" ) ){
|
||||
return $( this );
|
||||
}
|
||||
|
||||
// otherwise, init
|
||||
|
||||
$( this ).data( pluginName + "active", true );
|
||||
$.fn[ pluginName ].prototype._create.call( this );
|
||||
});
|
||||
};
|
||||
|
||||
// add methods
|
||||
$.extend( $.fn[ pluginName ].prototype, methods );
|
||||
|
||||
}( jQuery ));
|
||||
140
public/bower_components/filament-tablesaw/src/tables.columntoggle.css
vendored
Executable file
140
public/bower_components/filament-tablesaw/src/tables.columntoggle.css
vendored
Executable file
@@ -0,0 +1,140 @@
|
||||
/*
|
||||
Styles for the table columntoggle mode
|
||||
*/
|
||||
.btn.tablesaw-columntoggle-btn span {
|
||||
text-indent: -9999px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tablesaw-columntoggle-btnwrap {
|
||||
position: relative; /* for dialog positioning */
|
||||
}
|
||||
.tablesaw-columntoggle-btnwrap .dialog-content {
|
||||
padding: .5em;
|
||||
}
|
||||
.tablesaw-columntoggle tbody td {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
/* Remove top/bottom margins around the fieldcontain on check list */
|
||||
.tablesaw-columntoggle-popup {
|
||||
display: none;
|
||||
}
|
||||
.tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: .5em .8em;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 1px 2px #ccc;
|
||||
border-radius: .2em;
|
||||
z-index: 1;
|
||||
}
|
||||
.tablesaw-columntoggle-popup fieldset {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/* Hide all prioritized columns by default */
|
||||
@media only all {
|
||||
.tablesaw-columntoggle th.tablesaw-priority-6,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-6,
|
||||
.tablesaw-columntoggle th.tablesaw-priority-5,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-5,
|
||||
.tablesaw-columntoggle th.tablesaw-priority-4,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-4,
|
||||
.tablesaw-columntoggle th.tablesaw-priority-3,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-3,
|
||||
.tablesaw-columntoggle th.tablesaw-priority-2,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-2,
|
||||
.tablesaw-columntoggle th.tablesaw-priority-1,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tablesaw-columntoggle-btnwrap .dialog-content {
|
||||
top: 0 !important;
|
||||
right: 1em;
|
||||
left: auto !important;
|
||||
width: 12em;
|
||||
max-width: 18em;
|
||||
margin: -.5em auto 0;
|
||||
}
|
||||
.tablesaw-columntoggle-btnwrap .dialog-content:focus {
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
/* Preset breakpoints if "" class added to table */
|
||||
|
||||
/* Show priority 1 at 320px (20em x 16px) */
|
||||
@media (min-width: 20em) {
|
||||
.tablesaw-columntoggle th.tablesaw-priority-1,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-1 {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
/* Show priority 2 at 480px (30em x 16px) */
|
||||
@media (min-width: 30em) {
|
||||
.tablesaw-columntoggle th.tablesaw-priority-2,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-2 {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
/* Show priority 3 at 640px (40em x 16px) */
|
||||
@media (min-width: 40em) {
|
||||
.tablesaw-columntoggle th.tablesaw-priority-3,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-3 {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.tablesaw-columntoggle tbody td {
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
/* Show priority 4 at 800px (50em x 16px) */
|
||||
@media (min-width: 50em) {
|
||||
.tablesaw-columntoggle th.tablesaw-priority-4,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-4 {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
/* Show priority 5 at 960px (60em x 16px) */
|
||||
@media (min-width: 60em) {
|
||||
.tablesaw-columntoggle th.tablesaw-priority-5,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-5 {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
/* Show priority 6 at 1,120px (70em x 16px) */
|
||||
@media (min-width: 70em) {
|
||||
.tablesaw-columntoggle th.tablesaw-priority-6,
|
||||
.tablesaw-columntoggle td.tablesaw-priority-6 {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
@media only all {
|
||||
/* Unchecked manually: Always hide */
|
||||
.tablesaw-columntoggle th.tablesaw-cell-hidden,
|
||||
.tablesaw-columntoggle td.tablesaw-cell-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Checked manually: Always show */
|
||||
.tablesaw-columntoggle th.tablesaw-cell-visible,
|
||||
.tablesaw-columntoggle td.tablesaw-cell-visible {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
.tablesaw-columntoggle-popup .btn-group > label {
|
||||
display: block;
|
||||
padding: .2em 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tablesaw-columntoggle-popup .btn-group > label input {
|
||||
margin-right: .8em;
|
||||
}
|
||||
194
public/bower_components/filament-tablesaw/src/tables.columntoggle.js
vendored
Executable file
194
public/bower_components/filament-tablesaw/src/tables.columntoggle.js
vendored
Executable file
@@ -0,0 +1,194 @@
|
||||
/*
|
||||
* tablesaw: A set of plugins for responsive tables
|
||||
* Column Toggle: allows the user to toggle which columns are visible.
|
||||
* Copyright (c) 2013 Filament Group, Inc.
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
;(function( win, $, undefined ){
|
||||
|
||||
var ColumnToggle = function( element ) {
|
||||
|
||||
this.$table = $( element );
|
||||
|
||||
this.classes = {
|
||||
columnToggleTable: 'tablesaw-columntoggle',
|
||||
columnBtnContain: 'tablesaw-columntoggle-btnwrap tablesaw-advance',
|
||||
columnBtn: 'tablesaw-columntoggle-btn tablesaw-nav-btn down',
|
||||
popup: 'tablesaw-columntoggle-popup',
|
||||
priorityPrefix: 'tablesaw-priority-',
|
||||
// TODO duplicate class, also in tables.js
|
||||
toolbar: 'tablesaw-bar'
|
||||
};
|
||||
|
||||
// Expose headers and allHeaders properties on the widget
|
||||
// headers references the THs within the first TR in the table
|
||||
this.headers = this.$table.find( 'tr:first > th' );
|
||||
|
||||
this.$table.data( 'tablesaw-coltoggle', this );
|
||||
};
|
||||
|
||||
ColumnToggle.prototype.init = function() {
|
||||
|
||||
var tableId,
|
||||
id,
|
||||
$menuButton,
|
||||
$popup,
|
||||
$menu,
|
||||
$btnContain,
|
||||
self = this;
|
||||
|
||||
this.$table.addClass( this.classes.columnToggleTable );
|
||||
|
||||
tableId = this.$table.attr( "id" );
|
||||
id = tableId + "-popup";
|
||||
$btnContain = $( "<div class='" + this.classes.columnBtnContain + "'></div>" );
|
||||
$menuButton = $( "<a href='#" + id + "' class='btn btn-micro " + this.classes.columnBtn +"' data-popup-link>" +
|
||||
"<span>" + Tablesaw.i18n.columnBtnText + "</span></a>" );
|
||||
$popup = $( "<div class='dialog-table-coltoggle " + this.classes.popup + "' id='" + id + "'></div>" );
|
||||
$menu = $( "<div class='btn-group'></div>" );
|
||||
|
||||
var hasNonPersistentHeaders = false;
|
||||
$( this.headers ).not( "td" ).each( function() {
|
||||
var $this = $( this ),
|
||||
priority = $this.attr("data-tablesaw-priority"),
|
||||
$cells = self.$getCells( this );
|
||||
|
||||
if( priority && priority !== "persist" ) {
|
||||
$cells.addClass( self.classes.priorityPrefix + priority );
|
||||
|
||||
$("<label><input type='checkbox' checked>" + $this.text() + "</label>" )
|
||||
.appendTo( $menu )
|
||||
.children( 0 )
|
||||
.data( "tablesaw-header", this );
|
||||
|
||||
hasNonPersistentHeaders = true;
|
||||
}
|
||||
});
|
||||
|
||||
if( !hasNonPersistentHeaders ) {
|
||||
$menu.append( '<label>' + Tablesaw.i18n.columnsDialogError + '</label>' );
|
||||
}
|
||||
|
||||
$menu.appendTo( $popup );
|
||||
|
||||
// bind change event listeners to inputs - TODO: move to a private method?
|
||||
$menu.find( 'input[type="checkbox"]' ).on( "change", function(e) {
|
||||
var checked = e.target.checked;
|
||||
|
||||
self.$getCellsFromCheckbox( e.target )
|
||||
.toggleClass( "tablesaw-cell-hidden", !checked )
|
||||
.toggleClass( "tablesaw-cell-visible", checked );
|
||||
|
||||
self.$table.trigger( 'tablesawcolumns' );
|
||||
});
|
||||
|
||||
$menuButton.appendTo( $btnContain );
|
||||
$btnContain.appendTo( this.$table.prev().filter( '.' + this.classes.toolbar ) );
|
||||
|
||||
|
||||
function closePopup( event ) {
|
||||
// Click came from inside the popup, ignore.
|
||||
if( event && $( event.target ).closest( "." + self.classes.popup ).length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$( document ).unbind( 'click.' + tableId );
|
||||
$menuButton.removeClass( 'up' ).addClass( 'down' );
|
||||
$btnContain.removeClass( 'visible' );
|
||||
}
|
||||
|
||||
var closeTimeout;
|
||||
function openPopup() {
|
||||
$btnContain.addClass( 'visible' );
|
||||
$menuButton.removeClass( 'down' ).addClass( 'up' );
|
||||
|
||||
$( document ).unbind( 'click.' + tableId, closePopup );
|
||||
|
||||
window.clearTimeout( closeTimeout );
|
||||
closeTimeout = window.setTimeout(function() {
|
||||
$( document ).one( 'click.' + tableId, closePopup );
|
||||
}, 15 );
|
||||
}
|
||||
|
||||
$menuButton.on( "click.tablesaw", function( event ) {
|
||||
event.preventDefault();
|
||||
|
||||
if( !$btnContain.is( ".visible" ) ) {
|
||||
openPopup();
|
||||
} else {
|
||||
closePopup();
|
||||
}
|
||||
});
|
||||
|
||||
$popup.appendTo( $btnContain );
|
||||
|
||||
this.$menu = $menu;
|
||||
|
||||
$(window).on( "resize." + tableId, function(){
|
||||
self.refreshToggle();
|
||||
});
|
||||
|
||||
this.refreshToggle();
|
||||
};
|
||||
|
||||
ColumnToggle.prototype.$getCells = function( th ) {
|
||||
return $( th ).add( th.cells );
|
||||
};
|
||||
|
||||
ColumnToggle.prototype.$getCellsFromCheckbox = function( checkbox ) {
|
||||
var th = $( checkbox ).data( "tablesaw-header" );
|
||||
return this.$getCells( th );
|
||||
};
|
||||
|
||||
ColumnToggle.prototype.refreshToggle = function() {
|
||||
var self = this;
|
||||
this.$menu.find( "input" ).each( function() {
|
||||
this.checked = self.$getCellsFromCheckbox( this ).eq( 0 ).css( "display" ) === "table-cell";
|
||||
});
|
||||
};
|
||||
|
||||
ColumnToggle.prototype.refreshPriority = function(){
|
||||
var self = this;
|
||||
$(this.headers).not( "td" ).each( function() {
|
||||
var $this = $( this ),
|
||||
priority = $this.attr("data-tablesaw-priority"),
|
||||
$cells = $this.add( this.cells );
|
||||
|
||||
if( priority && priority !== "persist" ) {
|
||||
$cells.addClass( self.classes.priorityPrefix + priority );
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
ColumnToggle.prototype.destroy = function() {
|
||||
// table toolbars, document and window .tableId events
|
||||
// removed in parent tables.js destroy method
|
||||
|
||||
this.$table.removeClass( this.classes.columnToggleTable );
|
||||
this.$table.find( 'th, td' ).each(function() {
|
||||
var $cell = $( this );
|
||||
$cell.removeClass( 'tablesaw-cell-hidden' )
|
||||
.removeClass( 'tablesaw-cell-visible' );
|
||||
|
||||
this.className = this.className.replace( /\bui\-table\-priority\-\d\b/g, '' );
|
||||
});
|
||||
};
|
||||
|
||||
// on tablecreate, init
|
||||
$( document ).on( "tablesawcreate", function( e, Tablesaw ){
|
||||
|
||||
if( Tablesaw.mode === 'columntoggle' ){
|
||||
var table = new ColumnToggle( Tablesaw.table );
|
||||
table.init();
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
$( document ).on( "tablesawdestroy", function( e, Tablesaw ){
|
||||
if( Tablesaw.mode === 'columntoggle' ){
|
||||
$( Tablesaw.table ).data( 'tablesaw-coltoggle' ).destroy();
|
||||
}
|
||||
} );
|
||||
|
||||
}( this, jQuery ));
|
||||
27
public/bower_components/filament-tablesaw/src/tables.css
vendored
Executable file
27
public/bower_components/filament-tablesaw/src/tables.css
vendored
Executable file
@@ -0,0 +1,27 @@
|
||||
table.tablesaw {
|
||||
empty-cells: show;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.tablesaw {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Structure */
|
||||
.tablesaw {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.tablesaw th,
|
||||
.tablesaw td {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: .5em .7em;
|
||||
}
|
||||
.tablesaw thead tr:first-child th {
|
||||
padding-top: .9em;
|
||||
padding-bottom: .7em;
|
||||
}
|
||||
160
public/bower_components/filament-tablesaw/src/tables.js
vendored
Executable file
160
public/bower_components/filament-tablesaw/src/tables.js
vendored
Executable file
@@ -0,0 +1,160 @@
|
||||
/*global Tablesaw:true */
|
||||
|
||||
/*
|
||||
* tablesaw: A set of plugins for responsive tables
|
||||
* Stack and Column Toggle tables
|
||||
* Copyright (c) 2013 Filament Group, Inc.
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
if( typeof Tablesaw === "undefined" ) {
|
||||
Tablesaw = {
|
||||
i18n: {
|
||||
modes: [ 'Stack', 'Swipe', 'Toggle' ],
|
||||
columns: 'Col<span class=\"a11y-sm\">umn</span>s',
|
||||
columnBtnText: 'Columns',
|
||||
columnsDialogError: 'No eligible columns.',
|
||||
sort: 'Sort'
|
||||
},
|
||||
// cut the mustard
|
||||
mustard: 'querySelector' in document &&
|
||||
( !window.blackberry || window.WebKitPoint ) &&
|
||||
!window.operamini
|
||||
};
|
||||
}
|
||||
if( !Tablesaw.config ) {
|
||||
Tablesaw.config = {};
|
||||
}
|
||||
if( Tablesaw.mustard ) {
|
||||
jQuery( document.documentElement ).addClass( 'tablesaw-enhanced' );
|
||||
}
|
||||
|
||||
;(function( $ ) {
|
||||
var pluginName = "table",
|
||||
classes = {
|
||||
toolbar: "tablesaw-bar"
|
||||
},
|
||||
events = {
|
||||
create: "tablesawcreate",
|
||||
destroy: "tablesawdestroy",
|
||||
refresh: "tablesawrefresh"
|
||||
},
|
||||
defaultMode = "stack",
|
||||
initSelector = "table[data-tablesaw-mode],table[data-tablesaw-sortable]";
|
||||
|
||||
var Table = function( element ) {
|
||||
if( !element ) {
|
||||
throw new Error( "Tablesaw requires an element." );
|
||||
}
|
||||
|
||||
this.table = element;
|
||||
this.$table = $( element );
|
||||
|
||||
this.mode = this.$table.attr( "data-tablesaw-mode" ) || defaultMode;
|
||||
|
||||
this.init();
|
||||
};
|
||||
|
||||
Table.prototype.init = function() {
|
||||
// assign an id if there is none
|
||||
if ( !this.$table.attr( "id" ) ) {
|
||||
this.$table.attr( "id", pluginName + "-" + Math.round( Math.random() * 10000 ) );
|
||||
}
|
||||
|
||||
this.createToolbar();
|
||||
|
||||
var colstart = this._initCells();
|
||||
|
||||
this.$table.trigger( events.create, [ this, colstart ] );
|
||||
};
|
||||
|
||||
Table.prototype._initCells = function() {
|
||||
var colstart,
|
||||
thrs = this.table.querySelectorAll( "thead tr" ),
|
||||
self = this;
|
||||
|
||||
$( thrs ).each( function(){
|
||||
var coltally = 0;
|
||||
|
||||
$( this ).children().each( function(){
|
||||
var span = parseInt( this.getAttribute( "colspan" ), 10 ),
|
||||
sel = ":nth-child(" + ( coltally + 1 ) + ")";
|
||||
|
||||
colstart = coltally + 1;
|
||||
|
||||
if( span ){
|
||||
for( var k = 0; k < span - 1; k++ ){
|
||||
coltally++;
|
||||
sel += ", :nth-child(" + ( coltally + 1 ) + ")";
|
||||
}
|
||||
}
|
||||
|
||||
// Store "cells" data on header as a reference to all cells in the same column as this TH
|
||||
this.cells = self.$table.find("tr").not( thrs[0] ).not( this ).children().filter( sel );
|
||||
coltally++;
|
||||
});
|
||||
});
|
||||
|
||||
return colstart;
|
||||
};
|
||||
|
||||
Table.prototype.refresh = function() {
|
||||
this._initCells();
|
||||
|
||||
this.$table.trigger( events.refresh );
|
||||
};
|
||||
|
||||
Table.prototype.createToolbar = function() {
|
||||
// Insert the toolbar
|
||||
// TODO move this into a separate component
|
||||
var $toolbar = this.$table.prev().filter( '.' + classes.toolbar );
|
||||
if( !$toolbar.length ) {
|
||||
$toolbar = $( '<div>' )
|
||||
.addClass( classes.toolbar )
|
||||
.insertBefore( this.$table );
|
||||
}
|
||||
this.$toolbar = $toolbar;
|
||||
|
||||
if( this.mode ) {
|
||||
this.$toolbar.addClass( 'mode-' + this.mode );
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.destroy = function() {
|
||||
// Don’t remove the toolbar. Some of the table features are not yet destroy-friendly.
|
||||
this.$table.prev().filter( '.' + classes.toolbar ).each(function() {
|
||||
this.className = this.className.replace( /\bmode\-\w*\b/gi, '' );
|
||||
});
|
||||
|
||||
var tableId = this.$table.attr( 'id' );
|
||||
$( document ).unbind( "." + tableId );
|
||||
$( window ).unbind( "." + tableId );
|
||||
|
||||
// other plugins
|
||||
this.$table.trigger( events.destroy, [ this ] );
|
||||
|
||||
this.$table.removeData( pluginName );
|
||||
};
|
||||
|
||||
// Collection method.
|
||||
$.fn[ pluginName ] = function() {
|
||||
return this.each( function() {
|
||||
var $t = $( this );
|
||||
|
||||
if( $t.data( pluginName ) ){
|
||||
return;
|
||||
}
|
||||
|
||||
var table = new Table( this );
|
||||
$t.data( pluginName, table );
|
||||
});
|
||||
};
|
||||
|
||||
$( document ).on( "enhance.tablesaw", function( e ) {
|
||||
// Cut the mustard
|
||||
if( Tablesaw.mustard ) {
|
||||
$( e.target ).find( initSelector )[ pluginName ]();
|
||||
}
|
||||
});
|
||||
|
||||
}( jQuery ));
|
||||
30
public/bower_components/filament-tablesaw/src/tables.minimap.css
vendored
Executable file
30
public/bower_components/filament-tablesaw/src/tables.minimap.css
vendored
Executable file
@@ -0,0 +1,30 @@
|
||||
.tablesaw-advance {
|
||||
float: right;
|
||||
}
|
||||
.tablesaw-advance.minimap {
|
||||
margin-right: .4em;
|
||||
}
|
||||
.tablesaw-advance-dots {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.tablesaw-advance-dots li {
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
padding: .4em .2em;
|
||||
}
|
||||
.tablesaw-advance-dots li i {
|
||||
width: .25em;
|
||||
height: .25em;
|
||||
background: #555;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
.tablesaw-advance-dots-hide {
|
||||
opacity: .25;
|
||||
filter: alpha(opacity=25);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
81
public/bower_components/filament-tablesaw/src/tables.minimap.js
vendored
Executable file
81
public/bower_components/filament-tablesaw/src/tables.minimap.js
vendored
Executable file
@@ -0,0 +1,81 @@
|
||||
/*
|
||||
* tablesaw: A set of plugins for responsive tables
|
||||
* minimap: a set of dots to show which columns are currently visible.
|
||||
* Copyright (c) 2013 Filament Group, Inc.
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
;(function( win, $, undefined ){
|
||||
|
||||
var MM = {
|
||||
attr: {
|
||||
init: 'data-tablesaw-minimap'
|
||||
}
|
||||
};
|
||||
|
||||
function createMiniMap( $table ){
|
||||
|
||||
var $btns = $( '<div class="tablesaw-advance minimap">' ),
|
||||
$dotNav = $( '<ul class="tablesaw-advance-dots">' ).appendTo( $btns ),
|
||||
hideDot = 'tablesaw-advance-dots-hide',
|
||||
$headerCells = $table.find( 'thead th' );
|
||||
|
||||
// populate dots
|
||||
$headerCells.each(function(){
|
||||
$dotNav.append( '<li><i></i></li>' );
|
||||
});
|
||||
|
||||
$btns.appendTo( $table.prev().filter( '.tablesaw-bar' ) );
|
||||
|
||||
function showMinimap( $table ) {
|
||||
var mq = $table.attr( MM.attr.init );
|
||||
return !mq || win.matchMedia && win.matchMedia( mq ).matches;
|
||||
}
|
||||
|
||||
function showHideNav(){
|
||||
if( !showMinimap( $table ) ) {
|
||||
$btns.hide();
|
||||
return;
|
||||
}
|
||||
$btns.show();
|
||||
|
||||
// show/hide dots
|
||||
var dots = $dotNav.find( "li" ).removeClass( hideDot );
|
||||
$table.find( "thead th" ).each(function(i){
|
||||
if( $( this ).css( "display" ) === "none" ){
|
||||
dots.eq( i ).addClass( hideDot );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// run on init and resize
|
||||
showHideNav();
|
||||
$( win ).on( "resize", showHideNav );
|
||||
|
||||
|
||||
$table
|
||||
.bind( "tablesawcolumns.minimap", function(){
|
||||
showHideNav();
|
||||
})
|
||||
.bind( "tablesawdestroy.minimap", function(){
|
||||
var $t = $( this );
|
||||
|
||||
$t.prev().filter( '.tablesaw-bar' ).find( '.tablesaw-advance' ).remove();
|
||||
$( win ).off( "resize", showHideNav );
|
||||
|
||||
$t.unbind( ".minimap" );
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// on tablecreate, init
|
||||
$( document ).on( "tablesawcreate", function( e, Tablesaw ){
|
||||
|
||||
if( ( Tablesaw.mode === 'swipe' || Tablesaw.mode === 'columntoggle' ) && Tablesaw.$table.is( '[ ' + MM.attr.init + ']' ) ){
|
||||
createMiniMap( Tablesaw.$table );
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
}( this, jQuery ));
|
||||
83
public/bower_components/filament-tablesaw/src/tables.modeswitch.js
vendored
Executable file
83
public/bower_components/filament-tablesaw/src/tables.modeswitch.js
vendored
Executable file
@@ -0,0 +1,83 @@
|
||||
/*
|
||||
* tablesaw: A set of plugins for responsive tables
|
||||
* Mode Switch: UI element to allow the user to change table modes: stack/swipe/columntoggle
|
||||
* Copyright (c) 2013 Filament Group, Inc.
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
;(function( win, $ ) {
|
||||
|
||||
var S = {
|
||||
selectors: {
|
||||
init: 'table[data-tablesaw-mode-switch]'
|
||||
},
|
||||
attributes: {
|
||||
excludeMode: 'data-tablesaw-mode-exclude'
|
||||
},
|
||||
classes: {
|
||||
main: 'tablesaw-modeswitch',
|
||||
toolbar: 'tablesaw-toolbar'
|
||||
},
|
||||
modes: [ 'stack', 'swipe', 'columntoggle' ],
|
||||
init: function( table ) {
|
||||
var $table = $( table ),
|
||||
ignoreMode = $table.attr( S.attributes.excludeMode ),
|
||||
$toolbar = $table.prev().filter( '.tablesaw-bar' ),
|
||||
modeVal = '',
|
||||
$switcher = $( '<div>' ).addClass( S.classes.main + ' ' + S.classes.toolbar ).html(function() {
|
||||
var html = [ '<label>' + Tablesaw.i18n.columns + ':' ],
|
||||
dataMode = $table.attr( 'data-tablesaw-mode' ),
|
||||
isSelected;
|
||||
|
||||
html.push( '<span class="btn btn-small"> <select>' );
|
||||
for( var j=0, k = S.modes.length; j<k; j++ ) {
|
||||
if( ignoreMode && ignoreMode.toLowerCase() === S.modes[ j ] ) {
|
||||
continue;
|
||||
}
|
||||
|
||||
isSelected = dataMode === S.modes[ j ];
|
||||
|
||||
if( isSelected ) {
|
||||
modeVal = S.modes[ j ];
|
||||
}
|
||||
|
||||
html.push( '<option' +
|
||||
( isSelected ? ' selected' : '' ) +
|
||||
' value="' + S.modes[ j ] + '">' + Tablesaw.i18n.modes[ j ] + '</option>' );
|
||||
}
|
||||
html.push( '</select></span></label>' );
|
||||
|
||||
return html.join('');
|
||||
});
|
||||
|
||||
var $otherToolbarItems = $toolbar.find( '.tablesaw-advance' ).eq( 0 );
|
||||
if( $otherToolbarItems.length ) {
|
||||
$switcher.insertBefore( $otherToolbarItems );
|
||||
} else {
|
||||
$switcher.appendTo( $toolbar );
|
||||
}
|
||||
|
||||
$switcher.find( '.btn' ).tablesawbtn();
|
||||
$switcher.find( 'select' ).bind( 'change', S.onModeChange );
|
||||
},
|
||||
onModeChange: function() {
|
||||
var $t = $( this ),
|
||||
$switcher = $t.closest( '.' + S.classes.main ),
|
||||
$table = $t.closest( '.tablesaw-bar' ).nextUntil( $table ).eq( 0 ),
|
||||
val = $t.val();
|
||||
|
||||
$switcher.remove();
|
||||
$table.data( 'table' ).destroy();
|
||||
|
||||
$table.attr( 'data-tablesaw-mode', val );
|
||||
$table.table();
|
||||
}
|
||||
};
|
||||
|
||||
$( win.document ).on( "tablesawcreate", function( e, Tablesaw ) {
|
||||
if( Tablesaw.$table.is( S.selectors.init ) ) {
|
||||
S.init( Tablesaw.table );
|
||||
}
|
||||
});
|
||||
|
||||
})( this, jQuery );
|
||||
96
public/bower_components/filament-tablesaw/src/tables.skin.css
vendored
Executable file
96
public/bower_components/filament-tablesaw/src/tables.skin.css
vendored
Executable file
@@ -0,0 +1,96 @@
|
||||
:root {
|
||||
--thead-background: #e2dfdc;
|
||||
--thead-background-to-gradient: #fff;
|
||||
}
|
||||
|
||||
table.tablesaw tbody th {
|
||||
font-weight: bold;
|
||||
}
|
||||
table.tablesaw thead th,
|
||||
table.tablesaw thead td {
|
||||
color: #444;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.tablesaw th,
|
||||
.tablesaw td {
|
||||
line-height: 1em;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tablesaw td,
|
||||
.tablesaw tbody th {
|
||||
vertical-align: middle;
|
||||
font-size: 1.17em; /* 19px */
|
||||
}
|
||||
.tablesaw td .btn,
|
||||
.tablesaw tbody th .btn {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.tablesaw thead {
|
||||
border: 1px solid #e5e5e4;
|
||||
background: var(--thead-background);
|
||||
background-image: linear-gradient(to bottom, var(--thead-background-to-gradient), var(--thead-background));
|
||||
}
|
||||
.tablesaw thead th {
|
||||
font-weight: 100;
|
||||
color: #777;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
text-align: left;
|
||||
}
|
||||
.tablesaw thead tr:first-child th {
|
||||
font-weight: normal;
|
||||
font-family: sans-serif;
|
||||
border-right: 1px solid #e4e1de;
|
||||
}
|
||||
|
||||
/* Table rows have a gray bottom stroke by default */
|
||||
.tablesaw tbody tr {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.tablesaw caption {
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
opacity: .5;
|
||||
filter: alpha(opacity=50);
|
||||
line-height: 2.4;
|
||||
}
|
||||
|
||||
@media (min-width: 25em) {
|
||||
.tablesaw caption {
|
||||
margin-bottom: .6em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Stack */
|
||||
.tablesaw-cell-label-top {
|
||||
text-transform: uppercase;
|
||||
font-size: .9em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.tablesaw-cell-label {
|
||||
font-size: .65em;
|
||||
text-transform: uppercase;
|
||||
color: #888;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
.tablesaw td {
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only all {
|
||||
.tablesaw-swipe .tablesaw-cell-persist {
|
||||
border-right: 1px solid #e4e1de;
|
||||
}
|
||||
.tablesaw-swipe .tablesaw-cell-persist {
|
||||
box-shadow: 3px 0 4px -1px #e4e1de;
|
||||
}
|
||||
}
|
||||
53
public/bower_components/filament-tablesaw/src/tables.sortable.css
vendored
Executable file
53
public/bower_components/filament-tablesaw/src/tables.sortable.css
vendored
Executable file
@@ -0,0 +1,53 @@
|
||||
.tablesaw-sortable,
|
||||
.tablesaw-sortable thead,
|
||||
.tablesaw-sortable thead tr,
|
||||
.tablesaw-sortable thead tr th {
|
||||
position: relative;
|
||||
}
|
||||
.tablesaw-sortable thead tr th {
|
||||
padding-right: 1.6em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.tablesaw-sortable th.tablesaw-sortable-head,
|
||||
.tablesaw-sortable tr:first-child th.tablesaw-sortable-head {
|
||||
padding: 0;
|
||||
}
|
||||
.tablesaw-sortable th.tablesaw-sortable-head button {
|
||||
padding-top: .9em;
|
||||
padding-bottom: .7em;
|
||||
padding-left: .6em;
|
||||
padding-right: 1.6em;
|
||||
}
|
||||
.tablesaw-sortable .tablesaw-sortable-head button {
|
||||
min-width: 100%;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
text-transform: inherit;
|
||||
position: relative;
|
||||
}
|
||||
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-ascending button:after,
|
||||
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-descending button:after {
|
||||
width: 7px;
|
||||
height: 10px;
|
||||
content: "\0020";
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
}
|
||||
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-ascending button:after {
|
||||
content: "\2191";
|
||||
}
|
||||
.tablesaw-sortable .tablesaw-sortable-head.tablesaw-sortable-descending button:after {
|
||||
content: "\2193";
|
||||
}
|
||||
|
||||
.tablesaw-sortable .not-applicable:after {
|
||||
content: "--";
|
||||
display: block;
|
||||
}
|
||||
.tablesaw-sortable .not-applicable span {
|
||||
display: none;
|
||||
}
|
||||
285
public/bower_components/filament-tablesaw/src/tables.sortable.js
vendored
Executable file
285
public/bower_components/filament-tablesaw/src/tables.sortable.js
vendored
Executable file
@@ -0,0 +1,285 @@
|
||||
/*
|
||||
* tablesaw: A set of plugins for responsive tables
|
||||
* Sortable column headers
|
||||
* Copyright (c) 2013 Filament Group, Inc.
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
;(function( $ ) {
|
||||
function getSortValue( cell ) {
|
||||
return $.map( cell.childNodes, function( el ) {
|
||||
var $el = $( el );
|
||||
if( $el.is( 'input, select' ) ) {
|
||||
return $el.val();
|
||||
} else if( $el.hasClass( 'tablesaw-cell-label' ) ) {
|
||||
return;
|
||||
}
|
||||
return $.trim( $el.text() );
|
||||
}).join( '' );
|
||||
}
|
||||
|
||||
var pluginName = "tablesaw-sortable",
|
||||
initSelector = "table[data-" + pluginName + "]",
|
||||
sortableSwitchSelector = "[data-" + pluginName + "-switch]",
|
||||
attrs = {
|
||||
defaultCol: "data-tablesaw-sortable-default-col",
|
||||
numericCol: "data-tablesaw-sortable-numeric"
|
||||
},
|
||||
classes = {
|
||||
head: pluginName + "-head",
|
||||
ascend: pluginName + "-ascending",
|
||||
descend: pluginName + "-descending",
|
||||
switcher: pluginName + "-switch",
|
||||
tableToolbar: 'tablesaw-toolbar',
|
||||
sortButton: pluginName + "-btn"
|
||||
},
|
||||
methods = {
|
||||
_create: function( o ){
|
||||
return $( this ).each(function() {
|
||||
var init = $( this ).data( "init" + pluginName );
|
||||
if( init ) {
|
||||
return false;
|
||||
}
|
||||
$( this )
|
||||
.data( "init"+ pluginName, true )
|
||||
.trigger( "beforecreate." + pluginName )
|
||||
[ pluginName ]( "_init" , o )
|
||||
.trigger( "create." + pluginName );
|
||||
});
|
||||
},
|
||||
_init: function(){
|
||||
var el = $( this ),
|
||||
heads,
|
||||
$switcher;
|
||||
|
||||
var addClassToTable = function(){
|
||||
el.addClass( pluginName );
|
||||
},
|
||||
addClassToHeads = function( h ){
|
||||
$.each( h , function( i , v ){
|
||||
$( v ).addClass( classes.head );
|
||||
});
|
||||
},
|
||||
makeHeadsActionable = function( h , fn ){
|
||||
$.each( h , function( i , v ){
|
||||
var b = $( "<button class='" + classes.sortButton + "'/>" );
|
||||
b.bind( "click" , { col: v } , fn );
|
||||
$( v ).wrapInner( b );
|
||||
});
|
||||
},
|
||||
clearOthers = function( sibs ){
|
||||
$.each( sibs , function( i , v ){
|
||||
var col = $( v );
|
||||
col.removeAttr( attrs.defaultCol );
|
||||
col.removeClass( classes.ascend );
|
||||
col.removeClass( classes.descend );
|
||||
});
|
||||
},
|
||||
headsOnAction = function( e ){
|
||||
if( $( e.target ).is( 'a[href]' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
var head = $( this ).parent(),
|
||||
v = e.data.col,
|
||||
newSortValue = heads.index( head );
|
||||
|
||||
clearOthers( head.siblings() );
|
||||
if( head.hasClass( classes.descend ) ){
|
||||
el[ pluginName ]( "sortBy" , v , true);
|
||||
newSortValue += '_asc';
|
||||
} else {
|
||||
el[ pluginName ]( "sortBy" , v );
|
||||
newSortValue += '_desc';
|
||||
}
|
||||
if( $switcher ) {
|
||||
$switcher.find( 'select' ).val( newSortValue ).trigger( 'refresh' );
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
},
|
||||
handleDefault = function( heads ){
|
||||
$.each( heads , function( idx , el ){
|
||||
var $el = $( el );
|
||||
if( $el.is( "[" + attrs.defaultCol + "]" ) ){
|
||||
if( !$el.hasClass( classes.descend ) ) {
|
||||
$el.addClass( classes.ascend );
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
addSwitcher = function( heads ){
|
||||
$switcher = $( '<div>' ).addClass( classes.switcher ).addClass( classes.tableToolbar ).html(function() {
|
||||
var html = [ '<label>' + Tablesaw.i18n.sort + ':' ];
|
||||
|
||||
html.push( '<span class="btn btn-small"> <select>' );
|
||||
heads.each(function( j ) {
|
||||
var $t = $( this );
|
||||
var isDefaultCol = $t.is( "[" + attrs.defaultCol + "]" );
|
||||
var isDescending = $t.hasClass( classes.descend );
|
||||
|
||||
var hasNumericAttribute = $t.is( '[data-sortable-numeric]' );
|
||||
var numericCount = 0;
|
||||
// Check only the first four rows to see if the column is numbers.
|
||||
var numericCountMax = 5;
|
||||
|
||||
$( this.cells ).slice( 0, numericCountMax ).each(function() {
|
||||
if( !isNaN( parseInt( getSortValue( this ), 10 ) ) ) {
|
||||
numericCount++;
|
||||
}
|
||||
});
|
||||
var isNumeric = numericCount === numericCountMax;
|
||||
if( !hasNumericAttribute ) {
|
||||
$t.attr( "data-sortable-numeric", isNumeric ? "" : "false" );
|
||||
}
|
||||
|
||||
html.push( '<option' + ( isDefaultCol && !isDescending ? ' selected' : '' ) + ' value="' + j + '_asc">' + $t.text() + ' ' + ( isNumeric ? '↑' : '(A-Z)' ) + '</option>' );
|
||||
html.push( '<option' + ( isDefaultCol && isDescending ? ' selected' : '' ) + ' value="' + j + '_desc">' + $t.text() + ' ' + ( isNumeric ? '↓' : '(Z-A)' ) + '</option>' );
|
||||
});
|
||||
html.push( '</select></span></label>' );
|
||||
|
||||
return html.join('');
|
||||
});
|
||||
|
||||
var $toolbar = el.prev().filter( '.tablesaw-bar' ),
|
||||
$firstChild = $toolbar.children().eq( 0 );
|
||||
|
||||
if( $firstChild.length ) {
|
||||
$switcher.insertBefore( $firstChild );
|
||||
} else {
|
||||
$switcher.appendTo( $toolbar );
|
||||
}
|
||||
$switcher.find( '.btn' ).tablesawbtn();
|
||||
$switcher.find( 'select' ).on( 'change', function() {
|
||||
var val = $( this ).val().split( '_' ),
|
||||
head = heads.eq( val[ 0 ] );
|
||||
|
||||
clearOthers( head.siblings() );
|
||||
el[ pluginName ]( 'sortBy', head.get( 0 ), val[ 1 ] === 'asc' );
|
||||
});
|
||||
};
|
||||
|
||||
addClassToTable();
|
||||
heads = el.find( "thead th[data-" + pluginName + "-col]" );
|
||||
addClassToHeads( heads );
|
||||
makeHeadsActionable( heads , headsOnAction );
|
||||
handleDefault( heads );
|
||||
|
||||
if( el.is( sortableSwitchSelector ) ) {
|
||||
addSwitcher( heads, el.find('tbody tr:nth-child(-n+3)') );
|
||||
}
|
||||
},
|
||||
getColumnNumber: function( col ){
|
||||
return $( col ).prevAll().length;
|
||||
},
|
||||
getTableRows: function(){
|
||||
return $( this ).find( "tbody tr" );
|
||||
},
|
||||
sortRows: function( rows , colNum , ascending, col ){
|
||||
var cells, fn, sorted;
|
||||
var getCells = function( rows ){
|
||||
var cells = [];
|
||||
$.each( rows , function( i , r ){
|
||||
var element = $( r ).children().get( colNum );
|
||||
cells.push({
|
||||
element: element,
|
||||
cell: getSortValue( element ),
|
||||
rowNum: i
|
||||
});
|
||||
});
|
||||
return cells;
|
||||
},
|
||||
getSortFxn = function( ascending, forceNumeric ){
|
||||
var fn,
|
||||
regex = /[^\-\+\d\.]/g;
|
||||
if( ascending ){
|
||||
fn = function( a , b ){
|
||||
if( forceNumeric ) {
|
||||
return parseFloat( a.cell.replace( regex, '' ) ) - parseFloat( b.cell.replace( regex, '' ) );
|
||||
} else {
|
||||
return a.cell.toLowerCase() > b.cell.toLowerCase() ? 1 : -1;
|
||||
}
|
||||
};
|
||||
} else {
|
||||
fn = function( a , b ){
|
||||
if( forceNumeric ) {
|
||||
return parseFloat( b.cell.replace( regex, '' ) ) - parseFloat( a.cell.replace( regex, '' ) );
|
||||
} else {
|
||||
return a.cell.toLowerCase() < b.cell.toLowerCase() ? 1 : -1;
|
||||
}
|
||||
};
|
||||
}
|
||||
return fn;
|
||||
},
|
||||
applyToRows = function( sorted , rows ){
|
||||
var newRows = [], i, l, cur;
|
||||
for( i = 0, l = sorted.length ; i < l ; i++ ){
|
||||
cur = sorted[ i ].rowNum;
|
||||
newRows.push( rows[cur] );
|
||||
}
|
||||
return newRows;
|
||||
};
|
||||
|
||||
cells = getCells( rows );
|
||||
var customFn = $( col ).data( 'tablesaw-sort' );
|
||||
fn = ( customFn && typeof customFn === "function" ? customFn( ascending ) : false ) ||
|
||||
getSortFxn( ascending, $( col ).is( '[data-sortable-numeric]' ) && !$( col ).is( '[data-sortable-numeric="false"]' ) );
|
||||
sorted = cells.sort( fn );
|
||||
rows = applyToRows( sorted , rows );
|
||||
return rows;
|
||||
},
|
||||
replaceTableRows: function( rows ){
|
||||
var el = $( this ),
|
||||
body = el.find( "tbody" );
|
||||
body.html( rows );
|
||||
},
|
||||
makeColDefault: function( col , a ){
|
||||
var c = $( col );
|
||||
c.attr( attrs.defaultCol , "true" );
|
||||
if( a ){
|
||||
c.removeClass( classes.descend );
|
||||
c.addClass( classes.ascend );
|
||||
} else {
|
||||
c.removeClass( classes.ascend );
|
||||
c.addClass( classes.descend );
|
||||
}
|
||||
},
|
||||
sortBy: function( col , ascending ){
|
||||
var el = $( this ), colNum, rows;
|
||||
|
||||
colNum = el[ pluginName ]( "getColumnNumber" , col );
|
||||
rows = el[ pluginName ]( "getTableRows" );
|
||||
rows = el[ pluginName ]( "sortRows" , rows , colNum , ascending, col );
|
||||
el[ pluginName ]( "replaceTableRows" , rows );
|
||||
el[ pluginName ]( "makeColDefault" , col , ascending );
|
||||
}
|
||||
};
|
||||
|
||||
// Collection method.
|
||||
$.fn[ pluginName ] = function( arrg ) {
|
||||
var args = Array.prototype.slice.call( arguments , 1),
|
||||
returnVal;
|
||||
|
||||
// if it's a method
|
||||
if( arrg && typeof( arrg ) === "string" ){
|
||||
returnVal = $.fn[ pluginName ].prototype[ arrg ].apply( this[0], args );
|
||||
return (typeof returnVal !== "undefined")? returnVal:$(this);
|
||||
}
|
||||
// check init
|
||||
if( !$( this ).data( pluginName + "data" ) ){
|
||||
$( this ).data( pluginName + "active", true );
|
||||
$.fn[ pluginName ].prototype._create.call( this , arrg );
|
||||
}
|
||||
return $(this);
|
||||
};
|
||||
// add methods
|
||||
$.extend( $.fn[ pluginName ].prototype, methods );
|
||||
|
||||
$( document ).on( "tablesawcreate", function( e, Tablesaw ) {
|
||||
if( Tablesaw.$table.is( initSelector ) ) {
|
||||
Tablesaw.$table[ pluginName ]();
|
||||
}
|
||||
});
|
||||
|
||||
}( jQuery ));
|
||||
43
public/bower_components/filament-tablesaw/src/tables.stack-default-breakpoint.css
vendored
Executable file
43
public/bower_components/filament-tablesaw/src/tables.stack-default-breakpoint.css
vendored
Executable file
@@ -0,0 +1,43 @@
|
||||
@media (max-width: 39.9375em) {
|
||||
.tablesaw-stack thead td,
|
||||
.tablesaw-stack thead th {
|
||||
display: none;
|
||||
}
|
||||
.tablesaw-stack tbody td,
|
||||
.tablesaw-stack tbody th {
|
||||
clear: left;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.tablesaw-cell-label {
|
||||
vertical-align: top;
|
||||
}
|
||||
.tablesaw-cell-content {
|
||||
max-width: 67%;
|
||||
display: inline-block;
|
||||
}
|
||||
.tablesaw-stack td:empty,
|
||||
.tablesaw-stack th:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query to show as a standard table at 560px (35em x 16px) or wider */
|
||||
@media (min-width: 40em) {
|
||||
.tablesaw-stack tr {
|
||||
display: table-row;
|
||||
}
|
||||
/* Show the table header rows */
|
||||
.tablesaw-stack td,
|
||||
.tablesaw-stack th,
|
||||
.tablesaw-stack thead td,
|
||||
.tablesaw-stack thead th {
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
}
|
||||
/* Hide the labels in each cell */
|
||||
.tablesaw-stack td .tablesaw-cell-label,
|
||||
.tablesaw-stack th .tablesaw-cell-label {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
64
public/bower_components/filament-tablesaw/src/tables.stack-mixin.scss
vendored
Executable file
64
public/bower_components/filament-tablesaw/src/tables.stack-mixin.scss
vendored
Executable file
@@ -0,0 +1,64 @@
|
||||
/* Tablesaw Sass Mixins */
|
||||
|
||||
@mixin tablesaw-stack-max {
|
||||
.tablesaw-stack thead td,
|
||||
.tablesaw-stack thead th {
|
||||
display: none;
|
||||
}
|
||||
.tablesaw-stack tbody td,
|
||||
.tablesaw-stack tbody th {
|
||||
clear: left;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.tablesaw-cell-label {
|
||||
vertical-align: top;
|
||||
}
|
||||
.tablesaw-cell-content {
|
||||
max-width: 67%;
|
||||
display: inline-block;
|
||||
}
|
||||
.tablesaw-stack td:empty,
|
||||
.tablesaw-stack th:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablesaw-stack-min {
|
||||
.tablesaw-stack tr {
|
||||
display: table-row;
|
||||
}
|
||||
/* Show the table header rows */
|
||||
.tablesaw-stack td,
|
||||
.tablesaw-stack th,
|
||||
.tablesaw-stack thead td,
|
||||
.tablesaw-stack thead th {
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
}
|
||||
/* Hide the labels in each cell */
|
||||
.tablesaw-stack td .tablesaw-cell-label,
|
||||
.tablesaw-stack th .tablesaw-cell-label {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
$use-respond-mixins: false !default;
|
||||
@mixin tablesaw-stack( $breakpoint: 40em ) {
|
||||
@if $use-respond-mixins {
|
||||
@include respond-max($breakpoint - .0625) {
|
||||
@include tablesaw-stack-max;
|
||||
}
|
||||
@include respond-min($breakpoint) {
|
||||
@include tablesaw-stack-min;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@media (max-width: ($breakpoint - .0625)) {
|
||||
@include tablesaw-stack-max;
|
||||
}
|
||||
@media (min-width: $breakpoint) {
|
||||
@include tablesaw-stack-min;
|
||||
}
|
||||
}
|
||||
}
|
||||
53
public/bower_components/filament-tablesaw/src/tables.stack.css
vendored
Executable file
53
public/bower_components/filament-tablesaw/src/tables.stack.css
vendored
Executable file
@@ -0,0 +1,53 @@
|
||||
/*
|
||||
Styles for the table stack mode
|
||||
*/
|
||||
|
||||
/* Table rows have a gray bottom stroke by default */
|
||||
.tablesaw-stack tbody tr {
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.tablesaw-stack td .tablesaw-cell-label,
|
||||
.tablesaw-stack th .tablesaw-cell-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile first styles: Begin with the stacked presentation at narrow widths */
|
||||
@media only all {
|
||||
/* Show the table cells as a block level element */
|
||||
.tablesaw-stack td,
|
||||
.tablesaw-stack th {
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
.tablesaw-stack tr {
|
||||
clear: both;
|
||||
display: table-row;
|
||||
}
|
||||
/* Make the label elements a percentage width */
|
||||
.tablesaw-stack td .tablesaw-cell-label,
|
||||
.tablesaw-stack th .tablesaw-cell-label {
|
||||
display: block;
|
||||
padding: 0 .6em 0 0;
|
||||
width: 30%;
|
||||
display: inline-block;
|
||||
}
|
||||
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
|
||||
.tablesaw-stack th .tablesaw-cell-label-top,
|
||||
.tablesaw-stack td .tablesaw-cell-label-top {
|
||||
display: block;
|
||||
padding: .4em 0;
|
||||
margin: .4em 0;
|
||||
}
|
||||
.tablesaw-cell-label {
|
||||
display: block;
|
||||
}
|
||||
/* Avoid double strokes when stacked */
|
||||
.tablesaw-stack tbody th.group {
|
||||
margin-top:-1px;
|
||||
}
|
||||
/* Avoid double strokes when stacked */
|
||||
.tablesaw-stack th.group b.tablesaw-cell-label {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
104
public/bower_components/filament-tablesaw/src/tables.stack.js
vendored
Executable file
104
public/bower_components/filament-tablesaw/src/tables.stack.js
vendored
Executable file
@@ -0,0 +1,104 @@
|
||||
/*
|
||||
* tablesaw: A set of plugins for responsive tables
|
||||
* Stack: switches from column layout to rows with inline labels
|
||||
* Copyright (c) 2013 Filament Group, Inc.
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
;(function( win, $, undefined ){
|
||||
|
||||
var classes = {
|
||||
stackTable: 'tablesaw-stack',
|
||||
cellLabels: 'tablesaw-cell-label',
|
||||
cellContentLabels: 'tablesaw-cell-content'
|
||||
};
|
||||
|
||||
var data = {
|
||||
obj: 'tablesaw-stack'
|
||||
};
|
||||
|
||||
var attrs = {
|
||||
labelless: 'data-tablesaw-no-labels',
|
||||
hideempty: 'data-tablesaw-hide-empty'
|
||||
};
|
||||
|
||||
var Stack = function( element ) {
|
||||
|
||||
this.$table = $( element );
|
||||
|
||||
this.labelless = this.$table.is( '[' + attrs.labelless + ']' );
|
||||
this.hideempty = this.$table.is( '[' + attrs.hideempty + ']' );
|
||||
|
||||
if( !this.labelless ) {
|
||||
// allHeaders references headers, plus all THs in the thead, which may include several rows, or not
|
||||
this.allHeaders = this.$table.find( "th" );
|
||||
}
|
||||
|
||||
this.$table.data( data.obj, this );
|
||||
};
|
||||
|
||||
Stack.prototype.init = function( colstart ) {
|
||||
this.$table.addClass( classes.stackTable );
|
||||
|
||||
if( this.labelless ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// get headers in reverse order so that top-level headers are appended last
|
||||
var reverseHeaders = $( this.allHeaders );
|
||||
var hideempty = this.hideempty;
|
||||
|
||||
// create the hide/show toggles
|
||||
reverseHeaders.each(function(){
|
||||
var $t = $( this ),
|
||||
$cells = $( this.cells ).filter(function() {
|
||||
return !$( this ).parent().is( "[" + attrs.labelless + "]" ) && ( !hideempty || !$( this ).is( ":empty" ) );
|
||||
}),
|
||||
hierarchyClass = $cells.not( this ).filter( "thead th" ).length && " tablesaw-cell-label-top",
|
||||
// TODO reduce coupling with sortable
|
||||
$sortableButton = $t.find( ".tablesaw-sortable-btn" ),
|
||||
html = $sortableButton.length ? $sortableButton.html() : $t.html();
|
||||
|
||||
if( html !== "" ){
|
||||
if( hierarchyClass ){
|
||||
var iteration = parseInt( $( this ).attr( "colspan" ), 10 ),
|
||||
filter = "";
|
||||
|
||||
if( iteration ){
|
||||
filter = "td:nth-child("+ iteration +"n + " + ( colstart ) +")";
|
||||
}
|
||||
$cells.filter( filter ).prepend( "<b class='" + classes.cellLabels + hierarchyClass + "'>" + html + "</b>" );
|
||||
} else {
|
||||
$cells.wrapInner( "<span class='" + classes.cellContentLabels + "'></span>" );
|
||||
$cells.prepend( "<b class='" + classes.cellLabels + "'>" + html + "</b>" );
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Stack.prototype.destroy = function() {
|
||||
this.$table.removeClass( classes.stackTable );
|
||||
this.$table.find( '.' + classes.cellLabels ).remove();
|
||||
this.$table.find( '.' + classes.cellContentLabels ).each(function() {
|
||||
$( this ).replaceWith( this.childNodes );
|
||||
});
|
||||
};
|
||||
|
||||
// on tablecreate, init
|
||||
$( document ).on( "tablesawcreate", function( e, Tablesaw, colstart ){
|
||||
if( Tablesaw.mode === 'stack' ){
|
||||
var table = new Stack( Tablesaw.table );
|
||||
table.init( colstart );
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
$( document ).on( "tablesawdestroy", function( e, Tablesaw ){
|
||||
|
||||
if( Tablesaw.mode === 'stack' ){
|
||||
$( Tablesaw.table ).data( data.obj ).destroy();
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
}( this, jQuery ));
|
||||
10
public/bower_components/filament-tablesaw/src/tables.swipetoggle.css
vendored
Executable file
10
public/bower_components/filament-tablesaw/src/tables.swipetoggle.css
vendored
Executable file
@@ -0,0 +1,10 @@
|
||||
.tablesaw-fix-persist {
|
||||
table-layout: fixed;
|
||||
}
|
||||
@media only all {
|
||||
/* Unchecked manually: Always hide */
|
||||
.tablesaw-swipe th.tablesaw-cell-hidden,
|
||||
.tablesaw-swipe td.tablesaw-cell-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
327
public/bower_components/filament-tablesaw/src/tables.swipetoggle.js
vendored
Executable file
327
public/bower_components/filament-tablesaw/src/tables.swipetoggle.js
vendored
Executable file
@@ -0,0 +1,327 @@
|
||||
/*
|
||||
* tablesaw: A set of plugins for responsive tables
|
||||
* Swipe Toggle: swipe gesture (or buttons) to navigate which columns are shown.
|
||||
* Copyright (c) 2013 Filament Group, Inc.
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
;(function( win, $, undefined ){
|
||||
|
||||
$.extend( Tablesaw.config, {
|
||||
swipe: {
|
||||
horizontalThreshold: 15,
|
||||
verticalThreshold: 30
|
||||
}
|
||||
});
|
||||
|
||||
function isIE8() {
|
||||
var div = document.createElement('div'),
|
||||
all = div.getElementsByTagName('i');
|
||||
|
||||
div.innerHTML = '<!--[if lte IE 8]><i></i><![endif]-->';
|
||||
|
||||
return !!all.length;
|
||||
}
|
||||
|
||||
var classes = {
|
||||
// TODO duplicate class, also in tables.js
|
||||
toolbar: "tablesaw-bar",
|
||||
hideBtn: "disabled",
|
||||
persistWidths: "tablesaw-fix-persist",
|
||||
allColumnsVisible: 'tablesaw-all-cols-visible'
|
||||
};
|
||||
|
||||
function createSwipeTable( $table ){
|
||||
|
||||
var $btns = $( "<div class='tablesaw-advance'></div>" ),
|
||||
$prevBtn = $( "<a href='#' class='tablesaw-nav-btn btn btn-micro left' title='Previous Column'></a>" ).appendTo( $btns ),
|
||||
$nextBtn = $( "<a href='#' class='tablesaw-nav-btn btn btn-micro right' title='Next Column'></a>" ).appendTo( $btns ),
|
||||
$headerCells = $table.find( "thead th" ),
|
||||
$headerCellsNoPersist = $headerCells.not( '[data-tablesaw-priority="persist"]' ),
|
||||
headerWidths = [],
|
||||
$head = $( document.head || 'head' ),
|
||||
tableId = $table.attr( 'id' ),
|
||||
// TODO switch this to an nth-child feature test
|
||||
supportsNthChild = !isIE8();
|
||||
|
||||
if( !$headerCells.length ) {
|
||||
throw new Error( "tablesaw swipe: no header cells found. Are you using <th> inside of <thead>?" );
|
||||
}
|
||||
|
||||
// Calculate initial widths
|
||||
$table.css('width', 'auto');
|
||||
$headerCells.each(function() {
|
||||
headerWidths.push( $( this ).outerWidth() );
|
||||
});
|
||||
$table.css( 'width', '' );
|
||||
|
||||
$btns.appendTo( $table.prev().filter( '.tablesaw-bar' ) );
|
||||
|
||||
$table.addClass( "tablesaw-swipe" );
|
||||
|
||||
if( !tableId ) {
|
||||
tableId = 'tableswipe-' + Math.round( Math.random() * 10000 );
|
||||
$table.attr( 'id', tableId );
|
||||
}
|
||||
|
||||
function $getCells( headerCell ) {
|
||||
return $( headerCell.cells ).add( headerCell );
|
||||
}
|
||||
|
||||
function showColumn( headerCell ) {
|
||||
$getCells( headerCell ).removeClass( 'tablesaw-cell-hidden' );
|
||||
}
|
||||
|
||||
function hideColumn( headerCell ) {
|
||||
$getCells( headerCell ).addClass( 'tablesaw-cell-hidden' );
|
||||
}
|
||||
|
||||
function persistColumn( headerCell ) {
|
||||
$getCells( headerCell ).addClass( 'tablesaw-cell-persist' );
|
||||
}
|
||||
|
||||
function isPersistent( headerCell ) {
|
||||
return $( headerCell ).is( '[data-tablesaw-priority="persist"]' );
|
||||
}
|
||||
|
||||
function unmaintainWidths() {
|
||||
$table.removeClass( classes.persistWidths );
|
||||
$( '#' + tableId + '-persist' ).remove();
|
||||
}
|
||||
|
||||
function maintainWidths() {
|
||||
var prefix = '#' + tableId + '.tablesaw-swipe ',
|
||||
styles = [],
|
||||
tableWidth = $table.width(),
|
||||
hash = [],
|
||||
newHash;
|
||||
|
||||
$headerCells.each(function( index ) {
|
||||
var width;
|
||||
if( isPersistent( this ) ) {
|
||||
width = $( this ).outerWidth();
|
||||
|
||||
// Only save width on non-greedy columns (take up less than 75% of table width)
|
||||
if( width < tableWidth * 0.75 ) {
|
||||
hash.push( index + '-' + width );
|
||||
styles.push( prefix + ' .tablesaw-cell-persist:nth-child(' + ( index + 1 ) + ') { width: ' + width + 'px; }' );
|
||||
}
|
||||
}
|
||||
});
|
||||
newHash = hash.join( '_' );
|
||||
|
||||
$table.addClass( classes.persistWidths );
|
||||
|
||||
var $style = $( '#' + tableId + '-persist' );
|
||||
// If style element not yet added OR if the widths have changed
|
||||
if( !$style.length || $style.data( 'hash' ) !== newHash ) {
|
||||
// Remove existing
|
||||
$style.remove();
|
||||
|
||||
if( styles.length ) {
|
||||
$( '<style>' + styles.join( "\n" ) + '</style>' )
|
||||
.attr( 'id', tableId + '-persist' )
|
||||
.data( 'hash', newHash )
|
||||
.appendTo( $head );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getNext(){
|
||||
var next = [],
|
||||
checkFound;
|
||||
|
||||
$headerCellsNoPersist.each(function( i ) {
|
||||
var $t = $( this ),
|
||||
isHidden = $t.css( "display" ) === "none" || $t.is( ".tablesaw-cell-hidden" );
|
||||
|
||||
if( !isHidden && !checkFound ) {
|
||||
checkFound = true;
|
||||
next[ 0 ] = i;
|
||||
} else if( isHidden && checkFound ) {
|
||||
next[ 1 ] = i;
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
return next;
|
||||
}
|
||||
|
||||
function getPrev(){
|
||||
var next = getNext();
|
||||
return [ next[ 1 ] - 1 , next[ 0 ] - 1 ];
|
||||
}
|
||||
|
||||
function nextpair( fwd ){
|
||||
return fwd ? getNext() : getPrev();
|
||||
}
|
||||
|
||||
function canAdvance( pair ){
|
||||
return pair[ 1 ] > -1 && pair[ 1 ] < $headerCellsNoPersist.length;
|
||||
}
|
||||
|
||||
function matchesMedia() {
|
||||
var matchMedia = $table.attr( "data-tablesaw-swipe-media" );
|
||||
return !matchMedia || ( "matchMedia" in win ) && win.matchMedia( matchMedia ).matches;
|
||||
}
|
||||
|
||||
function fakeBreakpoints() {
|
||||
if( !matchesMedia() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var extraPaddingPixels = 20,
|
||||
containerWidth = $table.parent().width(),
|
||||
persist = [],
|
||||
sum = 0,
|
||||
sums = [],
|
||||
visibleNonPersistantCount = $headerCells.length;
|
||||
|
||||
$headerCells.each(function( index ) {
|
||||
var $t = $( this ),
|
||||
isPersist = $t.is( '[data-tablesaw-priority="persist"]' );
|
||||
|
||||
persist.push( isPersist );
|
||||
|
||||
sum += headerWidths[ index ] + ( isPersist ? 0 : extraPaddingPixels );
|
||||
sums.push( sum );
|
||||
|
||||
// is persistent or is hidden
|
||||
if( isPersist || sum > containerWidth ) {
|
||||
visibleNonPersistantCount--;
|
||||
}
|
||||
});
|
||||
|
||||
var needsNonPersistentColumn = visibleNonPersistantCount === 0;
|
||||
|
||||
$headerCells.each(function( index ) {
|
||||
if( persist[ index ] ) {
|
||||
|
||||
// for visual box-shadow
|
||||
persistColumn( this );
|
||||
return;
|
||||
}
|
||||
|
||||
if( sums[ index ] <= containerWidth || needsNonPersistentColumn ) {
|
||||
needsNonPersistentColumn = false;
|
||||
showColumn( this );
|
||||
} else {
|
||||
hideColumn( this );
|
||||
}
|
||||
});
|
||||
|
||||
if( supportsNthChild ) {
|
||||
unmaintainWidths();
|
||||
}
|
||||
$table.trigger( 'tablesawcolumns' );
|
||||
}
|
||||
|
||||
function advance( fwd ){
|
||||
var pair = nextpair( fwd );
|
||||
if( canAdvance( pair ) ){
|
||||
if( isNaN( pair[ 0 ] ) ){
|
||||
if( fwd ){
|
||||
pair[0] = 0;
|
||||
}
|
||||
else {
|
||||
pair[0] = $headerCellsNoPersist.length - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if( supportsNthChild ) {
|
||||
maintainWidths();
|
||||
}
|
||||
|
||||
hideColumn( $headerCellsNoPersist.get( pair[ 0 ] ) );
|
||||
showColumn( $headerCellsNoPersist.get( pair[ 1 ] ) );
|
||||
|
||||
$table.trigger( 'tablesawcolumns' );
|
||||
}
|
||||
}
|
||||
|
||||
$prevBtn.add( $nextBtn ).click(function( e ){
|
||||
advance( !!$( e.target ).closest( $nextBtn ).length );
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
function getCoord( event, key ) {
|
||||
return ( event.touches || event.originalEvent.touches )[ 0 ][ key ];
|
||||
}
|
||||
|
||||
$table
|
||||
.bind( "touchstart.swipetoggle", function( e ){
|
||||
var originX = getCoord( e, 'pageX' ),
|
||||
originY = getCoord( e, 'pageY' ),
|
||||
x,
|
||||
y;
|
||||
|
||||
$( win ).off( "resize", fakeBreakpoints );
|
||||
|
||||
$( this )
|
||||
.bind( "touchmove", function( e ){
|
||||
x = getCoord( e, 'pageX' );
|
||||
y = getCoord( e, 'pageY' );
|
||||
var cfg = Tablesaw.config.swipe;
|
||||
if( Math.abs( x - originX ) > cfg.horizontalThreshold && Math.abs( y - originY ) < cfg.verticalThreshold ) {
|
||||
e.preventDefault();
|
||||
}
|
||||
})
|
||||
.bind( "touchend.swipetoggle", function(){
|
||||
var cfg = Tablesaw.config.swipe;
|
||||
if( Math.abs( y - originY ) < cfg.verticalThreshold ) {
|
||||
if( x - originX < -1 * cfg.horizontalThreshold ){
|
||||
advance( true );
|
||||
}
|
||||
if( x - originX > cfg.horizontalThreshold ){
|
||||
advance( false );
|
||||
}
|
||||
}
|
||||
|
||||
window.setTimeout(function() {
|
||||
$( win ).on( "resize", fakeBreakpoints );
|
||||
}, 300);
|
||||
$( this ).unbind( "touchmove touchend" );
|
||||
});
|
||||
|
||||
})
|
||||
.bind( "tablesawcolumns.swipetoggle", function(){
|
||||
var canGoPrev = canAdvance( getPrev() );
|
||||
var canGoNext = canAdvance( getNext() );
|
||||
$prevBtn[ canGoPrev ? "removeClass" : "addClass" ]( classes.hideBtn );
|
||||
$nextBtn[ canGoNext ? "removeClass" : "addClass" ]( classes.hideBtn );
|
||||
|
||||
$prevBtn.closest( "." + classes.toolbar )[ !canGoPrev && !canGoNext ? 'addClass' : 'removeClass' ]( classes.allColumnsVisible );
|
||||
})
|
||||
.bind( "tablesawnext.swipetoggle", function(){
|
||||
advance( true );
|
||||
} )
|
||||
.bind( "tablesawprev.swipetoggle", function(){
|
||||
advance( false );
|
||||
} )
|
||||
.bind( "tablesawdestroy.swipetoggle", function(){
|
||||
var $t = $( this );
|
||||
|
||||
$t.removeClass( 'tablesaw-swipe' );
|
||||
$t.prev().filter( '.tablesaw-bar' ).find( '.tablesaw-advance' ).remove();
|
||||
$( win ).off( "resize", fakeBreakpoints );
|
||||
|
||||
$t.unbind( ".swipetoggle" );
|
||||
});
|
||||
|
||||
fakeBreakpoints();
|
||||
$( win ).on( "resize", fakeBreakpoints );
|
||||
}
|
||||
|
||||
|
||||
|
||||
// on tablecreate, init
|
||||
$( document ).on( "tablesawcreate", function( e, Tablesaw ){
|
||||
|
||||
if( Tablesaw.mode === 'swipe' ){
|
||||
createSwipeTable( Tablesaw.$table );
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
}( this, jQuery ));
|
||||
298
public/bower_components/filament-tablesaw/src/tables.toolbar.css
vendored
Executable file
298
public/bower_components/filament-tablesaw/src/tables.toolbar.css
vendored
Executable file
@@ -0,0 +1,298 @@
|
||||
/*
|
||||
* Button Markup
|
||||
* Custom-styled native inputs/buttons.
|
||||
*
|
||||
* Copyright (c) 2012 Filament Group, Inc.
|
||||
* Licensed under the MIT, GPL licenses.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--button-text: #1c95d4;
|
||||
--button-selected-background: #29abe2;
|
||||
--button-checkbox-selected-background: #34a3de;
|
||||
--button-selected-shadow: rgba(0,75,115,.45);
|
||||
--button-interaction-text: #208de3;
|
||||
--button-interaction-shadow: #4faeef;
|
||||
}
|
||||
|
||||
.tablesaw-enhanced .tablesaw-bar .btn {
|
||||
border: 1px solid #ccc;
|
||||
background: none;
|
||||
background-color: #fafafa;
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
color: #4a4a4a;
|
||||
clear: both;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font: bold 20px/1 sans-serif;
|
||||
margin: 0;
|
||||
padding: .5em .85em .4em .85em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
width: 100%;
|
||||
|
||||
/* Theming */
|
||||
background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
|
||||
|
||||
-webkit-appearance: none !important;
|
||||
-moz-appearance: none !important;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
border-radius: .25em;
|
||||
}
|
||||
.tablesaw-enhanced .tablesaw-bar a.btn {
|
||||
color: var(--button-text);
|
||||
}
|
||||
.tablesaw-enhanced .tablesaw-bar .btn:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Default radio/checkbox styling horizonal controlgroups. */
|
||||
.tablesaw-enhanced .tablesaw-bar .btn:active {
|
||||
background-color: #ddd;
|
||||
background-image: linear-gradient( top, rgba( 100,100,100,.35 ) 0%, rgba( 255,255,255,0 ) 70% );
|
||||
}
|
||||
.tablesaw-enhanced .tablesaw-bar .btn:hover,
|
||||
.tablesaw-enhanced .tablesaw-bar .btn:focus {
|
||||
color: var(--button-interaction-text);
|
||||
background-color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
.tablesaw-bar .btn:focus {
|
||||
box-shadow: 0 0 .35em var(--button-interaction-shadow) !important;
|
||||
}
|
||||
|
||||
.tablesaw-bar .btn-select select {
|
||||
background: none;
|
||||
border: none;
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-weight: inherit;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
min-height: 1em;
|
||||
}
|
||||
.tablesaw-bar .btn-select select {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
display:inline-block;
|
||||
color: transparent;
|
||||
}
|
||||
.tablesaw-bar .btn select option {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.tablesaw-enhanced .tablesaw-bar .btn.btn-select {
|
||||
color:#4d4d4d;
|
||||
padding-right: 2.5em;
|
||||
min-width: 7.25em;
|
||||
text-align: left;
|
||||
text-indent: 0;
|
||||
}
|
||||
.tablesaw-bar .btn.btn-small,
|
||||
.tablesaw-bar .btn.btn-micro {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tablesaw-bar .btn.btn-small {
|
||||
font-size: 1.0625em;
|
||||
line-height: 19px;
|
||||
padding: .3em 1em .3em 1em;
|
||||
}
|
||||
.tablesaw-bar .btn.btn-micro {
|
||||
font-size: .8125em;
|
||||
padding: .4em .7em .25em .7em;
|
||||
}
|
||||
|
||||
.tablesaw-enhanced .tablesaw-bar .btn-select {
|
||||
text-align: left;
|
||||
}
|
||||
.tablesaw-bar .btn-select:after {
|
||||
background: #e5e5e5;
|
||||
background: rgba(0,0,0,.1);
|
||||
box-shadow: 0 2px 2px rgba(255,255,255,.25);
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tablesaw-bar .btn-select.btn-small,
|
||||
.tablesaw-bar .btn-select.btn-micro {
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.tablesaw-bar .btn-select:after {
|
||||
background: none;
|
||||
background-repeat: no-repeat;
|
||||
background-position: .25em .45em;
|
||||
content: "\25bc";
|
||||
font-size: .55em;
|
||||
padding-top: 1.2em;
|
||||
padding-left: 1em;
|
||||
left:auto;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1.8em;
|
||||
}
|
||||
.tablesaw-bar .btn-select.btn-small:after,
|
||||
.tablesaw-bar .btn-select.btn-micro:after {
|
||||
width: 1.2em;
|
||||
font-size: .5em;
|
||||
padding-top: 1em;
|
||||
padding-right: .5em;
|
||||
line-height: 1.65;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
/* Column navigation buttons for swipe and columntoggle tables */
|
||||
.tablesaw-advance .btn {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border-radius: .25em;
|
||||
}
|
||||
.tablesaw-advance .btn.btn-micro {
|
||||
font-size: .8125em;
|
||||
padding: .3em .7em .25em .7em;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
background-position: 50% 50%;
|
||||
margin-left: .5em;
|
||||
position: relative;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before,
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before,
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.down:before,
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.up:before {
|
||||
content: "\0020";
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.down:before {
|
||||
left: .5em;
|
||||
top: .65em;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid #808080;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.up:before {
|
||||
left: .5em;
|
||||
top: .65em;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid #808080;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before,
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before {
|
||||
top: .45em;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.left:before {
|
||||
left: .6em;
|
||||
border-right: 5px solid #808080;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-advance a.tablesaw-nav-btn.right:before {
|
||||
left: .7em;
|
||||
border-left: 5px solid #808080;
|
||||
}
|
||||
.tablesaw-advance a.tablesaw-nav-btn.disabled {
|
||||
opacity: .25;
|
||||
filter: alpha(opacity=25);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Table Toolbar */
|
||||
.tablesaw-bar {
|
||||
clear: both;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.tablesaw-toolbar {
|
||||
font-size: .875em;
|
||||
float: left;
|
||||
}
|
||||
.tablesaw-toolbar label {
|
||||
padding: .5em 0;
|
||||
clear: both;
|
||||
display: block;
|
||||
color: #888;
|
||||
margin-right: .5em;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.tablesaw-bar .btn,
|
||||
.tablesaw-enhanced .tablesaw-bar .btn {
|
||||
margin-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.tablesaw-bar .btn-select,
|
||||
.tablesaw-enhanced .tablesaw-bar .btn-select {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-toolbar .btn {
|
||||
margin-left: .4em;
|
||||
margin-top: 0;
|
||||
text-transform:uppercase;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
padding-left: .3em;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-toolbar .btn-select {
|
||||
min-width: 0;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-toolbar .btn-select:after {
|
||||
padding-top: .9em;
|
||||
}
|
||||
.tablesaw-bar .tablesaw-toolbar select {
|
||||
color: #888;
|
||||
text-transform: none;
|
||||
background: transparent;
|
||||
}
|
||||
.tablesaw-toolbar ~ table {
|
||||
clear: both;
|
||||
}
|
||||
.tablesaw-toolbar .a11y-sm {
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
@media (min-width: 24em) {
|
||||
.tablesaw-toolbar .a11y-sm {
|
||||
clip: none;
|
||||
height: auto;
|
||||
width: auto;
|
||||
position: static;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
22
public/bower_components/filament-tablesaw/test/tablesaw.html
vendored
Executable file
22
public/bower_components/filament-tablesaw/test/tablesaw.html
vendored
Executable file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tablesaw Test Suite</title>
|
||||
<link rel="stylesheet" href="../dist/dependencies/qunit.css">
|
||||
<link rel="stylesheet" href="../dist/tablesaw.css">
|
||||
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/dependencies/qunit.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="tablesaw_test.js"></script>
|
||||
<!-- Removing access to jQuery and $. But it'll still be available as _$, if
|
||||
you REALLY want to mess around with jQuery in the console. REMEMBER WE
|
||||
ARE TESTING A PLUGIN HERE, THIS HELPS ENSURE BEST PRACTICES. REALLY. -->
|
||||
<script>window._$ = jQuery.noConflict(true);</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
</body>
|
||||
</html>
|
||||
22
public/bower_components/filament-tablesaw/test/tablesaw_bare.html
vendored
Executable file
22
public/bower_components/filament-tablesaw/test/tablesaw_bare.html
vendored
Executable file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tablesaw Test Suite</title>
|
||||
<link rel="stylesheet" href="../dist/dependencies/qunit.css">
|
||||
<link rel="stylesheet" href="../dist/bare/tablesaw.bare.css">
|
||||
|
||||
<script src="../dist/dependencies/jquery.js"></script>
|
||||
<script src="../dist/dependencies/qunit.js"></script>
|
||||
<script src="../dist/tablesaw.js"></script>
|
||||
<script src="tablesaw_test.js"></script>
|
||||
<!-- Removing access to jQuery and $. But it'll still be available as _$, if
|
||||
you REALLY want to mess around with jQuery in the console. REMEMBER WE
|
||||
ARE TESTING A PLUGIN HERE, THIS HELPS ENSURE BEST PRACTICES. REALLY. -->
|
||||
<script>window._$ = jQuery.noConflict(true);</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
</body>
|
||||
</html>
|
||||
302
public/bower_components/filament-tablesaw/test/tablesaw_test.js
vendored
Executable file
302
public/bower_components/filament-tablesaw/test/tablesaw_test.js
vendored
Executable file
@@ -0,0 +1,302 @@
|
||||
(function($) {
|
||||
/*
|
||||
======== A Handy Little QUnit Reference ========
|
||||
http://api.qunitjs.com/
|
||||
|
||||
Test methods:
|
||||
module(name, {[setup][ ,teardown]})
|
||||
test(name, callback)
|
||||
expect(numberOfAssertions)
|
||||
stop(increment)
|
||||
start(decrement)
|
||||
Test assertions:
|
||||
ok(value, [message])
|
||||
equal(actual, expected, [message])
|
||||
notEqual(actual, expected, [message])
|
||||
deepEqual(actual, expected, [message])
|
||||
notDeepEqual(actual, expected, [message])
|
||||
strictEqual(actual, expected, [message])
|
||||
notStrictEqual(actual, expected, [message])
|
||||
throws(block, [expected], [message])
|
||||
*/
|
||||
|
||||
var tableHtml = [
|
||||
'<table %s>',
|
||||
'<thead>',
|
||||
'<tr>',
|
||||
'<th data-tablesaw-priority="1" data-tablesaw-sortable-col>Header</th>',
|
||||
'<th data-tablesaw-sortable-col data-sortable-numeric>Header</th>',
|
||||
'<th>Header</th>',
|
||||
'<th>Header</th>',
|
||||
'<th>Header</th>',
|
||||
'<th>Header</th>',
|
||||
'<th>Header</th>',
|
||||
'<th>Header</th>',
|
||||
'<th>Header</th>',
|
||||
'<th>Header</th>',
|
||||
'<th data-tablesaw-priority="6">Header</th>',
|
||||
'</tr>',
|
||||
'</thead>',
|
||||
'<tbody>',
|
||||
'<tr>',
|
||||
'<td>Body Row 1</td>',
|
||||
'<td>1</td>',
|
||||
'<td>This column text is designed to make the columns really wide.</td>',
|
||||
'<td>This column text is designed to make the columns really wide.</td>',
|
||||
'<td>This column text is designed to make the columns really wide.</td>',
|
||||
'<td>This column text is designed to make the columns really wide.</td>',
|
||||
'<td>This column text is designed to make the columns really wide.</td>',
|
||||
'<td>This column text is designed to make the columns really wide.</td>',
|
||||
'<td>This column text is designed to make the columns really wide.</td>',
|
||||
'<td>This column text is designed to make the columns really wide.</td>',
|
||||
'<td>This column text is designed to make the columns really wide.</td>',
|
||||
'</tr>',
|
||||
'<tr><td>Body Row 2</td><td>2</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td></tr>',
|
||||
'<tr><td>Body Row 10</td><td>10</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td></tr>',
|
||||
'<tr><td>body row 4</td><td>10</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td></tr>',
|
||||
'<tr><td>Body Row 1.2</td><td>1.2</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td><td>A</td></tr>',
|
||||
'</tbody>',
|
||||
'</table>'].join(''),
|
||||
$fixture,
|
||||
$table,
|
||||
setup = function( tableAttributes ) {
|
||||
return function() {
|
||||
$fixture = $( '#qunit-fixture' );
|
||||
// We use columntoggle here to make the cell html comparisons easier (stack adds elements to each cell)
|
||||
$fixture.html( tableHtml.replace( /\%s/, tableAttributes ) );
|
||||
$( document ).trigger( 'enhance.tablesaw' );
|
||||
|
||||
$table = $fixture.find( 'table' );
|
||||
};
|
||||
};
|
||||
|
||||
module( 'Global' );
|
||||
test( 'Initialization', function() {
|
||||
ok( $( 'html' ).hasClass( 'tablesaw-enhanced' ), 'Has initialization class.' );
|
||||
});
|
||||
|
||||
module( 'tablesaw is opt-in only, no default', {
|
||||
setup: setup( '' )
|
||||
});
|
||||
|
||||
test( 'Initialization', function() {
|
||||
ok( $table[ 0 ].className.indexOf( 'tablesaw-' ) === -1, 'Does not have initialization class.' );
|
||||
});
|
||||
|
||||
module( 'tablesaw Stack', {
|
||||
setup: setup( 'data-tablesaw-mode="stack"' )
|
||||
});
|
||||
|
||||
test( 'Initialization', function() {
|
||||
ok( $table.hasClass( 'tablesaw-stack' ), 'Has initialization class.' );
|
||||
});
|
||||
|
||||
module( 'tablesaw Column Toggle', {
|
||||
setup: setup( 'data-tablesaw-mode="columntoggle"' )
|
||||
});
|
||||
|
||||
test( 'Initialization', function() {
|
||||
ok( $table.hasClass( 'tablesaw-columntoggle' ), 'Has initialization class.' );
|
||||
ok( $table.find( 'tbody td' ).eq( 0 ).is( ':visible' ), 'First cell is visible' );
|
||||
});
|
||||
|
||||
test( 'Show Dialog', function() {
|
||||
ok( !$fixture.find( '.tablesaw-columntoggle-popup' ).is( ':visible' ), 'Dialog hidden' );
|
||||
|
||||
$table.prev().find( '.tablesaw-columntoggle-btn' ).click();
|
||||
|
||||
ok( $fixture.find( '.tablesaw-columntoggle-popup' ).is( ':visible' ), 'Dialog visible after button click' );
|
||||
});
|
||||
|
||||
test( 'Toggle Column', function() {
|
||||
var $cell = $table.find( 'tbody td' ).eq( 0 );
|
||||
|
||||
strictEqual( $cell.is( '.tablesaw-cell-hidden' ), false, 'First cell is visible before checkbox unchecked' );
|
||||
|
||||
$table.prev().find( '.tablesaw-columntoggle-btn' ).trigger( 'click' )
|
||||
.next().find( ':checkbox' ).trigger( 'click' );
|
||||
|
||||
// close dialog
|
||||
$( '.tablesaw-columntoggle-popup .close' ).click();
|
||||
|
||||
strictEqual( $cell.is( '.tablesaw-cell-hidden' ), true, 'First cell is hidden after checkbox unchecked' );
|
||||
});
|
||||
|
||||
|
||||
module( 'tablesaw Swipe', {
|
||||
setup: setup( 'data-tablesaw-mode="swipe"' )
|
||||
});
|
||||
|
||||
test( 'Initialization', function() {
|
||||
var $buttons = $table.prev().find( '.tablesaw-nav-btn' );
|
||||
ok( $table.hasClass( 'tablesaw-swipe' ), 'Has initialization class.' );
|
||||
equal( $buttons.length, 2, 'Has buttons.' );
|
||||
});
|
||||
|
||||
test( 'Navigate with buttons', function() {
|
||||
var $buttons = $table.prev().find( '.tablesaw-nav-btn' ),
|
||||
$prev = $buttons.filter( '.left' ),
|
||||
$next = $buttons.filter( '.right' );
|
||||
|
||||
ok( $prev.is( '.disabled' ), 'Starts at far left, previous button disabled.' );
|
||||
ok( !$next.is( '.disabled' ), 'Starts at far left, next button enabled.' );
|
||||
ok( $table.find( 'tbody td:first-child' ).not( '.tablesaw-cell-hidden' ), 'First column is visible' );
|
||||
|
||||
$next.trigger( 'click' );
|
||||
ok( !$prev.is( '.disabled' ), 'Previous button enabled.' );
|
||||
ok( $table.find( 'tbody td:first-child' ).is( '.tablesaw-cell-hidden' ), 'First column is hidden after click' );
|
||||
});
|
||||
|
||||
module( 'tablesaw Sortable without a Mode', {
|
||||
setup: setup( 'data-tablesaw-sortable' )
|
||||
});
|
||||
|
||||
test( 'Sortable still initializes without a data-tablesaw-mode', function() {
|
||||
ok( $table.hasClass( 'tablesaw-sortable' ), 'Has initialization class.' );
|
||||
ok( $table.find( '.tablesaw-sortable-head' ).length > 0, 'Header has sort class.' );
|
||||
});
|
||||
|
||||
module( 'tablesaw Sortable', {
|
||||
setup: setup( 'data-tablesaw-mode="columntoggle" data-tablesaw-sortable' )
|
||||
});
|
||||
|
||||
test( 'Initialization', function() {
|
||||
ok( $table.hasClass( 'tablesaw-sortable' ), 'Has initialization class.' );
|
||||
ok( $table.find( '.tablesaw-sortable-head' ).length > 0, 'Header has sort class.' );
|
||||
});
|
||||
|
||||
test( 'Can sort descending', function() {
|
||||
var previousRow1Text = $table.find( 'tbody tr td' ).eq( 0 ).text(),
|
||||
$sortButton = $table.find( '.tablesaw-sortable-head button' ).eq( 0 );
|
||||
|
||||
$sortButton.click();
|
||||
|
||||
notEqual( $table.find( 'tbody tr td' ).eq( 0 ).text(), previousRow1Text, 'First row is sorted descending' );
|
||||
|
||||
$sortButton.click();
|
||||
|
||||
equal( $table.find( 'tbody tr td' ).eq( 0 ).text(), previousRow1Text, 'First row is sorted ascending' );
|
||||
});
|
||||
|
||||
test( 'Can sort numeric descending', function() {
|
||||
var $sortButton = $table.find( '.tablesaw-sortable-head button' ).eq( 1 );
|
||||
|
||||
$sortButton.click();
|
||||
|
||||
equal( $table.find( 'tbody tr:eq(0) td:eq(1)' ).html(), '10', 'First row is sorted descending' );
|
||||
|
||||
$sortButton.click();
|
||||
|
||||
equal( $table.find( 'tbody tr:eq(0) td:eq(1)' ).html(), '1', 'First row is sorted ascending' );
|
||||
});
|
||||
|
||||
test( 'Sort works with floats', function() {
|
||||
var previousText = "Body Row 1.2",
|
||||
$sortButton = $table.find( '.tablesaw-sortable-head button' ).eq( 0 ),
|
||||
rows = $table.find( 'tbody tr' ).length;
|
||||
|
||||
$sortButton.click();
|
||||
equal( $table.find( 'tbody tr:eq(' + (rows - 2 ) + ') td:eq(0)' ).text(), previousText, previousText + ' is in row ' + ( rows - 2 ) + ' of ' + rows + ' (descending)' );
|
||||
|
||||
$sortButton.click();
|
||||
equal( $table.find( 'tbody tr:eq(1) td:eq(0)' ).text(), previousText, previousText + ' is in the second row (ascending)' );
|
||||
|
||||
});
|
||||
|
||||
test( 'Sort is case insensitive', function() {
|
||||
var previousText = "body row 4",
|
||||
$sortButton = $table.find( '.tablesaw-sortable-head button' ).eq( 0 );
|
||||
|
||||
$sortButton.click();
|
||||
equal( $table.find( 'tbody tr:eq(0) td:eq(0)' ).text(), previousText, previousText + ' is in the first row (descending)' );
|
||||
|
||||
$sortButton.click();
|
||||
equal( $table.find( 'tbody tr:eq(4) td:eq(0)' ).text(), previousText, previousText + ' is in the third row (ascending)' );
|
||||
|
||||
});
|
||||
|
||||
module( 'tablesaw Sortable Switcher', {
|
||||
setup: setup( 'data-tablesaw-mode="columntoggle" data-tablesaw-sortable data-tablesaw-sortable-switch' )
|
||||
});
|
||||
|
||||
test( 'Can sort descending with switcher', function() {
|
||||
var previousRow1Text = $table.find( 'tbody tr td' ).eq( 0 ).text(),
|
||||
$switcher = $table.prev().find( 'select' ).eq( 0 );
|
||||
|
||||
$switcher.val( '0_desc' ).trigger( 'change' );
|
||||
|
||||
notEqual( $table.find( 'tbody tr td' ).eq( 0 ).text(), previousRow1Text, 'First row is sorted descending' );
|
||||
|
||||
$switcher.val( '0_asc' ).trigger( 'change' );
|
||||
|
||||
equal( $table.find( 'tbody tr td' ).eq( 0 ).text(), previousRow1Text, 'First row is sorted ascending' );
|
||||
});
|
||||
|
||||
test( 'Can sort numeric descending with switcher', function() {
|
||||
var $switcher = $table.prev().find( 'select' ).eq( 0 );
|
||||
|
||||
$switcher.val( '1_desc' ).trigger( 'change' );
|
||||
|
||||
equal( $table.find( 'tbody tr:eq(0) td:eq(1)' ).html(), '10', 'First row is sorted descending' );
|
||||
|
||||
$switcher.val( '1_asc' ).trigger( 'change' );
|
||||
|
||||
equal( $table.find( 'tbody tr:eq(0) td:eq(1)' ).html(), '1', 'First row is sorted ascending' );
|
||||
});
|
||||
|
||||
module( 'tablesaw Mini Map', {
|
||||
setup: setup( 'data-tablesaw-mode="columntoggle" data-tablesaw-minimap' )
|
||||
});
|
||||
|
||||
test( 'Initialization', function() {
|
||||
var $minimap = $table.prev().find( '.minimap' );
|
||||
ok( $minimap.length, 'Minimap exists.' );
|
||||
equal( $minimap.find( 'li' ).length, $table.find( 'tbody tr:eq(0) td' ).length, 'Minimap has same number of dots as columns.' );
|
||||
});
|
||||
|
||||
module( 'tablesaw Mode Switch', {
|
||||
setup: setup( 'data-tablesaw-mode="stack" data-tablesaw-mode-switch' )
|
||||
});
|
||||
|
||||
test( 'Initialization', function() {
|
||||
var $switcher = $table.prev().find( '.tablesaw-modeswitch' );
|
||||
ok( $switcher.length, 'Mode Switcher exists.' );
|
||||
});
|
||||
|
||||
test( 'Can switch to Swipe mode', function() {
|
||||
var $switcher = $table.prev().find( '.tablesaw-modeswitch' ).find( 'select' );
|
||||
ok( !$table.hasClass( 'tablesaw-swipe' ), 'Doesn’t have class.' );
|
||||
$switcher.val( 'swipe' ).trigger( 'change' );
|
||||
ok( $table.hasClass( 'tablesaw-swipe' ), 'Has class.' );
|
||||
});
|
||||
|
||||
test( 'Can switch to Column Toggle mode', function() {
|
||||
var $switcher = $table.prev().find( '.tablesaw-modeswitch' ).find( 'select' );
|
||||
ok( !$table.hasClass( 'tablesaw-columntoggle' ), 'Doesn’t have class.' );
|
||||
$switcher.val( 'columntoggle' ).trigger( 'change' );
|
||||
ok( $table.hasClass( 'tablesaw-columntoggle' ), 'Has class.' );
|
||||
});
|
||||
|
||||
module( 'tablesaw Stack Hide Empty', {
|
||||
setup: function(){
|
||||
$fixture = $( '#qunit-fixture' );
|
||||
$fixture.html( tableHtml.replace( /\%s/, 'data-tablesaw-mode="stack" data-tablesaw-hide-empty' ) );
|
||||
$('table tbody tr:eq(3) td:eq(4)', $fixture).html('');
|
||||
$( document ).trigger( 'enhance.tablesaw' );
|
||||
}
|
||||
});
|
||||
|
||||
test( 'Empty cells are hidden', function() {
|
||||
$fixture = $( '#qunit-fixture' );
|
||||
var testCell = $fixture.find( 'table tbody tr:eq(3) td:eq(4)' );
|
||||
|
||||
//not sure how to better test this
|
||||
if(window.innerWidth < 640){
|
||||
ok( testCell.is(':hidden'));
|
||||
}
|
||||
else{
|
||||
ok( testCell.is(':visible'));
|
||||
}
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
Reference in New Issue
Block a user