Add submit button for repl on mobile (#65)

Author: gregorybchris

repl.html

@@ -37,7 +37,7 @@
 Output:
 </div>
 <div>
-<code><span id="prompt-string">>>></span></code><input id="input" type="text" />
+<input id="input" type="text" /><input id="submit-input" type="submit" value="Submit" />
 </div>
 <script type="module">
 "use strict";
@@ -72,7 +72,8 @@
 let input = document.getElementById("input");
 const output = document.getElementById("output");
 const history = [];
-const button = document.getElementById("clear-local-storage");
+const clearButton = document.getElementById("clear-local-storage");
+const submitButton = document.getElementById("submit-input");
 
 function renderHistory() {
     for (const [inp, out] of history) {
@@ -120,6 +121,23 @@
     input.addEventListener("keyup", e => inputHandler(e));
 }
 
+async function submitInput() {
+    const response = await sendRequest(document.env, input.value);
+    if (response.ok) {
+        const {env, result} = await response.json();
+        updateHistory(input.value, result);
+        history.push([input.value, result]);
+        input.value = "";
+        document.env = env;
+        window.localStorage.setItem('env', env)
+        window.localStorage.setItem('history', JSON.stringify(history));
+    } else {
+        const msg = await response.text();
+        updateHistory(input.value, msg);
+        input.value = "";
+    }
+}
+
 loadFromLocalStorage();
 input.focus();
 async function inputHandler(e) {
@@ -131,35 +149,26 @@
             expandInput();
             return;
         }
-        if (!e.shiftKey && input.tagName === "TEXTAREA") {
-            // Normal Enter in a textarea should not submit input.
-            return;
-        }
-        const response = await sendRequest(document.env, input.value);
-        if (response.ok) {
-            const {env, result} = await response.json();
-            updateHistory(input.value, result);
-            history.push([input.value, result]);
-            input.value = "";
-            document.env = env;
-            window.localStorage.setItem('env', env)
-            window.localStorage.setItem('history', JSON.stringify(history));
-        } else {
-            const msg = await response.text();
-            updateHistory(input.value, msg);
-            input.value = "";
-        }
         if (input.tagName === "TEXTAREA") {
-            shrinkInput();
+            // Enter in a textarea should not submit input.
+            if (e.shiftKey) {
+                shrinkInput();
+            }
+            return;
         }
+        submitInput()
     }
 }
 input.addEventListener("keyup", e => inputHandler(e));
-button.addEventListener("click", () => {
+clearButton.addEventListener("click", () => {
     window.localStorage.clear();
     loadFromLocalStorage();
     input.focus();
 });
+submitButton.addEventListener("click", () => {
+    submitInput()
+    input.focus();
+});
 </script>
 </main>
 <script data-goatcounter="https://scrapscript.goatcounter.com/count"

style.css

@@ -193,15 +193,34 @@ input[type="text"], textarea {
   background-color: #2d2d2d;
   color: #d4d4d4;
   border: none;
-  padding: 0.5em 0.8em;
-  border-radius: 5px;
+  padding: 0.5em 1em;
+  border-radius: 5px 0px 0px 5px;
   transition: background-color 200ms;
+  width: 20em;
+}
+
+#submit-input {
+  font-family: "Nunito Sans", sans-serif;
+  background-color: #3a3a3a;
+  color: #c0c0c0;
+  border: none;
+  padding: 0.5em 1.2em;
+  font-weight: bold;
+  border-radius: 0px 5px 5px 0px;
+  transition: background-color 200ms;
+}
+#submit-input:hover {
+  cursor: pointer;
+  background-color: #434343;
+}
+#submit-input:active {
+  background-color: #3a3a3a;
 }
 
 #clear-local-storage {
   font-family: "Nunito Sans", sans-serif;
   background-color: #2d2d2d;
-  color: #d4d4d4;
+  color: #c0c0c0;
   border: none;
   padding: 0.5em 1.2em;
   font-weight: bold;