add focuser. defer bindings until curtain opens

src/kiri/init.js

@@ -1071,14 +1071,15 @@
         SPACE.useDefaultKeys(API.feature.on_key === undefined || API.feature.on_key_defaults);
 
         Object.assign(UI, {
-            // from static HTML
-            load:               $('load-file'),
             alert: {
                 dialog:         $('alert-area'),
                 text:           $('alert-text')
             },
-            container:          container,
 
+            load:               $('load-file'),
+            focuser:            $('focuser'),
+
+            container:          container,
             menusep:            $('lt-sep'),
             rotate:             $('lt-rotate'),
             scale:              $('lt-scale'),
@@ -1568,27 +1569,6 @@
             API.modal.show('setup');
         }
 
-        // bind interface action elements
-        $('app-name').onclick = API.help.show;
-        $('app-mode').onclick = showSetup;
-        $('set-device').onclick = showSetup;
-        $('set-tools').onclick = showTools;
-        $('set-prefs').onclick = () => { API.modal.show('prefs') };
-        $('file-recent').onclick = () => { API.modal.show('files') };
-        $('file-import').onclick = API.event.import;
-        $('lt-action').onclick = API.platform.layout;
-        $('act-slice').onclick = (ev) => { ev.stopPropagation(); API.function.slice() };
-        $('act-preview').onclick = (ev) => { ev.stopPropagation(); API.function.print() };
-        $('act-export').onclick = (ev) => { ev.stopPropagation(); API.function.export() };
-        $('view-arrange').onclick = API.platform.layout;
-        $('view-top').onclick = SPACE.view.top;
-        $('view-home').onclick = SPACE.view.home;
-
-        $('mode-fdm').onclick = () => { API.mode.set('FDM') };
-        $('mode-sla').onclick = () => { API.mode.set('SLA') };
-        $('mode-cam').onclick = () => { API.mode.set('CAM') };
-        $('mode-laser').onclick = () => { API.mode.set('LASER') };
-
         function mksvg(src) {
             let svg = DOC.createElement('svg');
             svg.innerHTML = src;
@@ -1777,6 +1757,27 @@
 
         // lift curtain
         $('curtain').style.display = 'none';
+
+        // bind interface action elements
+        $('app-name').onclick = API.help.show;
+        $('app-mode').onclick = (ev) => { ev.stopPropagation(); showSetup() };
+        $('set-device').onclick = (ev) => { ev.stopPropagation(); showSetup() };
+        $('set-tools').onclick = (ev) => { ev.stopPropagation(); showTools() };
+        $('set-prefs').onclick = (ev) => { ev.stopPropagation(); API.modal.show('prefs') };
+        $('set-help').onclick = (ev) => { ev.stopPropagation(); API.help.show() };
+        $('file-recent').onclick = () => { API.modal.show('files') };
+        $('file-import').onclick = () => { API.event.import() };
+        $('lt-action').onclick = API.platform.layout;
+        $('act-slice').onclick = (ev) => { ev.stopPropagation(); API.function.slice() };
+        $('act-preview').onclick = (ev) => { ev.stopPropagation(); API.function.print() };
+        $('act-export').onclick = (ev) => { ev.stopPropagation(); API.function.export() };
+        $('view-arrange').onclick = API.platform.layout;
+        $('view-top').onclick = SPACE.view.top;
+        $('view-home').onclick = SPACE.view.home;
+        $('mode-fdm').onclick = () => { API.mode.set('FDM') };
+        $('mode-sla').onclick = () => { API.mode.set('SLA') };
+        $('mode-cam').onclick = () => { API.mode.set('CAM') };
+        $('mode-laser').onclick = () => { API.mode.set('LASER') };
     }
 
     // if a language needs to load, the script is injected and loaded

src/kiri/main.js

@@ -1833,7 +1833,7 @@
     }
 
     function setFocus(el) {
-        el = [ el || UI.load, DOC.body ];
+        el = [ el || UI.focuser, UI.load, UI.sizeX, DOC.body ];
         for (let es, i=0; i<el.length; i++) {
             es = el[i];
             es.focus();

web/kiri/index.css

@@ -79,7 +79,7 @@ select, textarea, button, input, a {
 }
 select {
     border: 1px solid #bbb;
-    background-color: white;
+    background-color: rgba(255,255,255,0.5);
     border-radius: 3px;
 }
 select option[local="1"] {
@@ -160,10 +160,10 @@ th, tr, td {
     left: 0;
     right: 0;
     bottom: 0;
-    position: absolute;
+    position: fixed;
     background-color: #fff;
     font-family: 'Russo One', sans-serif;
-    z-index: 100;
+    z-index: 11;
 }
 
 #tracker {
@@ -196,6 +196,9 @@ th, tr, td {
 #top > div {
     margin: 0 5px 0 5px;
 }
+#top, #mid-sep {
+    z-index: 15;
+}
 
 #app-mode, #app-acct {
     width: 125px;
@@ -534,7 +537,7 @@ th, tr, td {
     color: white;
 }
 .t-body {
-    background-color: white;
+    background-color: rgba(255,255,255,0.5);
     border: 1px solid #bbb;
     border-radius: 3px;
 }
@@ -732,3 +735,10 @@ th, tr, td {
     flex-direction: row;
     align-items: stretch;
 }
+
+#focuser {
+    position: fixed;
+    z-index: -100;
+    left: -100%;
+    top: -100%;
+}

web/kiri/index.html

@@ -21,6 +21,8 @@
     <script src="/code/kiri.js?{{version}}"></script>
 </head>
 <body class="col">
+    <input id="focuser" size=10></input>
+    <div id="curtain" class="j-center a-center">loading...</div>
     <div id="container"></div>
     <div id="tracker"></div>
     <div id="top" class="row">
@@ -47,8 +49,7 @@
     <div id="mid-sep"></div>
     <div id="mid" class="grow row">
         <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
-        <div id="curtain" class="j-center a-center">loading...</div>
+        <div id="mid-lcol" class="col j-center noshow">
-        <div id="mid-lcol" class="col j-center">
             <div id="lt-top"></div>
             <div id="lt-setup" class="lt-menu">
                 <i class="fas fa-cogs"></i>
@@ -66,6 +67,10 @@
                         <i class="fas fa-sliders-h"></i>
                         <label>prefs<label>
                     </div>
+                    <div id="set-help">
+                        <i class="far fa-question-circle"></i>
+                        <label>help<label>
+                    </div>
                 </div>
             </div>
             <div id="lt-file" class="lt-menu">
@@ -271,13 +276,13 @@
                 <div id="mod-local" class="mdialog"></div>
                 <div id="mod-print" class="mdialog"></div>
                 <!-- hidden file input loader -->
-                <input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
+                <input id="load-file" type="file" name="loadme" xstyle="display:none" accept=".stl,.gcode,.nc"/>
                 <div class="mod-end"></div>
 
                 </div>
             </div>
         </div>
-        <div id="mid-rcol" class="col j-center">
+        <div id="mid-rcol" class="col j-center noshow">
             <div id="set-menu" class="col">
                 <div id="set-top" class="set-group"><a>settings</a></div>
                 <div id="settings" class="col"></div>