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);
 }