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');
-    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 checkboxes with data-csstgt, set up a handler which
+       toggles the given CSS class on the element matching
+       E(data-csstgt). */
+    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'
+                ](cssClass)
+            }, 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: [],