File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/* util */
const ssmFunc = (opt) => {
const ssmPc = opt.hasOwnProperty('pc') && opt.pc;
const ssmTa = opt.hasOwnProperty('ta') && opt.ta;
const ssmMo = opt.hasOwnProperty('mo') && opt.mo;
if (ssmPc) {
ssm.addState({
id: 'pc',
query: '(min-width: 1280px)',
onEnter: () => opt.pc(),
});
}
if (ssmTa) {
ssm.addState({
id: 'ta',
query: '(min-width: 768px) and (max-width: 1279px)',
onEnter: () => opt.ta(),
});
}
if (ssmMo) {
ssm.addState({
id: 'mo',
query: '(max-width: 767px)',
onEnter: () => opt.mo(),
});
}
};
const toggleCommonFunc = ({ obj, className, hasClass, noneClass }) => {
$(obj).toggleClass(className);
if ($(obj).hasClass(className)) {
hasClass(obj);
} else {
noneClass();
}
};
window.ssmFunc = ssmFunc;
window.toggleCommonFunc = toggleCommonFunc;
export const util = {
ssmFunc,
toggleCommonFunc,
};
/* popup */
// const popupManager = (() => {
// let openPopupsPub = [];
// let dimZIndexPub = 97;
// const popupOpenPub = (target) => {
// const $pop = $(`[data-popuppub="${target}"]`);
// if ($pop.hasClass('popup-alert-area')) {
// $pop.css({ 'display': 'flex' });
// return;
// } else {
// openPopupsPub.push(target);
// dimZIndexPub += 2;
// $pop.css({ 'display': 'flex', 'z-index': dimZIndexPub + 1 }).addClass('is-active');
// $('.dim').css({ 'z-index': dimZIndexPub }).show();
// $('body').css({ 'overflow-y': 'hidden' });
// }
// };
// const popupClosePub = (target) => {
// const $pop = $(`[data-popuppub="${target}"]`);
// if ($pop.hasClass('popup-alert-area')) {
// $pop.fadeOut(200);
// return;
// } else {
// openPopupsPub = openPopupsPub.filter(item => item !== target);
// if (openPopupsPub.length === 0) {
// $('body').css({ 'overflow-y': 'auto' });
// $pop.add('.dim').fadeOut(100).removeClass('is-active');
// dimZIndexPub = 97;
// } else {
// dimZIndexPub -= 2;
// $pop.fadeOut(200, () => {
// $('.dim').css({ 'z-index': dimZIndexPub });
// });
// }
// }
// };
// $(document).on('click', '[data-popuppub] .pop-close', function () {
// const target = $(this).closest($('[class^=popup][data-popuppub]')).data('popuppub');
// popupClosePub(target);
// });
// $('.dim').on('click', () => {
// if (openPopupsPub.length > 0) {
// const topPopup = openPopupsPub[openPopupsPub.length - 1];
// popupClosePub(topPopup);
// }
// });
// window.popupOpenPub = popupOpenPub;
// window.popupClosePub = popupClosePub;
// })();
const popupManager = (() => {
let openPopupsPub = [];
let dimZIndexPub = 97;
let lastFocusedElement = null;
const popupOpenPub = (target) => {
lastFocusedElement = document.activeElement;
const $pop = $(`[data-popuppub="${target}"]`);
if ($pop.hasClass('popup-alert-area')) {
$pop.css({ 'display': 'flex' });
setTimeout(() => {
$pop.find('button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]').first().focus();
}, 10);
return;
} else {
openPopupsPub.push(target);
dimZIndexPub += 2;
$pop.css({ 'display': 'flex', 'z-index': dimZIndexPub + 1 }).addClass('is-active');
$('.dim').css({ 'z-index': dimZIndexPub }).show();
$('body').css({ 'overflow-y': 'hidden' });
setTimeout(() => {
$pop.find('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]').first().focus();
}, 10);
}
};
const popupClosePub = (target) => {
const $pop = $(`[data-popuppub="${target}"]`);
if ($pop.hasClass('popup-alert-area')) {
$pop.fadeOut(200, () => {
if (lastFocusedElement) {
lastFocusedElement.focus(); // 이전 요소로 포커스 복귀
}
});
return;
} else {
openPopupsPub = openPopupsPub.filter(item => item !== target);
if (openPopupsPub.length === 0) {
$('body').css({ 'overflow-y': 'auto' });
$pop.add('.dim').fadeOut(100).removeClass('is-active');
dimZIndexPub = 97;
} else {
dimZIndexPub -= 2;
$pop.fadeOut(200, () => {
$('.dim').css({ 'z-index': dimZIndexPub });
});
}
setTimeout(() => {
if (lastFocusedElement) {
lastFocusedElement.focus(); // 이전 요소로 포커스 복귀
}
}, 10);
}
};
$(document).on('click', '[data-popuppub] .pop-close', function () {
const target = $(this).closest($('[class^=popup][data-popuppub]')).data('popuppub');
popupClosePub(target);
});
$('.dim').on('click', () => {
if (openPopupsPub.length > 0) {
const topPopup = openPopupsPub[openPopupsPub.length - 1];
popupClosePub(topPopup);
}
});
window.popupOpenPub = popupOpenPub;
window.popupClosePub = popupClosePub;
})();
/* layerManager */
const layerManager = {
layerOpen: (target, el) => {
const $layer = $(`[data-layer="${target}"]`);
const $el = $(el);
const offsetTop = $el.offset().top + ($el.height() / 2 - 20);
const offsetLeft = $el.offset().left + ($el.width() + 20);
$layer.css({ "top": offsetTop, "left": offsetLeft }).fadeIn(200);
},
layerClose: (target) => {
const $layer = $(`[data-layer="${target}"]`);
$layer.fadeOut(200);
}
};
/* toastManager */
const toastManager = (() => {
let toastTimer;
const toastShow = (message) => {
clearTimeout(toastTimer);
$(".toast").text(message);
$(".toast").removeClass("is-hidden is-hide").addClass("is-show");
toastTimer = setTimeout(() => {
toastHide();
}, 2000);
};
const toastHide = () => {
clearTimeout(toastTimer);
$(".toast").removeClass("is-show").addClass("is-hide");
toastTimer = setTimeout(() => {
$(".toast").addClass("is-hidden");
}, 1000);
};
window.toastShow = toastShow;
window.toastHide = toastHide;
})();
export const popup = {
popupManager,
layerManager,
toastManager,
};
(function ($) {
$.fn.accordionFunc = function () {
$(document).on('click', '.btn-accordion-toggle', function (e) {
const $targetBtn = $(e.target).closest('.btn-accordion-toggle');
const $currentLi = $targetBtn.closest('li');
const $accordion = $currentLi.closest('.accordion');
const $btns = $accordion.find('li .btn-accordion-toggle');
$currentLi.siblings('li').removeClass('is-active');
toggleCommonFunc({
obj: $currentLi,
className: 'is-active',
hasClass: function () {
$btns.html('열기');
$targetBtn.html('닫기');
},
noneClass: function () {
$btns.html('열기');
}
});
});
return this;
};
})(jQuery);
export const common = {
// Accordion Function
// accordionFunc: function () {
// const init = function (obj) {
// const $btn = $(obj).find('li').find('.btn-accordion-toggle');
// $(document).on('click', $btn, function (e) {
// const $target = $(e.target);
// if ($target.is($btn)) {
// $target.closest('li').siblings('li').removeClass('is-active');
// toggleCommonFunc({
// obj: $target.closest('li'),
// className: 'is-active',
// hasClass: function (obj) {
// //$(obj).removeClass('is-active');
// TweenMax.fromTo('.accordion-txt-area', .5, {opacity: 0}, {opacity: 1});
// $btn.html('열기');
// $target.html('닫기');
// },
// noneClass: function (obj) {
// TweenMax.fromTo('.accordion-txt-area', .5, {opacity: 1}, {opacity: 0});
// $btn.html('열기');
// }
// });
// }
// });
// };
// init(this);
// return this; // For chainability
// },
// Section Accordion Function
sectionAccordionFunc: function () {
const init = function (obj) {
$(document).on('click', '.btn-section-accordion-toggle', function () {
const $btn = $(this);
const $area = $(this).closest('.section-accordion');
toggleCommonFunc({
obj: $area,
className: 'is-close',
hasClass: function (obj) {
$btn.html('열기');
},
noneClass: function (obj) {
$btn.html('접기');
}
});
});
};
init(this);
return this; // For chainability
},
stepUnitAccordionFunc: function () {
const init = function (obj) {
$(document).on('click', '.btn-step-unit-accordion-toggle', function () {
const $btn = $(this);
const $area = $(this).closest('.step-unit-accordion');
toggleCommonFunc({
obj: $area,
className: 'is-close',
hasClass: function (obj) {
// $btn.html('열기');
},
noneClass: function (obj) {
// $btn.html('접기');
}
});
});
};
init(this);
return this; // For chainability
},
// Tabs Normal Function
tabsNormalFunc: function () {
const init = function (obj) {
const showTab = function (tabSelector) {
$(tabSelector).addClass('is-active');
const $tabsNav = $(tabSelector).find("[class^='tabs-nav'] a.is-active");
if ($tabsNav.length > 0) {
const tabHref = $tabsNav.attr('href');
const $tabsCont = $(tabSelector).find('.tabs-cont' + tabHref);
$tabsCont.addClass('is-active');
}
};
const showInitialTabs = function () {
const $currentTab = $(obj).children("[class^='tabs-nav']").find('a.is-active');
const $currentTabCont = $currentTab.attr('href');
showTab($currentTabCont);
$(obj).find('.tabs-normal').not(':first').each(function () {
init(this);
});
};
const setActiveTab = function (tabLink) {
if (!$(tabLink).hasClass("is-active")) {
$(tabLink).closest("[class^='tabs-nav']").find('a').removeClass("is-active").removeAttr("title");
$(tabLink).addClass("is-active").attr("title", "선택됨");
}
};
const hideTabs = function (tabsContainer) {
$(tabsContainer).find('.tabs-cont').removeClass('is-active').removeAttr("title");
};
const handleTabClick = function (e) {
const $tabLink = $(this);
const $tabsNormal = $tabLink.closest('.tabs-normal');
setActiveTab($tabLink);
hideTabs($tabsNormal);
const $activeTab = $tabLink.attr('href');
showTab($activeTab);
e.preventDefault();
};
$(document).on('click', ".tabs-normal .tabs-nav-lg a, .tabs-normal .tabs-nav a, .tabs-normal .tabs-nav-sm a, .tabs-normal .tabs-nav-xsm a,.tabs-normal .tabs-nav-img a", handleTabClick);
showInitialTabs();
};
$(this).each(function () {
init(this);
});
return this; // For chainability
},
// toggleFunc
toggleFunc: function () {
var init = function (obj) {
var $currentTab = $(obj).find("[data-toggle]").find('a.is-active').attr('href');
$($currentTab).show();
$(document).on('click', '[data-toggle]', function (e) {
var val = $(this).data('toggle');
var $el = $('[data-toggleobj="' + val + '"]');
var $btn = $('[data-toggle="' + val + '"]');
toggleCommonFunc({
obj: $btn,
className: 'is-active',
hasClass: function (obj) {
$el.css({'display': 'flex'});
},
noneClass: function (obj) {
$el.css({'display': 'none'});
}
});
});
};
init(this);
return $(this);
},
// btnToggleFunc
btnToggleFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-toggle, .btn.toggle, .btn-text.toggle', function (e) {
let $btn;
$btn = $(this);
toggleCommonFunc({
obj: $btn,
className: 'is-active',
hasClass: function (obj) {
if ($btn.attr("data-txt")) {
var txt = $btn.data("txt");
$btn.html(txt);
}
if ($btn.attr("data-toast")) {
var message = $btn.data("toast");
toastShow(message);
}
if ($btn.attr('data-btntoggle')) {
val = $btn.data('btntoggle');
$el = $('[data-btntoggleobj="' + val + '"]');
$el.addClass('is-active');
}
},
noneClass: function (obj) {
if ($btn.attr("data-txt-inactive")) {
var txt = $btn.data("txt-inactive");
$btn.html(txt);
}
if ($btn.attr("data-toast-inactive")) {
var message = $btn.data("toast-inactive");
toastShow(message);
}
if ($btn.attr('data-btntoggle')) {
val = $btn.data('btntoggle');
$el = $('[data-btntoggleobj="' + val + '"]');
$el.removeClass('is-active');
}
}
});
});
};
init(this);
return $(this);
},
// tipFunc
tipFunc: function () {
var init = function (obj) {
var txt = $(obj).find("[data-tip]:checked").data('tip');
var $tip = $(obj).find('.tip-txt');
$tip.css({
'display': 'flex'
}).html(txt);
$(document).on('click', '[data-tip]', function (e) {
var $area = $(this).closest('.tip-area');
txt = $(this).data('tip');
$tip = $area.find('.tip-txt');
$tip.css({
'display': 'flex'
}).html(txt);
});
};
init(this);
return $(this);
},
//tooltipFunc
tooltipFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-tooltip', function (e) {
var $area;
$area = $(this).closest('.tooltip');
$('.tooltip').removeClass('is-active');
toggleCommonFunc({
obj: $area,
className: 'is-active',
hasClass: function (obj) {
},
noneClass: function (obj) {
}
});
});
$(document).click(function (e) {
if (!$(e.target).is('.btn-tooltip')) {
$('.tooltip').removeClass('is-active');
}
});
};
init(this);
return $(this);
},
// etcFunc
etcFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-etc-fnc', function (e) {
var $area;
var $el;
$area = $(this).closest('.etc-fnc-area');
$el = $area.find('.etc-fnc');
toggleCommonFunc({
obj: $area,
className: 'is-active',
hasClass: function (obj) {
var $elArea;
$elArea = $el.closest('.etc-fnc-area');
TweenMax.fromTo($el, .5, { opacity: 0 }, { opacity: 1 });
$('.etc-fnc-area').not($elArea).removeClass('is-active');
},
noneClass: function (obj) {
TweenMax.fromTo($el, .5, { opacity: 1 }, { opacity: 0 });
}
});
});
$(document).click(function (e) {
if (!$(e.target).is('.btn-etc-fnc')) {
$('.etc-fnc-area').removeClass('is-active');
}
});
};
init(this);
return $(this);
},
// schboxFunc
schboxFunc: function () {
var init = function (obj) {
if ($(".search-box").length === 0) {
return;
} else {
var searchBox = $(".search-box"),
searchBoxBtnTxt = searchBox.find('.btn-search-toggle span'),
searchBoxHeight = searchBox.outerHeight(true),
searchBoxPosition = searchBox.offset().top + searchBoxHeight,
searchBoxOpen = false,
searchBoxNext = $(".search-box-area");
if ($('.search-box.is-active').length > 0) {
searchBoxOpen = true;
searchBoxHeight = searchBox.outerHeight(true);
searchBoxPosition = searchBox.offset().top + searchBoxHeight;
} else {
searchBoxHeight = searchBox.outerHeight(true);
searchBoxPosition = searchBox.offset().top + searchBoxHeight;
}
$(document).on('click', '.btn-search-toggle', function (e) {
$btn = $(this);
$area = $(this).closest('.search-box');
$cont = $area.find('.write-type2');
if ($(window).scrollTop() < searchBoxPosition) {
if ($area.hasClass('is-active')) {
searchBoxOpen = false;
$area.removeClass('is-active');
$btn.find('span').html('상세검색 열기');
searchBoxHeight = searchBox.outerHeight(true);
searchBoxPosition = searchBox.offset().top + searchBoxHeight;
} else {
searchBoxOpen = true;
$area.addClass('is-active');
$btn.find('span').html('상세검색 닫기');
searchBoxHeight = searchBox.outerHeight(true);
searchBoxPosition = searchBox.offset().top + searchBoxHeight;
}
} else {
if ($area.hasClass('is-active')) {
$area.removeClass('is-active');
$btn.find('span').html('상세검색 열기');
} else {
$area.addClass('is-active');
$btn.find('span').html('상세검색 닫기');
}
}
});
$(window).scroll(function () {
var scrollPosition = $(window).scrollTop();
if (scrollPosition > searchBoxPosition) {
if (searchBox.hasClass('is-active')) {
searchBox.removeClass('is-active');
searchBoxBtnTxt.html('상세검색 열기');
}
searchBox.addClass('is-sticky');
searchBoxNext.css('margin-top', searchBoxHeight + 'px');
} else {
if (searchBoxOpen) {
searchBox.addClass('is-active');
searchBoxBtnTxt.html('상세검색 닫기');
searchBox.removeClass('is-sticky');
searchBoxNext.css('margin-top', 0);
} else {
searchBox.removeClass('is-sticky');
searchBoxNext.css('margin-top', 0);
}
}
});
$(window).resize(function () {
searchBoxHeight = searchBox.outerHeight(true);
searchBoxPosition = searchBox.offset().top + searchBoxHeight;
});
}
};
init(this);
return $(this);
},
headerUserFunc: function () {
var init = function (obj) {
$(document).on('click', '.site-header .btn-user-fnc-toggle', function (e) {
var $area;
var $el;
var $btn = $(this);
$area = $(this).closest('.user-area');
$el = $area.find('.user-fnc-list');
toggleCommonFunc({
obj: $area,
className: 'is-active',
hasClass: function (obj) {
$btn.html('열기');
},
noneClass: function (obj) {
$btn.html('닫기');
}
});
});
$(document).click(function (e) {
if (!$(e.target).is('.site-header .btn-user-fnc-toggle')) {
$('.site-header .user-area').removeClass('is-active');
}
});
};
init(this);
return $(this);
},
btnUtilFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-util-toggle', function (e) {
e.stopPropagation(); // 이벤트 버블링 막기
var $btn = $(this);
var $area = $btn.closest('.btn-util-area');
var $el = $area.find('.util-list');
toggleCommonFunc({
obj: $area,
className: 'is-active',
hasClass: function (obj) {
// 필요하면 로직 추가
},
noneClass: function (obj) {
// 필요하면 로직 추가
}
});
});
$(document).click(function (e) {
if (!$(e.target).closest('.btn-util-area').length) {
$('.btn-util-area').removeClass('is-active');
}
});
};
init(this);
return $(this);
},
siteMenuFunc: function () {
var init = function (obj) {
// 메뉴 열기
$(document).on("click", ".btn-site-menu-open", function (e) {
$(".site-menu-area").addClass("is-active");
});
// 메뉴 닫기
$(document).on("click", ".btn-site-menu-close", function (e) {
$(".menu > li > ul > li").removeClass("is-active");
$(".site-menu-area").removeClass("is-active");
});
// 메뉴 영역 바깥 클릭 시 닫기
$(document).on("click", ".site-menu-area", function (e) {
if (!$(e.target).closest(".site-menu").length) {
$(".btn-site-menu-close").trigger("click");
}
});
// 서브 메뉴 토글
$(document).on("click", ".site-header .menu > li > ul > li > a", function (e) {
if ($(this).next("ul").length) {
e.preventDefault();
let $subMenu = $(this).next("ul");
let $parentLi = $(this).closest('li');
let isActive = $parentLi.hasClass("is-active");
$(".menu > li > ul > li").removeClass("is-active");
if (!isActive) {
$parentLi.addClass("is-active");
}
}
});
};
init(this);
return $(this);
},
};
$.extend($.fn, common);
window.common = common;
export const initCommon= () => {
$(document).ready(function () {
$('.accordion, .accordion-nav, .accordion-list').accordionFunc();
$('.section-accordion').sectionAccordionFunc();
$('.step-unit-accordion').stepUnitAccordionFunc();
$('.tabs-normal').tabsNormalFunc();
$('[data-toggle]').toggleFunc();
$('.btn-toggle, .btn.toggle, .btn-text.toggle').btnToggleFunc();
$('.tip-area').tipFunc();
$('.tooltip').tooltipFunc();
$('.etc-fnc-area').etcFunc();
//$('.search-box').schboxFunc();
$('.site-header .user-area').headerUserFunc();
$('.btn-util-area').btnUtilFunc();
$('.site-menu-area').siteMenuFunc();
$('input[type=date]').on('focus', function() {
this.showPicker();
});
});
$(document).on('keydown', '.site-header .gnb > ul > li > a, .site-header .gnb > ul > li > button', function (event) {
if (event.key === 'Enter') {
$(this).closest('li').addClass('is-active');
}
});
$(document).on('focusout', '.site-header .gnb > ul > li.is-active > ul > li:last-child a', function (event) {
setTimeout(() => {
if (!$('.site-header .gnb > ul > li.is-active ul li a').is(':focus')) {
$(this).closest('ul').closest('li').removeClass('is-active');
}
}, 10);
});
};