improved quote handling in web version

blackchip-org · Sep 7, 2024 · 194ebee · 194ebee
1 parent 64533c2
commit 194ebee
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ TODO
 
 Use tab to auto-complete. First tab completes an operation name as much as
 possible. Next tab shows matching candidates. When using on a mobile device, use
-the "?" button to emulate pressing the tab button twice.
+the "tab" button to emulate pressing the tab button twice.
 
 Example use:
 

diff --git a/web/index.html b/web/index.html
@@ -22,9 +22,10 @@
       <div id="popup"></div>
       <div id="footer-panel">
         <div id="footer">
-          <label id="prompt" for="input">zc&nbsp;&gt;</label>
-          <textarea id="input" type="search" rows="1" autocorrect="off" autocapitalize="off" autocomplete="new-password"></textarea>
-          <button id="auto">?</button>
+          <label id="prompt" for="single-input">zc&nbsp;&gt;</label>
+          <input id="input" class="input" type="search" autocorrect="off" autocapitalize="off" autocomplete="new-password"></input>
+          <textarea id="multi-input" class="hidden" tabindex="search" rows="5" autocorrect="off" autocapitalize="off" autocomplete="new-password"></textarea>
+          <button id="auto">tab</button>
         </div>
       </div>
     </div>

diff --git a/web/zc.css b/web/zc.css
@@ -68,7 +68,7 @@ html, body {
     flex-flow: row;
 }
 
-#input {
+.input {
     font-family: "Inconsolata";
     font-size: 32pt;
     color: white;
@@ -79,12 +79,16 @@ html, body {
     margin-left: 20px;
 }
 
-#input:focus {
+.input:focus {
     background-color: #555;
     border: 0px;
     outline: none;
 }
 
+.hidden {
+    display: none;
+}
+
 ul {
     list-style-type: none;
     margin: 0;

diff --git a/web/zc.js b/web/zc.js
@@ -4,8 +4,8 @@ var histPos = -1
 
 var tabs = 0
 
-function submit() {
-    let line = document.querySelector("#input").value
+function submit(tag) {
+    let line = document.querySelector(tag).value
     let result = ''
     histPos = -1
     if (line.trim() === "") {
@@ -64,14 +64,20 @@ function submit() {
     }
 
     document.querySelector("#output").innerHTML = `<ul>${output.join('\n')}</ul>`
-    document.querySelector("#input").value = ""
+    document.querySelector(tag).value = ""
 
     let qEnd = zcQuoteEnd()
     let prompt = document.querySelector("#prompt")
     if (qEnd !== "") {
         prompt.innerHTML = "…&nbsp;" + qEnd + "&gt;"
+        document.querySelector("#input").className = "hidden"
+        document.querySelector("#multi-input").className = "input"
+        document.querySelector("#multi-input").focus()
     } else {
         prompt.innerHTML = "zc&nbsp;&gt;"
+        document.querySelector("#input").className = "input"
+        document.querySelector("#input").focus()
+        document.querySelector("#multi-input").className = "hidden"
     }
 }
 
@@ -153,7 +159,7 @@ function init() {
     if (expr) {
         let e = document.querySelector("#input")
         e.value = expr
-        submit()
+        submit("#input")
         e.value = expr
         e.selectionStart = e.selectionEnd = expr.length
         e.focus()
@@ -164,11 +170,23 @@ window.onload = function() {
     document.querySelector("#input").onkeypress = function(evt) {
         let keyCode = evt.code || evt.key
         if (keyCode === 'Enter') {
-            submit()
+            submit("#input")
             evt.preventDefault()
         }
     }
 
+    document.querySelector("#multi-input").onkeypress = function(evt) {
+        let keyCode = evt.code || evt.key
+        if (keyCode === 'Enter') {
+            let line = document.querySelector("#multi-input").value
+            let qEnd = zcQuoteEnd()
+            if (line == qEnd || line.endsWith("\n" + qEnd)) {
+                submit("#multi-input")
+                evt.preventDefault()
+            }
+        }
+    }
+
     document.querySelector('#input').onkeydown = function(evt) {
         clearPopup()
         let keyCode = evt.code || evt.key