FVS 슬라이더¶

"use document";
// 초기 설정
let currentChart = ''; // 현재 표시 중인 차트 ID
let mouseOnChart = false; // 마우스가 현재 차트 위에 있는지 여부
let chartArr = []; // 차트 배열

// 동적 초기 값 설정 모듈
const setupInitialValues = (charts, defaultChartId) => {
 chartArr = charts;
 currentChart = defaultChartId;
};

// 타겟 잡는 모듈
const targetChart = (chartId) => chartArr.findIndex(item => item === chartId);

// 슬라이딩 돌리는 모듈
const toggleCharts = () => {
 const currentIndex = targetChart(currentChart);
 const nextIndex = (currentIndex + 1) % chartArr.length;
 const nextChart = chartArr[nextIndex];

 duchamp.getWidgetByName(currentChart).setVisible(false);
 duchamp.getWidgetByName(nextChart).setVisible(true);
 currentChart = nextChart;
};

// 인터벌 제어 모듈
let intervalId;
const intervalTime = 1000; // 인터벌 시간 (1초)

const startInterval = (callback, interval) => {
 clearInterval(intervalId); // 기존 인터벌이 있으면 중지
 intervalId = setInterval(callback, interval);
};

const stopInterval = () => {
 clearInterval(intervalId);
 console.log("인터벌이 중지되었습니다.");
};

const intervalCallback = () => {
 toggleCharts();
 toggleManage(); // 슬라이더 상태 동기화
};

const toggleManage = () => {
 if (mouseOnChart) {
 stopInterval();
 } else {
 startInterval(intervalCallback, intervalTime);
 }
};

// 이벤트 처리 모듈
const setupMouseEvents = () => {
 document.querySelectorAll("[data-name^='chart']").forEach(element => {
 element.addEventListener('mouseover', () => {
 mouseOnChart = true;
 toggleManage();
 });
 element.addEventListener('mouseout', () => {
 mouseOnChart = false;
 toggleManage();
 });
 });
};

// 초기화 모듈
const initialize = (charts, defaultChartId) => {
 setupInitialValues(charts, defaultChartId);
 setupMouseEvents();
 startInterval(intervalCallback, intervalTime);
}

// 페이지 로드 후 초기화 실행
setTimeout(() => {
 initialize(['chart2', 'chart3'], 'chart2'); // 초기 차트 배열과 기본 차트 ID를 설정
}, 200); // 페이지 로딩 후 200ms 뒤에 실행