https://www.eklohotels.com/res/js/template/eklo/offers/ui.js?q=1790955436928

1var initEkloOffers = async () => {
2  const playCards = document.querySelectorAll('.offer-card')
3  let currentlyOpenInfo = null
4
5  document.querySelectorAll('.offer-card-button').forEach(button => {
6    button.addEventListener('click', function () {
7      const target = this.dataset.target
8      const infoCard = document.querySelector('.offer-card-infos[data-target="' + target + '"]')
9      if (!infoCard) return
10
11      const clickedCard = this.closest('.offer-card')
12
13      // Retirer .is-deployed de toutes les cartes
14      document.querySelectorAll('.offer-card.is-deployed').forEach(card => {
15        card.classList.remove('is-deployed')
16      })
17
18      if (currentlyOpenInfo && currentlyOpenInfo !== infoCard) {
19        closeCurrentInfo()
20      }
21
22      if (infoCard.classList.contains('visible')) {
23        closeCurrentInfo()
24      } else {
25        insertInfoCard(infoCard, clickedCard)
26        openInfoCard(infoCard)
27
28        // Ajouter .is-deployed à la carte cliquée
29        clickedCard.classList.add('is-deployed')
30      }
31    })
32  })
33
34  function insertInfoCard(infoCard, clickedCard) {
35    const wrapper = clickedCard.closest('.lazy-eklo-offers')
36    if (!wrapper) return
37
38    const visibleCards = Array.from(wrapper.querySelectorAll('.offer-card:not(.hidden)'))
39    const index = visibleCards.indexOf(clickedCard)
40    if (index === -1) return
41
42    const isMobile = window.innerWidth <= 768
43
44    const perViewAttr = parseInt(wrapper.dataset.perview, 10)
45    const cardsPerRow = isMobile ? 1 : (isNaN(perViewAttr) ? 3 : perViewAttr)
46
47    const rowIndex = Math.floor(index / cardsPerRow)
48    const insertIndex = rowIndex * cardsPerRow + (cardsPerRow - 1)
49
50    const insertAfter = visibleCards[insertIndex] || visibleCards[visibleCards.length - 1]
51    insertAfter.parentNode.insertBefore(infoCard, insertAfter.nextSibling)
52  }
53
54  function openInfoCard(infoCard) {
55    infoCard.classList.add('visible')
56    infoCard.classList.remove('hidden')
57    void infoCard.offsetWidth
58    infoCard.classList.add('opacity-100', 'scale-y-100', 'pointer-events-auto')
59    infoCard.classList.remove('opacity-0', 'scale-y-0', 'pointer-events-none')
60
61    const target = infoCard.dataset.target
62    const linkedCard = document.querySelector(`.offer-card [data-triangle="${target}"]`)
63    if (linkedCard) {
64      linkedCard.classList.remove('hidden')
65    }
66
67    currentlyOpenInfo = infoCard
68  }
69
70  function closeCurrentInfo() {
71    if (currentlyOpenInfo) {
72      const target = currentlyOpenInfo.dataset.target
73      const linkedCard = document.querySelector(`.offer-card [data-triangle="${target}"]`)
74      if (linkedCard) {
75        linkedCard.classList.add('hidden')
76      }
77
78      currentlyOpenInfo.classList.remove('visible')
79      currentlyOpenInfo.classList.remove('opacity-100', 'scale-y-100')
80      currentlyOpenInfo.classList.add('hidden', 'opacity-0', 'scale-y-0')
81      currentlyOpenInfo = null
82    }
83
84    // Retirer aussi .is-deployed de toutes les cartes
85    document.querySelectorAll('.offer-card.is-deployed').forEach(card => {
86      card.classList.remove('is-deployed')
87    })
88  }
89
90  document.querySelectorAll('.close-offer-card').forEach(button => {
91    button.addEventListener('click', function () {
92      closeCurrentInfo()
93    })
94  })
95
96  // Simuler le clic sur le premier bouton si has-first-visible est présent
97  document.querySelectorAll('.lazy-eklo-offers.has-first-visible').forEach(wrapper => {
98    const firstBtn = wrapper.querySelector('.offer-card-button')
99    if (firstBtn) {
100      firstBtn.click()
101    }
102  })
103}