| |
| |
| let sticky = false; |
|
|
| function setCut(card, pct, wiping) { |
| const frame = card.querySelector(".bc-frame"); |
| if (!frame) return; |
| frame.style.setProperty("--cut", pct + "%"); |
| frame.classList.toggle("bc-wiping", wiping); |
| } |
|
|
| function reset() { |
| element.querySelectorAll(".bc-card[data-both]").forEach((c) => setCut(c, sticky ? 100 : 0, false)); |
| } |
|
|
| element.addEventListener("pointermove", (e) => { |
| const frame = e.target.closest(".bc-frame"); |
| if (!frame) return; |
| const r = frame.getBoundingClientRect(); |
| const pct = Math.round(100 * Math.min(1, Math.max(0, (e.clientX - r.left) / r.width))); |
| element.querySelectorAll(".bc-card[data-both]").forEach((c) => setCut(c, pct, true)); |
| }); |
|
|
| element.addEventListener("pointerout", (e) => { |
| if (e.target.closest(".bc-frame") && !(e.relatedTarget && e.relatedTarget.closest && e.relatedTarget.closest(".bc-frame"))) reset(); |
| }); |
|
|
| element.addEventListener("click", (e) => { |
| const btn = e.target.closest(".bc-toggle"); |
| if (!btn) return; |
| sticky = !sticky; |
| btn.classList.toggle("bc-on", sticky); |
| btn.textContent = sticky ? "Gebogene Bilder zeigen" : "Alle ohne Eingriff zeigen"; |
| reset(); |
| }); |
|
|
| watch("value", () => { sticky = false; reset(); }); |
|
|
