Created
September 21, 2024 10:20
-
-
Save kohki-shikata/dc666a07a82d541489eed71d2e1f73b3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 変数の初期設定 | |
| 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment