https://rentals.escapetomarco.com/rns/_content/RNSBookingTemplate.SharedUI/js/utils/guest-dropdown-utils.js

1const GUEST_DROPDOWN_UPWARD_CLASS = 'guest-dropdown-upward';
2const VIEWPORT_BUFFER_PX = 12;
3const FALLBACK_PANEL_HEIGHT_PX = 180;
4
5function resolveWrapper(wrapper) {
6    if (!wrapper) {
7        return document.getElementById('guestsDropdown');
8    }
9
10    return typeof wrapper === 'string' ? document.getElementById(wrapper) : wrapper;
11}
12
13/**
14 * Opens the guest dropdown above the trigger when there is not enough room below.
15 * Call after nextTick once the panel is visible.
16 */
17export function positionGuestDropdown(wrapper) {
18    const wrapperEl = resolveWrapper(wrapper);
19    if (!wrapperEl) {
20        return 'down';
21    }
22
23    const panel = wrapperEl.querySelector('.guest-dropdown');
24    if (!panel) {
25        return 'down';
26    }
27
28    const trigger = wrapperEl.querySelector('.desktop-guest-selector .dropdown-btn')
29        || wrapperEl.querySelector('.dropdown-btn')
30        || wrapperEl.querySelector('button');
31    const triggerRect = (trigger || wrapperEl).getBoundingClientRect();
32    const panelHeight = panel.offsetHeight || panel.scrollHeight || FALLBACK_PANEL_HEIGHT_PX;
33    const spaceBelow = window.innerHeight - triggerRect.bottom;
34    const spaceAbove = triggerRect.top;
35    const openUpward = spaceBelow < panelHeight + VIEWPORT_BUFFER_PX && spaceAbove > spaceBelow;
36
37    panel.classList.toggle(GUEST_DROPDOWN_UPWARD_CLASS, openUpward);
38    return openUpward ? 'up' : 'down';
39}
40
41export function clearGuestDropdownPosition(wrapper) {
42    const wrapperEl = resolveWrapper(wrapper);
43    const panel = wrapperEl?.querySelector('.guest-dropdown');
44    panel?.classList.remove(GUEST_DROPDOWN_UPWARD_CLASS);
45}