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
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
var methods = {
|
4
4
|
|
5
|
-
init
|
5
|
+
init: function (options) {
|
6
6
|
var defaults = {
|
7
7
|
indicators: true,
|
8
8
|
height: 400,
|
@@ -11,7 +11,7 @@
|
|
11
11
|
};
|
12
12
|
options = $.extend(defaults, options);
|
13
13
|
|
14
|
-
return this.each(function() {
|
14
|
+
return this.each(function () {
|
15
15
|
|
16
16
|
// For each slider, we want to keep track of
|
17
17
|
// which slide is active and its associated content
|
@@ -20,26 +20,25 @@
|
|
20
20
|
var $slides = $slider.find('> li');
|
21
21
|
var $active_index = $slider.find('.active').index();
|
22
22
|
var $active, $indicators, $interval;
|
23
|
-
if ($active_index != -1) {
|
23
|
+
if ($active_index != -1) {
|
24
|
+
$active = $slides.eq($active_index);
|
25
|
+
}
|
24
26
|
|
25
27
|
// Transitions the caption depending on alignment
|
26
28
|
function captionTransition(caption, duration) {
|
27
29
|
if (caption.hasClass("center-align")) {
|
28
|
-
caption.velocity({opacity: 0, translateY: -100}, {duration: duration, queue: false});
|
29
|
-
}
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
else if (caption.hasClass("left-align")) {
|
34
|
-
caption.velocity({opacity: 0, translateX: -100}, {duration: duration, queue: false});
|
30
|
+
caption.velocity({ opacity: 0, translateY: -100 }, { duration: duration, queue: false });
|
31
|
+
} else if (caption.hasClass("right-align")) {
|
32
|
+
caption.velocity({ opacity: 0, translateX: 100 }, { duration: duration, queue: false });
|
33
|
+
} else if (caption.hasClass("left-align")) {
|
34
|
+
caption.velocity({ opacity: 0, translateX: -100 }, { duration: duration, queue: false });
|
35
35
|
}
|
36
36
|
}
|
37
37
|
|
38
38
|
// This function will transition the slide to any index of the next slide
|
39
39
|
function moveToSlide(index) {
|
40
40
|
// Wrap around indices.
|
41
|
-
if (index >= $slides.length) index = 0;
|
42
|
-
else if (index < 0) index = $slides.length -1;
|
41
|
+
if (index >= $slides.length) index = 0;else if (index < 0) index = $slides.length - 1;
|
43
42
|
|
44
43
|
$active_index = $slider.find('.active').index();
|
45
44
|
|
@@ -49,23 +48,21 @@
|
|
49
48
|
$caption = $active.find('.caption');
|
50
49
|
|
51
50
|
$active.removeClass('active');
|
52
|
-
$active.velocity({opacity: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad',
|
53
|
-
|
54
|
-
|
55
|
-
|
51
|
+
$active.velocity({ opacity: 0 }, { duration: options.transition, queue: false, easing: 'easeOutQuad',
|
52
|
+
complete: function () {
|
53
|
+
$slides.not('.active').velocity({ opacity: 0, translateX: 0, translateY: 0 }, { duration: 0, queue: false });
|
54
|
+
} });
|
56
55
|
captionTransition($caption, options.transition);
|
57
56
|
|
58
|
-
|
59
57
|
// Update indicators
|
60
58
|
if (options.indicators) {
|
61
59
|
$indicators.eq($active_index).removeClass('active');
|
62
60
|
}
|
63
61
|
|
64
|
-
$slides.eq(index).velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
65
|
-
$slides.eq(index).find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, delay: options.transition, queue: false, easing: 'easeOutQuad'});
|
62
|
+
$slides.eq(index).velocity({ opacity: 1 }, { duration: options.transition, queue: false, easing: 'easeOutQuad' });
|
63
|
+
$slides.eq(index).find('.caption').velocity({ opacity: 1, translateX: 0, translateY: 0 }, { duration: options.transition, delay: options.transition, queue: false, easing: 'easeOutQuad' });
|
66
64
|
$slides.eq(index).addClass('active');
|
67
65
|
|
68
|
-
|
69
66
|
// Update indicators
|
70
67
|
if (options.indicators) {
|
71
68
|
$indicators.eq(index).addClass('active');
|
@@ -79,14 +76,12 @@
|
|
79
76
|
if (options.indicators) {
|
80
77
|
// Add height if indicators are present
|
81
78
|
$this.height(options.height + 40);
|
82
|
-
}
|
83
|
-
else {
|
79
|
+
} else {
|
84
80
|
$this.height(options.height);
|
85
81
|
}
|
86
82
|
$slider.height(options.height);
|
87
83
|
}
|
88
84
|
|
89
|
-
|
90
85
|
// Set initial positions of captions
|
91
86
|
$slides.find('.caption').each(function () {
|
92
87
|
captionTransition($(this), 0);
|
@@ -96,7 +91,7 @@
|
|
96
91
|
$slides.find('img').each(function () {
|
97
92
|
var placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
|
98
93
|
if ($(this).attr('src') !== placeholderBase64) {
|
99
|
-
$(this).css('background-image', 'url("' + $(this).attr('src') + '")'
|
94
|
+
$(this).css('background-image', 'url("' + $(this).attr('src') + '")');
|
100
95
|
$(this).attr('src', placeholderBase64);
|
101
96
|
}
|
102
97
|
});
|
@@ -104,7 +99,7 @@
|
|
104
99
|
// dynamically add indicators
|
105
100
|
if (options.indicators) {
|
106
101
|
$indicators = $('<ul class="indicators"></ul>');
|
107
|
-
$slides.each(function(
|
102
|
+
$slides.each(function (index) {
|
108
103
|
var $indicator = $('<li class="indicator-item"></li>');
|
109
104
|
|
110
105
|
// Handle clicks on indicators
|
@@ -115,16 +110,13 @@
|
|
115
110
|
|
116
111
|
// reset interval
|
117
112
|
clearInterval($interval);
|
118
|
-
$interval = setInterval(
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
else $active_index += 1;
|
123
|
-
|
124
|
-
moveToSlide($active_index);
|
113
|
+
$interval = setInterval(function () {
|
114
|
+
$active_index = $slider.find('.active').index();
|
115
|
+
if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
|
116
|
+
else $active_index += 1;
|
125
117
|
|
126
|
-
|
127
|
-
);
|
118
|
+
moveToSlide($active_index);
|
119
|
+
}, options.transition + options.interval);
|
128
120
|
});
|
129
121
|
$indicators.append($indicator);
|
130
122
|
});
|
@@ -134,9 +126,8 @@
|
|
134
126
|
|
135
127
|
if ($active) {
|
136
128
|
$active.show();
|
137
|
-
}
|
138
|
-
|
139
|
-
$slides.first().addClass('active').velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
129
|
+
} else {
|
130
|
+
$slides.first().addClass('active').velocity({ opacity: 1 }, { duration: options.transition, queue: false, easing: 'easeOutQuad' });
|
140
131
|
|
141
132
|
$active_index = 0;
|
142
133
|
$active = $slides.eq($active_index);
|
@@ -148,19 +139,15 @@
|
|
148
139
|
}
|
149
140
|
|
150
141
|
// Adjust height to current slide
|
151
|
-
$active.find('img').each(function() {
|
152
|
-
$active.find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
142
|
+
$active.find('img').each(function () {
|
143
|
+
$active.find('.caption').velocity({ opacity: 1, translateX: 0, translateY: 0 }, { duration: options.transition, queue: false, easing: 'easeOutQuad' });
|
153
144
|
});
|
154
145
|
|
155
146
|
// auto scroll
|
156
|
-
$interval = setInterval(
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
}, options.transition + options.interval
|
162
|
-
);
|
163
|
-
|
147
|
+
$interval = setInterval(function () {
|
148
|
+
$active_index = $slider.find('.active').index();
|
149
|
+
moveToSlide($active_index + 1);
|
150
|
+
}, options.transition + options.interval);
|
164
151
|
|
165
152
|
// HammerJS, Swipe navigation
|
166
153
|
|
@@ -170,8 +157,8 @@
|
|
170
157
|
var swipeRight = false;
|
171
158
|
|
172
159
|
$this.hammer({
|
173
|
-
|
174
|
-
}).on('pan', function(e) {
|
160
|
+
prevent_default: false
|
161
|
+
}).on('pan', function (e) {
|
175
162
|
if (e.gesture.pointerType === "touch") {
|
176
163
|
|
177
164
|
// reset interval
|
@@ -185,17 +172,17 @@
|
|
185
172
|
$curr_slide = $slider.find('.active');
|
186
173
|
if (Math.abs(velocityX) > Math.abs(velocityY)) {
|
187
174
|
$curr_slide.velocity({ translateX: x
|
188
|
-
|
175
|
+
}, { duration: 50, queue: false, easing: 'easeOutQuad' });
|
189
176
|
}
|
190
177
|
|
191
178
|
// Swipe Left
|
192
|
-
if (direction === 4 && (x >
|
179
|
+
if (direction === 4 && (x > $this.innerWidth() / 2 || velocityX < -0.65)) {
|
193
180
|
swipeRight = true;
|
194
181
|
}
|
195
182
|
// Swipe Right
|
196
|
-
else if (direction === 2 && (x <
|
197
|
-
|
198
|
-
|
183
|
+
else if (direction === 2 && (x < -1 * $this.innerWidth() / 2 || velocityX > 0.65)) {
|
184
|
+
swipeLeft = true;
|
185
|
+
}
|
199
186
|
|
200
187
|
// Make Slide Behind active slide visible
|
201
188
|
var next_slide;
|
@@ -205,7 +192,7 @@
|
|
205
192
|
next_slide = $slides.first();
|
206
193
|
}
|
207
194
|
next_slide.velocity({ opacity: 1
|
208
|
-
|
195
|
+
}, { duration: 300, queue: false, easing: 'easeOutQuad' });
|
209
196
|
}
|
210
197
|
if (swipeRight) {
|
211
198
|
next_slide = $curr_slide.prev();
|
@@ -213,112 +200,96 @@
|
|
213
200
|
next_slide = $slides.last();
|
214
201
|
}
|
215
202
|
next_slide.velocity({ opacity: 1
|
216
|
-
|
203
|
+
}, { duration: 300, queue: false, easing: 'easeOutQuad' });
|
217
204
|
}
|
218
|
-
|
219
|
-
|
220
205
|
}
|
221
|
-
|
222
|
-
}).on('panend', function(e) {
|
206
|
+
}).on('panend', function (e) {
|
223
207
|
if (e.gesture.pointerType === "touch") {
|
224
208
|
|
225
209
|
$curr_slide = $slider.find('.active');
|
226
210
|
panning = false;
|
227
211
|
curr_index = $slider.find('.active').index();
|
228
212
|
|
229
|
-
if (!swipeRight && !swipeLeft || $slides.length <=1) {
|
213
|
+
if (!swipeRight && !swipeLeft || $slides.length <= 1) {
|
230
214
|
// Return to original spot
|
231
215
|
$curr_slide.velocity({ translateX: 0
|
232
|
-
|
233
|
-
}
|
234
|
-
else if (swipeLeft) {
|
216
|
+
}, { duration: 300, queue: false, easing: 'easeOutQuad' });
|
217
|
+
} else if (swipeLeft) {
|
235
218
|
moveToSlide(curr_index + 1);
|
236
|
-
$curr_slide.velocity({translateX: -1 * $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
}
|
241
|
-
else if (swipeRight) {
|
219
|
+
$curr_slide.velocity({ translateX: -1 * $this.innerWidth() }, { duration: 300, queue: false, easing: 'easeOutQuad',
|
220
|
+
complete: function () {
|
221
|
+
$curr_slide.velocity({ opacity: 0, translateX: 0 }, { duration: 0, queue: false });
|
222
|
+
} });
|
223
|
+
} else if (swipeRight) {
|
242
224
|
moveToSlide(curr_index - 1);
|
243
|
-
$curr_slide.velocity({translateX: $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
|
244
|
-
|
245
|
-
|
246
|
-
|
225
|
+
$curr_slide.velocity({ translateX: $this.innerWidth() }, { duration: 300, queue: false, easing: 'easeOutQuad',
|
226
|
+
complete: function () {
|
227
|
+
$curr_slide.velocity({ opacity: 0, translateX: 0 }, { duration: 0, queue: false });
|
228
|
+
} });
|
247
229
|
}
|
248
230
|
swipeLeft = false;
|
249
231
|
swipeRight = false;
|
250
232
|
|
251
233
|
// Restart interval
|
252
234
|
clearInterval($interval);
|
253
|
-
$interval = setInterval(
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
else $active_index += 1;
|
258
|
-
|
259
|
-
moveToSlide($active_index);
|
235
|
+
$interval = setInterval(function () {
|
236
|
+
$active_index = $slider.find('.active').index();
|
237
|
+
if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
|
238
|
+
else $active_index += 1;
|
260
239
|
|
261
|
-
|
262
|
-
);
|
240
|
+
moveToSlide($active_index);
|
241
|
+
}, options.transition + options.interval);
|
263
242
|
}
|
264
243
|
});
|
265
244
|
|
266
|
-
$this.on('sliderPause', function() {
|
245
|
+
$this.on('sliderPause', function () {
|
267
246
|
clearInterval($interval);
|
268
247
|
});
|
269
248
|
|
270
|
-
$this.on('sliderStart', function() {
|
249
|
+
$this.on('sliderStart', function () {
|
271
250
|
clearInterval($interval);
|
272
|
-
$interval = setInterval(
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
else $active_index += 1;
|
277
|
-
|
278
|
-
moveToSlide($active_index);
|
251
|
+
$interval = setInterval(function () {
|
252
|
+
$active_index = $slider.find('.active').index();
|
253
|
+
if ($slides.length == $active_index + 1) $active_index = 0; // loop to start
|
254
|
+
else $active_index += 1;
|
279
255
|
|
280
|
-
|
281
|
-
);
|
256
|
+
moveToSlide($active_index);
|
257
|
+
}, options.transition + options.interval);
|
282
258
|
});
|
283
259
|
|
284
|
-
$this.on('sliderNext', function() {
|
260
|
+
$this.on('sliderNext', function () {
|
285
261
|
$active_index = $slider.find('.active').index();
|
286
262
|
moveToSlide($active_index + 1);
|
287
263
|
});
|
288
264
|
|
289
|
-
$this.on('sliderPrev', function() {
|
265
|
+
$this.on('sliderPrev', function () {
|
290
266
|
$active_index = $slider.find('.active').index();
|
291
267
|
moveToSlide($active_index - 1);
|
292
268
|
});
|
293
|
-
|
294
269
|
});
|
295
|
-
|
296
|
-
|
297
|
-
|
298
270
|
},
|
299
|
-
pause
|
271
|
+
pause: function () {
|
300
272
|
$(this).trigger('sliderPause');
|
301
273
|
},
|
302
|
-
start
|
274
|
+
start: function () {
|
303
275
|
$(this).trigger('sliderStart');
|
304
276
|
},
|
305
|
-
next
|
277
|
+
next: function () {
|
306
278
|
$(this).trigger('sliderNext');
|
307
279
|
},
|
308
|
-
prev
|
280
|
+
prev: function () {
|
309
281
|
$(this).trigger('sliderPrev');
|
310
282
|
}
|
311
283
|
};
|
312
284
|
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
|
285
|
+
$.fn.slider = function (methodOrOptions) {
|
286
|
+
if (methods[methodOrOptions]) {
|
287
|
+
return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
|
288
|
+
} else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
|
318
289
|
// Default to "init"
|
319
|
-
return methods.init.apply(
|
290
|
+
return methods.init.apply(this, arguments);
|
320
291
|
} else {
|
321
|
-
$.error(
|
292
|
+
$.error('Method ' + methodOrOptions + ' does not exist on jQuery.tooltip');
|
322
293
|
}
|
323
294
|
}; // Plugin end
|
324
|
-
}(
|
295
|
+
})(jQuery);
|
@@ -1,243 +1,243 @@
|
|
1
1
|
(function ($) {
|
2
2
|
|
3
3
|
var methods = {
|
4
|
-
init
|
4
|
+
init: function (options) {
|
5
5
|
var defaults = {
|
6
6
|
onShow: null,
|
7
7
|
swipeable: false,
|
8
|
-
responsiveThreshold: Infinity
|
8
|
+
responsiveThreshold: Infinity // breakpoint for swipeable
|
9
9
|
};
|
10
10
|
options = $.extend(defaults, options);
|
11
11
|
var namespace = Materialize.objectSelectorString($(this));
|
12
12
|
|
13
|
-
return this.each(function(i) {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
13
|
+
return this.each(function (i) {
|
14
|
+
|
15
|
+
var uniqueNamespace = namespace + i;
|
16
|
+
|
17
|
+
// For each set of tabs, we want to keep track of
|
18
|
+
// which tab is active and its associated content
|
19
|
+
var $this = $(this),
|
20
|
+
window_width = $(window).width();
|
21
|
+
|
22
|
+
var $active,
|
23
|
+
$content,
|
24
|
+
$links = $this.find('li.tab a'),
|
25
|
+
$tabs_width = $this.width(),
|
26
|
+
$tabs_content = $(),
|
27
|
+
$tabs_wrapper,
|
28
|
+
$tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length,
|
29
|
+
$indicator,
|
30
|
+
index = prev_index = 0,
|
31
|
+
clicked = false,
|
32
|
+
clickedTimeout,
|
33
|
+
transition = 300;
|
34
|
+
|
35
|
+
// Finds right attribute for indicator based on active tab.
|
36
|
+
// el: jQuery Object
|
37
|
+
var calcRightPos = function (el) {
|
38
|
+
return Math.ceil($tabs_width - el.position().left - el[0].getBoundingClientRect().width - $this.scrollLeft());
|
39
|
+
};
|
40
|
+
|
41
|
+
// Finds left attribute for indicator based on active tab.
|
42
|
+
// el: jQuery Object
|
43
|
+
var calcLeftPos = function (el) {
|
44
|
+
return Math.floor(el.position().left + $this.scrollLeft());
|
45
|
+
};
|
46
|
+
|
47
|
+
// Animates Indicator to active tab.
|
48
|
+
// prev_index: Number
|
49
|
+
var animateIndicator = function (prev_index) {
|
50
|
+
if (index - prev_index >= 0) {
|
51
|
+
$indicator.velocity({ "right": calcRightPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad' });
|
52
|
+
$indicator.velocity({ "left": calcLeftPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad', delay: 90 });
|
53
|
+
} else {
|
54
|
+
$indicator.velocity({ "left": calcLeftPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad' });
|
55
|
+
$indicator.velocity({ "right": calcRightPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad', delay: 90 });
|
56
|
+
}
|
57
|
+
};
|
39
58
|
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
59
|
+
// Change swipeable according to responsive threshold
|
60
|
+
if (options.swipeable) {
|
61
|
+
if (window_width > options.responsiveThreshold) {
|
62
|
+
options.swipeable = false;
|
63
|
+
}
|
64
|
+
}
|
45
65
|
|
46
|
-
|
47
|
-
|
48
|
-
var animateIndicator = function(prev_index) {
|
49
|
-
if ((index - prev_index) >= 0) {
|
50
|
-
$indicator.velocity({"right": calcRightPos($active) }, { duration: transition, queue: false, easing: 'easeOutQuad'});
|
51
|
-
$indicator.velocity({"left": calcLeftPos($active) }, {duration: transition, queue: false, easing: 'easeOutQuad', delay: 90});
|
66
|
+
// If the location.hash matches one of the links, use that as the active tab.
|
67
|
+
$active = $($links.filter('[href="' + location.hash + '"]'));
|
52
68
|
|
53
|
-
|
54
|
-
|
55
|
-
$
|
69
|
+
// If no match is found, use the first link or any with class 'active' as the initial active tab.
|
70
|
+
if ($active.length === 0) {
|
71
|
+
$active = $(this).find('li.tab a.active').first();
|
56
72
|
}
|
57
|
-
|
58
|
-
|
59
|
-
// Change swipeable according to responsive threshold
|
60
|
-
if (options.swipeable) {
|
61
|
-
if (window_width > options.responsiveThreshold) {
|
62
|
-
options.swipeable = false;
|
73
|
+
if ($active.length === 0) {
|
74
|
+
$active = $(this).find('li.tab a').first();
|
63
75
|
}
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
// If the location.hash matches one of the links, use that as the active tab.
|
68
|
-
$active = $($links.filter('[href="'+location.hash+'"]'));
|
69
|
-
|
70
|
-
// If no match is found, use the first link or any with class 'active' as the initial active tab.
|
71
|
-
if ($active.length === 0) {
|
72
|
-
$active = $(this).find('li.tab a.active').first();
|
73
|
-
}
|
74
|
-
if ($active.length === 0) {
|
75
|
-
$active = $(this).find('li.tab a').first();
|
76
|
-
}
|
77
|
-
|
78
|
-
$active.addClass('active');
|
79
|
-
index = $links.index($active);
|
80
|
-
if (index < 0) {
|
81
|
-
index = 0;
|
82
|
-
}
|
83
|
-
|
84
|
-
if ($active[0] !== undefined) {
|
85
|
-
$content = $($active[0].hash);
|
86
|
-
$content.addClass('active');
|
87
|
-
}
|
88
|
-
|
89
|
-
// append indicator then set indicator width to tab width
|
90
|
-
if (!$this.find('.indicator').length) {
|
91
|
-
$this.append('<li class="indicator"></li>');
|
92
|
-
}
|
93
|
-
$indicator = $this.find('.indicator');
|
94
|
-
|
95
|
-
// we make sure that the indicator is at the end of the tabs
|
96
|
-
$this.append($indicator);
|
97
|
-
|
98
|
-
if ($this.is(":visible")) {
|
99
|
-
// $indicator.css({"right": $tabs_width - ((index + 1) * $tab_width)});
|
100
|
-
// $indicator.css({"left": index * $tab_width});
|
101
|
-
setTimeout(function() {
|
102
|
-
$indicator.css({"right": calcRightPos($active) });
|
103
|
-
$indicator.css({"left": calcLeftPos($active) });
|
104
|
-
}, 0);
|
105
|
-
}
|
106
|
-
$(window).off('resize.tabs-'+uniqueNamespace).on('resize.tabs-'+uniqueNamespace, function () {
|
107
|
-
$tabs_width = $this.width();
|
108
|
-
$tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
|
76
|
+
|
77
|
+
$active.addClass('active');
|
78
|
+
index = $links.index($active);
|
109
79
|
if (index < 0) {
|
110
80
|
index = 0;
|
111
81
|
}
|
112
|
-
|
113
|
-
|
114
|
-
$
|
82
|
+
|
83
|
+
if ($active[0] !== undefined) {
|
84
|
+
$content = $($active[0].hash);
|
85
|
+
$content.addClass('active');
|
115
86
|
}
|
116
|
-
});
|
117
87
|
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
88
|
+
// append indicator then set indicator width to tab width
|
89
|
+
if (!$this.find('.indicator').length) {
|
90
|
+
$this.append('<li class="indicator"></li>');
|
91
|
+
}
|
92
|
+
$indicator = $this.find('.indicator');
|
93
|
+
|
94
|
+
// we make sure that the indicator is at the end of the tabs
|
95
|
+
$this.append($indicator);
|
96
|
+
|
97
|
+
if ($this.is(":visible")) {
|
98
|
+
// $indicator.css({"right": $tabs_width - ((index + 1) * $tab_width)});
|
99
|
+
// $indicator.css({"left": index * $tab_width});
|
100
|
+
setTimeout(function () {
|
101
|
+
$indicator.css({ "right": calcRightPos($active) });
|
102
|
+
$indicator.css({ "left": calcLeftPos($active) });
|
103
|
+
}, 0);
|
104
|
+
}
|
105
|
+
$(window).off('resize.tabs-' + uniqueNamespace).on('resize.tabs-' + uniqueNamespace, function () {
|
106
|
+
$tabs_width = $this.width();
|
107
|
+
$tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
|
108
|
+
if (index < 0) {
|
109
|
+
index = 0;
|
110
|
+
}
|
111
|
+
if ($tab_width !== 0 && $tabs_width !== 0) {
|
112
|
+
$indicator.css({ "right": calcRightPos($active) });
|
113
|
+
$indicator.css({ "left": calcLeftPos($active) });
|
114
|
+
}
|
125
115
|
});
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
116
|
+
|
117
|
+
// Initialize Tabs Content.
|
118
|
+
if (options.swipeable) {
|
119
|
+
// TODO: Duplicate calls with swipeable? handle multiple div wrapping.
|
120
|
+
$links.each(function () {
|
121
|
+
var $curr_content = $(Materialize.escapeHash(this.hash));
|
122
|
+
$curr_content.addClass('carousel-item');
|
123
|
+
$tabs_content = $tabs_content.add($curr_content);
|
124
|
+
});
|
125
|
+
$tabs_wrapper = $tabs_content.wrapAll('<div class="tabs-content carousel"></div>');
|
126
|
+
$tabs_content.css('display', '');
|
127
|
+
$('.tabs-content.carousel').carousel({
|
128
|
+
fullWidth: true,
|
129
|
+
noWrap: true,
|
130
|
+
onCycleTo: function (item) {
|
131
|
+
if (!clicked) {
|
132
|
+
var prev_index = index;
|
133
|
+
index = $tabs_wrapper.index(item);
|
134
|
+
$active.removeClass('active');
|
135
|
+
$active = $links.eq(index);
|
136
|
+
$active.addClass('active');
|
137
|
+
animateIndicator(prev_index);
|
138
|
+
if (typeof options.onShow === "function") {
|
139
|
+
options.onShow.call($this[0], $content);
|
140
|
+
}
|
139
141
|
}
|
140
142
|
}
|
141
|
-
}
|
142
|
-
}
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
});
|
148
|
-
}
|
149
|
-
|
150
|
-
|
151
|
-
// Bind the click event handler
|
152
|
-
$this.off('click.tabs').on('click.tabs', 'a', function(e) {
|
153
|
-
if ($(this).parent().hasClass('disabled')) {
|
154
|
-
e.preventDefault();
|
155
|
-
return;
|
156
|
-
}
|
157
|
-
|
158
|
-
// Act as regular link if target attribute is specified.
|
159
|
-
if (!!$(this).attr("target")) {
|
160
|
-
return;
|
143
|
+
});
|
144
|
+
} else {
|
145
|
+
// Hide the remaining content
|
146
|
+
$links.not($active).each(function () {
|
147
|
+
$(Materialize.escapeHash(this.hash)).hide();
|
148
|
+
});
|
161
149
|
}
|
162
150
|
|
163
|
-
|
164
|
-
$
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
var $oldContent = $content
|
170
|
-
|
171
|
-
// Update the variables with the new link and content
|
172
|
-
$active = $(this);
|
173
|
-
$content = $(Materialize.escapeHash(this.hash));
|
174
|
-
$links = $this.find('li.tab a');
|
175
|
-
var activeRect = $active.position();
|
151
|
+
// Bind the click event handler
|
152
|
+
$this.off('click.tabs').on('click.tabs', 'a', function (e) {
|
153
|
+
if ($(this).parent().hasClass('disabled')) {
|
154
|
+
e.preventDefault();
|
155
|
+
return;
|
156
|
+
}
|
176
157
|
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
if (index < 0) {
|
182
|
-
index = 0;
|
183
|
-
}
|
184
|
-
// Change url to current tab
|
185
|
-
// window.location.hash = $active.attr('href');
|
158
|
+
// Act as regular link if target attribute is specified.
|
159
|
+
if (!!$(this).attr("target")) {
|
160
|
+
return;
|
161
|
+
}
|
186
162
|
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
163
|
+
clicked = true;
|
164
|
+
$tabs_width = $this.width();
|
165
|
+
$tab_width = Math.max($tabs_width, $this[0].scrollWidth) / $links.length;
|
166
|
+
|
167
|
+
// Make the old tab inactive.
|
168
|
+
$active.removeClass('active');
|
169
|
+
var $oldContent = $content;
|
170
|
+
|
171
|
+
// Update the variables with the new link and content
|
172
|
+
$active = $(this);
|
173
|
+
$content = $(Materialize.escapeHash(this.hash));
|
174
|
+
$links = $this.find('li.tab a');
|
175
|
+
var activeRect = $active.position();
|
176
|
+
|
177
|
+
// Make the tab active.
|
178
|
+
$active.addClass('active');
|
179
|
+
prev_index = index;
|
180
|
+
index = $links.index($(this));
|
181
|
+
if (index < 0) {
|
182
|
+
index = 0;
|
195
183
|
}
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
184
|
+
// Change url to current tab
|
185
|
+
// window.location.hash = $active.attr('href');
|
186
|
+
|
187
|
+
// Swap content
|
188
|
+
if (options.swipeable) {
|
189
|
+
if ($tabs_content.length) {
|
190
|
+
$tabs_content.carousel('set', index, function () {
|
191
|
+
if (typeof options.onShow === "function") {
|
192
|
+
options.onShow.call($this[0], $content);
|
193
|
+
}
|
194
|
+
});
|
195
|
+
}
|
196
|
+
} else {
|
197
|
+
if ($content !== undefined) {
|
198
|
+
$content.show();
|
199
|
+
$content.addClass('active');
|
200
|
+
if (typeof options.onShow === "function") {
|
201
|
+
options.onShow.call(this, $content);
|
202
|
+
}
|
202
203
|
}
|
203
|
-
}
|
204
204
|
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
205
|
+
if ($oldContent !== undefined && !$oldContent.is($content)) {
|
206
|
+
$oldContent.hide();
|
207
|
+
$oldContent.removeClass('active');
|
208
|
+
}
|
209
209
|
}
|
210
|
-
}
|
211
210
|
|
212
|
-
|
213
|
-
|
211
|
+
// Reset clicked state
|
212
|
+
clickedTimeout = setTimeout(function () {
|
213
|
+
clicked = false;
|
214
|
+
}, transition);
|
214
215
|
|
215
|
-
|
216
|
-
|
216
|
+
// Update indicator
|
217
|
+
animateIndicator(prev_index);
|
217
218
|
|
218
|
-
|
219
|
-
|
219
|
+
// Prevent the anchor's default click action
|
220
|
+
e.preventDefault();
|
221
|
+
});
|
220
222
|
});
|
221
|
-
});
|
222
|
-
|
223
223
|
},
|
224
|
-
select_tab
|
224
|
+
select_tab: function (id) {
|
225
225
|
this.find('a[href="#' + id + '"]').trigger('click');
|
226
226
|
}
|
227
227
|
};
|
228
228
|
|
229
|
-
$.fn.tabs = function(methodOrOptions) {
|
230
|
-
if (
|
231
|
-
return methods[
|
232
|
-
} else if (
|
229
|
+
$.fn.tabs = function (methodOrOptions) {
|
230
|
+
if (methods[methodOrOptions]) {
|
231
|
+
return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
|
232
|
+
} else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
|
233
233
|
// Default to "init"
|
234
|
-
return methods.init.apply(
|
234
|
+
return methods.init.apply(this, arguments);
|
235
235
|
} else {
|
236
|
-
$.error(
|
236
|
+
$.error('Method ' + methodOrOptions + ' does not exist on jQuery.tabs');
|
237
237
|
}
|
238
238
|
};
|
239
239
|
|
240
|
-
$(document).on('ready turbolinks:load', function(){
|
240
|
+
$(document).on('ready turbolinks:load', function () {
|
241
241
|
$('ul.tabs').tabs();
|
242
242
|
});
|
243
|
-
}(
|
243
|
+
})(jQuery);
|