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 = {
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

View file

@ -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);
}
});

View file

@ -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');

View file

@ -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;