Add nesting level depth option and styling.

Signed-off-by: TB <mathzeta2@gmail.com>
openscriptures · Jul 14, 2017 · 08773d4 · 08773d4
1 parent 37be643
commit 08773d4
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/structure/OshbVerse/Script/Structure.js b/structure/OshbVerse/Script/Structure.js
@@ -11,7 +11,8 @@
         "chapter": document.getElementById('chapter'),
         "verse": document.getElementById('verse'),
         "display": document.getElementById('display'),
-        "verseLayout": document.getElementById('verseLayout')
+        "verseLayout": document.getElementById('verseLayout'),
+        "levelDepth": document.getElementById('levelDepth')
     };
 // Utility functions.
     // Utility function to clear child nodes from an element.
@@ -99,6 +100,7 @@
         } else {
             elements.display.appendChild(markupVerse(verse, false));
         }
+        setLevelDepth();
     }
     // Gets the selected verse layout stylesheet.
     function getVerseLayout() {
@@ -123,6 +125,25 @@
         }
         getVerse();
     }
+    // Sets the visibility of the accents level up to depth.
+    function setLevelDepth() {
+        var i, depth = parseInt(elements.levelDepth.value);
+        if (depth < 0 || depth > 5) {
+            return;
+        }
+        for (i = 0; i <= depth; i++) {
+            var toShow = elements.display.getElementsByClassName("level" + i);
+            for (var j = 0; j < toShow.length; j++) {
+                toShow[j].style.removeProperty("border-style");
+            };
+        }
+        for (i = depth + 1; i <= 5; i++) {
+            var toHide = elements.display.getElementsByClassName("level" + i);
+            for (var j = 0; j < toHide.length; j++) {
+                toHide[j].style.borderStyle = "hidden";
+            }
+        }
+    }
     // Initialize.
     var initialChapter = elements.chapter.value - 1;
     var markupVerse = window.verseMarkupHorizontal;
@@ -131,5 +152,6 @@
     elements.chapter.onchange = setChapterFile;
     elements.verse.onchange = getVerse;
     elements.verseLayout.onchange = getVerseLayout;
+    elements.levelDepth.onchange = setLevelDepth;
     setChapters();
 })();
diff --git a/structure/OshbVerse/Style/PassageHorizontal.css b/structure/OshbVerse/Style/PassageHorizontal.css
@@ -18,7 +18,8 @@ section.passage span.level0, section.passage span.level1, section.passage span.l
     border: 2px solid transparent;
     border-top: none;
     border-radius: 0 0 1em 1em;
-    margin: 0.4ex 2px 3ex 2px;
+    margin: 0ex 1px 3ex 1px;
+    padding: 0px 2px;
 	display: inline-block;
     direction: rtl;
 	text-align: right;
@@ -50,7 +51,7 @@ section.passage span.level5
 }
 section.passage span.pad
 {
-    margin: 1px;
+    margin: 0px 0px 0.5ex 0px;
 	display: inline;
 	text-align: right;
 	float: right;

diff --git a/structure/OshbVerse/Style/VerseStyle.css b/structure/OshbVerse/Style/VerseStyle.css
@@ -47,7 +47,7 @@ nav
 {
     background-color: rgba(144, 207, 146, 0.75);
     border-bottom: 3px double #217438;
-    padding: 0 0.5em;
+    padding: 0.5ex 0.5em;
     color: crimson;
 }
 nav select

diff --git a/structure/OshbVerse/index.html b/structure/OshbVerse/index.html
@@ -71,6 +71,15 @@ <h1><span class="logo"><span>The OpenScriptures</span><br />Hebrew Bible</span>
                     <option value="vertical-bt">Vertical binary tree</option>
                     <option value="vertical">Vertical clean</option>
                 </select>
+                <label for="levelDepth">Depth</label>
+                <select id="levelDepth">
+                    <option selected="selected">5</option>
+                    <option>4</option>
+                    <option>3</option>
+                    <option>2</option>
+                    <option>1</option>
+                    <option>0</option>
+                </select>
             </form>
         </nav>
         <section id="work">