| /* |
| 2022-05-20 |
| |
| The author disclaims copyright to this source code. In place of a |
| legal notice, here is a blessing: |
| |
| * May you do good and not evil. |
| * May you find forgiveness for yourself and forgive others. |
| * May you share freely, never taking more than you give. |
| |
| *********************************************************************** |
| |
| This is the main entry point for the sqlite3 fiddle app. It sets up the |
| various UI bits, loads a Worker for the db connection, and manages the |
| communication between the UI and worker. |
| */ |
| (function(){ |
| 'use strict'; |
| /* Recall that the 'self' symbol, except where locally |
| overwritten, refers to the global window or worker object. */ |
| |
| const storage = (function(NS/*namespace object in which to store this module*/){ |
| /* Pedantic licensing note: this code originated in the Fossil SCM |
| source tree, where it has a different license, but the person who |
| ported it into sqlite is the same one who wrote it for fossil. */ |
| 'use strict'; |
| NS = NS||{}; |
| |
| /** |
| This module provides a basic wrapper around localStorage |
| or sessionStorage or a dummy proxy object if neither |
| of those are available. |
| */ |
| const tryStorage = function f(obj){ |
| if(!f.key) f.key = 'storage.access.check'; |
| try{ |
| obj.setItem(f.key, 'f'); |
| const x = obj.getItem(f.key); |
| obj.removeItem(f.key); |
| if(x!=='f') throw new Error(f.key+" failed") |
| return obj; |
| }catch(e){ |
| return undefined; |
| } |
| }; |
| |
| /** Internal storage impl for this module. */ |
| const $storage = |
| tryStorage(window.localStorage) |
| || tryStorage(window.sessionStorage) |
| || tryStorage({ |
| // A basic dummy xyzStorage stand-in |
| $$$:{}, |
| setItem: function(k,v){this.$$$[k]=v}, |
| getItem: function(k){ |
| return this.$$$.hasOwnProperty(k) ? this.$$$[k] : undefined; |
| }, |
| removeItem: function(k){delete this.$$$[k]}, |
| clear: function(){this.$$$={}} |
| }); |
| |
| /** |
| For the dummy storage we need to differentiate between |
| $storage and its real property storage for hasOwnProperty() |
| to work properly... |
| */ |
| const $storageHolder = $storage.hasOwnProperty('$$$') ? $storage.$$$ : $storage; |
| |
| /** |
| A prefix which gets internally applied to all storage module |
| property keys so that localStorage and sessionStorage across the |
| same browser profile instance do not "leak" across multiple apps |
| being hosted by the same origin server. Such cross-polination is |
| still there but, with this key prefix applied, it won't be |
| immediately visible via the storage API. |
| |
| With this in place we can justify using localStorage instead of |
| sessionStorage. |
| |
| One implication of using localStorage and sessionStorage is that |
| their scope (the same "origin" and client application/profile) |
| allows multiple apps on the same origin to use the same |
| storage. Thus /appA/foo could then see changes made via |
| /appB/foo. The data do not cross user- or browser boundaries, |
| though, so it "might" arguably be called a |
| feature. storageKeyPrefix was added so that we can sandbox that |
| state for each separate app which shares an origin. |
| |
| See: https://fossil-scm.org/forum/forumpost/4afc4d34de |
| |
| Sidebar: it might seem odd to provide a key prefix and stick all |
| properties in the topmost level of the storage object. We do that |
| because adding a layer of object to sandbox each app would mean |
| (de)serializing that whole tree on every storage property change. |
| e.g. instead of storageObject.projectName.foo we have |
| storageObject[storageKeyPrefix+'foo']. That's soley for |
| efficiency's sake (in terms of battery life and |
| environment-internal storage-level effort). |
| */ |
| const storageKeyPrefix = ( |
| $storageHolder===$storage/*localStorage or sessionStorage*/ |
| ? ( |
| (NS.config ? |
| (NS.config.projectCode || NS.config.projectName |
| || NS.config.shortProjectName) |
| : false) |
| || window.location.pathname |
| )+'::' : ( |
| '' /* transient storage */ |
| ) |
| ); |
| |
| /** |
| A proxy for localStorage or sessionStorage or a |
| page-instance-local proxy, if neither one is availble. |
| |
| Which exact storage implementation is uses is unspecified, and |
| apps must not rely on it. |
| */ |
| NS.storage = { |
| storageKeyPrefix: storageKeyPrefix, |
| /** Sets the storage key k to value v, implicitly converting |
| it to a string. */ |
| set: (k,v)=>$storage.setItem(storageKeyPrefix+k,v), |
| /** Sets storage key k to JSON.stringify(v). */ |
| setJSON: (k,v)=>$storage.setItem(storageKeyPrefix+k,JSON.stringify(v)), |
| /** Returns the value for the given storage key, or |
| dflt if the key is not found in the storage. */ |
| get: (k,dflt)=>$storageHolder.hasOwnProperty( |
| storageKeyPrefix+k |
| ) ? $storage.getItem(storageKeyPrefix+k) : dflt, |
| /** Returns true if the given key has a value of "true". If the |
| key is not found, it returns true if the boolean value of dflt |
| is "true". (Remember that JS persistent storage values are all |
| strings.) */ |
| getBool: function(k,dflt){ |
| return 'true'===this.get(k,''+(!!dflt)); |
| }, |
| /** Returns the JSON.parse()'d value of the given |
| storage key's value, or dflt is the key is not |
| found or JSON.parse() fails. */ |
| getJSON: function f(k,dflt){ |
| try { |
| const x = this.get(k,f); |
| return x===f ? dflt : JSON.parse(x); |
| } |
| catch(e){return dflt} |
| }, |
| /** Returns true if the storage contains the given key, |
| else false. */ |
| contains: (k)=>$storageHolder.hasOwnProperty(storageKeyPrefix+k), |
| /** Removes the given key from the storage. Returns this. */ |
| remove: function(k){ |
| $storage.removeItem(storageKeyPrefix+k); |
| return this; |
| }, |
| /** Clears ALL keys from the storage. Returns this. */ |
| clear: function(){ |
| this.keys().forEach((k)=>$storage.removeItem(/*w/o prefix*/k)); |
| return this; |
| }, |
| /** Returns an array of all keys currently in the storage. */ |
| keys: ()=>Object.keys($storageHolder).filter((v)=>(v||'').startsWith(storageKeyPrefix)), |
| /** Returns true if this storage is transient (only available |
| until the page is reloaded), indicating that fileStorage |
| and sessionStorage are unavailable. */ |
| isTransient: ()=>$storageHolder!==$storage, |
| /** Returns a symbolic name for the current storage mechanism. */ |
| storageImplName: function(){ |
| if($storage===window.localStorage) return 'localStorage'; |
| else if($storage===window.sessionStorage) return 'sessionStorage'; |
| else return 'transient'; |
| }, |
| |
| /** |
| Returns a brief help text string for the currently-selected |
| storage type. |
| */ |
| storageHelpDescription: function(){ |
| return { |
| localStorage: "Browser-local persistent storage with an "+ |
| "unspecified long-term lifetime (survives closing the browser, "+ |
| "but maybe not a browser upgrade).", |
| sessionStorage: "Storage local to this browser tab, "+ |
| "lost if this tab is closed.", |
| "transient": "Transient storage local to this invocation of this page." |
| }[this.storageImplName()]; |
| } |
| }; |
| return NS.storage; |
| })({})/*storage API setup*/; |
| |
| |
| /** Name of the stored copy of SqliteFiddle.config. */ |
| const configStorageKey = 'sqlite3-fiddle-config'; |
| |
| /** |
| The SqliteFiddle object is intended to be the primary |
| app-level object for the main-thread side of the sqlite |
| fiddle application. It uses a worker thread to load the |
| sqlite WASM module and communicate with it. |
| */ |
| const SF/*local convenience alias*/ |
| = window.SqliteFiddle/*canonical name*/ = { |
| /* Config options. */ |
| config: { |
| /* If true, SqliteFiddle.echo() will auto-scroll the |
| output widget to the bottom when it receives output, |
| else it won't. */ |
| autoScrollOutput: true, |
| /* If true, the output area will be cleared before each |
| command is run, else it will not. */ |
| autoClearOutput: false, |
| /* If true, SqliteFiddle.echo() will echo its output to |
| the console, in addition to its normal output widget. |
| That slows it down but is useful for testing. */ |
| echoToConsole: false, |
| /* If true, display input/output areas side-by-side. */ |
| sideBySide: true, |
| /* If true, swap positions of the input/output areas. */ |
| swapInOut: false |
| }, |
| /** |
| Emits the given text, followed by a line break, to the |
| output widget. If given more than one argument, they are |
| join()'d together with a space between each. As a special |
| case, if passed a single array, that array is used in place |
| of the arguments array (this is to facilitate receiving |
| lists of arguments via worker events). |
| */ |
| echo: function f(text) { |
| /* Maintenance reminder: we currently require/expect a textarea |
| output element. It might be nice to extend this to behave |
| differently if the output element is a non-textarea element, |
| in which case it would need to append the given text as a TEXT |
| node and add a line break. */ |
| if(!f._){ |
| f._ = document.getElementById('output'); |
| f._.value = ''; // clear browser cache |
| } |
| if(arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); |
| else if(1===arguments.length && Array.isArray(text)) text = text.join(' '); |
| // These replacements are necessary if you render to raw HTML |
| //text = text.replace(/&/g, "&"); |
| //text = text.replace(/</g, "<"); |
| //text = text.replace(/>/g, ">"); |
| //text = text.replace('\n', '<br>', 'g'); |
| if(null===text){/*special case: clear output*/ |
| f._.value = ''; |
| return; |
| }else if(this.echo._clearPending){ |
| delete this.echo._clearPending; |
| f._.value = ''; |
| } |
| if(this.config.echoToConsole) console.log(text); |
| if(this.jqTerm) this.jqTerm.echo(text); |
| f._.value += text + "\n"; |
| if(this.config.autoScrollOutput){ |
| f._.scrollTop = f._.scrollHeight; |
| } |
| }, |
| _msgMap: {}, |
| /** Adds a worker message handler for messages of the given |
| type. */ |
| addMsgHandler: function f(type,callback){ |
| if(Array.isArray(type)){ |
| type.forEach((t)=>this.addMsgHandler(t, callback)); |
| return this; |
| } |
| (this._msgMap.hasOwnProperty(type) |
| ? this._msgMap[type] |
| : (this._msgMap[type] = [])).push(callback); |
| return this; |
| }, |
| /** Given a worker message, runs all handlers for msg.type. */ |
| runMsgHandlers: function(msg){ |
| const list = (this._msgMap.hasOwnProperty(msg.type) |
| ? this._msgMap[msg.type] : false); |
| if(!list){ |
| console.warn("No handlers found for message type:",msg); |
| return false; |
| } |
| //console.debug("runMsgHandlers",msg); |
| list.forEach((f)=>f(msg)); |
| return true; |
| }, |
| /** Removes all message handlers for the given message type. */ |
| clearMsgHandlers: function(type){ |
| delete this._msgMap[type]; |
| return this; |
| }, |
| /* Posts a message in the form {type, data} to the db worker. Returns this. */ |
| wMsg: function(type,data,transferables){ |
| this.worker.postMessage({type, data}, transferables || []); |
| return this; |
| }, |
| /** |
| Prompts for confirmation and, if accepted, deletes |
| all content and tables in the (transient) database. |
| */ |
| resetDb: function(){ |
| if(window.confirm("Really destroy all content and tables " |
| +"in the (transient) db?")){ |
| this.wMsg('db-reset'); |
| } |
| return this; |
| }, |
| /** Stores this object's config in the browser's storage. */ |
| storeConfig: function(){ |
| storage.setJSON(configStorageKey,this.config); |
| } |
| }; |
| |
| if(1){ /* Restore SF.config */ |
| const storedConfig = storage.getJSON(configStorageKey); |
| if(storedConfig){ |
| /* Copy all properties to SF.config which are currently in |
| storedConfig. We don't bother copying any other |
| properties: those have been removed from the app in the |
| meantime. */ |
| Object.keys(SF.config).forEach(function(k){ |
| if(storedConfig.hasOwnProperty(k)){ |
| SF.config[k] = storedConfig[k]; |
| } |
| }); |
| } |
| } |
| |
| SF.worker = new Worker('fiddle-worker.js'+self.location.search); |
| SF.worker.onmessage = (ev)=>SF.runMsgHandlers(ev.data); |
| SF.addMsgHandler(['stdout', 'stderr'], (ev)=>SF.echo(ev.data)); |
| |
| /* querySelectorAll() proxy */ |
| const EAll = function(/*[element=document,] cssSelector*/){ |
| return (arguments.length>1 ? arguments[0] : document) |
| .querySelectorAll(arguments[arguments.length-1]); |
| }; |
| /* querySelector() proxy */ |
| const E = function(/*[element=document,] cssSelector*/){ |
| return (arguments.length>1 ? arguments[0] : document) |
| .querySelector(arguments[arguments.length-1]); |
| }; |
| |
| /** Handles status updates from the Emscripten Module object. */ |
| SF.addMsgHandler('module', function f(ev){ |
| ev = ev.data; |
| if('status'!==ev.type){ |
| console.warn("Unexpected module-type message:",ev); |
| return; |
| } |
| if(!f.ui){ |
| f.ui = { |
| status: E('#module-status'), |
| progress: E('#module-progress'), |
| spinner: E('#module-spinner') |
| }; |
| } |
| const msg = ev.data; |
| if(f.ui.progres){ |
| progress.value = msg.step; |
| progress.max = msg.step + 1/*we don't know how many steps to expect*/; |
| } |
| if(1==msg.step){ |
| f.ui.progress.classList.remove('hidden'); |
| f.ui.spinner.classList.remove('hidden'); |
| } |
| if(msg.text){ |
| f.ui.status.classList.remove('hidden'); |
| f.ui.status.innerText = msg.text; |
| }else{ |
| if(f.ui.progress){ |
| f.ui.progress.remove(); |
| f.ui.spinner.remove(); |
| delete f.ui.progress; |
| delete f.ui.spinner; |
| } |
| f.ui.status.classList.add('hidden'); |
| /* The module can post messages about fatal problems, |
| e.g. an exit() being triggered or assertion failure, |
| after the last "load" message has arrived, so |
| leave f.ui.status and message listener intact. */ |
| } |
| }); |
| |
| /** |
| The 'fiddle-ready' event is fired (with no payload) when the |
| wasm module has finished loading. Interestingly, that happens |
| _before_ the final module:status event */ |
| SF.addMsgHandler('fiddle-ready', function(){ |
| SF.clearMsgHandlers('fiddle-ready'); |
| self.onSFLoaded(); |
| }); |
| |
| /** |
| Performs all app initialization which must wait until after the |
| worker module is loaded. This function removes itself when it's |
| called. |
| */ |
| self.onSFLoaded = function(){ |
| delete this.onSFLoaded; |
| // Unhide all elements which start out hidden |
| EAll('.initially-hidden').forEach((e)=>e.classList.remove('initially-hidden')); |
| E('#btn-reset').addEventListener('click',()=>SF.resetDb()); |
| const taInput = E('#input'); |
| const btnClearIn = E('#btn-clear'); |
| btnClearIn.addEventListener('click',function(){ |
| taInput.value = ''; |
| },false); |
| // Ctrl-enter and shift-enter both run the current SQL. |
| taInput.addEventListener('keydown',function(ev){ |
| if((ev.ctrlKey || ev.shiftKey) && 13 === ev.keyCode){ |
| ev.preventDefault(); |
| ev.stopPropagation(); |
| btnShellExec.click(); |
| } |
| }, false); |
| const taOutput = E('#output'); |
| const btnClearOut = E('#btn-clear-output'); |
| btnClearOut.addEventListener('click',function(){ |
| taOutput.value = ''; |
| if(SF.jqTerm) SF.jqTerm.clear(); |
| },false); |
| const btnShellExec = E('#btn-shell-exec'); |
| btnShellExec.addEventListener('click',function(ev){ |
| let sql; |
| ev.preventDefault(); |
| if(taInput.selectionStart<taInput.selectionEnd){ |
| sql = taInput.value.substring(taInput.selectionStart,taInput.selectionEnd).trim(); |
| }else{ |
| sql = taInput.value.trim(); |
| } |
| if(sql) SF.dbExec(sql); |
| },false); |
| |
| const btnInterrupt = E("#btn-interrupt"); |
| //btnInterrupt.classList.add('hidden'); |
| /** To be called immediately before work is sent to the |
| worker. Updates some UI elements. The 'working'/'end' |
| event will apply the inverse, undoing the bits this |
| function does. This impl is not in the 'working'/'start' |
| event handler because that event is given to us |
| asynchronously _after_ we need to have performed this |
| work. |
| */ |
| const preStartWork = function f(){ |
| if(!f._){ |
| const title = E('title'); |
| f._ = { |
| btnLabel: btnShellExec.innerText, |
| pageTitle: title, |
| pageTitleOrig: title.innerText |
| }; |
| } |
| f._.pageTitle.innerText = "[working...] "+f._.pageTitleOrig; |
| btnShellExec.setAttribute('disabled','disabled'); |
| btnInterrupt.removeAttribute('disabled','disabled'); |
| }; |
| |
| /* Sends the given text to the db module to evaluate as if it |
| had been entered in the sqlite3 CLI shell. If it's null or |
| empty, this is a no-op. */ |
| SF.dbExec = function f(sql){ |
| if(null!==sql && this.config.autoClearOutput){ |
| this.echo._clearPending = true; |
| } |
| preStartWork(); |
| this.wMsg('shellExec',sql); |
| }; |
| |
| SF.addMsgHandler('working',function f(ev){ |
| switch(ev.data){ |
| case 'start': /* See notes in preStartWork(). */; return; |
| case 'end': |
| preStartWork._.pageTitle.innerText = preStartWork._.pageTitleOrig; |
| btnShellExec.innerText = preStartWork._.btnLabel; |
| btnShellExec.removeAttribute('disabled'); |
| btnInterrupt.setAttribute('disabled','disabled'); |
| return; |
| } |
| console.warn("Unhandled 'working' event:",ev.data); |
| }); |
| |
| /* For each checkbox 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 |
| SF.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){ |
| const confVal = !!SF.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(){ |
| SF.config[this.dataset.config] = this.checked; |
| SF.storeConfig(); |
| }, false); |
| }); |
| /* For each button with data-cmd=X, map a click handler which |
| calls SF.dbExec(X). */ |
| const cmdClick = function(){SF.dbExec(this.dataset.cmd);}; |
| EAll('button[data-cmd]').forEach( |
| e => e.addEventListener('click', cmdClick, false) |
| ); |
| |
| btnInterrupt.addEventListener('click',function(){ |
| SF.wMsg('interrupt'); |
| }); |
| |
| /** Initiate a download of the db. */ |
| const btnExport = E('#btn-export'); |
| const eLoadDb = E('#load-db'); |
| const btnLoadDb = E('#btn-load-db'); |
| btnLoadDb.addEventListener('click', ()=>eLoadDb.click()); |
| /** |
| Enables (if passed true) or disables all UI elements which |
| "might," if timed "just right," interfere with an |
| in-progress db import/export/exec operation. |
| */ |
| const enableMutatingElements = function f(enable){ |
| if(!f._elems){ |
| f._elems = [ |
| /* UI elements to disable while import/export are |
| running. Normally the export is fast enough |
| that this won't matter, but we really don't |
| want to be reading (from outside of sqlite) the |
| db when the user taps btnShellExec. */ |
| btnShellExec, btnExport, eLoadDb |
| ]; |
| } |
| f._elems.forEach( enable |
| ? (e)=>e.removeAttribute('disabled') |
| : (e)=>e.setAttribute('disabled','disabled') ); |
| }; |
| btnExport.addEventListener('click',function(){ |
| enableMutatingElements(false); |
| SF.wMsg('db-export'); |
| }); |
| SF.addMsgHandler('db-export', function(ev){ |
| enableMutatingElements(true); |
| ev = ev.data; |
| if(ev.error){ |
| SF.echo("Export failed:",ev.error); |
| return; |
| } |
| const blob = new Blob([ev.buffer], |
| {type:"application/x-sqlite3"}); |
| const a = document.createElement('a'); |
| document.body.appendChild(a); |
| a.href = window.URL.createObjectURL(blob); |
| a.download = ev.filename; |
| a.addEventListener('click',function(){ |
| setTimeout(function(){ |
| SF.echo("Exported (possibly auto-downloaded):",ev.filename); |
| window.URL.revokeObjectURL(a.href); |
| a.remove(); |
| },500); |
| }); |
| a.click(); |
| }); |
| /** |
| Handle load/import of an external db file. |
| */ |
| eLoadDb.addEventListener('change',function(){ |
| const f = this.files[0]; |
| const r = new FileReader(); |
| const status = {loaded: 0, total: 0}; |
| enableMutatingElements(false); |
| r.addEventListener('loadstart', function(){ |
| SF.echo("Loading",f.name,"..."); |
| }); |
| r.addEventListener('progress', function(ev){ |
| SF.echo("Loading progress:",ev.loaded,"of",ev.total,"bytes."); |
| }); |
| const that = this; |
| r.addEventListener('load', function(){ |
| enableMutatingElements(true); |
| SF.echo("Loaded",f.name+". Opening db..."); |
| SF.wMsg('open',{ |
| filename: f.name, |
| buffer: this.result |
| }, [this.result]); |
| }); |
| r.addEventListener('error',function(){ |
| enableMutatingElements(true); |
| SF.echo("Loading",f.name,"failed for unknown reasons."); |
| }); |
| r.addEventListener('abort',function(){ |
| enableMutatingElements(true); |
| SF.echo("Cancelled loading of",f.name+"."); |
| }); |
| r.readAsArrayBuffer(f); |
| }); |
| |
| EAll('fieldset.collapsible').forEach(function(fs){ |
| const btnToggle = E(fs,'legend > .fieldset-toggle'), |
| content = EAll(fs,':scope > div'); |
| btnToggle.addEventListener('click', function(){ |
| fs.classList.toggle('collapsed'); |
| content.forEach((d)=>d.classList.toggle('hidden')); |
| }, 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'); |
| const examples = [ |
| {name: "Help", sql: [ |
| "-- ================================================\n", |
| "-- Use ctrl-enter or shift-enter to execute sqlite3\n", |
| "-- shell commands and SQL.\n", |
| "-- If a subset of the text is currently selected,\n", |
| "-- only that part is executed.\n", |
| "-- ================================================\n", |
| ".help\n" |
| ]}, |
| //{name: "Timer on", sql: ".timer on"}, |
| // ^^^ re-enable if emscripten re-enables getrusage() |
| {name: "Setup table T", sql:[ |
| ".nullvalue NULL\n", |
| "CREATE TABLE t(a,b);\n", |
| "INSERT INTO t(a,b) VALUES('abc',123),('def',456),(NULL,789),('ghi',012);\n", |
| "SELECT * FROM t;\n" |
| ]}, |
| {name: "Table list", sql: ".tables"}, |
| {name: "Box Mode", sql: ".mode box"}, |
| {name: "JSON Mode", sql: ".mode json"}, |
| {name: "Mandlebrot", sql:[ |
| "WITH RECURSIVE", |
| " xaxis(x) AS (VALUES(-2.0) UNION ALL SELECT x+0.05 FROM xaxis WHERE x<1.2),\n", |
| " yaxis(y) AS (VALUES(-1.0) UNION ALL SELECT y+0.1 FROM yaxis WHERE y<1.0),\n", |
| " m(iter, cx, cy, x, y) AS (\n", |
| " SELECT 0, x, y, 0.0, 0.0 FROM xaxis, yaxis\n", |
| " UNION ALL\n", |
| " SELECT iter+1, cx, cy, x*x-y*y + cx, 2.0*x*y + cy FROM m \n", |
| " WHERE (x*x + y*y) < 4.0 AND iter<28\n", |
| " ),\n", |
| " m2(iter, cx, cy) AS (\n", |
| " SELECT max(iter), cx, cy FROM m GROUP BY cx, cy\n", |
| " ),\n", |
| " a(t) AS (\n", |
| " SELECT group_concat( substr(' .+*#', 1+min(iter/7,4), 1), '') \n", |
| " FROM m2 GROUP BY cy\n", |
| " )\n", |
| "SELECT group_concat(rtrim(t),x'0a') as Mandelbrot FROM a;\n", |
| ]} |
| ]; |
| const newOpt = function(lbl,val){ |
| const o = document.createElement('option'); |
| if(Array.isArray(val)) val = val.join(''); |
| o.value = val; |
| if(!val) o.setAttribute('disabled',true); |
| o.appendChild(document.createTextNode(lbl)); |
| xElem.appendChild(o); |
| }; |
| newOpt("Examples (replaces input!)"); |
| examples.forEach((o)=>newOpt(o.name, o.sql)); |
| //xElem.setAttribute('disabled',true); |
| xElem.selectedIndex = 0; |
| xElem.addEventListener('change', function(){ |
| taInput.value = '-- ' + |
| this.selectedOptions[0].innerText + |
| '\n' + this.value; |
| SF.dbExec(this.value); |
| }); |
| })()/* example queries */; |
| |
| //SF.echo(null/*clear any output generated by the init process*/); |
| if(window.jQuery && window.jQuery.terminal){ |
| /* Set up the terminal-style view... */ |
| const eTerm = window.jQuery('#view-terminal').empty(); |
| SF.jqTerm = eTerm.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('header#titlebar'); |
| const btnToggleView = document.createElement('button'); |
| btnToggleView.appendChild(document.createTextNode("Toggle View")); |
| head.appendChild(btnToggleView); |
| btnToggleView.addEventListener('click',function f(){ |
| EAll('.app-view').forEach(e=>e.classList.toggle('hidden')); |
| if(document.body.classList.toggle('terminal-mode')){ |
| ForceResizeKludge(); |
| } |
| }, false); |
| btnToggleView.click()/*default to terminal view*/; |
| } |
| SF.echo('This experimental app is provided in the hope that it', |
| 'may prove interesting or useful but is not an officially', |
| 'supported deliverable of the sqlite project. It is subject to', |
| 'any number of changes or outright removal at any time.\n'); |
| const urlParams = new URL(self.location.href).searchParams; |
| SF.dbExec(urlParams.get('sql') || null); |
| delete ForceResizeKludge.$disabled; |
| ForceResizeKludge(); |
| }/*onSFLoaded()*/; |
| })(); |
