better architecture for entering and exiting maps from the home page

This commit is contained in:
Connor Turland 2014-09-10 15:06:39 -04:00
parent 3a7501cc7a
commit 28bfb8ac21
4 changed files with 112 additions and 45 deletions

View file

@ -1,4 +1,7 @@
Metamaps.JIT = { Metamaps.JIT = {
events: {
mouseMove: 'Metamaps:JIT:events:mouseMove'
},
vizData: [], // contains the visualization-compatible graph vizData: [], // contains the visualization-compatible graph
/** /**
* This method will bind the event handlers it is interested and initialize the class. * 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) { Metamaps.Synapses.each(function (s) {
edge = s.createEdge(); 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) { _.each(nodes, function (node) {
@ -586,10 +591,6 @@ Metamaps.JIT = {
var node = eventInfo.getNode(); var node = eventInfo.getNode();
var edge = eventInfo.getEdge(); 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 we're on top of a node object, act like there aren't edges under it
if (node != false) { if (node != false) {
if (Metamaps.Mouse.edgeHoveringOver) { if (Metamaps.Mouse.edgeHoveringOver) {
@ -617,6 +618,9 @@ Metamaps.JIT = {
if (!node && !edge) { if (!node && !edge) {
$('canvas').css('cursor', 'default'); $('canvas').css('cursor', 'default');
} }
var pos = eventInfo.getPos();
$(document).trigger(Metamaps.JIT.events.mouseMove, [pos]);
}, // onMouseMoveHandler }, // onMouseMoveHandler
enterKeyHandler: function () { enterKeyHandler: function () {
// this is to submit new topic creation // this is to submit new topic creation

View file

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

View file

@ -1402,7 +1402,10 @@ Metamaps.Realtime = {
init: function () { init: function () {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
$(".rtOn").click(self.turnOn); var turnOn = function () {
self.turnOn(true);
}
$(".rtOn").click(turnOn);
$(".rtOff").click(self.turnOff); $(".rtOff").click(self.turnOff);
$('.sidebarCollaborateIcon').click(self.toggleBox); $('.sidebarCollaborateIcon').click(self.toggleBox);
@ -1411,15 +1414,8 @@ Metamaps.Realtime = {
}); });
$('body').click(self.close); $('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) { toggleBox: function (event) {
var self = Metamaps.Realtime; 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; var self = Metamaps.Realtime;
if (!self.status) { if (!self.status) {
self.sendRealtimeOn(); if (notify) self.sendRealtimeOn();
$(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn'); $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn');
self.status = true; self.status = true;
$(".sidebarCollaborateIcon").addClass("blue"); $(".sidebarCollaborateIcon").addClass("blue");
@ -1507,6 +1534,11 @@ Metamaps.Realtime = {
// update mapper compass position // update mapper compass position
socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords); 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 () { sendRealtimeOn: function () {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
@ -1623,6 +1655,7 @@ Metamaps.Realtime = {
delete self.mappersOnMap[data.userid]; delete self.mappersOnMap[data.userid];
$('#mapper' + data.userid).remove(); $('#mapper' + data.userid).remove();
$('#compass' + data.userid).remove();
Metamaps.GlobalUI.notifyUser(data.username + ' just left the map'); Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');
}, },
@ -1679,12 +1712,17 @@ Metamaps.Realtime = {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
var socket = Metamaps.Realtime.socket; 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) { contentUpdate: function (data) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
@ -2676,6 +2714,13 @@ Metamaps.Topic = {
success: start 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.checkMetacodes();
Metamaps.Filter.checkSynapses(); Metamaps.Filter.checkSynapses();
Metamaps.Filter.checkMappers(); Metamaps.Filter.checkMappers();
Metamaps.Realtime.startActiveMap();
} }
$.ajax({ $.ajax({
@ -3011,6 +3058,14 @@ Metamaps.Map = {
success: start success: start
}); });
}, },
end: function () {
if (Metamaps.Active.Map) {
$('.rightclickmenu').remove();
Metamaps.TopicCard.hideCard();
Metamaps.SynapseCard.hideCard();
Metamaps.Realtime.endActiveMap();
}
},
fork: function () { fork: function () {
Metamaps.GlobalUI.openLightbox('forkmap'); Metamaps.GlobalUI.openLightbox('forkmap');

View file

@ -540,7 +540,7 @@ font-family: 'din-regular', helvetica, sans-serif;
} }
#edit_synapse { #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; border-radius: 5px;
padding: 5px 5px 5px 30px; padding: 5px 5px 5px 30px;
color: #000; color: #000;