materialize-sass 0.96.2 → 0.97.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +15 -0
  3. data/app/assets/javascripts/materialize.js +6158 -4
  4. data/app/assets/javascripts/materialize/buttons.js +37 -11
  5. data/app/assets/javascripts/materialize/character_counter.js +3 -3
  6. data/app/assets/javascripts/materialize/dropdown.js +4 -2
  7. data/app/assets/javascripts/materialize/forms.js +81 -32
  8. data/app/assets/javascripts/materialize/init.js +1 -1
  9. data/app/assets/javascripts/materialize/leanModal.js +34 -20
  10. data/app/assets/javascripts/materialize/sideNav.js +1 -1
  11. data/app/assets/javascripts/materialize/slider.js +10 -18
  12. data/app/assets/javascripts/materialize/transitions.js +10 -1
  13. data/app/assets/stylesheets/materialize/components/_buttons.scss +4 -4
  14. data/app/assets/stylesheets/materialize/components/_cards.scss +6 -4
  15. data/app/assets/stylesheets/materialize/components/_collapsible.scss +1 -1
  16. data/app/assets/stylesheets/materialize/components/_color.scss +1 -1
  17. data/app/assets/stylesheets/materialize/components/_dropdown.scss +2 -2
  18. data/app/assets/stylesheets/materialize/components/_form.scss +12 -13
  19. data/app/assets/stylesheets/materialize/components/_global.scss +33 -4
  20. data/app/assets/stylesheets/materialize/components/_grid.scss +0 -1
  21. data/app/assets/stylesheets/materialize/components/_modal.scss +3 -4
  22. data/app/assets/stylesheets/materialize/components/_navbar.scss +1 -1
  23. data/app/assets/stylesheets/materialize/components/_sideNav.scss +5 -5
  24. data/app/assets/stylesheets/materialize/components/_slider.scss +4 -4
  25. data/app/assets/stylesheets/materialize/components/_typography.scss +14 -10
  26. data/app/assets/stylesheets/materialize/components/_variables.scss +15 -7
  27. data/lib/materialize-sass/engine.rb +2 -2
  28. data/lib/materialize-sass/version.rb +1 -1
  29. metadata +3 -3
@@ -6,7 +6,32 @@
6
6
 
7
7
  $(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn', function(e) {
8
8
  var $this = $(this);
9
+ openFABMenu($this);
9
10
 
11
+ });
12
+
13
+ $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn', function(e) {
14
+ var $this = $(this);
15
+ closeFABMenu($this);
16
+ });
17
+
18
+ });
19
+
20
+ $.fn.extend({
21
+ openFAB: function() {
22
+ var $this = $(this);
23
+ openFABMenu($this);
24
+ },
25
+ closeFAB: function() {
26
+ closeFABMenu($this);
27
+ }
28
+ });
29
+
30
+
31
+ var openFABMenu = function (btn) {
32
+ $this = btn;
33
+ if ($this.hasClass('active') === false) {
34
+ $this.addClass('active');
10
35
  $this.find('ul .btn-floating').velocity(
11
36
  { scaleY: ".4", scaleX: ".4", translateY: "40px"},
12
37
  { duration: 0 });
@@ -18,18 +43,19 @@
18
43
  { duration: 80, delay: time });
19
44
  time += 40;
20
45
  });
46
+ }
47
+ };
21
48
 
22
- });
23
-
24
- $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn', function(e) {
25
- var $this = $(this);
49
+ var closeFABMenu = function (btn) {
50
+ $this = btn;
51
+ $this.removeClass('active');
52
+ var time = 0;
53
+ $this.find('ul .btn-floating').velocity("stop", true);
54
+ $this.find('ul .btn-floating').velocity(
55
+ { opacity: "0", scaleX: ".4", scaleY: ".4", translateY: "40px"},
56
+ { duration: 80 }
57
+ );
58
+ };
26
59
 
27
- var time = 0;
28
- $this.find('ul .btn-floating').velocity("stop", true);
29
- $this.find('ul .btn-floating').velocity(
30
- { opacity: "0", scaleX: ".4", scaleY: ".4", translateY: "40px"},
31
- { duration: 80 });
32
- });
33
60
 
34
- });
35
61
  }( jQuery ));
@@ -3,7 +3,7 @@
3
3
  $.fn.characterCounter = function(){
4
4
  return this.each(function(){
5
5
 
6
- itHasLengthAttribute = $(this).attr('length') !== undefined;
6
+ var itHasLengthAttribute = $(this).attr('length') !== undefined;
7
7
 
8
8
  if(itHasLengthAttribute){
9
9
  $(this).on('input', updateCounter);
@@ -28,7 +28,7 @@
28
28
  }
29
29
 
30
30
  function addCounterElement($input){
31
- $counterElement = $('<span/>')
31
+ var $counterElement = $('<span/>')
32
32
  .addClass('character-counter')
33
33
  .css('float','right')
34
34
  .css('font-size','12px')
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  function addInputStyle(isValidLength, $input){
45
- inputHasInvalidClass = $input.hasClass('invalid');
45
+ var inputHasInvalidClass = $input.hasClass('invalid');
46
46
  if (isValidLength && inputHasInvalidClass) {
47
47
  $input.removeClass('invalid');
48
48
  }
@@ -115,7 +115,8 @@
115
115
  });
116
116
  origin.on('mouseleave', function(e){
117
117
  // If hover on origin then to something other than dropdown content, then close
118
- if(!$(e.toElement).closest('.dropdown-content').is(activates)) {
118
+ var toEl = e.toElement || e.relatedTarget; // added browser compatibility for target element
119
+ if(!$(toEl).closest('.dropdown-content').is(activates)) {
119
120
  activates.stop(true, true);
120
121
  hideDropdown();
121
122
  open = false;
@@ -123,7 +124,8 @@
123
124
  });
124
125
 
125
126
  activates.on('mouseleave', function(e){ // Mouse out
126
- if(!$(e.toElement).closest('.dropdown-button').is(origin)) {
127
+ var toEl = e.toElement || e.relatedTarget;
128
+ if(!$(toEl).closest('.dropdown-button').is(origin)) {
127
129
  activates.stop(true, true);
128
130
  hideDropdown();
129
131
  open = false;
@@ -35,14 +35,19 @@
35
35
 
36
36
  // HTML DOM FORM RESET handling
37
37
  $(document).on('reset', function(e) {
38
- if ($(e.target).is('form')) {
39
- $(this).find(input_selector).removeClass('valid').removeClass('invalid');
40
- $(this).find(input_selector).siblings('label, i').removeClass('active');
38
+ var formReset = $(e.target);
39
+ if (formReset.is('form')) {
40
+ formReset.find(input_selector).removeClass('valid').removeClass('invalid');
41
+ formReset.find(input_selector).each(function () {
42
+ if ($(this).attr('value') === '') {
43
+ $(this).siblings('label, i').removeClass('active');
44
+ }
45
+ });
41
46
 
42
47
  // Reset select
43
- $(this).find('select.initialized').each(function () {
44
- var reset_text = $(this).find('option[selected]').text();
45
- $(this).siblings('input.select-dropdown').val(reset_text);
48
+ formReset.find('select.initialized').each(function () {
49
+ var reset_text = formReset.find('option[selected]').text();
50
+ formReset.siblings('input.select-dropdown').val(reset_text);
46
51
  });
47
52
  }
48
53
  });
@@ -61,6 +66,10 @@
61
66
  });
62
67
 
63
68
  validate_field = function(object) {
69
+ var hasLength = object.attr('length') !== undefined;
70
+ var lenAttr = parseInt(object.attr('length'));
71
+ var len = object.val().length;
72
+
64
73
  if (object.val().length === 0 && object[0].validity.badInput === false) {
65
74
  if (object.hasClass('validate')) {
66
75
  object.removeClass('valid');
@@ -69,7 +78,8 @@
69
78
  }
70
79
  else {
71
80
  if (object.hasClass('validate')) {
72
- if (object.is(':valid')) {
81
+ // Check for character counter attributes
82
+ if ((object.is(':valid') && hasLength && (len < lenAttr)) || (object.is(':valid') && !hasLength)) {
73
83
  object.removeClass('invalid');
74
84
  object.addClass('valid');
75
85
  }
@@ -91,12 +101,22 @@
91
101
  var text_area_selector = '.materialize-textarea';
92
102
 
93
103
  function textareaAutoResize($textarea) {
94
- // Set fontsize of hiddenDiv
104
+ // Set font properties of hiddenDiv
105
+
106
+ var fontFamily = $textarea.css('font-family');
95
107
  var fontSize = $textarea.css('font-size');
96
- if (fontSize) {
97
- hiddenDiv.css('font-size', fontSize);
108
+
109
+ if (fontSize) { hiddenDiv.css('font-size', fontSize); }
110
+ if (fontFamily) { hiddenDiv.css('font-family', fontFamily); }
111
+
112
+ if ($textarea.attr('wrap') === "off") {
113
+ hiddenDiv.css('overflow-wrap', "normal")
114
+ .css('white-space', "pre");
98
115
  }
99
116
 
117
+
118
+
119
+
100
120
  hiddenDiv.text($textarea.val() + '\n');
101
121
  var content = hiddenDiv.html().replace(/\n/g, '<br>');
102
122
  hiddenDiv.html(content);
@@ -131,15 +151,22 @@
131
151
  $('.file-field').each(function() {
132
152
  var path_input = $(this).find('input.file-path');
133
153
  $(this).find('input[type="file"]').change(function () {
134
- path_input.val($(this)[0].files[0].name);
135
- path_input.trigger('change');
154
+ if ($(this)[0].files.length){
155
+ path_input.val($(this)[0].files[0].name);
156
+ path_input.trigger('change');
157
+ }
136
158
  });
137
159
  });
138
160
 
139
161
 
140
- // Range Input
162
+
163
+ /****************
164
+ * Range Input *
165
+ ****************/
166
+
141
167
  var range_type = 'input[type=range]';
142
168
  var range_mousedown = false;
169
+ var left;
143
170
 
144
171
  $(range_type).each(function () {
145
172
  var thumb = $('<span class="thumb"><span class="value"></span></span>');
@@ -147,13 +174,22 @@
147
174
  });
148
175
 
149
176
  var range_wrapper = '.range-field';
177
+ $(document).on('change', range_type, function(e) {
178
+ var thumb = $(this).siblings('.thumb');
179
+ thumb.find('.value').html($(this).val());
180
+ });
150
181
 
151
- $(document).on("mousedown", range_wrapper, function(e) {
152
- var thumb = $(this).children('.thumb');
153
- if (thumb.length <= 0) {
154
- thumb = $('<span class="thumb"><span class="value"></span></span>');
155
- $(this).append(thumb);
156
- }
182
+ $(document).on('mousedown touchstart', range_type, function(e) {
183
+ var thumb = $(this).siblings('.thumb');
184
+
185
+ // If thumb indicator does not exist yet, create it
186
+ if (thumb.length <= 0) {
187
+ thumb = $('<span class="thumb"><span class="value"></span></span>');
188
+ $(this).append(thumb);
189
+ }
190
+
191
+ // Set indicator value
192
+ thumb.find('.value').html($(this).val());
157
193
 
158
194
  range_mousedown = true;
159
195
  $(this).addClass('active');
@@ -161,7 +197,13 @@
161
197
  if (!thumb.hasClass('active')) {
162
198
  thumb.velocity({ height: "30px", width: "30px", top: "-20px", marginLeft: "-15px"}, { duration: 300, easing: 'easeOutExpo' });
163
199
  }
164
- var left = e.pageX - $(this).offset().left;
200
+
201
+ if(e.pageX === undefined || e.pageX === null){//mobile
202
+ left = e.originalEvent.touches[0].pageX - $(this).offset().left;
203
+ }
204
+ else{ // desktop
205
+ left = e.pageX - $(this).offset().left;
206
+ }
165
207
  var width = $(this).outerWidth();
166
208
 
167
209
  if (left < 0) {
@@ -171,22 +213,29 @@
171
213
  left = width;
172
214
  }
173
215
  thumb.addClass('active').css('left', left);
174
- thumb.find('.value').html($(this).children('input[type=range]').val());
216
+ thumb.find('.value').html($(this).val());
217
+
175
218
 
176
219
  });
177
- $(document).on("mouseup", range_wrapper, function() {
220
+
221
+ $(document).on('mouseup touchend', range_wrapper, function() {
178
222
  range_mousedown = false;
179
223
  $(this).removeClass('active');
180
224
  });
181
225
 
182
- $(document).on("mousemove", range_wrapper, function(e) {
183
-
226
+ $(document).on('mousemove touchmove', range_wrapper, function(e) {
184
227
  var thumb = $(this).children('.thumb');
228
+ var left;
185
229
  if (range_mousedown) {
186
230
  if (!thumb.hasClass('active')) {
187
- thumb.velocity({ height: "30px", width: "30px", top: "-20px", marginLeft: "-15px"}, { duration: 300, easing: 'easeOutExpo' });
231
+ thumb.velocity({ height: '30px', width: '30px', top: '-20px', marginLeft: '-15px'}, { duration: 300, easing: 'easeOutExpo' });
232
+ }
233
+ if (e.pageX === undefined || e.pageX === null) { //mobile
234
+ left = e.originalEvent.touches[0].pageX - $(this).offset().left;
235
+ }
236
+ else{ // desktop
237
+ left = e.pageX - $(this).offset().left;
188
238
  }
189
- var left = e.pageX - $(this).offset().left;
190
239
  var width = $(this).outerWidth();
191
240
 
192
241
  if (left < 0) {
@@ -196,17 +245,18 @@
196
245
  left = width;
197
246
  }
198
247
  thumb.addClass('active').css('left', left);
199
- thumb.find('.value').html($(this).children('input[type=range]').val());
248
+
200
249
  }
201
250
 
202
251
  });
203
- $(document).on("mouseout", range_wrapper, function() {
252
+
253
+ $(document).on('mouseout touchleave', range_wrapper, function() {
204
254
  if (!range_mousedown) {
205
255
 
206
256
  var thumb = $(this).children('.thumb');
207
257
 
208
258
  if (thumb.hasClass('active')) {
209
- thumb.velocity({ height: "0", width: "0", top: "10px", marginLeft: "-6px"}, { duration: 100 });
259
+ thumb.velocity({ height: '0', width: '0', top: '10px', marginLeft: '-6px'}, { duration: 100 });
210
260
  }
211
261
  thumb.removeClass('active');
212
262
  }
@@ -283,12 +333,11 @@
283
333
  // Wrap Elements
284
334
  $select.wrap(wrapper);
285
335
  // Add Select Display Element
286
- var dropdownIcon = $('<i class="mdi-navigation-arrow-drop-down"></i>');
336
+ var dropdownIcon = $('<span class="caret">&#9660;</span>');
287
337
  if ( $select.is(':disabled') )
288
338
  dropdownIcon.addClass('disabled');
289
339
 
290
- var $newSelect = $('<input type="text" class="select-dropdown" readonly="true" ' + (($select.is(':disabled')) ? 'disabled' : '')
291
- + ' data-activates="select-options-' + uniqueID +'" value="'+ label.html() +'"/>');
340
+ var $newSelect = $('<input type="text" class="select-dropdown" readonly="true" ' + (($select.is(':disabled')) ? 'disabled' : '') + ' data-activates="select-options-' + uniqueID +'" value="'+ label.html() +'"/>');
292
341
  $select.before($newSelect);
293
342
  $newSelect.before(dropdownIcon);
294
343
 
@@ -53,7 +53,7 @@
53
53
  setTimeout(checkForChanges, 500);
54
54
  }
55
55
  else {
56
- var donateAd = $('<div id="carbonads"><span><a class="carbon-text" href="#" onclick="document.getElementById("paypal_donate").submit();"><img src="images/donate.png" /> Help support us by turning off adblock. If you still prefer to keep adblock on for this page but still want to support us, feel free to donate. Any little bit helps.</a></form></span></div>');
56
+ var donateAd = $('<div id="carbonads"><span><a class="carbon-text" href="#!" onclick="document.getElementById(\'paypal-donate\').submit();"><img src="images/donate.png" /> Help support us by turning off adblock. If you still prefer to keep adblock on for this page but still want to support us, feel free to donate. Any little bit helps.</a></form></span></div>');
57
57
 
58
58
  $bsa.append(donateAd);
59
59
  }
@@ -9,8 +9,7 @@
9
9
  $.fn.extend({
10
10
  openModal: function(options) {
11
11
 
12
- var overlay = $('<div id="lean-overlay"></div>');
13
- $('body').css('overflow', 'hidden').append(overlay);
12
+ $('body').css('overflow', 'hidden');
14
13
 
15
14
  var defaults = {
16
15
  opacity: 0.5,
@@ -18,7 +17,8 @@
18
17
  out_duration: 250,
19
18
  ready: undefined,
20
19
  complete: undefined,
21
- dismissible: true
20
+ dismissible: true,
21
+ starting_top: '4%'
22
22
  },
23
23
  overlayID = _generateID(),
24
24
  $modal = $(this),
@@ -46,7 +46,7 @@
46
46
  });
47
47
  }
48
48
 
49
- $modal.find(".modal-close").click(function(e) {
49
+ $modal.find(".modal-close").on('click.close', function(e) {
50
50
  $modal.closeModal(options);
51
51
  });
52
52
 
@@ -75,8 +75,9 @@
75
75
  });
76
76
  }
77
77
  else {
78
- $modal.css({ top: "4%" });
79
- $modal.velocity({top: "10%", opacity: 1}, {
78
+ $.Velocity.hook($modal, "scaleX", 0.7);
79
+ $modal.css({ top: options.starting_top });
80
+ $modal.velocity({top: "10%", opacity: 1, scaleX: '1'}, {
80
81
  duration: options.in_duration,
81
82
  queue: false,
82
83
  ease: "easeOutCubic",
@@ -99,15 +100,16 @@
99
100
  out_duration: 250,
100
101
  complete: undefined
101
102
  },
102
- options = $.extend(defaults, options),
103
103
  $modal = $(this),
104
104
  overlayID = $modal.data('overlay-id'),
105
105
  $overlay = $('#' + overlayID);
106
106
 
107
+ options = $.extend(defaults, options);
108
+
107
109
  // Disable scrolling
108
110
  $('body').css('overflow', '');
109
111
 
110
- $modal.find('.modal-close').off();
112
+ $modal.find('.modal-close').off('click.close');
111
113
  $(document).off('keyup.leanModal' + overlayID);
112
114
 
113
115
  $overlay.velocity( { opacity: 0}, {duration: options.out_duration, queue: false, ease: "easeOutQuart"});
@@ -133,27 +135,39 @@
133
135
  });
134
136
  }
135
137
  else {
136
- $modal.fadeOut(options.out_duration, function() {
137
- $modal.css({ top: 0});
138
- $overlay.css({display:"none"});
139
-
140
- // Call complete callback
141
- if (typeof(options.complete) === "function") {
142
- options.complete();
138
+ $modal.velocity(
139
+ { top: options.starting_top, opacity: 0, scaleX: 0.7}, {
140
+ duration: options.out_duration,
141
+ complete:
142
+ function() {
143
+
144
+ $(this).css('display', 'none');
145
+ // Call complete callback
146
+ if (typeof(options.complete) === "function") {
147
+ options.complete();
148
+ }
149
+ $overlay.remove();
150
+ _stack--;
151
+ }
143
152
  }
144
- $overlay.remove();
145
- _stack--;
146
- });
153
+ );
147
154
  }
148
-
149
155
  }
150
156
  });
151
157
 
152
158
  $.fn.extend({
153
- leanModal: function(options) {
159
+ leanModal: function(option) {
154
160
  return this.each(function() {
161
+
162
+ var defaults = {
163
+ starting_top: '4%'
164
+ },
165
+ // Override defaults
166
+ options = $.extend(defaults, option);
167
+
155
168
  // Close Handlers
156
169
  $(this).click(function(e) {
170
+ options.starting_top = ($(this).offset().top - $(window).scrollTop()) /1.15;
157
171
  var modal_id = $(this).attr("href") || '#' + $(this).data('target');
158
172
  $(modal_id).openModal(options);
159
173
  e.preventDefault();
@@ -306,7 +306,7 @@
306
306
  // Default to "init"
307
307
  return methods.init.apply( this, arguments );
308
308
  } else {
309
- $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tooltip' );
309
+ $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.sideNav' );
310
310
  }
311
311
  }; // Plugin end
312
312
  }( jQuery ));