https://www.weddinglist.co.th/wp-content/themes/weddinglist2023/fr…?ver=b2ae9fc6e1f62c23db2dfcedc67da228

1const elSection = document.querySelector('.wdl-friendly-search-section');
2const elBar = document.querySelector('.wdl-friendly-search-bar');
3const elMain = document.querySelector('.wdl-friendly-search-main');
4const elModal = document.querySelector('.wdl-friendly-search-modal');
5const elTab = document.querySelector('.wdl-friendly-search-nav');
6const elFormInput = document.querySelector('.wdl-form-input-group');
7const elAllTab = document.querySelectorAll('.wdl-friendly-search-nav button');
8const elAllFilter = document.querySelectorAll('.wdl-friendly-search-main .filters .filter');
9const elAllSkip = document.querySelectorAll('.wdl-friendly-search-modal .modal-title-skip');
10const elAllBack = document.querySelectorAll('.wdl-friendly-search-modal .modal-top-back');
11const elAllCancel = document.querySelectorAll('.wdl-friendly-search-modal .modal-top-cancel');
12const elAllModalChoice = document.querySelectorAll('.wdl-friendly-search-modal .modal-choice');
13
14const btnLocUpdate = document.querySelector('#friendlySearchFilterUpdateLocation')
15const selectLoc = document.querySelector('#friendlySearchFilterProvince')
16const selectSubLoc = document.querySelector('#friendlySearchFilterLocation')
17const inputLoc = document.querySelector('input[name="loc"]')

18const delay = 250
19
20const setFormData = (name, value) => {
21  console.log(`Setting form data: ${name} = ${value}`);
22  if (name === 'vendor_type') {
23    elBar.setAttribute('action', `/vendor_type/${value}/`);
24  } else if (name === 'category') {
25    elBar.setAttribute('action', `/blog/category/${value}/`);
26  } else {
27    elFormInput.querySelector('input[name="' + name + '"]')?.setAttribute('value', value);
28  }
29}
30
31const handleModalOpen = (step) => {
32  setTimeout(()=>{
33    elModal?.classList.add('active');
34    elSection?.classList.add('active');
35
36    elModal.querySelectorAll('.modal-step')?.forEach(e => e.classList.remove('active'));
37    elModal.setAttribute('data-current-step', step)
38    elModal.querySelector('.modal-step' + elModal.getAttribute('data-current-step'))?.classList.add('active');
39  }, delay)
40}
41
42const handleModalClose = () => {
43  if(elModal?.classList.contains('active')) {
44    elSection?.classList.remove('active');
45    elModal?.classList.remove('active');
46    elModal?.classList.add('closing');
47    elModal?.classList.remove('closing')
48  } 
49}
50
51const handleModalReset = () => {
52  document.querySelectorAll('input[type="hidden"]').forEach((e) => {
53    e.value = '';
54    
55  })
56  elAllFilter.forEach((e) => {
57    e.classList.remove('active');
58    e.querySelector('.filter-label-value').innerText = '';
59  })
60}
61
62const handleModalBack = () => {
63  const activeStep = document.querySelector('.modal-step.active')
64  const previousStep = activeStep.previousElementSibling
65  activeStep?.classList.remove('active')
66  previousStep?.classList.add('active')
67}
68
69const handleTabSwap = (tab) => {
70  elAllTab?.forEach((e) => {
71    e.classList.remove('active');
72  })
73  elTab?.querySelector(`button[data-tab="${tab}"]`)?.classList.add('active');
74  elMain?.querySelectorAll('.filters')?.forEach((e) => e.classList.remove('active'));
75  elMain?.querySelector(`.filters[data-tab-content="${tab}"]`)?.classList.add('active');
76
77  //setFormData('type', tab)
78
79  elBar?.setAttribute('action', `/${tab}/`);
80
81  handleModalReset();
82}
83
84const populateData = () => {
85  if(dataLocation) {
86    document.querySelector('#modal-step-1-1 .modal-grid').innerHTML = dataLocation.map((e, i) => 
87      `<div id="filter-1-2-${i}" class="thumb-card" data-form-name="loc" data-form-value="${e.value}">
88        <div class="thumb-image">
89          <img src="${e.thumbnail}" alt="${e.title}">
90        </div>
91        <p>${e.title}</p>
92      </div>`
93    ).join('');
94  }
95  if(dataType) {
96    document.querySelector('#modal-step-1-2 .modal-grid').innerHTML = dataType.map((e, i) => 
97      `<div id="filter-1-1-${i}" class="thumb-card" data-form-name="type" data-form-value="${e.value}">
98        <div class="thumb-image">
99          <img src="${e.thumbnail}" alt="${e.title}">
100        </div>
101        <p>${e.title}</p>
102      </div>`
103    ).join('');
104  }
105  if(dataStyle) {
106    document.querySelector('#modal-step-1-5 .modal-grid').innerHTML = dataStyle.map((e, i) => 
107      `<div id="filter-1-5-${i}" class="thumb-card" data-form-name="character" data-form-value="${e.value}">
108        <div class="thumb-image">
109          <img src="${e.thumbnail}" alt="${e.title}">
110        </div>
111        <p>${e.title}</p>
112      </div>`
113    ).join('');
114  }
115}
116
117const initModalChoice = () => {
118  elAllModalChoice.forEach((e) => {
119    const items = e.querySelectorAll('.modal-choice-item')
120    items.forEach((e2) => {
121      e2.addEventListener('click', () => {
122        items?.forEach((e3) => {e3.classList.remove('active')})
123        e2.classList.add('active');
124        //const value = e2.getAttribute('data-form-value');
125        //setFormData(e.querySelector('.modal-choice-group').getAttribute('data-form-name'), value);
126      })
127    })
128  })
129}
130
131const handleUpdateLocation = () => {
132  const elFilter = elMain.querySelector('.filter[data-filter-name="loc"]')
133  const elLabel = elFilter.querySelector('.filter-label-value')
134  if(selectSubLoc.value !== '' && selectSubLoc.value !== 'all') {
135    setFormData('loc', selectSubLoc.value)
136    //handleModalClose()
137    elFilter.classList.add('active')
138    const label = selectSubLoc.querySelector(`option[value="${selectSubLoc.value}"]`).innerText.replace(/[\r\n]+/g, ' ');
139
140    elLabel.innerText = label
141  } else if (selectLoc.value !== '') {
142    setFormData('loc', selectLoc.value)
143    //handleModalClose()
144    elFilter.classList.add('active')
145    const label = selectLoc.querySelector(`option[value="${selectLoc.value}"]`).innerText.replace(/[\r\n]+/g, ' ');
146
147    elLabel.innerText = label
148  }
149

150  const currentModalStep = document.querySelector(elFilter.getAttribute('data-set-step'));
151  const nextModalStep = currentModalStep.nextElementSibling;
152  const nextSetStep = elFilter.nextElementSibling?.getAttribute('data-set-step');
153
154  currentModalStep.querySelectorAll('.thumb-card').forEach(e => e.classList.remove('active'))
155
156  if(currentModalStep?.getAttribute('data-group') === nextModalStep?.getAttribute('data-group') && nextSetStep) {
157    handleModalOpen(nextSetStep);
158  } else {
159    handleModalClose()
160  }
161}
162
163const handleSelectLocation = (id) => {
164  console.log('handeSelectLocation', id)
165  if(id === 'friendlySearchFilterLocation') {
166  } else if (id === 'friendlySearchFilterProvince') {
167    const value = selectLoc.value
168    selectSubLoc.querySelectorAll('option').forEach((e) => {
169      e.removeAttribute('selected')
170      if(e.getAttribute('data-parent') !== value && e.value !== '') {
171        e.setAttribute('hidden', true)
172      } else {
173        e.removeAttribute('hidden')
174      }
175    })
176    selectSubLoc.querySelector('option[value="all"]').removeAttribute('hidden')
177    selectSubLoc.querySelector('option[value="all"]').removeAttribute('disabled')
178    selectSubLoc.querySelector('option[value="all"]').setAttribute('selected', true)
179  }
180}
181
182const handleSkip = (name) => {
183  const currentElement = document.querySelector('.modal-title-skip[data-form-name="' + name + '"]');
184  const currentModalStep = currentElement.closest('.modal-step');
185  const nextModalStep = currentModalStep.nextElementSibling;
186  const currentFilter = document.querySelector('[data-filter-name="' + name + '"]')
187  const currentStep = parseInt(currentFilter.getAttribute('data-filter-step'))
188  const currentInput = elBar.querySelector('input[name="' + name + '"]');
189  const nextSetStep = currentFilter.nextElementSibling?.getAttribute('data-set-step');
190
191  currentFilter?.classList.add('active');
192  currentFilter.querySelector('.filter-label-value').innerText = 'ไม่ระบุ';
193
194  currentInput?.setAttribute('value', '');
195  if(currentModalStep?.getAttribute('data-group') === nextModalStep?.getAttribute('data-group') && nextSetStep) {
196    handleModalOpen(nextSetStep);
197  } else {
198    handleModalClose()
199  }
200}
201
202const handleFormSubmit = () => {
203  elBar.querySelectorAll('input').forEach((e) => {
204    if(e.value.trim() === '') {
205      e.remove()
206    }
207  })
208}
209
210const initFriendlySearch = () => {
211  populateData();
212
213  // On Tab Click
214  elAllTab.forEach((e) => {
215    e.addEventListener('click', (e2) => {
216      const tab = e.getAttribute('data-tab');
217      handleTabSwap(tab);
218    })
219  })
220
221  // On Location Update
222  btnLocUpdate.addEventListener('click', handleUpdateLocation)
223  selectLoc.addEventListener('change', (e) => handleSelectLocation(selectLoc.id))
224  selectSubLoc.addEventListener('change', (e) => handleSelectLocation(selectSubLoc.id))
225
226  // On Select Change
227  elBar.querySelectorAll('select').forEach((e) => {
228    e.addEventListener('change', (e2) => {
229      const name = e.getAttribute('name');
230      const value = e.value;
231      setFormData(name, value);
232    })
233  })
234
235  // On Filter Click
236  elAllFilter.forEach((e) => {
237    e.addEventListener('click', (e2) => {
238      const headerBottom = document.querySelector('header').getBoundingClientRect().bottom
239      const friendlySearchTop = elSection.getBoundingClientRect().top + (window.scrollY)
240      window.scrollTo(0 , friendlySearchTop - headerBottom)
241      if(document.querySelector(e.getAttribute('data-set-step'))?.classList.contains('active') && elModal?.classList.contains('active')) {
242        handleModalClose();
243      } else {
244        handleModalOpen(e.getAttribute('data-set-step'));
245      }
246    })
247  })
248
249  // On Modal Outside Click
250  window.addEventListener('click', (e) => {
251    if (!elModal.contains(e.target) && !elMain.contains(e.target)) {
252      handleModalClose()
253    }
254  })
255
256  // On Modal Back Click
257  elAllBack.forEach((e) => {
258    e.addEventListener('click', (e2) => {
259      handleModalBack();
260    })
261  })
262
263  // On Modal Cancel Click
264  elAllCancel.forEach((e) => {
265    e.addEventListener('click', (e2) => {
266      //handleModalReset();
267      handleModalClose();
268    })
269  })
270
271  // On Modal Choice Click
272  initModalChoice()
273
274  // On All Choice/Grid Click
275  elBar.querySelectorAll('[data-form-name]').forEach((e) => {
276    e.addEventListener('click', (e2) => {
277      if(!e.classList.contains('modal-title-skip')) {
278        const name = e.getAttribute('data-form-name');
279        const value = e.getAttribute('data-form-value');
280        const label = e.innerText.replace(/[\r\n]+/g, ' ');
281
282        setFormData(name, value);
283
284        const parent = e.parentElement
285        const otherE = parent.querySelectorAll('[data-form-name]')
286

287        otherE.forEach(e3 => e3.classList.remove('active'))
288        e.classList.add('active')
289        
290        const currentElement = e;
291        const currentModalStep = currentElement.closest('.modal-step');
292        const nextModalStep = currentModalStep.nextElementSibling;
293        const currentFilter = document.querySelector('[data-filter-name="' + name + '"]')
294        const currentStep = parseInt(currentFilter.getAttribute('data-filter-step'))
295        const currentInput = elBar.querySelector('input[name="' + name + '"]');
296        const nextSetStep = currentFilter.nextElementSibling?.getAttribute('data-set-step');
297
298        if(currentModalStep?.getAttribute('data-group') === nextModalStep?.getAttribute('data-group') && nextSetStep) {
299          handleModalOpen(nextSetStep);
300        } else {
301          handleModalClose()
302        }
303  
304        elBar.querySelector(`[data-filter-name="${name}"]`)?.classList.add('active');
305        elBar.querySelector(`[data-filter-name="${name}"] .filter-label-value`).innerText = label;
306      }
307    })
308  })
309
310  // On Skip Click
311  elAllSkip.forEach((e) => {
312    e.addEventListener('click', (e2) => {
313      const name = e.getAttribute('data-form-name');
314      handleSkip(name);
315    })
316  })
317
318  // On Form Submit
319  elBar.addEventListener('submit', (e) => {
320    e.preventDefault();
321    handleFormSubmit();
322    setTimeout(()=>{
323      elBar.submit();
324    }, delay)
325  });
326
327  // Auto-submit in last modal-step
328  elModal.querySelectorAll('.modal-step:last-of-type [data-form-name]').forEach((e) => {
329    e.addEventListener('click', ()=> {
330      handleFormSubmit()
331      setTimeout(()=>{
332        elBar.submit()
333      }, delay)
334    })
335  })
336}
337
338elSection && initFriendlySearch()