tablesaw-rails 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +22 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +69 -0
- data/Rakefile +2 -0
- data/app/assets/javascripts/tablesaw/tables-init.js +32 -0
- data/app/assets/javascripts/tablesaw/tables.btnmarkup.js +90 -0
- data/app/assets/javascripts/tablesaw/tables.columntoggle.js +196 -0
- data/app/assets/javascripts/tablesaw/tables.js +135 -0
- data/app/assets/javascripts/tablesaw/tables.minimap.js +81 -0
- data/app/assets/javascripts/tablesaw/tables.modeswitch.js +87 -0
- data/app/assets/javascripts/tablesaw/tables.sortable.js +274 -0
- data/app/assets/javascripts/tablesaw/tables.stack.js +93 -0
- data/app/assets/javascripts/tablesaw/tables.swipetoggle.js +248 -0
- data/app/assets/stylesheets/tablesaw/tables.columntoggle.css +156 -0
- data/app/assets/stylesheets/tablesaw/tables.css +27 -0
- data/app/assets/stylesheets/tablesaw/tables.minimap.css +31 -0
- data/app/assets/stylesheets/tablesaw/tables.modeswitch.css +15 -0
- data/app/assets/stylesheets/tablesaw/tables.skin.css +79 -0
- data/app/assets/stylesheets/tablesaw/tables.sortable.css +63 -0
- data/app/assets/stylesheets/tablesaw/tables.stack-default-breakpoint.css +32 -0
- data/app/assets/stylesheets/tablesaw/tables.stack.css +53 -0
- data/app/assets/stylesheets/tablesaw/tables.swipetoggle.css +3 -0
- data/app/assets/stylesheets/tablesaw/tables.toolbar.css +331 -0
- data/lib/tablesaw-rails.rb +4 -0
- data/tablesaw-rails.gemspec +22 -0
- metadata +98 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 9412eea3f134c7f159f1e7306033c0744c95fc16
|
4
|
+
data.tar.gz: 400cc7fa6bb7bea6d4d29cde703c0ba91a44b814
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: e37a6f1f917208a19c42db9b9f7a0f274acdc9f83a5d308dec10951279859bb5bdd7243beb04cf1e551d3576e4fce9cafd2df711539071906d35f43341c762a9
|
7
|
+
data.tar.gz: 599b332134a4110f87d6280ff82175ea5ba60b2c77bd4973c5e5e88a85f35241b8ef76666e48fa31109864edd4c243b0e8d19dffe7a802bf27c02d034afdae75
|
data/.gitignore
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
*.gem
|
2
|
+
*.rbc
|
3
|
+
.bundle
|
4
|
+
.config
|
5
|
+
.yardoc
|
6
|
+
Gemfile.lock
|
7
|
+
InstalledFiles
|
8
|
+
_yardoc
|
9
|
+
coverage
|
10
|
+
doc/
|
11
|
+
lib/bundler/man
|
12
|
+
pkg
|
13
|
+
rdoc
|
14
|
+
spec/reports
|
15
|
+
test/tmp
|
16
|
+
test/version_tmp
|
17
|
+
tmp
|
18
|
+
*.bundle
|
19
|
+
*.so
|
20
|
+
*.o
|
21
|
+
*.a
|
22
|
+
mkmf.log
|
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2014 Robbie Marcelo
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,69 @@
|
|
1
|
+
# tablesaw-rails
|
2
|
+
|
3
|
+
Just a ruby gem for asset pipeline which includes the [tablesaw][tablesaw] library.
|
4
|
+
|
5
|
+
[tablesaw]: https://github.com/filamentgroup/tablesaw
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add this line to your application's Gemfile:
|
10
|
+
|
11
|
+
gem 'tablesaw-rails'
|
12
|
+
|
13
|
+
And then execute:
|
14
|
+
|
15
|
+
$ bundle
|
16
|
+
|
17
|
+
Or install it yourself as:
|
18
|
+
|
19
|
+
$ gem install tablesaw-rails
|
20
|
+
|
21
|
+
## Usage
|
22
|
+
|
23
|
+
In your `application.js`:
|
24
|
+
|
25
|
+
```javascript
|
26
|
+
//= require tablesaw/tables
|
27
|
+
```
|
28
|
+
|
29
|
+
Also, in your `application.css`:
|
30
|
+
```css
|
31
|
+
*= require tablesaw/tables
|
32
|
+
```
|
33
|
+
|
34
|
+
## Customization
|
35
|
+
|
36
|
+
You can also just cherry pick what you want on the tablesaw plugins.
|
37
|
+
|
38
|
+
#### Javascript
|
39
|
+
|
40
|
+
```
|
41
|
+
//= require tablesaw/tables.sortable
|
42
|
+
//= require tablesaw/tables.columntoggle
|
43
|
+
//= require tablesaw/tables.stack
|
44
|
+
//= require tablesaw/tables.swipetoggle
|
45
|
+
//= require tablesaw/tables.modeswitch
|
46
|
+
```
|
47
|
+
|
48
|
+
#### CSS
|
49
|
+
|
50
|
+
```
|
51
|
+
*= require tablesaw/tables.sortable
|
52
|
+
*= require tablesaw/tables.columntoggle
|
53
|
+
*= require tablesaw/tables.stack
|
54
|
+
*= require tablesaw/tables.swipetoggle
|
55
|
+
*= require tablesaw/tables.modeswitch
|
56
|
+
```
|
57
|
+
|
58
|
+
## Contributing
|
59
|
+
|
60
|
+
1. Fork it ( https://github.com/[my-github-username]/tablesaw-rails/fork )
|
61
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
62
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
63
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
64
|
+
5. Create a new Pull Request
|
65
|
+
|
66
|
+
## License
|
67
|
+
[MIT][MIT]. Do what you want.
|
68
|
+
|
69
|
+
[MIT]: https://github.com/rbmrclo/tablesaw-rails/blob/master/LICENSE.txt
|
data/Rakefile
ADDED
@@ -0,0 +1,32 @@
|
|
1
|
+
/*
|
2
|
+
* tablesaw: A set of plugins for responsive tables
|
3
|
+
* Copyright (c) 2013 Filament Group, Inc.
|
4
|
+
* MIT License
|
5
|
+
*/
|
6
|
+
|
7
|
+
;(function( $ ) {
|
8
|
+
var div = document.createElement('div'),
|
9
|
+
all = div.getElementsByTagName('i'),
|
10
|
+
$doc = $( document.documentElement );
|
11
|
+
|
12
|
+
div.innerHTML = '<!--[if lte IE 8]><i></i><![endif]-->';
|
13
|
+
if( all[ 0 ] ) {
|
14
|
+
$doc.addClass( 'ie-lte8' );
|
15
|
+
}
|
16
|
+
|
17
|
+
// Cut the mustard
|
18
|
+
if( !( 'querySelector' in document ) ||
|
19
|
+
( window.blackberry && !window.WebKitPoint ) ||
|
20
|
+
window.operamini ) {
|
21
|
+
return;
|
22
|
+
} else {
|
23
|
+
$doc.addClass( 'tablesaw-enhanced' );
|
24
|
+
|
25
|
+
// DOM-ready auto-init of plugins.
|
26
|
+
// Many plugins bind to an "enhance" event to init themselves on dom ready, or when new markup is inserted into the DOM
|
27
|
+
$( function(){
|
28
|
+
$( document ).trigger( "enhance.tablesaw" );
|
29
|
+
});
|
30
|
+
}
|
31
|
+
|
32
|
+
})( jQuery );
|
@@ -0,0 +1,90 @@
|
|
1
|
+
/*
|
2
|
+
* tablesaw: A set of plugins for responsive tables
|
3
|
+
* Button component
|
4
|
+
* Copyright (c) 2013 Filament Group, Inc.
|
5
|
+
* MIT License
|
6
|
+
*/
|
7
|
+
|
8
|
+
;(function( $ ) {
|
9
|
+
var pluginName = "tablesawbtn",
|
10
|
+
initSelector = ".btn",
|
11
|
+
methods = {
|
12
|
+
_create: function(){
|
13
|
+
return $( this ).each(function() {
|
14
|
+
$( this )
|
15
|
+
.trigger( "beforecreate." + pluginName )
|
16
|
+
[ pluginName ]( "_init" )
|
17
|
+
.trigger( "create." + pluginName );
|
18
|
+
});
|
19
|
+
},
|
20
|
+
_init: function(){
|
21
|
+
var oEl = $( this ),
|
22
|
+
sel = this.getElementsByTagName( "select" )[ 0 ];
|
23
|
+
|
24
|
+
if( sel ) {
|
25
|
+
$( this )
|
26
|
+
.addClass( "btn-select" )
|
27
|
+
[ pluginName ]( "_select", sel );
|
28
|
+
}
|
29
|
+
return oEl;
|
30
|
+
},
|
31
|
+
_select: function( sel ) {
|
32
|
+
var update = function( oEl, sel ) {
|
33
|
+
var opts = $( sel ).find( "option" ),
|
34
|
+
label, el, children;
|
35
|
+
|
36
|
+
opts.each(function() {
|
37
|
+
var opt = this;
|
38
|
+
if( opt.selected ) {
|
39
|
+
label = document.createTextNode( opt.text );
|
40
|
+
}
|
41
|
+
});
|
42
|
+
|
43
|
+
children = oEl.childNodes;
|
44
|
+
if( opts.length > 0 ){
|
45
|
+
for( var i = 0, l = children.length; i < l; i++ ) {
|
46
|
+
el = children[ i ];
|
47
|
+
|
48
|
+
if( el && el.nodeType === 3 ) {
|
49
|
+
oEl.replaceChild( label, el );
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
53
|
+
};
|
54
|
+
|
55
|
+
update( this, sel );
|
56
|
+
$( this ).bind( "change refresh", function() {
|
57
|
+
update( this, sel );
|
58
|
+
});
|
59
|
+
}
|
60
|
+
};
|
61
|
+
|
62
|
+
// Collection method.
|
63
|
+
$.fn[ pluginName ] = function( arrg, a, b, c ) {
|
64
|
+
return this.each(function() {
|
65
|
+
|
66
|
+
// if it's a method
|
67
|
+
if( arrg && typeof( arrg ) === "string" ){
|
68
|
+
return $.fn[ pluginName ].prototype[ arrg ].call( this, a, b, c );
|
69
|
+
}
|
70
|
+
|
71
|
+
// don't re-init
|
72
|
+
if( $( this ).data( pluginName + "active" ) ){
|
73
|
+
return $( this );
|
74
|
+
}
|
75
|
+
|
76
|
+
// otherwise, init
|
77
|
+
|
78
|
+
$( this ).data( pluginName + "active", true );
|
79
|
+
$.fn[ pluginName ].prototype._create.call( this );
|
80
|
+
});
|
81
|
+
};
|
82
|
+
|
83
|
+
// add methods
|
84
|
+
$.extend( $.fn[ pluginName ].prototype, methods );
|
85
|
+
|
86
|
+
$( document ).on( "enhance", function( e ) {
|
87
|
+
$( initSelector, e.target )[ pluginName ]();
|
88
|
+
});
|
89
|
+
|
90
|
+
}( jQuery ));
|
@@ -0,0 +1,196 @@
|
|
1
|
+
/*
|
2
|
+
* tablesaw: A set of plugins for responsive tables
|
3
|
+
* Column Toggle: allows the user to toggle which columns are visible.
|
4
|
+
* Copyright (c) 2013 Filament Group, Inc.
|
5
|
+
* MIT License
|
6
|
+
*/
|
7
|
+
|
8
|
+
;(function( win, $, undefined ){
|
9
|
+
|
10
|
+
var ColumnToggle = function( element ) {
|
11
|
+
|
12
|
+
this.$table = $( element );
|
13
|
+
|
14
|
+
this.classes = {
|
15
|
+
columnToggleTable: 'tablesaw-columntoggle',
|
16
|
+
columnBtnContain: 'tablesaw-columntoggle-btnwrap tablesaw-advance',
|
17
|
+
columnBtn: 'tablesaw-columntoggle-btn tablesaw-nav-btn down',
|
18
|
+
columnBtnSide: this.$table.attr( 'data-column-btn-side' ) || 'right',
|
19
|
+
popup: 'tablesaw-columntoggle-popup',
|
20
|
+
priorityPrefix: 'tablesaw-priority-',
|
21
|
+
// TODO duplicate class, also in tables.js
|
22
|
+
toolbar: 'tablesaw-bar'
|
23
|
+
};
|
24
|
+
|
25
|
+
this.i18n = {
|
26
|
+
columnBtnText: 'Columns',
|
27
|
+
columnsDialogError: 'No eligible columns.'
|
28
|
+
};
|
29
|
+
|
30
|
+
// Expose headers and allHeaders properties on the widget
|
31
|
+
// headers references the THs within the first TR in the table
|
32
|
+
this.headers = this.$table.find( 'tr:first > th' );
|
33
|
+
|
34
|
+
this.$table.data( 'tablesaw-coltoggle', this );
|
35
|
+
};
|
36
|
+
|
37
|
+
ColumnToggle.prototype.init = function() {
|
38
|
+
|
39
|
+
var tableId,
|
40
|
+
id,
|
41
|
+
$menuButton,
|
42
|
+
$popup,
|
43
|
+
$menu,
|
44
|
+
$btnContain,
|
45
|
+
self = this;
|
46
|
+
|
47
|
+
this.$table.addClass( this.classes.columnToggleTable );
|
48
|
+
|
49
|
+
tableId = this.$table.attr( "id" );
|
50
|
+
id = tableId + "-popup";
|
51
|
+
$btnContain = $( "<div class='" + this.classes.columnBtnContain + " " + this.classes.columnBtnSide + "'></div>" );
|
52
|
+
$menuButton = $( "<a href='#" + id + "' class='btn btn-micro " + this.classes.columnBtn +"' data-popup-link>" +
|
53
|
+
"<span>" + this.i18n.columnBtnText + "</span></a>" );
|
54
|
+
$popup = $( "<div class='dialog-table-coltoggle " + this.classes.popup + "' id='" + id + "'></div>" );
|
55
|
+
$menu = $( "<div class='btn-group'></div>" );
|
56
|
+
|
57
|
+
var hasNonPersistentHeaders = false;
|
58
|
+
$( this.headers ).not( "td" ).each( function() {
|
59
|
+
var $this = $( this ),
|
60
|
+
priority = $this.attr("data-priority"),
|
61
|
+
$cells = $this.add( this.cells );
|
62
|
+
|
63
|
+
if( priority && priority !== "persist" ) {
|
64
|
+
$cells.addClass( self.classes.priorityPrefix + priority );
|
65
|
+
|
66
|
+
$("<label><input type='checkbox' checked>" + $this.text() + "</label>" )
|
67
|
+
.appendTo( $menu )
|
68
|
+
.children( 0 )
|
69
|
+
.data( "cells", $cells );
|
70
|
+
|
71
|
+
hasNonPersistentHeaders = true;
|
72
|
+
}
|
73
|
+
});
|
74
|
+
|
75
|
+
if( !hasNonPersistentHeaders ) {
|
76
|
+
$menu.append( '<label>' + this.i18n.columnsDialogError + '</label>' );
|
77
|
+
}
|
78
|
+
|
79
|
+
$menu.appendTo( $popup );
|
80
|
+
|
81
|
+
// bind change event listeners to inputs - TODO: move to a private method?
|
82
|
+
$menu.find( 'input[type="checkbox"]' ).on( "change", function(e) {
|
83
|
+
var checked = e.target.checked;
|
84
|
+
|
85
|
+
$( e.target ).data( "cells" )
|
86
|
+
.toggleClass( "tablesaw-cell-hidden", !checked )
|
87
|
+
.toggleClass( "tablesaw-cell-visible", checked );
|
88
|
+
|
89
|
+
self.$table.trigger( 'tablesawcolumns' );
|
90
|
+
});
|
91
|
+
|
92
|
+
$menuButton.appendTo( $btnContain );
|
93
|
+
$btnContain.appendTo( this.$table.prev( '.' + this.classes.toolbar ) );
|
94
|
+
|
95
|
+
var closeTimeout;
|
96
|
+
function openPopup() {
|
97
|
+
$btnContain.addClass( 'visible' );
|
98
|
+
$menuButton.removeClass( 'down' ).addClass( 'up' );
|
99
|
+
|
100
|
+
$( document ).unbind( 'click.' + tableId, closePopup );
|
101
|
+
|
102
|
+
window.clearTimeout( closeTimeout );
|
103
|
+
closeTimeout = window.setTimeout(function() {
|
104
|
+
$( document ).one( 'click.' + tableId, closePopup );
|
105
|
+
}, 15 );
|
106
|
+
}
|
107
|
+
|
108
|
+
function closePopup( event ) {
|
109
|
+
// Click came from inside the popup, ignore.
|
110
|
+
if( event && $( event.target ).closest( "." + self.classes.popup ).length ) {
|
111
|
+
return;
|
112
|
+
}
|
113
|
+
|
114
|
+
$( document ).unbind( 'click.' + tableId );
|
115
|
+
$menuButton.removeClass( 'up' ).addClass( 'down' );
|
116
|
+
$btnContain.removeClass( 'visible' );
|
117
|
+
}
|
118
|
+
|
119
|
+
$menuButton.on( "click.tablesaw", function( event ) {
|
120
|
+
event.preventDefault();
|
121
|
+
|
122
|
+
if( !$btnContain.is( ".visible" ) ) {
|
123
|
+
openPopup();
|
124
|
+
} else {
|
125
|
+
closePopup();
|
126
|
+
}
|
127
|
+
});
|
128
|
+
|
129
|
+
$popup.appendTo( $btnContain );
|
130
|
+
|
131
|
+
this.$menu = $menu;
|
132
|
+
|
133
|
+
$(window).on( "resize." + tableId, function(){
|
134
|
+
self.refreshToggle();
|
135
|
+
});
|
136
|
+
|
137
|
+
this.refreshToggle();
|
138
|
+
};
|
139
|
+
|
140
|
+
ColumnToggle.prototype.refreshToggle = function() {
|
141
|
+
this.$menu.find( "input" ).each( function() {
|
142
|
+
var $this = $( this );
|
143
|
+
|
144
|
+
this.checked = $this.data( "cells" ).eq( 0 ).css( "display" ) === "table-cell";
|
145
|
+
});
|
146
|
+
};
|
147
|
+
|
148
|
+
ColumnToggle.prototype.refreshPriority = function(){
|
149
|
+
var self = this;
|
150
|
+
$(this.headers).not( "td" ).each( function() {
|
151
|
+
var $this = $( this ),
|
152
|
+
priority = $this.attr("data-priority"),
|
153
|
+
$cells = $this.add( this.cells );
|
154
|
+
|
155
|
+
if( priority && priority !== "persist" ) {
|
156
|
+
$cells.addClass( self.classes.priorityPrefix + priority );
|
157
|
+
} else {
|
158
|
+
$cells.each(function() {
|
159
|
+
// remove all priority classes.
|
160
|
+
this.className = this.className.replace( /\bui\-table\-priority\-\d\b/g, '' );
|
161
|
+
});
|
162
|
+
}
|
163
|
+
});
|
164
|
+
};
|
165
|
+
|
166
|
+
ColumnToggle.prototype.destroy = function() {
|
167
|
+
// table toolbars, document and window .tableId events
|
168
|
+
// removed in parent tables.js destroy method
|
169
|
+
|
170
|
+
this.$table.removeClass( this.classes.columnToggleTable );
|
171
|
+
this.$table.find( 'th, td' ).each(function() {
|
172
|
+
var $cell = $( this );
|
173
|
+
$cell.removeClass( 'tablesaw-cell-hidden' )
|
174
|
+
.removeClass( 'tablesaw-cell-visible' );
|
175
|
+
|
176
|
+
this.className = this.className.replace( /\bui\-table\-priority\-\d\b/g, '' );
|
177
|
+
});
|
178
|
+
};
|
179
|
+
|
180
|
+
// on tablecreate, init
|
181
|
+
$( document ).on( "tablesawcreate", function( e, Tablesaw ){
|
182
|
+
|
183
|
+
if( Tablesaw.mode === 'columntoggle' ){
|
184
|
+
var table = new ColumnToggle( Tablesaw.table );
|
185
|
+
table.init();
|
186
|
+
}
|
187
|
+
|
188
|
+
} );
|
189
|
+
|
190
|
+
$( document ).on( "tablesawdestroy", function( e, Tablesaw ){
|
191
|
+
if( Tablesaw.mode === 'columntoggle' ){
|
192
|
+
$( Tablesaw.table ).data( 'tablesaw-coltoggle' ).destroy();
|
193
|
+
}
|
194
|
+
} );
|
195
|
+
|
196
|
+
}( this, jQuery ));
|