move GUI to its own module

lib/gui.js

@@ -0,0 +1,51 @@
+define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
+         "linklist", "nodelist", "simplenodelist", "infobox/main" ],
+function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
+          Nodelist, SimpleNodelist, Infobox) {
+  return function (config, router) {
+    var self = this
+    var dataTargets = []
+
+    var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
+    var sidebar = new Sidebar(document.body)
+    var infobox = new Infobox(config, sidebar, router)
+    var tabs = new Tabs()
+    var overview = new Container()
+
+    var map = new Map(linkScale, sidebar, router)
+    document.body.insertBefore(map.div, document.body.firstChild)
+
+    var meshstats = new Meshstats()
+    var newnodeslist = new SimpleNodelist(config, "new", "firstseen", router, "Neue Knoten")
+    var lostnodeslist = new SimpleNodelist(config, "lost", "lastseen", router, "Verschwundene Knoten")
+    var nodelist = new Nodelist(router)
+    var linklist = new Linklist(linkScale, router)
+
+    dataTargets.push(map)
+    dataTargets.push(meshstats)
+    dataTargets.push(newnodeslist)
+    dataTargets.push(lostnodeslist)
+    dataTargets.push(nodelist)
+    dataTargets.push(linklist)
+
+    overview.add(meshstats)
+    overview.add(newnodeslist)
+    overview.add(lostnodeslist)
+
+    sidebar.add(tabs)
+    tabs.add("Übersicht", overview)
+    tabs.add("Alle Knoten", nodelist)
+    tabs.add("Verbindungen", linklist)
+
+    router.addTarget(infobox)
+    router.addTarget(map)
+
+    self.setData = function (data) {
+      dataTargets.forEach(function (d) {
+        d.setData(data)
+      })
+    }
+
+    return self
+  }
+})

lib/main.js

@@ -1,47 +1,6 @@
-define(["config", "moment", "chroma-js", "router", "map", "sidebar", "tabs", "container", "meshstats", "linklist", "nodelist", "simplenodelist", "infobox/main", "leaflet"],
-function (config, moment, chroma, Router, Map, Sidebar, Tabs, Container, Meshstats, Linklist, Nodelist, SimpleNodelist, Infobox, L) {
+define(["config", "moment", "router", "leaflet", "gui"],
+function (config, moment, Router, L, GUI) {
   return function () {
-    var dataTargets = []
-    var router
-
-    function createGUI() {
-      moment.locale("de")
-
-      var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
-      var sidebar = new Sidebar(document.body)
-      var infobox = new Infobox(config, sidebar, router)
-      var tabs = new Tabs()
-      var overview = new Container()
-
-      var map = new Map(linkScale, sidebar, router)
-      document.body.insertBefore(map.div, document.body.firstChild)
-
-      var meshstats = new Meshstats()
-      var newnodeslist = new SimpleNodelist(config, "new", "firstseen", router, "Neue Knoten")
-      var lostnodeslist = new SimpleNodelist(config, "lost", "lastseen", router, "Verschwundene Knoten")
-      var nodelist = new Nodelist(router)
-      var linklist = new Linklist(linkScale, router)
-
-      dataTargets.push(map)
-      dataTargets.push(meshstats)
-      dataTargets.push(newnodeslist)
-      dataTargets.push(lostnodeslist)
-      dataTargets.push(nodelist)
-      dataTargets.push(linklist)
-
-      overview.add(meshstats)
-      overview.add(newnodeslist)
-      overview.add(lostnodeslist)
-
-      sidebar.add(tabs)
-      tabs.add("Übersicht", overview)
-      tabs.add("Alle Knoten", nodelist)
-      tabs.add("Verbindungen", linklist)
-
-      router.addTarget(infobox)
-      router.addTarget(map)
-    }
-
     function handleData(data) {
       var nodes = Object.keys(data[0].nodes).map(function (key) { return data[0].nodes[key] })
 
@@ -115,8 +74,8 @@ function (config, moment, chroma, Router, Map, Sidebar, Tabs, Container, Meshsta
              }
     }
 
-    router = new Router()
-    dataTargets.push(router)
+    moment.locale("de")
+    var router = new Router()
 
     var urls = [ config.dataPath + "nodes.json",
                  config.dataPath + "graph.json"
@@ -125,10 +84,9 @@ function (config, moment, chroma, Router, Map, Sidebar, Tabs, Container, Meshsta
     Promise.all(urls.map(getJSON))
       .then(handleData)
       .then(function (d) {
-        createGUI()
-        dataTargets.forEach(function (t) {
-          t.setData(d)
-        })
+        var gui = new GUI(config, router)
+        gui.setData(d)
+        router.setData(d)
         router.start()
       })
   }