Add help section

felipec · felipec · commit 9bc4be87d66f · 2022-01-30T16:25:10.000-06:00
Partially solves issue #1. Signed-off-by: Felipe Contreras <felipe.contreras@gmail.com>
diff --git a/index.html b/index.html
@@ -12,6 +12,16 @@
 <body>
   <div id="input" class="editor language-mathjs"></div>
   <div id="output" class="editor language-mathjs"></div>
+  <div id="help" style="display: none">
+    <h1 id="help_name"></h1>
+    <p id="help_description"></p>
+    <h2>Syntax</h2>
+    <pre><code id="help_syntax" class="language-mathjs"></code></pre>
+    <h2>Examples</h2>
+    <pre><code id="help_examples" class="language-mathjs"></code></pre>
+    <h2>See also</h2>
+    <p id="help_seealso"></p>
+  </div>
 </body>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
diff --git a/script.js b/script.js
@@ -1,8 +1,25 @@
 const wait = 100;
 
+function showDoc(doc) {
+  if (!doc) {
+    help.style.display = 'none';
+    return;
+  }
+
+  help_name.textContent = doc.name;
+  help_description.textContent = doc.description;
+  help_syntax.textContent = doc.syntax.join("\n");
+  hljs.highlightElement(help_syntax);
+  help_examples.textContent = doc.examples.join("\n");
+  hljs.highlightElement(help_examples);
+  help_seealso.textContent = doc.seealso.join(", ");
+  help.style.display = 'block';
+}
+
 function doMath(input) {
   let output = [];
   let scope = {};
+  let doc;
 
   for (const line of input.split('\n')) {
     let output_line = '';
@@ -11,7 +28,9 @@ function doMath(input) {
         output_line = line;
       } else {
         try {
-          output_line = math.format(math.evaluate(line, scope), 14);
+          const r = math.evaluate(line, scope);
+          if (r.doc) doc = r.doc;
+          else output_line = math.format(r, 14);
         } catch(e) {
           output_line = e.toString();
         }
@@ -21,6 +40,7 @@ function doMath(input) {
   }
 
   results.updateCode(output.join('\n'));
+  showDoc(doc);
 }
 
 var timer;
diff --git a/style.css b/style.css
@@ -21,6 +21,21 @@ body {
   background-color: hsl(240, 6.25%, 12.5%);
 }
 
+#help {
+  font-family: sans-serif;
+  flex: 1;
+  padding: 8px;
+}
+
+h1, h2 {
+  font-size: 1.2em;
+  margin-top: 1em;
+}
+
+h1 {
+  font-size: 1.4em;
+}
+
 .hljs-class {
   font-weight: bold;
 }
