diff options
Diffstat (limited to 'app/assets/javascripts/layout_nav.js')
-rw-r--r-- | app/assets/javascripts/layout_nav.js | 77 |
1 files changed, 38 insertions, 39 deletions
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js index ab83f1ecc14..90c1b31286a 100644 --- a/app/assets/javascripts/layout_nav.js +++ b/app/assets/javascripts/layout_nav.js @@ -12,8 +12,45 @@ function hideEndFade($scrollingTabs) { }); } +export function initScrollingTabs() { + const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized'); + $scrollingTabs.addClass('is-initialized'); + + $(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(); + + $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0); + $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1); + }); + + $scrollingTabs.each(function scrollTabsEachLoop() { + const $this = $(this); + const scrollingTabWidth = $this.width(); + const $active = $this.find('.active'); + const activeWidth = $active.width(); + + if ($active.length) { + const offset = $active.offset().left + activeWidth; + + if (offset > scrollingTabWidth - 30) { + const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2; + + $this.scrollLeft(scrollLeft); + } + } + }); +} + function initDeferred() { - $(document).trigger('init.scrolling-tabs'); + initScrollingTabs(); const appEl = document.getElementById('whats-new-app'); if (!appEl) return; @@ -34,43 +71,5 @@ export default function initLayoutNav() { initFlyOutNav(); - // We need to init it on DomContentLoaded as others could also call it - $(document).on('init.scrolling-tabs', () => { - const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized'); - $scrollingTabs.addClass('is-initialized'); - - $(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(); - - $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0); - $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1); - }); - - $scrollingTabs.each(function scrollTabsEachLoop() { - const $this = $(this); - const scrollingTabWidth = $this.width(); - const $active = $this.find('.active'); - const activeWidth = $active.width(); - - if ($active.length) { - const offset = $active.offset().left + activeWidth; - - if (offset > scrollingTabWidth - 30) { - const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2; - - $this.scrollLeft(scrollLeft); - } - } - }); - }); - requestIdleCallback(initDeferred); } |