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.
- checksums.yaml +4 -4
- data/Rakefile +2 -2
- data/app/assets/javascripts/materialize.js +6015 -5060
- data/app/assets/javascripts/materialize/animation.js +4 -5
- data/app/assets/javascripts/materialize/buttons.js +24 -38
- data/app/assets/javascripts/materialize/cards.js +13 -21
- data/app/assets/javascripts/materialize/carousel.js +122 -110
- data/app/assets/javascripts/materialize/character_counter.js +14 -22
- data/app/assets/javascripts/materialize/chips.js +41 -44
- data/app/assets/javascripts/materialize/collapsible.js +41 -46
- data/app/assets/javascripts/materialize/date_picker/picker.date.js +965 -1167
- data/app/assets/javascripts/materialize/date_picker/picker.js +546 -634
- data/app/assets/javascripts/materialize/date_picker/picker.time.js +166 -212
- data/app/assets/javascripts/materialize/dropdown.js +53 -68
- data/app/assets/javascripts/materialize/extras/nouislider.js +3 -1
- data/app/assets/javascripts/materialize/extras/nouislider.min.js +1 -1
- data/app/assets/javascripts/materialize/forms.js +156 -154
- data/app/assets/javascripts/materialize/global.js +34 -43
- data/app/assets/javascripts/materialize/hammer.min.js +424 -1
- data/app/assets/javascripts/materialize/initial.js +3 -3
- data/app/assets/javascripts/materialize/jquery.easing.1.4.js +120 -142
- data/app/assets/javascripts/materialize/jquery.hammer.js +9 -9
- data/app/assets/javascripts/materialize/materialbox.js +81 -107
- data/app/assets/javascripts/materialize/modal.js +373 -162
- data/app/assets/javascripts/materialize/parallax.js +11 -15
- data/app/assets/javascripts/materialize/pushpin.js +2 -5
- data/app/assets/javascripts/materialize/scrollFire.js +9 -11
- data/app/assets/javascripts/materialize/scrollspy.js +84 -92
- data/app/assets/javascripts/materialize/sideNav.js +128 -139
- data/app/assets/javascripts/materialize/slider.js +83 -112
- data/app/assets/javascripts/materialize/tabs.js +196 -196
- data/app/assets/javascripts/materialize/tapTarget.js +170 -173
- data/app/assets/javascripts/materialize/toasts.js +330 -112
- data/app/assets/javascripts/materialize/tooltip.js +134 -145
- data/app/assets/javascripts/materialize/transitions.js +43 -49
- data/app/assets/javascripts/materialize/velocity.min.js +623 -2
- data/app/assets/javascripts/materialize/waves.js +42 -47
- data/app/assets/stylesheets/materialize/components/_buttons.scss +1 -1
- data/app/assets/stylesheets/materialize/components/_carousel.scss +4 -5
- data/app/assets/stylesheets/materialize/components/_chips.scss +1 -0
- data/app/assets/stylesheets/materialize/components/_collapsible.scss +4 -7
- data/app/assets/stylesheets/materialize/components/_color.scss +1 -1
- data/app/assets/stylesheets/materialize/components/_global.scss +8 -14
- data/app/assets/stylesheets/materialize/components/_navbar.scss +0 -1
- data/app/assets/stylesheets/materialize/components/_tabs.scss +1 -7
- data/app/assets/stylesheets/materialize/components/_toast.scss +6 -12
- data/app/assets/stylesheets/materialize/components/_variables.scss +55 -43
- data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +1 -0
- data/app/assets/stylesheets/materialize/components/forms/_checkboxes.scss +2 -12
- data/app/assets/stylesheets/materialize/components/forms/_file-input.scss +6 -0
- data/app/assets/stylesheets/materialize/components/forms/_input-fields.scss +67 -37
- data/app/assets/stylesheets/materialize/components/forms/_radio-buttons.scss +1 -3
- data/app/assets/stylesheets/materialize/components/forms/_select.scss +72 -11
- data/app/assets/stylesheets/materialize/components/forms/_switches.scss +2 -4
- data/app/assets/stylesheets/materialize/extras/nouislider.css +8 -1
- data/lib/materialize-sass/version.rb +1 -1
- metadata +2 -5
- data/app/assets/javascripts/materialize/init.js +0 -214
- data/app/assets/javascripts/materialize/jquery.timeago.min.js +0 -1
- data/app/assets/javascripts/materialize/prism.js +0 -8
@@ -1,187 +1,184 @@
|
|
1
1
|
(function ($) {
|
2
2
|
|
3
3
|
var methods = {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
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
|
-
|
59
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
182
|
+
$.error('Method ' + methodOrOptions + ' does not exist on jQuery.tap-target');
|
185
183
|
};
|
186
|
-
|
187
|
-
}( jQuery ));
|
184
|
+
})(jQuery);
|
@@ -1,136 +1,354 @@
|
|
1
|
-
|
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
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
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
|
-
|
38
|
+
/**
|
39
|
+
* Describes current pan state toast
|
40
|
+
* @type {Boolean}
|
41
|
+
*/
|
42
|
+
this.panning = false;
|
63
43
|
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
var classes = className.split(' ');
|
44
|
+
/**
|
45
|
+
* Time remaining until toast is removed
|
46
|
+
*/
|
47
|
+
this.timeRemaining = this.options.displayLength;
|
69
48
|
|
70
|
-
|
71
|
-
|
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
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
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
|
-
|
99
|
-
|
100
|
-
|
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
|
-
|
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
|
-
|
107
|
-
|
108
|
-
|
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
|
-
|
111
|
-
|
112
|
-
|
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
|
-
|
117
|
-
|
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
|
-
|
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);
|