Improved literate commenting on rule.html

_layouts/rule.html

@@ -1,10 +1,12 @@
 ---
 layout: default
+# This is where most of the code for CommunityRule lives
+# Follow comments below in various sections for further explanation
 ---
 
 <style type="text/css">
 /* CLASSES */
-.editable {
+.editable { /* All editable fields */
     padding: 10px 10px 10px 10px;
     min-height: 1.5em;
     font-family: serif;
@@ -13,7 +15,10 @@ layout: default
 .question {
     color: gray;
 }
-  /* TOOLTIP https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right */
+
+/* TOOLTIP
+   https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right 
+   This could bear substantial improvement. */
 .button {
   position: relative;
   display: inline-block;
@@ -38,9 +43,14 @@ layout: default
   z-index: 1;
   right: 100%;
 }
+.button:hover {
+    background-color: lightgray;
+}
 .button:hover .tooltiptext {
     visibility: visible;
-  }
+}
+/* pushButton
+These are the major functional buttons*/
 .pushButton {
   border: 1px solid gray;
   color: gray;
@@ -50,14 +60,17 @@ layout: default
   padding: 5px;
   font-size: 1.2em;
 }
-.plus {
+.pushButton:hover {
+    background-color: lightgray;
+}
+.plus { /* The maximize/minimize button */
     font-size: 1em;
 }
 .icons {
     /* icons are from https://github.com/tabler/tabler-icons */
     margin: 0 5px 0 0;
 }
-/* IDs */
+/* Various IDs */
 #rulebox {
     border: 1px solid lightgray;
     padding: 20px;
@@ -91,6 +104,11 @@ layout: default
 </style>
 
 <script>
+  // Enter JavaScript-land!
+  // First, some functions, followed by initialization commands
+  
+  // toggleVisible(id)
+  // Toggles the visibility of a given element by given ID
   function toggleVisible(id) {
       var x = document.getElementById(id);
       if (x.style.display === "none") {
@@ -100,13 +118,18 @@ layout: default
       }
   }
 
+  // classDisplayAll(className, value)
+  // Assigns given display value to all elements with a given className
   function classDisplayAll(className, value) {
       var elements = document.getElementsByClassName(className);
       for (var i = 0; i < elements.length; i++) {
           elements[i].style.display = value;
       } 
   }
-  
+
+  // toggleEditMode()
+  // Toggles whether editable fields are editable or not
+  // and removes editing tools.
   function toggleEditMode() {
       if (editMode === true) {
           editMode = false;
@@ -137,6 +160,9 @@ layout: default
       }
   }
 
+  // toggleDisplayMode()
+  // toggles full displayMode, the Rule-only display for a published Rule
+  // first, initialize variable:
   var displayMode = false;
   function toggleDisplayMode() {
       if (displayMode == false) {
@@ -161,6 +187,8 @@ layout: default
       }
   }
 
+  // textOutput()
+  // Produces Markdown rendition of Rule
   function textOutput() {
       var filename = 'CommunityRule.txt';
       var content = '# CommunityRule: ' + document.getElementById('communityname').innerHTML + '\n\n';
@@ -195,8 +223,8 @@ layout: default
   }
 
   // BEGIN Publish tools, via SteinHQ.com
-  // TKTK https://docs.steinhq.com/authentication
 
+  // publishRule()
   // Publishes existing fields to new page, /create/?rule=[ruleID]
   // Opens new page in Display mode
   function publishRule() {
@@ -221,6 +249,7 @@ layout: default
       });
   }
 
+  // displayRule(ID)
   // Displays content based on ID
   function displayRule(ID) {
       const store = new SteinStore(
@@ -246,12 +275,15 @@ layout: default
   // END Publish tools
   
   // FINALLY, Page loading
+  // First, grab the current URL
   var urlParams = new URLSearchParams(window.location.search);
+  // Determine if it is a published Rule
   if (urlParams.has('r')) {
+      // If so, grab the Rule from database and enter displayMode
       var rID = urlParams.get('r');
       displayRule(rID);
   } else {
-      // open in editMode as default
+      // Otherwise, open in editMode as default
       var editMode = true;
       // switch out of editMode in special cases
       window.onload = function() {