From: Robert Kaiser <robert@widebook.box.kairo.at>
Date: Sat, 24 Nov 2012 14:20:26 +0000 (+0100)
Subject: make module switching work
X-Git-Tag: production~46
X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=eabed1a435fb1ea52f189b7b0433bdb640a29137;p=tricorder.git

make module switching work
---

diff --git a/index.html b/index.html
index 1b1eea6..9d407e0 100644
--- a/index.html
+++ b/index.html
@@ -32,14 +32,15 @@
 
 <div id="sideBottom">
 <ul id="navlist">
-<li id="navPos"><a href="#">Position</a></li>
-<li id="navGrav"><a href="#">Gravity</a></li>
-<li id="navAcou"><a href="#">Acoustics</a></li>
+<li id="navPos"><a href="#" onclick="switchModule('Pos');">Position</a></li>
+<li id="navGrav"><a href="#" onclick="switchModule('Grav');">Gravity</a></li>
+<li id="navAcou"><a href="#" onclick="switchModule('Acou');">Acoustics</a></li>
 </ul>
 </div>
 
 <div id="sideRemark">
-<a href="http://www.startrek.com/">STAR TREK</a> and related items are trademarks of <a href="http://www.paramount.com/">Paramount Pictures</a>.
+<a href="http://www.startrek.com/">STAR TREK</a> and related items are
+trademarks of <a href="http://www.paramount.com/">Paramount Pictures</a>.
 </div>
 </div>
 
@@ -52,7 +53,18 @@ Web Tricorder
 <div id="mainSepBottom"></div>
 
 <div id="mainContent">
+<section id="sectNull">
 <p>This is the main area for tricorder output.</p>
+</section>
+<section id="sectPos">
+<p>This is the main area for position tricorder output.</p>
+</section>
+<section id="sectGrav">
+<p>This is the main area for gravity tricorder output.</p>
+</section>
+<section id="sectAcou">
+<p>This is the main area for acoustics tricorder output.</p>
+</section>
 </div>
 
 </body>
diff --git a/js/tricorder.js b/js/tricorder.js
index b04ac12..c1b61e7 100644
--- a/js/tricorder.js
+++ b/js/tricorder.js
@@ -21,4 +21,18 @@ function updateStardate() {
   gStardate.textContent = sdateval.toFixed(1);
 
   setTimeout(updateStardate, 5*60*1000);
-}
\ No newline at end of file
+}
+
+function switchModule(modname) {
+  var sections = document.getElementsByTagName('section');
+  for (var i = 0; i <= sections.length - 1; i++) {
+    sections[i].classList.remove("active");
+  }
+  var navs = document.getElementById('navlist').children;
+  for (var i = 0; i <= navs.length - 1; i++) {
+    navs[i].classList.remove("active");
+  }
+
+  document.getElementById("nav" + modname).classList.add("active");
+  document.getElementById("sect" + modname).classList.add("active");
+}
diff --git a/style/tricorder.css b/style/tricorder.css
index 891e0e3..b7b8fa5 100644
--- a/style/tricorder.css
+++ b/style/tricorder.css
@@ -119,13 +119,19 @@ a:hover, a:active { color: #FFCF00; }
 #navlist > li:hover,
 #navlist > li:active,
 #navlist > li:hover > a,
-#navlist li:active > a,
+#navlist > li:active > a,
 #navlist > li > a:hover,
 #navlist > li > a:active {
   background-color: #FFCF00;
   color: #000000;
 }
 
+#navlist > li.active,
+#navlist > li.active > a {
+  background-color: #008484;
+  color: #FFCF00;
+}
+
 #navPos, #navPos > a {
   background-color: #FF9F00;
   color: #000000;
@@ -198,3 +204,11 @@ a:hover, a:active { color: #FFCF00; }
   overflow: auto;
   border: none;
 }
+
+section {
+  display: none;
+}
+
+section.active {
+  display: block;
+}