stub in new help framework

src/kiri/conf.js

@@ -404,7 +404,7 @@
                     camRoughPlunge: 250,
                     camRoughStock: 0,
                     camRoughVoid: false,
-                    camRoughFlat: false,
+                    camRoughFlat: true,
                     camRoughIn: false,
                     camRoughOn: true,
                     camOutlineTool: 1000,

src/kiri/main.js

@@ -1897,10 +1897,28 @@
     }
 
     function showHelp() {
-        showHelpFile(`/kiri/lang/${KIRI.lang.get()}-help.html?${KIRI.version}`);
+        showHelpFile(`/kiri/lang/${KIRI.lang.get()}-help.html?${KIRI.version}`,() => {
+            return;
+            const sel = $('help-sel');
+            const labels = [...sel.getElementsByTagName('div')];
+            const tabs = [];
+            const click = (label, tab) => {
+                labels.forEach(l => l.classList.remove('sel'));
+                label.classList.add('sel');
+                tabs.forEach(t => t.style.display = 'none');
+                tab.style.display = 'flex';
+            };
+            labels.forEach(label => {
+                const name = label.getAttribute('tab');
+                const tab = $(`help-tab-${name}`);
+                tabs.push(tab);
+                label.onclick = () => { click(label, tab) };
+            });
+            click(labels[0], tabs[0]);
+        });
     }
 
-    function showHelpFile(local) {
+    function showHelpFile(local,then) {
         if (!local) {
             WIN.open("//wiki.grid.space/wiki/Kiri:Moto", "_help");
             return;
@@ -1910,6 +1928,9 @@
             try {
                 $('kiri-version').innerHTML = `${LANG.version} ${KIRI.version}`;
             } catch (e) { }
+            if (then) {
+                then();
+            }
             showModal('help');
         });
         API.event.emit('help.show', local);

web/kiri/index.css

@@ -705,6 +705,20 @@ th, tr, td, label {
 #help-right {
     padding-left: 3px;
 }
+.help-label {
+    border: 1px solid rgba(0,0,0,0);
+    border-right: 0;
+    padding: 5px;
+}
+.help-label.sel {
+    border: 1px solid #888;
+    border-right: 0;
+}
+.help-tab {
+    display: none;
+    border: 1px solid #888;
+    padding: 5px;
+}
 .confirm {
     padding-top: 15px;
 }

web/kiri/lang/en-help.html

@@ -1,3 +1,18 @@
+<!--
+<div id="help" class="f-row">
+
+    <div id="help-sel" class="f-col">
+        <div class="help-label" tab="about">about</div>
+        <div class="help-label" tab="shortcut">shortcuts</div>
+    </div>
+
+    <div id="help-tabs">
+        <div id="help-tab-about" class="help-tab">about</div>
+        <div id="help-tab-shortcut" class="help-tab">shortcuts</div>
+    </div>
+
+</div>
+-->
 <div id="help" class="f-row">
 
     <div id="help-left" class="f-col">