https://bexco.co.kr/resources/_Templet/Main/main_organizer/Js/layout_main.js

1////////////////////////////////////////////////////
2	var _thisSite = {};	var _thisPage = {};
3	var _isLowBr_ = false,_isMobile_ = false;
4	var _thisPage_cfg  = {};
5
6	//레이아웃 리셋
7	function resetPageLayout(){
8		mainNavi._reset();
9		_resetFooterHeight();
10
11		//팝업이미지 리사이징에 따른 높이 처리
12		if($(".top-wide-popups").attr("isOpen")=="1"){
13			resetTopWidePopups();
14		}
15	}
16
17	//레이아웃 높이 리셋
18	function resizePageLayoutHeight(){
19	}
20
21	//윈도우 회전시 실행할 함수
22	function setWindowRotation(){
23		if(typeof(thisPageRotation)=="function" && thisPageRotation!=undefined){  thisPageRotation(); }
24		else {
25			//기본 회전시 실행할 함수
26			//resetPageLayout();
27		}
28	}
29
30	//document.addEventListener('DOMContentLoaded', loaded, false);
31	if('onorientationchange' in window){
32		window.addEventListener('onorientationchange', setWindowRotation, false);
33	}
34
35	$(document).ready(function(){
36		//console.log("1.Ready");
37
38		//initPageCssFiles();
39		try{getWindowSize();	}catch(e){}
40		try{getPageSize();	}catch(e){}
41		if(_isMobile_) $alertLoading("Page Loading...");
42		try{setLowBrowser();	}catch(e){	}
43		try{setMediaObjectFunc();	}catch(e){	}
44		try{ _thisLayout_style = getPageStyle(); }catch(e){}
45		initNavigation();
46		docLoading(function(){
47			// console.log("3.docLoad");
48			// initImgSizeInfo();
49		});
50	});
51
52	$(window).load(function(){
53		//console.log("2.Load");
54	});
55
56	$(window).resize(function(e){
57		//var resizeTimeGap = (_isLowBr_)?  250 : 10;
58		var resizeTimeGap = 10;
59		if(_isLowBr_) resizeTimeGap=100;
60		clearTimeout(window.resizeEvt);
61		window.resizeEvt = setTimeout(function()
62		{
63			//console.log("Resize");
64			getWindowSize();
65			getPageSize();
66			try{
67			if(old_wsize.win== undefined ||  wsize.win.w!=old_wsize.win.w){
68				resetPageLayout();
69			}else{
70				resizePageLayoutHeight();
71			}
72			}catch(e){
73				resetPageLayout();
74			}
75		}, resizeTimeGap);
76	});
77////////////////////////////////////////////////////
78
79$(function() {
80	mVisual.init();
81	mEvent.init();
82	mSns.init();
83	mPopup.init();
84});
85
86// 메인 비주얼
87var mVisual = {
88	init : function(){
89		this.mVisSlide();
90	},
91	mVisSlide : function() {
92		var mVis = $("#mVisual");
93		var mVisSld = $(".dataList", mVis );
94		var mVisLen = $(".item", mVisSld ).length;
95		var mVisCtrl = $(".dataCtrl", mVis );
96		var mVisAuto = $(".dataAuto", mVisCtrl );
97		var mVisDots = $(".dataDots", mVisCtrl );
98		var mVisPress = $(".press", mVisCtrl);
99		var mVisTotal = $(".total", mVisCtrl);
100		var mVisDelay = 5000;
101		var mVisSpeed = 750;
102		var mVisIsAuto = true;
103		mVisTotal.text( mVisLen );
104		if ( mVisLen == 1 || $(".item", mVisSld ).hasClass("no-data") ) {
105			// no-data
106			var mVisUtilLoop = false;
107			var mVisUtilAuto = false;
108		} else {
109			// not-no-data
110			var mVisUtilLoop = true;
111			var mVisUtilAuto = true;
112		}
113		mVisTotal.text( mVisLen );
114		mVisSld.owlCarousel({
115			items : 1
116			, loop : mVisUtilLoop
117			, autoplay : mVisUtilAuto
118			, nav : true
119			, navContainer : mVisAuto
120			, navText: ["<span class='blind'>이전 장면</span>", "<span class='blind'>다음 장면</span>"]
121			, autoplayTimeout : mVisDelay
122			, autoplayHoverPause : false
123			, dots : false
124			, dotsContainer : mVisDots
125			, animateOut: 'fadeOut'
126			, smartSpeed : mVisSpeed
127			, responsiveRefreshRate : 0
128			, onInitialized : onInitd
129			, onTranslate : onTranse
130			, onTranslated : onTransed
131			, onResized : onResized
132		});
133		$(".btn-stop", mVisAuto ).on("click",function(){
134			mVisIsAuto = false;
135			$(this).hide();
136			$(this).next().show().focus();
137			mVisSld.trigger("stop.owl.autoplay");
138		});
139		$(".btn-play", mVisAuto ).on("click",function(){
140			mVisIsAuto = true;
141			$(this).hide();
142			$(this).prev().show().focus();
143			mVisSld.trigger("play.owl.autoplay", [mVisDelay]);
144		});
145		function onInitd ( event ) {
146			var element = $(event.target);
147			$("button", mVisDots ).each( function( index, item ) {
148				$("span", $(this) ).html( (index+1) + "번째 장면 <span class='isSel'>선택됨</span>" );
149			});
150		}
151		function onTranse( event ) {	// ** auto trans 타이밍시 수동

151전환후 연속 2회 슬라이딩 방지
152			var element = $(event.target);
153			mVisSld.trigger("stop.owl.autoplay");
154		}
155		function onTransed( event ) {	// ** auto trans 타이밍시 수동전환후 연속 2회 슬라이딩 방지
156			var element = $(event.target);
157			var mVisIdx = $(".owl-item.active .item", element ).data("idx");
158			mVisPress.text( mVisIdx );
159			if ( mVisIsAuto ) {
160				mVisSld.trigger("play.owl.autoplay", [mVisDelay]);
161			}
162		}
163		function onResized( event ) {
164			var element = $(event.target);
165			if ( mVisIsAuto ) {
166				mVisSld.trigger("play.owl.autoplay", [mVisDelay]);
167			} else {
168				mVisSld.trigger("stop.owl.autoplay");
169			}
170		}
171	}
172}
173
174
175// 메인 행사안내
176var mEvent = {
177	init : function(){
178		this.mEventSlide();
179	},
180	mEventSlide : function() {
181		var mEvent = $("#mEvent");
182		var mEventSld = $(".dataList", mEvent );
183		var mEventItem = $(".item", mEventSld );
184		var mEventLen = mEventItem.length;
185		var mEventCtrl = $(".dataCtrl", mEvent );
186		var mEventNavi = $(".dataNavi", mEventCtrl );
187		var mEventAuto = $(".dataAuto", mEventCtrl );
188		var mEventDots = $(".dataDots", mEventCtrl );
189		var mEventDelay = 5000;
190		var mEventSpeed = 750;
191		var mEventIsAuto = true;
192		if ( mEventLen == 1 && mEventItem.hasClass("hasNoData") ) {
193			// no-data
194			var mEventUtilLoop = false;
195			var mEventUtilAuto = false;
196		} else {
197			// not-no-data
198			if ( mEventLen >= 1 ) {
199				mEventCtrl.addClass("active");
200				if ( mEventLen < 5 ) {
201					var mEventUtilLoop = false;
202					var mEventUtilAuto = false;
203				} else {
204					var mEventUtilLoop = true;
205					var mEventUtilAuto = true;
206				}
207			}
208		}
209		mEventSld.owlCarousel({
210			items : 5
211			, loop : mEventUtilLoop
212			, autoplay : false //mEventUtilAuto
213			, autoHeight : true
214			, stagePadding:	25
215			, nav : true
216			, navText : ["이전", "다음"]
217			, navContainer : mEventNavi
218			, autoplayTimeout : mEventDelay
219			, autoplayHoverPause : true
220			, dots : false
221			, dotsContainer : mEventDots
222			, smartSpeed : mEventSpeed
223			, onInitialized : onInitd
224			, onTranslate : onTranse
225			, onTranslated : onTransed
226			, responsive:{
227				0:{
228					items:2
229					, stagePadding:	0
230					, autoHeight : true
231				},
232				400:{
233					items:3
234					, stagePadding:	0
235					, autoHeight : true
236				},
237				600:{
238					items:3
239					, stagePadding:	0
240					, autoHeight : true
241				},
242				1000:{
243					items:4
244					, stagePadding:	0
245					, autoHeight : false
246				},
247				1200:{
248					items:5
249					, stagePadding:	0
250					, autoHeight : false
251				},
252				1700:{
253					items:5
254					, stagePadding:	25
255					, autoHeight : false
256				}
257			}
258		});
259		$(".btn-stop", mEventAuto ).on("click",function(){
260			mEventIsAuto = false;
261			$(this).hide();
262			$(this).next().show().focus();
263			mEventSld.trigger("stop.owl.autoplay");
264		});
265		$(".btn-play", mEventAuto ).on("click",function(){
266			mEventIsAuto = true;
267			$(this).hide();
268			$(this).prev().show().focus();
269			mEventSld.trigger("play.owl.autoplay", [mEventDelay]);
270		});
271		function onInitd ( event ) {
272			var element = $(event.target);
273			$("button", mEventDots ).each( function( index, item ) {
274				$("span", $(this) ).html( (index+1) + "번째 장면 <span class='isSel'>선택됨</span>" );
275			});
276		}
277		function onTranse( event ) {	// ** auto trans 타이밍시 수동전환후 연속 2회 슬라이딩 방지
278			var element = $(event.target);
279			mEventSld.trigger("stop.owl.autoplay");
280		}
281		function onTransed( event ) {	// ** auto trans 타이밍시 수동전환후 연속 2회 슬라이딩 방지
282			var element = $(event.target);
283			if ( mEventIsAuto ) {
284				mEventSld.trigger("play.owl.autoplay", [mEventDelay]);
285			}
286		}
287	}
288}  
289
290
291// 메인 인스타그램
292var mSns = {
293	init : function(){
294		this.mSnsSlide();
295	},
296	mSnsSlide : function() {
297		var mSns = $("#msns1");
298		var mSnsSld = $(".dataList", mSns );
299		var mSnsItem = $(".item", mSnsSld );
300		var mSnsLen = mSnsItem.length;
301		var mSnsCtrl = $(".dataCtrl", mSns );
302		var mSnsNavi = $(".dataNavi", mSnsCtrl );
303		var mSnsAuto = $(".dataAuto", mSnsCtrl );
304		var mSnsDots = $(".dataDots", mSnsCtrl );
305		var mSnsDelay = 5000;
306		var mSnsSpeed = 750;
307		var mSnsIsAuto = true;

308		if ( mSnsLen == 1 && mSnsItem.hasClass("hasNoData") ) {
309			// no-data
310			var mSnsUtilLoop = false;
311			var mSnsUtilAuto = false;
312		} else {
313			// not-no-data
314			if ( mSnsLen >= 1 ) {
315				mSnsCtrl.addClass("active");
316				if ( mSnsLen < 4 ) {
317					var mSnsUtilLoop = false;
318					var mSnsUtilAuto = false;
319				} else {
320					var mSnsUtilLoop = true;
321					var mSnsUtilAuto = true;
322				}
323			}
324		}
325		mSnsSld.owlCarousel({
326			items : 3
327			, margin : 15
328			, loop : mSnsUtilLoop
329			, autoplay : mSnsUtilAuto
330			, nav : true
331			, navText : ["이전", "다음"]
332			, navContainer : mSnsNavi
333			, autoplayTimeout : mSnsDelay
334			, autoplayHoverPause : false
335			, dots : true
336			, smartSpeed : mSnsSpeed
337			, onInitialized : onInitd
338			, onTranslate : onTranse
339			, onTranslated : onTransed
340			, responsive:{
341				0:{
342					items:1
343					, dots : true
344				},
345				400:{
346					items:1
347					, dots : true
348				},
349				500:{
350					items:3
351					, dots : false
352				}
353			}
354		});
355		$(".btn-stop", mSnsAuto ).on("click",function(){
356			mSnsIsAuto = false;
357			$(this).hide();
358			$(this).next().show().focus();
359			mSnsSld.trigger("stop.owl.autoplay");
360		});
361		$(".btn-play", mSnsAuto ).on("click",function(){
362			mSnsIsAuto = true;
363			$(this).hide();
364			$(this).prev().show().focus();
365			mSnsSld.trigger("play.owl.autoplay", [mSnsDelay]);
366		});
367		function onInitd ( event ) {
368			var element = $(event.target);
369			$("button", mSnsDots ).each( function( index, item ) {
370				$("span", $(this) ).html( (index+1) + "번째 장면 <span class='isSel'>선택됨</span>" );
371			});
372		}
373		function onTranse( event ) {	// ** auto trans 타이밍시 수동전환후 연속 2회 슬라이딩 방지
374			var element = $(event.target);
375			mSnsSld.trigger("stop.owl.autoplay");
376		}
377		function onTransed( event ) {	// ** auto trans 타이밍시 수동전환후 연속 2회 슬라이딩 방지
378			var element = $(event.target);
379			if ( mSnsIsAuto ) {
380				mSnsSld.trigger("play.owl.autoplay", [mSnsDelay]);
381			}
382		}
383	}
384}
385
386
387// 메인 팝업
388var mPopup = {
389	init : function(){
390		this.mPopupSlide();
391	},
392	mPopupSlide : function() {
393		var mPopup = $("#mPopup");
394		var mPopupSld = $(".dataList", mPopup );
395		var mPopupItem = $(".item", mPopupSld );
396		var mPopupLen = mPopupItem.length;
397		var mPopupCtrl = $(".dataCtrl", mPopup );
398		var mPopupNavi = $(".dataNavi", mPopupCtrl );
399		var mPopupAuto = $(".dataAuto", mPopupCtrl );
400		var mPopupDots = $(".dataDots", mPopupCtrl );
401		var mPopupDelay = 5000;
402		var mPopupSpeed = 750;
403		var mPopupIsAuto = true;
404		if ( mPopupLen == 1 && mPopupItem.hasClass("hasNoData") ) {
405			// no-data
406			var mPopupUtilLoop = false;
407			var mPopupUtilAuto = false;
408		} else {
409			// not-no-data
410			if ( mPopupLen >= 1 ) {
411				mPopupCtrl.addClass("active");
412				if ( mPopupLen < 7 ) {
413					var mPopupUtilLoop = false;
414					var mPopupUtilAuto = false;
415				} else {
416					var mPopupUtilLoop = true;
417					var mPopupUtilAuto = true;
418				}
419			}
420		}
421		mPopupSld.owlCarousel({
422			items : 6
423			, margin : 25
424			, loop : mPopupUtilLoop
425			, autoplay : mPopupUtilAuto
426			, nav : true
427			, navText : ["이전", "다음"]
428			, navContainer : mPopupNavi
429			, autoplayTimeout : mPopupDelay
430			, autoplayHoverPause : false
431			, dots : false
432			, dotsContainer : mPopupDots
433			, smartSpeed : mPopupSpeed
434			, onInitialized : onInitd
435			, onTranslate : onTranse
436			, onTranslated : onTransed
437			, responsive:{
438				0:{
439					items:2
440					, margin : 10
441				},
442				400:{
443					items:3
444					, margin : 10
445				},
446				600:{
447					items:4
448					, margin : 10
449				},
450				1000:{
451					items:5
452					, margin : 20
453				},
454				1200:{
455					items:6
456					, margin : 25
457				}
458			}
459		});
460		$(".btn-stop", mPopupAuto ).on("click",function(){
461			mPopupIsAuto = false;
462			$(this).hide();
463			$(this).next().show().focus();
464			mPopupSld.trigger("stop.owl.autoplay");
465		});
466		$(".btn-play", mPopupAuto ).on("click",function(){
467			mPopupIsAuto = true;
468			$(this).hide();
469			$(this).prev().show().focus();
470			mPopupSld.trigger("play.owl.autoplay", [mPopupDelay]);
471		});
472		function onInitd ( event ) {
473			var element = $(event.target);
474			$("button", mPopupDots ).each( function( index, item ) {
475				$("span", $(this) ).html( (index+1) + "번째 장면 <span class='isSel'>선택됨</span>" );
476			});
477		}
478		function onTranse( event ) {	// ** auto trans 타이밍시 수동

478전환후 연속 2회 슬라이딩 방지
479			var element = $(event.target);
480			mPopupSld.trigger("stop.owl.autoplay");
481		}
482		function onTransed( event ) {	// ** auto trans 타이밍시 수동전환후 연속 2회 슬라이딩 방지
483			var element = $(event.target);
484			if ( mPopupIsAuto ) {
485				mPopupSld.trigger("play.owl.autoplay", [mPopupDelay]);
486			}
487		}
488	}
489}