ruleset: nav bar, no results, some niceties, search stickiness (#229)

Author: purajit

templates/ruleset_filter.js

@@ -1,11 +1,15 @@
 const SEARCH_TAG_NAMES = ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
 const SEARCH_BAR_ID = "searchBar";
+const NO_RESULTS_DIV_ID = "ruleset-no-results";
+let NO_RESULTS_DIV = null;
 let RULESET_ELEMENTS = null;
 let NODE_MAP = null;
+let HEAD_NODE = "H0";
 
 function treeifyHeaders() {
   const stack = [{domNode: {tagName: "H0"}, children: [], parent: null}];
   const nodeMap = new Map();
+  nodeMap[HEAD_NODE] = stack[0];
   const rulesetElements = document.querySelectorAll(SEARCH_TAG_NAMES.join(","))
   for (const rulesetElement of rulesetElements) {
     const node = {
@@ -41,7 +45,11 @@ function filterRuleset() {
   if (filter == "") {
     RULESET_ELEMENTS.forEach(rulesetElement => {
       rulesetElement.classList.remove("hidden");
+      if (rulesetElement.tagName != "P") {
+        document.getElementById(`navigation-${rulesetElement.tagName}-${rulesetElement.id}`).classList.remove("hidden");
+      }
     });
+    NO_RESULTS_DIV.classList.remove("hidden");
     return;
   }
 
@@ -66,13 +74,58 @@ function filterRuleset() {
   RULESET_ELEMENTS.forEach(rulesetElement => {
     if (!toShow.has(rulesetElement)) {
       rulesetElement.classList.add("hidden");
+      if (rulesetElement.tagName != "P") {
+        document.getElementById(`navigation-${rulesetElement.tagName}-${rulesetElement.id}`).classList.add("hidden");
+      }
     } else {
       rulesetElement.classList.remove("hidden");
+      if (rulesetElement.tagName != "P") {
+        document.getElementById(`navigation-${rulesetElement.tagName}-${rulesetElement.id}`).classList.remove("hidden");
+      }
+    }
+  });
+
+  let allHidden = true;
+  RULESET_ELEMENTS.forEach(rulesetElement => {
+    if (!rulesetElement.classList.contains("hidden")) {
+      allHidden = false;
+    }
+  });
+
+  if (allHidden) {
+    NO_RESULTS_DIV.classList.remove("hidden");
+  } else {
+    NO_RESULTS_DIV.classList.add("hidden");
+  }
+
+}
+
+function generateList(headNodes) {
+  let list = `<ul>`;
+  headNodes.forEach(child => {
+    if (child.domNode.tagName != "P") {
+      list += `<li id="navigation-${child.domNode.tagName}-${child.domNode.id}"><a href="#${child.domNode.id}">${child.domNode.textContent}</a>${generateList(child.children)}</li>`;
+    }
+  });
+  return list + '</ul>';
+}
+
+function generateAnchors(headNodes) {
+  getAllChildren(NODE_MAP[HEAD_NODE]).forEach(rulesetElement => {
+    if (rulesetElement.domNode.tagName != "P") {
+      const anchor = rulesetElement.domNode.textContent
+                                   .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"")
+                                   .replace(/ /g, "-")
+                                   .toLowerCase();
+      rulesetElement.domNode.id = anchor;
     }
   });
 }
 
 window.onload = function() {
   [RULESET_ELEMENTS, NODE_MAP] = treeifyHeaders();
   document.getElementById(SEARCH_BAR_ID).addEventListener("input", filterRuleset);
+  generateAnchors();
+  document.getElementById("navigator").innerHTML = generateList(NODE_MAP[HEAD_NODE].children);
+  NO_RESULTS_DIV = document.getElementById(NO_RESULTS_DIV_ID);
 }

templates/template_ruleset.html

@@ -1,28 +1,70 @@
 {% include './header.html' %}
 <script>{% include './ruleset_filter.js' %}</script>
 <style>
+  #searchBarDiv {
+      position: sticky;
+      top: 0;
+      padding: 30px;
+      background: black;
+  }
   #searchBar {
     font-family: inherit;
     font-size: 40px;
     border: none;
     outline: none;
     padding: 10px;
     color: black;
-    background: #549171;
-    border-bottom: 5px solid #549171;
-    width: 100%;
-    margin-bottom: 30px;
+    background: #80BA50;
+    border-bottom: 5px solid transparent;
     border-radius: 10px 10px 0px 0px;
     transition: 0.3s;
+    opacity: 0.7;
+    width: calc(100% - 80px);
   }
   #searchBar:focus {
     color: black;
-    background: #80BA50;
     border-bottom: 5px solid #1B4D3E;
+    opacity: 1;
+  }
+  h1 {
+      width: calc(100% - 10px);
+      background: rgba(255, 255, 255, 0.1);
+      margin-bottom: 5px !important;
+      padding: 5px;
+  }
+  #contents {
+      margin-left: calc(var(--page-margin) * -1);
+      margin-right: calc(var(--page-margin) * -1);
+  }
+  #rulesetpage {
+      background: black;
+  }
+  #ruleset {
+      display: flex;
+      flex-direction: row;
+  }
+  .writing {
+      width: 100%;
+      padding: 0;
+      padding-right: 30px;
+      padding-bottom: 30px;
+  }
+  #navigator {
+      max-width: 370px;
+      margin-right: 30px;
   }
 </style>
-<div class="writing">
-  <input type="text" id="searchBar" placeholder="Search rules...">
-  {{ data }}
+<div id="rulesetpage">
+  <div id="searchBarDiv">
+    <input type="text" id="searchBar" placeholder="Search rules...">
+  </div>
+  <div id="ruleset">
+    <div id="navigator">
+    </div>
+    <div class="writing">
+      {{ data }}
+      <div id="ruleset-no-results">No results. Stop trying to make things up. No, the rules do not say that you're invincible, but good try.</div>
+    </div>
+  </div>
 </div>
 {% include './footer.html' %}