https://image.donga.com/donga_v2/js/common/NewsHeader.js?t=20260806

1this.isInitLangs = false;
2this.isInitLogin = false;
3this.currentLangIdx = 0;
4this.keywordSwiper = null;
5this.keywordOption = {
6  autoplay: {
7	delay: 5000,
8  },
9  loop: true,
10  direction: 'vertical',
11};
12this.isLangMove = false;
13this.isLoginMove = false;
14 
15 function toggleMegaMenu(state = null, setFocus = true) {
16    if (state === null)
17      state = !JSON.parse(this.toggleMenuRef.getAttribute('aria-expanded'));
18    this.toggleMenuRef.setAttribute('aria-expanded', state);
19    if (state) {
20      this.toggleMenuSpanRef.textContent = '전체메뉴 닫기';
21      slideDown(this.megaMenuRef);
22      this.toggleMenuRef.classList.add('is_active');
23      this.toggleMenuRef.querySelector('use').setAttribute('href', '#ic-close');
24      this.megaMenuRef.classList.add('is_active');
25      this.megaMenuRef.setAttribute('tabindex', 0);
26      this.toggleLangsList(false, false);
27      this.toggleSearchArea(false, false);
28     // Dev 231024 : 스크롤픽스 추가
29      if (baseData.win.w < 1025) scrollFix(true);
30	  if($(".today_contents").length) { // 20231115 편성표 있을 경우만 동작 수정
31	  window.toggleTodayContent(false, false); // Dev 231109 : 통합검색 열때 오늘의 콘텐츠 닫기
32	   }
33      setTimeout(() => {
34        this.megaMenuRef.focus();
35      }, 100);
36      this.toggleMenuRef.closest('#header').classList.add('is_active');
37	   if (baseData.win.w < 768) { // 모바일앱 댓글 스크롤 이슈 관련 추가
38			$('body').addClass('minheight');
39			window.scrollBy(0, 1);
40		}
41    } else {
42      this.toggleMenuSpanRef.textContent = '전체메뉴 열기';
43      slideUp(this.megaMenuRef);
44      this.toggleMenuRef.classList.remove('is_active');
45      this.toggleMenuRef.querySelector('use').setAttribute('href', '#ic-menu');
46      this.megaMenuRef.classList.remove('is_active');
47      if (setFocus)
48        setTimeout(() => {
49          this.toggleMenuRef.focus();
50        }, 100);
51      this.toggleMenuRef.closest('#header').classList.remove('is_active');
52      // Dev 231024 : 스크롤픽스 추가
53     scrollFix(false);
54	  if (baseData.win.w < 768) { // 모바일앱 댓글 스크롤 이슈 관련 추가
55			$('body').removeClass('minheight');
56			window.scrollBy(0, -1);
57		}
58    }
59  }
60function toggleSearchArea(state = null, setFocus = true) {
61	if (state === null) state = !JSON.parse(this.searchOpenRef.getAttribute('aria-expanded'));
62	this.searchOpenRef.setAttribute('aria-expanded', state);
63	if (state) {
64	  slideDown(this.searchSec);
65	  this.toggleLangsList(false, false);
66	  this.toggleMegaMenu(false, false);
67	  if($(".today_contents").length) { // 20231106 편성표 있을 경우만 동작 수정
68		window.toggleTodayContent(false, false); // Dev 231024 : 통합검색 열때 오늘의 콘텐츠 닫기
69		} 
70	  this.searchSec.closest('#header').classList.add('open_search');
71	  scrollFix(true); // Dev 231024 : 스크롤픽스 이벤트 추가
72	  setTimeout(() => {
73		if (!this.keywordSwiper) {
74		   // Dev 231109 : 슬라이드 세팅 setTimeout 추가
75          setTimeout(() => {
76            this.keywordSwiper = this.setSwiper('.keyword_slide_wrap', this.keywordOption);
77          }, 10);
78		}
79		this.searchSec.querySelector('input').focus();
80	  }, 100);
81	} else {
82	  slideUp(this.searchSec);
83	  this.searchSec.closest('#header').classList.remove('open_search');
84	   scrollFix(false); // Dev 231109 : 스크롤픽스 이벤트 추가 - 닫히는 이벤트라 false로 줘야하는데 true 되어있어 수정
85      // Dev 231016 : 검색 키워드 멈춤에 대한 방지
86      // Dev 231024 : 통합 검색창 닫힐때 깨져보여 시차 적용
87      setTimeout(() => {
88        if (this.keywordSwiper) {
89          this.keywordSwiper.destroy();
90          this.keywordSwiper = null;
91        }
92      }, 200);
93	  if (setFocus)
94		setTimeout(() => {
95		  this.searchOpenRef.focus();
96		}, 100);
97	}
98}
99
100  function setSwiper(el, option) {
101    return new Swiper(el, option);
102  }
103  function toggleLangsList(state = null, setFocus = true) {
104if (!this.langsRef) return; //251014 추가
105    if (this.isLangMove) return;
106    this.isLangMove = true;
107    if (state === null)
108      state = !JSON.parse(this.langsRef.getAttribute('aria-expanded'));
109    //console.log(state);
110    this.langsRef.setAttribute('aria-expanded', state);
111    if (state) {
112      slideDown(this.langsListRef);
113      this.langsRef.classList.add('is_active');
114      this.langsListRef.setAttribute('tabindex', 0);
115      this.toggleSearchArea(false, false);
116      this.toggleMegaMenu(false, false);
117      setTimeout(() => {
118        this.langsListRef.focus();
119        if (!this.isInitLangs) {
120          this.isInitLangs = true;
121          this.langsListOptRef[0].classList.add('is_focus');
122          this.langsListRef.addEventListener('keydown', (e) =>
123            this.setHandleLangsOption(e),
124          );
125        }
126      }, 100);
127    } else {
128      slideUp(this.langsListRef);
129      this.langsRef.classList.remove('is_active');
130      this.langsListRef.removeAttribute('tabindex');
131      if (setFocus)
132        setTimeout(() => {
133          this.langsRef.focus();
134        }, 100);
135    }
136    setTimeout(() => {
137      this.isLangMove = false;
138    }, 150);
139  }
140
141//   function toggleloginList(state = null, setFocus = true) {
142// 	if (this.isLoginMove) return;
143// 	this.isLoginMove = true;
144// 	if (state === null) state = !JSON.parse(this.loginRef.getAttribute('aria-expanded'));
145// 	this.loginRef.setAttribute('aria-expanded', state);
146// 	if (state) {
147// 	  slideDown(this.loginListRef);
148// 	  this.loginRef.classList.add('is_active');
149// 	  this.loginListRef.setAttribute('tabindex', 0);
150// 	  this.toggleSearchArea(false, false);
151// 	  this.toggleMegaMenu(false, false);
152// 	  setTimeout(() => {
153// 		this.loginListRef.focus();
154// 		if (!this.isInitLogin) {
155// 		  this.isInitLogin = true;
156// 		  this.loginListRef.addEventListener('keydown', (e) => this.setHandleLangsOption(e));
157// 		}
158// 	  }, 100);
159// 	} else {
160// 	  slideUp(this.loginListRef);
161// 	  this.loginRef.classList.remove('is_active');
162// 	  this.loginListRef.removeAttribute('tabindex');
163// 	  if (setFocus)
164// 		setTimeout(() => {
165// 		  this.loginRef.focus();
166// 		}, 100);
167// 	}
168// 	setTimeout(() => {
169// 	  this.isLoginMove = false;
170// 	}, 150);
171// }
172
173  function setHandleLangsOption(e) {
174    e.preventDefault();
175    const code = Number(e.keyCode);
176    if (code === 40) {
177      // 아래 화사표
178      this.currentLangIdx =
179        this.currentLangIdx < this.langsListOptRef.length - 1
180          ? this.currentLangIdx + 1
181          : this.langsListOptRef.length - 1;
182    } else if (code === 38) {
183      this.currentLangIdx =
184        this.currentLangIdx > 0 ? this.currentLangIdx - 1 : 0;
185    } else if (code === 13) {
186      window.open(this.langsListOptRef[this.currentLangIdx].href);
187      this.toggleLangsList(false);
188    } else if (code === 27 || code === 9) {
189      this.toggleLangsList(false);
190    }
191    this.langsListOptRef.forEach((v, i) => {
192      if (i === this.currentLangIdx) {
193        this.langsListOptRef[i].classList.add('is_focus');
194      } else {
195        this.langsListOptRef[i].classList.remove('is_focus');
196      }
197    });

198  }
199  function init() {
200    // 추천 뉴스레터 페이지 제외
201    if(!document.getElementById('container').classList.contains('recommend_nl')){
202      this.toggleMenuRef = document.querySelector('#megaMenu_toggle');
203      this.toggleMenuSpanRef = this.toggleMenuRef.querySelector('span');
204      this.megaMenuRef = document.querySelector('#megaMenu');
205
206      this.searchOpenRef = document.querySelector('#search_open');
207      this.searchCloseRef = document.querySelector('.search_sec .close_btn');
208      this.searchSec = document.querySelector('.search_sec');
209
210      this.langsRef = document.querySelector('.lang_btn');
211//251014 수정 시작
212      if (this.langsRef) {
213      this.langsListRef = this.langsRef.parentNode.querySelector('.lang_change_list');
214      this.langsListOptRef = this.langsListRef.querySelectorAll('a');
215
216 this.langsRef.addEventListener('click', () => this.toggleLangsList());
217      this.langsListRef.addEventListener('blur', (e) => {
218        e.preventDefault();
219        this.toggleLangsList(false);
220      });
221}
222
223      this.toggleMenuRef.addEventListener('click', () => this.toggleMegaMenu());
224      this.searchOpenRef.addEventListener('click', () =>
225        this.toggleSearchArea(true),
226      );
227      this.searchCloseRef.addEventListener('click', () =>
228        this.toggleSearchArea(false),
229      );
230     //251014 수정 끝
231    }
232    
233    
234
235	// if ($('.login').hasClass('login_on')) {
236	// 	this.loginRef = document.querySelector('.login_on');
237	// 	this.loginListRef = this.loginRef.parentNode.querySelector('.login_cont');
238	// 	this.loginRef.addEventListener('click', () => this.toggleloginList());
239	// 	this.loginListRef.addEventListener('blur', (e) => {
240	// 	  e.preventDefault();
241	// 	  this.toggleloginList(false);
242	// 	});
243	// }
244
245    
246	//window.toggleMegaMenu = (state, focus) => this.toggleMegaMenu(state, focus); // Dev 231109 : 메가메뉴 핸들 이벤트 윈도우 변수화
247  }
248
249this.init();
250
251
252function menuBtn(){
253	// 언어 메뉴
254	$('.lang_btn').on('click',function(){
255		if($(this).hasClass('is_active')){
256			$(this).removeClass('is_active');
257			$(this).parents('.langs').find('.lang_change_list').stop().slideUp();
258			
259		}else{
260			$(this).addClass('is_active');
261			$(this).parents('.langs').find('.lang_change_list').stop().slideDown()
262			$(this).parents('.langs').find('.lang_change_list').find('.lang_change_node').eq(0).find('a').addClass('is_focus');
263		}
264	}) 
265
266	//로그인 메뉴
267	$('.login_btn').on('click',function(){
268		if($(this).hasClass('is_active')){
269			$(this).removeClass('is_active');
270			$(this).parents('.login').find('.login_cont').stop().slideUp();
271		}else{
272			$(this).addClass('is_active');
273			$(this).parents('.login').find('.login_cont').stop().slideDown();
274		}
275	}) 
276
277	//언어 메뉴 하부 메뉴 클릭 시 메뉴 닫기
278	$(".lang_change_node a").on("click", function () {
279    	$(this).parents(".langs").find(".lang_btn").removeClass("is_active");
280    	$(this).parents(".langs").find(".lang_change_list").stop().slideUp();
281	});
282
283	//로그인 하부 메뉴 클릭 시 메뉴 닫기
284	$(".login_list li, .login_list li a").on("click", function () {
285    	$(this).parents(".login").find(".login_btn").removeClass("is_active");
286    	$(this).parents(".login").find(".login_cont").stop().slideUp();
287	});
288
289	//영역 외부 클릭 시 메뉴 닫기
290	$('html').click(function(e){
291		if($('.lang_btn').hasClass('is_active')){
292			if($(e.target).parents('.langs').length < 1){
293				$('.lang_btn').removeClass('is_active');
294				$('.langs').find('.lang_change_list').stop().slideUp();
295			}
296		}
297		if($('.login_btn').hasClass('is_active')){
298			if($(e.target).parents('.login').length < 1){
299				$('.login_btn').removeClass('is_active');
300				$('.login').find('.login_cont').stop().slideUp();
301			}
302		}
303	});
304}
305
306menuBtn();