router: save view in state

lib/gui.js

@@ -40,7 +40,12 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
 
       dataTargets.push(content)
       router.addTarget(content)
-      router.reload()
+    }
+
+    function mkView(K) {
+      return function () {
+        addContent(K)
+      }
     }
 
     contentDiv = document.createElement("div")
@@ -56,11 +61,11 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
       if (content.constructor === Map) {
         buttonToggle.classList.remove("next-graph")
         buttonToggle.classList.add("next-map")
-        addContent(ForceGraph)
+        router.view("g")
       } else {
         buttonToggle.classList.remove("next-map")
         buttonToggle.classList.add("next-graph")
-        addContent(Map)
+        router.view("m")
       }
     }
     contentDiv.appendChild(buttonToggle)
@@ -98,7 +103,10 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     router.addTarget(title)
     router.addTarget(infobox)
 
-    addContent(Map)
+    router.addView("m", mkView(Map))
+    router.addView("g", mkView(ForceGraph))
+
+    router.view("m")
 
     self.setData = function (data) {
       latestData = data

lib/router.js

@@ -3,19 +3,27 @@ define(function () {
     var self = this
     var objects = { nodes: {}, links: {} }
     var targets = []
+    var views = {}
+    var currentView
+    var currentObject
     var running = false
 
-    function saveState(d) {
+    function saveState() {
-      var s = "#!"
+      var e = []
 
-      if (d) {
+      if (currentView)
-        if ("node" in d)
+        e.push("v:" + currentView)
-          s += "n:" + encodeURIComponent(d.node.nodeinfo.node_id)
 
-        if ("link" in d)
+      if (currentObject) {
-          s += "l:" + encodeURIComponent(d.link.id)
+        if ("node" in currentObject)
+          e.push("n:" + encodeURIComponent(currentObject.node.nodeinfo.node_id))
+
+        if ("link" in currentObject)
+          e.push("l:" + encodeURIComponent(currentObject.link.id))
       }
 
+      var s = "#!" + e.join(";")
+
       window.history.pushState(s, undefined, s)
     }
 
@@ -26,9 +34,11 @@ define(function () {
         t.resetView()
       })
 
-      if (push)
+      if (push) {
+        currentObject = undefined
         saveState()
       }
+    }
 
     function gotoNode(d) {
       if (!d)
@@ -59,24 +69,38 @@ define(function () {
       if (!s.startsWith("#!"))
         return false
 
-      var args = s.slice(2).split(":")
+      var targetSet = false
+
+      s.slice(2).split(";").forEach(function (d) {
+        var args = d.split(":")
+
+        if (args[0] === "v" && args[1] in views) {
+          currentView = args[1]
+          views[args[1]]()
+        }
+
         var id
 
-      if (args[1] !== undefined) {
+        if (args[0] === "n") {
           id = decodeURIComponent(args[1])
-
+          if (id in objects.nodes) {
-        if (args[0] === "n" && id in objects.nodes) {
+            currentObject = { node: objects.nodes[id] }
             gotoNode(objects.nodes[id])
-          return true
+            targetSet = true
+          }
         }
 
-        if (args[0] === "l" && id in objects.links) {
+        if (args[0] === "l") {
+          id = decodeURIComponent(args[1])
+          if (id in objects.links) {
+            currentObject = { link: objects.links[id] }
             gotoLink(objects.links[id])
-          return true
+            targetSet = true
           }
         }
+      })
 
-      return false
+      return targetSet
     }
 
     self.start = function () {
@@ -91,10 +115,33 @@ define(function () {
       }
     }
 
+    self.view = function (d) {
+      if (d in views) {
+        views[d]()
+
+        if (running) {
+          currentView = d
+          if (currentObject)
+            if ("node" in currentObject)
+              gotoNode(currentObject.node)
+            else if ("link" in currentObject)
+              gotoNode(currentObject.link)
+          else
+            targets.forEach( function (t) {
+              t.resetView()
+            })
+
+          saveState()
+        }
+      }
+    }
+
     self.node = function (d) {
       return function () {
-        if (gotoNode(d))
+        if (gotoNode(d)) {
-          saveState({ node: d })
+          currentObject = { node: d }
+          saveState()
+        }
 
         return false
       }
@@ -102,8 +149,10 @@ define(function () {
 
     self.link = function (d) {
       return function () {
-        if (gotoLink(d))
+        if (gotoLink(d)) {
-          saveState({ link: d })
+          currentObject = { link: d }
+          saveState()
+        }
 
         return false
       }
@@ -123,6 +172,10 @@ define(function () {
       })
     }
 
+    self.addView = function (k, d) {
+      views[k] = d
+    }
+
     self.setData = function (data) {
       objects.nodes = {}
       objects.links = {}
@@ -136,14 +189,6 @@ define(function () {
       })
     }
 
-    self.reload = function () {
-      if (!running)
-        return
-
-      if (!loadState(window.history.state))
-        resetView(false)
-    }
-
     return self
   }
 })