From 28bfb8ac21a6c5aacd4369b2faa12e1d5698d0d3 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Wed, 10 Sep 2014 15:06:39 -0400 Subject: [PATCH] better architecture for entering and exiting maps from the home page --- .../javascripts/metamaps/Metamaps.JIT.js | 46 +++++----- .../javascripts/metamaps/Metamaps.Router.js | 18 +++- app/assets/javascripts/metamaps/Metamaps.js | 91 +++++++++++++++---- app/assets/stylesheets/base.css | 2 +- 4 files changed, 112 insertions(+), 45 deletions(-) diff --git a/app/assets/javascripts/metamaps/Metamaps.JIT.js b/app/assets/javascripts/metamaps/Metamaps.JIT.js index 7821dc14..5b9f7458 100644 --- a/app/assets/javascripts/metamaps/Metamaps.JIT.js +++ b/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, { - nodeFrom: edge.nodeFrom, - nodeTo: edge.nodeTo - }) || - _.findWhere(edges, { - nodeFrom: edge.nodeTo, - nodeTo: edge.nodeFrom - }); + if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) { + existingEdge = _.findWhere(edges, { + nodeFrom: edge.nodeFrom, + nodeTo: edge.nodeTo + }) || + _.findWhere(edges, { + nodeFrom: edge.nodeTo, + nodeTo: edge.nodeFrom + }); - if (existingEdge) { - // for when you're dealing with multiple relationships between the same two topics - if (Metamaps.Active.Map) { - mapping = s.getMapping(); - existingEdge['$mappingIDs'].push(mapping.isNew() ? mapping.cid : mapping.id); + if (existingEdge) { + // for when you're dealing with multiple relationships between the same two topics + if (Metamaps.Active.Map) { + mapping = s.getMapping(); + 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 diff --git a/app/assets/javascripts/metamaps/Metamaps.Router.js b/app/assets/javascripts/metamaps/Metamaps.Router.js index c3ca8a65..dadc3771 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Router.js +++ b/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').addClass('mapPage'); + $('.wrapper').removeClass('homePage explorePage 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); } }); diff --git a/app/assets/javascripts/metamaps/Metamaps.js b/app/assets/javascripts/metamaps/Metamaps.js index 50535fef..ccdb0638 100644 --- a/app/assets/javascripts/metamaps/Metamaps.js +++ b/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); - - if (mapperm) { - self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); - self.socket.on('connect', function () { - console.log('socket connected'); - self.setupSocket(); - }); - } + self.socket = io.connect('http://localhost:5001'); + self.startActiveMap(); }, 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 = { - usercoords: coords, - userid: Metamaps.Active.Mapper.id, - mapid: Metamaps.Active.Map.id - }; - socket.emit('updateMapperCoords', update); + var map = Metamaps.Active.Map; + var mapper = Metamaps.Active.Mapper; + + if (self.status && map.authorizeToEdit(mapper) && socket) { + var 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'); diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index ad418082..60621130 100644 --- a/app/assets/stylesheets/base.css +++ b/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;