Changeset 365


Ignore:
Timestamp:
Nov 13, 2017, 3:44:00 PM (6 years ago)
Author:
g7moreau
Message:
  • Begin to use localStorage javascript variable to kept trace of active tab between reload
File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/push-web

    r363 r365  
    8282 event.currentTarget.id = "selected";
    8383 }
     84
     85// https://stackoverflow.com/questions/17591447/how-to-reload-current-page-without-losing-any-form-data
     86// http://www.uitrick.com/javascript/how-to-keep-a-global-variable-alive-even-after-page-refresh-javascript/
     87// https://blog.udemy.com/javascript-page-refresh/
     88
     89// localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
     90// localStorage.getItem('bgcolor');
     91
     92// https://stackoverflow.com/questions/5683087/chaining-getelementbyid
     93function getById(id, context) {
     94 var el = document.getElementById(id);
     95 return context.contains(el) ? el : null;
     96 }
     97function getByName(name, context) {
     98 var i;
     99 var x = document.getElementsByName(name);
     100 for (i = 0; i < x.length; i++) {
     101  if ((x[i].getAttribute('name') == name) && (context.contains(x[i]))) {
     102   return x[i];
     103   }
     104  }
     105 return null;
     106 }
     107
     108// Run on page load
     109window.onload = function() {
     110 if (typeof(Storage) !== "undefined") {
     111  // Code for localStorage/sessionStorage.
     112  var tabName = localStorage.getItem('navbar-selected');
     113  if (tabName == "undefined") { return; }
     114  var navbar = document.getElementById('navbar');
     115  var tab = getByName(tabName, navbar);
     116  var i;
     117  var x = document.getElementsByClassName("selectableTabContent");
     118  var tablinks = document.getElementsByClassName("selectableTabButton");
     119
     120  for (i = 0; i < x.length; i++) {
     121   x[i].style.display = "none";
     122   }
     123  for (i = 0; i < x.length; i++) {
     124   tablinks[i].id = "";
     125   }
     126
     127  document.getElementById(tabName).style.display = "block";
     128  tab.id = "selected";
     129  }
     130 else {
     131  // Sorry! No Web Storage support..
     132  }
     133 }
     134
     135// Before refreshing the page, save the form data to sessionStorage
     136window.onbeforeunload = function() {
     137 if (typeof(Storage) !== "undefined") {
     138  // Code for localStorage/sessionStorage.
     139  // var navbar = document.getElementById('navbar');
     140  var selected = document.getElementById('selected'); // getById('selected', navbar);
     141
     142  var tabName = selected.getAttribute('name');
     143  localStorage.setItem('navbar-selected', tabName);
     144  }
     145 else {
     146  // Sorry! No Web Storage support..
     147  }
     148 }
    84149 </script>
    85150</head>
     
    93158<div id="navbar">
    94159 <ul>
    95   <li class="selectableTabButton" onclick="selectTab(event, 'IP_detected')" id="selected">IP detected</li>
    96   <li class="selectableTabButton" onclick="selectTab(event, 'IP_available')">IP available</li>
    97   <li class="selectableTabButton" onclick="selectTab(event, 'VLAN_mismatch')">VLAN mismatch</li>
    98   <li class="selectableTabButton" onclick="selectTab(event, 'MAP')">MAP (png)</li>
    99   <li class="selectableTabButton" onclick="selectTab(event, 'RAW_data')">RAW data</li>
     160  <li class="selectableTabButton" name="IP_detected"   onclick="selectTab(event, 'IP_detected')" id="selected">IP detected</li>
     161  <li class="selectableTabButton" name="IP_available"  onclick="selectTab(event, 'IP_available')">IP available</li>
     162  <li class="selectableTabButton" name="VLAN_mismatch" onclick="selectTab(event, 'VLAN_mismatch')">VLAN mismatch</li>
     163  <li class="selectableTabButton" name="MAP"           onclick="selectTab(event, 'MAP')">MAP (png)</li>
     164  <li class="selectableTabButton" name="RAW_data"      onclick="selectTab(event, 'RAW_data')">RAW data</li>
    100165 </ul>
    101166</div>
Note: See TracChangeset for help on using the changeset viewer.