Added a toggle to swap input/output field positions and simplified setup of checkboxes which toggle a CSS class on a given element.

FossilOrigin-Name: eae3ab10c813d6f051d497271be2df05f54005ec54b19a2a27d04d632bccbeac

ext/fiddle/fiddle.in.html

@@ -170,11 +170,17 @@
         <legend>Options</legend>
         <div class=''>
           <span class='labeled-input'>
-            <input type='checkbox' id='opt-cb-sbs' checked>
+            <input type='checkbox' id='opt-cb-sbs'
+                   data-csstgt='#main-wrapper'
+                   data-cssclass='side-by-side'
+                   data-config='sideBySide'>
             <label for='opt-cb-sbs'>Side-by-side</label>
           </span>
           <span class='labeled-input'>
-            <input type='checkbox' id='opt-cb-swapio'>
+            <input type='checkbox' id='opt-cb-swapio'
+                   data-csstgt='#main-wrapper'
+                   data-cssclass='swapio'
+                   data-config='swapInOut'>
             <label for='opt-cb-swapio'>Swap in/out</label>
           </span>
           <span class='labeled-input'>

ext/fiddle/module-post.js

@@ -69,32 +69,36 @@ window.Module.onRuntimeInitialized = function(){
     },false);
 
     const mainWrapper = E('#main-wrapper');
-    const cbSbs = E('#opt-cb-sbs');
+    /* For each checkboxes with data-csstgt, set up a handler which
-    cbSbs.checked = mainWrapper.classList.contains('side-by-side');
+       toggles the given CSS class on the element matching
-    cbSbs.addEventListener('change', function(){
+       E(data-csstgt). */
-            mainWrapper.classList[
+    EAll('input[type=checkbox][data-csstgt]')
+        .forEach(function(e){
+            const tgt = E(e.dataset.csstgt);
+            const cssClass = e.dataset.cssclass || 'error';
+            e.checked = tgt.classList.contains(cssClass);
+            e.addEventListener('change', function(){
+                tgt.classList[
                     this.checked ? 'add' : 'remove'
-            ]('side-by-side');
+                ](cssClass)
             }, 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]. */
+       Module.config[X]. These must be set up AFTER data-csstgt
+       checkboxes so that those two states can be synced properly. */
     EAll('input[type=checkbox][data-config]')
         .forEach(function(e){
-            e.checked = !!Module.config[e.dataset.config];
+            const confVal = !!Module.config[e.dataset.config];
+            if(e.checked !== confVal){
+                /* Ensure that data-csstgt mappings (if any) get
+                   synced properly. */
+                e.checked = confVal;
+                e.dispatchEvent(new Event('change'));
+            }
             e.addEventListener('change', 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);};

ext/fiddle/module-pre.js

@@ -24,7 +24,11 @@
             autoClearOutput: false,
             /* If true, Module.print() will echo its output to
                the console, in addition to its normal output widget. */
-            printToConsole: true
+            printToConsole: true,
+            /* If true, display input/output areas side-by-side. */
+            sideBySide: false,
+            /* If true, swap positions of the input/output areas. */
+            swapInOut: false
         },
         preRun: [],
         postRun: [],

manifest

@@ -1,5 +1,5 @@
-C Default\sto\stop/bottom\slayout\swith\sinput\son\sthe\sbottom.\sOffer\sa\stoggle\sto\sswap\sinput/output\spositions.
+C Added\sa\stoggle\sto\sswap\sinput/output\sfield\spositions\sand\ssimplified\ssetup\sof\scheckboxes\swhich\stoggle\sa\sCSS\sclass\son\sa\sgiven\selement.
-D 2022-05-19T16:11:35.687
+D 2022-05-19T16:30:03.606
 F .fossil-settings/empty-dirs dbb81e8fc0401ac46a1491ab34a7f2c7c0452f2f06b54ebb845d024ca8283ef1
 F .fossil-settings/ignore-glob 35175cdfcf539b2318cb04a9901442804be81cd677d8b889fcc9149c21f239ea
 F LICENSE.md df5091916dbb40e6e9686186587125e1b2ff51f022cc334e886c19a0e9982724
@@ -56,10 +56,10 @@ 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 3bfbdd0ef3060d7b4224043e4bb1f8e446025f3fdbf8270f7828870dbc6fe81f
+F ext/fiddle/fiddle.in.html ca27f4b0f0477096e78d8b9b44109c234d9305531ab63ecd559a739bdea0b11c
 F ext/fiddle/index.md d9c1c308d8074341bc3b11d1d39073cd77754cb3ca9aeb949f23fdd8323d81cf
-F ext/fiddle/module-post.js ca4ff5d88632df99080652484e8600538b18129b957d2f28c66fd55633ba47a5
+F ext/fiddle/module-post.js 3d1a368312c598f73eb5d1d715c464ca473d491ad5df4d0636fbcf91a74817a9
-F ext/fiddle/module-pre.js 318fe73db5b9bf829d6f7a509ed557205ca7e64de59fcbb108d1dc4fa7aa3ac6
+F ext/fiddle/module-pre.js a7b046c0f764b100a5bedd3880bece8e6fb5908fb73cb91fb7a9b692bc938862
 F ext/fts1/README.txt 20ac73b006a70bcfd80069bdaf59214b6cf1db5e
 F ext/fts1/ft_hash.c 3927bd880e65329bdc6f506555b228b28924921b
 F ext/fts1/ft_hash.h 06df7bba40dadd19597aa400a875dbc2fed705ea
@@ -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 1aad3642c9fc14c25223628a309d84decc8d73a123e42d6efdc36d855b5b0666
+P 362d236aca31ca2004d1e81d8e306f7a12a6cb4eeb2bab432a9c2aae5206ddd7
-R 6cb7e05ca02f21269a4635f3666da01b
+R 5972ffff2ff6adf7c5f6cbd2f6c0d011
 U stephan
-Z 66c5d76df0bb2b5999c202e438cc0268
+Z a3eae77f5852c45e7c56e5cba1b6c11c
 # Remove this line to create a well-formed Fossil manifest.

manifest.uuid

@@ -1 +1 @@
-362d236aca31ca2004d1e81d8e306f7a12a6cb4eeb2bab432a9c2aae5206ddd7
+eae3ab10c813d6f051d497271be2df05f54005ec54b19a2a27d04d632bccbeac