blob: 1f58065a5057c0926555fd1b87f9830d45e2bbf1 (
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
|
import $ from 'jquery';
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 initDeferred() {
initScrollingTabs();
initInviteMembers();
}
export default function initLayoutNav() {
requestIdleCallback(initDeferred);
}
|