Add prev and next chapter navigation

app.py

@@ -26,7 +26,8 @@ TODO:
 Replace send_file with something that loads headers and nav templates
 Search phrase alias dictionary
 Response Bible book reading
-*Search highlighting
+*Forward and Backward Navigation ** add to rich responses
+Search highlighting
 Styles
 Bible Reading Plan
 Bible Reader
@@ -43,14 +44,26 @@ cached = {
     "book_names": [
         i[0] for i in kjv_cur.execute("SELECT n FROM key_english").fetchall()
     ],
+    "chapter_list": [],
     "json_dictionary": json.load(open("data/1828_Webster_KJV.json", "r")),
     "html_response": open("html/response.html", "r").read(),
     "html_navbar": open("html/navbar.html", "r").read(),
+    "css_navbar": open("styles/header.css", "r").read(),
+    "js_navbar": open("js/header.js", "r").read(),
     "css_response": open("styles/human_readable.css", "r").read(),
     "css_collapsible": open("styles/collapsible.css", "r").read(),
     "js_collapsible": open("js/collapsible.js", "r").read(),
 }
 
+# Fill the chapter list with unique chapters for seeking back and forward by index.
+#TODO Fix string-based..? sorting problem
+[
+    cached["chapter_list"].append(int(str(chap)[:-3]))
+    for chap in cached.get("verse_ids")
+    if int(str(chap)[:-3]) not in cached["chapter_list"]
+]
+cached["chapter_list"].sort()
+
 
 def build_html_reponse():
     html = ""
@@ -110,6 +123,31 @@ def get_verse_id(book_id, chapter, verse):
     return str(book_id) + chapterid + verseid
 
 
+def get_next_prev_chapter(verseid):
+    current_chapter = verseid[:-3]
+    current_chapter_index = cached["chapter_list"].index(int(current_chapter))
+    
+    #next_chapter_id = str(cached["chapter_list"][current_chapter_index + 1])
+    next_chapter_id = str(cached["chapter_list"][(current_chapter_index + 1) % len(cached["chapter_list"])])
+    #prev_chapter_id = str(cached["chapter_list"][current_chapter_index - 1])
+    prev_chapter_id = str(cached["chapter_list"][(current_chapter_index - 1) % len(cached["chapter_list"])])
+    next_chapter_name = " ".join(
+        (lookup_bookname(next_chapter_id[:-3]), str(next_chapter_id[-3:]).lstrip("0"))
+    )
+    prev_chapter_name = " ".join(
+        (lookup_bookname(prev_chapter_id[:-3]), str(prev_chapter_id[-3:]).lstrip("0"))
+    )
+    next_chapter_link = f"/show?kw={next_chapter_name}&view=rich"
+    prev_chapter_link = f"/show?kw={prev_chapter_name}&view=rich"
+    result = {
+        "prev_chapter_name": prev_chapter_name,
+        "prev_chapter_link": prev_chapter_link,
+        "next_chapter_name": next_chapter_name,
+        "next_chapter_link": next_chapter_link,
+    }
+    return result
+
+
 def ref_input_cleaning(
     ref, valid_chars=(string.ascii_letters + string.digits + ":-,"), ref_search=True
 ):
@@ -363,8 +401,19 @@ def response_single(scripture):
     if arg_view == "plain":
         return response_text(scripture)
     elif arg_view == "rich":
+        l_r_nav = get_next_prev_chapter(
+            str(scripture[0])
+        )  # get the first scripture, the id thereof
         return (
-            cached["html_navbar"].format(query=request.args.get("kw", ""))
+            cached["html_navbar"].format(
+                query=request.args.get("kw", ""),
+                next_chapter_name=l_r_nav["next_chapter_name"],
+                next_chapter_link=l_r_nav["next_chapter_link"],
+                prev_chapter_name=l_r_nav["prev_chapter_name"],
+                prev_chapter_link=l_r_nav["prev_chapter_link"],
+            )
+            + cached["js_navbar"]
+            + cached["css_navbar"]
             + cached["css_response"]
             + response_rich(scripture)
         )
@@ -381,8 +430,22 @@ def response_multi(scriptures):
         for scripture in scriptures:
             response.append(response_text(scripture))
     elif arg_view == "rich":
+        l_r_nav = get_next_prev_chapter(
+            str(scriptures[0][0])
+        )  # get the first scripture, the id thereof
         response.append(cached["css_response"])
-        response.append(cached["html_navbar"].format(query=request.args.get("kw", "")))
+        response.append(
+            cached["html_navbar"].format(
+                query=request.args.get("kw", ""),
+                next_chapter_name=l_r_nav["next_chapter_name"],
+                next_chapter_link=l_r_nav["next_chapter_link"],
+                prev_chapter_name=l_r_nav["prev_chapter_name"],
+                prev_chapter_link=l_r_nav["prev_chapter_link"],
+            )
+        )
+
+        response.append(cached["css_navbar"])
+        response.append(cached["js_navbar"])
         for scripture in scriptures:
             response.append(response_rich(scripture))
     else:
@@ -518,7 +581,9 @@ def sequential_read(start=0, num=1, uid=None, getuid=False):
         except sqlite3.OperationalError:
             logging.error(f"UID Database failed to insert {uid} into reading_tracker.")
             return jsonify(
-                {"error": "Something went wrong with the UID database. Check permissions?"}
+                {
+                    "error": "Something went wrong with the UID database. Check permissions?"
+                }
             )
         seq_conn.commit()
         logging.info(f"Created new SEQ UID: {uid}")
@@ -557,4 +622,4 @@ def sequential_read(start=0, num=1, uid=None, getuid=False):
 
 if __name__ == "__main__":
     print("You must run this program within a uwsgi environment.")
-    #app.run(host="127.0.0.1", port=1612)
+    # app.run(host="127.0.0.1", port=1612)

html/navbar.html

@@ -1,9 +1,14 @@
+<div class="header" id="NavHeader">
 <header>
-<form action="/find">
+    <a href="{prev_chapter_link}">{prev_chapter_name}</a> |
- <input type="text" name="kw" value="{query}">
+    <a href="{next_chapter_link}">{next_chapter_name}</a>
- <input type="hidden" name="view" value="rich"">
+    <form action="/find">
- <input type="submit" value="Search">
+        <input type="text" name="kw" value="{query}">
-<form>
+        <input type="hidden" name="view" value="rich"">
-<a href="/">Home</a> | <a href="/find">Quick Search</a> | 
+        <input type="submit" value="Search">
-<a href="/random?view=rich">Random Verse</a> | 
+    </form>
-<a href="/votd?view=rich">Verse of the Day</a></header>
+    <a href="/">Home</a> | <a href="/find">Quick Search</a> | 
+    <a href="/random?view=rich">Random Verse</a> | 
+    <a href="/votd?view=rich">Verse of the Day</a>
+</header>
+</div>

js/header.js

@@ -0,0 +1,19 @@
+<script>
+// When the user scrolls the page, execute myFunction
+window.onscroll = function() {headerscroll()};
+
+// Get the header
+var header = document.getElementById("NavHeader");
+
+// Get the offset position of the navbar
+var sticky = header.offsetTop;
+
+// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
+function headerscroll() {
+  if (window.pageYOffset > sticky) {
+    header.classList.add("sticky");
+  } else {
+    header.classList.remove("sticky");
+  }
+}
+</script>

styles/header.css

@@ -0,0 +1,25 @@
+<style>
+/* Style the header */
+.header {
+    padding: 10px 16px;
+    background: #555;
+    color: #f1f1f1;
+  }
+  
+  /* Page content */
+  .content {
+    padding: 16px;
+  }
+  
+  /* The sticky class is added to the header with JS when it reaches its scroll position */
+  .sticky {
+    position: fixed;
+    top: 0;
+    width: 100%
+  }
+  
+  /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
+  .sticky + .content {
+    padding-top: 102px;
+  }
+  </style>