mtl 1.0.3 → 1.1.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.
- checksums.yaml +4 -4
- data/Gemfile +1 -1
- data/app/assets/javascripts/mtl.js +1 -1
- data/app/assets/javascripts/mtl/dropdown.coffee +3 -2
- data/app/assets/javascripts/mtl/modal.coffee +6 -11
- data/app/assets/stylesheets/mtl/extend/_dropdown.scss +0 -1
- data/app/assets/stylesheets/mtl/extend/_forms.scss +13 -3
- data/lib/mtl/version.rb +3 -2
- data/package.json +1 -1
- data/vendor/assets/javascripts/materialize/buttons.js +181 -5
- data/vendor/assets/javascripts/materialize/carousel.js +1 -1
- data/vendor/assets/javascripts/materialize/chips.js +75 -53
- data/vendor/assets/javascripts/materialize/dropdown.js +20 -20
- data/vendor/assets/javascripts/materialize/forms.js +3 -2
- data/vendor/assets/javascripts/materialize/global.js +56 -3
- data/vendor/assets/javascripts/materialize/init.js +3 -2
- data/vendor/assets/javascripts/materialize/modal.js +184 -0
- data/vendor/assets/javascripts/materialize/parallax.js +2 -2
- data/vendor/assets/javascripts/materialize/scrollspy.js +6 -5
- data/vendor/assets/javascripts/materialize/sideNav.js +193 -175
- data/vendor/assets/javascripts/materialize/tabs.js +30 -14
- data/vendor/assets/javascripts/materialize/toasts.js +29 -28
- data/vendor/assets/javascripts/materialize/tooltip.js +6 -0
- data/vendor/assets/stylesheets/materialize/_buttons.scss +78 -8
- data/vendor/assets/stylesheets/materialize/_cards.scss +2 -0
- data/vendor/assets/stylesheets/materialize/_chips.scss +15 -6
- data/vendor/assets/stylesheets/materialize/_dropdown.scss +9 -1
- data/vendor/assets/stylesheets/materialize/_global.scss +34 -15
- data/vendor/assets/stylesheets/materialize/_modal.scss +1 -1
- data/vendor/assets/stylesheets/materialize/_navbar.scss +11 -3
- data/vendor/assets/stylesheets/materialize/_sideNav.scss +6 -17
- data/vendor/assets/stylesheets/materialize/_tabs.scss +62 -19
- data/vendor/assets/stylesheets/materialize/_variables.scss +82 -82
- data/vendor/assets/stylesheets/materialize/_waves.scss +1 -1
- data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +13 -0
- data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +0 -2
- data/vendor/assets/stylesheets/materialize/forms/_select.scss +6 -1
- metadata +3 -3
- data/vendor/assets/javascripts/materialize/leanModal.js +0 -192
@@ -5,7 +5,8 @@
|
|
5
5
|
var defaults = {
|
6
6
|
menuWidth: 300,
|
7
7
|
edge: 'left',
|
8
|
-
closeOnClick: false
|
8
|
+
closeOnClick: false,
|
9
|
+
draggable: true
|
9
10
|
};
|
10
11
|
options = $.extend(defaults, options);
|
11
12
|
|
@@ -19,17 +20,22 @@
|
|
19
20
|
}
|
20
21
|
|
21
22
|
// Add Touch Area
|
22
|
-
var dragTarget
|
23
|
-
|
23
|
+
var $dragTarget;
|
24
|
+
if (options.draggable) {
|
25
|
+
$dragTarget = $('<div class="drag-target"></div>').attr('data-sidenav', $this.attr('data-activates'));
|
26
|
+
$('body').append($dragTarget);
|
27
|
+
} else {
|
28
|
+
$dragTarget = $();
|
29
|
+
}
|
24
30
|
|
25
31
|
if (options.edge == 'left') {
|
26
32
|
menu_id.css('transform', 'translateX(-100%)');
|
27
|
-
dragTarget.css({'left': 0}); // Add Touch Area
|
33
|
+
$dragTarget.css({'left': 0}); // Add Touch Area
|
28
34
|
}
|
29
35
|
else {
|
30
36
|
menu_id.addClass('right-aligned') // Change text-alignment to right
|
31
37
|
.css('transform', 'translateX(100%)');
|
32
|
-
dragTarget.css({'right': 0}); // Add Touch Area
|
38
|
+
$dragTarget.css({'right': 0}); // Add Touch Area
|
33
39
|
}
|
34
40
|
|
35
41
|
// If fixed sidenav, bring menu out
|
@@ -72,7 +78,7 @@
|
|
72
78
|
});
|
73
79
|
}
|
74
80
|
|
75
|
-
|
81
|
+
var removeMenu = function(restoreNav) {
|
76
82
|
panning = false;
|
77
83
|
menuOut = false;
|
78
84
|
// Reenable scrolling
|
@@ -88,7 +94,7 @@
|
|
88
94
|
} });
|
89
95
|
if (options.edge === 'left') {
|
90
96
|
// Reset phantom div
|
91
|
-
dragTarget.css({width: '', right: '', left: '0'});
|
97
|
+
$dragTarget.css({width: '', right: '', left: '0'});
|
92
98
|
menu_id.velocity(
|
93
99
|
{'translateX': '-100%'},
|
94
100
|
{ duration: 200,
|
@@ -106,7 +112,7 @@
|
|
106
112
|
}
|
107
113
|
else {
|
108
114
|
// Reset phantom div
|
109
|
-
dragTarget.css({width: '', right: '0', left: ''});
|
115
|
+
$dragTarget.css({width: '', right: '0', left: ''});
|
110
116
|
menu_id.velocity(
|
111
117
|
{'translateX': '100%'},
|
112
118
|
{ duration: 200,
|
@@ -121,7 +127,7 @@
|
|
121
127
|
}
|
122
128
|
});
|
123
129
|
}
|
124
|
-
}
|
130
|
+
};
|
125
131
|
|
126
132
|
|
127
133
|
|
@@ -129,206 +135,218 @@
|
|
129
135
|
var panning = false;
|
130
136
|
var menuOut = false;
|
131
137
|
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
138
|
+
if (options.draggable) {
|
139
|
+
$dragTarget.on('click', function(){
|
140
|
+
if (menuOut) {
|
141
|
+
removeMenu();
|
142
|
+
}
|
143
|
+
});
|
137
144
|
|
138
|
-
|
139
|
-
|
140
|
-
|
145
|
+
$dragTarget.hammer({
|
146
|
+
prevent_default: false
|
147
|
+
}).bind('pan', function(e) {
|
141
148
|
|
142
|
-
|
149
|
+
if (e.gesture.pointerType == "touch") {
|
143
150
|
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
151
|
+
var direction = e.gesture.direction;
|
152
|
+
var x = e.gesture.center.x;
|
153
|
+
var y = e.gesture.center.y;
|
154
|
+
var velocityX = e.gesture.velocityX;
|
148
155
|
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
156
|
+
// Disable Scrolling
|
157
|
+
var $body = $('body');
|
158
|
+
var $overlay = $('#sidenav-overlay');
|
159
|
+
var oldWidth = $body.innerWidth();
|
160
|
+
$body.css('overflow', 'hidden');
|
161
|
+
$body.width(oldWidth);
|
154
162
|
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
+
// If overlay does not exist, create one and if it is clicked, close menu
|
164
|
+
if ($overlay.length === 0) {
|
165
|
+
$overlay = $('<div id="sidenav-overlay"></div>');
|
166
|
+
$overlay.css('opacity', 0).click( function(){
|
167
|
+
removeMenu();
|
168
|
+
});
|
169
|
+
$('body').append($overlay);
|
170
|
+
}
|
163
171
|
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
172
|
+
// Keep within boundaries
|
173
|
+
if (options.edge === 'left') {
|
174
|
+
if (x > options.menuWidth) { x = options.menuWidth; }
|
175
|
+
else if (x < 0) { x = 0; }
|
176
|
+
}
|
169
177
|
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
178
|
+
if (options.edge === 'left') {
|
179
|
+
// Left Direction
|
180
|
+
if (x < (options.menuWidth / 2)) { menuOut = false; }
|
181
|
+
// Right Direction
|
182
|
+
else if (x >= (options.menuWidth / 2)) { menuOut = true; }
|
183
|
+
menu_id.css('transform', 'translateX(' + (x - options.menuWidth) + 'px)');
|
184
|
+
}
|
185
|
+
else {
|
186
|
+
// Left Direction
|
187
|
+
if (x < (window.innerWidth - options.menuWidth / 2)) {
|
188
|
+
menuOut = true;
|
189
|
+
}
|
190
|
+
// Right Direction
|
191
|
+
else if (x >= (window.innerWidth - options.menuWidth / 2)) {
|
192
|
+
menuOut = false;
|
193
|
+
}
|
194
|
+
var rightPos = (x - options.menuWidth / 2);
|
195
|
+
if (rightPos < 0) {
|
196
|
+
rightPos = 0;
|
197
|
+
}
|
198
|
+
|
199
|
+
menu_id.css('transform', 'translateX(' + rightPos + 'px)');
|
200
|
+
}
|
201
|
+
|
202
|
+
|
203
|
+
// Percentage overlay
|
204
|
+
var overlayPerc;
|
205
|
+
if (options.edge === 'left') {
|
206
|
+
overlayPerc = x / options.menuWidth;
|
207
|
+
$overlay.velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
|
208
|
+
}
|
209
|
+
else {
|
210
|
+
overlayPerc = Math.abs((x - window.innerWidth) / options.menuWidth);
|
211
|
+
$overlay.velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
|
212
|
+
}
|
176
213
|
}
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
214
|
+
|
215
|
+
}).bind('panend', function(e) {
|
216
|
+
|
217
|
+
if (e.gesture.pointerType == "touch") {
|
218
|
+
var $overlay = $('<div id="sidenav-overlay"></div>');
|
219
|
+
var velocityX = e.gesture.velocityX;
|
220
|
+
var x = e.gesture.center.x;
|
221
|
+
var leftPos = x - options.menuWidth;
|
222
|
+
var rightPos = x - options.menuWidth / 2;
|
223
|
+
if (leftPos > 0 ) {
|
224
|
+
leftPos = 0;
|
181
225
|
}
|
182
|
-
// Right Direction
|
183
|
-
else if (x >= (window.innerWidth - options.menuWidth / 2)) {
|
184
|
-
menuOut = false;
|
185
|
-
}
|
186
|
-
var rightPos = (x - options.menuWidth / 2);
|
187
226
|
if (rightPos < 0) {
|
188
227
|
rightPos = 0;
|
189
228
|
}
|
229
|
+
panning = false;
|
190
230
|
|
191
|
-
|
192
|
-
|
231
|
+
if (options.edge === 'left') {
|
232
|
+
// If velocityX <= 0.3 then the user is flinging the menu closed so ignore menuOut
|
233
|
+
if ((menuOut && velocityX <= 0.3) || velocityX < -0.5) {
|
234
|
+
// Return menu to open
|
235
|
+
if (leftPos !== 0) {
|
236
|
+
menu_id.velocity({'translateX': [0, leftPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
237
|
+
}
|
193
238
|
|
239
|
+
$overlay.velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
240
|
+
$dragTarget.css({width: '50%', right: 0, left: ''});
|
241
|
+
menuOut = true;
|
242
|
+
}
|
243
|
+
else if (!menuOut || velocityX > 0.3) {
|
244
|
+
// Enable Scrolling
|
245
|
+
$('body').css({
|
246
|
+
overflow: '',
|
247
|
+
width: ''
|
248
|
+
});
|
249
|
+
// Slide menu closed
|
250
|
+
menu_id.velocity({'translateX': [-1 * options.menuWidth - 10, leftPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
|
251
|
+
$overlay.velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
|
252
|
+
complete: function () {
|
253
|
+
$(this).remove();
|
254
|
+
}});
|
255
|
+
$dragTarget.css({width: '10px', right: '', left: 0});
|
256
|
+
}
|
257
|
+
}
|
258
|
+
else {
|
259
|
+
if ((menuOut && velocityX >= -0.3) || velocityX > 0.5) {
|
260
|
+
// Return menu to open
|
261
|
+
if (rightPos !== 0) {
|
262
|
+
menu_id.velocity({'translateX': [0, rightPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
263
|
+
}
|
264
|
+
|
265
|
+
$overlay.velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
266
|
+
$dragTarget.css({width: '50%', right: '', left: 0});
|
267
|
+
menuOut = true;
|
268
|
+
}
|
269
|
+
else if (!menuOut || velocityX < -0.3) {
|
270
|
+
// Enable Scrolling
|
271
|
+
$('body').css({
|
272
|
+
overflow: '',
|
273
|
+
width: ''
|
274
|
+
});
|
275
|
+
|
276
|
+
// Slide menu closed
|
277
|
+
menu_id.velocity({'translateX': [options.menuWidth + 10, rightPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
|
278
|
+
$overlay.velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
|
279
|
+
complete: function () {
|
280
|
+
$(this).remove();
|
281
|
+
}});
|
282
|
+
$dragTarget.css({width: '10px', right: 0, left: ''});
|
283
|
+
}
|
284
|
+
}
|
194
285
|
|
195
|
-
// Percentage overlay
|
196
|
-
var overlayPerc;
|
197
|
-
if (options.edge === 'left') {
|
198
|
-
overlayPerc = x / options.menuWidth;
|
199
|
-
$('#sidenav-overlay').velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
|
200
|
-
}
|
201
|
-
else {
|
202
|
-
overlayPerc = Math.abs((x - window.innerWidth) / options.menuWidth);
|
203
|
-
$('#sidenav-overlay').velocity({opacity: overlayPerc }, {duration: 10, queue: false, easing: 'easeOutQuad'});
|
204
286
|
}
|
287
|
+
});
|
288
|
+
}
|
289
|
+
|
290
|
+
$this.click(function() {
|
291
|
+
if (menuOut === true) {
|
292
|
+
menuOut = false;
|
293
|
+
panning = false;
|
294
|
+
removeMenu();
|
205
295
|
}
|
296
|
+
else {
|
206
297
|
|
207
|
-
|
298
|
+
// Disable Scrolling
|
299
|
+
var $body = $('body');
|
300
|
+
var $overlay = $('<div id="sidenav-overlay"></div>');
|
301
|
+
var oldWidth = $body.innerWidth();
|
302
|
+
$body.css('overflow', 'hidden');
|
303
|
+
$body.width(oldWidth);
|
208
304
|
|
209
|
-
|
210
|
-
|
211
|
-
var x = e.gesture.center.x;
|
212
|
-
var leftPos = x - options.menuWidth;
|
213
|
-
var rightPos = x - options.menuWidth / 2;
|
214
|
-
if (leftPos > 0 ) {
|
215
|
-
leftPos = 0;
|
216
|
-
}
|
217
|
-
if (rightPos < 0) {
|
218
|
-
rightPos = 0;
|
219
|
-
}
|
220
|
-
panning = false;
|
305
|
+
// Push current drag target on top of DOM tree
|
306
|
+
$('body').append($dragTarget);
|
221
307
|
|
222
308
|
if (options.edge === 'left') {
|
223
|
-
|
224
|
-
|
225
|
-
// Return menu to open
|
226
|
-
if (leftPos !== 0) {
|
227
|
-
menu_id.velocity({'translateX': [0, leftPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
228
|
-
}
|
229
|
-
|
230
|
-
$('#sidenav-overlay').velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
231
|
-
dragTarget.css({width: '50%', right: 0, left: ''});
|
232
|
-
menuOut = true;
|
233
|
-
}
|
234
|
-
else if (!menuOut || velocityX > 0.3) {
|
235
|
-
// Enable Scrolling
|
236
|
-
$('body').css({
|
237
|
-
overflow: '',
|
238
|
-
width: ''
|
239
|
-
});
|
240
|
-
// Slide menu closed
|
241
|
-
menu_id.velocity({'translateX': [-1 * options.menuWidth - 10, leftPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
|
242
|
-
$('#sidenav-overlay').velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
|
243
|
-
complete: function () {
|
244
|
-
$(this).remove();
|
245
|
-
}});
|
246
|
-
dragTarget.css({width: '10px', right: '', left: 0});
|
247
|
-
}
|
309
|
+
$dragTarget.css({width: '50%', right: 0, left: ''});
|
310
|
+
menu_id.velocity({'translateX': [0, -1 * options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
248
311
|
}
|
249
312
|
else {
|
250
|
-
|
251
|
-
|
252
|
-
if (rightPos !== 0) {
|
253
|
-
menu_id.velocity({'translateX': [0, rightPos]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
254
|
-
}
|
255
|
-
|
256
|
-
$('#sidenav-overlay').velocity({opacity: 1 }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
257
|
-
dragTarget.css({width: '50%', right: '', left: 0});
|
258
|
-
menuOut = true;
|
259
|
-
}
|
260
|
-
else if (!menuOut || velocityX < -0.3) {
|
261
|
-
// Enable Scrolling
|
262
|
-
$('body').css({
|
263
|
-
overflow: '',
|
264
|
-
width: ''
|
265
|
-
});
|
266
|
-
|
267
|
-
// Slide menu closed
|
268
|
-
menu_id.velocity({'translateX': [options.menuWidth + 10, rightPos]}, {duration: 200, queue: false, easing: 'easeOutQuad'});
|
269
|
-
$('#sidenav-overlay').velocity({opacity: 0 }, {duration: 200, queue: false, easing: 'easeOutQuad',
|
270
|
-
complete: function () {
|
271
|
-
$(this).remove();
|
272
|
-
}});
|
273
|
-
dragTarget.css({width: '10px', right: 0, left: ''});
|
274
|
-
}
|
313
|
+
$dragTarget.css({width: '50%', right: '', left: 0});
|
314
|
+
menu_id.velocity({'translateX': [0, options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
275
315
|
}
|
276
316
|
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
$this.click(function() {
|
281
|
-
if (menuOut === true) {
|
317
|
+
$overlay.css('opacity', 0)
|
318
|
+
.click(function(){
|
282
319
|
menuOut = false;
|
283
320
|
panning = false;
|
284
321
|
removeMenu();
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
var $body = $('body');
|
290
|
-
var oldWidth = $body.innerWidth();
|
291
|
-
$body.css('overflow', 'hidden');
|
292
|
-
$body.width(oldWidth);
|
293
|
-
|
294
|
-
// Push current drag target on top of DOM tree
|
295
|
-
$('body').append(dragTarget);
|
296
|
-
|
297
|
-
if (options.edge === 'left') {
|
298
|
-
dragTarget.css({width: '50%', right: 0, left: ''});
|
299
|
-
menu_id.velocity({'translateX': [0, -1 * options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
300
|
-
}
|
301
|
-
else {
|
302
|
-
dragTarget.css({width: '50%', right: '', left: 0});
|
303
|
-
menu_id.velocity({'translateX': [0, options.menuWidth]}, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
304
|
-
}
|
322
|
+
$overlay.velocity({opacity: 0}, {duration: 300, queue: false, easing: 'easeOutQuad',
|
323
|
+
complete: function() {
|
324
|
+
$(this).remove();
|
325
|
+
} });
|
305
326
|
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
327
|
+
});
|
328
|
+
$('body').append($overlay);
|
329
|
+
$overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
|
330
|
+
complete: function () {
|
331
|
+
menuOut = true;
|
310
332
|
panning = false;
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
$(this).remove();
|
315
|
-
} });
|
316
|
-
|
317
|
-
});
|
318
|
-
$('body').append(overlay);
|
319
|
-
overlay.velocity({opacity: 1}, {duration: 300, queue: false, easing: 'easeOutQuad',
|
320
|
-
complete: function () {
|
321
|
-
menuOut = true;
|
322
|
-
panning = false;
|
323
|
-
}
|
324
|
-
});
|
325
|
-
}
|
333
|
+
}
|
334
|
+
});
|
335
|
+
}
|
326
336
|
|
327
|
-
|
328
|
-
|
337
|
+
return false;
|
338
|
+
});
|
329
339
|
});
|
330
340
|
|
331
341
|
|
342
|
+
},
|
343
|
+
destroy: function () {
|
344
|
+
var $overlay = $('#sidenav-overlay');
|
345
|
+
var $dragTarget = $('.drag-target[data-sidenav="' + $(this).attr('data-activates') + '"]');
|
346
|
+
$overlay.trigger('click');
|
347
|
+
$dragTarget.remove();
|
348
|
+
$(this).off('click');
|
349
|
+
$overlay.remove();
|
332
350
|
},
|
333
351
|
show : function() {
|
334
352
|
this.trigger('click');
|