Add GUI to test server

What is the previous behavior before this PR? modify settings manually by editing the URL. lack of GUI support for both boolean options and options that need text input What is the new behavior after this PR? show KaTeX options menu for the test server below the permalink button Closes #1225
KaTeX · Sep 29, 2023 · 82444a6 · 82444a6
1 parent 4f1d916
commit 82444a6
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 13 deletions.
diff --git a/static/index.html b/static/index.html
@@ -1,17 +1,75 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="UTF-8">
-        <title>KaTeX Test</title>
-        <script defer src="/main.js" type="text/javascript"></script>
-    </head>
-    <body>
-        <textarea id="input" rows="5">
+<!-- referenced from issue #1615 -->
+<head>
+    <meta charset="UTF-8">
+    <title>KaTeX Test</title>
+    <script defer src="/main.js" type="text/javascript"></script>
+</head>
+
+<body>
+    <textarea id="input" rows="5">
 \left( x \right) \left( x^2 \right) % comment
 \left( \frac{a}{b} \right) \left( \frac{a^2}{b} \right)
 \left( \dfrac{a}{b} \right) \left( \dfrac{a^2}{b} \right)
-        </textarea>
-        <div id="math"></div>
-        <input id="permalink" type="button" value="permalink">
-    </body>
-</html>
+  </textarea>
+    <div id="math"></div>
+    <input id="permalink" type="button" value="permalink">
+    <div id="options-panel">
+        <h3>KaTeX Options</h3>
+        <table>
+            <tr>
+                <td><label for="displayMode">displayMode</label></td>
+                <td><input type="checkbox" id="displayMode" checked /></td>
+            </tr>
+            <tr>
+                <td><label for="leqno">leqno</label></td>
+                <td><input type="checkbox" id="leqno" /></td>
+            </tr>
+            <tr>
+                <td><label for="fleqn">fleqn</label></td>
+                <td><input type="checkbox" id="fleqn" /></td>
+            </tr>
+            <tr>
+                <td><label for="throwOnError">throwOnError</label></td>
+                <td><input type="checkbox" id="throwOnError" checked /></td>
+            </tr>
+            <tr>
+                <td><label for="errorColor">errorColor</label></td>
+                <td><input type="color" id="errorColor" value="#cc0000" /></td>
+            </tr>
+            <tr>
+                <td><label for="strict">strict</label></td>
+                <td>
+                    <select id="strict">
+                        <option value="error">error</option>
+                        <option value="warn" selected>warn</option>
+                        <option value="ignore">ignore</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td><label for="output">output</label></td>
+                <td>
+                    <select id="output">
+                        <option value="htmlAndMathml" selected>htmlAndMathml</option>
+                        <option value="html">html
+
+                        <option value="mathml">mathml</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td><label for="trust">trust</label></td>
+                <td><input type="checkbox" id="trust" /></td>
+            </tr>
+        </table>
+        <h4><label for="macros">macros</label></h4>
+        <textarea id="macros" placeholder="JSON">
+        {
+            "\\f": "#1f(#2)"
+        }</textarea>
+    </div>
+</body>
+
+</html>
diff --git a/static/main.js b/static/main.js
@@ -14,7 +14,7 @@ function init() {
     input.addEventListener("input", reprocess, false);
     permalink.addEventListener("click", setSearch);
 
-    const options = {displayMode: true, throwOnError: true, trust: true};
+    let options = {displayMode: true, throwOnError: true, trust: true};
     const macros = {};
     const query = queryString.parse(window.location.search);
 
@@ -85,15 +85,80 @@ function init() {
         }
     });
 
+    // This sets default values
+    // Initialize an empty array to store the options as strings
+    const optionElements = [];
+
+    // Init array with ids of each option
+    const optionIds = ["displayMode", "leqno", "fleqn", "throwOnError",
+        "errorColor", "strict", "output", "trust", "macros"];
+
+    // Loop through each option ID
+    for (const id of optionIds) {
+
+        const element = document.getElementById(id);
+        // If value of element changes, call reprocess function
+        element.addEventListener("change", reprocess);
+        if (element.type === "checkbox") {
+            // if checkbox set its checked state based on options[id]
+            element.checked = options[id];
+        } else if (options[id]) {
+            // If id property of options is defined
+            if (element.placeholder === "JSON") {
+                // check if placeholder is "JSON"
+                // this means it is macros
+                // convert Js object to JSON string
+                element.value = JSON.stringify(options[id]);
+            } else {
+                //if not defined
+                element.value = options[id];
+            }
+        }
+
+        // Add the processed element to the optionElements array
+        optionElements.push(element);
+    }
+
+
     reprocess();
 
+    function changeOption() {
+        // Init empty object options
+        const options = {};
+
+        // Loop through each element in optionElements
+        for (const element of optionElements) {
+            let val;
+
+            // Check the type of the element
+            if (element.type === "checkbox") {
+                // if checkbox, value is set to true or false
+                val = element.checked;
+            } else if (element.placeholder === "JSON") {
+                // if placeholder JSON, then element is macros
+                // parse the JSON input entered into the macro
+                val = element.value ? JSON.parse(element.value) : undefined;
+            } else {
+                // For rest of the elements, set val to the value of the element
+                val = element.value;
+            }
+
+            // Set id of each element in the options object to its current val
+            options[element.id] = val;
+        }
+
+        return options;
+    }
+
+
     function setSearch() {
         const query = queryString.parse(window.location.search);
         query.text = input.value;
         window.location.search = queryString.stringify(query);
     }
 
     function reprocess() {
+        options = changeOption();
         // Ignore changes to global macros caused by the expression
         options.macros = Object.assign({}, macros);
         try {