Welcome to mirror list, hosted at ThFree Co, Russian Federation.

layout_nav.js « javascripts « assets « app - gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
blob: 670170ec9b957284a0cf52ee1ef539a60ab93879 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import $ from 'jquery';
import ContextualSidebar from './contextual_sidebar';
import initFlyOutNav from './fly_out_nav';
import { setNotification } from './whats_new/utils/notification';

function hideEndFade($scrollingTabs) {
  $scrollingTabs.each(function scrollTabsLoop() {
    const $this = $(this);
    $this
      .siblings('.fade-right')
      .toggleClass('scrolling', Math.round($this.width()) < $this.prop('scrollWidth'));
  });
}

export function initScrollingTabs() {
  const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
  $scrollingTabs.addClass('is-initialized');

  const el = $scrollingTabs.get(0);
  const parentElement = el?.parentNode;
  if (el && parentElement) {
    parentElement
      .querySelector('button.fade-left')
      ?.addEventListener('click', function scrollLeft() {
        el.scrollBy({ left: -200, behavior: 'smooth' });
      });
    parentElement
      .querySelector('button.fade-right')
      ?.addEventListener('click', function scrollRight() {
        el.scrollBy({ left: 200, behavior: 'smooth' });
      });
  }

  $(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 initInviteMembers() {
  const modalEl = document.querySelector('.js-invite-members-modal');
  if (modalEl) {
    import(
      /* webpackChunkName: 'initInviteMembersModal' */ '~/invite_members/init_invite_members_modal'
    )
      .then(({ default: initInviteMembersModal }) => {
        initInviteMembersModal();
      })
      .catch(() => {});
  }

  const inviteTriggers = document.querySelectorAll('.js-invite-members-trigger');
  if (!inviteTriggers) return;

  import(
    /* webpackChunkName: 'initInviteMembersTrigger' */ '~/invite_members/init_invite_members_trigger'
  )
    .then(({ default: initInviteMembersTrigger }) => {
      initInviteMembersTrigger();
    })
    .catch(() => {});
}

function initWhatsNewComponent() {
  const appEl = document.getElementById('whats-new-app');
  if (!appEl) return;

  setNotification(appEl);

  const triggerEl = document.querySelector('.js-whats-new-trigger');
  if (!triggerEl) return;

  triggerEl.addEventListener('click', () => {
    import(/* webpackChunkName: 'whatsNewApp' */ '~/whats_new')
      .then(({ default: initWhatsNew }) => {
        initWhatsNew(appEl);
      })
      .catch(() => {});
  });
}

function initDeferred() {
  initScrollingTabs();
  initWhatsNewComponent();
  initInviteMembers();
}

export default function initLayoutNav() {
  if (!gon.use_new_navigation) {
    const contextualSidebar = new ContextualSidebar();
    contextualSidebar.bindEvents();
    initFlyOutNav();
  }

  requestIdleCallback(initDeferred);
}