mtl 1.1.0 → 1.1.1
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/app/assets/javascripts/mtl/dropdown.coffee +1 -1
- data/app/assets/stylesheets/mtl/extend/_chips.scss +20 -0
- data/app/assets/stylesheets/mtl/extend/_side-nav.scss +4 -2
- data/lib/generators/mtl/templates/_variables.scss +5 -0
- data/lib/mtl/version.rb +2 -2
- data/mtl.gemspec +11 -0
- data/package.json +1 -1
- data/vendor/assets/javascripts/materialize/animation.js +8 -9
- data/vendor/assets/javascripts/materialize/carousel.js +51 -24
- data/vendor/assets/javascripts/materialize/character_counter.js +2 -2
- data/vendor/assets/javascripts/materialize/chips.js +40 -11
- data/vendor/assets/javascripts/materialize/dropdown.js +12 -12
- data/vendor/assets/javascripts/materialize/forms.js +131 -35
- data/vendor/assets/javascripts/materialize/global.js +55 -0
- data/vendor/assets/javascripts/materialize/init.js +40 -3
- data/vendor/assets/javascripts/materialize/materialbox.js +93 -77
- data/vendor/assets/javascripts/materialize/modal.js +12 -12
- data/vendor/assets/javascripts/materialize/parallax.js +48 -48
- data/vendor/assets/javascripts/materialize/scrollFire.js +40 -37
- data/vendor/assets/javascripts/materialize/scrollspy.js +2 -53
- data/vendor/assets/javascripts/materialize/sideNav.js +46 -40
- data/vendor/assets/javascripts/materialize/slider.js +15 -12
- data/vendor/assets/javascripts/materialize/tabs.js +104 -35
- data/vendor/assets/javascripts/materialize/toasts.js +122 -123
- data/vendor/assets/javascripts/materialize/tooltip.js +15 -13
- data/vendor/assets/javascripts/materialize/transitions.js +24 -24
- data/vendor/assets/stylesheets/materialize/_badges.scss +46 -0
- data/vendor/assets/stylesheets/materialize/_buttons.scss +29 -17
- data/vendor/assets/stylesheets/materialize/_cards.scss +9 -3
- data/vendor/assets/stylesheets/materialize/_carousel.scss +1 -1
- data/vendor/assets/stylesheets/materialize/_collapsible.scss +3 -7
- data/vendor/assets/stylesheets/materialize/_global.scss +5 -61
- data/vendor/assets/stylesheets/materialize/_materialbox.scss +13 -12
- data/vendor/assets/stylesheets/materialize/_navbar.scss +26 -7
- data/vendor/assets/stylesheets/materialize/_sideNav.scss +5 -5
- data/vendor/assets/stylesheets/materialize/_table_of_contents.scss +2 -2
- data/vendor/assets/stylesheets/materialize/_toast.scss +1 -1
- data/vendor/assets/stylesheets/materialize/_tooltip.scss +2 -3
- data/vendor/assets/stylesheets/materialize/_transitions.scss +13 -0
- data/vendor/assets/stylesheets/materialize/_variables.scss +7 -1
- data/vendor/assets/stylesheets/materialize/_waves.scss +80 -143
- data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +4 -4
- metadata +9 -4
@@ -3,7 +3,9 @@
|
|
3
3
|
var methods = {
|
4
4
|
init : function(options) {
|
5
5
|
var defaults = {
|
6
|
-
onShow: null
|
6
|
+
onShow: null,
|
7
|
+
swipeable: false,
|
8
|
+
responsiveThreshold: Infinity, // breakpoint for swipeable
|
7
9
|
};
|
8
10
|
options = $.extend(defaults, options);
|
9
11
|
|
@@ -16,8 +18,15 @@
|
|
16
18
|
|
17
19
|
var $active, $content, $links = $this.find('li.tab a'),
|
18
20
|
$tabs_width = $this.width(),
|
21
|
+
$tabs_content = $(),
|
22
|
+
$tabs_wrapper,
|
19
23
|
$tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
|
20
|
-
$
|
24
|
+
$indicator,
|
25
|
+
index = prev_index = 0,
|
26
|
+
clicked = false,
|
27
|
+
clickedTimeout,
|
28
|
+
transition = 300;
|
29
|
+
|
21
30
|
|
22
31
|
// Finds right attribute for indicator based on active tab.
|
23
32
|
// el: jQuery Object
|
@@ -31,6 +40,27 @@
|
|
31
40
|
return el.position().left + $this.scrollLeft();
|
32
41
|
};
|
33
42
|
|
43
|
+
// Animates Indicator to active tab.
|
44
|
+
// prev_index: Number
|
45
|
+
var animateIndicator = function(prev_index) {
|
46
|
+
if ((index - prev_index) >= 0) {
|
47
|
+
$indicator.velocity({"right": calcRightPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad'});
|
48
|
+
$indicator.velocity({"left": calcLeftPos($active) }, {duration: transition, queue: false, easing: 'easeOutQuad', delay: 90});
|
49
|
+
|
50
|
+
} else {
|
51
|
+
$indicator.velocity({"left": calcLeftPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad'});
|
52
|
+
$indicator.velocity({"right": calcRightPos($active) }, {duration: transition, queue: false, easing: 'easeOutQuad', delay: 90});
|
53
|
+
}
|
54
|
+
};
|
55
|
+
|
56
|
+
// Change swipeable according to responsive threshold
|
57
|
+
if (options.swipeable) {
|
58
|
+
if (window_width > options.responsiveThreshold) {
|
59
|
+
options.swipeable = false;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
|
34
64
|
// If the location.hash matches one of the links, use that as the active tab.
|
35
65
|
$active = $($links.filter('[href="'+location.hash+'"]'));
|
36
66
|
|
@@ -43,21 +73,28 @@
|
|
43
73
|
}
|
44
74
|
|
45
75
|
$active.addClass('active');
|
46
|
-
|
47
|
-
if (
|
48
|
-
|
76
|
+
index = $links.index($active);
|
77
|
+
if (index < 0) {
|
78
|
+
index = 0;
|
49
79
|
}
|
50
80
|
|
51
81
|
if ($active[0] !== undefined) {
|
52
82
|
$content = $($active[0].hash);
|
83
|
+
$content.addClass('active');
|
53
84
|
}
|
54
85
|
|
55
86
|
// append indicator then set indicator width to tab width
|
56
|
-
|
57
|
-
|
87
|
+
if (!$this.find('.indicator').length) {
|
88
|
+
$this.append('<div class="indicator"></div>');
|
89
|
+
}
|
90
|
+
$indicator = $this.find('.indicator');
|
91
|
+
|
92
|
+
// we make sure that the indicator is at the end of the tabs
|
93
|
+
$this.append($indicator);
|
94
|
+
|
58
95
|
if ($this.is(":visible")) {
|
59
|
-
// $indicator.css({"right": $tabs_width - ((
|
60
|
-
// $indicator.css({"left":
|
96
|
+
// $indicator.css({"right": $tabs_width - ((index + 1) * $tab_width)});
|
97
|
+
// $indicator.css({"left": index * $tab_width});
|
61
98
|
setTimeout(function() {
|
62
99
|
$indicator.css({"right": calcRightPos($active) });
|
63
100
|
$indicator.css({"left": calcLeftPos($active) });
|
@@ -66,8 +103,8 @@
|
|
66
103
|
$(window).resize(function () {
|
67
104
|
$tabs_width = $this.width();
|
68
105
|
$tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
|
69
|
-
if (
|
70
|
-
|
106
|
+
if (index < 0) {
|
107
|
+
index = 0;
|
71
108
|
}
|
72
109
|
if ($tab_width !== 0 && $tabs_width !== 0) {
|
73
110
|
$indicator.css({"right": calcRightPos($active) });
|
@@ -75,10 +112,34 @@
|
|
75
112
|
}
|
76
113
|
});
|
77
114
|
|
78
|
-
//
|
79
|
-
|
80
|
-
|
81
|
-
|
115
|
+
// Initialize Tabs Content.
|
116
|
+
if (options.swipeable) {
|
117
|
+
// TODO: Duplicate calls with swipeable? handle multiple div wrapping.
|
118
|
+
$links.each(function () {
|
119
|
+
var $curr_content = $(Materialize.escapeHash(this.hash));
|
120
|
+
$curr_content.addClass('carousel-item');
|
121
|
+
$tabs_content = $tabs_content.add($curr_content);
|
122
|
+
});
|
123
|
+
$tabs_wrapper = $tabs_content.wrapAll('<div class="tabs-content carousel"></div>');
|
124
|
+
$tabs_content.css('display', '');
|
125
|
+
$('.tabs-content.carousel').carousel({
|
126
|
+
fullWidth: true,
|
127
|
+
noWrap: true,
|
128
|
+
onCycleTo: function(item) {
|
129
|
+
if (!clicked) {
|
130
|
+
var prev_index = index;
|
131
|
+
index = $tabs_wrapper.index(item);
|
132
|
+
$active = $links.eq(index);
|
133
|
+
animateIndicator(prev_index);
|
134
|
+
}
|
135
|
+
},
|
136
|
+
});
|
137
|
+
} else {
|
138
|
+
// Hide the remaining content
|
139
|
+
$links.not($active).each(function () {
|
140
|
+
$(Materialize.escapeHash(this.hash)).hide();
|
141
|
+
});
|
142
|
+
}
|
82
143
|
|
83
144
|
|
84
145
|
// Bind the click event handler
|
@@ -93,14 +154,13 @@
|
|
93
154
|
return;
|
94
155
|
}
|
95
156
|
|
157
|
+
clicked = true;
|
96
158
|
$tabs_width = $this.width();
|
97
159
|
$tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
|
98
160
|
|
99
161
|
// Make the old tab inactive.
|
100
162
|
$active.removeClass('active');
|
101
|
-
|
102
|
-
$content.hide();
|
103
|
-
}
|
163
|
+
var $oldContent = $content
|
104
164
|
|
105
165
|
// Update the variables with the new link and content
|
106
166
|
$active = $(this);
|
@@ -110,31 +170,40 @@
|
|
110
170
|
|
111
171
|
// Make the tab active.
|
112
172
|
$active.addClass('active');
|
113
|
-
|
114
|
-
|
115
|
-
if (
|
116
|
-
|
173
|
+
prev_index = index;
|
174
|
+
index = $links.index($(this));
|
175
|
+
if (index < 0) {
|
176
|
+
index = 0;
|
117
177
|
}
|
118
178
|
// Change url to current tab
|
119
179
|
// window.location.hash = $active.attr('href');
|
120
180
|
|
121
|
-
|
122
|
-
|
123
|
-
if (
|
124
|
-
|
181
|
+
// Swap content
|
182
|
+
if (options.swipeable) {
|
183
|
+
if ($tabs_content.length) {
|
184
|
+
$tabs_content.carousel('set', index);
|
185
|
+
}
|
186
|
+
} else {
|
187
|
+
if ($content !== undefined) {
|
188
|
+
$content.show();
|
189
|
+
$content.addClass('active');
|
190
|
+
if (typeof(options.onShow) === "function") {
|
191
|
+
options.onShow.call(this, $content);
|
192
|
+
}
|
125
193
|
}
|
126
|
-
}
|
127
194
|
|
128
|
-
|
195
|
+
if ($oldContent !== undefined &&
|
196
|
+
!$oldContent.is($content)) {
|
197
|
+
$oldContent.hide();
|
198
|
+
$oldContent.removeClass('active');
|
199
|
+
}
|
200
|
+
}
|
129
201
|
|
130
|
-
|
131
|
-
|
132
|
-
$indicator.velocity({"left": calcLeftPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
|
202
|
+
// Reset clicked state
|
203
|
+
clickedTimeout = setTimeout(function(){ clicked = false; }, transition);
|
133
204
|
|
134
|
-
|
135
|
-
|
136
|
-
$indicator.velocity({"right": calcRightPos($active) }, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
|
137
|
-
}
|
205
|
+
// Update indicator
|
206
|
+
animateIndicator(prev_index);
|
138
207
|
|
139
208
|
// Prevent the anchor's default click action
|
140
209
|
e.preventDefault();
|
@@ -1,137 +1,136 @@
|
|
1
1
|
Materialize.toast = function (message, displayLength, className, completeCallback) {
|
2
|
-
|
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
|
+
}
|
41
|
+
|
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);
|
56
|
+
}
|
57
|
+
}, 20);
|
58
|
+
}
|
3
59
|
|
4
|
-
var container = document.getElementById('toast-container');
|
5
60
|
|
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
61
|
|
14
|
-
|
15
|
-
var newToast = createToast(message);
|
62
|
+
function createToast(html) {
|
16
63
|
|
17
|
-
//
|
18
|
-
|
19
|
-
|
20
|
-
|
64
|
+
// Create toast
|
65
|
+
var toast = document.createElement('div');
|
66
|
+
toast.classList.add('toast');
|
67
|
+
if (className) {
|
68
|
+
var classes = className.split(' ');
|
21
69
|
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
// Animate toast in
|
26
|
-
Vel(newToast, { "top" : "0px", opacity: 1 }, {duration: 300,
|
27
|
-
easing: 'easeOutCubic',
|
28
|
-
queue: false});
|
29
|
-
|
30
|
-
// Allows timer to be pause while being panned
|
31
|
-
var timeLeft = displayLength;
|
32
|
-
var counterInterval;
|
33
|
-
if (timeLeft != null) {
|
34
|
-
counterInterval = setInterval (function(){
|
35
|
-
if (newToast.parentNode === null)
|
36
|
-
window.clearInterval(counterInterval);
|
37
|
-
|
38
|
-
// If toast is not being dragged, decrease its time remaining
|
39
|
-
if (!newToast.classList.contains('panning')) {
|
40
|
-
timeLeft -= 20;
|
41
|
-
}
|
42
|
-
|
43
|
-
if (timeLeft <= 0) {
|
44
|
-
// Animate toast out
|
45
|
-
Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
|
46
|
-
easing: 'easeOutExpo',
|
47
|
-
queue: false,
|
48
|
-
complete: function(){
|
49
|
-
// Call the optional callback
|
50
|
-
if(typeof(completeCallback) === "function")
|
51
|
-
completeCallback();
|
52
|
-
// Remove toast after it times out
|
53
|
-
this[0].parentNode.removeChild(this[0]);
|
54
|
-
}
|
55
|
-
});
|
56
|
-
window.clearInterval(counterInterval);
|
57
|
-
}
|
58
|
-
}, 20);
|
70
|
+
for (var i = 0, count = classes.length; i < count; i++) {
|
71
|
+
toast.classList.add(classes[i]);
|
72
|
+
}
|
59
73
|
}
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
function createToast(html) {
|
64
|
-
|
65
|
-
// Create toast
|
66
|
-
var toast = document.createElement('div');
|
67
|
-
toast.classList.add('toast');
|
68
|
-
if (className) {
|
69
|
-
var classes = className.split(' ');
|
70
|
-
|
71
|
-
for (var i = 0, count = classes.length; i < count; i++) {
|
72
|
-
toast.classList.add(classes[i]);
|
73
|
-
}
|
74
|
-
}
|
75
|
-
// If type of parameter is HTML Element
|
76
|
-
if ( typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName==="string"
|
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"
|
77
76
|
) {
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
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');
|
96
|
+
}
|
97
|
+
|
98
|
+
var opacityPercent = 1-Math.abs(deltaX / activationDistance);
|
99
|
+
if (opacityPercent < 0)
|
100
|
+
opacityPercent = 0;
|
101
|
+
|
102
|
+
Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
103
|
+
|
104
|
+
});
|
105
|
+
|
106
|
+
hammerHandler.on('panend', function(e) {
|
107
|
+
var deltaX = e.deltaX;
|
108
|
+
var activationDistance = 80;
|
109
|
+
|
110
|
+
// If toast dragged past activation point
|
111
|
+
if (Math.abs(deltaX) > activationDistance) {
|
112
|
+
Vel(toast, {marginTop: '-40px'}, { duration: 375,
|
113
|
+
easing: 'easeOutExpo',
|
114
|
+
queue: false,
|
115
|
+
complete: function(){
|
116
|
+
if(typeof(completeCallback) === "function") {
|
117
|
+
completeCallback();
|
118
|
+
}
|
119
|
+
toast.parentNode.removeChild(toast);
|
97
120
|
}
|
98
|
-
|
99
|
-
var opacityPercent = 1-Math.abs(deltaX / activationDistance);
|
100
|
-
if (opacityPercent < 0)
|
101
|
-
opacityPercent = 0;
|
102
|
-
|
103
|
-
Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
104
|
-
|
105
121
|
});
|
106
122
|
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
Vel(toast, {marginTop: '-40px'}, { duration: 375,
|
114
|
-
easing: 'easeOutExpo',
|
115
|
-
queue: false,
|
116
|
-
complete: function(){
|
117
|
-
if(typeof(completeCallback) === "function") {
|
118
|
-
completeCallback();
|
119
|
-
}
|
120
|
-
toast.parentNode.removeChild(toast);
|
121
|
-
}
|
122
|
-
});
|
123
|
-
|
124
|
-
} else {
|
125
|
-
toast.classList.remove('panning');
|
126
|
-
// Put toast back into original position
|
127
|
-
Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
|
128
|
-
easing: 'easeOutExpo',
|
129
|
-
queue: false
|
130
|
-
});
|
131
|
-
|
132
|
-
}
|
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
|
133
129
|
});
|
134
130
|
|
135
|
-
|
136
|
-
}
|
131
|
+
}
|
132
|
+
});
|
133
|
+
|
134
|
+
return toast;
|
135
|
+
}
|
137
136
|
};
|
@@ -86,18 +86,20 @@
|
|
86
86
|
started = true;
|
87
87
|
tooltipEl.velocity('stop');
|
88
88
|
backdrop.velocity('stop');
|
89
|
-
tooltipEl.css({
|
89
|
+
tooltipEl.css({ visibility: 'visible', left: '0px', top: '0px' });
|
90
90
|
|
91
91
|
// Tooltip positioning
|
92
92
|
var originWidth = origin.outerWidth();
|
93
93
|
var originHeight = origin.outerHeight();
|
94
|
-
|
95
94
|
var tooltipHeight = tooltipEl.outerHeight();
|
96
95
|
var tooltipWidth = tooltipEl.outerWidth();
|
97
96
|
var tooltipVerticalMovement = '0px';
|
98
97
|
var tooltipHorizontalMovement = '0px';
|
98
|
+
var backdropOffsetWidth = backdrop[0].offsetWidth;
|
99
|
+
var backdropOffsetHeight = backdrop[0].offsetHeight;
|
99
100
|
var scaleXFactor = 8;
|
100
101
|
var scaleYFactor = 8;
|
102
|
+
var scaleFactor = 0;
|
101
103
|
var targetTop, targetLeft, newCoordinates;
|
102
104
|
|
103
105
|
if (tooltipPosition === "top") {
|
@@ -105,7 +107,6 @@
|
|
105
107
|
targetTop = origin.offset().top - tooltipHeight - margin;
|
106
108
|
targetLeft = origin.offset().left + originWidth/2 - tooltipWidth/2;
|
107
109
|
newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
|
108
|
-
|
109
110
|
tooltipVerticalMovement = '-10px';
|
110
111
|
backdrop.css({
|
111
112
|
bottom: 0,
|
@@ -113,7 +114,7 @@
|
|
113
114
|
borderRadius: '14px 14px 0 0',
|
114
115
|
transformOrigin: '50% 100%',
|
115
116
|
marginTop: tooltipHeight,
|
116
|
-
marginLeft: (tooltipWidth/2) - (
|
117
|
+
marginLeft: (tooltipWidth/2) - (backdropOffsetWidth/2)
|
117
118
|
});
|
118
119
|
}
|
119
120
|
// Left Position
|
@@ -161,7 +162,7 @@
|
|
161
162
|
backdrop.css({
|
162
163
|
top: 0,
|
163
164
|
left: 0,
|
164
|
-
marginLeft: (tooltipWidth/2) - (
|
165
|
+
marginLeft: (tooltipWidth/2) - (backdropOffsetWidth/2)
|
165
166
|
});
|
166
167
|
}
|
167
168
|
|
@@ -172,14 +173,15 @@
|
|
172
173
|
});
|
173
174
|
|
174
175
|
// Calculate Scale to fill
|
175
|
-
scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(
|
176
|
-
scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(
|
176
|
+
scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdropOffsetWidth);
|
177
|
+
scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdropOffsetHeight);
|
178
|
+
scaleFactor = Math.max(scaleXFactor, scaleYFactor);
|
177
179
|
|
178
|
-
tooltipEl.velocity({
|
180
|
+
tooltipEl.velocity({ translateY: tooltipVerticalMovement, translateX: tooltipHorizontalMovement}, { duration: 350, queue: false })
|
179
181
|
.velocity({opacity: 1}, {duration: 300, delay: 50, queue: false});
|
180
|
-
backdrop.css({
|
182
|
+
backdrop.css({ visibility: 'visible' })
|
181
183
|
.velocity({opacity:1},{duration: 55, delay: 0, queue: false})
|
182
|
-
.velocity({scaleX:
|
184
|
+
.velocity({scaleX: scaleFactor, scaleY: scaleFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
|
183
185
|
};
|
184
186
|
|
185
187
|
timeoutRef = setTimeout(showTooltip, tooltipDelay); // End Interval
|
@@ -195,13 +197,13 @@
|
|
195
197
|
setTimeout(function() {
|
196
198
|
if (started !== true) {
|
197
199
|
tooltipEl.velocity({
|
198
|
-
opacity: 0,
|
200
|
+
opacity: 0, translateY: 0, translateX: 0}, { duration: 225, queue: false});
|
199
201
|
backdrop.velocity({opacity: 0, scaleX: 1, scaleY: 1}, {
|
200
202
|
duration:225,
|
201
203
|
queue: false,
|
202
204
|
complete: function(){
|
203
|
-
backdrop.css('
|
204
|
-
tooltipEl.css('
|
205
|
+
backdrop.css({ visibility: 'hidden' });
|
206
|
+
tooltipEl.css({ visibility: 'hidden' });
|
205
207
|
started = false;}
|
206
208
|
});
|
207
209
|
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
(function ($) {
|
2
2
|
// Image transition function
|
3
|
-
Materialize.fadeInImage =
|
3
|
+
Materialize.fadeInImage = function(selectorOrEl) {
|
4
4
|
var element;
|
5
5
|
if (typeof(selectorOrEl) === 'string') {
|
6
6
|
element = $(selectorOrEl);
|
@@ -11,30 +11,30 @@
|
|
11
11
|
}
|
12
12
|
element.css({opacity: 0});
|
13
13
|
$(element).velocity({opacity: 1}, {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
14
|
+
duration: 650,
|
15
|
+
queue: false,
|
16
|
+
easing: 'easeOutSine'
|
17
|
+
});
|
18
18
|
$(element).velocity({opacity: 1}, {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
19
|
+
duration: 1300,
|
20
|
+
queue: false,
|
21
|
+
easing: 'swing',
|
22
|
+
step: function(now, fx) {
|
23
|
+
fx.start = 100;
|
24
|
+
var grayscale_setting = now/100;
|
25
|
+
var brightness_setting = 150 - (100 - now)/1.75;
|
26
|
+
|
27
|
+
if (brightness_setting < 100) {
|
28
|
+
brightness_setting = 100;
|
29
|
+
}
|
30
|
+
if (now >= 0) {
|
31
|
+
$(this).css({
|
32
|
+
"-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
|
33
|
+
"filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
|
34
|
+
});
|
35
|
+
}
|
36
|
+
}
|
37
|
+
});
|
38
38
|
};
|
39
39
|
|
40
40
|
// Horizontal staggered list
|
@@ -0,0 +1,46 @@
|
|
1
|
+
// Badges
|
2
|
+
span.badge {
|
3
|
+
min-width: 3rem;
|
4
|
+
padding: 0 6px;
|
5
|
+
margin-left: 14px;
|
6
|
+
text-align: center;
|
7
|
+
font-size: 1rem;
|
8
|
+
line-height: $badge-height;
|
9
|
+
height: $badge-height;
|
10
|
+
color: color('grey', 'darken-1');
|
11
|
+
float: right;
|
12
|
+
box-sizing: border-box;
|
13
|
+
|
14
|
+
&.new {
|
15
|
+
font-weight: 300;
|
16
|
+
font-size: 0.8rem;
|
17
|
+
color: #fff;
|
18
|
+
background-color: $badge-bg-color;
|
19
|
+
border-radius: 2px;
|
20
|
+
}
|
21
|
+
&.new:after {
|
22
|
+
content: " new";
|
23
|
+
}
|
24
|
+
|
25
|
+
&[data-badge-caption]::after {
|
26
|
+
content: " " attr(data-badge-caption);
|
27
|
+
}
|
28
|
+
}
|
29
|
+
nav ul a span.badge {
|
30
|
+
display: inline-block;
|
31
|
+
float: none;
|
32
|
+
margin-left: 4px;
|
33
|
+
line-height: $badge-height;
|
34
|
+
height: $badge-height;
|
35
|
+
}
|
36
|
+
|
37
|
+
// Line height centering
|
38
|
+
.collection-item span.badge {
|
39
|
+
margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2});
|
40
|
+
}
|
41
|
+
.collapsible span.badge {
|
42
|
+
margin-top: calc(#{$collapsible-line-height / 2} - #{$badge-height / 2});
|
43
|
+
}
|
44
|
+
.side-nav span.badge {
|
45
|
+
margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
|
46
|
+
}
|