42 lines
1.8 KiB
JavaScript
42 lines
1.8 KiB
JavaScript
/**
|
|
* Длинные скриншоты: свёрнутая высота, плотный «туман» и кнопка поверх нижней части превью (внутри рамки блока).
|
|
* figure.case-media[data-case-tall-media][data-case-tall-width=content|wide] >
|
|
* .case-media-tall[data-case-tall-root] >
|
|
* (.case-media-tall__clip > img + .case-media-tall__fog) + .case-media-tall__actions > button[data-case-tall-toggle]
|
|
*/
|
|
export function initCaseTallMediaExpand() {
|
|
const figures = document.querySelectorAll("[data-case-tall-media]");
|
|
if (!figures.length) return;
|
|
|
|
const reduced =
|
|
typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
for (const figure of figures) {
|
|
const root = figure.querySelector("[data-case-tall-root]");
|
|
const clip = figure.querySelector("[data-case-tall-clip]");
|
|
const btn = figure.querySelector("[data-case-tall-toggle]");
|
|
const labelMore = figure.querySelector("[data-case-tall-label-more]");
|
|
const labelLess = figure.querySelector("[data-case-tall-label-less]");
|
|
if (!root || !btn) continue;
|
|
|
|
if (reduced) {
|
|
root.classList.add("case-media-tall--reduced-motion");
|
|
}
|
|
|
|
btn.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
const expanded = root.classList.toggle("case-media-tall--expanded");
|
|
btn.setAttribute("aria-expanded", expanded ? "true" : "false");
|
|
if (labelMore) labelMore.hidden = expanded;
|
|
if (labelLess) labelLess.hidden = !expanded;
|
|
|
|
if (!expanded) {
|
|
const target = clip || root;
|
|
if (target && typeof target.scrollIntoView === "function") {
|
|
target.scrollIntoView({ behavior: reduced ? "auto" : "smooth", block: "start", inline: "nearest" });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|