https://prad.knu.ac.kr/views/hmpg/template/t002003/js/script.js

1$(function() {	
2	var mediaLG = window.matchMedia('(min-width: 992px)');
3
4	initCommon();	// 공통
5	initHeader();	// 헤더
6	initMain();		// 메인
7	initSub();		// 서브
8
9	/**
10	 * 공통 
11	 */
12
13	function initCommon() {
14		$('.carousel-box .prev-btn').on('click', function() {
15			$(this).closest('.carousel-box').find('.owl-carousel').trigger('prev.owl.carousel');
16		});
17
18		$('.carousel-box .next-btn').on('click', function() {
19			$(this).closest('.carousel-box').find('.owl-carousel').trigger('next.owl.carousel');
20		});
21	}
22
23	/**
24	 * 헤더
25	 */
26	function initHeader() {
27		var duration = 300;
28
29		// 햄버거 메뉴 클릭
30		$('.nav-bg-fostrap').on('click', function() {
31			if (!mediaLG.matches) {
32				openMenu();
33			}
34		});
35
36		// 햄버거 메뉴 모달 영역 클릭
37		$('#mask').on('click', function() {				
38			closeMenu();
39		});
40
41		$('.menubar-close').on('click', function() {
42			closeMenu();
43		});
44
45		$(window).on('resize', function() {
46			if (mediaLG.matches) {
47				closeMenu();
48			}
49		});
50
51		// 1 뎁스 메뉴 클릭
52		var $firstMenuitems = $('.menubar > li > [role="menuitem"]');
53		$firstMenuitems.on('click', function() {
54			if (!mediaLG.matches) {
55				$firstMenuitems.not(this).attr('aria-expanded', 'false');
56				toggleMenuItemExpanded($(this));
57			}
58		});
59
60		// 2 뎁스 메뉴 클릭
61		var $secondMenuitems = $('.menubar .menubox > .menubox-inner > [role="menu"] > li > [role="menuitem"]');
62		$secondMenuitems.on('click', function() {
63			if (!mediaLG.matches) {
64				$secondMenuitems.not(this).attr('aria-expanded', 'false');
65				toggleMenuItemExpanded($(this));
66			}
67		});
68
69		// window resize
70		$(window).on('resize', function() {
71			if (mediaLG.matches) {
72				closeMenu();
73				resetMenu();
74			} else {
75				$('.menubox').removeAttr('style');
76			}
77		});
78
79		var $headerBG = $('#header .header-bg');
80		$('#header .menubar > li')
81		.on('mouseenter', function() {
82			$headerBG.addClass('on');
83		})
84		.on('mouseleave', function() {
85			$headerBG.removeClass('on');
86		});
87
88		$('.menubar > li').on('mouseenter', function() {
89			if (mediaLG.matches) {				
90				var leftPos = $(this).offset().left;
91				var $menubox = $(this).find('.menubox');
92				var menuboxWidth = $menubox[0].scrollWidth;
93				var topMainWidth = $('.top-main').outerWidth();
94				var topMainLayoutWidth = $('.top-main-layout').outerWidth();
95				var remainSide = (topMainWidth - topMainLayoutWidth) / 2;
96				var remain = (topMainLayoutWidth + remainSide) - (leftPos + menuboxWidth);
97
98				// .menubox가 .top-main-layout 영역을 벗어 났다면 마진을 조정하여 위치 조정
99				if (remain < 0) {
100					$menubox.css({
101						'margin-left': (remain + 22)
102					});
103				}
104			}
105		});
106
107		function openMenu() {
108			$('#mask').fadeIn(duration);
109			$('.menubar-box').addClass('on');
110		}
111
112		function closeMenu() {
113			$('#mask').fadeOut(duration);
114			$('.menubar-box').removeClass('on');
115		}
116
117		function toggleMenuItemExpanded($menuItem) {
118			if ($menuItem.attr('aria-expanded') === 'true') {
119				$menuItem.attr('aria-expanded', 'false');
120			} else {						
121				$menuItem.attr('aria-expanded', 'true');
122			}
123		}
124
125		function resetMenu() {
126			$('.menubar [role="menuitem"]').attr('aria-expanded', 'false');
127		}
128	}
129
130	/**
131	 * 메인
132	 */
133
134	function initMain() {
135		initMainVisual()
136		initMainGallery();	// 갤러리
137		initMainBanner();	// 배너
138
139		function initMainVisual() {
140			$owlMV = $('.mv-carousel');
141			if ($owlMV.length) {
142				$owlMV.owlCarousel({
143					autoplay: true,
144					autoplayTimeout: 5000,
145					autoplayHoverPause: true,
146					dots: true,
147					items: 1,
148					loop: true
149				});
150				addPlayPauseBtn($owlMV);
151			}
152		}
153
154		/* 갤러리 */
155		function initMainGallery() {
156			$owlGallery = $('.gallery-carousel');
157			if ($owlGallery.length) {
158				$owlGallery.owlCarousel({
159					autoplay: true,
160					autoplayTimeout: 5000,
161					dots: false,
162					items: 1,
163					loop: true,
164					responsive: {
165						768: {
166							items: 2,
167							margin: 25
168						},
169						992: {
170							items: 3,
171							margin: 25
172						}
173					}
174				});
175				bindEventPlayPauseBtn($owlGallery, $('.gallery-carousel-box .play-pause-btn'));
176			}
177		}
178
179		/* 배너 */
180		function initMainBanner() {
181			$owlBanner = $('.banner-carousel');
182			if ($owlBanner.length) {
183				$owlBanner.owlCarousel({
184					autoplay: true,
185					autoplayTimeout: 5000,
186					dots: true,
187					items: 1,
188					loop: true
189					// responsive: {
190					// 	992: {
191					// 		items: 2,
192					// 		margin: 20
193					// 	},
194					// 	1200: {
195					// 		items: 1
196					// 	}
197					// }
198				});
199				addPlayPauseBtn($owlBanner);
200			}
201		}
202	}
203
204	/**
205	 * 서브
206	 */
207
208	function initSub() {
209
210	}
211
212	/**
213	 * 공통 유틸
214	 */
215	 
216	// Carousel에서 dots 없애기 
217	function removeDots($carousel) {
218		$carousel.find('.owl-dots-wrapper').remove();
219	}
220
221	// 자동 실행 및 중지 버튼 추가
222	function addPlayPauseBtn($carousel) {
223		if(!$carousel.find('.play-pause-btn').length) {
224			var $playPauseBtn = $('<button type="button" class="play-pause-btn pause" aria-label="정지"><span class="material-icons">pause</span></button>');
225
226			bindEventPlayPauseBtn($carousel, $playPauseBtn);
227
228			if (!$carousel.data('owl.carousel').options.autoplay) { // autoplay 옵션이 false라면
229				setPauseBtn($playPauseBtn, false);
230			}
231					
232			$carousel.find('.owl-dots').wrap('<div class="owl-dots-wrapper"></div>');
233			$carousel.find('.owl-dots-wrapper').append($playPauseBtn);
234		}
235	}
236
237	// 자동 실행 및 중지 버튼 이벤트 바인딩
238	function bindEventPlayPauseBtn($carousel, $playPauseBtn) {
239		$playPauseBtn.on('click', function() {
240			if ($(this).is('.pause')) {
241				$carousel.trigger('stop.owl.autoplay');
242				setPauseBtn($playPauseBtn, false);
243			} else {
244				$carousel.trigger('play.owl.autoplay');
245				setPauseBtn($playPauseBtn, true);
246			}
247		});
248	}
249
250	// 자동 실행 및 중지 버튼 세팅
251	function setPauseBtn($playPauseBtn, pause) {
252		if (pause) {
253			$playPauseBtn.removeClass('play');
254			$playPauseBtn.addClass('pause');
255			$playPauseBtn.attr('aria-label', '정지');
256			$playPauseBtn.children('span').text('pause');
257		} else {
258			$playPauseBtn.removeClass('pause');
259			$playPauseBtn.addClass('play');
260			$playPauseBtn.attr('aria-label', '자동실행');
261			$playPauseBtn.children('span').text('play_arrow');
262		}
263	}
264});