/*
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()*/;
})();