← All changes | assets/src/apps/js/frontend/tabs-scroll.js +40 -40 4.3.8 → 4.4.9 View file →

		@@ -1,40 +1,40 @@
1		-export default function TabsDragScroll() {
2		- // Selectors and DOM elements
3		- const TabsDragScroll = document.querySelector('.TabsDragScroll');
4		- if (!TabsDragScroll) return;
5		-
6		- const tabMenu = TabsDragScroll.querySelector('ul');
7		-
8		- // Dragging functionality
9		- let activeDrag = false;
10		- tabMenu.addEventListener('mousemove', (event) => {
11		- if (!activeDrag) return;
12		- tabMenu.scrollLeft -= event.movementX;
13		- // iconVisibility();
14		- tabMenu.classList.add('dragging');
15		- });
16		- document.addEventListener('mouseup', () => {
17		- activeDrag = false;
18		- tabMenu.classList.remove('dragging');
19		- });
20		- tabMenu.addEventListener('mousedown', () => {
21		- activeDrag = true;
22		- });
23		-
24		- // Scroll to <li> on click
25		- const scrollToLi = (li) => {
26		- const liLeft = li.offsetLeft;
27		- const liWidth = li.offsetWidth;
28		- const tabCenter = (tabMenu.clientWidth / 2) - (liWidth / 2);
29		-
30		- tabMenu.scrollTo({
31		- left: liLeft - tabCenter,
32		- behavior: 'smooth',
33		- });
34		- };
35		-
36		- // Add click event listeners to all <li> elements
37		- tabMenu.querySelectorAll('li').forEach((li) => {
38		- li.addEventListener('click', () => scrollToLi(li));
39		- });
40		-}
	1	+export default function TabsDragScroll() {
	2	+ // Selectors and DOM elements
	3	+ const TabsDragScroll = document.querySelector('.TabsDragScroll');
	4	+ if (!TabsDragScroll) return;
	5	+
	6	+ const tabMenu = TabsDragScroll.querySelector('ul');
	7	+
	8	+ // Dragging functionality
	9	+ let activeDrag = false;
	10	+ tabMenu.addEventListener('mousemove', (event) => {
	11	+ if (!activeDrag) return;
	12	+ tabMenu.scrollLeft -= event.movementX;
	13	+ // iconVisibility();
	14	+ tabMenu.classList.add('dragging');
	15	+ });
	16	+ document.addEventListener('mouseup', () => {
	17	+ activeDrag = false;
	18	+ tabMenu.classList.remove('dragging');
	19	+ });
	20	+ tabMenu.addEventListener('mousedown', () => {
	21	+ activeDrag = true;
	22	+ });
	23	+
	24	+ // Scroll to <li> on click
	25	+ const scrollToLi = (li) => {
	26	+ const liLeft = li.offsetLeft;
	27	+ const liWidth = li.offsetWidth;
	28	+ const tabCenter = (tabMenu.clientWidth / 2) - (liWidth / 2);
	29	+
	30	+ tabMenu.scrollTo({
	31	+ left: liLeft - tabCenter,
	32	+ behavior: 'smooth',
	33	+ });
	34	+ };
	35	+
	36	+ // Add click event listeners to all <li> elements
	37	+ tabMenu.querySelectorAll('li').forEach((li) => {
	38	+ li.addEventListener('click', () => scrollToLi(li));
	39	+ });
	40	+}