Add initial tabs support in interface.html

Avaer Kazmer · Avaer Kazmer · commit 16857ff3ae78 · 2019-09-16T17:26:16.000-04:00
diff --git a/app.html b/app.html
@@ -3113,7 +3113,7 @@
 
 const uiSize = 2048;
 let renderIds = 0;
-const _renderUi = searchString => new Promise((accept, reject) => {
+const _renderUi = (searchString, selectedTab) => new Promise((accept, reject) => {
   if (renderIds > 0) {
     uiIframe.contentWindow.postMessage({
       method: 'cancel',
@@ -3145,6 +3145,10 @@
     htmlString: interfaceHtml,
     templateData: {
       searchResults,
+      tab1: selectedTab === 1,
+      tab2: selectedTab === 2,
+      tab3: selectedTab === 3,
+      tab4: selectedTab === 4,
     },
     width: uiSize,
     height: uiSize,
@@ -3248,28 +3252,32 @@
   const _updateTextureStatic = () => {
     const urlInputAnchor = anchors.find(anchor => anchor.id === 'url-input');
 
-    ctx.fillStyle = '#f2f3f5';
-    ctx.fillRect(urlInputAnchor.x + urlInputPadding[0] - 4, urlInputAnchor.y + urlInputAnchor.height*0.2, urlInputAnchor.width - urlInputPadding[0]*2 + 4, urlInputAnchor.height*0.6);
+    if (urlInputAnchor) {
+      ctx.fillStyle = '#f2f3f5';
+      ctx.fillRect(urlInputAnchor.x + urlInputPadding[0] - 4, urlInputAnchor.y + urlInputAnchor.height*0.2, urlInputAnchor.width - urlInputPadding[0]*2 + 4, urlInputAnchor.height*0.6);
 
-    ctx.fillStyle = 'black';
-    ctx.textBaseline = 'bottom';
-    ctx.fillText(text, urlInputAnchor.x + urlInputPadding[0], urlInputAnchor.bottom - urlInputPadding[1]);
+      ctx.fillStyle = 'black';
+      ctx.textBaseline = 'bottom';
+      ctx.fillText(text, urlInputAnchor.x + urlInputPadding[0], urlInputAnchor.bottom - urlInputPadding[1]);
 
-    if (keyboardFocus) {
-      ctx.fillRect(urlInputAnchor.x + urlInputPadding[0] + measures[cursor] - 4, urlInputAnchor.y + urlInputAnchor.height*0.2, 6, urlInputAnchor.height*0.6);
+      if (keyboardFocus) {
+        ctx.fillRect(urlInputAnchor.x + urlInputPadding[0] + measures[cursor] - 4, urlInputAnchor.y + urlInputAnchor.height*0.2, 6, urlInputAnchor.height*0.6);
+      }
     }
 
     texture.image = canvas;
     texture.needsUpdate = true;
   };
 
+  let selectedTab = 1;
   let anchors = [];
   const _updateTextureDynamic = async () => {
-    const result = await _renderUi(text);
+    const result = await _renderUi(text, selectedTab);
     if (result.data) {
       ctx.putImageData(new ImageData(new Uint8ClampedArray(result.data.buffer, result.data.byteOffset, result.data.byteLength), uiSize, uiSize), 0, 0);
     }
     anchors = result.anchors;
+    material.uniforms.uHover.value.set(0, 0, 0, 0);
     // console.log('got anchors', JSON.stringify(anchors));
 
     _updateTextureStatic();
@@ -3438,6 +3446,11 @@
       return null;
     }
   };
+  const _selectTab = newSelectedTab => {
+    selectedTab = newSelectedTab;
+    keyboardFocus = null;
+    _updateTextureDynamic();
+  };
   mesh.click = (intersectionSpec, controllerIndex) => {
     keyboardFocus = null;
 
@@ -3453,6 +3466,14 @@
       const urlInputAnchor = anchors.find(anchor => anchor.id === 'url-input');
       const xOffset = x - urlInputAnchor.x - urlInputPadding[0];
       cursor = measures.map((measure, index) => [Math.abs(xOffset - measure), index]).sort((a, b) => a[0] - b[0])[0][1];
+    } else if (id === 'tab-1') {
+      _selectTab(1);
+    } else if (id === 'tab-2') {
+      _selectTab(2);
+    } else if (id === 'tab-3') {
+      _selectTab(3);
+    } else if (id === 'tab-4') {
+      _selectTab(4);
     } else if (href) {
       const xrIframe = document.createElement('xr-iframe');
       xrIframe.src = href;
diff --git a/interface.html b/interface.html
@@ -115,13 +115,16 @@
   <body>
     <div class=ui-left>
       <!-- <input type=text placeholder="https://" class=url-input id=url-input> -->
+      {{#tab1}}
       <input type=text class=url-input id=url-input>
+      {{/tab1}}
       <div class=radios>
-        <div class=radio>Actions</div>
-        <div class="radio selected">WebXR</div>
-        <div class=radio>Models</div>
-        <div class=radio>Data</div>
+        <a id=tab-1 class="radio {{#tab1}}selected{{/tab1}}">WebXR</a>
+        <a id=tab-2 class="radio {{#tab2}}selected{{/tab2}}">Actions</a>
+        <a id=tab-3 class="radio {{#tab3}}selected{{/tab3}}">Models</a>
+        <a id=tab-4 class="radio {{#tab4}}selected{{/tab4}}">Data</a>
       </div>
+      {{#tab1}}
       <ul>
         {{#searchResults}}
         <li>
@@ -135,6 +138,7 @@ <h3>{{label}}</h3>
         </li>
         {{/searchResults}}
       </ul>
+      {{/tab1}}
     </div>
   </body>
 </html>
