debian-mirror-gitlab/app/assets/javascripts/layout_nav.js

53 lines
1.7 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2018-03-17 18:26:18 +05:30
import ContextualSidebar from './contextual_sidebar';
2017-09-10 17:25:29 +05:30
import initFlyOutNav from './fly_out_nav';
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
function hideEndFade($scrollingTabs) {
$scrollingTabs.each(function scrollTabsLoop() {
const $this = $(this);
2018-03-27 19:54:05 +05:30
$this.siblings('.fade-right').toggleClass('scrolling', Math.round($this.width()) < $this.prop('scrollWidth'));
2018-03-17 18:26:18 +05:30
});
}
2016-09-13 17:45:13 +05:30
2018-03-17 18:26:18 +05:30
export default function initLayoutNav() {
const contextualSidebar = new ContextualSidebar();
contextualSidebar.bindEvents();
initFlyOutNav();
2016-09-13 17:45:13 +05:30
2017-08-17 22:00:37 +05:30
$(document).on('init.scrolling-tabs', () => {
const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
$scrollingTabs.addClass('is-initialized');
2016-09-29 09:46:39 +05:30
2018-03-17 18:26:18 +05:30
$(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-09-13 17:45:13 +05:30
$this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
2018-03-17 18:26:18 +05:30
$this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
2016-09-13 17:45:13 +05:30
});
2016-09-29 09:46:39 +05:30
2018-03-17 18:26:18 +05:30
$scrollingTabs.each(function scrollTabsEachLoop() {
const $this = $(this);
const scrollingTabWidth = $this.width();
const $active = $this.find('.active');
const activeWidth = $active.width();
2016-09-29 09:46:39 +05:30
if ($active.length) {
2018-03-17 18:26:18 +05:30
const offset = $active.offset().left + activeWidth;
2016-09-29 09:46:39 +05:30
if (offset > scrollingTabWidth - 30) {
2018-03-17 18:26:18 +05:30
const scrollLeft = (offset - (scrollingTabWidth / 2)) - (activeWidth / 2);
2016-09-29 09:46:39 +05:30
$this.scrollLeft(scrollLeft);
}
}
});
2018-03-17 18:26:18 +05:30
}).trigger('init.scrolling-tabs');
}