From: stephan Date: Sat, 2 Aug 2025 14:50:01 +0000 (+0000) Subject: Fiddle: make the toolbar visible in terminal mode and hide non-terminal-mode options... X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f681a9a7d86ee485782298c967c023f2a602cc9c;p=thirdparty%2Fsqlite.git Fiddle: make the toolbar visible in terminal mode and hide non-terminal-mode options when in terminal mode. Move the terminal/split-view toggle button into the toolbar. Improve the view-switching handling. FossilOrigin-Name: 711bf423d213a2c468c32a48c0b09927cdfdffce36e5e4a3b35a32bfa055ff82 --- diff --git a/ext/wasm/fiddle/fiddle.js b/ext/wasm/fiddle/fiddle.js index 45ef69326f..cf20345f01 100644 --- a/ext/wasm/fiddle/fiddle.js +++ b/ext/wasm/fiddle/fiddle.js @@ -406,18 +406,142 @@ self.onSFLoaded(); }); + SF.e ={ + about: E('#view-about'), + split: E('#view-split'), + terminal: E('#view-terminal'), + hideInTerminal: EAll('.hide-in-terminal' + /* Elements to hide when in terminal mode */) + }; + SF.eViews = EAll('.app-view'); + SF.setMainView = function(eMain){ + if( SF.e.main === eMain ) return; + SF.eViews.forEach((e)=>{ + if( e===eMain ) e.classList.remove('hidden'); + else e.classList.add('hidden'); + }); + SF.e.hideInTerminal.forEach(e=>{ + if( eMain === SF.e.terminal ) e.classList.add('hidden'); + else e.classList.remove('hidden'); + }); + SF.e.main = eMain; + SF.ForceResizeKludge(); + }; + /** Toggle the "About" view on and off. */ SF.toggleAbout = function(){ - if( document.body.classList.toggle('about') ){ - this.eAbout.classList.remove('hidden'); - SF.eMainView.classList.add('hidden'); + if( SF.e.about.classList.contains('hidden') ){ + SF.e.about.$returnTo = SF.e.main; + SF.setMainView( SF.e.about ); }else{ - this.eAbout.classList.add('hidden'); - SF.eMainView.classList.remove('hidden'); + const e = SF.e.about.$returnTo; + delete SF.e.about.$returnTo; + SF.setMainView( e ); } - }.bind({ - eAbout: E("#view-about") - }); + }; + + /** + Given a DOM element, this routine measures its "effective + height", which is the bounding top/bottom range of this element + and all of its children, recursively. For some DOM structure + cases, a parent may have a reported height of 0 even though + children have non-0 sizes. + + Returns 0 if !e or if the element really has no height. + */ + const effectiveHeight = function f(e){ + if(!e) return 0; + if(!f.measure){ + f.measure = function callee(e, depth){ + if(!e) return; + const m = e.getBoundingClientRect(); + if(0===depth){ + callee.top = m.top; + callee.bottom = m.bottom; + }else{ + callee.top = m.top ? Math.min(callee.top, m.top) : callee.top; + callee.bottom = Math.max(callee.bottom, m.bottom); + } + Array.prototype.forEach.call(e.children,(e)=>callee(e,depth+1)); + if(0===depth){ + //console.debug("measure() height:",e.className, callee.top, callee.bottom, (callee.bottom - callee.top)); + f.extra += callee.bottom - callee.top; + } + return f.extra; + }; + } + f.extra = 0; + f.measure(e,0); + return f.extra; + }; + + /** + Returns a function, that, as long as it continues to be invoked, + will not be triggered. The function will be called after it stops + being called for N milliseconds. If `immediate` is passed, call + the callback immediately and hinder future invocations until at + least the given time has passed. + + If passed only 1 argument, or passed a falsy 2nd argument, + the default wait time set in this function's $defaultDelay + property is used. + + Source: underscore.js, by way of https://davidwalsh.name/javascript-debounce-function + */ + const debounce = function f(func, wait, immediate) { + var timeout; + if(!wait) wait = f.$defaultDelay; + return function() { + const context = this, args = Array.prototype.slice.call(arguments); + const later = function() { + timeout = undefined; + if(!immediate) func.apply(context, args); + }; + const callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if(callNow) func.apply(context, args); + }; + }; + debounce.$defaultDelay = 500 /*arbitrary*/; + + SF.ForceResizeKludge = (function(){ + /* Workaround for Safari mayhem regarding use of vh CSS + units.... We cannot use vh units to set the main view + size because Safari chokes on that, so we calculate + that height here. Larger than ~95% is too big for + Firefox on Android, causing the input area to move + off-screen. */ + const eVisibles = EAll('.app-view'); + const elemsToCount = [ + /* Elements which we need to always count in the + visible body size. */ + E('body > header'), + E('body > footer'), + E('body > fieldset.options') + ]; + const resized = function f(){ + if(f.$disabled) return; + const wh = window.innerHeight; + var ht; + var extra = 0; + elemsToCount.forEach((e)=>e ? extra += effectiveHeight(e) : false); + ht = wh - extra; + eVisibles.forEach(function(e){ + e.style.height = + e.style.maxHeight = [ + "calc(", (ht>=100 ? ht : 100), "px", + " - 2em"/*fudge value*/,")" + /* ^^^^ hypothetically not needed, but both + Chrome/FF on Linux will force scrollbars on the + body if this value is too small. */ + ].join(''); + }); + }; + resized.$disabled = true/*gets deleted when setup is finished*/; + window.addEventListener('resize', debounce(resized, 250), false); + return resized; + })(); /** Performs all app initialization which must wait until after the @@ -426,9 +550,10 @@ */ self.onSFLoaded = function(){ delete this.onSFLoaded; + // Unhide all elements which start out hidden EAll('.initially-hidden').forEach((e)=>e.classList.remove('initially-hidden')); - SF.eMainView = EAll('.app-view:not(.hidden)')[0] + SF.e.main = EAll('.app-view:not(.hidden)')[0] /** The main view widget. Initially the first non-hidden .app-view element. */; if( (new URL(self.location.href).searchParams).has('about') ){ @@ -655,108 +780,6 @@ }, false); }); - /** - Given a DOM element, this routine measures its "effective - height", which is the bounding top/bottom range of this element - and all of its children, recursively. For some DOM structure - cases, a parent may have a reported height of 0 even though - children have non-0 sizes. - - Returns 0 if !e or if the element really has no height. - */ - const effectiveHeight = function f(e){ - if(!e) return 0; - if(!f.measure){ - f.measure = function callee(e, depth){ - if(!e) return; - const m = e.getBoundingClientRect(); - if(0===depth){ - callee.top = m.top; - callee.bottom = m.bottom; - }else{ - callee.top = m.top ? Math.min(callee.top, m.top) : callee.top; - callee.bottom = Math.max(callee.bottom, m.bottom); - } - Array.prototype.forEach.call(e.children,(e)=>callee(e,depth+1)); - if(0===depth){ - //console.debug("measure() height:",e.className, callee.top, callee.bottom, (callee.bottom - callee.top)); - f.extra += callee.bottom - callee.top; - } - return f.extra; - }; - } - f.extra = 0; - f.measure(e,0); - return f.extra; - }; - - /** - Returns a function, that, as long as it continues to be invoked, - will not be triggered. The function will be called after it stops - being called for N milliseconds. If `immediate` is passed, call - the callback immediately and hinder future invocations until at - least the given time has passed. - - If passed only 1 argument, or passed a falsy 2nd argument, - the default wait time set in this function's $defaultDelay - property is used. - - Source: underscore.js, by way of https://davidwalsh.name/javascript-debounce-function - */ - const debounce = function f(func, wait, immediate) { - var timeout; - if(!wait) wait = f.$defaultDelay; - return function() { - const context = this, args = Array.prototype.slice.call(arguments); - const later = function() { - timeout = undefined; - if(!immediate) func.apply(context, args); - }; - const callNow = immediate && !timeout; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - if(callNow) func.apply(context, args); - }; - }; - debounce.$defaultDelay = 500 /*arbitrary*/; - - const ForceResizeKludge = (function(){ - /* Workaround for Safari mayhem regarding use of vh CSS - units.... We cannot use vh units to set the main view - size because Safari chokes on that, so we calculate - that height here. Larger than ~95% is too big for - Firefox on Android, causing the input area to move - off-screen. */ - const appViews = EAll('.app-view'); - const elemsToCount = [ - /* Elements which we need to always count in the - visible body size. */ - E('body > header'), - E('body > footer') - ]; - const resized = function f(){ - if(f.$disabled) return; - const wh = window.innerHeight; - var ht; - var extra = 0; - elemsToCount.forEach((e)=>e ? extra += effectiveHeight(e) : false); - ht = wh - extra; - appViews.forEach(function(e){ - e.style.height = - e.style.maxHeight = [ - "calc(", (ht>=100 ? ht : 100), "px", - " - 2em"/*fudge value*/,")" - /* ^^^^ hypothetically not needed, but both - Chrome/FF on Linux will force scrollbars on the - body if this value is too small. */ - ].join(''); - }); - }; - resized.$disabled = true/*gets deleted when setup is finished*/; - window.addEventListener('resize', debounce(resized, 250), false); - return resized; - })(); - /** Set up a selection list of examples */ (function(){ const xElem = E('#select-examples'); @@ -827,38 +850,29 @@ })()/* example queries */; //SF.echo(null/*clear any output generated by the init process*/); - if(window.jQuery && window.jQuery.terminal){ + if(window.jQuery && window.jQuery.terminal && SF.e.terminal){ /* Set up the terminal-style view... */ - const eTerm = E('#view-terminal'); - const jqeTerm = window.jQuery(eTerm).empty(); + const jqeTerm = window.jQuery(SF.e.terminal).empty(); SF.jqTerm = jqeTerm.terminal(SF.dbExec.bind(SF),{ prompt: 'sqlite> ', greetings: false /* note that the docs incorrectly call this 'greeting' */ }); /* Set up a button to toggle the views... */ - const head = E('#titlebar-buttons'); + const ePlaceholder = E('#terminal-button-placeholder'); + ePlaceholder.classList.add('labeled-input'); + ePlaceholder.classList.remove('hidden'); const btnToggleView = document.createElement('button'); - btnToggleView.appendChild(document.createTextNode("Toggle View")); - head.appendChild(btnToggleView); - const eOthers = EAll('.app-view:not(#view-terminal)'); - const eOtherMain = E('#view-split'); + btnToggleView.innerText = "Toggle view"; + ePlaceholder.appendChild( btnToggleView ); btnToggleView.addEventListener('click',function f(){ - document.body.classList.remove('about'); - if(document.body.classList.toggle('terminal-mode')){ - eOthers.forEach((e)=>e.classList.add('hidden')); - SF.eMainView = eTerm; - }else{ - eTerm.classList.add('hidden'); - SF.eMainView = eOtherMain; - } - SF.eMainView.classList.remove('hidden'); - ForceResizeKludge(); + const terminalOn = document.body.classList.toggle('terminal-mode'); + SF.setMainView( terminalOn ? SF.e.terminal : SF.e.split ); }, false); btnToggleView.click()/*default to terminal view*/; } const urlParams = new URL(self.location.href).searchParams; SF.dbExec(urlParams.get('sql') || null); - delete ForceResizeKludge.$disabled; - ForceResizeKludge(); + delete SF.ForceResizeKludge.$disabled; + SF.ForceResizeKludge(); }/*onSFLoaded()*/; })(); diff --git a/ext/wasm/fiddle/index.html b/ext/wasm/fiddle/index.html index 0196129549..36f07df460 100644 --- a/ext/wasm/fiddle/index.html +++ b/ext/wasm/fiddle/index.html @@ -249,45 +249,6 @@
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
@@ -368,6 +329,50 @@
+
+ Options +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ diff --git a/manifest b/manifest index 88cbbe0172..7ad82079dc 100644 --- a/manifest +++ b/manifest @@ -1,5 +1,5 @@ -C Fiddle:\smove\sthe\sAbout\sbutton\sinto\sthe\sheader\sbar\sand\sget\sit\sworking\stogether\swith\sthe\soptional\sjquery.terminal\sconsole\smode. -D 2025-08-02T13:21:07.208 +C Fiddle:\smake\sthe\stoolbar\svisible\sin\sterminal\smode\sand\shide\snon-terminal-mode\soptions\swhen\sin\sterminal\smode.\sMove\sthe\sterminal/split-view\stoggle\sbutton\sinto\sthe\stoolbar.\sImprove\sthe\sview-switching\shandling. +D 2025-08-02T14:50:01.640 F .fossil-settings/binary-glob 61195414528fb3ea9693577e1980230d78a1f8b0a54c78cf1b9b24d0a409ed6a x F .fossil-settings/empty-dirs dbb81e8fc0401ac46a1491ab34a7f2c7c0452f2f06b54ebb845d024ca8283ef1 F .fossil-settings/ignore-glob 35175cdfcf539b2318cb04a9901442804be81cd677d8b889fcc9149c21f239ea @@ -677,8 +677,8 @@ F ext/wasm/dist.make c29018b4db479a4c170569393e5399f0625446123a7eb6ffb0677495292 F ext/wasm/example_extra_init.c 2347cd69d19d839ef4e5e77b7855103a7fe3ef2af86f2e8c95839afd8b05862f F ext/wasm/fiddle.make ea505d11aa2a89551e1693ed4c71ee6a163364ca14f806dda295d0beb26ec0ea F ext/wasm/fiddle/fiddle-worker.js 50d3edf54c0c0e3657e876724ec2c10069f55f3e40af20864d72f6f6e9ad00f8 -F ext/wasm/fiddle/fiddle.js 384048afaf938680ce8bf4f7295256dd43ced7943c1172373742d34e379c8530 -F ext/wasm/fiddle/index.html 63051ab7ae7489f3b30dff7fd048f00b7bb7ba2bd6d8b2340fdaf646c18341f8 +F ext/wasm/fiddle/fiddle.js 7d98ce039cdaf0e34772361ef79ee72a608554770d9391d9aeadd117607c3aa5 +F ext/wasm/fiddle/index.html b9b8bdc37214f966a414ec566bacebeac2b425fc9658c53f45ae210e2039936a F ext/wasm/index-dist.html 56132399702b15d70c474c3f1952541e25cb0922942868f70daf188f024b3730 F ext/wasm/index.html bcaa00eca521b372a6a62c7e7b17a870b0fcdf3e418a5921df1fd61e5344080d F ext/wasm/jaccwabyt/jaccwabyt.js 6e4f26d0edb5c2e7d381b7eff1924832a040a12274afab2d1e1789027e9f6c5c @@ -2213,8 +2213,8 @@ F tool/version-info.c 3b36468a90faf1bbd59c65fd0eb66522d9f941eedd364fabccd7227350 F tool/warnings-clang.sh bbf6a1e685e534c92ec2bfba5b1745f34fb6f0bc2a362850723a9ee87c1b31a7 F tool/warnings.sh 1ad0169b022b280bcaaf94a7fa231591be96b514230ab5c98fbf15cd7df842dd F tool/win/sqlite.vsix deb315d026cc8400325c5863eef847784a219a2f -P 27d1d0100c0cb6e5c0c576be0f99209bb905f302008d8c257039adf8c5402f7d -R c1c07ea01fe59d26da505e28561c5adc +P 9639382c5478115df7c1584c14a52c176fe747df73078419be4ab276374a704b +R 8d2d94cbe7f96cac1102d564c99cc715 U stephan -Z 413b972a6b543fbfac24c1068223678c +Z 882bf2c74441b066f7345e22ae8890dc # Remove this line to create a well-formed Fossil manifest. diff --git a/manifest.uuid b/manifest.uuid index 48574e3a28..1037dfc449 100644 --- a/manifest.uuid +++ b/manifest.uuid @@ -1 +1 @@ -9639382c5478115df7c1584c14a52c176fe747df73078419be4ab276374a704b +711bf423d213a2c468c32a48c0b09927cdfdffce36e5e4a3b35a32bfa055ff82