Cold-Air-Networks/customer-riverside
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

scroll

Browse source
This commit is contained in:
Philip Peterson 2026-06-08 19:14:22 -07:00
parent 32c6b6dd5a
commit 0196733be8
2 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
web/modules/custom/riverside_pt/js/components/rpt-booking.js
View file

@ -123,6 +123,9 @@ function BookingPanel({ service, settings }) {
const selectedDateSlotsRef = useRef([]); const selectedDateSlotsRef = useRef([]);
const currentEventsRef = useRef([]); const currentEventsRef = useRef([]);
const initDate = useMemo(nextBusinessDay, []); const initDate = useMemo(nextBusinessDay, []);
const formRef = useRef(null);
const prevSlotIdRef = useRef(null);
const successRef = useRef(null);
function buildEventsUrl() { function buildEventsUrl() {
return settings.eventsUrl + "?service=" + service; return settings.eventsUrl + "?service=" + service;
@ -273,6 +276,19 @@ function BookingPanel({ service, settings }) {
} }
}, [fetchedEvents]); }, [fetchedEvents]);
useEffect(function () {
if (selectedSlotId && !prevSlotIdRef.current && formRef.current) {
window.rptScrollTo(formRef.current, true);
}
prevSlotIdRef.current = selectedSlotId;
}, [selectedSlotId]);
useEffect(function () {
if (success && successRef.current) {
window.rptScrollTo(successRef.current, true);
}
}, [success]);
function handleSlotClick(slot) { function handleSlotClick(slot) {
setSelectedSlotId(slot.id); setSelectedSlotId(slot.id);
setSubmitError(null); setSubmitError(null);
@ -373,7 +389,7 @@ function BookingPanel({ service, settings }) {
</div> </div>
${!success && selectedSlot ? html` ${!success && selectedSlot ? html`
<form onSubmit=${handleSubmit} autocomplete="on" class=${CX.formSection}> <form ref=${formRef} onSubmit=${handleSubmit} autocomplete="on" class=${CX.formSection}>
<p class=${CX.formHeading}>Your Details</p> <p class=${CX.formHeading}>Your Details</p>
<div class=${CX.formGrid}> <div class=${CX.formGrid}>
@ -466,7 +482,7 @@ function BookingPanel({ service, settings }) {
` : null} ` : null}
${success && confirmedAppointment ? html` ${success && confirmedAppointment ? html`
<div class=${CX.successSection}> <div ref=${successRef} class=${CX.successSection}>
<div class=${CX.successBox}> <div class=${CX.successBox}>
<p class=${CX.successTitle}>Request received!</p> <p class=${CX.successTitle}>Request received!</p>
<div class=${CX.successSummary}> <div class=${CX.successSummary}>

13
web/modules/custom/riverside_pt/js/scroll.js
View file

@ -1,5 +1,3 @@
import zenscroll from "https://esm.sh/zenscroll@4.0.2";
var FIXED_BUFFER = 0; // breathing room below fixed header when menu is closed var FIXED_BUFFER = 0; // breathing room below fixed header when menu is closed
// Returns the effective scroll offset to clear the header. // Returns the effective scroll offset to clear the header.
@ -15,6 +13,13 @@ function headerOffset() {
return header.offsetHeight + (menuOpen ? 0 : FIXED_BUFFER); return header.offsetHeight + (menuOpen ? 0 : FIXED_BUFFER);
} }
function scrollToEl(el, animate) {
var top = Math.max(0, el.getBoundingClientRect().top + window.scrollY - headerOffset());
window.scrollTo({ top: top, behavior: animate ? "smooth" : "instant" });
}
window.rptScrollTo = scrollToEl;
// On load: scroll to the anchor from either the URL hash or drupalSettings // On load: scroll to the anchor from either the URL hash or drupalSettings
// (set by the server when rendering the home page at a clean URL like /services). // (set by the server when rendering the home page at a clean URL like /services).
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
@ -24,7 +29,7 @@ document.addEventListener("DOMContentLoaded", function () {
var target = document.querySelector(anchor); var target = document.querySelector(anchor);
if (!target) return; if (!target) return;
requestAnimationFrame(function () { requestAnimationFrame(function () {
zenscroll.toY(Math.max(0, target.getBoundingClientRect().top + window.scrollY - headerOffset()), 0); scrollToEl(target, false);
}); });
}); });
@ -35,5 +40,5 @@ document.addEventListener("click", function (e) {
if (!target) return; if (!target) return;
e.preventDefault(); e.preventDefault();
history.pushState({}, "", link.getAttribute("href")); history.pushState({}, "", link.getAttribute("href"));
zenscroll.toY(Math.max(0, target.getBoundingClientRect().top + window.scrollY - headerOffset()), 400); scrollToEl(target, true);
}); });