From c02b107d2de693fc1a177a5bb83e1a35d3cddf27 Mon Sep 17 00:00:00 2001
From: Albert Chae <albertchae@users.noreply.github.com>
Date: Sun, 8 Sep 2019 02:54:58 -0700
Subject: [PATCH] Move away from pure CSS tabbed navigation to using JS

This allows us to move the content outside of the <li> elements so we
can rely on the browser to wrap the tab bar

Fixes https://github.com/opendatakit/tool-suite-X/issues/103
---
 devEnv/css/style.css | 26 ++++++-------------------
 index.html           | 45 +++++++++++++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 37 deletions(-)

diff --git a/devEnv/css/style.css b/devEnv/css/style.css
index f8d1a4235..adcc101b2 100644
--- a/devEnv/css/style.css
+++ b/devEnv/css/style.css
@@ -122,18 +122,12 @@ span {
 	border-bottom-width: 0px;
 	border-left-width: 0px;
 }
-/* tab control taken from http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/ */
 .absolute {
-    position: absolute;
+	position: absolute;
 	overflow: auto;
 	width: 100%;
 	height: 100%;
 }
-.tabs input[type=radio] {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-}
 .tabs {
   float: none;
   list-style: none;
@@ -144,42 +138,34 @@ span {
 .tabs li{
   float: left;
 }
-.tabs label {
+.tabs button {
     display: block;
     padding: 10px 20px;
     border-radius: 2px 2px 0 0;
+    border: none;
     color: black;
     font-size: 24px;
     font-weight: bold;
     cursor: pointer;
     position: relative;
-    top: 3px;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
 }
-.tabs label:hover {
+.tabs button:hover {
   background: lightgray;
   top: 0;
 }
 
-[id^=tab]:checked + label {
+.tabs button.active {
   background: gray;
   color: white;
   top: 0;
 }
 
-[id^=tab]:checked + label  + .content-tab {
-  z-index: 12;
-  position: absolute;
-}
-[id^=tab]:not(:checked) + label + .content-tab {
-  z-index: 2;
-  position: absolute;
-}
 .content-tab {
-  position: absolute;
+  display: none;
   text-align: left;
   width: 100%;
   height: 1600px;
diff --git a/index.html b/index.html
index a5e70df9e..6fefe935c 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,20 @@
 		$('.content-tab').height(newBaseHeight+3);
 	}
   }
+  function switchTab(event, tabId) {
+    var contentTabs = document.getElementsByClassName("content-tab");
+    for (var i = 0; i < contentTabs.length; i++) {
+      contentTabs[i].style.display = "none";
+    }
+
+    var tabLinks = document.getElementsByClassName("tab-link");
+    for (var i = 0; i < tabLinks.length; i++) {
+      tabLinks[i].className = tabLinks[i].className.replace(" active", "");
+    }
+
+    document.getElementById(tabId).style.display = "block";
+    event.currentTarget.className += " active";
+  }
 //]]>   
   </script>
 <title>OpenDataKit Development Environment Homepage</title>
@@ -43,35 +57,32 @@
   <div class="topversion">ODK 2.1.4</div>
   <ul class="tabs">
     <li>
-      <input type="radio" name="tabs" checked id="tab1"/>
-	  <label for="tab1">Preview</label>
-        <iframe class="content-tab" src="devEnv/tab1.html" frameborder="0" ></iframe>
+      <button onclick="switchTab(event, 'tab1')" class="tab-link active">Preview</a>
     </li>
     <li>
-      <input type="radio" name="tabs" id="tab2"/><label for="tab2">Customize</label>
-      <iframe class="content-tab" src="devEnv/tab2.html" frameborder="0" ></iframe>
+      <button onclick="switchTab(event, 'tab2')" class="tab-link">Customize</a>
     </li>
     <li>
-      <input type="radio" name="tabs" id="tab3"/><label for="tab3">XLSX Converter</label>
-	  <iframe class="content-tab" src="devEnv/tab3.html" frameborder="0" ></iframe>
-      </div>
+      <button onclick="switchTab(event, 'tab3')" class="tab-link">XLSX Converter</a>
     </li>
     <li>
-      <input type="radio" name="tabs" id="tab4"/><label for="tab4">File Browser</label>
-	  <iframe class="content-tab" src="devEnv/tab4.html" frameborder="0" ></iframe>
-      </div>
+      <button onclick="switchTab(event, 'tab4')" class="tab-link">File Browser</a>
     </li>
     <li>
-      <input type="radio" name="tabs" id="tab5"/><label for="tab5">Scan Form Designer</label>
-	  <iframe class="content-tab" src="devEnv/tab5.html" frameborder="0" ></iframe>
-      </div>
+      <button onclick="switchTab(event, 'tab5')" class="tab-link">Scan Form Designer</a>
     </li>
     <li>
-      <input type="radio" name="tabs" id="tab6"/><label for="tab6">QR Code Generator</label>
-    <iframe class="content-tab" src="devEnv/tab6.html" frameborder="0" ></iframe>
-      </div>
+      <button onclick="switchTab(event, 'tab6')" class="tab-link">QR Code Generator</a>
     </li>
   </ul>
+  <div class="content">
+    <iframe id="tab1" class="content-tab" src="devEnv/tab1.html" frameborder="0" style="display: block"></iframe>
+    <iframe id="tab2" class="content-tab" src="devEnv/tab2.html" frameborder="0" ></iframe>
+    <iframe id="tab3" class="content-tab" src="devEnv/tab3.html" frameborder="0" ></iframe>
+    <iframe id="tab4" class="content-tab" src="devEnv/tab4.html" frameborder="0" ></iframe>
+    <iframe id="tab5" class="content-tab" src="devEnv/tab5.html" frameborder="0" ></iframe>
+    <iframe id="tab6" class="content-tab" src="devEnv/tab6.html" frameborder="0" ></iframe>
+  </div>
   <script type="text/javascript">
 //<![CDATA[
     $(function() {