diff options
Diffstat (limited to 'script.js')
| -rw-r--r-- | script.js | 165 |
1 files changed, 165 insertions, 0 deletions
diff --git a/script.js b/script.js new file mode 100644 index 0000000..5548570 --- /dev/null +++ b/script.js @@ -0,0 +1,165 @@ +let showTranslations = true; +let showHighlights = true; + +const caryPassages = window.caryData; +const longfellowPassages = window.longfellowData; +const nortonPassages = window.nortonData; +const cantos = window.cantosData; +const highlighting = window.highlightingData; + +function highlightMatchingLines(translationName, canto, lineNumber) { + if (!showHighlights) return; + clearHighlights(); + const matching = highlighting[canto]; + if (!matching) return; + + let translationIndex; + if (translationName === 'cary') { + translationIndex = 0; + } else if (translationName === 'longfellow') { + translationIndex = 1; + } else if (translationName === 'norton') { + translationIndex = 2; + } + + let matchingLineGroup = null; + const allLineGroups = Object.values(matching); + for (let i = 0; i < allLineGroups.length; i++) { + const lineGroup = allLineGroups[i]; + const lineReference = lineGroup[translationIndex]; + const lineNumbers = parseLineReference(lineReference); + if (lineNumbers.includes(lineNumber)) { + matchingLineGroup = lineGroup; + break; + } + } + if (!matchingLineGroup) return; + + const translationNames = ['cary', 'longfellow', 'norton']; + for (let i = 0; i < matchingLineGroup.length; i++) { + const lineReference = matchingLineGroup[i]; + if (lineReference === null) continue; + const lineNumbers = parseLineReference(lineReference); + for (let j = 0; j < lineNumbers.length; j++) { + const lineId = getLineId(translationNames[i], canto, lineNumbers[j]); + const lineElement = document.getElementById(lineId); + if (lineElement) lineElement.classList.add('highlighted'); + } + } +} + +function renderCantos() { + const container = document.getElementById('cantos-container'); + const select = document.getElementById('cantoSelect'); + if (!cantos || !caryPassages || !longfellowPassages || !nortonPassages || !highlighting) { + container.innerHTML = '<div class="error">Failed to load required data files</div>'; + return; + } + + let html = ''; + for (let i = 0; i < 34; i++) { + const canto = cantos[i]; + const cantoNumber = canto.number.toString(); + const option = document.createElement('option'); + option.value = canto.number; + option.textContent = 'Canto ' + canto.number; + select.appendChild(option); + + html += `<div class="canto" id="canto-${canto.number}">`; + html += '<div class="canto-header">'; + html += `<div class="canto-title">${canto.title}</div>`; + html += `<div class="canto-subtitle">${canto.subtitle}</div>`; + html += '</div>'; + + html += '<div class="translations">'; + html += '<div class="translation"><h4>Cary Translation</h4>'; + if (caryPassages[cantoNumber]) { + for (let lineIndex = 0; lineIndex < caryPassages[cantoNumber].length; lineIndex++) { + const line = caryPassages[cantoNumber][lineIndex]; + const lineId = getLineId('cary', cantoNumber, lineIndex); + html += '<div class="line" id="' + lineId + '" '; + html += `onmouseenter="highlightMatchingLines('cary', '${cantoNumber}', ${lineIndex})"`; + html += 'onmouseleave="clearHighlights()">' + line + '</div>'; + } + } + html += '</div>'; + + html += '<div class="translation"><h4>Longfellow Translation</h4>'; + if (longfellowPassages[cantoNumber]) { + for (let lineIndex = 0; lineIndex < longfellowPassages[cantoNumber].length; lineIndex++) { + const line = longfellowPassages[cantoNumber][lineIndex]; + const lineId = getLineId('longfellow', cantoNumber, lineIndex); + html += '<div class="line" id="' + lineId + '" '; + html += `onmouseenter="highlightMatchingLines('longfellow', '${cantoNumber}', ${lineIndex})"`; + html += 'onmouseleave="clearHighlights()">' + line + '</div>'; + } + } + html += '</div>'; + + html += '<div class="translation"><h4>Norton Translation</h4>'; + if (nortonPassages[cantoNumber]) { + for (let lineIndex = 0; lineIndex < nortonPassages[cantoNumber].length; lineIndex++) { + const line = nortonPassages[cantoNumber][lineIndex]; + const lineId = getLineId('norton', cantoNumber, lineIndex); + html += '<div class="line" id="' + lineId + '" '; + html += `onmouseenter="highlightMatchingLines('norton', '${cantoNumber}', ${lineIndex})"`; + html += `onmouseleave="clearHighlights()">${line}</div>`; + } + } + html += '</div></div>'; + + html += '<div class="commentary">'; + html += `<div class="commentary"><h4>Subtext</h4><p>${canto.subtext}</p></div>`; + html += `<div class="commentary"><h4>Themes</h4><p>${canto.themes}</p></div>`; + html += `<div class="commentary"><h4>References</h4><p>${canto.references}</p></div>`; + html += `<div class="commentary"><h4>Characters</h4><p>${canto.characters}</p></div>`; + html += '</div></div>'; + } + container.innerHTML = html; +} + +function getLineId(translation, canto, lineIndex) { + return `${translation}-${canto}-${lineIndex}`; +} + +function clearHighlights() { + const highlighted = document.querySelectorAll('.line.highlighted'); + for (let i = 0; i < highlighted.length; i++) { + highlighted[i].classList.remove('highlighted'); + } +} + +function parseLineReference(lineRef) { + if (typeof lineRef === 'number') return [lineRef]; + const parts = lineRef.split('-'); + const start = parseInt(parts[0]); + const end = parseInt(parts[1]); + const lines = []; + for (let i = start; i <= end; i++) { + lines.push(i); + } + return lines; +} + +function toggleTranslations() { + const translations = document.getElementsByClassName('translations'); + const button = document.getElementById('translationToggle') + showTranslations = !showTranslations; + for (let i = 0; i < translations.length; i++) { + translations[i].style.display = showTranslations ? 'grid' : 'none'; + } + button.textContent = showTranslations ? "Hide All Translations" : "Show All Translations" +} + +function toggleHighlighting() { + const button = document.getElementById('highlightToggle'); + showHighlights = !showHighlights; + if (!showHighlights) clearHighlights(); + button.textContent = showHighlights ? "Disable Highlighting" : "Enable Highlighting" +} + +document.getElementById('cantoSelect').onchange = function() { + if (this.value) document.getElementById('canto-' + this.value).scrollIntoView(); +}; + +document.addEventListener('DOMContentLoaded', renderCantos());
\ No newline at end of file |