File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/*
Author : hyojeong yang
Date : 2025.11.11
Project : 다채움
*/
var toggleCommonFunc = function (opt) {
opt.obj = opt.obj;
$(opt.obj).toggleClass(opt.className);
if ($(opt.obj).hasClass(opt.className)) {
opt.hasClass()
} else {
opt.noneClass();
}
}
/**
*
* @param opt {
* pc : function
* mo : function
* ta : fucntion
* }
*/
var ssmFunc = function (opt) {
var ssmPc = (opt.hasOwnProperty('pc') && opt.pc) ? true : false;
var ssmTa = (opt.hasOwnProperty('ta') && opt.ta) ? true : false;
var ssmMo = (opt.hasOwnProperty('mo') && opt.mo) ? true : false;
if (ssmPc) {
ssm.addState({
id: 'pc',
query: '(min-width: 1280px)',
onEnter: function () {
opt.pc();
},
});
}
if (ssmTa) {
ssm.addState({
id: 'ta',
query: '(min-width: 768px) and (max-width: 1279px)',
onEnter: function () {
opt.ta();
},
});
}
if (ssmMo) {
ssm.addState({
id: 'mo',
query: '(max-width: 767px)',
onEnter: function () {
opt.mo();
},
});
}
};
//이미지 줌 src 세팅
var zoomPopup = function (el) {
$(".popup-zoom").find("img").attr("src", $(el).closest("figure").find("img").attr("src"));
popupOpen("popupZoom");
}
//popup open
// var popupOpen = function (target) {
// var $pop = $('[data-popup="' + target + '"]');
// $pop.css({
// 'display': 'flex'
// });
// if ($pop.hasClass('popup-alert-area')) {
// $el = $pop.find('.popup-alert');
// TweenMax.fromTo($el, .3, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut }, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut });
// }
// else {
// TweenMax.fromTo($pop, .3, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut }, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut });
// }
// $('.layer').hide();
// $('.dim').show();
// $('body').css({ 'overflow-y': 'hidden' });
// }
// //popup close
// var popupClose = function (target) {
// var $pop = $('[data-popup="' + target + '"]');
// if ($pop.hasClass('popup-alert-area')) {
// $el = $pop.find('.popup-alert');
// TweenMax.fromTo($el, .3, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut }, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut });
// }
// else {
// TweenMax.fromTo($pop, .3, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut }, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut });
// }
// $pop.fadeOut(200);
// $('.dim, .layer').fadeOut(200);
// $('body').css({ 'overflow-y': 'auto' });
// }
var openPopups = [];
var dimZIndex = 97;
var popupOpen = function (target) {
var $pop = $('[data-popup="' + target + '"]');
if ($pop.hasClass('popup-alert-area')) {
$pop.css({'display': 'flex'});
return;
} else {
openPopups.push(target);
dimZIndex += 2;
$pop.css({'display': 'flex', 'z-index': dimZIndex + 1});
$('.dim').css({'z-index': dimZIndex}).show();
$('body').css({'overflow-y': 'hidden'});
}
};
var popupClose = function (target) {
var $pop = $('[data-popup="' + target + '"]');
if ($pop.hasClass('popup-alert-area')) {
$pop.fadeOut(200);
return;
} else {
openPopups = openPopups.filter(item => item !== target);
if (openPopups.length === 0) {
$('body').css({'overflow-y': 'auto'});
$pop.add('.dim').fadeOut(100);
dimZIndex = 97;
} else {
dimZIndex -= 2;
$pop.fadeOut(200, function () {
$('.dim').css({'z-index': dimZIndex});
});
}
}
};
$('.pop-close').on('click', function () {
var target = $(this).closest($('[class^=popup][data-popup]')).data('popup');
popupClose(target);
});
$('.dim').on('click', function () {
if (openPopups.length > 0) {
var topPopup = openPopups[openPopups.length - 1];
popupClose(topPopup);
}
});
//layer open
var layerOpen = function (target, el) {
var $layer = $('[data-layer="' + target + '"]'),
$el = $(el),
offsetTop = $el.offset().top + ($el.height() / 2 - 20),
offsetLeft = $el.offset().left + ($el.width() + 20);
$layer.css({"top": offsetTop, "left": offsetLeft}).fadeIn(200);
}
//layer close
var layerClose = function (target) {
var $layer = $('[data-layer="' + target + '"]');
$layer.fadeOut(200);
}
//toast
var toastTimer;
var toastShow = function (message) {
clearTimeout(toastTimer);
$(".toast").text(message);
$(".toast").removeClass("is-hidden").removeClass("is-hide").addClass("is-show");
toastTimer = setTimeout(function () {
toastHide();
}, 2000);
}
var toastHide = function () {
clearTimeout(toastTimer);
$(".toast").removeClass("is-show").addClass("is-hide");
toastTimer = setTimeout(function () {
$(".toast").addClass("is-hidden");
}, 1000);
}
const checkIsSticky = () => {
const header = document.querySelector('.site-header');
if (!header) return;
if (window.scrollY > 10) {
header.classList.add('is-sticky');
} else {
header.classList.remove('is-sticky');
}
}
if (jQuery) (function ($) {
//common
//$.extend($.fn, {
// Func: function () {
// var init = function (obj) {
// };
// $(this).each(function () {
// init(this);
// });
// return $(this);
// }
//});
//component
//popup
// $.extend($.fn, {
// popupFunc: function () {
// var init = function (obj) {
// var $btn = $('.popup, .popup-zoom').find('.pop-close');
// $(document).on('click', $btn, function (e) {
// var $target = $(e.target);
// if ($target.is($btn)) {
// $pop = $target.closest('.popup, .popup-zoom');
// $pop.fadeOut(200);
// // TweenMax.fromTo($pop, .3, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut }, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut });
// $('.dim').fadeOut(200);
// $('body').css({ 'overflow-y': 'auto' });
// }
// });
// $('.dim').on('click', function (e) {
// $pop = $('[data-popup], .popup');
// $pop.fadeOut(200);
// // TweenMax.fromTo($pop, .3, { css: { scale: 1, opacity: 1 }, ease: Quad.easeInOut }, { css: { scale: .8, opacity: 0 }, ease: Quad.easeInOut });
// $('body').css({ 'overflow-y': 'auto' });
// $(this).hide();
// });
// };
// init(this);
// return $(this);
// }
// });
//accordion
$.extend($.fn, {
accordionFunc: function () {
var init = function (obj) {
var $btn = $(obj).find('li').find('.btn-accordion-toggle');
$(document).on('click', '.btn-accordion-toggle', function (e) {
var $target = $(e.target);
var $btn = $(this);
var $area = $target.parents('.accordion');
if(!$area.hasClass('toggle-each')) {
$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);
}
});
//section accordion
$.extend($.fn, {
sectionAccordionFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-section-accordion-toggle', function (e) {
var $btn = $(this);
var $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);
}
});
//tabsNormalFunc
$.extend($.fn, {
tabsNormalFunc: function () {
var init = function (obj) {
var showTab = function (tabSelector) {
$(tabSelector).addClass('is-active');
// Show corresponding tabs-cont
var $tabsNav = $(tabSelector).find("[class^='tabs-nav'] a.is-active");
if ($tabsNav.length > 0) {
var tabHref = $tabsNav.attr('href');
// Ensure tabHref is valid
if (tabHref && tabHref.startsWith('#')) {
var $tabsCont = $(tabSelector).find('.tabs-cont' + tabHref);
$tabsCont.addClass('is-active');
}
}
};
var showInitialTabs = function () {
// 초기 설정
var $currentTab = $(obj).children("[class^='tabs-nav']").find('a.is-active');
var $currentTabCont = $currentTab.attr('href');
if ($currentTabCont && $currentTabCont.startsWith('#')) {
showTab($currentTabCont);
}
// 중첩된 탭 처리
$(obj).find('.tabs-normal').not(':first').each(function () {
init(this);
});
};
var setActiveTab = function (tabLink) {
if (!$(tabLink).hasClass("is-active")) {
const tabsNav = $(tabLink).closest("[class^='tabs-nav']");
tabsNav.find('a').removeClass("is-active").removeAttr("title");
$(tabLink).addClass("is-active").attr("title", "선택됨");
}
};
var hideTabs = function (tabsContainer) {
$(tabsContainer).find('.tabs-cont').removeClass('is-active').removeAttr("title");
};
var handleTabClick = function (e) {
var $tabLink = $(this);
var $tabsNormal = $tabLink.closest('.tabs-normal');
setActiveTab($tabLink);
hideTabs($tabsNormal);
var $activeTab = $tabLink.attr('href');
if ($activeTab && $activeTab.startsWith('#')) {
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, .tabs-normal .tabs-nav-mn a", handleTabClick);
showInitialTabs();
};
$(this).each(function () {
init(this);
});
return $(this);
}
});
//toggleFunc
$.extend($.fn, {
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) {
val = $(this).data('toggle');
$el = $('[data-toggleobj="' + val + '"]');
$btn = $('[data-toggle="' + val + '"]');
toggleCommonFunc({
obj: $btn,
className: 'is-active',
hasClass: function (obj) {
$el.css({'display': 'flex'});
TweenMax.fromTo($el, .5, {opacity: 0}, {opacity: 1});
},
noneClass: function (obj) {
TweenMax.fromTo($el, .5, {opacity: 1}, {opacity: 0});
$el.css({'display': 'none'});
}
});
});
};
init(this);
return $(this);
}
});
//btnToggleFunc
$.extend($.fn, {
btnToggleFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-toggle', function (e) {
$btn = $(this);
toggleCommonFunc({
obj: $btn,
className: 'is-active',
hasClass: function (obj) {
},
noneClass: function (obj) {
}
});
});
};
init(this);
return $(this);
}
});
//tipFunc
$.extend($.fn, {
tipFunc: function () {
var init = function (obj) {
var txt = $(obj).find("[data-tip]:checked").data('tip');
$tip = $(obj).find('.tip-txt');
$tip.css({
'display': 'flex'
}).html(txt);
$(document).on('click', '[data-tip]', function (e) {
txt = $(this).data('tip');
$area = $(this).closest('.tip-area');
$tip = $area.find('.tip-txt');
$tip.css({
'display': 'flex'
}).html(txt);
});
};
init(this);
return $(this);
}
});
//etcFunc
$.extend($.fn, {
etcFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-etc-fnc', function (e) {
$area = $(this).closest('.etc-fnc-area');
$el = $area.find('.etc-fnc');
$('.etc-fnc-area').removeClass('is-active');
toggleCommonFunc({
obj: $area,
className: 'is-active',
hasClass: function (obj) {
$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);
}
});
//tooltipFunc
$.extend($.fn, {
tooltipFunc: function () {
var init = function (obj) {
$(document).on('click', '.btn-tooltip', function (e) {
$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);
}
});
$.extend($.fn, {
navFunc: function () {
var init = function (obj) {
var $nav = $(obj);
ssmFunc({
pc: function () {
$('.btn-nav-open').on('click', function () {
//$nav.addClass('is-active');
$nav.fadeIn();
});
$('.btn-nav-close, .dim').on('click', function () {
//$nav.removeClass('is-active');
$nav.fadeOut();
});
},
ta: function () {
$('.btn-nav-open').on('click', function () {
TweenMax.fromTo($nav, .3, {opacity: 0}, {opacity: 1});
$nav.addClass('is-active');
mNavOpen();
});
$('.btn-nav-close, .dim').on('click', function () {
$nav.removeClass('is-active');
mNavClose();
});
},
mo: function () {
$('.btn-nav-open').on('click', function () {
TweenMax.fromTo($nav, .3, {opacity: 0}, {opacity: 1});
$nav.addClass('is-active');
mNavOpen();
});
$('.btn-nav-close, .dim').on('click', function () {
$nav.removeClass('is-active');
mNavClose();
});
}
});
var mNavOpen = function () {
TweenMax.fromTo($('.site-nav .nav-util, .site-nav > ul'), .4, {
xPercent: 100,
opacity: 0
}, {xPercent: 0, opacity: 1});
$('.btn-nav-close').fadeIn();
}
var mNavClose = function () {
TweenMax.fromTo($('.site-nav .nav-util, .site-nav > ul'), .4, {
xPercent: 0,
opacity: 0
}, {xPercent: 100, opacity: 1});
$('.btn-nav-close').fadeOut();
}
};
init(this);
return $(this);
}
});
// swiper
$.extend($.fn, {
mnVisualSwiper: function (obj) {
var init = function (obj) {
var $el = $(obj).find('.swiper');
var $btnPrev = $(obj).find('.swiper-button-prev')[0];
var $btnNext = $(obj).find('.swiper-button-next')[0];
var $btnPlayStop = $(obj).find('.swiper-btn-playstop-toggle')[0];
var $progress = $(obj).find('.swiper-progress-bar')[0];
var isPaused = false; // 재생 상태를 추적하는 변수
var swiper = new Swiper($el[0], {
effect:'fade',
fadeEffect: {
crossFade: true
},
preloadImages: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
loop: true,
loopedSlides: 0,
speed: 1000,
slidesPerView: 1,
initialSlide: 0,
watchSlidesProgress: true,
navigation: {
prevEl: $btnPrev,
nextEl: $btnNext
},
on: {
slideChangeTransitionStart: function() {
if (!isPaused) {
$progress.style.transition = 'none';
$progress.style.width = '0%';
}
},
slideChangeTransitionEnd: function() {
if (!isPaused) {
setTimeout(() => {
$progress.style.transition = 'width 4s linear';
$progress.style.width = '100%';
}, 10);
}
}
}
});
// 중지 버튼 클릭 이벤트
$($btnPlayStop).on('click', function() {
if (isPaused) {
// 슬라이드 재생
swiper.autoplay.start();
$progress.style.transition = 'width 4s linear';
$progress.style.width = '100%';
$(this).removeClass('is-stop').text('중지'); // 버튼 텍스트 변경
isPaused = false;
} else {
// 슬라이드 정지
swiper.autoplay.stop();
$progress.style.transition = 'none';
$progress.style.width = '0%'; // 프로그레스 바를 0으로 설정
$(this).addClass('is-stop').text('재생'); // 버튼 텍스트 변경
isPaused = true;
}
});
}
init(this);
return $(this);
}
});
$.extend($.fn, {
mnNoticeSwiper: function () {
var init = function (obj) {
var $el = $(obj).find('.swiper');
var $btnPrev = $(obj).find('.swiper-button-prev')[0];
var $btnNext = $(obj).find('.swiper-button-next')[0];
var $btnPlayStop = $(obj).find('.swiper-btn-playstop-toggle')[0];
var $progress = $(obj).find('.swiper-progress-bar')[0];
var isPaused = false; // 재생 상태를 추적하는 변수
var swiper = new Swiper($el[0], {
preloadImages: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: true,
loopedSlides: 0,
speed: 1000,
slidesPerView: 1,
initialSlide: 0,
watchSlidesProgress: true,
navigation: {
prevEl: $btnPrev,
nextEl: $btnNext
},
on: {
slideChangeTransitionStart: function() {
if (!isPaused) {
$progress.style.transition = 'none';
$progress.style.width = '0%';
}
},
slideChangeTransitionEnd: function() {
if (!isPaused) {
setTimeout(() => {
$progress.style.transition = 'width 4s linear';
$progress.style.width = '100%';
}, 10);
}
}
}
});
// 중지 버튼 클릭 이벤트
$($btnPlayStop).on('click', function() {
if (isPaused) {
// 슬라이드 재생
swiper.autoplay.start();
$progress.style.transition = 'width 4s linear';
$progress.style.width = '100%';
$(this).removeClass('is-stop').text('중지'); // 버튼 텍스트 변경
isPaused = false;
} else {
// 슬라이드 정지
swiper.autoplay.stop();
$progress.style.transition = 'none';
$progress.style.width = '0%'; // 프로그레스 바를 0으로 설정
$(this).addClass('is-stop').text('재생'); // 버튼 텍스트 변경
isPaused = true;
}
});
}
init(this);
return $(this);
}
});
$.extend($.fn, {
mnQuickSwiper: function () {
var init = function (obj) {
var $el = $(obj).find('.swiper');
var $btnPrev = $(obj).find('.swiper-button-prev')[0];
var $btnNext = $(obj).find('.swiper-button-next')[0];
var swiper = new Swiper($el[0], {
preloadImages: true,
slidesPerView: 1, // 한 번에 표시할 슬라이드 개수
loop: true,
loopedSlides: 0,
speed: 500,
slidesPerView: 1,
initialSlide: 0,
watchSlidesProgress: true,
navigation: {
prevEl: $btnPrev,
nextEl: $btnNext
},
});
}
init(this);
return $(this);
}
});
})(jQuery);
$(window).on('load', function () {
//jquery-ui
/*$('.datepicker').datepicker({
showOn: "both",
buttonImage: "../../../images/user/common/ico_cal.svg",
buttonText: "기간 선택",
// buttonImageOnly: true,
changeMonth: true,
changeYear: true
});
$(window).on('scroll', function () {
$('#ui-datepicker-div').hide();
});
*/
//component
//accordionFunc
$('.accordion, .accordion-nav, .accordion-list').accordionFunc();
$('.tabs-normal').tabsNormalFunc();
//$('.popup').popupFunc();
$('[data-toggle]').toggleFunc();
$('.btn-toggle').btnToggleFunc();
//func
$('.etc-fnc-area').etcFunc();
$('.tooltip').tooltipFunc();
//swiper
$('.mn-visual').mnVisualSwiper();
$('.mn-notice').mnNoticeSwiper();
$('.mn-quick').mnQuickSwiper();
//input date 클릭시 달력 열림
$('input[type=date]').on('focus', function() {
this.showPicker();
});
setTimeout(function () {
checkIsSticky();
}, 100);
});
window.onscroll = () => {
checkIsSticky();
}
// 메인 독서통계
const mnBookLegendPlugin = {
id: 'mnBookLegendPlugin',
afterDraw: (chart) => {
const { ctx } = chart;
const datasets = chart.data.datasets;
datasets.forEach((dataset, index) => {
const meta = chart.getDatasetMeta(index);
const lastPoint = meta.data[meta.data.length - 1];
if (lastPoint) {
const label = dataset.label;
const fontSize = 10;
const paddingTop = 4;
const paddingBottom = 4;
const paddingLeft = 8;
const paddingRight = 8;
// 텍스트 측정
ctx.font = `${fontSize}px Pretendard`;
const textWidth = ctx.measureText(label).width;
const textHeight = fontSize;
// 범례 박스의 너비와 높이 계산
const boxWidth = textWidth + paddingLeft + paddingRight;
const boxHeight = textHeight + paddingTop + paddingBottom;
// 범례 박스 위치 지정
let x = lastPoint.x - boxWidth / 2; // 중앙 정렬
let y = lastPoint.y - boxHeight / 2;
// 차트의 경계와 비교하여 범례 박스 위치 조정
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x + boxWidth > chart.width) {
x = chart.width - boxWidth;
}
if (y + boxHeight > chart.height) {
y = chart.height - boxHeight;
}
// 배경 사각형 그리기
ctx.save();
ctx.fillStyle = dataset.borderColor;
ctx.beginPath();
ctx.roundRect(x, y, boxWidth, boxHeight, textHeight);
ctx.fill();
ctx.restore();
// 텍스트 그리기
ctx.save();
ctx.font = `${fontSize}px Pretendard`;
ctx.fillStyle = '#FFF';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(label, x + boxWidth / 2, y + boxHeight / 2);
ctx.restore();
}
});
}
};
const mnBookDatasetConfig = {
fill: false,
pointRadius: 0,
borderWidth: 1.6,
tension: 0.4
};
const createMnBookChart = ({ id, labels, datasets }) => {
const ctx = document.getElementById(id).getContext('2d');
// 데이터셋에 공통 설정과 색상 추가
const datasetWithConfig = datasets.map((dataset, index) => {
const colors = ['#358AEB', '#004BA0']; // 색상 배열
return {
...mnBookDatasetConfig,
...dataset, // 전달된 데이터셋 설정을 오버라이드
borderColor: colors[index % colors.length] // 데이터셋 순서에 따른 색상 지정
};
});
const config = {
type: 'line',
data: { labels, datasets: datasetWithConfig },
options: {
animation: false,
scales: {
y: {
ticks: {
stepSize: 5,
maxTicksLimit: 5,
color: '#999',
font: {
family: 'Pretendard',
size: 10,
style: 'normal',
weight: '400',
lineHeight: 1,
},
textAlign: 'center'
},
grid: {
color: '#EFEFEF',
borderColor: 'transparent',
borderWidth: 0
}
},
x: {
ticks: {
color: '#999',
font: {
family: 'Pretendard',
size: 10,
style: 'normal',
weight: '400',
lineHeight: 1,
},
textAlign: 'center'
},
grid: {
display: false
}
}
},
plugins: {
legend: {
display: false
}
}
},
plugins: [mnBookLegendPlugin]
};
return new Chart(ctx, config);
};