better architecture for entering and exiting maps from the home page
This commit is contained in:
Connor Turland
parent
3a7501cc7a
commit
28bfb8ac21
4 changed files with 112 additions and 45 deletions
|
|
@ -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,6 +38,7 @@ Metamaps.JIT = {
|
|||
Metamaps.Synapses.each(function (s) {
|
||||
edge = s.createEdge();
|
||||
|
||||
if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) {
|
||||
existingEdge = _.findWhere(edges, {
|
||||
nodeFrom: edge.nodeFrom,
|
||||
nodeTo: edge.nodeTo
|
||||
|
|
@ -55,6 +59,7 @@ Metamaps.JIT = {
|
|||
// 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) {
|
||||
self.vizData.push(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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue