2016-07-24 20:45:11 +00:00
|
|
|
(function() {
|
|
|
|
var hideEndFade;
|
|
|
|
|
|
|
|
hideEndFade = function($scrollingTabs) {
|
|
|
|
return $scrollingTabs.each(function() {
|
|
|
|
var $this;
|
|
|
|
$this = $(this);
|
|
|
|
return $this.siblings('.fade-right').toggleClass('scrolling', $this.width() < $this.prop('scrollWidth'));
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
$(function() {
|
2016-09-15 08:38:47 +00:00
|
|
|
var $scrollingTabs = $('.scrolling-tabs');
|
|
|
|
|
|
|
|
hideEndFade($scrollingTabs);
|
2016-07-24 20:45:11 +00:00
|
|
|
$(window).off('resize.nav').on('resize.nav', function() {
|
2016-09-15 08:38:47 +00:00
|
|
|
return hideEndFade($scrollingTabs);
|
2016-07-24 20:45:11 +00:00
|
|
|
});
|
2016-09-15 08:38:47 +00:00
|
|
|
$scrollingTabs.off('scroll').on('scroll', function(event) {
|
2016-07-24 20:45:11 +00:00
|
|
|
var $this, currentPosition, maxPosition;
|
|
|
|
$this = $(this);
|
|
|
|
currentPosition = $this.scrollLeft();
|
|
|
|
maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
|
|
|
|
$this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
|
|
|
|
return $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
|
|
|
|
});
|
2016-09-15 08:38:47 +00:00
|
|
|
|
|
|
|
$scrollingTabs.each(function () {
|
|
|
|
var $this = $(this),
|
|
|
|
scrollingTabWidth = $this.width(),
|
|
|
|
$active = $this.find('.active'),
|
2016-09-16 12:52:06 +00:00
|
|
|
activeWidth = $active.width();
|
2016-09-15 08:38:47 +00:00
|
|
|
|
2016-09-16 12:52:06 +00:00
|
|
|
if ($active.length) {
|
|
|
|
var offset = $active.offset().left + activeWidth;
|
|
|
|
|
|
|
|
if (offset > scrollingTabWidth - 30) {
|
|
|
|
var scrollLeft = scrollingTabWidth / 2;
|
|
|
|
scrollLeft = (offset - scrollLeft) - (activeWidth / 2);
|
|
|
|
$this.scrollLeft(scrollLeft);
|
|
|
|
}
|
2016-09-15 08:38:47 +00:00
|
|
|
}
|
|
|
|
});
|
2016-07-24 20:45:11 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
}).call(this);
|