sqlite3 fiddle

From 38240592ad483954d9d10055dec39ebd1af504ce Mon Sep 17 00:00:00 2001 From: stephan Date: Thu, 19 May 2022 15:58:13 +0000 Subject: [PATCH] Numerous layout tweaks, the most significant being that the layout now adapts to the window size. Swapped positions of the input/output areas. This version supports, by uncommenting a few bits, a jquery.terminal-based view but alternatives to that 300kb dependency are still under investigation. FossilOrigin-Name: 1aad3642c9fc14c25223628a309d84decc8d73a123e42d6efdc36d855b5b0666 --- ext/fiddle/fiddle.in.html | 140 +++++++++++++++++++++----------------- ext/fiddle/module-post.js | 129 +++++++++++++++++++++++++++++++++-- ext/fiddle/module-pre.js | 3 +- manifest | 16 ++--- manifest.uuid | 2 +- 5 files changed, 211 insertions(+), 79 deletions(-) diff --git a/ext/fiddle/fiddle.in.html b/ext/fiddle/fiddle.in.html index b78019565a..a14bf5b4b4 100644 --- a/ext/fiddle/fiddle.in.html +++ b/ext/fiddle/fiddle.in.html @@ -4,6 +4,8 @@ sqlite3 fiddle + -

sqlite3 fiddle

Initializing app...

@@ -123,75 +154,56 @@

- Options -

- - - Side-by-side - - - - Auto-scroll output - - - - Auto-clear output - -

+
+    <div id='jqterminal' class='app-view hidden initially-hidden'>
+      This is a placeholder for a terminal-like view.
+    </div>
+
+    <div id='view-split' class='app-view initially-hidden'>
+      <fieldset class='options'>
+        <legend>Options</legend>
+        <div class=''>
+          <span class='labeled-input'>
+            <input type='checkbox' id='opt-cb-sbs' checked>
+            <label for='opt-cb-sbs'>Side-by-side</label>
+          </span>
+          <span class='labeled-input'>
+            <input type='checkbox' id='opt-cb-autoscroll'
+                   data-config='autoScrollOutput'>
+            <label for='opt-cb-autoscroll'>Auto-scroll output</label>
+          </span>
+          <span class='labeled-input'>
+            <input type='checkbox' id='opt-cb-autoclear'
+                   data-config='autoClearOutput'>
+            <label for='opt-cb-autoclear'>Auto-clear output</label>
+          </span>
+        </div>
+      </fieldset>
+      <div id='main-wrapper' class='side-by-side'>
+        <div class='ta-wrapper input'>
+          <textarea id="input"
+                    placeholder="Shell input. Ctrl-enter/shift-enter runs it.">
 -- Use ctrl-enter or shift-enter to execute SQL
 .nullvalue NULL
 .mode box
 CREATE TABLE t(a,b);
 INSERT INTO t(a,b) VALUES('abc',123),('def',456),(NULL,789),('ghi',012);
 SELECT * FROM t;

- - - +

+ + + +

- -

- +

+ +

- Notes and Caveats - -

- This JavaScript application runs a C application which has been - compiled into WASM (Web Assembly). As such, it has certain - limitations. Those include, but are not limited to: -

It cannot recover after a call to - exit(). If the native code triggers - an exit, reloading the page is the only way to restart - the application. (Making the app restartable without reloading - the page would require significant surgery in the C code.) -
It cannot perform any file I/O, and running - any command which attempts to do so might trigger an - exit(). -
A number of dot-commands available in the CLI shell are - explicitly removed from this version of the shell. -