Add the javascript hooks for handling the new railroad grammar

This adds the hooks to toggle the visibility of the railroad grammar.
The status is stored in localstorage to keep it sticky.

Author: ehuss

theme/reference.js

@@ -22,3 +22,52 @@ function spec_toggle_tests(rule_id) {
         el.classList.remove('popup-hidden');
     }
 }
+
+function toggle_grammar() {
+    const grammarRailroad = get_railroad();
+    set_railroad(!grammarRailroad);
+    update_railroad();
+}
+
+function get_railroad() {
+    let grammarRailroad = null;
+    try {
+        grammarRailroad = localStorage.getItem('grammar-railroad');
+    } catch (e) {
+        // Ignore error.
+    }
+    grammarRailroad = grammarRailroad === 'true' ? true : false;
+    return grammarRailroad;
+}
+
+function set_railroad(newValue) {
+    try {
+        localStorage.setItem('grammar-railroad', newValue);
+    } catch (e) {
+        // Ignore error.
+    }
+}
+
+function update_railroad() {
+    const grammarRailroad = get_railroad();
+    const railroads = document.querySelectorAll('.grammar-railroad');
+    railroads.forEach(element => {
+        if (grammarRailroad) {
+            element.classList.remove('grammar-hidden');
+        } else {
+            element.classList.add('grammar-hidden');
+        }
+    });
+    const buttons = document.querySelectorAll('.grammar-toggle');
+    buttons.forEach(button => {
+        if (grammarRailroad) {
+            button.innerText = "Hide Railroad";
+        } else {
+            button.innerText = "Show Railroad";
+        }
+    });
+}
+
+(function railroad_onload() {
+    update_railroad();
+})();