2018-03-09 15:18:59 -05:00
|
|
|
import $ from 'jquery';
|
2017-10-20 19:14:55 -04:00
|
|
|
import ContextualSidebar from './contextual_sidebar';
|
2017-07-19 05:36:08 -04:00
|
|
|
import initFlyOutNav from './fly_out_nav';
|
2017-01-11 22:49:57 -05:00
|
|
|
|
2017-12-19 03:32:51 -05:00
|
|
|
function hideEndFade($scrollingTabs) {
|
|
|
|
$scrollingTabs.each(function scrollTabsLoop() {
|
|
|
|
const $this = $(this);
|
2018-02-20 17:20:48 -05:00
|
|
|
$this.siblings('.fade-right').toggleClass('scrolling', Math.round($this.width()) < $this.prop('scrollWidth'));
|
2017-12-19 03:32:51 -05:00
|
|
|
});
|
|
|
|
}
|
2016-07-24 16:45:11 -04:00
|
|
|
|
2017-12-19 03:32:51 -05:00
|
|
|
export default function initLayoutNav() {
|
|
|
|
const contextualSidebar = new ContextualSidebar();
|
|
|
|
contextualSidebar.bindEvents();
|
|
|
|
|
|
|
|
initFlyOutNav();
|
2016-07-24 16:45:11 -04:00
|
|
|
|
2017-03-28 10:56:08 -04:00
|
|
|
$(document).on('init.scrolling-tabs', () => {
|
|
|
|
const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
|
|
|
|
$scrollingTabs.addClass('is-initialized');
|
2016-09-15 04:38:47 -04:00
|
|
|
|
2017-12-19 03:32:51 -05:00
|
|
|
$(window).on('resize.nav', () => {
|
|
|
|
hideEndFade($scrollingTabs);
|
|
|
|
}).trigger('resize.nav');
|
|
|
|
|
|
|
|
$scrollingTabs.on('scroll', function tabsScrollEvent() {
|
|
|
|
const $this = $(this);
|
|
|
|
const currentPosition = $this.scrollLeft();
|
|
|
|
const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
|
|
|
|
|
2016-07-24 16:45:11 -04:00
|
|
|
$this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
|
2017-12-19 03:32:51 -05:00
|
|
|
$this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
|
2016-07-24 16:45:11 -04:00
|
|
|
});
|
2016-09-15 04:38:47 -04:00
|
|
|
|
2017-12-19 03:32:51 -05:00
|
|
|
$scrollingTabs.each(function scrollTabsEachLoop() {
|
|
|
|
const $this = $(this);
|
|
|
|
const scrollingTabWidth = $this.width();
|
|
|
|
const $active = $this.find('.active');
|
|
|
|
const activeWidth = $active.width();
|
2016-09-15 04:38:47 -04:00
|
|
|
|
2016-09-16 08:52:06 -04:00
|
|
|
if ($active.length) {
|
2017-12-19 03:32:51 -05:00
|
|
|
const offset = $active.offset().left + activeWidth;
|
2016-09-16 08:52:06 -04:00
|
|
|
|
|
|
|
if (offset > scrollingTabWidth - 30) {
|
2017-12-19 03:32:51 -05:00
|
|
|
const scrollLeft = (offset - (scrollingTabWidth / 2)) - (activeWidth / 2);
|
|
|
|
|
2016-09-16 08:52:06 -04:00
|
|
|
$this.scrollLeft(scrollLeft);
|
|
|
|
}
|
2016-09-15 04:38:47 -04:00
|
|
|
}
|
|
|
|
});
|
2017-12-19 03:32:51 -05:00
|
|
|
}).trigger('init.scrolling-tabs');
|
|
|
|
}
|