Joywork/js/lw-settings.js

document.addEventListener("DOMContentLoaded", () => {
	const tabs = document.querySelectorAll(".lw-section-block__tabs-item");
	const sections = document.querySelectorAll(
		".lw-settings-block__content-section",
	);

	const setActiveSection = (id) => {
		const prev = document.querySelector(
			".lw-settings-block__content-section.lw-active",
		);
		prev.classList.remove("lw-active");
		sections[id - 1].classList.add("lw-active");

		const side = sections[id - 1].querySelectorAll(
			".lw-settings-block__content-section-side li",
		);

		side.forEach((item) => {
			item.classList.remove("lw-active");
		});
		side[0].classList.add("lw-active");
		window.scrollTo(0, 0);
	};

	const onClickSetActiveTab = (evt) => {
		const target = evt.currentTarget;

		if (target.classList.contains("lw-active")) return;

		const prev = document.querySelector(
			".lw-section-block__tabs-item.lw-active",
		);
		prev.classList.remove("lw-active");
		target.classList.add("lw-active");

		const id = target.dataset.tabId;

		console.log("TABID:", id);
		setActiveSection(id);
	};

	tabs.forEach((tab) => {
		tab.addEventListener("click", onClickSetActiveTab);
	});

	const anchors = document.querySelectorAll("[data-anchor]");

	const onClickScrollToSection = (evt) => {
		evt.preventDefault();
		const target = evt.currentTarget;
		const section = document.querySelector(
			`[data-anchor-dest="${target.dataset.anchor}"]`,
		);

		const sideEl = document.querySelector(
			`[data-anchor="${target.dataset.anchor}"]`,
		);
		sideEl
			.closest("ul")
			.querySelector("li.lw-active")
			.classList.remove("lw-active");
		sideEl.classList.add("lw-active");

		const headerHeight = document
			.querySelector(".lw-settings-block__header")
			.getBoundingClientRect().height;

		const yOffset = headerHeight + 37;
		const coords =
			section.getBoundingClientRect().top + window.scrollY - yOffset;

		window.scrollTo({ top: coords, behavior: "smooth" });
	};

	anchors.forEach((anchor) => {
		anchor.addEventListener("click", onClickScrollToSection);
	});

	const options = {
		// родитель целевого элемента - область просмотра
		// root: null,
		// без отступов
		rootMargin: "-40% 0% -60% 0%",
		// процент пересечения - половина изображения
		threshold: 0,
	};

	// создаем наблюдатель
	const observer = new IntersectionObserver((entries, observer) => {
		// для каждой записи-целевого элемента
		entries.forEach((entry) => {
			// если элемент является наблюдаемым
			if (entry.isIntersecting) {
				const id = entry.target.dataset.anchorDest;

				if (id) {
					const sideEl = document.querySelector(`[data-anchor="${id}"]`);
					sideEl
						.closest("ul")
						.querySelector("li.lw-active")
						.classList.remove("lw-active");
					sideEl.classList.add("lw-active");
				}
			}
		});
	}, options);

	// с помощью цикла следим за всеми img на странице
	const arr = document.querySelectorAll(".lw-settings-block__section");
	arr.forEach((i) => {
		observer.observe(i);
	});
});