FAQ

h1. FVS 슬라이더

<pre>

"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 뒤에 실행

</pre>