http://www.tourandong.com/eng/assets/js/sub_page_menu.js

1/* sub page의 header menu 제어 */
2// .home 요소에 hover 이벤트 추가
3const homeElement = document.querySelector('.home');
4const homeImage = homeElement.querySelector('img');
5homeElement.addEventListener('mouseover', function() {
6    homeImage.src = '/eng/assets/img/sub_pages_img/icon/icon_home_g.png';
7});
8homeElement.addEventListener('mouseout', function() {
9    homeImage.src = '/eng/assets/img/sub_pages_img/icon/icon_home_b.png'; // 원래 이미지로 복원
10});
11
12const homeElement2 = document.querySelector('.org_home');
13const homeImage2 = homeElement2.querySelector('img');
14homeElement2.addEventListener('mouseover', function() {
15    homeImage2.src = '/eng/assets/img/sub_pages_img/icon/icon_home_g.png';
16});
17homeElement2.addEventListener('mouseout', function() {
18    homeImage2.src = '/eng/assets/img/sub_pages_img/icon/icon_home_b.png'; // 원래 이미지로 복원
19});
20
21const shareBtn = document.querySelector('.share');
22const shareBtnImg = shareBtn.querySelector('img');
23shareBtn.addEventListener('mouseover', function() {
24    shareBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_share_hover.png';
25});
26shareBtn.addEventListener('mouseout', function() {
27    shareBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_share.png'; // 원래 이미지로 복원
28});
29
30const printBtn = document.querySelector('.print');
31const printBtnImg = printBtn.querySelector('img');
32printBtn.addEventListener('mouseover', function() {
33    printBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_print_hover.png';
34});
35printBtn.addEventListener('mouseout', function() {
36    printBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_print.png'; // 원래 이미지로 복원
37});
38
39const linkBtn = document.querySelector('.txt_link');
40if(linkBtn){
41    const linkBtnImg = linkBtn.querySelector('img');
42    linkBtn.addEventListener('mouseover', function() {
43        linkBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_link_green.png';
44    });
45    linkBtn.addEventListener('mouseout', function() {
46        linkBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_link_black.png'; // 원래 이미지로 복원
47    });
48}
49
50const siteBtns = document.querySelectorAll('.site');
51if(siteBtns){
52    siteBtns.forEach(siteBtn => {
53        const siteBtnImg = siteBtn.querySelector('img');
54        siteBtn.addEventListener('mouseover', function() {
55            siteBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_link_green.png';
56        });
57        siteBtn.addEventListener('mouseout', function() {
58            siteBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_link_black.png'; // 원래 이미지로 복원
59        });
60    });
61}
62
63const companyBtns = document.querySelectorAll('.company');
64if(companyBtns){
65    companyBtns.forEach(companyBtn => {
66        const companyBtnImg = companyBtn.querySelector('.com_img');
67        companyBtn.addEventListener('mouseover', function() {
68            companyBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_link_green.png';
69        });
70        companyBtn.addEventListener('mouseout', function() {
71            companyBtnImg.src = '/eng/assets/img/sub_pages_img/icon/icon_link_black.png'; // 원래 이미지로 복원
72        });
73    });
74}
75
76/* select 제어 스크립트 시작 - 서브 페이지 카테고리 부분
77    option 에 id 는 필수값입니다.
78*/
79/* class명을 추가/제거 해주는 함수 */
80function toggleSelectBox(selectBox) {
81    const optionList = selectBox.querySelector('.select_option');
82    const isOptionVisible = selectBox.classList.contains("active");
83
84    if (isOptionVisible) {
85        //optionList.style.opacity = '0';
86        //optionList.style.maxHeight = '0';
87        setTimeout(() => {
88            selectBox.classList.remove("active");
89            //optionList.style.display = 'none';
90        }, 10); // opacity 전환 시간 이후에 display 변경
91    } else {
92        //optionList.style.display = 'flex';
93        //optionList.style.opacity = '0';
94        //optionList.style.maxHeight = 'fit-content';
95        //optionList.style.transition = 'opacity 0.5s ease, max-height 0.5s ease';
96        setTimeout(() => {
97            //optionList.style.opacity = '1';
98            //optionList.style.maxHeight = 'fit-content'; // 원하는 높이로 설정
99            selectBox.classList.add("active");
100        }, 10);
101    }
102}
103
104/* 옵션값 선택 */
105function selectOption2(optionElement) {
106    const selectBox = optionElement.closest(".select_menu");
107    const val = optionElement.closest(".option").id;
108    const selectedElement = selectBox.querySelector(".selected_value");
109    selectedElement.textContent = optionElement.textContent;
110    const chNodes = selectBox.querySelectorAll('li');
111    for(var i=0; i<chNodes.length; i++){
112        if(chNodes[i].classList.length == 2){
113            chNodes[i].className = 'option';
114        }
115    }
116    document.getElementById(val).className = 'option checked';
117}
118
119const selectBoxElements = document.querySelectorAll(".select_menu");
120

121selectBoxElements.forEach(selectBoxElement => {
122    selectBoxElement.addEventListener("click", function (e) {
123        const targetElement = e.target;
124        const isOptionElement = targetElement.classList.contains("option");
125
126        // 모든 select_menu에서 active 클래스 제거
127        selectBoxElements.forEach(box => {
128            if (box !== selectBoxElement) { // 현재 클릭한 요소가 아니면 active 제거
129                box.classList.remove("active");
130                const optionList = box.querySelector('.select_option');
131                //optionList.style.opacity = '0';
132                //optionList.style.maxHeight = '0';
133                /* setTimeout(() => {
134                    optionList.style.display = 'none';
135                }, 500); */
136            }
137        });
138
139        if (isOptionElement) {
140            selectOption2(targetElement);
141        }
142
143        toggleSelectBox(selectBoxElement);
144    });
145});
146
147document.addEventListener("click", function (e) {
148    const targetElement = e.target;
149    const isSelect = targetElement.classList.contains("select_menu") || targetElement.closest(".select_menu");
150
151    if (isSelect) {
152        return;
153    }
154
155    const allSelectBoxElements = document.querySelectorAll(".select_menu");
156
157    /* allSelectBoxElements.forEach(boxElement => {
158        boxElement.classList.remove("active");
159        const optionList = boxElement.querySelector('.select_option');
160        optionList.style.opacity = '0';
161        optionList.style.maxHeight = '0';
162        setTimeout(() => {
163            optionList.style.display = 'none';
164        }, 500);
165    }); */
166});
167/* select 제어 스크립트 끝 */
168
169/* select 제어 스크립트 시작 ------ tour courses 에 필터 select 부분
170    option 에 id 는 필수값입니다.
171*/
172/* 옵션값 선택 */
173function selectOption(optionElement) {
174    const selectBox = optionElement.closest(".select_filter");
175    const val = optionElement.closest(".option").id;
176    const selectedElement = selectBox.querySelector(".selected_value");
177    selectedElement.textContent = optionElement.textContent;
178    const chNodes = selectBox.querySelectorAll('li');
179    for(var i=0; i<chNodes.length; i++){
180        if(chNodes[i].classList.length == 2){
181            chNodes[i].className = 'option';
182        }
183    }
184    document.getElementById(val).className = 'option checked';
185}
186
187const selectFilterElements = document.querySelectorAll(".select_filter");
188
189selectFilterElements.forEach(selectFilterElement => {
190    selectFilterElement.addEventListener("click", function (e) {
191        const targetElement = e.target;
192        const isOptionElement = targetElement.classList.contains("option");
193
194        // 모든 select_menu에서 active 클래스 제거
195        selectFilterElements.forEach(box => {
196            if (box !== selectFilterElement) { // 현재 클릭한 요소가 아니면 active 제거
197                box.classList.remove("active");
198            }
199        });
200
201        if (isOptionElement) {
202            selectOption(targetElement);
203        }
204
205        toggleSelectBox(selectFilterElement);
206    });
207});
208
209document.addEventListener("click", function (e) {
210    const targetElement = e.target;
211    const isSelect = targetElement.classList.contains("select_menu") || targetElement.closest(".select_filter");
212
213    if (isSelect) {
214        return;
215    }
216
217    const allSelectBoxElements = document.querySelectorAll(".select_filter");
218
219    allSelectBoxElements.forEach(boxElement => {
220        boxElement.classList.remove("active");
221    });
222});
223
224/* select 제어 스크립트 시작 ------ special theme - untact 모바일 일때 select 로 변경하는 부분
225    option 에 id 는 필수값입니다.
226*/
227/* 옵션값 선택 */
228function selectOption_untact(optionElement) {
229    const selectBox = optionElement.closest(".untact");
230    const val = optionElement.closest(".option").id;
231    const selectedElement = selectBox.querySelector(".selected_value");
232    selectedElement.textContent = optionElement.textContent;
233    const chNodes = selectBox.querySelectorAll('li');
234    for(var i=0; i<chNodes.length; i++){
235        if(chNodes[i].classList.length == 2){
236            chNodes[i].className = 'option';
237        }
238    }
239    document.getElementById(val).className = 'option checked';
240}
241
242const selectFilterElements_untact = document.querySelectorAll(".untact");
243
244selectFilterElements_untact.forEach(selectFilterElement => {
245    selectFilterElement.addEventListener("click", function (e) {
246        const targetElement = e.target;
247        const isOptionElement = targetElement.classList.contains("option");
248
249        // 모든 select_menu에서 active 클래스 제거
250        selectFilterElements_untact.forEach(box => {
251            if (box !== selectFilterElement) { // 현재 클릭한 요소가 아니면 active 제거
252                box.classList.remove("active");
253            }
254        });
255
256        if (isOptionElement) {
257            selectOption_untact(targetElement);
258
259            // 선택된 옵션의 ID를 사용하여 tab_panel 제어 추가
260            const optionId = targetElement.id;
261            const [tabId] = optionId.split('_');
262
263            // 기존에 활성화된 tab_panel 숨기기
264            document.querySelectorAll('.tab_panel').forEach(panel => {
265                panel.style.display = 'none';
266                panel.classList.remove('active');
267            });
268
269            // 해당하는 tab_panel 표시
270            const targetPanel = document.getElementById(tabId);
271            if (targetPanel) {
272                targetPanel.style.display = 'block';
273                targetPanel.classList.add('active');
274            }
275        }
276
277        toggleSelectBox(selectFilterElement);
278    });

279});
280
281document.addEventListener("click", function (e) {
282    const targetElement = e.target;
283    const isSelect = targetElement.classList.contains("select_menu") || targetElement.closest(".untact");
284
285    if (isSelect) {
286        return;
287    }
288
289    const allSelectBoxElements = document.querySelectorAll(".untact");
290
291    allSelectBoxElements.forEach(boxElement => {
292        boxElement.classList.remove("active");
293    });
294});
295/* select 제어 스크립트 끝 */
296
297// sub_menu_box의 스크롤 감지
298window.addEventListener('scroll', function() {
299    const subMenuBox = document.querySelector('.org_menu_box');
300    const floatingBox = document.querySelector('.floating_menu_box');
301
302    if (subMenuBox && floatingBox) {
303        const rect = subMenuBox.getBoundingClientRect();
304
305        if (rect.bottom <= 150) {
306            floatingBox.classList.add('show');
307        } else {
308            floatingBox.classList.remove('show');
309        }
310    }
311});
312
313//sub_cont_thead의 스크롤 감지
314window.addEventListener('scroll', function() {
315    const subMenuBox = document.querySelector('.sub_cont_thead');
316    const floatingBox = document.querySelector('.floating_thead');
317
318    if (subMenuBox && floatingBox) {
319        const rect = subMenuBox.getBoundingClientRect();
320
321        if (rect.bottom <= 200) {
322            floatingBox.classList.add('show');
323        } else {
324            floatingBox.classList.remove('show');
325        }
326    }
327});
328
329//fee_thead 스크롤 감지
330window.addEventListener('scroll', function() {
331    const subMenuBox = document.querySelector('.fee_thead');
332    const floatingBox = document.querySelector('.floating_thead');
333
334    if (subMenuBox && floatingBox) {
335        const rect = subMenuBox.getBoundingClientRect();
336        if (rect.bottom <= 200) {
337            floatingBox.classList.add('show');
338        } else {
339            floatingBox.classList.remove('show');
340        }
341    }
342});
343window.addEventListener('scroll', function() {
344    const subMenuBox = document.querySelector('.fee_thead');
345    const floatingBox = document.querySelector('.floating_thead2');
346
347    if (subMenuBox && floatingBox) {
348        const rect = subMenuBox.getBoundingClientRect();
349        if (rect.bottom <= 200) {
350            floatingBox.classList.add('show');
351        } else {
352            floatingBox.classList.remove('show');
353        }
354    }
355});
356
357const subContVisual = document.querySelector('.sub_cont_visual');
358if(subContVisual){
359    const subContVisualFigure = subContVisual.querySelector('figure');
360    const body = document.body;
361    subContVisualFigure.addEventListener('scroll', () => {
362        if (subContVisualFigure.scrollTop > 400) {
363            body.style.overflow = 'auto';
364        }else if (subContVisualFigure.scrollTop < 50){
365            body.style.overflow = 'auto';
366        }else {
367            body.style.overflow = 'hidden';
368        }
369    });
370}
371
372/* 좌우 반전 애니메이션 적용 */
373const mapIconFigure = document.querySelector('.car .map_addr .map_icon a figure');
374
375if (mapIconFigure) {
376    const mapIconAnchor = mapIconFigure.parentElement;
377    mapIconAnchor.addEventListener('mouseenter', () => {
378        mapIconFigure.style.transform = 'scaleX(-1)';
379        mapIconFigure.style.transition = 'transform 0.5s ease';
380    });
381
382    mapIconAnchor.addEventListener('mouseleave', () => {
383        mapIconFigure.style.transform = 'scaleX(1)';
384        mapIconFigure.style.transition = 'transform 0.5s ease';
385    });
386}
387
388/* select 제어 스크립트 시작 ------ cultural commentator에 들어가는 select
389    option 에 id 는 필수값입니다.
390*/
391/* 옵션값 선택 */
392function selectOptionTime(optionElement) {
393    const selectBox = optionElement.closest(".select_time");
394    const val = optionElement.closest(".option").id;
395    const selectedElement = selectBox.querySelector(".selected_value");
396    if (selectedElement.matches('input')) {
397        selectedElement.value = optionElement.textContent;
398    } else {
399        selectedElement.textContent = optionElement.textContent;
400    }
401    const chNodes = selectBox.querySelectorAll('li');
402    for(var i=0; i<chNodes.length; i++){
403        if(chNodes[i].classList.length == 2){
404            chNodes[i].className = 'option';
405        }
406    }
407    document.getElementById(val).className = 'option checked';
408}
409
410const selectTimeElements = document.querySelectorAll(".select_time");
411

412selectTimeElements.forEach(selectTimeElement => {
413    selectTimeElement.addEventListener("click", function (e) {
414        const targetElement = e.target;
415        const isOptionElement = targetElement.classList.contains("option");
416
417        // 모든 select_menu에서 active 클래스 제거
418        selectTimeElements.forEach(box => {
419            if (box !== selectTimeElement) {
420                box.classList.remove("active");
421                const selectedElement = box.querySelector(".selected");
422                if (selectedElement) {
423                    selectedElement.classList.remove("flipped"); // 이미지 회전 초기화
424                }
425            }
426        });
427
428        // .selected 이미지 회전 (해당 요소에 flipped 클래스 추가/제거)
429        const selectedElement = selectTimeElement.querySelector(".selected");
430        if (selectedElement) {
431            selectedElement.classList.toggle("flipped");
432        }
433
434        if (isOptionElement) {
435            selectOptionTime(targetElement);
436        }
437
438        toggleSelectBox(selectTimeElement);
439    });
440});
441
442document.addEventListener("click", function (e) {
443    const targetElement = e.target;
444    const isSelect = targetElement.classList.contains("select_menu") || targetElement.closest(".select_time");
445
446    if (isSelect) {
447        return;
448    }
449
450    const allSelectBoxElements = document.querySelectorAll(".select_time");
451
452    allSelectBoxElements.forEach(boxElement => {
453        boxElement.classList.remove("active");
454    });
455});
456
457let scrollPosition = 0; // 스크롤 위치 저장 변수
458
459// .policy_chk 요소가 존재할 때만 클릭 이벤트 리스너 추가
460const policyCheckElement = document.querySelector('.policy_chk');
461if (policyCheckElement) {
462    policyCheckElement.addEventListener('click', function (e) {
463        e.preventDefault();
464
465        const policyPopup = document.getElementById('policyPopup');
466        const popupOverlay = document.getElementById('popupOverlay');
467
468        if (policyPopup && popupOverlay) {
469            // scrollPosition = window.pageYOffset; // 현재 스크롤 위치 저장
470            // document.body.style.position = 'fixed';
471            // document.body.style.top = `-${scrollPosition}px`;
472            // document.body.style.width = '100%';
473
474            policyPopup.style.display = 'block';
475            popupOverlay.style.display = 'block';
476        }
477    });
478}
479
480const datePickerBtn = document.getElementById('date_picker');
481if (datePickerBtn) {
482    datePickerBtn.addEventListener('click', function (e) {
483        e.preventDefault();
484
485        const policyPopup = document.getElementById('date_container');
486        const popupOverlay = document.getElementById('popupOverlay');
487
488        if (policyPopup && popupOverlay) {
489            scrollPosition = window.pageYOffset; // 현재 스크롤 위치 저장
490            document.body.style.position = 'fixed';
491            document.body.style.top = `-${scrollPosition}px`;
492            document.body.style.width = '100%';
493
494            policyPopup.style.display = 'block';
495            popupOverlay.style.display = 'block';
496        }
497    });
498}
499
500// #closePopupBtn 요소가 존재할 때만 클릭 이벤트 리스너 추가
501const closePopupBtn = document.getElementById('closePopupBtn');

502if (closePopupBtn) {
503    closePopupBtn.addEventListener('click', function () {
504        const policyPopup = document.getElementById('policyPopup');
505        const popupOverlay = document.getElementById('popupOverlay');
506
507        if (policyPopup && popupOverlay) {
508            policyPopup.style.display = 'none';
509            popupOverlay.style.display = 'none';
510
511            // 원래 스크롤 위치로 복구
512            document.body.style.position = '';
513            document.body.style.top = '';
514            // window.scrollTo(0, scrollPosition);
515        }
516    });
517}
518
519// #calendarClose 요소가 존재할 때만 클릭 이벤트 리스너 추가
520const closePopupBtn2 = document.getElementById('calendarClose');
521if (closePopupBtn2) {
522    closePopupBtn2.addEventListener('click', function () {
523        const policyPopup = document.getElementById('date_container');
524        const popupOverlay = document.getElementById('popupOverlay');
525
526        if (policyPopup && popupOverlay) {
527            policyPopup.style.display = 'none';
528            popupOverlay.style.display = 'none';
529
530            // 원래 스크롤 위치로 복구
531            document.body.style.position = '';
532            document.body.style.top = '';
533            window.scrollTo(0, scrollPosition);
534        }
535    });
536}
537
538// #popupOverlay 요소가 존재할 때만 클릭 이벤트 리스너 추가
539// const popupOverlay = document.getElementById('popupOverlay');
540// if (popupOverlay) {
541//     popupOverlay.addEventListener('click', function () {
542//         const policyPopup = document.getElementById('policyPopup');
543//
544//         if (policyPopup) {
545//             policyPopup.style.display = 'none';
546//             popupOverlay.style.display = 'none';
547//
548//             // 원래 스크롤 위치로 복구
549//             document.body.style.position = '';
550//             document.body.style.top = '';
551//             window.scrollTo(0, scrollPosition);
552//         }
553//     });
554// }
555
556
557$('#printPage').on('click', function (e) {
558  e.preventDefault();
559  window.print();
560});
561
562$('.sub_btn.share').on('click',function(){
563    $('.snsList').toggleClass('on');
564})