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
@@ -37,7 +37,7 @@
37
37
 
38
38
  this.each(function(){
39
39
  var origin = $(this);
40
- var options = $.extend({}, defaults, options);
40
+ var curr_options = $.extend({}, defaults, options);
41
41
  var isFocused = false;
42
42
 
43
43
  // Dropdown menu
@@ -45,21 +45,21 @@
45
45
 
46
46
  function updateOptions() {
47
47
  if (origin.data('induration') !== undefined)
48
- options.inDuration = origin.data('induration');
48
+ curr_options.inDuration = origin.data('induration');
49
49
  if (origin.data('outduration') !== undefined)
50
- options.outDuration = origin.data('outduration');
50
+ curr_options.outDuration = origin.data('outduration');
51
51
  if (origin.data('constrainwidth') !== undefined)
52
- options.constrain_width = origin.data('constrainwidth');
52
+ curr_options.constrain_width = origin.data('constrainwidth');
53
53
  if (origin.data('hover') !== undefined)
54
- options.hover = origin.data('hover');
54
+ curr_options.hover = origin.data('hover');
55
55
  if (origin.data('gutter') !== undefined)
56
- options.gutter = origin.data('gutter');
56
+ curr_options.gutter = origin.data('gutter');
57
57
  if (origin.data('beloworigin') !== undefined)
58
- options.belowOrigin = origin.data('beloworigin');
58
+ curr_options.belowOrigin = origin.data('beloworigin');
59
59
  if (origin.data('alignment') !== undefined)
60
- options.alignment = origin.data('alignment');
60
+ curr_options.alignment = origin.data('alignment');
61
61
  if (origin.data('stoppropagation') !== undefined)
62
- options.stopPropagation = origin.data('stoppropagation');
62
+ curr_options.stopPropagation = origin.data('stoppropagation');
63
63
  }
64
64
 
65
65
  updateOptions();
@@ -85,7 +85,7 @@
85
85
  origin.addClass('active');
86
86
 
87
87
  // Constrain width
88
- if (options.constrain_width === true) {
88
+ if (curr_options.constrain_width === true) {
89
89
  activates.css('width', origin.outerWidth());
90
90
 
91
91
  } else {
@@ -97,13 +97,13 @@
97
97
  var originHeight = origin.innerHeight();
98
98
  var offsetLeft = origin.offset().left;
99
99
  var offsetTop = origin.offset().top - $(window).scrollTop();
100
- var currAlignment = options.alignment;
100
+ var currAlignment = curr_options.alignment;
101
101
  var gutterSpacing = 0;
102
102
  var leftPosition = 0;
103
103
 
104
104
  // Below Origin
105
105
  var verticalOffset = 0;
106
- if (options.belowOrigin === true) {
106
+ if (curr_options.belowOrigin === true) {
107
107
  verticalOffset = originHeight;
108
108
  }
109
109
 
@@ -146,12 +146,12 @@
146
146
 
147
147
  // Handle edge alignment
148
148
  if (currAlignment === 'left') {
149
- gutterSpacing = options.gutter;
149
+ gutterSpacing = curr_options.gutter;
150
150
  leftPosition = origin.position().left + gutterSpacing;
151
151
  }
152
152
  else if (currAlignment === 'right') {
153
153
  var offsetRight = origin.position().left + origin.outerWidth() - activates.outerWidth();
154
- gutterSpacing = -options.gutter;
154
+ gutterSpacing = -curr_options.gutter;
155
155
  leftPosition = offsetRight + gutterSpacing;
156
156
  }
157
157
 
@@ -167,26 +167,26 @@
167
167
  activates.stop(true, true).css('opacity', 0)
168
168
  .slideDown({
169
169
  queue: false,
170
- duration: options.inDuration,
170
+ duration: curr_options.inDuration,
171
171
  easing: 'easeOutCubic',
172
172
  complete: function() {
173
173
  $(this).css('height', '');
174
174
  }
175
175
  })
176
- .animate( {opacity: 1}, {queue: false, duration: options.inDuration, easing: 'easeOutSine'});
176
+ .animate( {opacity: 1}, {queue: false, duration: curr_options.inDuration, easing: 'easeOutSine'});
177
177
  }
178
178
 
179
179
  function hideDropdown() {
180
180
  // Check for simultaneous focus and click events.
181
181
  isFocused = false;
182
- activates.fadeOut(options.outDuration);
182
+ activates.fadeOut(curr_options.outDuration);
183
183
  activates.removeClass('active');
184
184
  origin.removeClass('active');
185
- setTimeout(function() { activates.css('max-height', ''); }, options.outDuration);
185
+ setTimeout(function() { activates.css('max-height', ''); }, curr_options.outDuration);
186
186
  }
187
187
 
188
188
  // Hover
189
- if (options.hover) {
189
+ if (curr_options.hover) {
190
190
  var open = false;
191
191
  origin.unbind('click.' + origin.attr('id'));
192
192
  // Hover handler to show dropdown
@@ -225,7 +225,7 @@
225
225
  !origin.hasClass('active') &&
226
226
  ($(e.target).closest('.dropdown-content').length === 0)) {
227
227
  e.preventDefault(); // Prevents button click from moving window
228
- if (options.stopPropagation) {
228
+ if (curr_options.stopPropagation) {
229
229
  e.stopPropagation();
230
230
  }
231
231
  placeDropdown('click');
@@ -350,6 +350,7 @@
350
350
  // Set input value
351
351
  $autocomplete.on('click', 'li', function () {
352
352
  $input.val($(this).text().trim());
353
+ $input.trigger('change');
353
354
  $autocomplete.empty();
354
355
  });
355
356
  }
@@ -413,9 +414,9 @@
413
414
 
414
415
  // Check for multiple type.
415
416
  if (type === 'multiple') {
416
- options.append($('<li class="' + disabledClass + '"><img src="' + icon_url + '"' + classString + '><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'));
417
+ options.append($('<li class="' + disabledClass + '"><img alt="" src="' + icon_url + '"' + classString + '><span><input type="checkbox"' + disabledClass + '/><label></label>' + option.html() + '</span></li>'));
417
418
  } else {
418
- options.append($('<li class="' + disabledClass + optgroupClass + '"><img src="' + icon_url + '"' + classString + '><span>' + option.html() + '</span></li>'));
419
+ options.append($('<li class="' + disabledClass + optgroupClass + '"><img alt="" src="' + icon_url + '"' + classString + '><span>' + option.html() + '</span></li>'));
419
420
  }
420
421
  return true;
421
422
  }
@@ -8,6 +8,49 @@
8
8
  })(window);
9
9
 
10
10
 
11
+ /*
12
+ * raf.js
13
+ * https://github.com/ngryman/raf.js
14
+ *
15
+ * original requestAnimationFrame polyfill by Erik Möller
16
+ * inspired from paul_irish gist and post
17
+ *
18
+ * Copyright (c) 2013 ngryman
19
+ * Licensed under the MIT license.
20
+ */
21
+ (function(window) {
22
+ var lastTime = 0,
23
+ vendors = ['webkit', 'moz'],
24
+ requestAnimationFrame = window.requestAnimationFrame,
25
+ cancelAnimationFrame = window.cancelAnimationFrame,
26
+ i = vendors.length;
27
+
28
+ // try to un-prefix existing raf
29
+ while (--i >= 0 && !requestAnimationFrame) {
30
+ requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
31
+ cancelAnimationFrame = window[vendors[i] + 'CancelRequestAnimationFrame'];
32
+ }
33
+
34
+ // polyfill with setTimeout fallback
35
+ // heavily inspired from @darius gist mod: https://gist.github.com/paulirish/1579671#comment-837945
36
+ if (!requestAnimationFrame || !cancelAnimationFrame) {
37
+ requestAnimationFrame = function(callback) {
38
+ var now = +Date.now(),
39
+ nextTime = Math.max(lastTime + 16, now);
40
+ return setTimeout(function() {
41
+ callback(lastTime = nextTime);
42
+ }, nextTime - now);
43
+ };
44
+
45
+ cancelAnimationFrame = clearTimeout;
46
+ }
47
+
48
+ // export to window
49
+ window.requestAnimationFrame = requestAnimationFrame;
50
+ window.cancelAnimationFrame = cancelAnimationFrame;
51
+ }(window));
52
+
53
+
11
54
  // Unique ID
12
55
  Materialize.guid = (function() {
13
56
  function s4() {
@@ -21,6 +64,15 @@ Materialize.guid = (function() {
21
64
  };
22
65
  })();
23
66
 
67
+ /**
68
+ * Escapes hash from special characters
69
+ * @param {string} hash String returned from this.hash
70
+ * @returns {string}
71
+ */
72
+ Materialize.escapeHash = function(hash) {
73
+ return hash.replace( /(:|\.|\[|\]|,|=)/g, "\\$1" );
74
+ };
75
+
24
76
  Materialize.elementOrParentIsFixed = function(element) {
25
77
  var $element = $(element);
26
78
  var $checkElements = $element.add($element.parents());
@@ -35,11 +87,12 @@ Materialize.elementOrParentIsFixed = function(element) {
35
87
  };
36
88
 
37
89
  // Velocity has conflicts when loaded with jQuery, this will check for it
90
+ // First, check if in noConflict mode
38
91
  var Vel;
39
- if ($) {
40
- Vel = $.Velocity;
41
- } else if (jQuery) {
92
+ if (jQuery) {
42
93
  Vel = jQuery.Velocity;
94
+ } else if ($) {
95
+ Vel = $.Velocity;
43
96
  } else {
44
97
  Vel = Velocity;
45
98
  }
@@ -142,7 +142,7 @@
142
142
  $('.carousel').carousel();
143
143
  $('.slider').slider({full_width: true});
144
144
  $('.parallax').parallax();
145
- $('.modal-trigger').leanModal();
145
+ $('.modal').modal();
146
146
  $('.scrollspy').scrollSpy();
147
147
  $('.button-collapse').sideNav({'edge': 'left'});
148
148
  $('.datepicker').pickadate({selectYears: 20});
@@ -151,6 +151,8 @@
151
151
  data: {"Apple": null, "Microsoft": null, "Google": 'http://placehold.it/250x250'}
152
152
  });
153
153
 
154
+ $('.chips').material_chip();
155
+
154
156
  $('.chips-initial').material_chip({
155
157
  readOnly: true,
156
158
  data: [{
@@ -167,7 +169,6 @@
167
169
  secondaryPlaceholder: '+Tag',
168
170
  });
169
171
 
170
- $('.chips').material_chip();
171
172
 
172
173
  }); // end of document ready
173
174
  })(jQuery); // end of jQuery name space
@@ -0,0 +1,184 @@
1
+ (function($) {
2
+ var _stack = 0,
3
+ _lastID = 0,
4
+ _generateID = function() {
5
+ _lastID++;
6
+ return 'materialize-modal-overlay-' + _lastID;
7
+ };
8
+
9
+ var methods = {
10
+ init : function(options) {
11
+ var defaults = {
12
+ opacity: 0.5,
13
+ in_duration: 350,
14
+ out_duration: 250,
15
+ ready: undefined,
16
+ complete: undefined,
17
+ dismissible: true,
18
+ starting_top: '4%',
19
+ ending_top: '10%'
20
+ };
21
+
22
+ // Override defaults
23
+ options = $.extend(defaults, options);
24
+
25
+ return this.each(function() {
26
+ var $modal = $(this);
27
+ var modal_id = $(this).attr("id") || '#' + $(this).data('target');
28
+
29
+ var closeModal = function() {
30
+ var overlayID = $modal.data('overlay-id');
31
+ var $overlay = $('#' + overlayID);
32
+ $modal.removeClass('open');
33
+
34
+ // Enable scrolling
35
+ $('body').css({
36
+ overflow: '',
37
+ width: ''
38
+ });
39
+
40
+ $modal.find('.modal-close').off('click.close');
41
+ $(document).off('keyup.modal' + overlayID);
42
+
43
+ $overlay.velocity( { opacity: 0}, {duration: options.out_duration, queue: false, ease: "easeOutQuart"});
44
+
45
+
46
+ // Define Bottom Sheet animation
47
+ var exitVelocityOptions = {
48
+ duration: options.out_duration,
49
+ queue: false,
50
+ ease: "easeOutCubic",
51
+ // Handle modal ready callback
52
+ complete: function() {
53
+ $(this).css({display:"none"});
54
+
55
+ // Call complete callback
56
+ if (typeof(options.complete) === "function") {
57
+ options.complete.call(this, $modal);
58
+ }
59
+ $overlay.remove();
60
+ _stack--;
61
+ }
62
+ };
63
+ if ($modal.hasClass('bottom-sheet')) {
64
+ $modal.velocity({bottom: "-100%", opacity: 0}, exitVelocityOptions);
65
+ }
66
+ else {
67
+ $modal.velocity(
68
+ { top: options.starting_top, opacity: 0, scaleX: 0.7},
69
+ exitVelocityOptions
70
+ );
71
+ }
72
+ };
73
+
74
+ var openModal = function($trigger) {
75
+ var $body = $('body');
76
+ var oldWidth = $body.innerWidth();
77
+ $body.css('overflow', 'hidden');
78
+ $body.width(oldWidth);
79
+
80
+ if ($modal.hasClass('open')) {
81
+ return;
82
+ }
83
+
84
+ var overlayID = _generateID();
85
+ var $overlay = $('<div class="modal-overlay"></div>');
86
+ lStack = (++_stack);
87
+
88
+ // Store a reference of the overlay
89
+ $overlay.attr('id', overlayID).css('z-index', 1000 + lStack * 2);
90
+ $modal.data('overlay-id', overlayID).css('z-index', 1000 + lStack * 2 + 1);
91
+ $modal.addClass('open');
92
+
93
+ $("body").append($overlay);
94
+
95
+ if (options.dismissible) {
96
+ $overlay.click(function() {
97
+ closeModal();
98
+ });
99
+ // Return on ESC
100
+ $(document).on('keyup.modal' + overlayID, function(e) {
101
+ if (e.keyCode === 27) { // ESC key
102
+ closeModal();
103
+ }
104
+ });
105
+ }
106
+
107
+ $modal.find(".modal-close").on('click.close', function(e) {
108
+ closeModal();
109
+ });
110
+
111
+ $overlay.css({ display : "block", opacity : 0 });
112
+
113
+ $modal.css({
114
+ display : "block",
115
+ opacity: 0
116
+ });
117
+
118
+ $overlay.velocity({opacity: options.opacity}, {duration: options.in_duration, queue: false, ease: "easeOutCubic"});
119
+ $modal.data('associated-overlay', $overlay[0]);
120
+
121
+ // Define Bottom Sheet animation
122
+ var enterVelocityOptions = {
123
+ duration: options.in_duration,
124
+ queue: false,
125
+ ease: "easeOutCubic",
126
+ // Handle modal ready callback
127
+ complete: function() {
128
+ if (typeof(options.ready) === "function") {
129
+ options.ready.call(this, $modal, $trigger);
130
+ }
131
+ }
132
+ };
133
+ if ($modal.hasClass('bottom-sheet')) {
134
+ $modal.velocity({bottom: "0", opacity: 1}, enterVelocityOptions);
135
+ }
136
+ else {
137
+ $.Velocity.hook($modal, "scaleX", 0.7);
138
+ $modal.css({ top: options.starting_top });
139
+ $modal.velocity({top: options.ending_top, opacity: 1, scaleX: '1'}, enterVelocityOptions);
140
+ }
141
+
142
+ };
143
+
144
+ // Reset handlers
145
+ $(document).off('click.modalTrigger', 'a[href="#' + modal_id + '"], [data-target="' + modal_id + '"]');
146
+ $(this).off('openModal');
147
+ $(this).off('closeModal');
148
+
149
+ // Close Handlers
150
+ $(document).on('click.modalTrigger', 'a[href="#' + modal_id + '"], [data-target="' + modal_id + '"]', function(e) {
151
+ options.starting_top = ($(this).offset().top - $(window).scrollTop()) /1.15;
152
+ openModal($(this));
153
+ e.preventDefault();
154
+ }); // done set on click
155
+
156
+ $(this).on('openModal', function() {
157
+ var modal_id = $(this).attr("href") || '#' + $(this).data('target');
158
+ openModal();
159
+ });
160
+
161
+ $(this).on('closeModal', function() {
162
+ closeModal();
163
+ });
164
+ }); // done return
165
+ },
166
+ open : function() {
167
+ $(this).trigger('openModal');
168
+ },
169
+ close : function() {
170
+ $(this).trigger('closeModal');
171
+ }
172
+ };
173
+
174
+ $.fn.modal = function(methodOrOptions) {
175
+ if ( methods[methodOrOptions] ) {
176
+ return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
177
+ } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
178
+ // Default to "init"
179
+ return methods.init.apply( this, arguments );
180
+ } else {
181
+ $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.modal' );
182
+ }
183
+ };
184
+ })(jQuery);
@@ -39,7 +39,7 @@
39
39
  $this.children("img").one("load", function() {
40
40
  updateParallax(true);
41
41
  }).each(function() {
42
- if(this.complete) $(this).load();
42
+ if (this.complete) $(this).trigger("load");
43
43
  });
44
44
 
45
45
  $(window).scroll(function() {
@@ -55,4 +55,4 @@
55
55
  });
56
56
 
57
57
  };
58
- }( jQuery ));
58
+ }( jQuery ));
@@ -60,7 +60,7 @@
60
60
  /**
61
61
  * Called when the user scrolls the window
62
62
  */
63
- function onScroll() {
63
+ function onScroll(scrollOffset) {
64
64
  // unique tick id
65
65
  ++ticks;
66
66
 
@@ -71,8 +71,7 @@
71
71
  bottom = top + jWindow.height();
72
72
 
73
73
  // determine which elements are in view
74
- // + 60 accounts for fixed nav
75
- var intersections = findElements(top+offset.top + 200, right+offset.right, bottom+offset.bottom, left+offset.left);
74
+ var intersections = findElements(top+offset.top + scrollOffset || 200, right+offset.right, bottom+offset.bottom, left+offset.left);
76
75
  $.each(intersections, function(i, element) {
77
76
 
78
77
  var lastTick = element.data('scrollSpy:ticks');
@@ -184,7 +183,7 @@
184
183
  // Smooth scroll to section
185
184
  $('a[href="#' + $(element).attr('id') + '"]').click(function(e) {
186
185
  e.preventDefault();
187
- var offset = $(this.hash).offset().top + 1;
186
+ var offset = $(Materialize.escapeHash(this.hash)).offset().top + 1;
188
187
  $('html, body').animate({ scrollTop: offset - options.scrollOffset }, {duration: 400, queue: false, easing: 'easeOutCubic'});
189
188
  });
190
189
  });
@@ -194,7 +193,9 @@
194
193
  offset.bottom = options.offsetBottom || 0;
195
194
  offset.left = options.offsetLeft || 0;
196
195
 
197
- var throttledScroll = throttle(onScroll, options.throttle || 100);
196
+ var throttledScroll = throttle(function() {
197
+ onScroll(options.scrollOffset);
198
+ }, options.throttle || 100);
198
199
  var readyScroll = function(){
199
200
  $(document).ready(throttledScroll);
200
201
  };