62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
import { prefersReducedMotion } from "../shared/media.js";
|
||
|
||
function bindSkillsIntroRoot(root) {
|
||
const msgs = Array.from(root.querySelectorAll("[data-skills-msg]"));
|
||
if (!msgs.length) return;
|
||
const reduceMotion = prefersReducedMotion();
|
||
|
||
function localDatetimeMinute(d) {
|
||
const pad = (n) => String(n).padStart(2, "0");
|
||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||
}
|
||
|
||
function setTime(el, date) {
|
||
const timeEl = el.querySelector("[data-skills-msg-time]");
|
||
if (!timeEl) return;
|
||
timeEl.textContent = date.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" });
|
||
timeEl.setAttribute("datetime", localDatetimeMinute(date));
|
||
}
|
||
|
||
function revealAll() {
|
||
msgs.forEach((el, i) => {
|
||
window.setTimeout(() => {
|
||
setTime(el, new Date());
|
||
el.classList.add("is-visible");
|
||
el.removeAttribute("aria-hidden");
|
||
}, i * 420);
|
||
});
|
||
}
|
||
|
||
if (reduceMotion) {
|
||
const now = new Date();
|
||
msgs.forEach((el) => {
|
||
setTime(el, now);
|
||
el.classList.add("is-visible");
|
||
});
|
||
return;
|
||
}
|
||
|
||
root.setAttribute("data-skills-anim", "1");
|
||
msgs.forEach((m) => m.setAttribute("aria-hidden", "true"));
|
||
|
||
let done = false;
|
||
const obs = new IntersectionObserver(
|
||
(entries) => {
|
||
for (const e of entries) {
|
||
if (!e.isIntersecting || done) continue;
|
||
done = true;
|
||
obs.disconnect();
|
||
revealAll();
|
||
break;
|
||
}
|
||
},
|
||
{ threshold: 0.22, rootMargin: "0px 0px -10% 0px" },
|
||
);
|
||
obs.observe(root);
|
||
}
|
||
|
||
/** Чат-вступления с `data-skills-intro`: может быть несколько на странице (например, навыки и мини-проекты). */
|
||
export function initSkillsIntroMessages() {
|
||
document.querySelectorAll("[data-skills-intro]").forEach((root) => bindSkillsIntroRoot(root));
|
||
}
|