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.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +1 -1
  3. data/app/assets/javascripts/mtl.js +1 -1
  4. data/app/assets/javascripts/mtl/dropdown.coffee +3 -2
  5. data/app/assets/javascripts/mtl/modal.coffee +6 -11
  6. data/app/assets/stylesheets/mtl/extend/_dropdown.scss +0 -1
  7. data/app/assets/stylesheets/mtl/extend/_forms.scss +13 -3
  8. data/lib/mtl/version.rb +3 -2
  9. data/package.json +1 -1
  10. data/vendor/assets/javascripts/materialize/buttons.js +181 -5
  11. data/vendor/assets/javascripts/materialize/carousel.js +1 -1
  12. data/vendor/assets/javascripts/materialize/chips.js +75 -53
  13. data/vendor/assets/javascripts/materialize/dropdown.js +20 -20
  14. data/vendor/assets/javascripts/materialize/forms.js +3 -2
  15. data/vendor/assets/javascripts/materialize/global.js +56 -3
  16. data/vendor/assets/javascripts/materialize/init.js +3 -2
  17. data/vendor/assets/javascripts/materialize/modal.js +184 -0
  18. data/vendor/assets/javascripts/materialize/parallax.js +2 -2
  19. data/vendor/assets/javascripts/materialize/scrollspy.js +6 -5
  20. data/vendor/assets/javascripts/materialize/sideNav.js +193 -175
  21. data/vendor/assets/javascripts/materialize/tabs.js +30 -14
  22. data/vendor/assets/javascripts/materialize/toasts.js +29 -28
  23. data/vendor/assets/javascripts/materialize/tooltip.js +6 -0
  24. data/vendor/assets/stylesheets/materialize/_buttons.scss +78 -8
  25. data/vendor/assets/stylesheets/materialize/_cards.scss +2 -0
  26. data/vendor/assets/stylesheets/materialize/_chips.scss +15 -6
  27. data/vendor/assets/stylesheets/materialize/_dropdown.scss +9 -1
  28. data/vendor/assets/stylesheets/materialize/_global.scss +34 -15
  29. data/vendor/assets/stylesheets/materialize/_modal.scss +1 -1
  30. data/vendor/assets/stylesheets/materialize/_navbar.scss +11 -3
  31. data/vendor/assets/stylesheets/materialize/_sideNav.scss +6 -17
  32. data/vendor/assets/stylesheets/materialize/_tabs.scss +62 -19
  33. data/vendor/assets/stylesheets/materialize/_variables.scss +82 -82
  34. data/vendor/assets/stylesheets/materialize/_waves.scss +1 -1
  35. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +13 -0
  36. data/vendor/assets/stylesheets/materialize/forms/_radio-buttons.scss +0 -2
  37. data/vendor/assets/stylesheets/materialize/forms/_select.scss +6 -1
  38. metadata +3 -3
  39. 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 = $('<div class="drag-target"></div>');
23
- $('body').append(dragTarget);
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
- function removeMenu(restoreNav) {
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
- dragTarget.on('click', function(){
133
- if (menuOut) {
134
- removeMenu();
135
- }
136
- });
138
+ if (options.draggable) {
139
+ $dragTarget.on('click', function(){
140
+ if (menuOut) {
141
+ removeMenu();
142
+ }
143
+ });
137
144
 
138
- dragTarget.hammer({
139
- prevent_default: false
140
- }).bind('pan', function(e) {
145
+ $dragTarget.hammer({
146
+ prevent_default: false
147
+ }).bind('pan', function(e) {
141
148
 
142
- if (e.gesture.pointerType == "touch") {
149
+ if (e.gesture.pointerType == "touch") {
143
150
 
144
- var direction = e.gesture.direction;
145
- var x = e.gesture.center.x;
146
- var y = e.gesture.center.y;
147
- var velocityX = e.gesture.velocityX;
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
- // Disable Scrolling
150
- var $body = $('body');
151
- var oldWidth = $body.innerWidth();
152
- $body.css('overflow', 'hidden');
153
- $body.width(oldWidth);
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
- // If overlay does not exist, create one and if it is clicked, close menu
156
- if ($('#sidenav-overlay').length === 0) {
157
- var overlay = $('<div id="sidenav-overlay"></div>');
158
- overlay.css('opacity', 0).click( function(){
159
- removeMenu();
160
- });
161
- $('body').append(overlay);
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
- // Keep within boundaries
165
- if (options.edge === 'left') {
166
- if (x > options.menuWidth) { x = options.menuWidth; }
167
- else if (x < 0) { x = 0; }
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
- if (options.edge === 'left') {
171
- // Left Direction
172
- if (x < (options.menuWidth / 2)) { menuOut = false; }
173
- // Right Direction
174
- else if (x >= (options.menuWidth / 2)) { menuOut = true; }
175
- menu_id.css('transform', 'translateX(' + (x - options.menuWidth) + 'px)');
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
- else {
178
- // Left Direction
179
- if (x < (window.innerWidth - options.menuWidth / 2)) {
180
- menuOut = true;
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
- menu_id.css('transform', 'translateX(' + rightPos + 'px)');
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
- }).bind('panend', function(e) {
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
- if (e.gesture.pointerType == "touch") {
210
- var velocityX = e.gesture.velocityX;
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
- // If velocityX <= 0.3 then the user is flinging the menu closed so ignore menuOut
224
- if ((menuOut && velocityX <= 0.3) || velocityX < -0.5) {
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
- if ((menuOut && velocityX >= -0.3) || velocityX > 0.5) {
251
- // Return menu to open
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
- else {
287
-
288
- // Disable Scrolling
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
- var overlay = $('<div id="sidenav-overlay"></div>');
307
- overlay.css('opacity', 0)
308
- .click(function(){
309
- menuOut = false;
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
- removeMenu();
312
- overlay.velocity({opacity: 0}, {duration: 300, queue: false, easing: 'easeOutQuad',
313
- complete: function() {
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
- return false;
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');