https://plainbit.co.kr/js/common.js

1/* *******************************************************
2 * filename : common.js
3 * description : 전체적으로 사용되는 JS
4 * Update : 2022-08-04
5******************************************************** */
6
7var laptopWidth = 1366;
8var tabletWidth = 1280; // 헤더가 변경되는 시점
9var mobileWidth = 800;
10startOffset = isMobile() ? "100%" : "70%";
11gsap.registerPlugin(ScrollToPlugin);
12
13// default
14checkOsBrowser();	
15mouseCheck();
16translateSkipNav();
17triggerScrollObject();
18topFixedHeader();
19setTopButton();
20followMousePointe02 ();
21if ( detectBrowser() === "ie") {
22	popupUpdateBrowser();
23	convertToEdge();
24}
25
26// add
27Splitting();
28setSplitting();
29// if ( !$.exists('#fullpage') ){ smoothScroll(); }
30if ( $.exists(".footer-sitemap-list-con") ) { cloneFooterSitemap(); }
31if ( $.exists('.footer-partner-list') ) { rollingFooterPartnerList(); }
32// 스무스스크롤
33SmoothScroll({ 
34    animationTime    : 600, // [ms]
35    stepSize         : 100, // [px]
36    accelerationDelta : 50,  // 50
37    accelerationMax   : 3,   // 3
38    touchpadSupport   : false, 
39});
40
41$(window).on("load",function  () {
42	// toAnchorParameter("anchor");	/* 주소~?anchor=content  */
43});
44
45$(window).on("resize",function  () {
46	checkOsBrowser();
47});
48
49/* ************************
50* Func : 브라우저 체크 및 기기체크
51* isMobile() 필요
52************************ */
53function checkOsBrowser () {
54	if ( isMobile() ) {
55		$("html").removeClass("is-pc").addClass("is-mobile").addClass(detectOS()+"-os");
56	}else {
57		$("html").removeClass("is-mobile").addClass("is-pc").addClass(detectBrowser()+"-browser");
58	}
59}
60
61/* ************************
62* Func : 스킵네비게이션 영문번역
63************************ */
64function translateSkipNav () {
65	if ( $("html").attr("lang") != "ko" ) {
66		$(".cm-accessibility a").text("Skip to content");
67	}
68}
69
70/* ************************
71* Func : 웹접근성 키보드이용시
72************************ */
73function mouseCheck () {
74	if ( !isMobile() ) { 
75		$("body").mousemove(function(event) { 
76			$(this).addClass("mouse");
77		});
78		$("body").on("keydown touchstart",function(event) { 
79			$(this).removeClass("mouse");
80		});
81	}
82}
83
84/* ************************
85* Func : 스크롤시 Trigger Class
86* Waypoint.js, isMobile () 필요
87************************ */
88function triggerScrollObject () {
89	$("[data-scroll]").each(function() {
90		var $scrollElem = $(this);
91		var scrollElemOffset = $(this).data("scroll-offset") ? $(this).data("scroll-offset") : startOffset;
92		$scrollElem.waypoint(function(direction) {
93			if ( direction === "down" ) {
94				$scrollElem.addClass('animated');
95			}else if ( direction === "up") {
96				$scrollElem.removeClass('animated');
97			}
98		},
99		{
100			triggerOnce: false,
101			offset: scrollElemOffset
102		});
103	});
104}
105
106/* ************************
107* Func : 드롭메뉴 공통
108* getWindowWidth () 필요
109************************ */
110$(".cm-drop-menu-box-JS").each(function  () {
111	var $dropBox = $(this);
112	var $dropOpenBtn = $(this).find(".cm-drop-open-btn-JS");
113	var $dropList = $(this).find(".cm-drop-list-JS");
114	var eventState = $dropBox.data("drop-event");
115	
116	if ( eventState === "click" ) {
117		$dropOpenBtn.click(function  () {
118			$dropList.slideToggle(500);
119			$dropBox.toggleClass("open");
120			$dropBox.on("mouseleave", function  () {
121				dropClose ();
122			});
123			return false;
124		});
125		$("body").click(function  () {
126			dropClose();
127		});
128	}else if ( eventState === "hover" ) {
129		$dropBox.hover(function  () {
130			$dropList.slideDown(500);
131			$dropBox.addClass("open");
132		},function  () {
133			dropClose ();
134		});
135	}
136	function dropClose () {
137		if ( $dropBox.data("drop-width") ) {
138			if ( getWindowWidth () < $dropBox.data("drop-width")+1 ) {
139				$dropList.slideUp(500);
140				$dropBox.removeClass("open");
141			}
142		}else {
143			$dropList.slideUp(500);
144			$dropBox.removeClass("open");
145		}
146	}
147	$(window).resize(function  () {
148		if ( getWindowWidth () > $dropBox.data("drop-width") ) {
149			$dropList.removeAttr("style");
150		}else {
151			$dropList.hide();
152		}
153	});
154});
155
156/* ************************
157* Func : 탭 메뉴 공통 사용
158* getWindowWidth () 필요
159************************ */
160$(".cm-tab-container-JS").each(function  () {
161	var $cmTabList = $(this).find(".cm-tab-list-JS");
162	var $cmTabListli = $cmTabList.find("li");
163	var $cmConWrapper = $(this).children(".cm-tab-content-wrapper-JS");
164	var $cmContent = $cmConWrapper.children();
165	
166	
167	// 탭 영역 숨기고 selected 클래스가 있는 영역만 보이게
168	var $selectCon = $cmTabList.find("li.selected").find("a").attr("href");
169	var selectTxt = $cmTabList.find("li.selected").find("em").text();
170	$cmContent.hide();
171	$($selectCon).show();
172
173	$cmTabListli.children("a").click(function  () {
174		if ( !$(this).parent().hasClass("selected")) {
175			var visibleCon = $(this).attr("href");
176			$cmTabListli.removeClass("selected");
177			$(this).parent("li").addClass("selected");
178			$cmContent.hide();
179			$(visibleCon).fadeIn();
180		}
181		return false;

182	});
183
184	// 모바일 버튼이 있을때 추가
185	var $cmTabMobileBtn = $(this).find(".cm-tab-select-btn-JS");
186	if ($.exists($cmTabMobileBtn)) {
187		$cmTabMobileBtn.find("span").text(selectTxt);
188		// Mobile Btn Click
189		$cmTabMobileBtn.click(function  () {
190			$(this).toggleClass("open").siblings().slideToggle();
191			return false;
192		});
193
194		// Mobile List Click
195		$cmTabListli.children("a").click(function  () {
196			$cmTabMobileBtn.find("span").text($(this).find("em").text());
197			tabListClose();
198		});
199		$("body").click(function  () {
200			tabListClose();
201		});
202		function tabListClose () {
203			if ( getWindowWidth () < 801 ) {
204				$cmTabMobileBtn.removeClass("open").siblings().slideUp();
205			}
206		}
207		$(window).resize(function  () {
208			if ( getWindowWidth () > 800 ) {
209				$cmTabMobileBtn.siblings().removeAttr("style");
210			}else {
211				$cmTabMobileBtn.siblings().hide()//.css("display","none");
212			}
213		});
214	}
215});
216
217/* ************************
218* Func : 단어 Splitting Plugin 
219* Splitting.js 필요
220************************ */	
221function setSplitting () {
222	// Splitting Char Set Delay
223	var $splittingTxt = $(".cm-word-split-JS");
224	$($splittingTxt).each(function  () {
225		splittingTextDelay($(this),$(this).data("speed"),$(this).data("speed-delay"));
226	});
227
228	// Splitting word 번역기능 비활성화
229	$(".splitting .char").attr("translate","no");
230}
231
232/* ************************
233* Func : 상단 :: 모바일버전에서 헤더 FIXED
234* getWindowWidth (), objectFixed() 필요
235************************ */	
236function topFixedHeader () {
237	checkWidth = getWindowWidth();
238	$(window).on("scroll", function  () {
239		toggleFixedClass();
240	});
241	$(window).on("resize", function  () {
242		checkWidth = getWindowWidth();
243		toggleFixedClass();
244	});
245}
246function toggleFixedClass () {
247	//if ( checkWidth < (tabletWidth-1) ) {
248		objectFixed($("#header"), 0, "top-fixed");
249	//}else {
250	//	$("#header").removeClass("top-fixed");
251	//}
252}
253
254/* ************************
255* Func : 상단 :: 검색 toggle
256************************ */	
257$(".header-search-box").each(function  () {
258	var $searchBox = $(this);
259	var $openBtn = $(this).find(".header-search-open-btn");
260	var $closeBtn = $(this).find(".header-search-close-btn");
261	
262	$openBtn.click(function  () {
263		$searchBox.addClass("open");
264	});
265	$closeBtn.click(function  () {
266		$searchBox.removeClass("open");
267	});
268});
269
270
271/* ************************
272* Func : 상단 :: 사이트맵 toggle
273************************ */
274/* -------- 대메뉴복사 후 사이트맵 삽입 -------- */
275$(".sitemap-wrapper-style").append("<ul></ul>");
276
277for(var i=0; i < gnbLength; i++){
278	var gnbText = $gnbItem.eq(i).children("a").text();
279	var gnb2depList = $gnbItem.eq(i).find(".gnb-2dep > ul").html() ? $gnbItem.eq(i).find(".gnb-2dep > ul").html() :	'';
280	$(".sitemap-wrapper-style > ul").append('<li><span class="num">0'+(i+1)+'</span><h2>'+gnbText+'</h2><ul class="sitemap-2dep">'+gnb2depList+'</ul></li>');
281}
282
283var $changeLangBtn = $(".lang-change");
284$changeLangBtn.on('click', function(){
285	$changeLangBtn.toggleClass('active');
286})
287
288/* -------- 사이트맵 스타일 03, 04, 05 -------- */
289var $openSitemapBtn = $(".cm-sitemap-open-btn");
290var $closeSitemapBtn = $(".cm-sitemap-close-btn");
291var $cmSitemapWrapper = $(".cm-sitemap-wrapper");
292var sitemapOpenState = false;
293// Split
294if ($.exists('#siteMapCon02') || $.exists('#siteMapCon03')) {
295	var sitemap_item_tit = document.querySelectorAll(".sitemap-wrapper-style > ul > li > h2");
296	var sitemap_item = document.querySelectorAll(".sitemap-wrapper-style > ul > li span");
297	Splitting({ target: sitemap_item_tit });
298	Splitting({ target: sitemap_item });
299}
300
301// Sitemap OPEN
302$openSitemapBtn.click(function  () {
303	if ($.exists('#siteMapCon06')) {
304		if ( !sitemapOpenState ) {
305			htmlScrollControl (true);
306			$("#header").addClass("sitemap-open");
307			$openSitemapBtn.addClass("active");
308			$cmSitemapWrapper.addClass("open");
309			sitemapOpenState = true;
310		}else {
311			close_cm_sitemap();
312		}
313	}else {
314		if ( !sitemapOpenState ) {
315			htmlScrollControl (true);
316			$("#header").addClass("sitemap-open");
317			$openSitemapBtn.addClass("active");
318			$cmSitemapWrapper.addClass("open");
319			sitemapOpenState = true;
320		}
321	}
322	return false;

323});
324// Sitemap CLOSE
325if (!$.exists('#siteMapCon06')) {
326	$closeSitemapBtn.click(function  () {
327		close_cm_sitemap();
328	});
329}
330$(document).keydown(function(event) {
331	if ( event.keyCode == 27 || event.which == 27 ) {
332		close_cm_sitemap();
333	}
334});
335
336function close_cm_sitemap () {
337	if ( sitemapOpenState ) {
338		$("#header").removeClass("sitemap-open");
339		$openSitemapBtn.removeClass("active");
340		if ( $cmSitemapWrapper.is("#siteMapCon02") ) { // Sitemap 02 Close
341			$cmSitemapWrapper.removeClass("open");
342			setTimeout(function  () {
343				htmlScrollControl (false);
344				sitemapOpenState = false;
345			},1000);
346		}else {
347			gsap.to($cmSitemapWrapper, 0.3, {opacity:0, ease: Sine.easeOut, onComplete : function  () {
348				$cmSitemapWrapper.removeClass("open");
349				$cmSitemapWrapper.removeAttr("style");
350				htmlScrollControl (false);
351				sitemapOpenState = false;
352			}})
353		}
354	}
355}
356
357/* ************************
358* Func : 하단 :: top버튼
359* moveScrollTop (), objectFixed() 필요
360************************ */
361function setTopButton () {
362	$(".to-top-btn").each(function  () {
363		// top버튼 나오게 (필요한 경우에만 넣으세요)
364		if ( $(this).length > 0 ) {
365			$(window).scroll(function  () {
366				objectFixed($(".to-top-btn"), 0, "bottom-fixed");
367			});
368		}
369		// top버튼 클릭
370		$(this).on("click",function  () {
371			if ($.exists('#fullpage')) {
372				$.fn.fullpage.moveTo(1);
373			}else {
374				$("html, body").animate({scrollTop:0}, 300 ,"easeInOutExpo",function  () {
375					$(".logo > a").focus();
376				});
377			}
378			return false;
379		});
380	});
381}
382
383/* ************************
384* Func : 하단 :: 파트너사 리스트
385************************ */
386function rollingFooterPartnerList () {
387	$('.footer-partner-list').slick({
388		slidesToShow: 7,
389		slidesToScroll: 1,
390		arrows: true,
391		fade: false,
392		dots:false,
393		autoplay: true,
394		speed:500,
395		infinite:true,
396		autoplaySpeed: 3000,
397		easing: 'easeInOutQuint',
398		pauseOnHover:false,
399		prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Prev" tabindex="0" role="button"><i class="xi-angle-left-min"></i></button>',
400		nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button"><i class="xi-angle-right-min"></i></button>',
401		responsive: [
402					{
403					  breakpoint: 1367,
404					  settings: {
405						slidesToShow: 5
406					  }
407					},
408					{
409					  breakpoint: 1025,
410					  settings: {
411						slidesToShow: 3
412					  }
413					}
414				  ]
415	});
416}
417
418/* ************************
419* Func : 하단 :: 푸터 사이트맵 삽입(대메뉴복사)
420************************ */
421function cloneFooterSitemap () {
422	$(".footer-sitemap-list-con").append("<ul></ul>");
423	
424	for(var i=0; i < gnbLength; i++){
425		var $gnb1depItem = $gnbItem.eq(i).children("a");
426		var $gnb2depList = $gnbItem.eq(i).find(".gnb-2dep > ul").html() ? $gnbItem.eq(i).find(".gnb-2dep > ul").html() :	'<a href="'+$gnb1depItem.attr("href")+'">

426'+$gnb1depItem.text()+'</a>';
427		$(".footer-sitemap-list-con > ul").append('<li><h3>'+$gnb1depItem.text()+'</h3><ul class="sitemap-2dep">'+$gnb2depList+'</ul></li>');
428	}
429}
430
431/* ************************
432* Func : Custom Select 
433************************ */
434if ($.exists('.custom-select-box .custom-select')) {
435	$(".custom-select-box .custom-select").each(function() {
436		var classes = $(this).attr("class");
437		var id = $(this).attr("id");
438		var name = $(this).attr("name"); 
439		var placeholder = $(this).attr("placeholder") ? $(this).attr("placeholder") : $(this).find("option:selected").text();
440		var template = '<div class="' + classes + '">';
441		template += '<span class="custom-select-trigger">' + placeholder + "</span>";
442		template += '<ul class="custom-option-drop-list">';
443		$(this).find("option").each(function() {
444			var first_select = $(this).is(":selected") ? " selection" : "";
445			template += '<li class="custom-option-item'+ first_select +'" data-value="' + $(this).attr("value") + '">' + $(this).html() + "</li>";
446		});
447		template += "</ul></div>";
448		$(this).wrap('<div class="custom-select-wrapper"></div>');
449		$(this).hide();
450		$(this).after(template);
451	});
452	$(".custom-option:first-of-type").hover(function() {
453		$(this).parents(".custom-option-drop-list").addClass("option-hover");
454	}, function() {
455		$(this).parents(".custom-option-drop-list").removeClass("option-hover");
456	});
457	$(".custom-select-trigger").on("click", function(event) {
458		$("html").one("click", function() {
459			$(".custom-select").removeClass("opened");
460			$(".custom-option-drop-list").slideUp();
461		});
462		$(this).parents(".custom-select").toggleClass("opened");
463		$(this).siblings(".custom-option-drop-list").slideToggle();
464		event.stopPropagation();
465	});
466	$(".custom-option-item").on("click", function() {
467		$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
468		$(this).parents(".custom-option-drop-list").find(".custom-option-item").removeClass("selection");
469		$(this).addClass("selection");
470		$(this).parents(".custom-select").removeClass("opened");
471		$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
472		// 이메일 선택할때 넣어주세요.
473		/* if ($(this).data("value") != "a" && $(this).data("value") != "b") {
474			$(".email2").attr("value", $(this).text()).prop("readonly", true);
475		} else {
476			$(".email2").attr("value", "").prop("readonly", false).focus();
477		} */
478	});
479}
480
481	/* ************************
482	* Func : Main 포인터 모션
483	************************ */
484	function followMousePointe02 () {
485		var $mouse_follow_btn02 = $(".mouse-pointer02");
486		$("body").on('mousemove', function (e){
487			$mouse_follow_btn02.addClass("active is-moving");
488			var sxPos = e.pageX / $(this).width() * 100 - 50;
489			var syPos = e.pageY / $(this).height() * 100 - 50;
490			
491			TweenMax.to($mouse_follow_btn02, 2, {
492				x: e.clientX,
493				y: e.clientY,
494				ease: Expo.easeOut,
495				duration: 1
496			});
497		});
498		
499		$(".cm-btn-effect")
500			.on('mouseenter', function (e){
501				$mouse_follow_btn02.addClass("on");
502			})
503			.on('mouseleave', function (e){
504				$mouse_follow_btn02.removeClass("on");
505			})
506	}
507
508/* 버튼 오버 효과 */
509setTimeout(function(){
510	$('.cm-btn-effect').on('mouseenter', function(e){
511		x = e.pageX - $(this).offset().left;
512		y = e.pageY - $(this).offset().top;
513		$(this).find('.cm-fill').css({top:y, left:x});
514	});
515},100);
516
517setTimeout(function(){
518	$('.magnet-download-btn').on('mouseenter', function(e){
519		x = e.pageX - $(this).offset().left;
520		y = e.pageY - $(this).offset().top;
521		$(this).find('.cm-fill').css({top:y, left:x});
522	});
523},100);
524
525/* ************************
526* Func : 헤더 서브 메뉴 Up & Down
527************************ */
528// 메뉴 
529var didScroll;
530var lastScrollTop = 0;
531var delta = 5;
532var navbarHeight = 0;
533
534$(window).scroll(function(event){
535	didScroll = true;
536});
537
538setInterval(function() {
539	if (didScroll) {
540		hasScrolled();
541		didScroll = false;
542	}
543}, 250);
544
545function hasScrolled() {
546	var st = $(this).scrollTop();
547	
548	if(Math.abs(lastScrollTop - st) <= delta)
549		return;
550	if (st > lastScrollTop && st > navbarHeight){
551		// Scroll Down
552		$('#header').removeClass('scroll-up').addClass('scroll-down');
553	} else {
554		// Scroll Up
555		if(st + $(window).height() < $(document).height()) {
556			$('#header').removeClass('scroll-down').addClass('scroll-up');
557		}
558	}
559	lastScrollTop = st;
560}