effective_datatables 4.17.4 → 4.19.0

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/README.md +21 -0
  3. data/app/assets/javascripts/dataTables/UPGRADE.md +17 -0
  4. data/app/assets/javascripts/dataTables/buttons/buttons.bootstrap4.js +73 -19
  5. data/app/assets/javascripts/dataTables/buttons/buttons.colVis.js +166 -120
  6. data/app/assets/javascripts/dataTables/buttons/buttons.html5.js +749 -667
  7. data/app/assets/javascripts/dataTables/buttons/buttons.print.js +96 -64
  8. data/app/assets/javascripts/dataTables/buttons/dataTables.buttons.js +1568 -909
  9. data/app/assets/javascripts/dataTables/dataTables.bootstrap4.js +172 -154
  10. data/app/assets/javascripts/dataTables/jquery.dataTables.js +3119 -2704
  11. data/app/assets/javascripts/dataTables/responsive/dataTables.responsive.js +707 -531
  12. data/app/assets/javascripts/dataTables/responsive/responsive.bootstrap4.js +61 -33
  13. data/app/assets/javascripts/dataTables/rowReorder/dataTables.rowReorder.js +961 -740
  14. data/app/assets/javascripts/dataTables/rowReorder/rowReorder.bootstrap4.js +50 -30
  15. data/app/assets/javascripts/effective_datatables/filters.js.coffee +88 -0
  16. data/app/assets/stylesheets/dataTables/buttons/buttons.bootstrap4.scss +178 -151
  17. data/app/assets/stylesheets/dataTables/dataTables.bootstrap4.scss +300 -81
  18. data/app/assets/stylesheets/dataTables/responsive/responsive.bootstrap4.scss +54 -71
  19. data/app/assets/stylesheets/dataTables/rowReorder/rowReorder.bootstrap4.scss +23 -4
  20. data/app/assets/stylesheets/effective_datatables/_overrides.bootstrap4.scss +81 -39
  21. data/app/views/effective/datatables/_filter_date_range.html.haml +37 -9
  22. data/app/views/effective/datatables/_filters.html.haml +1 -1
  23. data/lib/effective_datatables/version.rb +1 -1
  24. metadata +3 -2
data/app/assets/javascripts/dataTables/rowReorder/rowReorder.bootstrap4.js CHANGED
@@ -1,38 +1,58 @@
1
1
  /*! Bootstrap 4 styling wrapper for RowReorder
2
- * ©2018 SpryMedia Ltd - datatables.net/license
2
+ * © SpryMedia Ltd - datatables.net/license
3
3
  */
4
4
 
5
5
  (function( factory ){
6
- if ( typeof define === 'function' && define.amd ) {
7
- // AMD
8
- define( ['jquery', 'datatables.net-bs4', 'datatables.net-rowreorder'], function ( $ ) {
9
- return factory( $, window, document );
10
- } );
11
- }
12
- else if ( typeof exports === 'object' ) {
13
- // CommonJS
14
- module.exports = function (root, $) {
15
- if ( ! root ) {
16
- root = window;
17
- }
18
-
19
- if ( ! $ || ! $.fn.dataTable ) {
20
- $ = require('datatables.net-bs4')(root, $).$;
21
- }
22
-
23
- if ( ! $.fn.dataTable.RowReorder ) {
24
- require('datatables.net-rowreorder')(root, $);
25
- }
26
-
27
- return factory( $, root, root.document );
28
- };
29
- }
30
- else {
31
- // Browser
32
- factory( jQuery, window, document );
33
- }
6
+ if ( typeof define === 'function' && define.amd ) {
7
+ // AMD
8
+ define( ['jquery', 'datatables.net-bs4', 'datatables.net-rowreorder'], function ( $ ) {
9
+ return factory( $, window, document );
10
+ } );
11
+ }
12
+ else if ( typeof exports === 'object' ) {
13
+ // CommonJS
14
+ var jq = require('jquery');
15
+ var cjsRequires = function (root, $) {
16
+ if ( ! $.fn.dataTable ) {
17
+ require('datatables.net-bs4')(root, $);
18
+ }
19
+
20
+ if ( ! $.fn.dataTable.RowReorder ) {
21
+ require('datatables.net-rowreorder')(root, $);
22
+ }
23
+ };
24
+
25
+ if (typeof window === 'undefined') {
26
+ module.exports = function (root, $) {
27
+ if ( ! root ) {
28
+ // CommonJS environments without a window global must pass a
29
+ // root. This will give an error otherwise
30
+ root = window;
31
+ }
32
+
33
+ if ( ! $ ) {
34
+ $ = jq( root );
35
+ }
36
+
37
+ cjsRequires( root, $ );
38
+ return factory( $, root, root.document );
39
+ };
40
+ }
41
+ else {
42
+ cjsRequires( window, jq );
43
+ module.exports = factory( jq, window, window.document );
44
+ }
45
+ }
46
+ else {
47
+ // Browser
48
+ factory( jQuery, window, document );
49
+ }
34
50
  }(function( $, window, document, undefined ) {
51
+ 'use strict';
52
+ var DataTable = $.fn.dataTable;
53
+
54
+
35
55
 
36
- return $.fn.dataTable;
37
56
 
57
+ return DataTable;
38
58
  }));
data/app/assets/javascripts/effective_datatables/filters.js.coffee CHANGED
@@ -5,3 +5,91 @@ $(document).on 'click', 'a[data-apply-effective-datatables-filters]', (event) ->
5
5
  $table = $('#' + $form.attr('aria-controls'))
6
6
  $table.DataTable().draw()
7
7
 
8
+ # Date Filters
9
+ # This uses moment.js. Sorry.
10
+ selectMonth = ($filter, date) ->
11
+ prevDate = date.clone().subtract('1', 'month').startOf('month')
12
+ startDate = date.clone().startOf('month')
13
+ endDate = date.clone().endOf('month')
14
+ nextDate = date.clone().add('1', 'month').startOf('month')
15
+
16
+ # Update Previous Button
17
+ $filter.find('[data-effective-datatables-filter-prev-month]').data('effective-datatables-filter-prev-month', prevDate.format('YYYY-MM-DD'))
18
+ $filter.find('[data-effective-datatables-filter-prev-month]').find('span.prev-month').text(prevDate.format('MMM'))
19
+
20
+ # Update Start and End Dates
21
+ $filter.find('.start-date').text(startDate.format('YYYY-MM-DD'))
22
+ $filter.find('.end-date').text(endDate.format('YYYY-MM-DD'))
23
+
24
+ # Update Next Button
25
+ $filter.find('[data-effective-datatables-filter-next-month]').data('effective-datatables-filter-next-month', nextDate.format('YYYY-MM-DD'))
26
+ $filter.find('[data-effective-datatables-filter-next-month]').find('span.next-month').text(nextDate.format('MMM'))
27
+
28
+ # Update hidden inputs
29
+ $filter.find("input[id='filters_start_date']").data('DateTimePicker').date(startDate.format('YYYY-MM-DD'))
30
+ $filter.find("input[id='filters_end_date']").data('DateTimePicker').date(endDate.format('YYYY-MM-DD'))
31
+
32
+ $table = $('#' + $filter.closest('.effective-datatables-filters').attr('aria-controls'))
33
+ $table.DataTable().draw()
34
+
35
+ $(document).on 'click', 'a[data-effective-datatables-filter-next-month]', (event) ->
36
+ event.preventDefault()
37
+
38
+ $obj = $(event.currentTarget)
39
+ $filter = $obj.closest('.effective-datatables-filter')
40
+ date = moment($obj.data('effective-datatables-filter-next-month'))
41
+
42
+ selectMonth($filter, date)
43
+
44
+ $(document).on 'click', 'a[data-effective-datatables-filter-prev-month]', (event) ->
45
+ event.preventDefault()
46
+
47
+ $obj = $(event.currentTarget)
48
+ $filter = $obj.closest('.effective-datatables-filter')
49
+ date = moment($obj.data('effective-datatables-filter-prev-month'))
50
+
51
+ selectMonth($filter, date)
52
+
53
+ ## Years
54
+ selectYear = ($filter, date) ->
55
+ prevDate = date.clone().subtract('1', 'year').startOf('year')
56
+ startDate = date.clone().startOf('year')
57
+ endDate = date.clone().endOf('year')
58
+ nextDate = date.clone().add('1', 'year').startOf('year')
59
+
60
+ # Update Previous Button
61
+ $filter.find('[data-effective-datatables-filter-prev-year]').data('effective-datatables-filter-prev-year', prevDate.format('YYYY-MM-DD'))
62
+ $filter.find('[data-effective-datatables-filter-prev-year]').find('span.prev-year').text(prevDate.format('YYYY'))
63
+
64
+ # Update Start and End Dates
65
+ $filter.find('.start-date').text(startDate.format('YYYY-MM-DD'))
66
+ $filter.find('.end-date').text(endDate.format('YYYY-MM-DD'))
67
+
68
+ # Update Next Button
69
+ $filter.find('[data-effective-datatables-filter-next-year]').data('effective-datatables-filter-next-year', nextDate.format('YYYY-MM-DD'))
70
+ $filter.find('[data-effective-datatables-filter-next-year]').find('span.next-year').text(nextDate.format('YYYY'))
71
+
72
+ # Update hidden inputs
73
+ $filter.find("input[id='filters_start_date']").data('DateTimePicker').date(startDate.format('YYYY-MM-DD'))
74
+ $filter.find("input[id='filters_end_date']").data('DateTimePicker').date(endDate.format('YYYY-MM-DD'))
75
+
76
+ $table = $('#' + $filter.closest('.effective-datatables-filters').attr('aria-controls'))
77
+ $table.DataTable().draw()
78
+
79
+ $(document).on 'click', 'a[data-effective-datatables-filter-next-year]', (event) ->
80
+ event.preventDefault()
81
+
82
+ $obj = $(event.currentTarget)
83
+ $filter = $obj.closest('.effective-datatables-filter')
84
+ date = moment($obj.data('effective-datatables-filter-next-year'))
85
+
86
+ selectYear($filter, date)
87
+
88
+ $(document).on 'click', 'a[data-effective-datatables-filter-prev-year]', (event) ->
89
+ event.preventDefault()
90
+
91
+ $obj = $(event.currentTarget)
92
+ $filter = $obj.closest('.effective-datatables-filter')
93
+ date = moment($obj.data('effective-datatables-filter-prev-year'))
94
+
95
+ selectYear($filter, date)
data/app/assets/stylesheets/dataTables/buttons/buttons.bootstrap4.scss CHANGED
@@ -27,6 +27,18 @@
27
27
  transform: rotate(360deg);
28
28
  }
29
29
  }
30
+ div.dataTables_wrapper {
31
+ position: relative;
32
+ }
33
+
34
+ div.dt-buttons {
35
+ position: initial;
36
+ }
37
+ div.dt-buttons .dt-button {
38
+ overflow: hidden;
39
+ text-overflow: ellipsis;
40
+ }
41
+
30
42
  div.dt-button-info {
31
43
  position: fixed;
32
44
  top: 50%;
@@ -35,181 +47,175 @@ div.dt-button-info {
35
47
  margin-top: -100px;
36
48
  margin-left: -200px;
37
49
  background-color: white;
38
- border: 2px solid #111;
39
- box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
40
- border-radius: 3px;
50
+ border-radius: 0.75em;
51
+ box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);
41
52
  text-align: center;
42
- z-index: 21;
53
+ z-index: 2003;
54
+ overflow: hidden;
43
55
  }
44
56
  div.dt-button-info h2 {
45
- padding: 0.5em;
57
+ padding: 2rem 2rem 1rem 2rem;
46
58
  margin: 0;
47
59
  font-weight: normal;
48
- border-bottom: 1px solid #ddd;
49
- background-color: #f3f3f3;
50
60
  }
51
61
  div.dt-button-info > div {
52
- padding: 1em;
62
+ padding: 1em 2em 2em 2em;
63
+ }
64
+
65
+ div.dtb-popover-close {
66
+ position: absolute;
67
+ top: 6px;
68
+ right: 6px;
69
+ width: 22px;
70
+ height: 22px;
71
+ text-align: center;
72
+ border-radius: 3px;
73
+ cursor: pointer;
74
+ z-index: 2003;
75
+ }
76
+
77
+ button.dtb-hide-drop {
78
+ display: none !important;
53
79
  }
54
80
 
55
81
  div.dt-button-collection-title {
56
82
  text-align: center;
57
83
  padding: 0.3em 0 0.5em;
84
+ margin-left: 0.5em;
85
+ margin-right: 0.5em;
58
86
  font-size: 0.9em;
59
87
  }
60
88
 
61
- ul.dt-button-collection.dropdown-menu {
62
- display: block;
63
- z-index: 2002;
64
- -webkit-column-gap: 8px;
65
- -moz-column-gap: 8px;
66
- -ms-column-gap: 8px;
67
- -o-column-gap: 8px;
68
- column-gap: 8px;
69
- }
70
- ul.dt-button-collection.dropdown-menu.fixed {
71
- position: fixed;
72
- top: 50%;
73
- left: 50%;
74
- margin-left: -75px;
75
- border-radius: 0;
76
- }
77
- ul.dt-button-collection.dropdown-menu.fixed.two-column {
78
- margin-left: -150px;
79
- }
80
- ul.dt-button-collection.dropdown-menu.fixed.three-column {
81
- margin-left: -225px;
82
- }
83
- ul.dt-button-collection.dropdown-menu.fixed.four-column {
84
- margin-left: -300px;
85
- }
86
- ul.dt-button-collection.dropdown-menu > * {
87
- -webkit-column-break-inside: avoid;
88
- break-inside: avoid;
89
- }
90
- ul.dt-button-collection.dropdown-menu.two-column {
91
- width: 300px;
92
- padding-bottom: 1px;
93
- -webkit-column-count: 2;
94
- -moz-column-count: 2;
95
- -ms-column-count: 2;
96
- -o-column-count: 2;
97
- column-count: 2;
98
- }
99
- ul.dt-button-collection.dropdown-menu.three-column {
100
- width: 450px;
101
- padding-bottom: 1px;
102
- -webkit-column-count: 3;
103
- -moz-column-count: 3;
104
- -ms-column-count: 3;
105
- -o-column-count: 3;
106
- column-count: 3;
107
- }
108
- ul.dt-button-collection.dropdown-menu.four-column {
109
- width: 600px;
110
- padding-bottom: 1px;
111
- -webkit-column-count: 4;
112
- -moz-column-count: 4;
113
- -ms-column-count: 4;
114
- -o-column-count: 4;
115
- column-count: 4;
116
- }
117
- ul.dt-button-collection.dropdown-menu .dt-button {
118
- border-radius: 0;
89
+ div.dt-button-collection-title:empty {
90
+ display: none;
119
91
  }
120
92
 
121
- ul.dt-button-collection {
122
- -webkit-column-gap: 8px;
123
- -moz-column-gap: 8px;
124
- -ms-column-gap: 8px;
125
- -o-column-gap: 8px;
126
- column-gap: 8px;
127
- }
128
- ul.dt-button-collection.fixed {
129
- position: fixed;
93
+ span.dt-button-spacer {
94
+ display: inline-block;
95
+ margin: 0.5em;
96
+ white-space: nowrap;
97
+ }
98
+ span.dt-button-spacer.bar {
99
+ border-left: 1px solid rgba(0, 0, 0, 0.3);
100
+ vertical-align: middle;
101
+ padding-left: 0.5em;
102
+ }
103
+ span.dt-button-spacer.bar:empty {
104
+ height: 1em;
105
+ width: 1px;
106
+ padding-left: 0;
107
+ }
108
+
109
+ div.dt-button-collection .dt-button-active {
110
+ padding-right: 3em;
111
+ }
112
+ div.dt-button-collection .dt-button-active:after {
113
+ position: absolute;
130
114
  top: 50%;
131
- left: 50%;
132
- margin-left: -75px;
133
- border-radius: 0;
134
- }
135
- ul.dt-button-collection.fixed.two-column {
136
- margin-left: -150px;
137
- }
138
- ul.dt-button-collection.fixed.three-column {
139
- margin-left: -225px;
140
- }
141
- ul.dt-button-collection.fixed.four-column {
142
- margin-left: -300px;
143
- }
144
- ul.dt-button-collection > * {
145
- -webkit-column-break-inside: avoid;
146
- break-inside: avoid;
147
- }
148
- ul.dt-button-collection.two-column {
149
- width: 300px;
150
- padding-bottom: 1px;
151
- -webkit-column-count: 2;
152
- -moz-column-count: 2;
153
- -ms-column-count: 2;
154
- -o-column-count: 2;
155
- column-count: 2;
156
- }
157
- ul.dt-button-collection.three-column {
158
- width: 450px;
159
- padding-bottom: 1px;
160
- -webkit-column-count: 3;
161
- -moz-column-count: 3;
162
- -ms-column-count: 3;
163
- -o-column-count: 3;
164
- column-count: 3;
165
- }
166
- ul.dt-button-collection.four-column {
167
- width: 600px;
168
- padding-bottom: 1px;
169
- -webkit-column-count: 4;
170
- -moz-column-count: 4;
171
- -ms-column-count: 4;
172
- -o-column-count: 4;
173
- column-count: 4;
174
- }
175
- ul.dt-button-collection .dt-button {
176
- border-radius: 0;
177
- }
178
- ul.dt-button-collection.fixed {
179
- max-width: none;
180
- }
181
- ul.dt-button-collection.fixed:before, ul.dt-button-collection.fixed:after {
115
+ margin-top: -10px;
116
+ right: 1em;
117
+ display: inline-block;
118
+ content: "✓";
119
+ color: inherit;
120
+ }
121
+ div.dt-button-collection .dt-button-active.dt-button-split {
122
+ padding-right: 0;
123
+ }
124
+ div.dt-button-collection .dt-button-active.dt-button-split:after {
182
125
  display: none;
183
126
  }
184
-
185
- div.dt-button-background {
186
- position: fixed;
187
- top: 0;
188
- left: 0;
127
+ div.dt-button-collection .dt-button-active.dt-button-split > *:first-child {
128
+ padding-right: 3em;
129
+ }
130
+ div.dt-button-collection .dt-button-active.dt-button-split > *:first-child:after {
131
+ position: absolute;
132
+ top: 50%;
133
+ margin-top: -10px;
134
+ right: 1em;
135
+ display: inline-block;
136
+ content: "✓";
137
+ color: inherit;
138
+ }
139
+ div.dt-button-collection .dt-button-active-a a {
140
+ padding-right: 3em;
141
+ }
142
+ div.dt-button-collection .dt-button-active-a a:after {
143
+ position: absolute;
144
+ right: 1em;
145
+ display: inline-block;
146
+ content: "✓";
147
+ color: inherit;
148
+ }
149
+ div.dt-button-collection span.dt-button-spacer {
189
150
  width: 100%;
190
- height: 100%;
191
- z-index: 999;
151
+ font-size: 0.9em;
152
+ text-align: center;
153
+ margin: 0.5em 0;
154
+ }
155
+ div.dt-button-collection span.dt-button-spacer:empty {
156
+ height: 0;
157
+ width: 100%;
158
+ }
159
+ div.dt-button-collection span.dt-button-spacer.bar {
160
+ border-left: none;
161
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
162
+ padding-left: 0;
192
163
  }
193
164
 
194
- @media screen and (max-width: 767px) {
195
- div.dt-buttons {
196
- float: none;
197
- width: 100%;
198
- text-align: center;
199
- margin-bottom: 0.5em;
200
- }
201
- div.dt-buttons a.btn {
202
- float: none;
203
- }
165
+ html.dark div.dt-button-info {
166
+ background-color: var(--dt-html-background);
167
+ border: 1px solid rgba(255, 255, 255, 0.15);
204
168
  }
205
- div.dt-buttons button.btn.processing,
206
- div.dt-buttons div.btn.processing,
207
- div.dt-buttons a.btn.processing {
169
+
170
+ div.dt-buttons div.btn-group {
171
+ position: initial;
172
+ }
173
+ div.dt-buttons div.dropdown-menu {
174
+ margin-top: 4px;
175
+ }
176
+ div.dt-buttons div.dropdown-menu .dt-button {
177
+ position: relative;
178
+ }
179
+ div.dt-buttons div.dropdown-menu div.dt-button-split {
180
+ display: flex;
181
+ flex-direction: row;
182
+ flex-wrap: wrap;
183
+ justify-content: flex-start;
184
+ align-content: flex-start;
185
+ align-items: stretch;
186
+ }
187
+ div.dt-buttons div.dropdown-menu div.dt-button-split a:first-child {
188
+ min-width: auto;
189
+ flex: 1 0 50px;
190
+ padding-right: 0;
191
+ }
192
+ div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child {
193
+ min-width: 33px;
194
+ flex: 0;
195
+ background: transparent;
196
+ border: none;
197
+ line-height: 1rem;
198
+ color: rgb(33, 37, 41);
199
+ padding: 0 16px;
200
+ }
201
+ div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child:hover {
202
+ color: #16181b;
203
+ background-color: #f8f9fa;
204
+ }
205
+ div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child:after {
206
+ position: relative;
207
+ left: -3px;
208
+ }
209
+ div.dt-buttons span.dt-button-spacer.empty {
210
+ margin: 1px;
211
+ }
212
+ div.dt-buttons span.dt-button-spacer.bar:empty {
213
+ height: inherit;
214
+ }
215
+ div.dt-buttons .btn.processing {
208
216
  color: rgba(0, 0, 0, 0.2);
209
217
  }
210
- div.dt-buttons button.btn.processing:after,
211
- div.dt-buttons div.btn.processing:after,
212
- div.dt-buttons a.btn.processing:after {
218
+ div.dt-buttons .btn.processing:after {
213
219
  position: absolute;
214
220
  top: 50%;
215
221
  left: 50%;
@@ -218,8 +224,8 @@ div.dt-buttons a.btn.processing:after {
218
224
  margin: -8px 0 0 -8px;
219
225
  box-sizing: border-box;
220
226
  display: block;
221
- content: ' ';
222
- border: 2px solid #282828;
227
+ content: " ";
228
+ border: 2px solid rgb(40, 40, 40);
223
229
  border-radius: 50%;
224
230
  border-left-color: transparent;
225
231
  border-right-color: transparent;
@@ -229,3 +235,24 @@ div.dt-buttons a.btn.processing:after {
229
235
  -webkit-animation: dtb-spinner 1500ms infinite linear;
230
236
  -moz-animation: dtb-spinner 1500ms infinite linear;
231
237
  }
238
+
239
+ div.dt-button-background {
240
+ position: fixed;
241
+ top: 0;
242
+ left: 0;
243
+ width: 100%;
244
+ height: 100%;
245
+ z-index: 999;
246
+ }
247
+
248
+ @media screen and (max-width: 767px) {
249
+ div.dt-buttons {
250
+ float: none;
251
+ width: 100%;
252
+ text-align: center;
253
+ margin-bottom: 0.5em;
254
+ }
255
+ div.dt-buttons a.btn {
256
+ float: none;
257
+ }
258
+ }