File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
(function() {
/**함수**/
"use strict";
///// 웹접근성을 위한 본문 바로가기 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var skip = {
'skipPage' : function() {
$('.skip a').on('focus', function(){
$(this).stop().animate({"top":0, "opacity":1});
});
$('.skip a').on('click', function(){
$(this).stop().animate({"top":"-30px", "opacity":0});
});
$('.skip a').on('focusout', function(){
$(this).stop().animate({"top":"-30px", "opacity":0});
});
}
};
///// img background ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var imgBg = {
'bgImg' : function() {
$(".bg_box").each(function(){
var bg_box = $(this).children("img").attr("src");
if (bg_box != null) {
$(this).css({backgroundImage: "url(" + bg_box + ")"});
}
});
},
//버튼 배경 이미지 넣기
'btnImg' : function() {
$(".btn_img").each(function(){
var btn_img = $(this).children("img").attr("src");
$(this).css({backgroundImage: "url(" + btn_img + ")"});
});
}
}
///// icon ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var icon = {
//icon
'icon' : function() {
if (!('boxShadow' in document.body.style)) {
document.body.setAttribute('class', 'noBoxShadow');
}
document.body.addEventListener("click", function(e) {
var target = e.target;
if (target.tagName === "INPUT" &&
target.getAttribute('class').indexOf('liga') === -1) {
target.select();
}
});
}
};
///// input focus event ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var inputFocus = {
'focus' : function() {
//포커스시
$(document).on('focus', '.inputText, .textArea', function() {
$(this).parent('.text_show').addClass("focus");
});
//포커스아웃시
$(document).on('focusout', '.inputText, .textArea', function() {
if($(this).val() === '') {
$(this).parent('.text_show').removeClass("focus");
}
});
var inputText = $('.inputText, .textArea');
inputText.each(function() {
if ($(this).val().trim() !== '') {
$(this).parent('.text_show').addClass('focus');
}
});
}
};
///// slick ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var slide = {
'basicslide' : function() {
var swiper = new Swiper(".main_slide", {
speed: 600,
keyboard: {
enabled: true,
},
parallax: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiperNews = new Swiper(".news_slide", {
slidesPerView: 4,
spaceBetween: 30,
speed: 600,
keyboard: {
enabled: true,
},
pagination: {
el: ".swiper-pagination",
type: "progressbar",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiperMove = new Swiper(".move", {
slidesPerView: "auto",
speed: 600,
keyboard: {
enabled: true,
},
});
//slide width
var docWidth = $(document).outerWidth();
var inner = $(".inner").outerWidth();
var cal = (docWidth - inner) / 2;
$(".news_slide").width(inner + cal);
$(".news_slide .swiper-button-prev, .news_slide .swiper-button-next").css({right: cal});
}
};
///// scroll ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//스크롤 시 top버튼 토글 함수
function scrollEvent() {
var scroll = $(window).scrollTop();
//포털소개
if (scroll >= 150) {
$(".cmtintro.section1").addClass("active");
$(".cmtintro.section2").removeClass("active");
} else {
$(".cmtintro.section1").removeClass("active");
}
}
//리스트 animation delay
function delay(){
$(".listshow").find("li").each(function(){
var hot = $(this).index();
$(this).attr("data-aos-delay", hot * "100");
})
}
//menu 클릭시 해당 컨텐츠로 이동
function scrollmove(){
$(".move a").on('click', function(){
var target = $(this).attr("class");
var targetOffset = $("#" + target).offset().top - 80;
window.scrollTo(0, targetOffset)
})
}
// toggle events
var toggle = {
'togglelist' : function(){
//toggle list
$('.toggle_tit').on('click', function(){
if ($(this).next('.toggle_box').css('display') == 'none') {
$('.toggle_box').slideUp();
$('.toggle_tit').removeClass('active');
$(this).addClass('active');
$(this).next(".toggle_box").slideDown();
} else {
$('.toggle_box').slideUp();
$(this).removeClass('active');
}
});
}
}
///// tab ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var tabs = {
'tabs': function () {
const tabGroups = document.querySelectorAll('[data-role="tab"]');
if (tabGroups) {
let currentTarget, targetTabWrap, targetTabListWrap, targetPanelWrap;
// 이벤트 타겟 변수 설정
const init = (e) => {
currentTarget = e.target.tagName;
currentTarget === 'BUTTON' || 'A' ? currentTarget = e.target : currentTarget = e.target.closest('button') || e.target.closest('a');
targetTabWrap = currentTarget.closest('[data-role="tab"]');
targetTabListWrap = targetTabWrap.querySelector('[role="tablist"]');
targetPanelWrap = targetTabWrap.querySelector('.wrap-tab-contents');
};
// 클릭 이벤트
const tabClickEvt = (e) => {
init(e);
if (currentTarget.ariaSelected === 'false') {
// 미선택된 탭 속성 false 상태로 만들기
tabRemoveEvt(targetTabListWrap, targetPanelWrap);
// 선택 된 탭 속성 true 상태로 만들기
tabAddEvt(currentTarget, targetTabWrap);
}
};
// 키보드 접근 이벤트
const tabKeyUpEvt = (e) => {
init(e);
const targetBtnWrap = currentTarget.parentElement;
if (e.key === 'ArrowRight') {
// 키보드 -> 화살표를 눌렀을 때
if (targetBtnWrap.nextElementSibling) {
targetBtnWrap.nextElementSibling.children[0].focus();
tabRemoveEvt(targetTabListWrap, targetPanelWrap);
tabAddEvt(targetBtnWrap.nextElementSibling.children[0], targetTabWrap);
}
else homeKeyEvt(targetTabListWrap, targetTabWrap, targetPanelWrap);
} else if (e.key === 'ArrowLeft') {
// 키보드 <- 화살표를 눌렀을 때
if (targetBtnWrap.previousElementSibling) {
targetBtnWrap.previousElementSibling.children[0].focus();
tabRemoveEvt(targetTabListWrap, targetPanelWrap);
tabAddEvt(targetBtnWrap.previousElementSibling.children[0], targetTabWrap);
} else endKeyEvt(targetTabListWrap, targetTabWrap, targetPanelWrap);
}
// 키보드 End 키 눌렀을 때
else if (e.key === 'End') endKeyEvt(targetTabListWrap, targetTabWrap, targetPanelWrap);
// 키보드 Home 키 눌렀을 때
else if (e.key === 'Home') homeKeyEvt(targetTabListWrap, targetTabWrap, targetPanelWrap);
};
// tab active event
const tabAddEvt = (currentTarget, targetPanelWrap) => {
// 선택 된 탭 속성 true 로 변경
currentTarget.setAttribute('aria-selected', 'true');
currentTarget.removeAttribute('tabindex');
currentTarget.parentElement.classList.add('active');
// 연결 된 tabpanel 숨김 해제
targetPanelWrap.querySelector(`[aria-labelledby="${currentTarget.id}"]`).removeAttribute('hidden');
targetPanelWrap.querySelector(`[aria-labelledby="${currentTarget.id}"]`).setAttribute('tabindex', '0');
};
// tab active remove event
const tabRemoveEvt = (tabListWrap, tabPanelWrap) => {
targetTabListWrap.querySelectorAll('li').forEach((tabBtnWrap) => {
// 기존에 선택 된 탭 속성 false 로 변경
if (tabBtnWrap.classList.contains('active')) {
tabBtnWrap.classList.remove('active');
tabBtnWrap.querySelector('[role="tab"]').setAttribute('aria-selected', 'false');
tabBtnWrap.querySelector('[role="tab"]').setAttribute('tabindex', '-1');
}
});
// 기존에 선택 된 tabpanel 숨김
for (let tabPanel of targetPanelWrap.children) {
tabPanel.setAttribute('hidden', 'false');
tabPanel.setAttribute('tabindex', '-1');
}
};
// 키보드 Home key Event (선택된 탭 리스트 중 첫 번째 리스트로 포커스 이동)
const homeKeyEvt = (targetTabListWrap, targetTabWrap, targetPanelWrap) => {
targetTabListWrap.children[0].children[0].focus();
tabRemoveEvt(targetTabListWrap, targetPanelWrap);
tabAddEvt(targetTabListWrap.children[0].children[0], targetTabWrap);
};
// 키보드 End key Event (선택된 탭 리스트 중 마지막 리스트로 포커스 이동)
const endKeyEvt = (targetTabListWrap, targetTabWrap, targetPanelWrap) => {
const targetTabLists = targetTabListWrap.querySelectorAll('li');
targetTabLists[targetTabLists.length - 1].children[0].focus();
tabRemoveEvt(targetTabListWrap, targetPanelWrap);
tabAddEvt(targetTabLists[targetTabLists.length - 1].children[0], targetTabWrap);
};
// 클릭/키보드 탭 이벤트 제거/할당
tabGroups.forEach((tabWrapper) => {
const tabBtns = tabWrapper.querySelectorAll('[role="tab"]');
tabBtns.forEach((tabBtn) => {
tabBtn.removeEventListener('click', tabClickEvt);
tabBtn.addEventListener('click', tabClickEvt);
tabBtn.removeEventListener('keyup', tabKeyUpEvt);
tabBtn.addEventListener('keyup', tabKeyUpEvt);
});
});
}
}
};
///// popup ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var popup = {
'popup': function () {
const popupBtnAll = document.querySelectorAll('[aria-haspopup="dialog"]');
if (popupBtnAll) {
let currentTarget, focusEl = [],
popupDepth = 0,
popupDimmed, keyEscapeEvt, KeyEvtEl;
const _$this = this,
popupAll = document.querySelectorAll('[role="dialog"]'),
popupCloseBtnAll = document.querySelectorAll('[popup-close]');
// ESC 누름 감지
const keyEvent = {
get keyEscape() {
return this._state;
},
set keyEscape(state) {
this._state = state;
if (state) escKeyEvt(KeyEvtEl, keyEscapeEvt);
},
};
keyEvent;
// popup dimmed 생성
const createdDimmed = () => {
const createDiv = document.createElement('div');
createDiv.classList.add('popup-dimmed');
document.querySelector('body').appendChild(createDiv);
};
// popup dimmed click 시 팝업 닫기
const dimmedClick = (e) => {
if (e.target.classList.contains('wrap-layer-popup')) {
popupCloseAll();
keyEvent.keyEscape = false;
}
};
// popup open
const popupOpen = (e) => {
currentTarget = e.target.tagName;
currentTarget === 'BUTTON' || currentTarget === 'A' ? currentTarget = e.target : currentTarget = e.target.closest('button') || e.target.closest('a');
popupDimmed = document.querySelectorAll('.popup-dimmed');
if (popupDimmed.length === 0) createdDimmed();
popupAll.forEach((popupEl) => {
if (popupEl.getAttribute('data-popup') === currentTarget.getAttribute('data-popup')) {
popupDepth += 1; // popup depth 저장
focusEl.splice((popupDepth - 1), 0, currentTarget); // popup focus Element 저장
popupEl.classList.add('popup-open'); // open class add
popupEl.setAttribute('popup-depth', popupDepth); // popup depth 설정
// dimmed click 이벤트 할당
popupEl.removeEventListener('click', dimmedClick);
popupEl.addEventListener('click', dimmedClick);
document.body.classList.add('scroll-lock'); // popup scroll lock
popupEl.querySelector('.wrap-layer-popup-title').focus(); // popup 오픈 시 타이틀에 포커스
// shift+tab 또는 <- 화살표 키 키보드 동작 시 팝업 밖으로 포커스 이동 방지 이벤트 할당
popupEl.querySelector('.wrap-layer-popup-title').removeEventListener('keydown', titleKeyDown);
popupEl.querySelector('.wrap-layer-popup-title').addEventListener('keydown', titleKeyDown);
// popup 위 팝업 케이스 dimmed 수정
if (popupDepth > 1) document.querySelector(`[popup-depth='${popupDepth - 1}']`).classList.add('prev-popup');
KeyEvtEl = popupEl; // ESC 키 동작을 위한 현재 활성화 된 popup element 저장
};
});
};
// popup close
const popupClose = (e) => {
// 키보드 이벤트 ESC 일 경우 currentTarget 설정
if (e.key == 'Escape' || e.key == 'Esc') currentTarget = KeyEvtEl.querySelector('.btn-layer-close');
// 일반적인 클릭, 키보드 이벤트 일 경우 currentTarget 설정
else {
currentTarget = e.target.tagName;
currentTarget === 'BUTTON' || currentTarget === 'A' ? currentTarget = e.target : currentTarget = e.target.closest('button') || e.target.closest('a');
let popupId = currentTarget.getAttribute('popup-close');
if (currentTarget.getAttribute('popup-close-all') === 'true') return popupCloseAll();
if (currentTarget.getAttribute('popup-confirm')) confirmEvt[popupId]();
else if (currentTarget.getAttribute('popup-cancel')) cancelEvt[popupId]();
}
popupAll.forEach((popupEl) => {
if (popupEl.getAttribute('data-popup') === currentTarget.getAttribute('popup-close')) {
popupEl.classList.remove('popup-open');
// 저장된 focus element 가 있을 때
if (focusEl.length > 0) {
focusEl[popupDepth - 1].focus(); // focus 상태 재설정
focusEl.splice((popupDepth - 1), 1); // popup focus Element 삭제
popupDepth -= 1; // popup depth 재설정
KeyEvtEl = document.querySelector(`.wrap-layer-popup[popup-depth='${popupDepth}']`); // ESC 키 동작을 위한 현재 활성화 된 popup element 저장
} else { // 저장된 focus element 가 없을 때
document.body.setAttribute('tabindex', '0');
document.body.focus();
KeyEvtEl = null;
}
};
});
// 오픈 된 popup이 있는 지 확인
const openPopups = document.querySelectorAll(`.popup-open`);
if (openPopups.length === 0) popupCloseAll('none');
else if (openPopups.length > 0) { // 오픈된 popup이 있을 경우 popup dimmed 수정
const getPopupValue = currentTarget.getAttribute('popup-close') || currentTarget.getAttribute('data-popup');
const getPopupDepth = Number(document.querySelector(`.wrap-layer-popup[data-popup='${getPopupValue}']`).getAttribute('popup-depth'));
document.querySelector(`.wrap-layer-popup[popup-depth='${getPopupDepth - 1}']`).classList.remove('prev-popup');
document.querySelector(`.wrap-layer-popup[data-popup='${getPopupValue}']`).removeAttribute('popup-depth');
};
};
// popup close All
const popupCloseAll = (focusActionNone) => {
// dimmed 삭제
const popupDimmed = document.querySelector('.popup-dimmed');
popupDimmed.style.opacity = 0;
popupDimmed.addEventListener('transitionend', function () {
if (popupDimmed.parentNode !== null) popupDimmed.parentNode.removeChild(popupDimmed);
});
// popup depth 설정 삭제
popupAll.forEach((popupEl) => {
popupEl.classList.remove('prev-popup');
popupEl.removeAttribute('popup-depth');
});
// scroll lock 해지
document.body.classList.remove('scroll-lock');
// popupClose Event 통해서 focus 설정이 되지 않았을 경우 (popupCloseAll 단독 실행일 경우)
if (focusActionNone !== 'none') {
if (focusEl.length > 0) focusEl[0].focus(); // 저장된 focus element 가 있을 때
else { // 저장된 focus element 가 없을 때
document.body.setAttribute('tabindex', '0');
document.body.focus();
};
focusEl = []; // focus reset
}
popupAll.forEach((popupEl) => popupEl.classList.remove('popup-open')); // open class 삭제
popupDepth = 0; // popup depth reset
KeyEvtEl = null; // KeyEvtEl reset
};
// ESC 키보드 이벤트
const escKeyEvt = (El, e) => {
const openPopups = document.querySelectorAll(`.popup-open`);
// 팝업 열린 상태에서 키보드 ESC 키 이벤트 실행
if (openPopups.length > 0) popupClose(e);
};
// popup 닫기 키보드 이벤트
const closeBtnKeyDown = (e) => {
if ((e.key == 'Tab' && !e.shiftKey) || e.key == 'ArrowRight') {
e.preventDefault();
popupAll.forEach((popupEl) => {
if (popupEl.getAttribute('data-popup') === e.target.getAttribute('popup-close')) {
popupEl.querySelector('.wrap-layer-popup-title').focus();
};
});
};
};
// popup title 키보드 이벤트
const titleKeyDown = (e) => {
if ((e.key == 'Tab' && e.shiftKey) || e.key == 'ArrowLeft') {
e.preventDefault();
popupAll.forEach((popupEl) => {
if (popupEl.getAttribute('data-popup') === e.target.closest('.wrap-layer-popup').getAttribute('data-popup')) {
popupEl.querySelector('.btn-layer-close').focus();
};
});
};
};
// 키보드 ESC 키 누름 감지 이벤트
const escKeyDown = (e) => {
if (e.key == 'Escape' || e.key == 'Esc') {
keyEscapeEvt = e;
keyEvent.keyEscape = true;
};
};
// 클릭/키보드 팝업 이벤트 제거/할당
// 팝업 열기
popupBtnAll.forEach((popupBtn) => {
popupBtn.removeEventListener('click', popupOpen);
popupBtn.addEventListener('click', popupOpen);
});
// 팝업 닫기
popupCloseBtnAll.forEach((popupCloseBtn) => {
popupCloseBtn.removeEventListener('click', popupClose);
popupCloseBtn.addEventListener('click', popupClose);
if (popupCloseBtn.classList.contains('btn-layer-close')) {
popupCloseBtn.removeEventListener('keydown', closeBtnKeyDown);
popupCloseBtn.addEventListener('keydown', closeBtnKeyDown);
}
});
// ESC 키로 팝업 닫기
window.removeEventListener('keydown', escKeyDown);
window.addEventListener('keydown', escKeyDown);
}
}
}
///// etc ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var etc = {
'etc': function () {
//must * 추가
$(".must").find("strong.title").append("<b class='mustText'>*</b>");
//board list a 넓이값
$(".board_list").find(".b_tit").each(function(){
var comment = $(this).children(".count_comment"),
say = comment.outerWidth() + 10;
if ( comment.length > 0 ){
$(this).find("a, p").css({ maxWidth : "calc(100% - " + say + "px)" });
}
})
}
}
$(document).ready(function() {
/**이벤트**/
$(window).scroll(function() {
scrollEvent(); //scroll events
});
inputFocus.focus(); //inputText focus 이벤트
popup.popup(); //popup
tabs.tabs() //tabs
imgBg.bgImg(); //img background
skip.skipPage(); //웹접근성을 위한 본문 바로가기
delay() //스크롤 애니메이션 제어
slide.basicslide(); //카드 형식의 슬라이드쇼
icon.icon() //arrow icon
scrollmove() //메뉴 클릭시 해당 화면으로 scroll이동
toggle.togglelist() //toggle
etc.etc()
});
})();