114 lines
3.1 KiB
JavaScript
114 lines
3.1 KiB
JavaScript
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);
|
||
});
|
||
});
|