Add basic URL state management in "Compare whole genomes"

zhuying412 · Aug 17, 2019 · f6969f9 · f6969f9
1 parent b7b1ca5
commit f6969f9
Showing 1 changed file with 47 additions and 0 deletions.
diff --git a/examples/vanilla/compare-whole-genomes.html b/examples/vanilla/compare-whole-genomes.html
@@ -64,6 +64,8 @@ <h1>Compare whole genomes | Ideogram</h1>
   </div>
   <script type="text/javascript">
 
+  var initialized = false;
+
 function onIdeogramLoad() {
       // See HomoloGene entry for MTOR at
       // http://www.ncbi.nlm.nih.gov/homologene/3637
@@ -101,11 +103,54 @@ <h1>Compare whole genomes | Ideogram</h1>
 
     }
 
+    // Record app state in URL
+    function updateUrl(params) {
+      var urlParams = Object.keys(params).map(key => {
+        return key + '=' + params[key];
+      }).join('&');
+      history.pushState(null, null, '?' + urlParams);
+    }
+
+    function parseUrlParams() {
+      var rawParams = document.location.search;
+      var urlParams = {};
+      var param, key, value;
+      if (rawParams !== '') {
+        rawParams = rawParams.split('?')[1].split('&');
+        rawParams.forEach(rawParam => {
+          param = rawParam.split('=');
+          key = param[0];
+          value = param[1];
+          urlParams[key] = value;
+        });
+      }
+      return urlParams;
+    }
+
+    function checkButtons() {
+      var urlParams = parseUrlParams();
+        for (var param in urlParams) {
+          var value = urlParams[param];
+          document.querySelectorAll('input[name=' + param + ']').forEach(option => {
+            if (option.id.includes(value)) {
+              var button = 'input[name=' + param + ']#' + value;
+              document.querySelector(button).checked = true;
+            }
+          });
+        }
+    }
+
     function updateIdeogram() {
 
+      if (initialized === false) {
+        checkButtons();
+      }
+
       var chromosomeScale = document.querySelector('input[name=chromosome-scale]:checked').id;
       var orientation = document.querySelector('input[name=orientation]:checked').id;
 
+      updateUrl({'chromosome-scale': chromosomeScale, orientation: orientation});
+
       config = {
         organism: ['human', 'mouse'],
         orientation: orientation,
@@ -118,6 +163,8 @@ <h1>Compare whole genomes | Ideogram</h1>
       }
 
       ideogram = new Ideogram(config);
+
+      initialized = true;
     }
 
     radioButtons = document.querySelectorAll('input[type=radio]');