Improve demo (REPL, sandbox) on the main page (#1615)

* Improve demo (REPL, sandbox) on the main page

* Update button label

* Update textarea styles

* Change input event listeners to change

* Stack editor/render views vertically

* Add animation to options panel

* Open options panel and maximize view when hash is `demo`

* Fix clipboard text building

* Add -ms prefix to flex-direction

* Set width for [type="color"]

* Add macro example to the demo

website/pages/index.html

@@ -25,6 +25,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
     <link rel="stylesheet" href="static/index.css">
 
+    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.1/dist/clipboard.min.js" integrity="sha256-hIvIxeqhGZF+VVeM55k0mJvWpQ6gTkWk3Emc+NmowYA=" crossorigin="anonymous"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
     <script defer src="js/index.js" type="text/javascript"></script>
   </head>
@@ -48,14 +49,18 @@
           View on GitHub
         </a>
       </div>
-      <div class="demo" id="demo">
+      <div class="demo">
         <div class="demo-left">
           <div class="demo-instructions">
             <label for="demo-input">Type an expression:</label>
+            <a id="options" aria-label="Options">
+              <svg class="svg-inline--fa fa-cog fa-w-16" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path></svg>
+            </a>
           </div>
           <textarea id="demo-input" spellcheck="false">
-f(x) = \int_{-\infty}^\infty
-    \hat f(\xi)\,e^{2 \pi i \xi x}
+% \f is defined as f(#1) using the macro
+\f{x} = \int_{-\infty}^\infty
+    \hat \f\xi\,e^{2 \pi i \xi x}
     \,d\xi</textarea>
         </div>
         <div class="demo-right">
@@ -118,6 +123,44 @@ f(x) = \int_{-\infty}^\infty
         <br><a href="https://github.com/Khan/KaTeX/blob/master/LICENSE">MIT License</a> · Built from the hard work of <a href="https://github.com/Khan/KaTeX/graphs/contributors">many contributors</a>
       </span>
     </div></div>
+
+    <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="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>
+      </table>
+      <h4><label for="macros">macros</label></h4>
+      <textarea id="macros" placeholder="JSON">
+{
+    "\\f": "f(#1)"
+}</textarea>
+
+      <h3>Editor Options</h3>
+      <div><button id="maximize">Maximize editor</button></div>
+      <div><button id="code">Copy KaTeX code</button></div>
+      <div><button id="permalink">Copy Permalink</button></div>
+    </div>
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

website/static/js/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-var */
 /* global katex: false */
+/* global ClipboardJS: false */
 (function() {
     var tex = document.getElementsByClassName("tex");
     Array.prototype.forEach.call(tex, function(el) {
@@ -8,12 +9,72 @@
 
     var demoInput = document.getElementById("demo-input");
     var demoOutput = document.getElementById("demo-output");
+    var optionsButton = document.getElementById("options");
+    var optionsPanel = document.getElementById("options-panel");
+    var maximize = document.getElementById("maximize");
+    var copyCode = document.getElementById("code");
+    var copyPermalink = document.getElementById("permalink");
+
+    if (window.location.hash === '#demo') {
+        optionsPanel.classList.add('opened');
+        document.body.classList.add("maximized");
+        maximize.innerHTML = 'Minimize editor';
+    }
+
+    var match = window.location.search.match(/[?&]data=([^&]*)/);
+    var data = {};
+    if (match) {
+        try {
+            data = JSON.parse(decodeURIComponent(match[1]));
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(e);
+        }
+    }
+
+    if (data.code) {
+        demoInput.value = data.code;
+    }
+
+    var katexOptions = ["displayMode", "throwOnError", "errorColor", "strict",
+        "macros"].map(function(id) {
+            var el = document.getElementById(id);
+            if (el.type === "checkbox") {
+                if (typeof data[id] === "boolean") {
+                    el.checked = data[id];
+                }
+            } else if (data[id]) {
+                if (el.placeholder === "JSON") {
+                    el.value = JSON.stringify(data[id]);
+                } else {
+                    el.value = data[id];
+                }
+            }
+            return el;
+        });
+
+    function getOptions(withCode) {
+        var options = katexOptions.reduce(function(options, el) {
+            var val;
+            if (el.type === "checkbox") {
+                val = el.checked;
+            } else if (el.placeholder === "JSON") {
+                val = el.value ? JSON.parse(el.value) : undefined;
+            } else {
+                val = el.value;
+            }
+            options[el.id] = val;
+            return options;
+        }, {});
+        if (withCode) {
+            options.code = demoInput.value;
+        }
+        return options;
+    }
 
     function doDemo() {
         try {
-            katex.render(demoInput.value, demoOutput, {
-                displayMode: true,
-            });
+            katex.render(demoInput.value, demoOutput, getOptions());
         } catch (err) {
             while (demoOutput.lastChild) {
                 demoOutput.removeChild(demoOutput.lastChild);
@@ -26,8 +87,46 @@
         }
     }
 
-    demoInput.addEventListener("input", function() {
-        doDemo();
+    demoInput.addEventListener("input", doDemo);
+
+    optionsButton.addEventListener("click", function() {
+        if (!optionsPanel.classList.contains('opened')) {
+            optionsPanel.classList.remove('closed');
+            optionsPanel.classList.add('opened');
+        } else {
+            optionsPanel.classList.remove('opened');
+            optionsPanel.classList.add('closed');
+        }
+    });
+
+    maximize.addEventListener("click", function() {
+        if (!document.body.classList.contains("maximized")) {
+            document.body.classList.add("maximized");
+            maximize.innerHTML = 'Minimize editor';
+        } else {
+            document.body.classList.remove("maximized");
+            maximize.innerHTML = 'Maximize editor';
+        }
+    });
+
+    katexOptions.map(function(el) {
+        el.addEventListener("change", doDemo);
+    });
+
+    // eslint-disable-next-line no-new
+    new ClipboardJS(copyCode, {
+        text: function() {
+            return 'katex.render(' + JSON.stringify(demoInput.value) +
+                ', /* element */, ' + JSON.stringify(getOptions()) + ')';
+        },
+    });
+
+    // eslint-disable-next-line no-new
+    new ClipboardJS(copyPermalink, {
+        text: function() {
+            return location.protocol + '//' + location.host + location.pathname +
+                '?data=' + encodeURIComponent(JSON.stringify(getOptions(true)));
+        },
     });
 
     doDemo();

website/static/static/index.css

@@ -7,6 +7,21 @@ b {
     font-weight: bolder;
 }
 
+textarea {
+    margin: 0;
+    overflow: auto;
+    resize: none;
+    width: 100%;
+}
+
+[type="color"] {
+    width: 60px;
+}
+
+.maximized {
+    overflow: hidden;
+}
+
 .container {
     margin: 0 auto;
     width: 100%;
@@ -74,10 +89,22 @@ b {
     margin: 50px 0 0;
 }
 
+.maximized .demo {
+    -ms-flex-direction: column;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    left: 260px;
+    right: 0;
+    height: 100%;
+    margin: 0;
+    z-index: 1000;
+}
+
 .demo-left,
 .demo-right {
     box-sizing: border-box;
-    padding: 20px 30px;
+    padding: 20px 30px 30px;
     height: 260px;
     width: 100%;
 }
@@ -90,6 +117,10 @@ b {
 
 .demo-left {
     background: #444;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
 }
 
 .demo-left textarea {
@@ -98,12 +129,20 @@ b {
     box-sizing: border-box;
     color: #fff;
     font: 14px Menlo, monospace;
-    height: 160px;
-    margin: 0;
-    overflow: auto;
     padding: 10px;
-    resize: none;
-    width: 100%;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+}
+
+#options {
+    cursor: pointer;
+    float: right;
+    font-size: 20px;
+    color: white;
+}
+
+.maximized #options {
+    display: none;
 }
 
 .demo-right {
@@ -220,6 +259,35 @@ b {
     color: red;
 }
 
+#options-panel {
+    background: #fafafa;
+    box-shadow: 3px 0 3px rgba(50, 50, 50, 0.3);
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 200px;
+    transform: translateX(-110%);
+    -webkit-transform: translateX(-110%);
+    z-index: 2000;
+    padding: 10px 30px;
+    overflow: auto;
+}
+
+.opened {
+    animation: slide-right 0.5s forwards;
+    -webkit-animation: slide-right 0.5s forwards;
+}
+
+.closed {
+    animation: slide-left 0.5s forwards;
+    -webkit-animation: slide-left 0.5s forwards;
+}
+
+#macros {
+    height: 150px;
+}
+
 @media only screen and (min-width: 736px) {
     .demo-left,
     .demo-right {
@@ -235,6 +303,10 @@ b {
         display: block;
         margin-bottom: 10px;
     }
+
+    #options {
+        display: none;
+    }
 }
 
 .svg-inline--fa {
@@ -253,3 +325,21 @@ b {
 .svg-inline--fa.fa-w-16 {
     width: 1em;
 }
+
+@keyframes slide-right {
+    100% { transform: translateX(0%); }
+}
+
+@-webkit-keyframes slide-right {
+    100% { -webkit-transform: translateX(0%); }
+}
+
+@keyframes slide-left {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-110%); }
+}
+
+@-webkit-keyframes slide-left {
+    0% { -webkit-transform: translateX(0%); }
+    100% { -webkit-transform: translateX(-110%); }
+}