kjvstudy.org/kjvstudy_org/templates/chapter.html

{% extends "base.html" %}

{% block title %}{{ book }} {{ chapter }} - KJV Bible{% endblock %}

{% block head %}
<style>
.sidenote,
.marginnote {
    max-height: 150px;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s ease;
    position: relative;
}

.sidenote.expanded,
.marginnote.expanded {
    max-height: none;
    overflow: visible;
}

.sidenote.truncated:not(.expanded)::after,
.marginnote.truncated:not(.expanded)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #fffff8);
    pointer-events: none;
}

.marginnote {
    margin-top: 0.3rem;
    margin-bottom: 1rem;
}

@media (max-width: 760px) {
    .sidenote,
    .marginnote {
        max-height: 120px;
    }
}

hr {
    border: 0;
    height: 0;
    text-align: center;
    margin: 2em 0;
}

hr::before {
    content: "⁂";
    font-size: 1.5rem;
    letter-spacing: 0.6em;
    color: #111;
}

.verse-number-link {
    font-family: et-book-roman-old-style;
    font-size: 1rem;
    vertical-align: super;
    text-decoration: none;
    color: inherit;
    position: relative;
    top: -0.5rem;
    left: 0.1rem;
    margin-right: 0.2rem;
}

.verse-number-link:hover {
    color: #111;
    text-decoration: underline;
}
</style>
{% endblock %}

{% block content %}
<h1>{{ book }} {{ chapter }}</h1>
<p class="subtitle"><a href="/">Authorized King James Version</a></p>

{% if chapter_overview %}
<section>
    {{ chapter_overview|safe }}
</section>
<hr/>
{% endif %}

<section>
    {% for verse in verses %}
    {% set commentary = commentaries[verse.verse] if commentaries and verse.verse in commentaries else none %}
    <p id="verse-{{ verse.verse }}">
        <a href="/book/{{ book }}/chapter/{{ chapter }}/verse/{{ verse.verse }}" class="verse-number-link">{{ verse.verse }}</a> {{ verse.text }}
        {% if commentary and commentary.cross_references %}
            {% for ref in commentary.cross_references %}
            <label for="sn-{{ verse.verse }}-ref-{{ loop.index }}" class="margin-toggle">⊕</label>
            <input type="checkbox" id="sn-{{ verse.verse }}-ref-{{ loop.index }}" class="margin-toggle"/>
            <span class="marginnote"><strong><a href="{{ ref.url }}">{{ ref.text }}</a></strong>{% if ref.context %} — {{ ref.context }}{% endif %}</span>
            {% endfor %}
        {% endif %}
        {% if commentary and commentary.historical %}
        <label for="sn-{{ verse.verse }}-hist" class="margin-toggle">⊕</label>
        <input type="checkbox" id="sn-{{ verse.verse }}-hist" class="margin-toggle"/>
        <span class="marginnote"><em>Historical context:</em> {{ commentary.historical|safe }}</span>
        {% endif %}
    </p>
    {% endfor %}
</section>

<nav>
    <p>
        <a href="/book/{{ book }}">← {{ book }}</a>
        {% if chapter > 1 %} | <a href="/book/{{ book }}/chapter/{{ chapter - 1 }}">← Chapter {{ chapter - 1 }}</a>{% endif %}
        {% if chapter < chapters|length %} | <a href="/book/{{ book }}/chapter/{{ chapter + 1 }}">Chapter {{ chapter + 1 }} →</a>{% endif %}
    </p>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Function to link verse references
    function linkVerseReferences(element) {
        let html = element.innerHTML;

        // Match patterns like "Verse 1", "Verses 1-5", "verse 12", etc.
        html = html.replace(/\b(Verse|verse)s?\s+(\d+)(?:-(\d+))?\b/g, function(match, word, start, end) {
            if (end) {
                return '<a href="#verse-' + start + '-' + end + '">' + match + '</a>';
            } else {
                return '<a href="#verse-' + start + '">' + match + '</a>';
            }
        });

        element.innerHTML = html;
    }

    const sidenotes = document.querySelectorAll('.sidenote, .marginnote');

    // Make sidenotes and marginnotes expandable and link verse references
    sidenotes.forEach(function(sidenote) {
        // Check if content is actually truncated
        if (sidenote.scrollHeight > sidenote.clientHeight) {
            sidenote.classList.add('truncated');
        }

        sidenote.addEventListener('click', function(e) {
            // Don't expand if clicking a link
            if (e.target.tagName !== 'A') {
                this.classList.toggle('expanded');
            }
        });

        linkVerseReferences(sidenote);
    });

    // Also link verse references in chapter overview
    const chapterOverview = document.querySelector('section');
    if (chapterOverview) {
        linkVerseReferences(chapterOverview);
    }

    // Handle verse ranges in URL hash
    function highlightVerses() {
        const hash = window.location.hash.substring(1); // Remove the #
        if (hash.startsWith('verse-')) {
            const versePart = hash.substring(6); // Remove 'verse-'
            const rangeParts = versePart.split('-');

            if (rangeParts.length === 2) {
                // Verse range (e.g., verse-22-23)
                const start = parseInt(rangeParts[0]);
                const end = parseInt(rangeParts[1]);

                for (let i = start; i <= end; i++) {
                    const verseEl = document.getElementById('verse-' + i);
                    if (verseEl) {
                        verseEl.style.backgroundColor = 'rgba(255, 235, 59, 0.2)';
                    }
                }

                // Scroll to first verse
                const firstVerse = document.getElementById('verse-' + start);
                if (firstVerse) {
                    firstVerse.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            } else {
                // Single verse
                const verseEl = document.getElementById('verse-' + versePart);
                if (verseEl) {
                    verseEl.style.backgroundColor = 'rgba(255, 235, 59, 0.2)';
                    verseEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        }
    }

    highlightVerses();
    window.addEventListener('hashchange', highlightVerses);
});
</script>
{% endblock %}