Changeset 365 for trunk/push-web

Timestamp:

Nov 13, 2017, 3:44:00 PM (7 years ago)

Author:

g7moreau

Message:

• Begin to use localStorage javascript variable to kept trace of active tab between reload

File:

• trunk/push-web (modified) (2 diffs)

trunk/push-web

@@ -82 +82 @@
  event.currentTarget.id = "selected";
  }
+
+// https://stackoverflow.com/questions/17591447/how-to-reload-current-page-without-losing-any-form-data
+// http://www.uitrick.com/javascript/how-to-keep-a-global-variable-alive-even-after-page-refresh-javascript/
+// https://blog.udemy.com/javascript-page-refresh/
+
+// localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+// localStorage.getItem('bgcolor');
+
+// https://stackoverflow.com/questions/5683087/chaining-getelementbyid
+function getById(id, context) {
+ var el = document.getElementById(id);
+ return context.contains(el) ? el : null;
+ }
+function getByName(name, context) {
+ var i;
+ var x = document.getElementsByName(name);
+ for (i = 0; i < x.length; i++) {
+  if ((x[i].getAttribute('name') == name) && (context.contains(x[i]))) {
+   return x[i];
+   }
+  }
+ return null;
+ }
+
+// Run on page load
+window.onload = function() {
+ if (typeof(Storage) !== "undefined") {
+  // Code for localStorage/sessionStorage.
+  var tabName = localStorage.getItem('navbar-selected');
+  if (tabName == "undefined") { return; }
+  var navbar = document.getElementById('navbar');
+  var tab = getByName(tabName, navbar);
+  var i;
+  var x = document.getElementsByClassName("selectableTabContent");
+  var tablinks = document.getElementsByClassName("selectableTabButton");
+
+  for (i = 0; i < x.length; i++) {
+   x[i].style.display = "none";
+   }
+  for (i = 0; i < x.length; i++) {
+   tablinks[i].id = "";
+   }
+
+  document.getElementById(tabName).style.display = "block";
+  tab.id = "selected";
+  }
+ else {
+  // Sorry! No Web Storage support..
+  }
+ }
+
+// Before refreshing the page, save the form data to sessionStorage
+window.onbeforeunload = function() {
+ if (typeof(Storage) !== "undefined") {
+  // Code for localStorage/sessionStorage.
+  // var navbar = document.getElementById('navbar');
+  var selected = document.getElementById('selected'); // getById('selected', navbar);
+
+  var tabName = selected.getAttribute('name');
+  localStorage.setItem('navbar-selected', tabName);
+  }
+ else {
+  // Sorry! No Web Storage support..
+  }
+ }
  </script>
 </head>
@@ -93 +158 @@
 <div id="navbar">
  <ul>
-  <li class="selectableTabButton" onclick="selectTab(event, 'IP_detected')" id="selected">IP detected</li>
-  <li class="selectableTabButton" onclick="selectTab(event, 'IP_available')">IP available</li>
-  <li class="selectableTabButton" onclick="selectTab(event, 'VLAN_mismatch')">VLAN mismatch</li>
-  <li class="selectableTabButton" onclick="selectTab(event, 'MAP')">MAP (png)</li>
-  <li class="selectableTabButton" onclick="selectTab(event, 'RAW_data')">RAW data</li>
+  <li class="selectableTabButton" name="IP_detected"   onclick="selectTab(event, 'IP_detected')" id="selected">IP detected</li>
+  <li class="selectableTabButton" name="IP_available"  onclick="selectTab(event, 'IP_available')">IP available</li>
+  <li class="selectableTabButton" name="VLAN_mismatch" onclick="selectTab(event, 'VLAN_mismatch')">VLAN mismatch</li>
+  <li class="selectableTabButton" name="MAP"           onclick="selectTab(event, 'MAP')">MAP (png)</li>
+  <li class="selectableTabButton" name="RAW_data"      onclick="selectTab(event, 'RAW_data')">RAW data</li>
  </ul>
 </div>