better architecture for entering and exiting maps from the home page

app/assets/javascripts/metamaps/Metamaps.JIT.js

@@ -1,4 +1,7 @@
 Metamaps.JIT = {
+    events: {
+        mouseMove: 'Metamaps:JIT:events:mouseMove'
+    },
     vizData: [], // contains the visualization-compatible graph
     /**
      * This method will bind the event handlers it is interested and initialize the class.
@@ -35,25 +38,27 @@ Metamaps.JIT = {
         Metamaps.Synapses.each(function (s) {
             edge = s.createEdge();
 
-            existingEdge = _.findWhere(edges, {
+            if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) {
-                nodeFrom: edge.nodeFrom,
+                existingEdge = _.findWhere(edges, {
-                nodeTo: edge.nodeTo
+                    nodeFrom: edge.nodeFrom,
-            }) ||
+                    nodeTo: edge.nodeTo
-                _.findWhere(edges, {
+                }) ||
-                    nodeFrom: edge.nodeTo,
+                    _.findWhere(edges, {
-                    nodeTo: edge.nodeFrom
+                        nodeFrom: edge.nodeTo,
-                });
+                        nodeTo: edge.nodeFrom
+                    });
 
-            if (existingEdge) {
+                if (existingEdge) {
-                // for when you're dealing with multiple relationships between the same two topics
+                    // for when you're dealing with multiple relationships between the same two topics
-                if (Metamaps.Active.Map) {
+                    if (Metamaps.Active.Map) {
-                    mapping = s.getMapping();
+                        mapping = s.getMapping();
-                    existingEdge['$mappingIDs'].push(mapping.isNew() ? mapping.cid : mapping.id);
+                        existingEdge['$mappingIDs'].push(mapping.isNew() ? mapping.cid : mapping.id);
+                    }
+                    existingEdge['$synapseIDs'].push(s.id);
+                } else {
+                    // for when you're dealing with a topic that has relationships to many different nodes
+                    nodes[edge.nodeFrom].adjacencies.push(edge);
                 }
-                existingEdge['$synapseIDs'].push(s.id);
-            } else {
-                // for when you're dealing with a topic that has relationships to many different nodes
-                nodes[edge.nodeFrom].adjacencies.push(edge);
             }
         });
         _.each(nodes, function (node) {
@@ -586,10 +591,6 @@ Metamaps.JIT = {
         var node = eventInfo.getNode();
         var edge = eventInfo.getEdge();
 
-        if (Metamaps.Active.Map && Metamaps.Realtime.status) {
-            Metamaps.Realtime.sendCoords(eventInfo.getPos());
-        }
-
         //if we're on top of a node object, act like there aren't edges under it
         if (node != false) {
             if (Metamaps.Mouse.edgeHoveringOver) {
@@ -617,6 +618,9 @@ Metamaps.JIT = {
         if (!node && !edge) {
             $('canvas').css('cursor', 'default');
         }
+
+        var pos = eventInfo.getPos();
+        $(document).trigger(Metamaps.JIT.events.mouseMove, [pos]);
     }, // onMouseMoveHandler
     enterKeyHandler: function () {
         // this is to submit new topic creation

app/assets/javascripts/metamaps/Metamaps.Router.js

@@ -15,7 +15,7 @@
 
             Metamaps.currentSection = "";
             Metamaps.currentPage = "";
-            $('.wrapper').removeClass('mapPage');
+            $('.wrapper').removeClass('mapPage topicPage');
 
             var classes = Metamaps.Active.Mapper ? "homePage explorePage" : "homePage";
             $('.wrapper').addClass(classes);
@@ -59,6 +59,8 @@
             }
 
             Metamaps.Famous.viz.hide();
+            Metamaps.Map.end();
+            Metamaps.Topic.end();
             Metamaps.Active.Map = null;
             Metamaps.Active.Topic = null;
         },
@@ -68,7 +70,7 @@
             
             document.title = 'Explore ' + capitalize + ' Maps | Metamaps';
 
-            $('.wrapper').removeClass('homePage mapPage');
+            $('.wrapper').removeClass('homePage mapPage topicPage');
             $('.wrapper').addClass('explorePage');
             
             Metamaps.currentSection = "explore";
@@ -96,6 +98,8 @@
             Metamaps.Famous.explore.show();
 
             Metamaps.Famous.viz.hide();
+            Metamaps.Map.end();
+            Metamaps.Topic.end();
             Metamaps.Active.Map = null;
             Metamaps.Active.Topic = null;
         },
@@ -106,7 +110,7 @@
             Metamaps.currentSection = "map";
             Metamaps.currentPage = id;
 
-            $('.wrapper').removeClass('homePage explorePage');
+            $('.wrapper').removeClass('homePage explorePage topicPage');
             $('.wrapper').addClass('mapPage');
 
             Metamaps.Famous.yield.hide();
@@ -120,11 +124,13 @@
                 Metamaps.JIT.centerMap();
             }
             Metamaps.Famous.viz.show();
+            Metamaps.Topic.end();
             Metamaps.Active.Topic = null;
 
             Metamaps.GlobalUI.Search.unlock();
             Metamaps.GlobalUI.Search.close(0, true);
 
+            Metamaps.Map.end();
             Metamaps.Map.launch(id);
         },
         topics: function (id) {
@@ -134,8 +140,8 @@
             Metamaps.currentSection = "topic";
             Metamaps.currentPage = id;
 
-            $('.wrapper').removeClass('homePage explorePage');
+            $('.wrapper').removeClass('homePage explorePage mapPage');
-            $('.wrapper').addClass('mapPage');
+            $('.wrapper').addClass('topicPage');
 
             Metamaps.Famous.yield.hide();
             Metamaps.Famous.maps.hide();
@@ -148,11 +154,13 @@
                 Metamaps.JIT.centerMap();
             }
             Metamaps.Famous.viz.show();
+            Metamaps.Map.end();
             Metamaps.Active.Map = null;
 
             Metamaps.GlobalUI.Search.unlock();
             Metamaps.GlobalUI.Search.close(0, true);
 
+            Metamaps.Topic.end();
             Metamaps.Topic.launch(id);
         }
     });

app/assets/javascripts/metamaps/Metamaps.js

@@ -1402,7 +1402,10 @@ Metamaps.Realtime = {
     init: function () {
         var self = Metamaps.Realtime;
 
-        $(".rtOn").click(self.turnOn);
+        var turnOn = function () {
+            self.turnOn(true);
+        }
+        $(".rtOn").click(turnOn);
         $(".rtOff").click(self.turnOff);
 
         $('.sidebarCollaborateIcon').click(self.toggleBox);
@@ -1411,15 +1414,8 @@ Metamaps.Realtime = {
         });
         $('body').click(self.close);
 
-        var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+        self.socket = io.connect('http://localhost:5001');
-
+        self.startActiveMap();
-        if (mapperm) {
-            self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); 
-            self.socket.on('connect', function () {
-                console.log('socket connected');
-                self.setupSocket();
-            });
-        }
     },
     toggleBox: function (event) {
         var self = Metamaps.Realtime;
@@ -1454,11 +1450,42 @@ Metamaps.Realtime = {
             });
         }
     },
-    turnOn: function () {
+    startActiveMap: function () {
+        var self = Metamaps.Realtime;
+
+        var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        var start = function() {
+            if (mapperm) {
+                self.turnOn();
+                self.setupSocket();
+            }
+        }
+
+        if (!self.socket) {
+            self.socket.on('connect', function () {
+                start();
+            });
+        }
+        else if (self.socket) {
+            self.socket.socket.connect();
+            start();
+        }
+    },
+    endActiveMap: function () {
+        var self = Metamaps.Realtime;
+
+        $(document).off(Metamaps.JIT.events.mouseMove);
+        self.socket.disconnect();
+        self.socket.removeAllListeners();
+        $(".collabCompass").remove();
+        self.status = false;
+    },
+    turnOn: function (notify) {
         var self = Metamaps.Realtime;
 
         if (!self.status) {
-            self.sendRealtimeOn();
+            if (notify) self.sendRealtimeOn();
             $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn');
             self.status = true;
             $(".sidebarCollaborateIcon").addClass("blue");
@@ -1507,6 +1534,11 @@ Metamaps.Realtime = {
 
         // update mapper compass position
         socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords);
+    
+        var sendCoords = function (event, coords) {
+            self.sendCoords(coords);
+        }
+        $(document).on(Metamaps.JIT.events.mouseMove, sendCoords);
     },
     sendRealtimeOn: function () {
         var self = Metamaps.Realtime;
@@ -1623,6 +1655,7 @@ Metamaps.Realtime = {
         delete self.mappersOnMap[data.userid];
 
         $('#mapper' + data.userid).remove();
+        $('#compass' + data.userid).remove();
 
         Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');
     },
@@ -1679,12 +1712,17 @@ Metamaps.Realtime = {
         var self = Metamaps.Realtime;
         var socket = Metamaps.Realtime.socket;
 
-        var update = {
+        var map = Metamaps.Active.Map;
-            usercoords: coords,
+        var mapper = Metamaps.Active.Mapper;
-            userid: Metamaps.Active.Mapper.id,
+
-            mapid: Metamaps.Active.Map.id
+        if (self.status && map.authorizeToEdit(mapper) && socket) {
-        };
+            var update = {
-        socket.emit('updateMapperCoords', update);
+                usercoords: coords,
+                userid: Metamaps.Active.Mapper.id,
+                mapid: Metamaps.Active.Map.id
+            };
+            socket.emit('updateMapperCoords', update);
+        }
     },
     contentUpdate: function (data) {
         var self = Metamaps.Realtime;
@@ -2676,6 +2714,13 @@ Metamaps.Topic = {
             success: start
         });
     },
+    end: function () {
+        if (Metamaps.Active.Topic) {
+            $('.rightclickmenu').remove();
+            Metamaps.TopicCard.hideCard();
+            Metamaps.SynapseCard.hideCard();
+        }
+    },
     /*
      *
      *
@@ -3004,6 +3049,8 @@ Metamaps.Map = {
             Metamaps.Filter.checkMetacodes();
             Metamaps.Filter.checkSynapses();
             Metamaps.Filter.checkMappers();
+
+            Metamaps.Realtime.startActiveMap();
         }
 
         $.ajax({
@@ -3011,6 +3058,14 @@ Metamaps.Map = {
             success: start
         });
     },
+    end: function () {
+        if (Metamaps.Active.Map) {
+            $('.rightclickmenu').remove();
+            Metamaps.TopicCard.hideCard();
+            Metamaps.SynapseCard.hideCard();
+            Metamaps.Realtime.endActiveMap();
+        }
+    },
     fork: function () {
         Metamaps.GlobalUI.openLightbox('forkmap');
 

app/assets/stylesheets/base.css

@@ -540,7 +540,7 @@ font-family: 'din-regular', helvetica, sans-serif;
 }
 
 #edit_synapse {
-  background: url("synapse32tmcard.png") no-repeat scroll 0 center / 30px 30px #FFFFFF;
+  background: url("synapse32.png") no-repeat scroll 0 center / 30px 30px #FFFFFF;
   border-radius: 5px;
   padding: 5px 5px 5px 30px;
   color: #000;