Default to top/bottom layout with input on the bottom. Offer a toggle to swap input/output positions.

FossilOrigin-Name: 362d236aca31ca2004d1e81d8e306f7a12a6cb4eeb2bab432a9c2aae5206ddd7

ext/fiddle/fiddle.in.html

@@ -50,6 +50,12 @@
       #main-wrapper.side-by-side {
           flex-direction: row-reverse;
       }
+      #main-wrapper.swapio {
+          flex-direction: column;
+      }
+      #main-wrapper.side-by-side.swapio {
+          flex-direction: row;
+      }
       .ta-wrapper{
           display: flex;
           flex-direction: column;
@@ -106,9 +112,9 @@
       span.labeled-input {
           padding: 0.25em;
           margin: 0.25em 0.5em;
-          border: 1px inset;
           border-radius: 0.25em;
           white-space: nowrap;
+          background: #0002;
       }
       #notes-caveats {
           border-top: 1px dotted;
@@ -167,6 +173,10 @@
             <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-swapio'>
+            <label for='opt-cb-swapio'>Swap in/out</label>
+          </span>
           <span class='labeled-input'>
             <input type='checkbox' id='opt-cb-autoscroll'
                    data-config='autoScrollOutput'>
@@ -179,7 +189,7 @@
           </span>
         </div>
       </fieldset>
-      <div id='main-wrapper' class='side-by-side'>
+      <div id='main-wrapper' class=''>
         <div class='ta-wrapper input'>
           <textarea id="input"
                     placeholder="Shell input. Ctrl-enter/shift-enter runs it.">

ext/fiddle/module-post.js

@@ -68,13 +68,23 @@ window.Module.onRuntimeInitialized = function(){
         }
     },false);
 
-    E('#opt-cb-sbs')
-        .addEventListener('change', function(){
-            E('#main-wrapper').classList[
+    const mainWrapper = E('#main-wrapper');
+    const cbSbs = E('#opt-cb-sbs');
+    cbSbs.checked = mainWrapper.classList.contains('side-by-side');
+    cbSbs.addEventListener('change', function(){
+            mainWrapper.classList[
                 this.checked ? 'add' : 'remove'
             ]('side-by-side');
         }, false);
 
+    const cbSwapIo = E('#opt-cb-swapio');
+    cbSwapIo.checked = mainWrapper.classList.contains('swapio');
+    cbSwapIo.addEventListener('change', function(){
+        mainWrapper.classList[
+            this.checked ? 'add' : 'remove'
+        ]('swapio');
+    }, false);
+
     /* For each checkbox with data-config=X, set up a binding to
        Module.config[X]. */
     EAll('input[type=checkbox][data-config]')
@@ -84,7 +94,7 @@ window.Module.onRuntimeInitialized = function(){
                 Module.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);};

manifest

@@ -1,5 +1,5 @@
-C Numerous\slayout\stweaks,\sthe\smost\ssignificant\sbeing\sthat\sthe\slayout\snow\sadapts\sto\sthe\swindow\ssize.\sSwapped\spositions\sof\sthe\sinput/output\sareas.\sThis\sversion\ssupports,\sby\suncommenting\sa\sfew\sbits,\sa\sjquery.terminal-based\sview\sbut\salternatives\sto\sthat\s300kb\sdependency\sare\sstill\sunder\sinvestigation.
-D 2022-05-19T15:58:13.139
+C Default\sto\stop/bottom\slayout\swith\sinput\son\sthe\sbottom.\sOffer\sa\stoggle\sto\sswap\sinput/output\spositions.
+D 2022-05-19T16:11:35.687
 F .fossil-settings/empty-dirs dbb81e8fc0401ac46a1491ab34a7f2c7c0452f2f06b54ebb845d024ca8283ef1
 F .fossil-settings/ignore-glob 35175cdfcf539b2318cb04a9901442804be81cd677d8b889fcc9149c21f239ea
 F LICENSE.md df5091916dbb40e6e9686186587125e1b2ff51f022cc334e886c19a0e9982724
@@ -56,9 +56,9 @@ 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 0a176030dd3643a811007c39b8dde2271652b5a7a8597f0d7db8259a2f043111
+F ext/fiddle/fiddle.in.html 3bfbdd0ef3060d7b4224043e4bb1f8e446025f3fdbf8270f7828870dbc6fe81f
 F ext/fiddle/index.md d9c1c308d8074341bc3b11d1d39073cd77754cb3ca9aeb949f23fdd8323d81cf
-F ext/fiddle/module-post.js 0ff724148ea206d69e39241b771006606ec11131536fe677bfaf4d8faf546299
+F ext/fiddle/module-post.js ca4ff5d88632df99080652484e8600538b18129b957d2f28c66fd55633ba47a5
 F ext/fiddle/module-pre.js 318fe73db5b9bf829d6f7a509ed557205ca7e64de59fcbb108d1dc4fa7aa3ac6
 F ext/fts1/README.txt 20ac73b006a70bcfd80069bdaf59214b6cf1db5e
 F ext/fts1/ft_hash.c 3927bd880e65329bdc6f506555b228b28924921b
@@ -1959,8 +1959,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 4609a4f8626ae3d8179cae27e391bd06ffda18e9ef9e1b78745b36c7e8dd25db
-R e1efe6508b92a0a525711479235be1f2
+P 1aad3642c9fc14c25223628a309d84decc8d73a123e42d6efdc36d855b5b0666
+R 6cb7e05ca02f21269a4635f3666da01b
 U stephan
-Z 187d58546525d991c64f645554e38d64
+Z 66c5d76df0bb2b5999c202e438cc0268
 # Remove this line to create a well-formed Fossil manifest.

manifest.uuid

@@ -1 +1 @@
-1aad3642c9fc14c25223628a309d84decc8d73a123e42d6efdc36d855b5b0666
+362d236aca31ca2004d1e81d8e306f7a12a6cb4eeb2bab432a9c2aae5206ddd7