463 lines
14 KiB
JavaScript
463 lines
14 KiB
JavaScript
|
/* ----------------------------------
|
||
|
|
|
||
|
|
Name : common.js
|
||
|
|
Categorie : 적응형 레이아웃의 공통기능을 위한 js
|
||
|
|
Author : 이상혁
|
||
|
|
Version : v.1.0
|
||
|
|
Created : 2020-03-02
|
||
|
|
Last update : 2020-03-02
|
||
|
|
|
||
|
|
-------------------------------------*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// browser 체크 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
var isMobile = false;
|
||
|
|
var isiPhoneiPad = false;
|
||
|
|
|
||
|
|
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
|
||
|
|
isMobile = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
|
||
|
|
isiPhoneiPad = true;
|
||
|
|
}
|
||
|
|
/*==============================================================*/
|
||
|
|
// browser 체크 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// 메뉴 사이즈 및 포지션 체크 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
function SetMegamenuPosition() {
|
||
|
|
if ($(window).width() > 991) {
|
||
|
|
setTimeout(function () {
|
||
|
|
// var totalHeight = $('nav.navbar').outerHeight();
|
||
|
|
var totalHeight = $('navbar-collapse-wrapper').outerHeight(); // 시추 상단 메뉴 2뎁스 포지션을 구하기 위한 1뎁스 높이값
|
||
|
|
$('.mega-menu').css({top: totalHeight});
|
||
|
|
if ($('.navbar-brand-top').length === 0)
|
||
|
|
$('.dropdown.simple-dropdown > .dropdown-menu').css({top: totalHeight});
|
||
|
|
}, 200);
|
||
|
|
} else {
|
||
|
|
$('.mega-menu').css('top', '');
|
||
|
|
$('.dropdown.simple-dropdown > .dropdown-menu').css('top', '');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// page title space
|
||
|
|
function setPageTitleSpace() {
|
||
|
|
if ($('.navbar').hasClass('navbar-top') || $('nav').hasClass('navbar-fixed-top')) {
|
||
|
|
if ($('.top-space').length > 0) {
|
||
|
|
// var top_space_height = $('.navbar').outerHeight();
|
||
|
|
var top_space_height = $('.navbar-collapse-wrapper').outerHeight(); // 시추 상단 메뉴 2뎁스 포지션을 구하기 위한 1뎁스 높이값
|
||
|
|
if ($('.top-header-area').length > 0) {
|
||
|
|
top_space_height = top_space_height + $('.top-header-area').outerHeight();
|
||
|
|
}
|
||
|
|
$('.top-space').css('margin-top', top_space_height + "px");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/*==============================================================*/
|
||
|
|
// 메뉴 사이즈 및 포지션 체크 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// sticky nav 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
$(window).on("scroll", init_scroll_navigate);
|
||
|
|
function init_scroll_navigate() {
|
||
|
|
|
||
|
|
var headerHeight = $('nav').outerHeight();
|
||
|
|
if (!$('header').hasClass('no-sticky')) {
|
||
|
|
if ($(document).scrollTop() >= headerHeight) {
|
||
|
|
$('header').addClass('sticky');
|
||
|
|
|
||
|
|
} else if ($(document).scrollTop() <= headerHeight) {
|
||
|
|
$('header').removeClass('sticky');
|
||
|
|
setTimeout(function () {
|
||
|
|
setPageTitleSpace();
|
||
|
|
}, 500);
|
||
|
|
}
|
||
|
|
SetMegamenuPosition();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
/*==============================================================*/
|
||
|
|
// sticky nav 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// 메인비쥬얼 (parallax) 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
function stellarParallax() {
|
||
|
|
if ($(window).width() > 1024) {
|
||
|
|
$.stellar();
|
||
|
|
} else {
|
||
|
|
$.stellar('destroy');
|
||
|
|
$('.parallax').css('background-position', '');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/*==============================================================*/
|
||
|
|
// 메인비쥬얼 (parallax) 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// full screen 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
function fullScreenHeight() {
|
||
|
|
var element = $(".full-screen");
|
||
|
|
var $minheight = $(window).height();
|
||
|
|
element.parents('section').imagesLoaded(function () {
|
||
|
|
if ($(".top-space .full-screen").length > 0)
|
||
|
|
{
|
||
|
|
var $headerheight = $("header nav.navbar").outerHeight();
|
||
|
|
$(".top-space .full-screen").css('min-height', $minheight - $headerheight);
|
||
|
|
} else {
|
||
|
|
element.css('min-height', $minheight);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var minwidth = $(window).width();
|
||
|
|
$(".full-screen-width").css('min-width', minwidth);
|
||
|
|
}
|
||
|
|
/*==============================================================*/
|
||
|
|
// full screen 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// RESIZE 될때마다 함수적용 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
function SetResizeContent() {
|
||
|
|
SetMegamenuPosition();
|
||
|
|
setPageTitleSpace();
|
||
|
|
stellarParallax();
|
||
|
|
fullScreenHeight();
|
||
|
|
}
|
||
|
|
/*==============================================================*/
|
||
|
|
// RESIZE 될때마다 함수적용 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// RESIZE 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
$(window).resize(function (event) {
|
||
|
|
setTimeout(function () {
|
||
|
|
SetResizeContent();
|
||
|
|
}, 500);
|
||
|
|
event.preventDefault();
|
||
|
|
});
|
||
|
|
/*==============================================================*/
|
||
|
|
// RESIZE 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// READY 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
$(document).ready(function () {
|
||
|
|
|
||
|
|
SetResizeContent();
|
||
|
|
|
||
|
|
// HTML 전용 현재 메뉴에 대한 활성 클래스
|
||
|
|
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
|
||
|
|
var $hash = window.location.hash.substring(1);
|
||
|
|
|
||
|
|
if ($hash) {
|
||
|
|
$hash = "#" + $hash;
|
||
|
|
pgurl = pgurl.replace($hash, "");
|
||
|
|
} else {
|
||
|
|
pgurl = pgurl.replace("#", "");
|
||
|
|
}
|
||
|
|
|
||
|
|
$(".nav li a").each(function () {
|
||
|
|
if ($(this).attr("href") == pgurl || $(this).attr("href") == pgurl + '.html') {
|
||
|
|
$(this).parent().addClass("active");
|
||
|
|
$(this).parents('li.dropdown').addClass("active");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$(window).scroll(function () {
|
||
|
|
if ($(this).scrollTop() > 150)
|
||
|
|
$('.scroll-top-arrow').fadeIn('slow');
|
||
|
|
else
|
||
|
|
$('.scroll-top-arrow').fadeOut('slow');
|
||
|
|
});
|
||
|
|
// 페이지 스크롤 top 버튼
|
||
|
|
$('.scroll-top-arrow').on('click', function () {
|
||
|
|
$('html, body').animate({ scrollTop: 0 }, 800);
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
/*==============================================================
|
||
|
|
// wow animation - on scroll 시작
|
||
|
|
==============================================================*/
|
||
|
|
var wow = new WOW({
|
||
|
|
boxClass: 'wow',
|
||
|
|
animateClass: 'animated',
|
||
|
|
offset: 0,
|
||
|
|
mobile: false,
|
||
|
|
live: true
|
||
|
|
});
|
||
|
|
$(window).imagesLoaded(function () {
|
||
|
|
wow.init();
|
||
|
|
});
|
||
|
|
/*==============================================================
|
||
|
|
// wow animation - on scroll 끝
|
||
|
|
==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// 오른쪽 sidebar 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
var menuRight = document.getElementById('cbp-spmenu-s2'),
|
||
|
|
showRightPush = document.getElementById('showRightPush'),
|
||
|
|
body = document.body;
|
||
|
|
if (showRightPush) {
|
||
|
|
showRightPush.onclick = function () {
|
||
|
|
classie.toggle(this, 'active');
|
||
|
|
if (menuRight)
|
||
|
|
classie.toggle(menuRight, 'cbp-spmenu-open');
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var test = document.getElementById('close-pushmenu');
|
||
|
|
if (test) {
|
||
|
|
test.onclick = function () {
|
||
|
|
classie.toggle(this, 'active');
|
||
|
|
if (menuRight)
|
||
|
|
classie.toggle(menuRight, 'cbp-spmenu-open');
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/*==============================================================*/
|
||
|
|
// 오른쪽 sidebar 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// magnificPopup 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
function ScrollStop() {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function ScrollStart() {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.header-search-form').magnificPopup({
|
||
|
|
mainClass: 'mfp-fade',
|
||
|
|
closeOnBgClick: true,
|
||
|
|
preloader: false,
|
||
|
|
|
||
|
|
fixedContentPos: false,
|
||
|
|
closeBtnInside: false,
|
||
|
|
callbacks: {
|
||
|
|
open: function () {
|
||
|
|
setTimeout(function () {
|
||
|
|
$('.search-input').focus();
|
||
|
|
}, 500);
|
||
|
|
$('#search-header').parent().addClass('search-popup');
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').addClass('overflow-hidden');
|
||
|
|
} else {
|
||
|
|
$('body, html').on('touchmove', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
close: function () {
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').removeClass('overflow-hidden');
|
||
|
|
$('#search-header input[type=text]').each(function (index) {
|
||
|
|
if (index == 0) {
|
||
|
|
$(this).val('');
|
||
|
|
$("#search-header").find("input:eq(" + index + ")").css({ "border": "none", "border-bottom": "2px solid rgba(255,255,255,0.5)" });
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.onmousewheel = ScrollStart;
|
||
|
|
} else {
|
||
|
|
$('body, html').unbind('touchmove');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.header-menu-all').magnificPopup({
|
||
|
|
mainClass: 'mfp-fade',
|
||
|
|
closeOnBgClick: true,
|
||
|
|
preloader: false,
|
||
|
|
|
||
|
|
fixedContentPos: false,
|
||
|
|
closeBtnInside: false,
|
||
|
|
callbacks: {
|
||
|
|
open: function () {
|
||
|
|
$('#menu-all').parent().addClass('menu-all-popup-content');
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').addClass('overflow-hidden menu-all-popup-wrapper');
|
||
|
|
} else {
|
||
|
|
$('body, html').on('touchmove', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
close: function () {
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').removeClass('overflow-hidden menu-all-popup-wrapper');
|
||
|
|
document.onmousewheel = ScrollStart;
|
||
|
|
} else {
|
||
|
|
$('body, html').unbind('touchmove');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.login-btn').magnificPopup({
|
||
|
|
mainClass: 'mfp-fade',
|
||
|
|
closeOnBgClick: true,
|
||
|
|
preloader: false,
|
||
|
|
|
||
|
|
fixedContentPos: false,
|
||
|
|
closeBtnInside: false,
|
||
|
|
callbacks: {
|
||
|
|
open: function () {
|
||
|
|
$('#login').parent().addClass('login-popup-content');
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').addClass('overflow-hidden login-popup-wrapper');
|
||
|
|
} else {
|
||
|
|
$('body, html').on('touchmove', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
close: function () {
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').removeClass('overflow-hidden login-popup-wrapper');
|
||
|
|
document.onmousewheel = ScrollStart;
|
||
|
|
} else {
|
||
|
|
$('body, html').unbind('touchmove');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.temp-password-btn').magnificPopup({
|
||
|
|
mainClass: 'mfp-fade',
|
||
|
|
closeOnBgClick: true,
|
||
|
|
preloader: false,
|
||
|
|
|
||
|
|
fixedContentPos: false,
|
||
|
|
closeBtnInside: false,
|
||
|
|
callbacks: {
|
||
|
|
open: function () {
|
||
|
|
$('#tempPassword').parent().addClass('temp-password-popup-content');
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').addClass('overflow-hidden temp-password-popup-wrapper');
|
||
|
|
} else {
|
||
|
|
$('body, html').on('touchmove', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
close: function () {
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').removeClass('overflow-hidden temp-password-popup-wrapper');
|
||
|
|
document.onmousewheel = ScrollStart;
|
||
|
|
} else {
|
||
|
|
$('body, html').unbind('touchmove');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.status-btn').magnificPopup({
|
||
|
|
mainClass: 'mfp-fade',
|
||
|
|
closeOnBgClick: true,
|
||
|
|
preloader: false,
|
||
|
|
|
||
|
|
fixedContentPos: false,
|
||
|
|
closeBtnInside: false,
|
||
|
|
callbacks: {
|
||
|
|
open: function () {
|
||
|
|
$('#status-id').parent().addClass('status-popup-content');
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').addClass('overflow-hidden status-popup-wrapper');
|
||
|
|
} else {
|
||
|
|
$('body, html').on('touchmove', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
close: function () {
|
||
|
|
if (!isMobile) {
|
||
|
|
$('body').removeClass('overflow-hidden status-popup-wrapper');
|
||
|
|
document.onmousewheel = ScrollStart;
|
||
|
|
} else {
|
||
|
|
$('body, html').unbind('touchmove');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.mfp-popup-close').click(function() {
|
||
|
|
$.magnificPopup.close();
|
||
|
|
});
|
||
|
|
/*==============================================================*/
|
||
|
|
// magnificPopup 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
});
|
||
|
|
/*==============================================================*/
|
||
|
|
// READY 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// Page Load 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
$(window).load(function () {
|
||
|
|
var hash = window.location.hash.substr(1);
|
||
|
|
if (hash != "") {
|
||
|
|
setTimeout(function () {
|
||
|
|
$(window).imagesLoaded(function () {
|
||
|
|
var scrollAnimationTime = 1200,
|
||
|
|
scrollAnimation = 'easeInOutExpo';
|
||
|
|
var target = '#' + hash;
|
||
|
|
if ($(target).length > 0) {
|
||
|
|
|
||
|
|
$('html, body').stop()
|
||
|
|
.animate({
|
||
|
|
'scrollTop': $(target).offset().top
|
||
|
|
}, scrollAnimationTime, scrollAnimation, function () {
|
||
|
|
window.location.hash = target;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, 500);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 메인에서만 카운트
|
||
|
|
$('.main .timer').countTo({
|
||
|
|
//from: 50,
|
||
|
|
//to: 2500,
|
||
|
|
//speed: 1000,
|
||
|
|
refreshInterval: 50,
|
||
|
|
formatter: function (value, options) {
|
||
|
|
return value.toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); // 숫자 3자리 마다 콤마
|
||
|
|
},
|
||
|
|
onUpdate: function (value) {
|
||
|
|
console.debug(this);
|
||
|
|
},
|
||
|
|
onComplete: function (value) {
|
||
|
|
console.debug(this);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
/*==============================================================*/
|
||
|
|
// Page Load 끝
|
||
|
|
/*==============================================================*/
|
||
|
|
|
||
|
|
/*==============================================================*/
|
||
|
|
// 커스텀 시작
|
||
|
|
/*==============================================================*/
|
||
|
|
// 메뉴 가로사이즈 제한시 position:fixed 가로 스크롤
|
||
|
|
$(window).scroll(function() {
|
||
|
|
$('.navbar-fixed-top').css({left: 0 - $(this).scrollLeft()});
|
||
|
|
});
|
||
|
|
/*==============================================================*/
|
||
|
|
// 커스텀 끝
|
||
|
|
/*==============================================================*/
|