From badbe39466ff5ec31c75c20794bffc1b70196da9 Mon Sep 17 00:00:00 2001
From: wixette <wixette@gmail.com>
Date: Sun, 8 Mar 2020 17:16:49 +0800
Subject: [PATCH] support switching among tabs

---
 index.html  | 10 +++++-----
 js/l10n.js  | 12 ++++++------
 js/panel.js | 36 +++++++++++++++++++++++++++++++++++-
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index ef748f8..1226368 100644
--- a/index.html
+++ b/index.html
@@ -29,10 +29,10 @@
         </div>
       </div>
       <nav>
-        <div id="simulator" class="nav-item l10n">Simulator</div>
-        <div id="debug" class="nav-item l10n">Debug</div>
-        <div id="code" class="nav-item l10n">Code</div>
-        <div id="locale" class="nav-item">En|中文</div>
+        <div id="nav-sim" class="nav-item l10n">Sim</div>
+        <div id="nav-debug" class="nav-item l10n">Debug</div>
+        <div id="nav-ref" class="nav-item l10n">Ref</div>
+        <div id="nav-locale" class="nav-item">En|中文</div>
       </nav>
     </header>
 
@@ -575,7 +575,7 @@
         <div id="mem-dump"></div>
       </div>
 
-      <div id="tab-res">
+      <div id="tab-ref">
         <p>
           <span id="source-code" class="l10n">Source code</span>:
           <a href="https://github.com/wixette/8800-simulator">github.com/wixette/8800-simulator</a>
diff --git a/js/l10n.js b/js/l10n.js
index 6fa1584..31d3cff 100644
--- a/js/l10n.js
+++ b/js/l10n.js
@@ -45,19 +45,19 @@ l10n.MESSAGES = {
         'zh': 'Sim-8800: Altair 8800 模拟器',
     },
 
-    'simulator': {
-        'en': 'Simulator',
+    'nav-sim': {
+        'en': 'Sim',
         'zh': '模拟器',
     },
 
-    'debug': {
+    'nav-debug': {
         'en': 'Debug',
         'zh': '调试',
     },
 
-    'code': {
-        'en': 'Code',
-        'zh': '源码',
+    'nav-ref': {
+        'en': 'Ref',
+        'zh': '参考',
     },
 
     'switchboard': {
diff --git a/js/panel.js b/js/panel.js
index 3b7e129..64900f2 100644
--- a/js/panel.js
+++ b/js/panel.js
@@ -557,8 +557,15 @@ panel.init = function() {
     l10n.restoreLocale();
 
     // Initializes event listener for nav buttons.
-    var button = document.getElementById('locale');
+    var button = document.getElementById('nav-locale');
     button.addEventListener('click', l10n.nextLocale, false);
+    button = document.getElementById('nav-sim');
+    button.addEventListener('click', panel.showTabSim, false);
+    button = document.getElementById('nav-debug');
+    button.addEventListener('click', panel.showTabDebug, false);
+    button = document.getElementById('nav-ref');
+    button.addEventListener('click', panel.showTabRes, false);
+    panel.showTabSim();
 
     // Initializes event listener for debug controls.
     button = document.getElementById('debug-load-data');
@@ -875,3 +882,30 @@ panel.playToggle = function() {
 panel.playSwitch = function() {
     panel.playSound('sound-switch');
 };
+
+/**
+ * Shows the simulator tab, and hides the other two.
+ */
+panel.showTabSim = function() {
+    document.getElementById('tab-sim').style.display = 'block';
+    document.getElementById('tab-debug').style.display = 'none';
+    document.getElementById('tab-ref').style.display = 'none';
+};
+
+/**
+ * Shows the debug tab, and hides the other two.
+ */
+panel.showTabDebug = function() {
+    document.getElementById('tab-sim').style.display = 'none';
+    document.getElementById('tab-debug').style.display = 'block';
+    document.getElementById('tab-ref').style.display = 'none';
+};
+
+/**
+ * Shows the resource tab, and hides the other two.
+ */
+panel.showTabRes = function() {
+    document.getElementById('tab-sim').style.display = 'none';
+    document.getElementById('tab-debug').style.display = 'none';
+    document.getElementById('tab-ref').style.display = 'block';
+};