effective_datatables 4.17.4 → 4.18.0

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.
Files changed (20) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/dataTables/UPGRADE.md +17 -0
  3. data/app/assets/javascripts/dataTables/buttons/buttons.bootstrap4.js +73 -19
  4. data/app/assets/javascripts/dataTables/buttons/buttons.colVis.js +166 -120
  5. data/app/assets/javascripts/dataTables/buttons/buttons.html5.js +749 -667
  6. data/app/assets/javascripts/dataTables/buttons/buttons.print.js +96 -64
  7. data/app/assets/javascripts/dataTables/buttons/dataTables.buttons.js +1568 -909
  8. data/app/assets/javascripts/dataTables/dataTables.bootstrap4.js +172 -154
  9. data/app/assets/javascripts/dataTables/jquery.dataTables.js +3119 -2704
  10. data/app/assets/javascripts/dataTables/responsive/dataTables.responsive.js +707 -531
  11. data/app/assets/javascripts/dataTables/responsive/responsive.bootstrap4.js +61 -33
  12. data/app/assets/javascripts/dataTables/rowReorder/dataTables.rowReorder.js +961 -740
  13. data/app/assets/javascripts/dataTables/rowReorder/rowReorder.bootstrap4.js +50 -30
  14. data/app/assets/stylesheets/dataTables/buttons/buttons.bootstrap4.scss +178 -151
  15. data/app/assets/stylesheets/dataTables/dataTables.bootstrap4.scss +300 -81
  16. data/app/assets/stylesheets/dataTables/responsive/responsive.bootstrap4.scss +54 -71
  17. data/app/assets/stylesheets/dataTables/rowReorder/rowReorder.bootstrap4.scss +23 -4
  18. data/app/assets/stylesheets/effective_datatables/_overrides.bootstrap4.scss +81 -39
  19. data/lib/effective_datatables/version.rb +1 -1
  20. 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/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
+ }