File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/*
Author : hyojeong yang
Date : 2025-09-22
Project : 온세종
*/
if (jQuery) (function ($) {
$.extend($.fn, {
viewermenuFunc: function () {
return this.each(function () {
$(document).on('click', '.btn-viewer-menu, .btn-viewer-menu-toggle, .viewer-menu-dim', function () {
$('.tabs-normal').tabsNormalFunc();
toggleCommonFunc({
obj: '.viewer',
className: 'is-active'
});
});
});
},
classViewermenuFunc: function () {
return this.each(function () {
$(document).on('click', '.btn-class-viewer-menu', function () {
$('.tabs-normal').tabsNormalFunc();
toggleCommonFunc({
obj: '.class-viewer',
className: 'is-active'
});
});
});
},
qGroupFunc: function () {
return this.each(function () {
$(document).on('click', '.btn-q-group-toggle', function () {
const $btn = $(this);
const $area = $btn.closest('.q-group-area');
if ($area.hasClass('is-close')) {
setTimeout(() => {
$area.removeClass('is-close');
$btn.find('span').text('닫기');
}, 290);
} else {
$area.addClass('is-close');
$btn.find('span').text('열기');
}
});
});
},
thumbSwiper: function () {
return this.each(function () {
new Swiper(this, {
preloadImages: false,
lazy: { loadPrevNext: true },
slidesPerView: 5,
initialSlide: 0,
watchSlidesProgress: true,
spaceBetween: 15,
loop: false,
freeMode: true,
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
},
breakpoints: {
0: { slidesPerView: 2.05, spaceBetween: 8 },
767: { slidesPerView: 3.1, spaceBetween: 20 },
1279: { slidesPerView: 4, spaceBetween: 20, freeMode: false }
}
});
});
},
thumbSwiperSm: function () {
return this.each(function () {
const isThumb3 = $(this).hasClass('thumb3');
new Swiper(this, {
preloadImages: false,
lazy: { loadPrevNext: true },
slidesPerView: 5,
initialSlide: 0,
watchSlidesProgress: true,
spaceBetween: 8,
loop: false,
freeMode: true,
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
},
breakpoints: isThumb3 ? {
0: { slidesPerView: 2.05 },
767: { slidesPerView: 3.1 },
1279: { slidesPerView: 3, freeMode: false }
} : {
0: { slidesPerView: 2.05 },
767: { slidesPerView: 3.1 },
1279: { slidesPerView: 4, freeMode: false }
}
});
});
},
studentMnBannerSwiper: function () {
return this.each(function () {
const $el = $(this).find('.swiper');
const $btnPrev = $(this).find('.swiper-button-prev');
const $btnNext = $(this).find('.swiper-button-next');
const $btnPlayStop = $(this).find('.swiper-btn-playstop-toggle');
let isPaused = false;
const swiper = new Swiper($el[0], {
effect: 'fade',
fadeEffect: { crossFade: true },
preloadImages: true,
autoplay: { delay: 4000, disableOnInteraction: false },
loop: true,
speed: 1000,
slidesPerView: 1,
navigation: {
prevEl: $btnPrev[0],
nextEl: $btnNext[0]
}
});
$btnPlayStop.on('click', function () {
if (isPaused) {
swiper.autoplay.start();
$(this).removeClass('is-stop').text('중지');
isPaused = false;
} else {
swiper.autoplay.stop();
$(this).addClass('is-stop').text('재생');
isPaused = true;
}
});
});
},
emotionSwiper: function () {
return this.each(function () {
new Swiper(this, {
preloadImages: false,
lazy: {
loadPrevNext: true
},
slideToClickedSlide: false,
slidesPerView: 1,
initialSlide: 0,
watchSlidesProgress: true,
spaceBetween: 8,
loop: false,
freeMode: true,
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
}
});
});
},
//sj추가
mnPopupSwiper: function () {
return this.each(function () {
const $el = $(this).find('.swiper');
const $btnPrev = $(this).find('.swiper-button-prev')[0];
const $btnNext = $(this).find('.swiper-button-next')[0];
const $btnPlayStop = $(this).find('.swiper-btn-playstop-toggle')[0];
const $btnsPagination = $(this).find('.swiper-total')[0];
let isPaused = false;
let slideCount = $el.find('.swiper-slide').length;
// 현재 브레이크포인트에서 slidesPerView 값 설정
let getSlidesPerView = function () {
var width = window.innerWidth;
if (width >= 1023) return 3;
if (width >= 767) return 2;
return 1;
};
let slidesPerView = getSlidesPerView();
let enableAutoplay = slideCount > slidesPerView;
//var enableLoop = slideCount > slidesPerView;
//var enableCenteredSlides = slideCount < slidesPerView;
if (slideCount < slidesPerView) { $el.addClass('is-inactive');};
const swiper = new Swiper($el[0], {
preloadImages: true,
spaceBetween: 16,
//centeredSlides: enableCenteredSlides,
autoplay: enableAutoplay ? {
delay: 4000,
disableOnInteraction: false,
} : false,
// loop: enableLoop,
loopedSlides: 0,
speed: 1000,
initialSlide: 0,
watchSlidesProgress: true,
navigation: {
prevEl: $btnPrev,
nextEl: $btnNext
},
breakpoints: {
480: {
slidesPerView: 1,
},
767: {
slidesPerView: 2,
},
1023: {
slidesPerView: 3,
spaceBetween: 40,
},
},
pagination: {
el: $btnsPagination,
type: "custom",
renderCustom: function (swiper, current, total) {
return `
<em>${slideCount}</em>
`;
},
},
});
// 중지 버튼 클릭 이벤트
$($btnPlayStop).on('click', function() {
if (isPaused) {
// 슬라이드 재생
swiper.autoplay.start();
$(this).removeClass('is-stop').text('중지'); // 버튼 텍스트 변경
isPaused = false;
} else {
// 슬라이드 정지
swiper.autoplay.stop();
$(this).addClass('is-stop').text('재생'); // 버튼 텍스트 변경
isPaused = true;
}
});
$(window).on('resize', function () {
var newSlidesPerView = getSlidesPerView();
var wasAutoplayEnabled = enableAutoplay;
slidesPerView = newSlidesPerView;
enableAutoplay = slideCount > slidesPerView;
if (slideCount < slidesPerView) {
$el.addClass('is-inactive');
} else {
$el.removeClass('is-inactive');
}
if (enableAutoplay && !wasAutoplayEnabled) {
swiper.params.autoplay = { delay: 3000, disableOnInteraction: false };
if (!isPaused) {
swiper.autoplay.start();
$($btnPlayStop).removeClass('is-stop').text('중지');
}
} else if (!enableAutoplay && wasAutoplayEnabled) {
swiper.autoplay.stop();
swiper.params.autoplay = false;
$($btnPlayStop).addClass('is-stop').text('재생');
isPaused = true;
}
});
});
},
mnVisualSwiper: function (obj) {
return this.each(function () {
var $container = $(this);
var $el = $container.find('.swiper');
var $btnPrev = $container.find('.swiper-button-prev')[0];
var $btnNext = $container.find('.swiper-button-next')[0];
var $btnsPagination = $container.find('.swiper-pagination')[0];
var $btnPlayStop = $container.find('.swiper-btn-playstop-toggle')[0];
var isPaused = false; // 재생 상태 변수 (컨테이너별)
var swiper = new Swiper($el[0], {
preloadImages: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
loop: true,
speed: 1000,
slidesPerView: 1,
initialSlide: 0,
watchSlidesProgress: true,
navigation: {
prevEl: $btnPrev,
nextEl: $btnNext
},
pagination: {
el: $btnsPagination,
type: "custom",
renderCustom: function (swiper, current, total) {
return `
<em>${current}</em>
<span>${total}</span>
`;
},
},
});
// 재생/중지 버튼
$($btnPlayStop).on('click', function () {
if (isPaused) {
swiper.autoplay.start();
$(this).removeClass('is-stop').text('중지');
isPaused = false;
} else {
swiper.autoplay.stop();
$(this).addClass('is-stop').text('재생');
isPaused = true;
}
});
});
},
mnCourseSwiper: function (obj) {
return this.each(function () {
var $container = $(this);
var $el = $container.find('.swiper');
var $btnPrev = $container.find('.swiper-button-prev')[0];
var $btnNext = $container.find('.swiper-button-next')[0];
var swiper = new Swiper($el[0], {
preloadImages: true,
loop: true,
// effect: "fade",
// fadeEffect: {
// crossFade: true,
// },
speed: 1000,
spaceBetween: 24,
slidesPerView: 1,
initialSlide: 0,
watchSlidesProgress: true,
navigation: {
prevEl: $btnPrev,
nextEl: $btnNext
},
});
});
},
imgSwiper: function () {
return this.each(function () {
const $area = $(this).find('.img-area');
const $el = $(this).find('.img-swiper');
const $btnPrev = $area.find('.swiper-button-prev');
const $btnNext = $area.find('.swiper-button-next');
const $thumbArea = $(this).find('.img-thumb-area');
const $thumb = $(this).find('.img-thumb-swiper');
const $thumbBtnPrev = $thumbArea.find('.swiper-button-prev');
const $thumbBtnNext = $thumbArea.find('.swiper-button-next');
const imgThumbSwiper = new Swiper($thumb[0], {
direction: 'vertical',
slidesPerView: 5.4,
spaceBetween: 8,
navigation: {
prevEl: $thumbBtnPrev[0],
nextEl: $thumbBtnNext[0]
},
watchSlidesProgress: true,
});
const imgSwiper = new Swiper($el[0], {
spaceBetween: 0,
navigation: {
prevEl: $btnPrev[0],
nextEl: $btnNext[0]
},
thumbs: {
swiper: imgThumbSwiper,
},
});
});
},
noticeSwiper: function (obj) {
return this.each(function () {
var $container = $(this);
var $el = $container.find('.swiper');
var $btnPrev = $container.find('.swiper-button-prev')[0];
var $btnNext = $container.find('.swiper-button-next')[0];
var $btnPlayStop = $container.find('.swiper-btn-playstop-toggle')[0];
var isPaused = false; // 재생 상태 변수 (컨테이너별)
var swiper = new Swiper($el[0], {
preloadImages: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
effect: "fade",
fadeEffect: {
crossFade: true,
},
loop: true,
speed: 1000,
slidesPerView: 1,
initialSlide: 0,
watchSlidesProgress: true,
navigation: {
prevEl: $btnPrev,
nextEl: $btnNext
},
});
// 재생/중지 버튼
$($btnPlayStop).on('click', function () {
if (isPaused) {
swiper.autoplay.start();
$(this).removeClass('is-stop').text('중지');
isPaused = false;
} else {
swiper.autoplay.stop();
$(this).addClass('is-stop').text('재생');
isPaused = true;
}
});
});
},
});
})(jQuery);
//헤더 체크
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');
}
}
/* chart */
// 공통
const defaltBg = '#F0F0F5';
const gradientColorPrimary = ['#26C1D9', '#91E7F5'];
const gradientColorSecondary = ['#5FDDCD', '#AEEEE8'];
const gradientColorAccent = ['#FFC5D7', '#FF8291'];
const gradientColorPositive = ['#C2EFC2', '#42BE42'];
const gradientColorNegative = ['#FF8F66', '#FF6A33'];
const gradientColorYellow = ['#FFD47C', '#FFC550'] ;
const gradientColorGreen = ['#C2EFC2', '#42BE42'] ;
const gradientColorBlue = ['#88B7EC', '#1359A9'] ;
const gradientColorPink = ['#FFC5D7', '#FF8291'] ;
const gradientColorViolet = ['#BDA2E3', '#7A45C6'] ;
// const gradientColorOrange = ['#FF8F66', '#FF6A33'];
//const gradientColorRed = ['#F89999', '#F23B3B'];
const hexToRGBA = (hex, opacity) => {
// HEX 값에서 R, G, B 값을 추출
const r = parseInt(hex.substring(1, 3), 16);
const g = parseInt(hex.substring(3, 5), 16);
const b = parseInt(hex.substring(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
const createGradient = (ctx, colors, opacity = 1) => {
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
// HEX 값을 RGBA로 변환 후 투명도 적용
const rgbaColor1 = hexToRGBA(colors[0], opacity);
const rgbaColor2 = hexToRGBA(colors[1], opacity);
gradient.addColorStop(0, rgbaColor1);
gradient.addColorStop(1, rgbaColor2);
return gradient;
};
const isMobile = window.innerWidth <= 768;
const chartStyleLabelFont = {
font: {
size: isMobile ? 10 : 12,
weight: 500,
family: "Pretendard"
},
}
const chartStyleLabel = {
backgroundColor: '#fff',
color: '#5A585E',
borderRadius: 4,
borderWidth: 1,
font: {
size: isMobile ? 10 : 11,
weight: 700,
family: "Pretendard"
},
borderColor: '#dddae3',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 15,
shadowOffsetX: 4,
shadowOffsetY: 4,
padding: {
left: isMobile ? 4 : 8,
right: isMobile ? 4 : 8
}
}
const chartStyleAvgLine = {
type: 'line',
borderColor: '#FF8291',
borderWidth: 1,
borderDash: [5, 5],
}
const chartDoughnutOption = {
// responsive: true,
cutout: '70%',
animation: false,
interaction: {
mode: null, // hover 모드 비활성화
intersect: false, // 데이터와의 교차점에서만 활성화되지 않도록 설정
},
plugins: {
tooltip: { enabled: false },
legend: { display: false },
}
}
function createChartDoughnut(elementId, value, gradientColors) {
document.getElementById(elementId).classList.add('chart-doughnut');
const ctx = document.getElementById(elementId).getContext('2d');
const backgroundColors = gradientColors.map(colors => {
if (Array.isArray(colors) && colors.length === 2) {
return createGradient(ctx, colors);
}
return defaltBg;
});
const dataValues = Array.isArray(value) && value.length > 1 ? value : [value, 100 - value];
const dataBackgroundColor = Array.isArray(value) && value.length > 1 ? backgroundColors : [createGradient(ctx, gradientColors), defaltBg];
return new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
data: dataValues,
backgroundColor: dataBackgroundColor,
borderWidth: 0,
}
]
},
options: {
...chartDoughnutOption,
}
});
}
function createChartDoughnutTxt(elementId, value, gradientColors) {
const ctx = document.getElementById(elementId).getContext('2d');
const backgroundColors = gradientColors.map(colors => {
if (Array.isArray(colors) && colors.length === 2) {
return createGradient(ctx, colors);
}
return defaltBg;
});
const dataValues = Array.isArray(value) && value.length > 1 ? value : [value, 100 - value];
const dataBackgroundColor = Array.isArray(value) && value.length > 1
? backgroundColors
: [createGradient(ctx, gradientColors), defaltBg];
return new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: dataValues,
backgroundColor: dataBackgroundColor,
borderWidth: 0
}]
},
options: {
...chartDoughnutOption,
plugins: {
// ...chartDoughnutOption.plugins,
datalabels: {
// display: true,
color: '#000',
font: {
size: 20,
weight: 'bold'
},
formatter: function(_, context) {
if (context.dataIndex === 0) {
return Array.isArray(value) ? value[0] + '%' : value + '%';
}
return '';
},
// 중앙에 고정
anchor: 'cetner',
align: 'center'
}
}
},
plugins: [ChartDataLabels]
});
}
function createChartBar(elementId, labels, data, onClick = null, avg = false) {
document.getElementById(elementId).classList.add('chart-bar');
const canvas = document.getElementById(elementId);
const chartParent = canvas.parentElement;
const ctx = canvas.getContext('2d');
const charBarStyle = {
datalabels: {
display: true,
anchor: 'end',
align: function (context) {
const dataValue = context.dataset.data[context.dataIndex];
var totalMinus = 95;
return dataValue === 0 || dataValue < totalMinus ? 'end' : 'center';
},
padding: {
left: isMobile ? 4 : 8,
right: isMobile ? 4 : 8
},
formatter: function(value) {
return value + '%';
},
...chartStyleLabel
},
backgroundColor: function(context) {
return context.dataIndex % 2 === 0
? createGradient(context.chart.ctx, gradientColorPrimary)
: createGradient(context.chart.ctx, gradientColorSecondary);
},
borderWidth: 0,
borderRadius: isMobile ? 16 : 24,
maxBarThickness: isMobile ? 16 : 24,
custom: function(context) {
const label = labels[context.dataIndex];
return label && label.id ? { id: label.id } : {};
}
};
const charBarOptions = {
plugins: {
tooltip: { enabled: false },
legend: { display: false },
annotation: {
annotations: {
avgLine: {
...chartStyleAvgLine,
display: !!avg,
yMin: avg || 0,
yMax: avg || 0,
}
}
}
},
maintainAspectRatio: false,
animation: false,
scales: {
x: {
ticks: { ...chartStyleLabelFont },
grid: { display: false },
},
y: {
beginAtZero: true,
border: { dash: [2, 4] },
ticks: {
padding: isMobile ? 0 : 8,
stepSize: 25,
...chartStyleLabelFont,
callback: function(value) { return value + '%'; }
},
max: 100,
min: 0,
},
},
onClick: onClick ? (event, elements) => {
onClick(event, elements, labels, data);
} : null,
};
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{ data: data, ...charBarStyle }],
},
plugins: [ChartDataLabels],
options: charBarOptions,
});
}
function createChartBarWidthauto(elementId, labels, data, onClick = null, avg = false) {
document.getElementById(elementId).classList.add('chart-bar-widthauto');
const ctx = document.getElementById(elementId).getContext('2d');
const canvas = document.getElementById(elementId);
const chartParent = canvas.parentElement; // chart1 div 요소
const canvasWidth = labels.length * 36; // 바의 개수에 따른 너비 계산
// 캔버스의 너비와 높이 설정
canvas.width = canvasWidth;
chartParent.style.minWidth = `${canvasWidth}px`;
const charBarStyle = {
datalabels: {
display: false,
},
backgroundColor: function(context) {
return context.dataIndex % 2 === 0
? createGradient(context.chart.ctx, gradientColorPrimary)
: createGradient(context.chart.ctx, gradientColorSecondary);
},
borderWidth: 0,
borderRadius: isMobile ? 16 : 24,
maxBarThickness: isMobile ? 16 : 24,
custom: function(context) {
const label = labels[context.dataIndex]; // labels 배열에서 해당 데이터 참조
return label.id ? { id: label.id } : {};
}
};
const charBarOptions = {
plugins: {
tooltip: { enabled: false },
legend: { display: false },
annotation: {
annotations: {
avgLine: {
...chartStyleAvgLine,
yMin: avg,
yMax: avg,
}
}
}
},
maintainAspectRatio: false,
animation: false,
scales: {
x: {
ticks: {
...chartStyleLabelFont
},
grid: { display: false },
},
y: {
beginAtZero: true,
border: { dash: [2,4] },
ticks: {
padding: isMobile ? 0 : 8,
stepSize: 25,
...chartStyleLabelFont,
callback: function(value) {
return value + '%';
}
},
max: 100,
min: 0,
},
},
onClick: onClick ? (event, elements) => {
onClick(event, elements, labels, data);
} : null,
};
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
data: data,
...charBarStyle,
},
],
},
plugins: [ChartDataLabels],
options: charBarOptions,
});
}
function createChartLine(elementId, labels, dataSets, legends, colors, animation) {
document.getElementById(elementId).classList.add('chart-line');
const ctx = document.getElementById(elementId).getContext('2d');
// 각 데이터셋에 맞는 그라데이션 생성
const gradients = colors.map(color => createGradient(ctx, color, .1));
const datasets = dataSets.map((data, index) => ({
label: legends[index],
data: data,
backgroundColor: gradients[index],
borderColor: colors[index][1],
borderWidth:2,
lineTension:0.3,
pointRadius:4,
pointBackgroundColor:'#fff',
pointBorderWidth: 2,
fill: false,
}));
new Chart(ctx, {
type: "line",
data: { labels, datasets },
options: {
plugins: { tooltip: { enabled: false }, legend: { display: false } },
animation: false,
//responsive: true, // 반응형 설정
//maintainAspectRatio: false, // 부모 요소 크기에 맞게 차트 크기 조정
scales: {
x: {
beginAtZero: true,
grid: {
display: false,
},
ticks: {
...chartStyleLabelFont
}
},
y: {
suggestedMin: 0,
suggestedMax: 100,
border: {
dash: [2,4],
},
ticks: {
padding: isMobile ? 0 : 0,
stepSize: 25,
...chartStyleLabelFont,
callback: function(value) {
return value + '%';
}
},
},
},
},
});
}
function createChartRadar(elementId, labels, dataSets, legends, colors, animation) {
document.getElementById(elementId).classList.add('chart-radar');
const ctx = document.getElementById(elementId).getContext('2d');
const allDataValues = dataSets.flat();
const rawMax = Math.max(...allDataValues);
const safeMax = rawMax <= 4 ? 4 : rawMax;
const maxValue = Math.ceil(safeMax / 10) * 10 || 4;
const stepSize = maxValue / 4;
// 각 데이터셋에 맞는 그라데이션 생성
const gradients = colors.map(color => createGradient(ctx, color, .1));
const datasets = dataSets.map((data, index) => ({
label: legends[index],
data: data,
backgroundColor: gradients[index],
borderColor: colors[index][1],
borderWidth: 2,
lineTension: 0,
pointRadius: 4,
pointBackgroundColor: '#fff',
pointBorderWidth: 2,
fill: true,
}));
new Chart(ctx, {
type: "radar",
data: { labels, datasets },
options: {
plugins: { tooltip: { enabled: false }, legend: { display: false } },
maintainAspectRatio: false,
animation: false,
// responsive: true,
// maintainAspectRatio: false,
scales: {
r: {
max: maxValue,
ticks: {
display: false, // 눈금 값 숨김
stepSize: stepSize,
},
pointLabels: {
...chartStyleLabelFont,
padding: isMobile ? 4 : 16,
},
}
}
},
});
}
//오늘의 학습 시간
function createChartTodayStudyTime(elementId, labels, dataSets, legends, colors, dataLabelClickHandler) {
const ctx = document.getElementById(elementId).getContext('2d');
// 각 데이터셋에 맞는 그라데이션 생성
const gradients = colors.map(color => createGradient(ctx, color, .2));
const datasets = dataSets.map((data, index) => ({
label: legends[index],
data: data,
backgroundColor: gradients[index],
borderColor: colors[index][1],
borderWidth: index === 0 ? 3 : 1,
lineTension: 0.3,
pointRadius: index === 0 ? 4 : 0,
pointBackgroundColor: '#fff',
pointBorderWidth: 2,
fill: index === 0 ? false : true, // 첫 번째 데이터셋만 fill: false
datalabels: {
display: index === 0, // 첫 번째 데이터셋만 데이터 라벨 표시
...chartStyleLabelFont,
anchor: 'end',
align: 'end',
formatter: function(value) {
return value + '분';
},
},
}));
const maxDataValue = Math.max(...datasets.flatMap(dataset => dataset.data));
const stepSize = maxDataValue;
new Chart(ctx, {
type: "line",
data: {
labels,
datasets,
},
plugins: [ChartDataLabels],
options: {
plugins: {
tooltip: { enabled: false },
legend: { display: false },
datalabels: {
listeners: {
click: dataLabelClickHandler
}
}
},
animation: false,
// responsive: true,
// maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
},
ticks: {
...chartStyleLabelFont
}
},
y: {
suggestedMin: 0,
suggestedMax: stepSize,
border: {
dash: [2,4],
},
ticks: {
padding: isMobile ? 0 : 8,
stepSize: stepSize,
...chartStyleLabelFont,
callback: function(value) {
return value + '분';
}
},
},
},
},
});
}
//콘텐츠 나의보관함 - 나의 콘텐츠 활동
function createChartContActivity(elementId, labels, datasetInfo) {
const ctx = document.getElementById(elementId).getContext('2d');
const datasets = datasetInfo.map(([label, data, color]) => ({
label: label,
data: data,
backgroundColor: createGradient(ctx, color),
borderWidth: 0,
borderRadius: 24,
maxBarThickness: 24,
barThickness: 32
}));
const maxDataValue = Math.max(...datasets.flatMap(dataset => dataset.data));
const stepSize = maxDataValue / 2;
return new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: datasets
},
options: {
responsive: true,
plugins: {
tooltip: { enabled: false },
legend: { display: false },
},
scales: {
y: {
beginAtZero: true,
ticks: {
stepSize: stepSize,
...chartStyleLabelFont
},
border: {
dash: [2,4],
}
},
x: {
grid: {
display: false,
},
}
}
}
});
}
//요일별 히트맵
function createChartHeatmap(id, data, times, days, captionText) {
// 테이블 요소 가져오기
const table = document.getElementById(id);
// 기존 내용 초기화
table.innerHTML = '';
// 0. CAPTION 생성
const caption = document.createElement('caption');
caption.textContent = captionText;
table.appendChild(caption);
// 1. THEAD 생성
const tableHead = document.createElement('thead');
const headerRow = document.createElement('tr');
const emptyHeader = document.createElement('th');
headerRow.appendChild(emptyHeader); // 왼쪽 상단 빈 칸
days.forEach(day => {
const dayHeader = document.createElement('th');
dayHeader.textContent = day;
headerRow.appendChild(dayHeader);
});
tableHead.appendChild(headerRow);
table.appendChild(tableHead);
// 2. TBODY 생성 및 행 추가
const tableBody = document.createElement('tbody');
data.forEach((rowData, rowIndex) => {
const row = document.createElement('tr');
const timeCell = document.createElement('th');
timeCell.textContent = times[rowIndex];
row.appendChild(timeCell);
// 각 셀에 값과 색상 추가
rowData.forEach(value => {
const cell = document.createElement('td');
cell.textContent = value;
// 색상 수준 계산 및 클래스 추가
if (value == 0) cell.classList.add('level0');
else if (value < 6) cell.classList.add('level1');
else if (value < 11) cell.classList.add('level2');
else if (value < 16) cell.classList.add('level3');
else if (value >= 16) cell.classList.add('level4');
// else cell.classList.add('level5');
row.appendChild(cell);
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
// 3. TFOOT 생성 및 요일별 총합 추가
const tableFoot = document.createElement('tfoot');
const footerRow = document.createElement('tr');
const emptyCell = document.createElement('td');
footerRow.appendChild(emptyCell);
days.forEach((_, colIndex) => {
const sum = data.reduce((total, row) => total + row[colIndex], 0);
const footerCell = document.createElement('td');
footerCell.textContent = `${sum}명`;
footerRow.appendChild(footerCell);
});
tableFoot.appendChild(footerRow);
table.appendChild(tableFoot);
}
$(document).ready(function () {
$('.viewer .viewer-menu-area').viewermenuFunc();
$('.class-viewer .viewer-menu-area').classViewermenuFunc();
$('.q-group-area').qGroupFunc();
$(document).on('change', '.item-type-checkradio input[type="radio"]', function () {
var newType = $(this).attr('id');
$('.item-type-list').removeClass('item-type-feed item-type-thumb item-type-table').addClass(newType);
});
$(document).on('click', '.btn-chasi-toggle', function (e) {
var $area;
$area = $(this).closest('li');
toggleCommonFunc({
obj: $area,
className: 'is-active',
hasClass: function (obj) {
},
noneClass: function (obj) {
}
});
});
$('.thumb-swiper').thumbSwiper();
$('.student-mn-cont-banner').studentMnBannerSwiper();
checkIsSticky();
window.onscroll = () => {
checkIsSticky();
}
document.querySelectorAll('.chart-bar-stack').forEach(container => {
const bars = Array.from(container.querySelectorAll('.bar'));
const visibleBars = bars.filter(bar => parseFloat(bar.style.width) > 0);
bars.forEach(bar => {
bar.classList.remove('is-active', 'is-active-first', 'is-active-last');
});
visibleBars.forEach((bar, index, arr) => {
bar.classList.add('is-active');
if (index === 0) bar.classList.add('is-active-first');
if (index === arr.length - 1) bar.classList.add('is-active-last');
});
});
// document.querySelectorAll('.chart-bar-stack').forEach(container => {
// container.querySelectorAll('.bar').forEach(bar => {
// const width = parseFloat(bar.style.width);
// if (width > 0) {
// bar.classList.add('is-active');
// } else {
// bar.classList.remove('is-active');
// }
// });
// });
//sj추가
$('.mn-popup-area').mnPopupSwiper();
$('.mn-visual').mnVisualSwiper();
$('.mn-course-area .course-area').mnCourseSwiper();
$('.img-swiper-area').imgSwiper();
$('.notice-swiper-area').noticeSwiper();
});