highlightLine.js

// 変数の初期設定
let currentIndex = 0;
const lines = document.querySelectorAll('.main-article h2, .main-article p');

// 行にハイライトを追加する関数
function highlightLine(lineIndex) {
    lines.forEach(line => line.classList.remove('kaisei-active'));

    // 条件に合った行にハイライトを追加
    if (lineIndex >= 0 && lineIndex < lines.length) {
        lines[lineIndex].classList.add('kaisei-active');
    }

    // ハイライトに丸を作成
    const existingCircle = document.querySelector('.kaisei-circle');
    if (existingCircle) {
        existingCircle.remove();
    }

    if (lineIndex + 1 < lines.length) {
        const circle = document.createElement('div');
        circle.className = 'kaisei-circle';
        circle.style.top = `${lines[lineIndex + 1].offsetTop + (lines[lineIndex + 1].offsetHeight - 10) / 2}px`;
        document.querySelector('.main-article').appendChild(circle);
}

// 行送りボタンの処理
document.getElementById('nextButton').addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % lines.length;
    highlightLine(currentIndex);
});

document.getElementById('prevButton').addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + lines.length) % lines.length;
    highlightLine(currentIndex);
});

// セレクションモードのトグル処理
document.getElementById('toggleSelectionMode').addEventListener('click', () => {
    document.querySelector('.kaisei-control').classList.toggle('active');
});

// 初期ハイライトの設定
highlightLine(currentIndex);