https://www.hotelslitteraires.fr/res/js/template/form/booking/ui.js?q=1790256808596

1var initFormBooking = async () => {
2  const form = document.querySelector('form');
3  const heightNavigation = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--height-navigation')) || 100;
4
5  let openPickers = 0;
6
7  function attachCloseOnScroll(fp, threshold = 0) {
8    const startY = window.pageYOffset || document.documentElement.scrollTop || 0;
9    const handler = () => {
10      const y = window.pageYOffset || document.documentElement.scrollTop || 0;
11      if (Math.abs(y - startY) >= threshold) fp.close();
12    };
13    fp._detachCloseOnScroll = () => {
14      window.removeEventListener('scroll', handler);
15      window.removeEventListener('wheel', handler);
16      window.removeEventListener('touchmove', handler);
17      fp._detachCloseOnScroll = null;
18    };
19    window.addEventListener('scroll', handler, { passive: true });
20    window.addEventListener('wheel', handler, { passive: true });
21    window.addEventListener('touchmove', handler, { passive: true });
22  }
23
24  function markRange(arrivalPicker, departurePicker) {
25    document.querySelectorAll('.flatpickr-day.selected-mid')
26      .forEach(el => el.classList.remove('selected-mid'));
27    const start = arrivalPicker?.selectedDates?.[0];
28    const end = departurePicker?.selectedDates?.[0];
29    if (!start || !end) return;
30    document.querySelectorAll('.flatpickr-day').forEach(el => {
31      if (el.classList.contains('prevMonthDay') || el.classList.contains('nextMonthDay')) return;
32      const d = el.dateObj;
33      if (d > start && d < end) el.classList.add('selected-mid');
34    });
35  }
36
37  const hasDateInputs = document.querySelector('.get-date');
38  const lang = document.documentElement.lang || 'fr';
39
40  if (hasDateInputs) {
41    if (typeof flatpickr == 'undefined') {
42      try {
43        await lazy.loadScript("/res/js/flatpickr/flatpickr.min.css", 0);
44        await lazy.loadScript("/res/js/flatpickr/flatpickr.js", 0);
45        if (lang !== 'en') {
46          await lazy.loadScript(`https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/${lang}.js`, 0);
47        }
48      } catch (e) { console.error('Erreur chargement flatpickr : ', e); }
49    }
50
51    const arrivalInput = document.getElementById('date-arrivee');
52    const departureInput = document.getElementById('date-depart');
53
54    let arrivalPicker, departurePicker;
55
56    // Arrivée
57    arrivalPicker = flatpickr(arrivalInput, {
58      dateFormat: lang === 'en' ? 'm/d/Y' : 'd/m/Y',
59      minDate: 'today',
60      locale: lang,
61      allowInput: true,
62      disableMobile: true,
63      onChange(selectedDates) {
64        if (selectedDates.length) {
65          const nextDay = new Date(selectedDates[0]);
66          nextDay.setDate(nextDay.getDate() + 1);
67          departurePicker.set('minDate', nextDay);
68          departurePicker.setDate(nextDay, true);
69          departureInput.removeAttribute('disabled');
70          departurePicker.open();
71        }
72        markRange(arrivalPicker, departurePicker);
73      },
74      onOpen() {
75        openPickers++;
76        attachCloseOnScroll(this);
77        setTimeout(() => markRange(arrivalPicker, departurePicker), 0);
78      },
79      onClose() {
80        this._detachCloseOnScroll?.();
81        openPickers = Math.max(0, openPickers - 1);
82      },
83    });
84
85    departurePicker = flatpickr(departureInput, {
86      dateFormat: lang === 'en' ? 'm/d/Y' : 'd/m/Y',
87      locale: lang,
88      allowInput: true,
89      disableMobile: true,
90      clickOpens: false,
91      onChange() { markRange(arrivalPicker, departurePicker); },
92      onOpen() {
93        openPickers++;
94        attachCloseOnScroll(this);
95        setTimeout(() => markRange(arrivalPicker, departurePicker), 0);
96      },
97      onClose() {
98        this._detachCloseOnScroll?.();
99        openPickers = Math.max(0, openPickers - 1);
100      },
101    });
102
103    departureInput.setAttribute('disabled', true);
104
105    document.querySelectorAll('.get-date').forEach(input => {
106      input.addEventListener('focus', function () {
107        if (!input.disabled && input._flatpickr) input._flatpickr.open();
108      });
109    });
110
111    document.querySelectorAll('.get-date').forEach(input => {
112      input.addEventListener('input', function () {
113        let value = input.value.replace(/\D/g, '').slice(0, 8);
114        let formatted = '';
115        if (value.length >= 5) formatted = `${value.slice(0, 2)}/${value.slice(2, 4)}/${value.slice(4, 8)}`;
116        else if (value.length >= 3) formatted = `${value.slice(0, 2)}/${value.slice(2, 4)}`;
117        else if (value.length >= 1) formatted = value.slice(0, 2);
118        input.value = formatted;
119      });
120    });
121  }
122
123  const adultsInput = document.getElementById('adults');
124  const wrapper = adultsInput.closest('[data-singular]');
125  const peopleLabel = document.getElementById('people-label');
126
127  const singular = wrapper.dataset.singular;
128  const plural = wrapper.dataset.plural;
129
130  function updatePeopleLabel() {
131    const count = parseInt(adultsInput.value || 1, 10);
132    if (count > 1) {
133      peopleLabel.classList.add('left-7.5')
134    } else {
135      peopleLabel.classList.remove('left-7.5')
136    }
137
138    peopleLabel.textContent = count > 1 ? plural : singular;
139  }
140
141  updatePeopleLabel();
142  adultsInput.addEventListener('input', updatePeopleLabel);
143  adultsInput.addEventListener('change', updatePeopleLabel);
144
145
146  const bookingForm = document.getElementById('booking-form');
147  const rateSelect = document.getElementById('rate-choice');
148  const hotelIdInput = document.getElementById('selectedHotelId');
149
150  if (bookingForm && rateSelect && hotelIdInput) {
151    rateSelect.addEventListener('change', function () {
152      const option = this.selectedOptions[0];
153      if (!option) return;
154
155      const hotelId = option.dataset.hotel || '';
156      const baseUrl = option.value;
157
158      const action = baseUrl.replace('HOTEL_ID', hotelId);
159
160      bookingForm.action = action;
161      hotelIdInput.value = hotelId;
162    });
163  }
164};