materialize-sass 0.99.0 → 0.100.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 (60) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +2 -2
  3. data/app/assets/javascripts/materialize.js +6015 -5060
  4. data/app/assets/javascripts/materialize/animation.js +4 -5
  5. data/app/assets/javascripts/materialize/buttons.js +24 -38
  6. data/app/assets/javascripts/materialize/cards.js +13 -21
  7. data/app/assets/javascripts/materialize/carousel.js +122 -110
  8. data/app/assets/javascripts/materialize/character_counter.js +14 -22
  9. data/app/assets/javascripts/materialize/chips.js +41 -44
  10. data/app/assets/javascripts/materialize/collapsible.js +41 -46
  11. data/app/assets/javascripts/materialize/date_picker/picker.date.js +965 -1167
  12. data/app/assets/javascripts/materialize/date_picker/picker.js +546 -634
  13. data/app/assets/javascripts/materialize/date_picker/picker.time.js +166 -212
  14. data/app/assets/javascripts/materialize/dropdown.js +53 -68
  15. data/app/assets/javascripts/materialize/extras/nouislider.js +3 -1
  16. data/app/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
  17. data/app/assets/javascripts/materialize/forms.js +156 -154
  18. data/app/assets/javascripts/materialize/global.js +34 -43
  19. data/app/assets/javascripts/materialize/hammer.min.js +424 -1
  20. data/app/assets/javascripts/materialize/initial.js +3 -3
  21. data/app/assets/javascripts/materialize/jquery.easing.1.4.js +120 -142
  22. data/app/assets/javascripts/materialize/jquery.hammer.js +9 -9
  23. data/app/assets/javascripts/materialize/materialbox.js +81 -107
  24. data/app/assets/javascripts/materialize/modal.js +373 -162
  25. data/app/assets/javascripts/materialize/parallax.js +11 -15
  26. data/app/assets/javascripts/materialize/pushpin.js +2 -5
  27. data/app/assets/javascripts/materialize/scrollFire.js +9 -11
  28. data/app/assets/javascripts/materialize/scrollspy.js +84 -92
  29. data/app/assets/javascripts/materialize/sideNav.js +128 -139
  30. data/app/assets/javascripts/materialize/slider.js +83 -112
  31. data/app/assets/javascripts/materialize/tabs.js +196 -196
  32. data/app/assets/javascripts/materialize/tapTarget.js +170 -173
  33. data/app/assets/javascripts/materialize/toasts.js +330 -112
  34. data/app/assets/javascripts/materialize/tooltip.js +134 -145
  35. data/app/assets/javascripts/materialize/transitions.js +43 -49
  36. data/app/assets/javascripts/materialize/velocity.min.js +623 -2
  37. data/app/assets/javascripts/materialize/waves.js +42 -47
  38. data/app/assets/stylesheets/materialize/components/_buttons.scss +1 -1
  39. data/app/assets/stylesheets/materialize/components/_carousel.scss +4 -5
  40. data/app/assets/stylesheets/materialize/components/_chips.scss +1 -0
  41. data/app/assets/stylesheets/materialize/components/_collapsible.scss +4 -7
  42. data/app/assets/stylesheets/materialize/components/_color.scss +1 -1
  43. data/app/assets/stylesheets/materialize/components/_global.scss +8 -14
  44. data/app/assets/stylesheets/materialize/components/_navbar.scss +0 -1
  45. data/app/assets/stylesheets/materialize/components/_tabs.scss +1 -7
  46. data/app/assets/stylesheets/materialize/components/_toast.scss +6 -12
  47. data/app/assets/stylesheets/materialize/components/_variables.scss +55 -43
  48. data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +1 -0
  49. data/app/assets/stylesheets/materialize/components/forms/_checkboxes.scss +2 -12
  50. data/app/assets/stylesheets/materialize/components/forms/_file-input.scss +6 -0
  51. data/app/assets/stylesheets/materialize/components/forms/_input-fields.scss +67 -37
  52. data/app/assets/stylesheets/materialize/components/forms/_radio-buttons.scss +1 -3
  53. data/app/assets/stylesheets/materialize/components/forms/_select.scss +72 -11
  54. data/app/assets/stylesheets/materialize/components/forms/_switches.scss +2 -4
  55. data/app/assets/stylesheets/materialize/extras/nouislider.css +8 -1
  56. data/lib/materialize-sass/version.rb +1 -1
  57. metadata +2 -5
  58. data/app/assets/javascripts/materialize/init.js +0 -214
  59. data/app/assets/javascripts/materialize/jquery.timeago.min.js +0 -1
  60. data/app/assets/javascripts/materialize/prism.js +0 -8
@@ -1,187 +1,184 @@
1
1
  (function ($) {
2
2
 
3
3
  var methods = {
4
- init: function (options) {
5
- return this.each(function() {
6
- var origin = $('#'+$(this).attr('data-activates'));
7
- var screen = $('body');
8
-
9
- // Creating tap target
10
- var tapTargetEl = $(this);
11
- var tapTargetWrapper = tapTargetEl.parent('.tap-target-wrapper');
12
- var tapTargetWave = tapTargetWrapper.find('.tap-target-wave');
13
- var tapTargetOriginEl = tapTargetWrapper.find('.tap-target-origin');
14
- var tapTargetContentEl = tapTargetEl.find('.tap-target-content');
15
-
16
- // Creating wrapper
17
- if (!tapTargetWrapper.length) {
18
- tapTargetWrapper = tapTargetEl.wrap($('<div class="tap-target-wrapper"></div>')).parent();
19
- }
20
-
21
- // Creating content
22
- if (!tapTargetContentEl.length) {
23
- tapTargetContentEl = $('<div class="tap-target-content"></div>');
24
- tapTargetEl.append(tapTargetContentEl);
25
- }
26
-
27
- // Creating foreground wave
28
- if (!tapTargetWave.length) {
29
- tapTargetWave = $('<div class="tap-target-wave"></div>');
30
-
31
- // Creating origin
32
- if (!tapTargetOriginEl.length) {
33
- tapTargetOriginEl = origin.clone(true, true);
34
- tapTargetOriginEl.addClass('tap-target-origin');
35
- tapTargetOriginEl.removeAttr('id');
36
- tapTargetOriginEl.removeAttr('style');
37
- tapTargetWave.append(tapTargetOriginEl);
38
- }
39
-
40
- tapTargetWrapper.append(tapTargetWave);
41
- }
42
-
43
- // Open
44
- var openTapTarget = function() {
45
- if (tapTargetWrapper.is('.open')) {
46
- return;
47
- }
48
-
49
- // Adding open class
50
- tapTargetWrapper.addClass('open');
51
-
52
- setTimeout(function() {
53
- tapTargetOriginEl.off('click.tapTarget').on('click.tapTarget', function(e) {
54
- closeTapTarget();
55
- tapTargetOriginEl.off('click.tapTarget');
56
- });
4
+ init: function (options) {
5
+ return this.each(function () {
6
+ var origin = $('#' + $(this).attr('data-activates'));
7
+ var screen = $('body');
8
+
9
+ // Creating tap target
10
+ var tapTargetEl = $(this);
11
+ var tapTargetWrapper = tapTargetEl.parent('.tap-target-wrapper');
12
+ var tapTargetWave = tapTargetWrapper.find('.tap-target-wave');
13
+ var tapTargetOriginEl = tapTargetWrapper.find('.tap-target-origin');
14
+ var tapTargetContentEl = tapTargetEl.find('.tap-target-content');
15
+
16
+ // Creating wrapper
17
+ if (!tapTargetWrapper.length) {
18
+ tapTargetWrapper = tapTargetEl.wrap($('<div class="tap-target-wrapper"></div>')).parent();
19
+ }
57
20
 
58
- $(document).off('click.tapTarget').on('click.tapTarget', function(e) {
59
- closeTapTarget();
21
+ // Creating content
22
+ if (!tapTargetContentEl.length) {
23
+ tapTargetContentEl = $('<div class="tap-target-content"></div>');
24
+ tapTargetEl.append(tapTargetContentEl);
25
+ }
26
+
27
+ // Creating foreground wave
28
+ if (!tapTargetWave.length) {
29
+ tapTargetWave = $('<div class="tap-target-wave"></div>');
30
+
31
+ // Creating origin
32
+ if (!tapTargetOriginEl.length) {
33
+ tapTargetOriginEl = origin.clone(true, true);
34
+ tapTargetOriginEl.addClass('tap-target-origin');
35
+ tapTargetOriginEl.removeAttr('id');
36
+ tapTargetOriginEl.removeAttr('style');
37
+ tapTargetWave.append(tapTargetOriginEl);
38
+ }
39
+
40
+ tapTargetWrapper.append(tapTargetWave);
41
+ }
42
+
43
+ // Open
44
+ var openTapTarget = function () {
45
+ if (tapTargetWrapper.is('.open')) {
46
+ return;
47
+ }
48
+
49
+ // Adding open class
50
+ tapTargetWrapper.addClass('open');
51
+
52
+ setTimeout(function () {
53
+ tapTargetOriginEl.off('click.tapTarget').on('click.tapTarget', function (e) {
54
+ closeTapTarget();
55
+ tapTargetOriginEl.off('click.tapTarget');
56
+ });
57
+
58
+ $(document).off('click.tapTarget').on('click.tapTarget', function (e) {
59
+ closeTapTarget();
60
+ $(document).off('click.tapTarget');
61
+ });
62
+
63
+ var throttledCalc = Materialize.throttle(function () {
64
+ calculateTapTarget();
65
+ }, 200);
66
+ $(window).off('resize.tapTarget').on('resize.tapTarget', throttledCalc);
67
+ }, 0);
68
+ };
69
+
70
+ // Close
71
+ var closeTapTarget = function () {
72
+ if (!tapTargetWrapper.is('.open')) {
73
+ return;
74
+ }
75
+
76
+ tapTargetWrapper.removeClass('open');
77
+ tapTargetOriginEl.off('click.tapTarget');
60
78
  $(document).off('click.tapTarget');
61
- });
79
+ $(window).off('resize.tapTarget');
80
+ };
81
+
82
+ // Pre calculate
83
+ var calculateTapTarget = function () {
84
+ // Element or parent is fixed position?
85
+ var isFixed = origin.css('position') === 'fixed';
86
+ if (!isFixed) {
87
+ var parents = origin.parents();
88
+ for (var i = 0; i < parents.length; i++) {
89
+ isFixed = $(parents[i]).css('position') == 'fixed';
90
+ if (isFixed) {
91
+ break;
92
+ }
93
+ }
94
+ }
62
95
 
63
- var throttledCalc = Materialize.throttle(function() {
96
+ // Calculating origin
97
+ var originWidth = origin.outerWidth();
98
+ var originHeight = origin.outerHeight();
99
+ var originTop = isFixed ? origin.offset().top - $(document).scrollTop() : origin.offset().top;
100
+ var originLeft = isFixed ? origin.offset().left - $(document).scrollLeft() : origin.offset().left;
101
+
102
+ // Calculating screen
103
+ var windowWidth = $(window).width();
104
+ var windowHeight = $(window).height();
105
+ var centerX = windowWidth / 2;
106
+ var centerY = windowHeight / 2;
107
+ var isLeft = originLeft <= centerX;
108
+ var isRight = originLeft > centerX;
109
+ var isTop = originTop <= centerY;
110
+ var isBottom = originTop > centerY;
111
+ var isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75;
112
+ var isCenterY = originTop >= windowHeight * 0.25 && originTop <= windowHeight * 0.75;
113
+
114
+ // Calculating tap target
115
+ var tapTargetWidth = tapTargetEl.outerWidth();
116
+ var tapTargetHeight = tapTargetEl.outerHeight();
117
+ var tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2;
118
+ var tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2;
119
+ var tapTargetPosition = isFixed ? 'fixed' : 'absolute';
120
+
121
+ // Calculating content
122
+ var tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth;
123
+ var tapTargetTextHeight = tapTargetHeight / 2;
124
+ var tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0;
125
+ var tapTargetTextBottom = 0;
126
+ var tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0;
127
+ var tapTargetTextRight = 0;
128
+ var tapTargetTextPadding = originWidth;
129
+ var tapTargetTextAlign = isBottom ? 'bottom' : 'top';
130
+
131
+ // Calculating wave
132
+ var tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2;
133
+ var tapTargetWaveHeight = tapTargetWaveWidth;
134
+ var tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2;
135
+ var tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2;
136
+
137
+ // Setting tap target
138
+ var tapTargetWrapperCssObj = {};
139
+ tapTargetWrapperCssObj.top = isTop ? tapTargetTop : '';
140
+ tapTargetWrapperCssObj.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth : '';
141
+ tapTargetWrapperCssObj.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight : '';
142
+ tapTargetWrapperCssObj.left = isLeft ? tapTargetLeft : '';
143
+ tapTargetWrapperCssObj.position = tapTargetPosition;
144
+ tapTargetWrapper.css(tapTargetWrapperCssObj);
145
+
146
+ // Setting content
147
+ tapTargetContentEl.css({
148
+ width: tapTargetTextWidth,
149
+ height: tapTargetTextHeight,
150
+ top: tapTargetTextTop,
151
+ right: tapTargetTextRight,
152
+ bottom: tapTargetTextBottom,
153
+ left: tapTargetTextLeft,
154
+ padding: tapTargetTextPadding,
155
+ verticalAlign: tapTargetTextAlign
156
+ });
157
+
158
+ // Setting wave
159
+ tapTargetWave.css({
160
+ top: tapTargetWaveTop,
161
+ left: tapTargetWaveLeft,
162
+ width: tapTargetWaveWidth,
163
+ height: tapTargetWaveHeight
164
+ });
165
+ };
166
+
167
+ if (options == 'open') {
64
168
  calculateTapTarget();
65
- }, 200);
66
- $(window).off('resize.tapTarget').on('resize.tapTarget', throttledCalc);
67
- }, 0);
68
- };
69
-
70
- // Close
71
- var closeTapTarget = function(){
72
- if (!tapTargetWrapper.is('.open')) {
73
- return;
74
- }
75
-
76
- tapTargetWrapper.removeClass('open');
77
- tapTargetOriginEl.off('click.tapTarget')
78
- $(document).off('click.tapTarget');
79
- $(window).off('resize.tapTarget');
80
- };
81
-
82
- // Pre calculate
83
- var calculateTapTarget = function() {
84
- // Element or parent is fixed position?
85
- var isFixed = origin.css('position') === 'fixed';
86
- if (!isFixed) {
87
- var parents = origin.parents();
88
- for(var i = 0; i < parents.length; i++) {
89
- isFixed = $(parents[i]).css('position') == 'fixed';
90
- if (isFixed) {
91
- break;
92
- }
169
+ openTapTarget();
93
170
  }
94
- }
95
-
96
- // Calculating origin
97
- var originWidth = origin.outerWidth();
98
- var originHeight = origin.outerHeight();
99
- var originTop = isFixed ? origin.offset().top - $(document).scrollTop() : origin.offset().top;
100
- var originLeft = isFixed ? origin.offset().left - $(document).scrollLeft() : origin.offset().left;
101
-
102
- // Calculating screen
103
- var windowWidth = $(window).width();
104
- var windowHeight = $(window).height();
105
- var centerX = windowWidth / 2;
106
- var centerY = windowHeight / 2;
107
- var isLeft = originLeft <= centerX;
108
- var isRight = originLeft > centerX;
109
- var isTop = originTop <= centerY;
110
- var isBottom = originTop > centerY;
111
- var isCenterX = originLeft >= windowWidth*0.25 && originLeft <= windowWidth*0.75;
112
- var isCenterY = originTop >= windowHeight*0.25 && originTop <= windowHeight*0.75;
113
-
114
- // Calculating tap target
115
- var tapTargetWidth = tapTargetEl.outerWidth();
116
- var tapTargetHeight = tapTargetEl.outerHeight();
117
- var tapTargetTop = originTop + originHeight/2 - tapTargetHeight/2;
118
- var tapTargetLeft = originLeft + originWidth/2 - tapTargetWidth/2;
119
- var tapTargetPosition = isFixed ? 'fixed' : 'absolute';
120
-
121
- // Calculating content
122
- var tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth/2 + originWidth;
123
- var tapTargetTextHeight = tapTargetHeight/2;
124
- var tapTargetTextTop = isTop ? tapTargetHeight/2 : 0;
125
- var tapTargetTextBottom = 0;
126
- var tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth/2 - originWidth : 0;
127
- var tapTargetTextRight = 0;
128
- var tapTargetTextPadding = originWidth;
129
- var tapTargetTextAlign = isBottom ? 'bottom' : 'top';
130
-
131
- // Calculating wave
132
- var tapTargetWaveWidth = originWidth > originHeight ? originWidth*2 : originWidth*2;
133
- var tapTargetWaveHeight = tapTargetWaveWidth;
134
- var tapTargetWaveTop = tapTargetHeight/2 - tapTargetWaveHeight/2;
135
- var tapTargetWaveLeft = tapTargetWidth/2 - tapTargetWaveWidth/2;
136
-
137
- // Setting tap target
138
- var tapTargetWrapperCssObj = {};
139
- tapTargetWrapperCssObj.top = isTop ? tapTargetTop : '';
140
- tapTargetWrapperCssObj.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth : '';
141
- tapTargetWrapperCssObj.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight : '';
142
- tapTargetWrapperCssObj.left = isLeft ? tapTargetLeft : '';
143
- tapTargetWrapperCssObj.position = tapTargetPosition;
144
- tapTargetWrapper.css(tapTargetWrapperCssObj);
145
-
146
- // Setting content
147
- tapTargetContentEl.css({
148
- width: tapTargetTextWidth,
149
- height: tapTargetTextHeight,
150
- top: tapTargetTextTop,
151
- right: tapTargetTextRight,
152
- bottom: tapTargetTextBottom,
153
- left: tapTargetTextLeft,
154
- padding: tapTargetTextPadding,
155
- verticalAlign: tapTargetTextAlign
156
- });
157
171
 
158
- // Setting wave
159
- tapTargetWave.css({
160
- top: tapTargetWaveTop,
161
- left: tapTargetWaveLeft,
162
- width: tapTargetWaveWidth,
163
- height: tapTargetWaveHeight
172
+ if (options == 'close') closeTapTarget();
164
173
  });
165
- }
166
-
167
- if (options == 'open') {
168
- calculateTapTarget();
169
- openTapTarget();
170
- }
171
-
172
- if (options == 'close')
173
- closeTapTarget();
174
- });
175
- },
176
- open: function() {},
177
- close: function() {}
174
+ },
175
+ open: function () {},
176
+ close: function () {}
178
177
  };
179
178
 
180
- $.fn.tapTarget = function(methodOrOptions) {
181
- if (methods[methodOrOptions] || typeof methodOrOptions === 'object')
182
- return methods.init.apply( this, arguments );
179
+ $.fn.tapTarget = function (methodOrOptions) {
180
+ if (methods[methodOrOptions] || typeof methodOrOptions === 'object') return methods.init.apply(this, arguments);
183
181
 
184
- $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tap-target' );
182
+ $.error('Method ' + methodOrOptions + ' does not exist on jQuery.tap-target');
185
183
  };
186
-
187
- }( jQuery ));
184
+ })(jQuery);
@@ -1,136 +1,354 @@
1
- Materialize.toast = function (message, displayLength, className, completeCallback) {
2
- className = className || "";
3
-
4
- var container = document.getElementById('toast-container');
5
-
6
- // Create toast container if it does not exist
7
- if (container === null) {
8
- // create notification container
9
- container = document.createElement('div');
10
- container.id = 'toast-container';
11
- document.body.appendChild(container);
12
- }
13
-
14
- // Select and append toast
15
- var newToast = createToast(message);
16
-
17
- // only append toast if message is not undefined
18
- if(message){
19
- container.appendChild(newToast);
20
- }
21
-
22
- newToast.style.opacity = 0;
23
-
24
- // Animate toast in
25
- Vel(newToast, {translateY: '-35px', opacity: 1 }, {duration: 300,
26
- easing: 'easeOutCubic',
27
- queue: false});
28
-
29
- // Allows timer to be pause while being panned
30
- var timeLeft = displayLength;
31
- var counterInterval;
32
- if (timeLeft != null) {
33
- counterInterval = setInterval (function(){
34
- if (newToast.parentNode === null)
35
- window.clearInterval(counterInterval);
36
-
37
- // If toast is not being dragged, decrease its time remaining
38
- if (!newToast.classList.contains('panning')) {
39
- timeLeft -= 20;
40
- }
1
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
41
2
 
42
- if (timeLeft <= 0) {
43
- // Animate toast out
44
- Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
45
- easing: 'easeOutExpo',
46
- queue: false,
47
- complete: function(){
48
- // Call the optional callback
49
- if(typeof(completeCallback) === "function")
50
- completeCallback();
51
- // Remove toast after it times out
52
- this[0].parentNode.removeChild(this[0]);
53
- }
54
- });
55
- window.clearInterval(counterInterval);
3
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
+
5
+ (function ($) {
6
+ 'use strict';
7
+
8
+ var _defaults = {
9
+ displayLength: Infinity,
10
+ inDuration: 300,
11
+ outDuration: 375,
12
+ className: undefined,
13
+ completeCallback: undefined,
14
+ activationPercent: 0.8
15
+ };
16
+
17
+ var Toast = function () {
18
+ function Toast(message, displayLength, className, completeCallback) {
19
+ _classCallCheck(this, Toast);
20
+
21
+ if (!message) {
22
+ return;
56
23
  }
57
- }, 20);
58
- }
59
24
 
25
+ /**
26
+ * Options for the toast
27
+ * @member Toast#options
28
+ */
29
+ this.options = {
30
+ displayLength: displayLength,
31
+ className: className,
32
+ completeCallback: completeCallback
33
+ };
60
34
 
35
+ this.options = $.extend({}, Toast.defaults, this.options);
36
+ this.message = message;
61
37
 
62
- function createToast(html) {
38
+ /**
39
+ * Describes current pan state toast
40
+ * @type {Boolean}
41
+ */
42
+ this.panning = false;
63
43
 
64
- // Create toast
65
- var toast = document.createElement('div');
66
- toast.classList.add('toast');
67
- if (className) {
68
- var classes = className.split(' ');
44
+ /**
45
+ * Time remaining until toast is removed
46
+ */
47
+ this.timeRemaining = this.options.displayLength;
69
48
 
70
- for (var i = 0, count = classes.length; i < count; i++) {
71
- toast.classList.add(classes[i]);
49
+ if (Toast._toasts.length === 0) {
50
+ Toast._createContainer();
72
51
  }
52
+
53
+ // Create new toast
54
+ Toast._toasts.push(this);
55
+ var toastElement = this.createToast();
56
+ toastElement.M_Toast = this;
57
+ this.el = toastElement;
58
+ this._animateIn();
59
+ this.setTimer();
73
60
  }
74
- // If type of parameter is HTML Element
75
- if ( typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName==="string"
76
- ) {
77
- toast.appendChild(html);
78
- }
79
- else if (html instanceof jQuery) {
80
- // Check if it is jQuery object
81
- toast.appendChild(html[0]);
82
- }
83
- else {
84
- // Insert as text;
85
- toast.innerHTML = html;
86
- }
87
- // Bind hammer
88
- var hammerHandler = new Hammer(toast, {prevent_default: false});
89
- hammerHandler.on('pan', function(e) {
90
- var deltaX = e.deltaX;
91
- var activationDistance = 80;
92
-
93
- // Change toast state
94
- if (!toast.classList.contains('panning')){
95
- toast.classList.add('panning');
61
+
62
+ _createClass(Toast, [{
63
+ key: 'createToast',
64
+
65
+
66
+ /**
67
+ * Create toast and append it to toast container
68
+ */
69
+ value: function createToast() {
70
+ var toast = document.createElement('div');
71
+ toast.classList.add('toast');
72
+
73
+ // Add custom classes onto toast
74
+ if (this.options.className) {
75
+ var classes = this.options.className.split(' ');
76
+ var i = void 0,
77
+ count = void 0;
78
+ for (i = 0, count = classes.length; i < count; i++) {
79
+ toast.classList.add(classes[i]);
80
+ }
81
+ }
82
+
83
+ // Set content
84
+ if (typeof HTMLElement === 'object' ? this.message instanceof HTMLElement : this.message && typeof this.message === 'object' && this.message !== null && this.message.nodeType === 1 && typeof this.message.nodeName === 'string') {
85
+ toast.appendChild(this.message);
86
+
87
+ // Check if it is jQuery object
88
+ } else if (this.message instanceof jQuery) {
89
+ $(toast).append(this.message);
90
+
91
+ // Insert as text;
92
+ } else {
93
+ toast.innerHTML = this.message;
94
+ }
95
+
96
+ // Append toasft
97
+ Toast._container.appendChild(toast);
98
+ return toast;
96
99
  }
97
100
 
98
- var opacityPercent = 1-Math.abs(deltaX / activationDistance);
99
- if (opacityPercent < 0)
100
- opacityPercent = 0;
101
+ /**
102
+ * Animate in toast
103
+ */
104
+
105
+ }, {
106
+ key: '_animateIn',
107
+ value: function _animateIn() {
108
+ // Animate toast in
109
+ Vel(this.el, { top: 0, opacity: 1 }, {
110
+ duration: 300,
111
+ easing: 'easeOutCubic',
112
+ queue: false
113
+ });
114
+ }
101
115
 
102
- Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
116
+ /**
117
+ * Create setInterval which automatically removes toast when timeRemaining >= 0
118
+ * has been reached
119
+ */
103
120
 
104
- });
121
+ }, {
122
+ key: 'setTimer',
123
+ value: function setTimer() {
124
+ var _this = this;
105
125
 
106
- hammerHandler.on('panend', function(e) {
107
- var deltaX = e.deltaX;
108
- var activationDistance = 80;
126
+ if (this.timeRemaining !== Infinity) {
127
+ this.counterInterval = setInterval(function () {
128
+ // If toast is not being dragged, decrease its time remaining
129
+ if (!_this.panning) {
130
+ _this.timeRemaining -= 20;
131
+ }
132
+
133
+ // Animate toast out
134
+ if (_this.timeRemaining <= 0) {
135
+ _this.remove();
136
+ }
137
+ }, 20);
138
+ }
139
+ }
109
140
 
110
- // If toast dragged past activation point
111
- if (Math.abs(deltaX) > activationDistance) {
112
- Vel(toast, {marginTop: '-40px'}, { duration: 375,
141
+ /**
142
+ * Dismiss toast with animation
143
+ */
144
+
145
+ }, {
146
+ key: 'remove',
147
+ value: function remove() {
148
+ var _this2 = this;
149
+
150
+ window.clearInterval(this.counterInterval);
151
+ var activationDistance = this.el.offsetWidth * this.options.activationPercent;
152
+
153
+ if (this.wasSwiped) {
154
+ this.el.style.transition = 'transform .05s, opacity .05s';
155
+ this.el.style.transform = 'translateX(' + activationDistance + 'px)';
156
+ this.el.style.opacity = 0;
157
+ }
158
+
159
+ Vel(this.el, { opacity: 0, marginTop: '-40px' }, {
160
+ duration: this.options.outDuration,
113
161
  easing: 'easeOutExpo',
114
162
  queue: false,
115
- complete: function(){
116
- if(typeof(completeCallback) === "function") {
117
- completeCallback();
163
+ complete: function () {
164
+ // Call the optional callback
165
+ if (typeof _this2.options.completeCallback === 'function') {
166
+ _this2.options.completeCallback();
167
+ }
168
+ // Remove toast from DOM
169
+ _this2.el.parentNode.removeChild(_this2.el);
170
+ Toast._toasts.splice(Toast._toasts.indexOf(_this2), 1);
171
+ if (Toast._toasts.length === 0) {
172
+ Toast._removeContainer();
118
173
  }
119
- toast.parentNode.removeChild(toast);
120
174
  }
121
175
  });
176
+ }
177
+ }], [{
178
+ key: '_createContainer',
122
179
 
123
- } else {
124
- toast.classList.remove('panning');
125
- // Put toast back into original position
126
- Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
127
- easing: 'easeOutExpo',
128
- queue: false
129
- });
130
180
 
181
+ /**
182
+ * Append toast container and add event handlers
183
+ */
184
+ value: function _createContainer() {
185
+ var container = document.createElement('div');
186
+ container.setAttribute('id', 'toast-container');
187
+
188
+ // Add event handler
189
+ container.addEventListener('touchstart', Toast._onDragStart);
190
+ container.addEventListener('touchmove', Toast._onDragMove);
191
+ container.addEventListener('touchend', Toast._onDragEnd);
192
+
193
+ container.addEventListener('mousedown', Toast._onDragStart);
194
+ document.addEventListener('mousemove', Toast._onDragMove);
195
+ document.addEventListener('mouseup', Toast._onDragEnd);
196
+
197
+ document.body.appendChild(container);
198
+ Toast._container = container;
199
+ }
200
+
201
+ /**
202
+ * Remove toast container and event handlers
203
+ */
204
+
205
+ }, {
206
+ key: '_removeContainer',
207
+ value: function _removeContainer() {
208
+ // Add event handler
209
+ document.removeEventListener('mousemove', Toast._onDragMove);
210
+ document.removeEventListener('mouseup', Toast._onDragEnd);
211
+
212
+ Toast._container.parentNode.removeChild(Toast._container);
213
+ Toast._container = null;
214
+ }
215
+
216
+ /**
217
+ * Begin drag handler
218
+ * @param {Event} e
219
+ */
220
+
221
+ }, {
222
+ key: '_onDragStart',
223
+ value: function _onDragStart(e) {
224
+ if (e.target && $(e.target).closest('.toast').length) {
225
+ var $toast = $(e.target).closest('.toast');
226
+ var toast = $toast[0].M_Toast;
227
+ toast.panning = true;
228
+ Toast._draggedToast = toast;
229
+ toast.el.classList.add('panning');
230
+ toast.el.style.transition = null;
231
+ toast.startingXPos = Toast._xPos(e);
232
+ toast.time = Date.now();
233
+ toast.xPos = Toast._xPos(e);
234
+ }
131
235
  }
132
- });
133
236
 
134
- return toast;
135
- }
136
- };
237
+ /**
238
+ * Drag move handler
239
+ * @param {Event} e
240
+ */
241
+
242
+ }, {
243
+ key: '_onDragMove',
244
+ value: function _onDragMove(e) {
245
+ if (!!Toast._draggedToast) {
246
+ e.preventDefault();
247
+ var toast = Toast._draggedToast;
248
+ toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
249
+ toast.xPos = Toast._xPos(e);
250
+ toast.velocityX = toast.deltaX / (Date.now() - toast.time);
251
+ toast.time = Date.now();
252
+
253
+ var totalDeltaX = toast.xPos - toast.startingXPos;
254
+ var activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
255
+ toast.el.style.transform = 'translateX(' + totalDeltaX + 'px)';
256
+ toast.el.style.opacity = 1 - Math.abs(totalDeltaX / activationDistance);
257
+ }
258
+ }
259
+
260
+ /**
261
+ * End drag handler
262
+ * @param {Event} e
263
+ */
264
+
265
+ }, {
266
+ key: '_onDragEnd',
267
+ value: function _onDragEnd(e) {
268
+ if (!!Toast._draggedToast) {
269
+ var toast = Toast._draggedToast;
270
+ toast.panning = false;
271
+ toast.el.classList.remove('panning');
272
+
273
+ var totalDeltaX = toast.xPos - toast.startingXPos;
274
+ var activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
275
+ var shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
276
+
277
+ // Remove toast
278
+ if (shouldBeDismissed) {
279
+ toast.wasSwiped = true;
280
+ toast.remove();
281
+
282
+ // Animate toast back to original position
283
+ } else {
284
+ toast.el.style.transition = 'transform .2s, opacity .2s';
285
+ toast.el.style.transform = null;
286
+ toast.el.style.opacity = null;
287
+ }
288
+ Toast._draggedToast = null;
289
+ }
290
+ }
291
+
292
+ /**
293
+ * Get x position of mouse or touch event
294
+ * @param {Event} e
295
+ */
296
+
297
+ }, {
298
+ key: '_xPos',
299
+ value: function _xPos(e) {
300
+ if (e.targetTouches && e.targetTouches.length >= 1) {
301
+ return e.targetTouches[0].clientX;
302
+ }
303
+ // mouse event
304
+ return e.clientX;
305
+ }
306
+
307
+ /**
308
+ * Remove all toasts
309
+ */
310
+
311
+ }, {
312
+ key: 'removeAll',
313
+ value: function removeAll() {
314
+ for (var toastIndex in Toast._toasts) {
315
+ Toast._toasts[toastIndex].remove();
316
+ }
317
+ }
318
+ }, {
319
+ key: 'defaults',
320
+ get: function () {
321
+ return _defaults;
322
+ }
323
+ }]);
324
+
325
+ return Toast;
326
+ }();
327
+
328
+ /**
329
+ * @static
330
+ * @memberof Toast
331
+ * @type {Array.<Toast>}
332
+ */
333
+
334
+
335
+ Toast._toasts = [];
336
+
337
+ /**
338
+ * @static
339
+ * @memberof Toast
340
+ */
341
+ Toast._container = null;
342
+
343
+ /**
344
+ * @static
345
+ * @memberof Toast
346
+ * @type {Toast}
347
+ */
348
+ Toast._draggedToast = null;
349
+
350
+ window.Materialize.Toast = Toast;
351
+ window.Materialize.toast = function (message, displayLength, className, completeCallback) {
352
+ return new Toast(message, displayLength, className, completeCallback);
353
+ };
354
+ })(jQuery);