demo: remove Highlight button (update automatically)

3 files changed, 53 insertions, 22 deletions

diff --git a/doc/_static/demo.css b/doc/_static/demo.css
index 987f0f28..e14379af 100644
--- a/doc/_static/demo.css
+++ b/doc/_static/demo.css
@@ -58,9 +58,13 @@
     content: ')';
 }
 
-#loading:not([hidden]) {
+#loading[hidden] {
+    visibility: hidden;
+    display: flex;
+}
+
+#loading {
     display: flex;
-    justify-content: center;
     align-items: center;
     gap: 1em;
 }
diff --git a/doc/_static/demo.js b/doc/_static/demo.js
index b9369878..488ded03 100644
--- a/doc/_static/demo.js
+++ b/doc/_static/demo.js
@@ -1,12 +1,7 @@
-// otherwise the button is enabled when refreshing the page
-document.getElementById("hlbtn").disabled = true;
-
-
 const loadingDiv = document.getElementById("loading");
 const langSelect = document.getElementById("lang");
 const styleSelect = document.getElementById("style");
 const formatterSelect = document.getElementById("formatter");
-const highlightBtn = document.getElementById("hlbtn");
 const outputDiv = document.getElementById("hlcode");
 const codeHeader = document.getElementById("code-header");
 const copyLink = document.getElementById("copylink");
@@ -14,6 +9,8 @@ const style = document.getElementById("css-style");
 const textarea = document.getElementById("code");
 const uriTooLongMsg = document.getElementById('uri-too-long');
 const contrastWarning = document.getElementById('contrast-warning');
+const fileInput = document.getElementById("file");
+const fileInputResetButton = document.getElementById('reset-file');
 
 const qvars = Object.fromEntries(new URLSearchParams(window.location.search));
 if (qvars.lexer) {
@@ -41,18 +38,52 @@ function updateContrastWarning() {
     contrastWarning.hidden = styleSelect.selectedOptions[0].dataset.wcag == 'aa';
 }
 
+function debounce(func, timeout) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => func.apply(this, args), timeout);
+    };
+}
+
+const highlightShortDebounce = debounce(highlight, 50);
+const highlightLongDebounce = debounce(highlight, 500);
+
+function debouncedUpdate() {
+    if (fileInput.files.length > 0)
+        return;
+
+    if (textarea.value.length < 1000) {
+        highlightShortDebounce();
+    } else {
+        highlightLongDebounce();
+    }
+}
+
+langSelect.addEventListener('change', debouncedUpdate);
+textarea.addEventListener('input', debouncedUpdate);
+formatterSelect.addEventListener('change', debouncedUpdate);
+fileInput.addEventListener('change', () => {
+    fileInputResetButton.hidden = false;
+    highlight();
+});
+fileInputResetButton.hidden = fileInput.files.length == 0;
+fileInputResetButton.addEventListener('click', () => {
+    fileInputResetButton.hidden = true;
+    fileInput.value = '';
+    highlight();
+});
+
 let styles;
 
 const highlightWorker = new Worker("/_static/demo-worker.js");
-highlightWorker.onmessage = async (msg) => {
+highlightWorker.onmessage = (msg) => {
     if (msg.data.loaded) {
         styles = msg.data.loaded.styles;
-        highlightBtn.disabled = false;
-        highlightBtn.textContent = 'Highlight';
 
-        if (qvars.code !== undefined) {
+        if (qvars.code !== undefined || textarea.value) {
             loadingDiv.hidden = true;
-            await highlight();
+            highlight();
         }
     } else if (msg.data.html) {
         outputDiv.innerHTML = msg.data.html;
@@ -80,7 +111,7 @@ highlightWorker.onmessage = async (msg) => {
         codeHeader.hidden = false;
         loadingDiv.hidden = true;
     } else if (msg.data.lexer) {
-        await highlight(msg.data.lexer);
+        highlight(msg.data.lexer);
     } else {
         console.warn('unexpected message from highlight worker', msg);
     }
@@ -108,7 +139,7 @@ function updateCopyLink() {
 
 async function highlight(guessedLexer) {
     var lexer = langSelect.value || guessedLexer;
-    var file = document.getElementById("file").files[0];
+    var file = fileInput.files[0];
 
     let code;
     if (file) {
@@ -117,8 +148,6 @@ async function highlight(guessedLexer) {
         code = textarea.value;
     }
 
-    outputDiv.innerHTML = '';
-    codeHeader.hidden = true;
     loadingDiv.hidden = false;
 
     if (!lexer) {
diff --git a/doc/_templates/demo.html b/doc/_templates/demo.html
index 9d35eda9..8e2a7c6b 100644
--- a/doc/_templates/demo.html
+++ b/doc/_templates/demo.html
@@ -38,13 +38,13 @@
             <textarea id="code" rows="1" cols="60" spellcheck="false"></textarea>
         </label>
     </p>
-    <form>
+    <p>
         <label>
             Alternatively you can upload a file:
             <input type="file" id="file">
         </label>
-        <input type="reset" value="Reset">
-    </form>
+        <button id="reset-file">Reset</button>
+    </p>
 	<div id="format-settings">
         <label>
             Formatter
@@ -68,14 +68,12 @@
             </select>
         </label>
         <span id=contrast-warning hidden>style may have poor contrast</span>
-        <div class=flex-grow-1></div>
-        <button type="button" onclick="highlight()" id="hlbtn" disabled>Loading Python...</button>
     </div>
     </form>
 </div>
 
 <div id="loading" hidden>
-    <img src="{{ pathto("_static/spinner.gif", 1) }}" style="vertical-align: middle">
+    <img src="{{ pathto("_static/spinner.gif", 1) }}" width="20">
     <span id="loading-text">loading Python...</span>
 </div>