ad2games-ui_components 2.0.5 → 2.0.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ui_components.js.erb +1 -1
  3. data/app/assets/javascripts/ui_components/toolbar.coffee +1 -1
  4. data/app/assets/stylesheets/default_theme/button.scss +57 -32
  5. data/app/assets/stylesheets/default_theme/date_selector.scss +85 -0
  6. data/app/assets/stylesheets/default_theme/navbar.scss +1 -1
  7. data/app/assets/stylesheets/default_theme/toolbar.scss +97 -59
  8. data/app/assets/stylesheets/ui_components/checkbox_list.scss +29 -0
  9. data/app/assets/stylesheets/variables.scss +1 -1
  10. data/app/cells/checkbox_list/checkbox_list_cell.rb +4 -2
  11. data/lib/ui_components/version.rb +1 -1
  12. data/vendor/assets/bower_components/jquery-ujs/CONTRIBUTING.md +109 -0
  13. data/vendor/assets/bower_components/jquery-ujs/MIT-LICENSE +20 -0
  14. data/vendor/assets/bower_components/jquery-ujs/README.md +81 -0
  15. data/vendor/assets/bower_components/jquery-ujs/bower.json +19 -0
  16. data/vendor/assets/bower_components/jquery-ujs/src/rails.js +555 -0
  17. data/vendor/assets/bower_components/jquery.floatThead/CHANGELOG.md +142 -0
  18. data/vendor/assets/bower_components/jquery.floatThead/README.md +26 -201
  19. data/vendor/assets/bower_components/jquery.floatThead/dist/jquery.floatThead-slim.js +172 -52
  20. data/vendor/assets/bower_components/jquery.floatThead/dist/jquery.floatThead-slim.min.js +2 -2
  21. data/vendor/assets/bower_components/jquery.floatThead/dist/jquery.floatThead.js +173 -53
  22. data/vendor/assets/bower_components/jquery.floatThead/dist/jquery.floatThead.min.js +2 -2
  23. data/vendor/assets/bower_components/jquery.floatThead/license.txt +1 -1
  24. metadata +9 -16
@@ -0,0 +1,142 @@
1
+ ### 1.4.1
2
+ bug fixes:
3
+ - https://github.com/mkoryak/floatThead/issues/289 - properly handle overflow:scroll !important
4
+ - https://github.com/mkoryak/floatThead/issues/298 - add ability to opt out of 3rd party lib integrations
5
+ - https://github.com/mkoryak/floatThead/issues/303 - fix `scrollContainer: true` behavior
6
+ - https://github.com/mkoryak/floatThead/issues/299 - fix weirdness when header cells contain tons of content (thanks @cantin for PR)
7
+ - https://github.com/mkoryak/floatThead/issues/300 - remember scrollLeft of header when reflowing (thanks @rshah88 for PR)
8
+
9
+ ### 1.4.0
10
+ new features:
11
+ - https://github.com/mkoryak/floatThead/issues/263 - support for responsive table wrappers
12
+ - can now use `scrollContainer:true` to auto-detect scrollParent of the table (something with `overflow != visible`)
13
+ - https://github.com/mkoryak/floatThead/issues/68 - support for printing the table (not in crappy IEs though)
14
+
15
+ bug fixes:
16
+ - https://github.com/mkoryak/floatThead/issues/268 - fire 'floatThead' event on destroy
17
+
18
+
19
+ ### 1.3.2
20
+ - https://github.com/mkoryak/floatThead/issues/264 - header alignments messed up when table within a floated container (when using position:absolute)
21
+ - hide more stuff from screen readers that should be hidden
22
+ - https://github.com/mkoryak/floatThead/issues/255 - added `reflowed` event, see docs
23
+ - removed underscore usage from non-slim build
24
+
25
+
26
+ ### 1.3.1
27
+ - allow 'useAbsolutePositioning', 'scrollingTop' and 'scrollingBottom' to be used, but yell about it via console.error
28
+
29
+ ### 1.3.0
30
+ - renamed 'useAbsolutePositioning' option to `position`. value mappings (old -> new) are: [true -> 'absolute', false -> 'fixed', null -> 'auto']
31
+ - renamed 'scrollingTop' to `top` and 'scrollingBottom' to `bottom`
32
+ - removed cellTag and debounceResizeMs options
33
+ - removed `floatThead-floatContainer` class from the $floatContainer because `floatThead-container` class is already there and it is configurable via `floatContainerClass` option.
34
+ - added `autoReflow` option
35
+ - https://github.com/mkoryak/floatThead/issues/235 - fix tabindex of the floated header (thanks [robinpoort](https://github.com/robinpoort))
36
+ - https://github.com/mkoryak/floatThead/issues/242 - support for multiple tables within a single scrolling div
37
+ - https://github.com/mkoryak/floatThead/issues/246 - enableAria:true causes javascript exception when using Colgroup
38
+ - fixed `getRowGroups`, method which was busted when the header was floated
39
+ - make grunt work in node 0.12
40
+
41
+ ### 1.2.13
42
+
43
+ - https://github.com/mkoryak/floatThead/issues/220 - Header and Body alignment problem
44
+ - package.json was incorrect
45
+ - `autoReflow` option should work better if your browser supports MutationObserver
46
+ - added native support for tables within bootstrap3 tabs or jqueryui tabs
47
+ - if a tables is hidden, the plugin will not try do anything when you scroll
48
+ - the cat is cute
49
+
50
+ ### 1.2.12
51
+ Huge thanks to [CoryDuncan](https://github.com/CoryDuncan), [ithielnor](https://github.com/ithielnor), [jurko-gospodnetic](https://github.com/jurko-gospodnetic) and [mhwlng](https://github.com/mhwlng) for your PRs
52
+
53
+ - https://github.com/mkoryak/floatThead/pull/168 - support for fractional column widths (no more alignment issues!)
54
+ - https://github.com/mkoryak/floatThead/pull/175 - having tables within tables wont cause weird issues
55
+ - https://github.com/mkoryak/floatThead/issues/165 - Fire an event when the header is floated / unfloated
56
+ - https://github.com/mkoryak/floatThead/issues/180 - no space outside of table causes it to always float
57
+ - https://github.com/mkoryak/floatThead/pull/185 - inner scrolling doesnt respect container border
58
+ - https://github.com/mkoryak/floatThead/issues/186 - can init on a table without thead and later add it
59
+ - https://github.com/mkoryak/floatThead/issues/194 - header sizing takes into account border-collapse rules
60
+ - bunch of code and stylistic cleanup
61
+
62
+ ### 1.2.11
63
+ - now supports perfect-scrollbar plugin
64
+ - slightly better mobile safari support
65
+ - fix bower.json
66
+
67
+ ### 1.2.10
68
+ - play nicely with angularjs if it modifies the DOM behind the scenes
69
+ - screen reader support via `enableAria` option
70
+ - https://github.com/mkoryak/floatThead/issues/122 - better default options for ie
71
+ - https://github.com/mkoryak/floatThead/issues/121 - header layout bug
72
+ - https://github.com/mkoryak/floatThead/issues/128 - issues with scrollbar size detection in certain layouts
73
+ - https://github.com/mkoryak/floatThead/issues/127 - destroy not removing some elements
74
+
75
+ ### 1.2.9
76
+ - **Deprecated the `cellTag` option**, use `headerCellSelector` instead (see docs)
77
+ - https://github.com/mkoryak/floatThead/issues/101 - **huge** performance improvement
78
+ - https://github.com/mkoryak/floatThead/issues/98 - Border-collapse ignored on scroll
79
+ - https://github.com/mkoryak/floatThead/issues/99 - Incorrect scroll width calculation in some cases
80
+ - A couple of updates to the `destroy` method that get the table back into a more pristine state
81
+
82
+ ### 1.2.8
83
+ - https://github.com/mkoryak/floatThead/issues/82 - table not disappearing when out of view in a certain layout
84
+ - https://github.com/mkoryak/floatThead/issues/84 - header not aligned if your scrolling container has a certain height
85
+ - https://github.com/mkoryak/floatThead/issues/86 - do not take hidden TRs into account when calculating header height
86
+
87
+ ### 1.2.7
88
+ - Changed license over to MIT
89
+
90
+ ### 1.2.6
91
+ - **new stuff:**
92
+ - added support for tables with existing `<colgroup>` elements
93
+ - added a grunt task to build dist to master
94
+ - **bug fixes:**
95
+ - https://github.com/mkoryak/floatThead/issues/57 - window resize issues on windows
96
+ - https://github.com/mkoryak/floatThead/issues/70 - better support for responsive tables
97
+ - https://github.com/mkoryak/floatThead/issues/71 - incorrectly unbinding events in destroy
98
+ - https://github.com/mkoryak/floatThead/issues/75 - dom leakage in destroy
99
+
100
+
101
+ ### 1.2.5
102
+ - bug fixes:
103
+ - https://github.com/mkoryak/floatThead/issues/66
104
+ - https://github.com/mkoryak/floatThead/issues/65
105
+ - https://github.com/mkoryak/floatThead/issues/62
106
+
107
+ ### 1.2.4
108
+ - better support for really really wide tables
109
+ - fixed https://github.com/mkoryak/floatThead/issues/53
110
+ - fixed https://github.com/mkoryak/floatThead/issues/56
111
+
112
+ ### 1.2.3
113
+
114
+ - removed underscore dependency, added a *slim* version which is very slightly smaller and requires underscore
115
+ - now supporting a few evil deprecated table attributes that people still use: `cellpadding` and `cellspacing`
116
+ - fixed https://github.com/mkoryak/floatThead/issues/52
117
+ - fixed https://github.com/mkoryak/floatThead/issues/50
118
+ - added floatWrapperClass option
119
+ - added copyTableClass option
120
+
121
+ ### 1.2.2
122
+
123
+ - better support for tables with dynamically hidden columns
124
+ - can now set a class on the floating header's container div
125
+
126
+ ### 1.2.1
127
+
128
+ - fixed issue with caption tag align:bottom
129
+ - switched to uglifyjs to minify code
130
+
131
+ ### 1.2.0
132
+
133
+ - <code>caption</code> tag support
134
+ - faster initialization when working with large tables (and small ones)
135
+
136
+ ### 1.1.1
137
+
138
+ - Fixed bugs introduced in 1.0.0 which caused issues in IE9
139
+
140
+ ### 1.0.0
141
+
142
+ - Updated code to be jquery 1.9+ compliant
@@ -1,4 +1,4 @@
1
- jquery.floatThead v1.3.2
1
+ jquery.floatThead v1.4.1
2
2
  =================
3
3
  [![woot](http://giant.gfycat.com/AnyGloriousAlpaca.gif "or just click")](http://mkoryak.github.io/floatThead/)
4
4
 
@@ -6,11 +6,14 @@ jquery.floatThead v1.3.2
6
6
 
7
7
  Float the table header on scroll. No changes to your HTML/CSS are required, it just works. Supports floating the header while scrolling within the window or while scrolling within a container with overflow.
8
8
 
9
- :heart_eyes_cat:**My cat loves it**:heart_eyes_cat:
9
+ [![Issue Stats](http://issuestats.com/github/mkoryak/floatThead/badge/pr)](http://issuestats.com/github/mkoryak/floatThead)
10
+ [![Issue Stats](http://issuestats.com/github/mkoryak/floatThead/badge/issue)](http://issuestats.com/github/mkoryak/floatThead)
11
+
10
12
 
13
+ :heart_eyes_cat:**My cat loves it**:heart_eyes_cat:
11
14
 
12
15
 
13
- ###Install
16
+ ### Install
14
17
 
15
18
  #### Package managers
16
19
  ```bash
@@ -18,7 +21,7 @@ bower install floatThead
18
21
  npm install floatthead
19
22
  ```
20
23
  #### Download code
21
- [Latest Release (zip)](https://github.com/mkoryak/floatThead/archive/v1.3.2.zip)
24
+ [Latest Release (zip)](https://github.com/mkoryak/floatThead/archive/v1.4.1.zip)
22
25
 
23
26
  #### Via CDN
24
27
  [http://cdnjs.com/libraries/floatthead/](http://cdnjs.com/libraries/floatthead/)
@@ -35,16 +38,14 @@ npm install floatthead
35
38
 
36
39
  # Things this plugin does:
37
40
  ---------
38
- - Floats the table header - it remains in viewport as you scroll
39
41
  - Works on tables within a scrollable container or whole window scrolling
40
- - Horizontal or vertical scrolling
42
+ - Works with responsive table wrappers
43
+ - Works with dynamically hidden/added/removed columns
41
44
  - Doesn't clone the thead - so your events stay bound
42
- - Doesn't mess with your styles
43
- - Works on any table
44
- - Requires no special css
45
- - Works with libs like [datatables](http://datatables.net), [perfect-scrollbar](http://mkoryak.github.io/floatThead/examples/perfect-scrollbar/), [bootstrap](http://mkoryak.github.io/floatThead/examples/bootstrap3/), and many more
46
- - Screen reader support
47
- - Plays nicely with angularjs
45
+ - Doesn't mess with your styles, and doesnt require any css
46
+ - Works with border-collapse variants, weird margins, padding and borders
47
+ - Works with libs like [datatables](http://datatables.net), [perfect-scrollbar](http://mkoryak.github.io/floatThead/examples/perfect-scrollbar/), [bootstrap3](http://mkoryak.github.io/floatThead/examples/bootstrap3/), and many more
48
+ - Header can be floated with `position:absolute` which adds a wrapper, or `position:fixed` which does not. Both have their pros and cons. By default the best option is chosen based on your configuration
48
49
 
49
50
 
50
51
  # Things this plugin does NOT do:
@@ -55,18 +56,11 @@ npm install floatthead
55
56
 
56
57
  Common Pitfalls
57
58
  ------
58
- If you use css and html best practices, this plugin will work. If you are stuck in 1999, you better [read this](http://mkoryak.github.io/floatThead/faq/).
59
+ If you use css and html best practices, this plugin will work. If you are stuck in 1999, you better [read the faq](http://mkoryak.github.io/floatThead/faq/).
59
60
 
60
61
  How to get help with the floatThead
61
62
  ------------
62
- All issues should be reported through github. If you don't have an account you can make one.
63
- Providing the following will greatly increase the chances of your issue being resolved quickly:
64
- - Include the browser and operating system where you are having the problem. If its IE, a screenshot is also nice since I don't have quick access to that abomination.
65
- - **Provide a jsfiddle that reproduces your issue in its simplest form possible**. If its hard to read your code, you did it wrong.
66
- - A description of the issue and steps to reproduce
67
-
68
- I will do my best to help you in a timely manner.
69
-
63
+ All issues should be reported through github. Coffee/Beer donations help too ;)
70
64
 
71
65
  Requirements:
72
66
  -------------
@@ -75,149 +69,20 @@ Requirements:
75
69
 
76
70
  Supported Browsers:
77
71
  -------------
78
- - IE8 or better (read [this](http://mkoryak.github.io/floatThead/examples/row-groups/))
72
+ - IE8 or better (**must read** [this for ANY Internet Exploder integrations](http://mkoryak.github.io/floatThead/examples/row-groups/))
79
73
  - Chrome, Firefox (all versions from last 3 years)
80
74
 
81
75
 
82
- Using with IE9
83
- --------------
84
- FloatThead will not work properly in IE9 unless you have the following meta tag in the head of the page:
85
- ``` html
86
- <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
87
- ```
88
-
89
- With very big tables, you may also run into this exciting bug: http://stackoverflow.com/questions/5805956/internet-explorer-9-not-rendering-table-cells-properly
90
- Watch for it.
91
-
92
76
  Change Log
93
77
  ----------
94
- ### 1.3.2
95
- - https://github.com/mkoryak/floatThead/issues/264 - header alignments messed up when table within a floated container (when using position:absolute)
96
- - hide more stuff from screen readers that should be hidden
97
- - https://github.com/mkoryak/floatThead/issues/255 - added `reflowed` event, see docs
98
- - removed underscore usage from non-slim build
99
-
100
-
101
- ### 1.3.1
102
- - allow 'useAbsolutePositioning', 'scrollingTop' and 'scrollingBottom' to be used, but yell about it via console.error
103
-
104
- ### 1.3.0
105
- - **Breaking**: renamed 'useAbsolutePositioning' option to `position`. value mappings (old -> new) are: [true -> 'absolute', false -> 'fixed', null -> 'auto']
106
- - **Breaking**: renamed 'scrollingTop' to `top` and 'scrollingBottom' to `bottom`
107
- - **Breaking**: removed cellTag and debounceResizeMs options
108
- - **Breaking**: removed `floatThead-floatContainer` class from the $floatContainer because `floatThead-container` class is already there and it is configurable via `floatContainerClass` option.
109
- - added `autoReflow` option
110
- - https://github.com/mkoryak/floatThead/issues/235 - fix tabindex of the floated header (thanks [robinpoort](https://github.com/robinpoort))
111
- - https://github.com/mkoryak/floatThead/issues/242 - support for multiple tables within a single scrolling div
112
- - https://github.com/mkoryak/floatThead/issues/246 - enableAria:true causes javascript exception when using Colgroup
113
- - fixed `getRowGroups`, method which was busted when the header was floated
114
- - make grunt work in node 0.12
115
-
116
- ### 1.2.13
117
-
118
- - https://github.com/mkoryak/floatThead/issues/220 - Header and Body alignment problem
119
- - package.json was incorrect
120
- - `autoReflow` option should work better if your browser supports MutationObserver
121
- - added native support for tables within bootstrap3 tabs or jqueryui tabs
122
- - if a tables is hidden, the plugin will not try do anything when you scroll
123
- - the cat is cute
124
-
125
- ### 1.2.12
126
- Huge thanks to [CoryDuncan](https://github.com/CoryDuncan), [ithielnor](https://github.com/ithielnor), [jurko-gospodnetic](https://github.com/jurko-gospodnetic) and [mhwlng](https://github.com/mhwlng) for your PRs
127
-
128
- - https://github.com/mkoryak/floatThead/pull/168 - support for fractional column widths (no more alignment issues!)
129
- - https://github.com/mkoryak/floatThead/pull/175 - having tables within tables wont cause weird issues
130
- - https://github.com/mkoryak/floatThead/issues/165 - Fire an event when the header is floated / unfloated
131
- - https://github.com/mkoryak/floatThead/issues/180 - no space outside of table causes it to always float
132
- - https://github.com/mkoryak/floatThead/pull/185 - inner scrolling doesnt respect container border
133
- - https://github.com/mkoryak/floatThead/issues/186 - can init on a table without thead and later add it
134
- - https://github.com/mkoryak/floatThead/issues/194 - header sizing takes into account border-collapse rules
135
- - bunch of code and stylistic cleanup
136
-
137
- ### 1.2.11
138
- - now supports perfect-scrollbar plugin
139
- - slightly better mobile safari support
140
- - fix bower.json
141
-
142
- ### 1.2.10
143
- - play nicely with angularjs if it modifies the DOM behind the scenes
144
- - screen reader support via `enableAria` option
145
- - https://github.com/mkoryak/floatThead/issues/122 - better default options for ie
146
- - https://github.com/mkoryak/floatThead/issues/121 - header layout bug
147
- - https://github.com/mkoryak/floatThead/issues/128 - issues with scrollbar size detection in certain layouts
148
- - https://github.com/mkoryak/floatThead/issues/127 - destroy not removing some elements
149
-
150
- ### 1.2.9
151
- - **Deprecated the `cellTag` option**, use `headerCellSelector` instead (see docs)
152
- - https://github.com/mkoryak/floatThead/issues/101 - **huge** performance improvement
153
- - https://github.com/mkoryak/floatThead/issues/98 - Border-collapse ignored on scroll
154
- - https://github.com/mkoryak/floatThead/issues/99 - Incorrect scroll width calculation in some cases
155
- - A couple of updates to the `destroy` method that get the table back into a more pristine state
156
-
157
- ### 1.2.8
158
- - https://github.com/mkoryak/floatThead/issues/82 - table not disappearing when out of view in a certain layout
159
- - https://github.com/mkoryak/floatThead/issues/84 - header not aligned if your scrolling container has a certain height
160
- - https://github.com/mkoryak/floatThead/issues/86 - do not take hidden TRs into account when calculating header height
161
-
162
- ### 1.2.7
163
- - Changed license over to MIT
164
-
165
- ### 1.2.6
166
- - **new stuff:**
167
- - added support for tables with existing `<colgroup>` elements
168
- - added a grunt task to build dist to master
169
- - **bug fixes:**
170
- - https://github.com/mkoryak/floatThead/issues/57 - window resize issues on windows
171
- - https://github.com/mkoryak/floatThead/issues/70 - better support for responsive tables
172
- - https://github.com/mkoryak/floatThead/issues/71 - incorrectly unbinding events in destroy
173
- - https://github.com/mkoryak/floatThead/issues/75 - dom leakage in destroy
174
-
175
-
176
- ### 1.2.5
177
- - bug fixes:
178
- - https://github.com/mkoryak/floatThead/issues/66
179
- - https://github.com/mkoryak/floatThead/issues/65
180
- - https://github.com/mkoryak/floatThead/issues/62
181
-
182
- ### 1.2.4
183
- - better support for really really wide tables
184
- - fixed https://github.com/mkoryak/floatThead/issues/53
185
- - fixed https://github.com/mkoryak/floatThead/issues/56
186
-
187
- ### 1.2.3
188
-
189
- - removed underscore dependency, added a *slim* version which is very slightly smaller and requires underscore
190
- - now supporting a few evil deprecated table attributes that people still use: `cellpadding` and `cellspacing`
191
- - fixed https://github.com/mkoryak/floatThead/issues/52
192
- - fixed https://github.com/mkoryak/floatThead/issues/50
193
- - added floatWrapperClass option
194
- - added copyTableClass option
195
-
196
- ### 1.2.2
197
-
198
- - better support for tables with dynamically hidden columns
199
- - can now set a class on the floating header's container div
200
-
201
- ### 1.2.1
202
-
203
- - fixed issue with caption tag align:bottom
204
- - switched to uglifyjs to minify code
205
-
206
- ### 1.2.0
207
-
208
- - <code>caption</code> tag support
209
- - faster initialization when working with large tables (and small ones)
78
+ [moved to CHANGELOG.md](https://github.com/mkoryak/floatThead/blob/master/CHANGELOG.md)
210
79
 
211
- ### 1.1.1
212
80
 
213
- - Fixed bugs introduced in 1.0.0 which caused issues in IE9
214
-
215
- ### 1.0.0
216
-
217
- - Updated code to be jquery 1.9+ compliant
81
+ ## Who is using floatThead ?
218
82
 
83
+ ### [around 20K hits on guthub cod search](https://github.com/search?q=floatThead&ref=reposearch&type=Code&utf8=%E2%9C%93)
219
84
 
220
- ## Who is using floatThead ?
85
+ ### [http://kangax.github.io/compat-table/](http://kangax.github.io/compat-table/es6/)
221
86
 
222
87
  ### [staticsitegenerators.net](http://staticsitegenerators.net/)
223
88
 
@@ -230,55 +95,15 @@ Huge thanks to [CoryDuncan](https://github.com/CoryDuncan), [ithielnor](https://
230
95
  ### [django-sql-explorer](https://github.com/epantry/django-sql-explorer)
231
96
  - https://github.com/epantry/django-sql-explorer/commit/34ae345325a1e07ff952800fcd6dc5bddac5e3f2-
232
97
 
233
- ### [Yii framework](http://www.yiiframework.com/)
234
- - http://www.yiiframework.com/extension/yii2-grid/
235
- - http://demos.krajee.com/grid-demo
236
-
237
- ### [api.tinata.co.uk](http://api.tinata.co.uk/countries)
238
- - https://github.com/tinata/tinatapi/commit/b1cf62dd97a5caa76bafcd5ec3b4f12e6b88f385
239
-
240
-
241
- *Your site? email me: my last name at gmail*
242
-
243
- ## Other plugins
244
-
245
- There are plenty of other **fixed header** / **floating header** / **scrolling table header** plugins that attempt to do the same thing this plugin does. None of them support both window and overflow scrolling and many of them depend on special css or require that you set the table column widths. Some of them are good and some of them suck. Go ahead and check them out too.
246
-
247
- I have compiled a list here with comments on each one:
248
-
249
-
250
- | Plugin | Window Scrolling | Overflow-X Scrolling | Overflow-Y Scrolling | No Special CSS | Keeps Bound Events | Freeze Columns |
251
- |:-------------:|:-------------:|:-----:|:-------------:|:-------------:|:-----:|:-----:|:-----:|
252
- | [FloatThead](https://github.com/mkoryak/floatThead/) | yes | yes | yes | yes | yes | no |
253
- | [Fixed-Table-Header](https://github.com/markmalek/Fixed-Header-Table/) | no | yes | no | yes | no | no |
254
- | [jquery.scrollTableBody](https://github.com/nheldman/jquery.scrollTableBody) | no | yes | yes | no | ?? | no |
255
- | [Fixed table rows cols](http://meetselva.github.io/fixed-table-rows-cols) | no | yes | yes | no | ?? | yes |
256
- | [Table Fixed Header](https://github.com/oma/table-fixed-header) | yes | no | no | yes | no | no |
257
- | [Sticky Table Header](https://github.com/jmosbech/StickyTableHeaders) | yes | no | no | yes | yes | no |
258
- | [Grid](https://github.com/mmurph211/Grid) | no | yes | yes | yes | yes | no |
259
-
260
-
261
- [Fixed-Table-Header](https://github.com/markmalek/Fixed-Header-Table/)
262
- This is the original. It has been around for ages and it will be the first plugin you find when you start looking. It also has a ton of open unresolved issues. It does not support window scrolling, it does not seem to support y-scrolling withing the container. It loses the events you attached to the thead. Lots of open issues. **Stay away.**
263
-
264
- [Fixed table rows cols](http://meetselva.github.io/fixed-table-rows-cols)
265
- Does not support window scrolling. Requires you to specify the column widths for the table. This means that the table will not be able to optimally lay itself out. It does support freezing columns in place. If you need that, this might be the plugin for you.
266
-
267
- [jquery.scrollTableBody](https://github.com/nheldman/jquery.scrollTableBody)
268
- Does not support window scrolling. A newcomer to the scene, not a mature project. Has some major issues with cell padding. **Stay away** until issues are resolved.
269
-
270
- [Grid](https://github.com/mmurph211/Grid)
271
- This lib is very different from the rest because its main usecase is to give you a sortable grid. You do not run this plugin on an existing table - you need to provide a json or xml data source. This is a great lightweight replacement for datatables. This may be the plugin for you if you are not converting an existing table.
272
-
273
- [Table Fixed Header](https://github.com/oma/table-fixed-header)
274
- This is a window scrolling plugin, does not support overflow scrolling. Does not work properly when the window is resized and the table width changes. Floated header sticks around if you scroll past table. Author welcomes pull requests but does not fix issues. **Stay away**
275
98
 
276
- [Sticky Table Header](https://github.com/jmosbech/StickyTableHeaders)
277
- This is a window scrolling plugin. Does not support overflow scrolling. It is probably the best window scrolling plugin (besides this one). The author seems to fix issues as they arise.
99
+ # You are still reading this?
278
100
 
279
- # Woot
101
+ Like clicking on things? Check out these great domains:
280
102
 
281
- Big thanks to jetbrains for giving me an open source webstorm license for this project. They make the best IDEs.
103
+ - http://guthib.com
104
+ - http://soundbutt.com
105
+ - http://guthub.com
106
+ - http://programmingdrunk.com
282
107
 
283
108
  License
284
109
  -------
@@ -1,4 +1,4 @@
1
- // @preserve jQuery.floatThead 1.3.2 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2015 Misha Koryak
1
+ // @preserve jQuery.floatThead 1.4.1 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2016 Misha Koryak
2
2
  // @license MIT
3
3
 
4
4
  /* @author Misha Koryak
@@ -24,8 +24,11 @@
24
24
  position: 'auto', // 'fixed', 'absolute', 'auto'. auto picks the best for your table scrolling type.
25
25
  top: 0, //String or function($table) - offset from top of window where the header should not pass above
26
26
  bottom: 0, //String or function($table) - offset from the bottom of the table where the header should stop scrolling
27
- scrollContainer: function($table){
28
- return $([]); //if the table has horizontal scroll bars then this is the container that has overflow:auto and causes those scroll bars
27
+ scrollContainer: function($table) { // or boolean 'true' (use offsetParent) | function -> if the table has horizontal scroll bars then this is the container that has overflow:auto and causes those scroll bars
28
+ return $([]);
29
+ },
30
+ responsiveContainer: function($table) { // only valid if scrollContainer is not used (ie window scrolling). this is the container which will control y scrolling at some mobile breakpoints
31
+ return $([]);
29
32
  },
30
33
  getSizingRow: function($table, $cols, $fthCells){ // this is only called when using IE,
31
34
  // override it if the first row of the table is going to contain colgroups (any cell spans greater than one col)
@@ -38,7 +41,13 @@
38
41
  copyTableClass: true, //copy 'class' attribute from table into the floated table so that the styles match.
39
42
  enableAria: false, //will copy header text from the floated header back into the table for screen readers. Might cause the css styling to be off. beware!
40
43
  autoReflow: false, //(undocumented) - use MutationObserver api to reflow automatically when internal table DOM changes
41
- debug: false //print possible issues (that don't prevent script loading) to console, if console exists.
44
+ debug: false, //print possible issues (that don't prevent script loading) to console, if console exists.
45
+ support: { //should we bind events that expect these frameworks to be present and/or check for them?
46
+ bootstrap: true,
47
+ datatables: true,
48
+ jqueryUI: true,
49
+ perfectScrollbar: true
50
+ }
42
51
  };
43
52
 
44
53
  var util = window._;
@@ -51,6 +60,10 @@
51
60
  var isFF = /Gecko\//.test(navigator.userAgent);
52
61
  var isWebkit = /WebKit\//.test(navigator.userAgent);
53
62
 
63
+ if(!(ieVersion || isFF || isWebkit)){
64
+ ieVersion = 11; //yey a hack!
65
+ }
66
+
54
67
  //safari 7 (and perhaps others) reports table width to be parent container's width if max-width is set on table. see: https://github.com/mkoryak/floatThead/issues/108
55
68
  var isTableWidthBug = function(){
56
69
  if(isWebkit) {
@@ -67,6 +80,20 @@
67
80
 
68
81
  var $window = $(window);
69
82
 
83
+ if(!window.matchMedia) {
84
+ //these will be used by the plugin to go into print mode (destroy and remake itself)
85
+ var _beforePrint = window.onbeforeprint;
86
+ var _afterPrint = window.onafterprint;
87
+ window.onbeforeprint = function () {
88
+ _beforePrint && _beforePrint();
89
+ $window.triggerHandler("beforeprint");
90
+ };
91
+ window.onafterprint = function () {
92
+ _afterPrint && _afterPrint();
93
+ $window.triggerHandler("afterprint");
94
+ };
95
+ }
96
+
70
97
  /**
71
98
  * @param debounceMs
72
99
  * @param cb
@@ -87,6 +114,25 @@
87
114
  }
88
115
  }
89
116
 
117
+ function getClosestScrollContainer($elem) {
118
+ var elem = $elem[0];
119
+ var parent = elem.parentElement;
120
+
121
+ do {
122
+ var pos = window
123
+ .getComputedStyle(parent)
124
+ .getPropertyValue('overflow');
125
+
126
+ if (pos != 'visible') break;
127
+
128
+ } while (parent = parent.parentElement);
129
+
130
+ if(parent == document.body){
131
+ return $([]);
132
+ }
133
+ return $(parent);
134
+ }
135
+
90
136
 
91
137
  function debug(str){
92
138
  window && window.console && window.console.error && window.console.error("jQuery.floatThead: " + str);
@@ -104,9 +150,9 @@
104
150
  */
105
151
  function scrollbarWidth() {
106
152
  var $div = $( //borrowed from anti-scroll
107
- '<div style="width:50px;height:50px;overflow-y:scroll;'
108
- + 'position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%">'
109
- + '</div>'
153
+ '<div style="width:50px;height:50px;overflow-y:scroll;'
154
+ + 'position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%">'
155
+ + '</div>'
110
156
  );
111
157
  $('body').append($div);
112
158
  var w1 = $div.innerWidth();
@@ -229,8 +275,15 @@
229
275
  var scrollbarOffset = {vertical: 0, horizontal: 0};
230
276
  var scWidth = scrollbarWidth();
231
277
  var lastColumnCount = 0; //used by columnNum()
278
+
279
+ if(opts.scrollContainer === true){
280
+ opts.scrollContainer = getClosestScrollContainer;
281
+ }
282
+
232
283
  var $scrollContainer = opts.scrollContainer($table) || $([]); //guard against returned nulls
233
284
  var locked = $scrollContainer.length > 0;
285
+ var $responsiveContainer = locked ? $([]) : opts.responsiveContainer($table) || $([]);
286
+ var responsive = isResponsiveContainerActive();
234
287
 
235
288
  var useAbsolutePositioning = null;
236
289
  if(typeof opts.useAbsolutePositioning !== 'undefined'){
@@ -245,8 +298,8 @@
245
298
  debug("option 'scrollingTop' has been renamed to 'top' in v1.3.0. See docs for more info: http://mkoryak.github.io/floatThead/#options");
246
299
  }
247
300
  if(typeof opts.scrollingBottom !== 'undefined'){
248
- opts.bottom = opts.scrollingBottom;
249
- debug("option 'scrollingBottom' has been renamed to 'bottom' in v1.3.0. See docs for more info: http://mkoryak.github.io/floatThead/#options");
301
+ opts.bottom = opts.scrollingBottom;
302
+ debug("option 'scrollingBottom' has been renamed to 'bottom' in v1.3.0. See docs for more info: http://mkoryak.github.io/floatThead/#options");
250
303
  }
251
304
 
252
305
 
@@ -305,16 +358,19 @@
305
358
  $floatTable.attr('class', $table.attr('class'));
306
359
  }
307
360
  $floatTable.attr({ //copy over some deprecated table attributes that people still like to use. Good thing people don't use colgroups...
308
- 'cellpadding': $table.attr('cellpadding'),
309
- 'cellspacing': $table.attr('cellspacing'),
310
- 'border': $table.attr('border')
311
- });
361
+ 'cellpadding': $table.attr('cellpadding'),
362
+ 'cellspacing': $table.attr('cellspacing'),
363
+ 'border': $table.attr('border')
364
+ });
312
365
  var tableDisplayCss = $table.css('display');
313
366
  $floatTable.css({
314
- 'borderCollapse': $table.css('borderCollapse'),
315
- 'border': $table.css('border'),
316
- 'display': tableDisplayCss
317
- });
367
+ 'borderCollapse': $table.css('borderCollapse'),
368
+ 'border': $table.css('border'),
369
+ 'display': tableDisplayCss
370
+ });
371
+ if(!locked){
372
+ $floatTable.css('width', 'auto');
373
+ }
318
374
  if(tableDisplayCss == 'none'){
319
375
  floatTableHidden = true;
320
376
  }
@@ -348,11 +404,11 @@
348
404
 
349
405
 
350
406
  $floatContainer.css({
351
- position: useAbsolutePositioning ? 'absolute' : 'fixed',
352
- marginTop: 0,
353
- top: useAbsolutePositioning ? 0 : 'auto',
354
- zIndex: opts.zIndex
355
- });
407
+ position: useAbsolutePositioning ? 'absolute' : 'fixed',
408
+ marginTop: 0,
409
+ top: useAbsolutePositioning ? 0 : 'auto',
410
+ zIndex: opts.zIndex
411
+ });
356
412
  $floatContainer.addClass(opts.floatContainerClass);
357
413
  updateScrollingOffsets();
358
414
 
@@ -384,8 +440,9 @@
384
440
 
385
441
  function setFloatWidth(){
386
442
  var tw = tableWidth($table, $fthCells, true);
387
- var width = $scrollContainer.width() || tw;
388
- var floatContainerWidth = $scrollContainer.css("overflow-y") != 'hidden' ? width - scrollbarOffset.vertical : width;
443
+ var $container = responsive ? $responsiveContainer : $scrollContainer;
444
+ var width = $container.width() || tw;
445
+ var floatContainerWidth = $container.css("overflow-y") != 'hidden' ? width - scrollbarOffset.vertical : width;
389
446
  $floatContainer.width(floatContainerWidth);
390
447
  if(locked){
391
448
  var percent = 100 * tw / (floatContainerWidth);
@@ -411,7 +468,7 @@
411
468
  } else {
412
469
  count = 0;
413
470
  $headerColumns.each(function () {
414
- count += parseInt(($(this).attr('colspan') || 1), 10);
471
+ count += parseInt(($(this).attr('colspan') || 1), 10);
415
472
  });
416
473
  }
417
474
  if(count != lastColumnCount){
@@ -492,8 +549,8 @@
492
549
  if(useAbsolutePositioning != isAbsolute){
493
550
  useAbsolutePositioning = isAbsolute;
494
551
  $floatContainer.css({
495
- position: useAbsolutePositioning ? 'absolute' : 'fixed'
496
- });
552
+ position: useAbsolutePositioning ? 'absolute' : 'fixed'
553
+ });
497
554
  }
498
555
  }
499
556
  function getSizingRow($table, $cols, $fthCells, ieVersion){
@@ -515,6 +572,8 @@
515
572
  var numCols = columnNum(); //if the tables columns changed dynamically since last time (datatables), rebuild the sizer rows and get a new count
516
573
 
517
574
  return function(){
575
+ //Cache the current scrollLeft value so that it can be reset post reflow
576
+ var scrollLeft = $floatContainer.scrollLeft();
518
577
  $tableCells = $tableColGroup.find('col');
519
578
  var $rowCells = getSizingRow($table, $tableCells, $fthCells, ieVersion);
520
579
 
@@ -540,6 +599,8 @@
540
599
  $floatTable.css(layoutAuto);
541
600
  setHeaderHeight();
542
601
  }
602
+ //Set back the current scrollLeft value on floatContainer
603
+ $floatContainer.scrollLeft(scrollLeft);
543
604
  $table.triggerHandler("reflowed", [$floatContainer]);
544
605
  };
545
606
  }
@@ -552,6 +613,10 @@
552
613
  }
553
614
  return w;
554
615
  }
616
+
617
+ function isResponsiveContainerActive(){
618
+ return $responsiveContainer.css("overflow-x") == 'auto';
619
+ }
555
620
  /**
556
621
  * first performs initial calculations that we expect to not change when the table, window, or scrolling container are scrolled.
557
622
  * returns a function that calculates the floating container's top and left coords. takes into account if we are using page scrolling or inner scrolling
@@ -584,9 +649,11 @@
584
649
  }
585
650
  var windowTop = $window.scrollTop();
586
651
  var windowLeft = $window.scrollLeft();
587
- var scrollContainerLeft = $scrollContainer.scrollLeft();
652
+ var scrollContainerLeft = (isResponsiveContainerActive() ? $responsiveContainer : $scrollContainer).scrollLeft();
588
653
 
589
654
  return function(eventType){
655
+ responsive = isResponsiveContainerActive();
656
+
590
657
  var isTableHidden = $table[0].offsetWidth <= 0 && $table[0].offsetHeight <= 0;
591
658
  if(!isTableHidden && floatTableHidden) {
592
659
  floatTableHidden = false;
@@ -606,13 +673,20 @@
606
673
  windowTop = $window.scrollTop();
607
674
  windowLeft = $window.scrollLeft();
608
675
  } else if(eventType == 'containerScroll'){
609
- scrollingContainerTop = $scrollContainer.scrollTop();
610
- scrollContainerLeft = $scrollContainer.scrollLeft();
676
+ if($responsiveContainer.length){
677
+ if(!responsive){
678
+ return; //we dont care about the event if we arent responsive right now
679
+ }
680
+ scrollContainerLeft = $responsiveContainer.scrollLeft();
681
+ } else {
682
+ scrollingContainerTop = $scrollContainer.scrollTop();
683
+ scrollContainerLeft = $scrollContainer.scrollLeft();
684
+ }
611
685
  } else if(eventType != 'init') {
612
686
  windowTop = $window.scrollTop();
613
687
  windowLeft = $window.scrollLeft();
614
688
  scrollingContainerTop = $scrollContainer.scrollTop();
615
- scrollContainerLeft = $scrollContainer.scrollLeft();
689
+ scrollContainerLeft = (responsive ? $responsiveContainer : $scrollContainer).scrollLeft();
616
690
  }
617
691
  if(isWebkit && (windowTop < 0 || windowLeft < 0)){ //chrome overscroll effect at the top of the page - breaks fixed positioned floated headers
618
692
  return;
@@ -658,7 +732,7 @@
658
732
  refloat(); //scrolling within table. header floated
659
733
  triggerFloatEvent(true);
660
734
  }
661
- left = 0;
735
+ left = scrollContainerLeft;
662
736
  } else if(locked && !useAbsolutePositioning){ //inner scrolling, fixed positioning
663
737
  if (tableContainerGap > scrollingContainerTop || scrollingContainerTop - tableContainerGap > tableHeight) {
664
738
  top = tableOffset.top - windowTop;
@@ -685,7 +759,7 @@
685
759
  top = scrollingTop;
686
760
  triggerFloatEvent(true);
687
761
  }
688
- left = tableOffset.left - windowLeft;
762
+ left = tableOffset.left + scrollContainerLeft - windowLeft;
689
763
  }
690
764
  return {top: top, left: left};
691
765
  };
@@ -701,9 +775,9 @@
701
775
  return function(pos, setWidth, setHeight){
702
776
  if(pos != null && (oldTop != pos.top || oldLeft != pos.left)){
703
777
  $floatContainer.css({
704
- top: pos.top,
705
- left: pos.left
706
- });
778
+ top: pos.top,
779
+ left: pos.left
780
+ });
707
781
  oldTop = pos.top;
708
782
  oldLeft = pos.left;
709
783
  }
@@ -713,7 +787,7 @@
713
787
  if(setHeight){
714
788
  setHeaderHeight();
715
789
  }
716
- var scrollLeft = $scrollContainer.scrollLeft();
790
+ var scrollLeft = (responsive ? $responsiveContainer : $scrollContainer).scrollLeft();
717
791
  if(!useAbsolutePositioning || oldScrollLeft != scrollLeft){
718
792
  $floatContainer.scrollLeft(scrollLeft);
719
793
  oldScrollLeft = scrollLeft;
@@ -726,14 +800,23 @@
726
800
  */
727
801
  function calculateScrollBarSize(){ //this should happen after the floating table has been positioned
728
802
  if($scrollContainer.length){
729
- if($scrollContainer.data().perfectScrollbar){
803
+ if(opts.support && opts.support.perfectScrollbar && $scrollContainer.data().perfectScrollbar){
730
804
  scrollbarOffset = {horizontal:0, vertical:0};
731
805
  } else {
732
- var sw = $scrollContainer.width(), sh = $scrollContainer.height(), th = $table.height(), tw = tableWidth($table, $fthCells);
733
- var offseth = sw < tw ? scWidth : 0;
734
- var offsetv = sh < th ? scWidth : 0;
735
- scrollbarOffset.horizontal = sw - offsetv < tw ? scWidth : 0;
736
- scrollbarOffset.vertical = sh - offseth < th ? scWidth : 0;
806
+ if($scrollContainer.css('overflow-x') == 'scroll'){
807
+ scrollbarOffset.horizontal = scWidth;
808
+ } else {
809
+ var sw = $scrollContainer.width(), tw = tableWidth($table, $fthCells);
810
+ var offsetv = sh < th ? scWidth : 0;
811
+ scrollbarOffset.horizontal = sw - offsetv < tw ? scWidth : 0;
812
+ }
813
+ if($scrollContainer.css('overflow-y') == 'scroll'){
814
+ scrollbarOffset.vertical = scWidth;
815
+ } else {
816
+ var sh = $scrollContainer.height(), th = $table.height();
817
+ var offseth = sw < tw ? scWidth : 0;
818
+ scrollbarOffset.vertical = sh - offseth < th ? scWidth : 0;
819
+ }
737
820
  }
738
821
  }
739
822
  }
@@ -790,6 +873,31 @@
790
873
  calculateFloatContainerPos = calculateFloatContainerPosFn();
791
874
  repositionFloatContainer(calculateFloatContainerPos('reflow'), true);
792
875
  }, 1);
876
+
877
+ /////// printing stuff
878
+ var beforePrint = function(){
879
+ $table.floatThead('destroy', [true]);
880
+ };
881
+ var afterPrint = function(){
882
+ $table.floatThead(opts);
883
+ };
884
+ var printEvent = function(mql){
885
+ //make printing the table work properly on IE10+
886
+ if(mql.matches) {
887
+ beforePrint();
888
+ } else {
889
+ afterPrint();
890
+ }
891
+ };
892
+ if(window.matchMedia){
893
+ window.matchMedia("print").addListener(printEvent);
894
+ } else {
895
+ $window.on('beforeprint', beforePrint);
896
+ $window.on('afterprint', afterPrint);
897
+ }
898
+ ////// end printing stuff
899
+
900
+
793
901
  if(locked){ //internal scrolling
794
902
  if(useAbsolutePositioning){
795
903
  $scrollContainer.on(eventName('scroll'), containerScrollEvent);
@@ -798,6 +906,7 @@
798
906
  $window.on(eventName('scroll'), windowScrollEvent);
799
907
  }
800
908
  } else { //window scrolling
909
+ $responsiveContainer.on(eventName('scroll'), containerScrollEvent);
801
910
  $window.on(eventName('scroll'), windowScrollEvent);
802
911
  }
803
912
 
@@ -805,15 +914,19 @@
805
914
 
806
915
  windowResize(eventName('resize'), windowResizeEvent);
807
916
  $table.on('reflow', reflowEvent);
808
- if(isDatatable($table)){
917
+ if(opts.support && opts.support.datatables && isDatatable($table)){
809
918
  $table
810
- .on('filter', reflowEvent)
811
- .on('sort', reflowEvent)
812
- .on('page', reflowEvent);
919
+ .on('filter', reflowEvent)
920
+ .on('sort', reflowEvent)
921
+ .on('page', reflowEvent);
813
922
  }
814
923
 
815
- $window.on(eventName('shown.bs.tab'), reflowEvent); // people cant seem to figure out how to use this plugin with bs3 tabs... so this :P
816
- $window.on(eventName('tabsactivate'), reflowEvent); // same thing for jqueryui
924
+ if(opts.support && opts.support.bootstrap) {
925
+ $window.on(eventName('shown.bs.tab'), reflowEvent); // people cant seem to figure out how to use this plugin with bs3 tabs... so this :P
926
+ }
927
+ if(opts.support && opts.support.jqueryUI) {
928
+ $window.on(eventName('tabsactivate'), reflowEvent); // same thing for jqueryui
929
+ }
817
930
 
818
931
 
819
932
  if (canObserveMutations) {
@@ -836,14 +949,14 @@
836
949
  }
837
950
  });
838
951
  mObs.observe(mutationElement, {
839
- childList: true,
840
- subtree: true
952
+ childList: true,
953
+ subtree: true
841
954
  });
842
955
  }
843
956
 
844
957
  //attach some useful functions to the table.
845
958
  $table.data('floatThead-attached', {
846
- destroy: function(){
959
+ destroy: function(e, isPrintEvent){
847
960
  var ns = '.fth-'+floatTheadId;
848
961
  unfloat();
849
962
  $table.css(layoutAuto);
@@ -852,12 +965,14 @@
852
965
  if($newHeader.parent().length){ //only if it's in the DOM
853
966
  $newHeader.replaceWith($header);
854
967
  }
968
+ triggerFloatEvent(false);
855
969
  if(canObserveMutations){
856
970
  mObs.disconnect();
857
971
  mObs = null;
858
972
  }
859
973
  $table.off('reflow reflowed');
860
974
  $scrollContainer.off(ns);
975
+ $responsiveContainer.off(ns);
861
976
  if (wrappedContainer) {
862
977
  if ($scrollContainer.length) {
863
978
  $scrollContainer.unwrap();
@@ -875,6 +990,11 @@
875
990
  $floatContainer.remove();
876
991
  $table.data('floatThead-attached', false);
877
992
  $window.off(ns);
993
+ if(!isPrintEvent){
994
+ //if we are in the middle of printing, we want this event to re-create the plugin
995
+ window.matchMedia && window.matchMedia("print").removeListener(printEvent);
996
+ beforePrint = afterPrint = function(){};
997
+ }
878
998
  },
879
999
  reflow: function(){
880
1000
  reflowEvent();