ext/wasm/fiddle/index.html

   1 <!doctype html>
   2 <html lang="en-us">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6     <title>SQLite3 Fiddle</title>
   7     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
   8     <!-- to add a togglable terminal-style view, uncomment the following
   9          two lines and ensure that these files are on the web server. -->
  10     <!--script src="jqterm/jqterm-bundle.min.js"></script>
  11     <link rel="stylesheet" href="jqterm/jquery.terminal.min.css"/-->
  12     <link rel="stylesheet" href="emscripten.css"/>
  13     <style>
  14       /* The following styles are for app-level use. */
  15       :root {
  16           --sqlite-blue: #044a64;
  17           --textarea-color1: #044a64;
  18           --textarea-color2: white;
  19       }
  20       textarea {
  21           font-family: monospace;
  22           flex: 1 1 auto;
  23           background-color: var(--textarea-color1);
  24           color: var(--textarea-color2);
  25       }
  26       textarea#input {
  27           color: var(--textarea-color1);
  28           background-color: var(--textarea-color2);
  29       }
  30       header {
  31           display: flex;
  32           justify-content: space-between;
  33           align-items: center;
  34           background-color: var(--sqlite-blue);
  35           color: white;
  36           font-size: 120%;
  37           font-weight: bold;
  38           border-radius: 0.25em;
  39           padding: 0.2em 0.5em;
  40       }
  41       header > .powered-by {
  42           font-size: 80%;
  43       }
  44       header a, header a:visited, header a:hover {
  45           color: inherit;
  46       }
  47       #main-wrapper {
  48           display: flex;
  49           flex-direction: column-reverse;
  50           flex: 1 1 auto;
  51           margin: 0.5em 0;
  52           overflow: hidden;
  53       }
  54       #main-wrapper.side-by-side {
  55           flex-direction: row;
  56       }
  57       #main-wrapper.side-by-side > fieldset {
  58           margin-left: 0.25em;
  59           margin-right: 0.25em;
  60       }
  61       #main-wrapper:not(.side-by-side) > fieldset {
  62           margin-bottom: 0.25em;
  63       }
  64       #main-wrapper.swapio {
  65           flex-direction: column;
  66       }
  67       #main-wrapper.side-by-side.swapio {
  68           flex-direction: row-reverse;
  69       }
  70       .zone-wrapper{
  71           display: flex;
  72           margin: 0;
  73           flex: 1 1 0%;
  74           border-radius: 0.5em;
  75           min-width: inherit/*important: resolves inability to scroll fieldset child element!*/;
  76           padding: 0.35em 0 0 0;
  77       }
  78       .zone-wrapper textarea {
  79           border-radius: 0.5em;
  80           flex: 1 1 auto;
  81           /*min/max width resolve an inexplicable margin on the RHS.  The -1em
  82             is for the padding, else we overlap the parent boundaries.*/
  83           /*min-width: calc(100% - 1em);
  84           max-width: calc(100% - 1em);
  85           padding: 0 0.5em;*/
  86       }
  87
  88       .zone-wrapper.input { flex: 10 1 auto; }
  89       .zone-wrapper.output { flex: 20 1 auto; }
  90       .zone-wrapper > div {
  91           display:flex;
  92           flex: 1 1 0%;
  93       }
  94       .zone-wrapper.output {}
  95       .button-bar {
  96           display: flex;
  97           flex-wrap: wrap;
  98           align-items: center;
  99           align-content: space-between;
 100           justify-content: flex-start;
 101       }
 102       .button-bar > * {
 103           margin: 0.05em 0.5em 0.05em 0;
 104           flex: 0 1 auto;
 105           align-self: auto;
 106       }
 107       label[for] {
 108           cursor: pointer;
 109       }
 110       .error {
 111           color: red;
 112           background-color: yellow;
 113       }
 114       .hidden, .initially-hidden {
 115           position: absolute !important;
 116           opacity: 0 !important;
 117           pointer-events: none !important;
 118           display: none !important;
 119       }
 120       fieldset {
 121           border-radius: 0.5em;
 122           border: 1px inset;
 123           padding: 0.25em;
 124       }
 125       fieldset.options {
 126           font-size: 80%;
 127           margin-top: 0.5em;
 128       }
 129       fieldset:not(.options) > legend {
 130           font-size: 80%;
 131       }
 132       fieldset.options > div {
 133           display: flex;
 134           flex-wrap: wrap;
 135       }
 136       fieldset button {
 137           font-size: inherit;
 138       }
 139       fieldset.collapsible > legend > .fieldset-toggle::after {
 140           content: " [hide]";
 141           position: relative;
 142       }
 143       fieldset.collapsible.collapsed > legend > .fieldset-toggle::after {
 144           content: " [show]";
 145           position: relative;
 146       }
 147       span.labeled-input {
 148           padding: 0.25em;
 149           margin: 0.05em 0.25em;
 150           border-radius: 0.25em;
 151           white-space: nowrap;
 152           background: #0002;
 153           display: flex;
 154           align-items: center;
 155       }
 156       span.labeled-input > *:nth-child(2) {
 157           margin-left: 0.3em;
 158       }
 159       .center { text-align: center; }
 160       body.terminal-mode {
 161           max-height: calc(100% - 2em);
 162           display: flex;
 163           flex-direction: column;
 164           align-items: stretch;
 165       }
 166       #view-terminal {}
 167       .app-view {
 168           flex: 20 1 auto;
 169       }
 170       #view-split {
 171           display: flex;
 172           flex-direction: column-reverse;
 173       }
 174     </style>
 175   </head>
 176   <body>
 177     <header id='titlebar'>
 178       <span>SQLite3 Fiddle</span>
 179       <span class='powered-by'>Powered by
 180         <a href='https://sqlite.org'>SQLite3</a></span>
 181     </header>
 182     <!-- emscripten bits -->
 183     <figure id="module-spinner">
 184       <div class="spinner"></div>
 185       <div class='center'><strong>Initializing app...</strong></div>
 186       <div class='center'>
 187         On a slow internet connection this may take a moment.  If this
 188         message displays for "a long time", intialization may have
 189         failed and the JavaScript console may contain clues as to why.
 190       </div>
 191     </figure>
 192     <div class="emscripten" id="module-status">Downloading...</div>
 193     <div class="emscripten">
 194       <progress value="0" max="100" id="module-progress" hidden='1'></progress>
 195     </div><!-- /emscripten bits -->
 196
 197     <div id='view-terminal' class='app-view hidden initially-hidden'>
 198       This is a placeholder for a terminal-like view which is not in
 199       the default build.
 200     </div>
 201
 202     <div id='view-split' class='app-view initially-hidden'>
 203       <fieldset class='options collapsible'>
 204         <legend><button class='fieldset-toggle'>Options</button></legend>
 205         <div class=''>
 206           <span class='labeled-input'>
 207             <input type='checkbox' id='opt-cb-sbs'
 208                    data-csstgt='#main-wrapper'
 209                    data-cssclass='side-by-side'
 210                    data-config='sideBySide'>
 211             <label for='opt-cb-sbs'>Side-by-side</label>
 212           </span>
 213           <span class='labeled-input'>
 214             <input type='checkbox' id='opt-cb-swapio'
 215                    data-csstgt='#main-wrapper'
 216                    data-cssclass='swapio'
 217                    data-config='swapInOut'>
 218             <label for='opt-cb-swapio'>Swap in/out</label>
 219           </span>
 220           <span class='labeled-input'>
 221             <input type='checkbox' id='opt-cb-autoscroll'
 222                    data-config='autoScrollOutput'>
 223             <label for='opt-cb-autoscroll'>Auto-scroll output</label>
 224           </span>
 225           <span class='labeled-input'>
 226             <input type='checkbox' id='opt-cb-autoclear'
 227                    data-config='autoClearOutput'>
 228             <label for='opt-cb-autoclear'>Auto-clear output</label>
 229           </span>
 230           <span class='labeled-input'>
 231             <input type='file' id='load-db' class='hidden'/>
 232             <button id='btn-load-db'>Load DB...</button>
 233           </span>
 234           <span class='labeled-input'>
 235             <button id='btn-export'>Download DB</button>
 236           </span>
 237           <span class='labeled-input'>
 238             <button id='btn-reset'>Reset DB</button>
 239           </span>
 240         </div>
 241       </fieldset><!-- .options -->
 242       <div id='main-wrapper' class=''>
 243         <fieldset class='zone-wrapper input'>
 244           <legend><div class='button-bar'>
 245             <button id='btn-shell-exec'>Run</button>
 246             <button id='btn-clear'>Clear Input</button>
 247             <!--button data-cmd='.help'>Help</button-->
 248             <select id='select-examples'></select>
 249           </div></legend>
 250           <div><textarea id="input"
 251                          placeholder="Shell input. Ctrl-enter/shift-enter runs it.">
 252 -- ==================================================
 253 -- Use ctrl-enter or shift-enter to execute sqlite3
 254 -- shell commands and SQL.
 255 -- If a subset of the text is currently selected,
 256 -- only that part is executed.
 257 -- ==================================================
 258 .nullvalue NULL
 259 .headers on
 260 </textarea></div>
 261         </fieldset>
 262         <fieldset class='zone-wrapper output'>
 263           <legend><div class='button-bar'>
 264             <button id='btn-clear-output'>Clear Output</button>
 265             <button id='btn-interrupt' class='hidden' disabled>Interrupt</button>
 266             <!-- interruption cannot work in the current configuration
 267                  because we cannot send an interrupt message when work
 268                  is currently underway. At that point the Worker is
 269                  tied up and will not receive the message. -->
 270           </div></legend>
 271           <div><textarea id="output" readonly
 272                          placeholder="Shell output."></textarea></div>
 273         </fieldset>
 274       </div>
 275     </div> <!-- #view-split -->
 276     <script src="fiddle.js"></script>
 277   </body>
 278 </html>