npm - json-bible - Versions diffs - 1.0.0 - Mend

json-bible 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/preview/bible.html ADDED Viewed

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>JSON Bible Preview</title>
+        <link rel="icon" type="image/png" href="../JSON_bible_icon.png" />
+        <link rel="stylesheet" href="style.css" />
+        <script type="importmap">
+            {
+                "imports": {
+                    "bible": "../dist/index.js"
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <header>
+            <h3 id="name"></h3>
+            <div class="search">
+                <input type="text" name="" id="bookSearch" placeholder="Book search... [John 3:16]" />
+                <input type="text" name="" id="textSearch" placeholder="Text search... [Jesus]" />
+            </div>
+        </header>
+        <div class="searchResults hidden"></div>
+        <div class="bible">
+            <div class="books">Loading...</div>
+            <div class="chapters"></div>
+            <div class="header"></div>
+            <div class="content">
+                <div class="invert">
+                    <button id="previous">←</button>
+                    <div class="verses"></div>
+                </div>
+                <button id="next">→</button>
+            </div>
+            <div class="footer"></div>
+        </div>
+        <!-- <mark> can be used to highlight verses! -->
+        <script src="domHelper.js"></script>
+        <script type="module">
+            import Bible from "bible"
+            const KJV_BIBLE = "https://api.npoint.io/a906dacba84513c298ce"
+            const bible = await Bible(KJV_BIBLE)
+            console.log("BIBLE:", bible)
+            const metadata = bible.getMetadata()
+            nameElem.innerHTML = `${metadata.title} (${bible.getAbbreviation()})`
+            footerElem.innerHTML = metadata.copyright || ""
+            // MAIN //
+            setBible()
+            function setBible() {
+                const hashed = location.hash.slice(1).split(".").filter(Boolean)
+                setBook(hashed[0], hashed[1])
+                const click = (id) => setBook(id)
+                const style = (a) => `border-bottom: 2px solid ${bible.getBook(a.number).getCategory().color}`
+                setHTML(booksElem, bible.data.books, (a) => a.name, { type: "book" }, click, style)
+            }
+            function setBook(bookId, chapterId) {
+                const book = bible.getBook(bookId)
+                const click = (id) => setChapter(bookId, id)
+                setHTML(chaptersElem, book.data.chapters, (a) => a.number, { type: "chapter" }, click)
+                // timeout to allow book elems to load before setting active
+                setTimeout(() => {
+                    setActive(booksElem, book.number)
+                    setChapter(bookId, chapterId || undefined)
+                })
+            }
+            function setChapter(bookId, chapterId) {
+                const book = bible.getBook(bookId)
+                const chapter = book.getChapter(chapterId)
+                headerElem.innerHTML = chapter.data.header || ""
+                versesElem.innerHTML = ""
+                createElement(versesElem, chapter.getVerses().getHTML(true), { type: "verse" })
+                // get all cross reference links
+                ;[...versesElem.querySelectorAll(".cross-ref-id")].forEach((elem) => {
+                    elem.addEventListener("click", () => {
+                        openReference(elem.id)
+                    })
+                })
+                location.hash = `${book.data.id}.${chapter.number}`
+                setActive(chaptersElem, chapter.number)
+            }
+            // NAVIGATE //
+            nextElem.addEventListener("click", () => nextOrPrevious(true))
+            previousElem.addEventListener("click", () => nextOrPrevious(false))
+            function nextOrPrevious(next) {
+                let currentBookNumber = getActiveId(booksElem)
+                let currentChapterNumber = getActiveId(chaptersElem)
+                const chapter = bible.getBook(currentBookNumber).getChapter(currentChapterNumber)
+                const ref = next ? chapter.getNext() : chapter.getPrevious()
+                if (ref) setBook(ref.book, ref.chapter)
+            }
+            // SEARCH //
+            bookSearch.addEventListener("input", (e) => {
+                let value = e.target.value
+                const searchResult = bible.bookSearch(value)
+                console.log("BOOK SEARCH:", searchResult)
+                e.target.value = searchResult.autocompleted
+                if (searchResult.book) setBook(searchResult.book, searchResult.chapter)
+            })
+            textSearch.addEventListener("change", (e) => {
+                let value = e.target.value
+                if (value) hideElem(bibleElem, searchResultsElem)
+                else hideElem(searchResultsElem, bibleElem)
+                const searchResults = bible.textSearch(value, 100)
+                console.log("TEXT SEARCH:", searchResults)
+                if (!searchResults.length) {
+                    searchResultsElem.innerHTML = "No results!"
+                    return
+                }
+                setHTML(searchResultsElem, searchResults, (a) => `<b>${a.reference}</b> ${a.verse.text}`, { type: "searchItem" }, openReference)
+            })
+            function openReference(id) {
+                const ref = bible.getFromReference(id)[0]
+                if (!ref) return
+                textSearch.value = ""
+                hideElem(searchResultsElem, bibleElem)
+                setBook(ref.book, ref.chapter)
+            }
+        </script>
+    </body>
+</html>

package/preview/domHelper.js ADDED Viewed

@@ -0,0 +1,60 @@
+// ELEMENTS //
+const nameElem = document.querySelector("#name")
+const bookSearch = document.querySelector("#bookSearch")
+const textSearch = document.querySelector("#textSearch")
+const searchResultsElem = document.querySelector(".searchResults")
+const bibleElem = document.querySelector(".bible")
+const booksElem = document.querySelector(".books")
+const chaptersElem = document.querySelector(".chapters")
+const versesElem = document.querySelector(".verses")
+const headerElem = document.querySelector(".header")
+const footerElem = document.querySelector(".footer")
+const previousElem = document.querySelector("#previous")
+const nextElem = document.querySelector("#next")
+// HTML UPDATE //
+function setHTML(parentElem, content, text, { type }, click, style) {
+    parentElem.innerHTML = ""
+    content.forEach((a) => {
+        const id = a.number ?? a.id
+        const elem = createElement(parentElem, text(a), { type, id })
+        if (style) elem.style = style(a)
+        elem.addEventListener("click", () => {
+            click(id)
+            setActive(parentElem, elem)
+        })
+    })
+}
+function createElement(parentElem, html, { type, id }) {
+    const elem = document.createElement("div")
+    if (type) elem.classList.add(type)
+    if (id) elem.id = "_" + id
+    elem.innerHTML = html
+    parentElem.appendChild(elem)
+    return elem
+}
+function setActive(parentElem, idOrElem) {
+    parentElem.querySelector(".active")?.classList.remove("active")
+    if (idOrElem === undefined) parentElem.children[0]?.classList.add("active")
+    else if (typeof idOrElem === "number" || typeof idOrElem === "string") parentElem.querySelector("#_" + idOrElem)?.classList.add("active")
+    else idOrElem?.classList.add("active")
+}
+function hideElem(elem, revealElem) {
+    elem?.classList.add("hidden")
+    revealElem?.classList.remove("hidden")
+}
+function getActiveId(parentElem) {
+    return parentElem.querySelector(".active")?.id.slice(1)
+}

package/preview/style.css ADDED Viewed

@@ -0,0 +1,216 @@
+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 1.1em;
+    background-color: #fff9ee;
+}
+input,
+button {
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    background-color: inherit;
+    user-select: none;
+    border: 1px solid black;
+    border-radius: 2px;
+    padding: 3px 8px;
+}
+input::placeholder {
+    opacity: 0.7;
+    font-size: 0.9em;
+}
+.active {
+    text-decoration: underline;
+    background-color: rgb(0 0 0 / 0.08);
+}
+.hidden {
+    display: none !important;
+}
+/* MAIN */
+header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 20px 10vw;
+    background-color: rgb(0 0 0 / 8%);
+}
+.bible {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 30px 10vw;
+}
+.books,
+.chapters {
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+}
+.chapters {
+    margin-bottom: 20px;
+}
+.books div,
+.chapters div {
+    padding: 5px;
+    min-width: 24px;
+    text-align: center;
+    /* font-family: monospace; */
+    user-select: none;
+}
+.books div {
+    white-space: nowrap;
+    padding: 5px 8px;
+    /* flex: 1; */
+}
+.content,
+.invert {
+    display: flex;
+    /* align-items: center; */
+    gap: 20px;
+}
+button {
+    background-color: transparent;
+    border: none;
+    font-family: monospace;
+    font-size: 2.5em;
+}
+.header,
+.footer {
+    text-align: center;
+}
+.verse {
+    font-size: 1.2em;
+    font-family: "Times New Roman", Times, serif;
+}
+.number {
+    font-weight: bold;
+    user-select: none;
+}
+.number.big {
+    font-size: 2em;
+}
+.uncertain {
+    font-style: italic;
+    opacity: 0.8;
+}
+h4 {
+    text-align: center;
+    padding: 20px 0;
+}
+.cross-ref {
+    position: relative;
+}
+.cross-ref::before {
+    content: "*";
+    padding: 0 2px;
+    color: blue;
+}
+.cross-ref .content {
+    position: absolute;
+    bottom: 5px;
+    left: 0;
+    transform: translateY(100%);
+    display: block;
+    background-color: rgb(0 0 0 / 0.6);
+    color: white;
+    border-radius: 8px;
+    padding: 8px 10px;
+    min-width: 130px;
+    transition: opacity 0.2s;
+    opacity: 0;
+    pointer-events: none;
+}
+.cross-ref:hover > .content {
+    opacity: 1;
+    pointer-events: inherit;
+}
+.cross-ref-id {
+    text-decoration: underline;
+    cursor: pointer;
+}
+/* SEARCH */
+.searchResults {
+    display: flex;
+    flex-direction: column;
+    margin: 30px 10vw;
+}
+.searchResults div {
+    padding: 8px 12px;
+}
+/* HOVER */
+button,
+.books div,
+.chapters div,
+.searchResults div {
+    cursor: pointer;
+    transition: background-color 0.2s;
+    border-radius: 2px;
+}
+button:hover,
+.books div:hover,
+.chapters div:hover,
+.searchResults div:hover {
+    background-color: rgb(0 0 0 / 0.1);
+}
+/* MEDIA */
+@media only screen and (max-width: 800px) {
+    .content {
+        flex-wrap: wrap;
+        gap: 0;
+        position: relative;
+    }
+    .invert {
+        flex-direction: column-reverse;
+    }
+    .verses {
+        width: 100%;
+    }
+    .content button {
+        width: 50%;
+    }
+    .content #next {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "module": "es2022",
+        "target": "es2022",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "declaration": true,
+        "outDir": "dist"
+    }
+}