Added an option to auto-clear the output area before submitting the input. Experiment...

FossilOrigin-Name: 1a1e4e7fdbd0ec61218c3a311164086316d825181f3fc1c1ec235b63488746ef

diff --git a/ext/fiddle/fiddle.in.html b/ext/fiddle/fiddle.in.html
index a1b56de7b9e5dd15be7d9d283e43b5f75b532739..0da2a1c5fb1a3c9df5d5073cc96ad3bd35ba0385 100644 (file)
--- a/ext/fiddle/fiddle.in.html
+++ b/ext/fiddle/fiddle.in.html
@@ -47,6 +47,10 @@
           flex: 1 1 auto;
           margin: 0.25em;
       }
+      .ta-wrapper textarea {
+          font-size: 110%;
+          filter: invert(100%);
+      }
       .button-bar {
           display: flex;
           justify-content: center;
@@ -71,7 +75,7 @@
           display: none !important;
       }
       fieldset.options {
-          font-size: 80%;
+          font-size: 75%;
       }
       fieldset > legend {
           padding: 0 0.5em;
@@ -105,9 +109,15 @@
           <label for='opt-cb-sbs'>Side-by-side</label>
         </span>
         <span class='labeled-input'>
-          <input type='checkbox' id='opt-cb-autoscroll' checked>
+          <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'>
@@ -168,7 +178,10 @@ SELECT * FROM t;</textarea>
               /* If true, the Module.print() impl will auto-scroll
                  the output widget to the bottom when it receives output,
                  else it won't. */
-              autoScrollOutput: true
+              autoScrollOutput: true,
+              /* If true, the output area will be cleared before each
+                 command is run, else it will not. */
+              autoClearOutput: false
           };
           /**
              Callback for the emscripten module init process, gets
@@ -197,13 +210,17 @@ SELECT * FROM t;</textarea>
               btnClearOut.addEventListener('click',function(){
                   taOutput.value = '';
               },false);
+              /* Sends the given text to the shell. If it's null or empty, this
+                 is a no-op except that the very first call will initialize the
+                 db and output an informational header. */
               const doExec = function f(sql){
                   if(!f._) f._ = Module.cwrap('fiddle_exec', null, ['string']);
                   if(Module._isDead){
                       Module.printErr("shell module has exit()ed. Cannot run SQL.");
-                  }else{
-                      f._(sql);
+                      return;
                   }
+                  if(config.autoClearOutput) taOutput.value='';
+                  f._(sql);
               };
               const btnRun = document.querySelector('#btn-run');
               btnRun.addEventListener('click',function(){
@@ -220,16 +237,22 @@ SELECT * FROM t;</textarea>
                           this.checked ? 'add' : 'remove'
                       ]('side-by-side');
                   }, false);
-              document.querySelector('#opt-cb-autoscroll')
-                  .addEventListener('change', function(){
-                      config.autoScrollOutput = this.checked;
-                  }, false);
               document.querySelector('#btn-notes-caveats')
                   .addEventListener('click', function(){
                       document.querySelector('#notes-caveats').remove();
                   }, false);
 
-              /* For all buttons with data-cmd=X, map a click handler which
+              /* For each checkbox with data-config=X, set up a binding to
+                 config[X]. */
+              document.querySelectorAll('input[type=checkbox][data-config]')
+                  .forEach(function(e){
+                      e.checked = !!config[e.dataset.config];
+                      e.addEventListener('change', function(){
+                          config[this.dataset.config] = this.checked;
+                      }, false);
+                  });
+
+              /* For each button with data-cmd=X, map a click handler which
                  calls doExec(X). */
               const cmdClick = function(){doExec(this.dataset.cmd);};
               document.querySelectorAll('button[data-cmd]').forEach(

diff --git a/manifest b/manifest
index dc764f864f71a6375eef993ba7413c858e49c35f..66bed235f65edc7ef95ef2b16424c2c39ee86ac2 100644 (file)
--- a/manifest
+++ b/manifest
@@ -1,5 +1,5 @@
-C Replaced\sthe\stoggle\sfor\sthe\snotes/caveats\ssection\sof\sthe\sfiddle\sUI\swith\sa\sbutton\sto\sremove\sthat\ssection.
-D 2022-05-19T01:12:23.597
+C Added\san\soption\sto\sauto-clear\sthe\soutput\sarea\sbefore\ssubmitting\sthe\sinput.\sExperimentally\sinverted\sthe\scolors\sin\sthe\sinput/output\sareas.
+D 2022-05-19T09:22:16.127
 F .fossil-settings/empty-dirs dbb81e8fc0401ac46a1491ab34a7f2c7c0452f2f06b54ebb845d024ca8283ef1
 F .fossil-settings/ignore-glob 35175cdfcf539b2318cb04a9901442804be81cd677d8b889fcc9149c21f239ea
 F LICENSE.md df5091916dbb40e6e9686186587125e1b2ff51f022cc334e886c19a0e9982724
@@ -56,7 +56,7 @@ F ext/expert/sqlite3expert.c 6ca30d73b9ed75bd56d6e0d7f2c962d2affaa72c505458619d0
 F ext/expert/sqlite3expert.h ca81efc2679a92373a13a3e76a6138d0310e32be53d6c3bfaedabd158ea8969b
 F ext/expert/test_expert.c d56c194b769bdc90cf829a14c9ecbc1edca9c850b837a4d0b13be14095c32a72
 F ext/fiddle/Makefile ea647919e6ac4b50edde1490f60ee87e8ccd75141e4aa650718c6f28eb323bbc
-F ext/fiddle/fiddle.in.html bac5846bf1655dfd7f4e2a4b3a5b78b5b285b8ab64ab8b545ac8864c4e4c6770
+F ext/fiddle/fiddle.in.html 05192302452a1ff410a12de04d10802c89fd90c67d2e7a0983cca599b78d802d
 F ext/fiddle/index.md d9c1c308d8074341bc3b11d1d39073cd77754cb3ca9aeb949f23fdd8323d81cf
 F ext/fts1/README.txt 20ac73b006a70bcfd80069bdaf59214b6cf1db5e
 F ext/fts1/ft_hash.c 3927bd880e65329bdc6f506555b228b28924921b
@@ -1957,8 +1957,8 @@ F vsixtest/vsixtest.tcl 6a9a6ab600c25a91a7acc6293828957a386a8a93
 F vsixtest/vsixtest.vcxproj.data 2ed517e100c66dc455b492e1a33350c1b20fbcdc
 F vsixtest/vsixtest.vcxproj.filters 37e51ffedcdb064aad6ff33b6148725226cd608e
 F vsixtest/vsixtest_TemporaryKey.pfx e5b1b036facdb453873e7084e1cae9102ccc67a0
-P e4f87eb7c3ed16b7e431f86b7d337bb4097246d20780207b43e28fffda3d8a61
-R 445736e40685ca5f686d69cfda721787
+P 6661d60527820417bbfd01c782d242c5190252ea703fc6f56376537d5c8f6a1e
+R 1ba355c6c9a1901c14ddac3fca9f90fb
 U stephan
-Z afe318168f254a6f3b75d6236f7da0c3
+Z 350abcb9556383a2d29c463740d62bfd
 # Remove this line to create a well-formed Fossil manifest.

diff --git a/manifest.uuid b/manifest.uuid
index 3f4ae12a5a4c60deb0127e0a95e9245edb3a8378..a70a30335656af706e533a76f3841ae0a94ca547 100644 (file)
--- a/manifest.uuid
+++ b/manifest.uuid
@@ -1 +1 @@
-6661d60527820417bbfd01c782d242c5190252ea703fc6f56376537d5c8f6a1e
\ No newline at end of file
+1a1e4e7fdbd0ec61218c3a311164086316d825181f3fc1c1ec235b63488746ef
\ No newline at end of file