glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

finish most except Backbone

Browse source
This commit is contained in:
Devin Howard 2016-09-22 18:31:56 +08:00
parent 0065b201c7
commit 120c2c0b67
22 changed files with 1077 additions and 1033 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/Metamaps/Account.js
View file

@ -1,12 +1,11 @@
/* uses window.Metamaps.Erb */ /*
* Metamaps.Erb
*/
const Account = { const Account = {
listenersInitialized: false, listenersInitialized: false,
init: function () {
var self = Metamaps.Account
},
initListeners: function () { initListeners: function () {
var self = Metamaps.Account var self = Account
$('#user_image').change(self.showImagePreview) $('#user_image').change(self.showImagePreview)
self.listenersInitialized = true self.listenersInitialized = true

4
frontend/src/Metamaps/AutoLayout.js
View file

@ -8,7 +8,7 @@ const AutoLayout = {
timeToTurn: 0, timeToTurn: 0,
getNextCoord: function () { getNextCoord: function () {
var self = Metamaps.AutoLayout var self = AutoLayout
var nextX = self.nextX var nextX = self.nextX
var nextY = self.nextY var nextY = self.nextY
@ -55,7 +55,7 @@ const AutoLayout = {
} }
}, },
resetSpiral: function () { resetSpiral: function () {
var self = Metamaps.AutoLayout var self = AutoLayout
self.nextX = 0 self.nextX = 0
self.nextY = 0 self.nextY = 0
self.nextXshift = 1 self.nextXshift = 1

30
frontend/src/Metamaps/Backbone.js
View file

@ -26,9 +26,9 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.Backbone = {} const _Backbone = {}
Metamaps.Backbone.Map = Backbone.Model.extend({ _Backbone.Map = Backbone.Model.extend({
urlRoot: '/maps', urlRoot: '/maps',
blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'], blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
toJSON: function (options) { toJSON: function (options) {
@ -82,7 +82,7 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
return Metamaps.Mapper.get(this.get('user_id')) return Metamaps.Mapper.get(this.get('user_id'))
}, },
fetchContained: function () { fetchContained: function () {
var bb = Metamaps.Backbone var bb = _Backbone
var that = this var that = this
var start = function (data) { var start = function (data) {
that.set('mappers', new bb.MapperCollection(data.mappers)) that.set('mappers', new bb.MapperCollection(data.mappers))
@ -143,8 +143,8 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
} }
} }
}) })
Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({ _Backbone.MapsCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Map, model: _Backbone.Map,
initialize: function (models, options) { initialize: function (models, options) {
this.id = options.id this.id = options.id
this.sortBy = options.sortBy this.sortBy = options.sortBy
@ -211,7 +211,7 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
} }
}) })
Metamaps.Backbone.Message = Backbone.Model.extend({ _Backbone.Message = Backbone.Model.extend({
urlRoot: '/messages', urlRoot: '/messages',
blacklist: ['created_at', 'updated_at'], blacklist: ['created_at', 'updated_at'],
toJSON: function (options) { toJSON: function (options) {
@ -227,12 +227,12 @@ Metamaps.Backbone.Message = Backbone.Model.extend({
*/ */
} }
}) })
Metamaps.Backbone.MessageCollection = Backbone.Collection.extend({ _Backbone.MessageCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Message, model: _Backbone.Message,
url: '/messages' url: '/messages'
}) })
Metamaps.Backbone.Mapper = Backbone.Model.extend({ _Backbone.Mapper = Backbone.Model.extend({
urlRoot: '/users', urlRoot: '/users',
blacklist: ['created_at', 'updated_at'], blacklist: ['created_at', 'updated_at'],
toJSON: function (options) { toJSON: function (options) {
@ -248,13 +248,13 @@ Metamaps.Backbone.Mapper = Backbone.Model.extend({
} }
}) })
Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({ _Backbone.MapperCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Mapper, model: _Backbone.Mapper,
url: '/users' url: '/users'
}) })
Metamaps.Backbone.init = function () { _Backbone.init = function () {
var self = Metamaps.Backbone var self = _Backbone
self.Metacode = Backbone.Model.extend({ self.Metacode = Backbone.Model.extend({
initialize: function () { initialize: function () {
@ -694,6 +694,6 @@ Metamaps.Backbone.init = function () {
} }
} }
self.attachCollectionEvents() self.attachCollectionEvents()
}; // end Metamaps.Backbone.init }; // end _Backbone.init
export default Metamaps.Backbone export default _Backbone

32
frontend/src/Metamaps/Control.js
View file

@ -2,6 +2,7 @@
import Active from './Active' import Active from './Active'
import Filter from './Filter' import Filter from './Filter'
import GlobalUI from './GlobalUI'
import JIT from './JIT' import JIT from './JIT'
import Mouse from './Mouse' import Mouse from './Mouse'
import Selected from './Selected' import Selected from './Selected'
@ -12,7 +13,6 @@ import Visualize from './Visualize'
* Metamaps.Control.js * Metamaps.Control.js
* *
* Dependencies: * Dependencies:
* - Metamaps.GlobalUI
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Synapses * - Metamaps.Synapses
@ -57,7 +57,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -73,7 +73,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -89,7 +89,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -107,7 +107,7 @@ const Control = {
}]) }])
Control.hideNode(nodeid) Control.hideNode(nodeid)
} else { } else {
Metamaps.GlobalUI.notifyUser('Only topics you created can be deleted') GlobalUI.notifyUser('Only topics you created can be deleted')
} }
}, },
removeSelectedNodes: function () { // refers to removing topics permanently from a map removeSelectedNodes: function () { // refers to removing topics permanently from a map
@ -132,7 +132,7 @@ const Control = {
authorized = Active.Map.authorizeToEdit(Active.Mapper) authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -148,7 +148,7 @@ const Control = {
var node = Visualize.mGraph.graph.getNode(nodeid) var node = Visualize.mGraph.graph.getNode(nodeid)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -251,7 +251,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -266,7 +266,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -294,7 +294,7 @@ const Control = {
mappableid: mappableid mappableid: mappableid
}]) }])
} else { } else {
Metamaps.GlobalUI.notifyUser('Only synapses you created can be deleted') GlobalUI.notifyUser('Only synapses you created can be deleted')
} }
}, },
removeSelectedEdges: function () { removeSelectedEdges: function () {
@ -308,7 +308,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -324,7 +324,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -378,7 +378,7 @@ const Control = {
updateSelectedPermissions: function (permission) { updateSelectedPermissions: function (permission) {
var edge, synapse, node, topic var edge, synapse, node, topic
Metamaps.GlobalUI.notifyUser('Working...') GlobalUI.notifyUser('Working...')
// variables to keep track of how many nodes and synapses you had the ability to change the permission of // variables to keep track of how many nodes and synapses you had the ability to change the permission of
var nCount = 0, var nCount = 0,
@ -416,12 +416,12 @@ const Control = {
var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses') var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses')
var message = nString + sString + ' you created updated to ' + permission var message = nString + sString + ' you created updated to ' + permission
Metamaps.GlobalUI.notifyUser(message) GlobalUI.notifyUser(message)
}, },
updateSelectedMetacodes: function (metacode_id) { updateSelectedMetacodes: function (metacode_id) {
var node, topic var node, topic
Metamaps.GlobalUI.notifyUser('Working...') GlobalUI.notifyUser('Working...')
var metacode = Metamaps.Metacodes.get(metacode_id) var metacode = Metamaps.Metacodes.get(metacode_id)
@ -445,7 +445,7 @@ const Control = {
var nString = nCount == 1 ? (nCount.toString() + ' topic') : (nCount.toString() + ' topics') var nString = nCount == 1 ? (nCount.toString() + ' topic') : (nCount.toString() + ' topics')
var message = nString + ' you can edit updated to ' + metacode.get('name') var message = nString + ' you can edit updated to ' + metacode.get('name')
Metamaps.GlobalUI.notifyUser(message) GlobalUI.notifyUser(message)
Visualize.mGraph.plot() Visualize.mGraph.plot()
}, },
} }

4
frontend/src/Metamaps/Create.js
View file

@ -5,13 +5,13 @@ import Selected from './Selected'
import Synapse from './Synapse' import Synapse from './Synapse'
import Topic from './Topic' import Topic from './Topic'
import Visualize from './Visualize' import Visualize from './Visualize'
import GlobalUI from './GlobalUI'
/* /*
* Metamaps.Create.js * Metamaps.Create.js
* *
* Dependencies: * Dependencies:
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.GlobalUI
* - Metamaps.Metacodes * - Metamaps.Metacodes
*/ */
@ -101,7 +101,7 @@ const Create = {
bringToFront: true bringToFront: true
}) })
Metamaps.GlobalUI.closeLightbox() GlobalUI.closeLightbox()
$('#topic_name').focus() $('#topic_name').focus()
var mdata = { var mdata = {

6
frontend/src/Metamaps/Debug.js
View file

@ -1,6 +1,6 @@
const Debug = () => { const Debug = (arg = window.Metamaps) => {
console.debug(window.Metamaps) console.debug(arg)
console.debug(`Metamaps Version: ${window.Metamaps.VERSION}`) console.debug(`Metamaps Version: ${arg.VERSION}`)
} }
export default Debug export default Debug

4
frontend/src/Metamaps/Filter.js
View file

@ -2,6 +2,7 @@
import Active from './Active' import Active from './Active'
import Control from './Control' import Control from './Control'
import GlobalUI from './GlobalUI'
import Settings from './Settings' import Settings from './Settings'
import Visualize from './Visualize' import Visualize from './Visualize'
@ -10,7 +11,6 @@ import Visualize from './Visualize'
* *
* Dependencies: * Dependencies:
* - Metamaps.Creators * - Metamaps.Creators
* - Metamaps.GlobalUI
* - Metamaps.Mappers * - Metamaps.Mappers
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Synapses * - Metamaps.Synapses
@ -56,7 +56,7 @@ const Filter = {
open: function () { open: function () {
var self = Filter var self = Filter
Metamaps.GlobalUI.Account.close() GlobalUI.Account.close()
$('.sidebarFilterIcon div').addClass('hide') $('.sidebarFilterIcon div').addClass('hide')
if (!self.isOpen && !self.changing) { if (!self.isOpen && !self.changing) {

557
frontend/src/Metamaps/GlobalUI.js
View file

@ -1,317 +1,326 @@
window.Metamaps = window.Metamaps || {}; import Active from './Active'
import Create from './Create'
import Filter from './Filter'
import Router from './Router'
/*
* Metamaps.Backbone
* Metamaps.Erb
* Metamaps.Maps
*/
const GlobalUI = { const GlobalUI = {
notifyTimeout: null, notifyTimeout: null,
lightbox: null, lightbox: null,
init: function () { init: function () {
var self = GlobalUI; var self = GlobalUI;
self.Search.init(); self.Search.init();
self.CreateMap.init(); self.CreateMap.init();
self.Account.init(); self.Account.init();
if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
//bind lightbox clicks if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
$('.openLightbox').click(function (event) {
self.openLightbox($(this).attr('data-open'));
event.preventDefault();
return false;
});
$('#lightbox_screen, #lightbox_close').click(self.closeLightbox); //bind lightbox clicks
$('.openLightbox').click(function (event) {
self.openLightbox($(this).attr('data-open'));
event.preventDefault();
return false;
});
// initialize global backbone models and collections $('#lightbox_screen, #lightbox_close').click(self.closeLightbox);
if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);
var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : []; // initialize global backbone models and collections
var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : []; if (Active.Mapper) Active.Mapper = new Metamaps.Backbone.Mapper(Active.Mapper);
var starredCollection = Metamaps.Maps.Starred ? Metamaps.Maps.Starred : [];
var mapperCollection = [];
var mapperOptionsObj = {id: 'mapper', sortBy: 'updated_at' };
if (Metamaps.Maps.Mapper) {
mapperCollection = Metamaps.Maps.Mapper.models;
mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id;
}
var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'updated_at' });
Metamaps.Maps.Shared = new Metamaps.Backbone.MapsCollection(sharedCollection, {id: 'shared', sortBy: 'updated_at' });
Metamaps.Maps.Starred = new Metamaps.Backbone.MapsCollection(starredCollection, {id: 'starred', sortBy: 'updated_at' });
// 'Mapper' refers to another mapper
Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj);
Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'updated_at' });
Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' });
},
showDiv: function (selector) {
$(selector).show()
$(selector).animate({
opacity: 1
}, 200, 'easeOutCubic')
},
hideDiv: function (selector) {
$(selector).animate({
opacity: 0
}, 200, 'easeInCubic', function () { $(this).hide() })
},
openLightbox: function (which) {
var self = GlobalUI;
$('.lightboxContent').hide(); var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
$('#' + which).show(); var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : [];
var starredCollection = Metamaps.Maps.Starred ? Metamaps.Maps.Starred : [];
self.lightbox = which; var mapperCollection = [];
var mapperOptionsObj = {id: 'mapper', sortBy: 'updated_at' };
$('#lightbox_overlay').show(); if (Metamaps.Maps.Mapper) {
mapperCollection = Metamaps.Maps.Mapper.models;
var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px'; mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id;
// animate the content in from the bottom
$('#lightbox_main').animate({
'top': '50%',
'margin-top': heightOfContent
}, 200, 'easeOutCubic');
// fade the black overlay in
$('#lightbox_screen').animate({
'opacity': '0.42'
}, 200);
if (which == "switchMetacodes") {
Metamaps.Create.isSwitchingSet = true;
}
},
closeLightbox: function (event) {
var self = GlobalUI;
if (event) event.preventDefault();
// animate the lightbox content offscreen
$('#lightbox_main').animate({
'top': '100%',
'margin-top': '0'
}, 200, 'easeInCubic');
// fade the black overlay out
$('#lightbox_screen').animate({
'opacity': '0.0'
}, 200, function () {
$('#lightbox_overlay').hide();
});
if (self.lightbox === 'forkmap') GlobalUI.CreateMap.reset('fork_map');
if (self.lightbox === 'newmap') GlobalUI.CreateMap.reset('new_map');
if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
Metamaps.Create.cancelMetacodeSetSwitch();
}
self.lightbox = null;
},
notifyUser: function (message, leaveOpen) {
var self = GlobalUI;
$('#toast').html(message)
self.showDiv('#toast')
clearTimeout(self.notifyTimeOut);
if (!leaveOpen) {
self.notifyTimeOut = setTimeout(function () {
self.hideDiv('#toast')
}, 8000);
}
},
clearNotify: function() {
var self = GlobalUI;
clearTimeout(self.notifyTimeOut);
self.hideDiv('#toast')
},
shareInvite: function(inviteLink) {
window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
} }
var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'updated_at' });
Metamaps.Maps.Shared = new Metamaps.Backbone.MapsCollection(sharedCollection, {id: 'shared', sortBy: 'updated_at' });
Metamaps.Maps.Starred = new Metamaps.Backbone.MapsCollection(starredCollection, {id: 'starred', sortBy: 'updated_at' });
// 'Mapper' refers to another mapper
Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj);
Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'updated_at' });
Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' });
},
showDiv: function (selector) {
$(selector).show()
$(selector).animate({
opacity: 1
}, 200, 'easeOutCubic')
},
hideDiv: function (selector) {
$(selector).animate({
opacity: 0
}, 200, 'easeInCubic', function () { $(this).hide() })
},
openLightbox: function (which) {
var self = GlobalUI;
$('.lightboxContent').hide();
$('#' + which).show();
self.lightbox = which;
$('#lightbox_overlay').show();
var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
// animate the content in from the bottom
$('#lightbox_main').animate({
'top': '50%',
'margin-top': heightOfContent
}, 200, 'easeOutCubic');
// fade the black overlay in
$('#lightbox_screen').animate({
'opacity': '0.42'
}, 200);
if (which == "switchMetacodes") {
Create.isSwitchingSet = true;
}
},
closeLightbox: function (event) {
var self = GlobalUI;
if (event) event.preventDefault();
// animate the lightbox content offscreen
$('#lightbox_main').animate({
'top': '100%',
'margin-top': '0'
}, 200, 'easeInCubic');
// fade the black overlay out
$('#lightbox_screen').animate({
'opacity': '0.0'
}, 200, function () {
$('#lightbox_overlay').hide();
});
if (self.lightbox === 'forkmap') GlobalUI.CreateMap.reset('fork_map');
if (self.lightbox === 'newmap') GlobalUI.CreateMap.reset('new_map');
if (Create && Create.isSwitchingSet) {
Create.cancelMetacodeSetSwitch();
}
self.lightbox = null;
},
notifyUser: function (message, leaveOpen) {
var self = GlobalUI;
$('#toast').html(message)
self.showDiv('#toast')
clearTimeout(self.notifyTimeOut);
if (!leaveOpen) {
self.notifyTimeOut = setTimeout(function () {
self.hideDiv('#toast')
}, 8000);
}
},
clearNotify: function() {
var self = GlobalUI;
clearTimeout(self.notifyTimeOut);
self.hideDiv('#toast')
},
shareInvite: function(inviteLink) {
window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
}
} }
GlobalUI.CreateMap = { GlobalUI.CreateMap = {
newMap: null, newMap: null,
emptyMapForm: "", emptyMapForm: "",
emptyForkMapForm: "", emptyForkMapForm: "",
topicsToMap: [], topicsToMap: [],
synapsesToMap: [], synapsesToMap: [],
init: function () { init: function () {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' }); self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
self.bindFormEvents(); self.bindFormEvents();
self.emptyMapForm = $('#new_map').html(); self.emptyMapForm = $('#new_map').html();
}, },
bindFormEvents: function () { bindFormEvents: function () {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
$('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) { $('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) {
if (event.keyCode === 13) self.submit() if (event.keyCode === 13) self.submit()
}) })
$('.new_map button.cancel').unbind().bind('click', function (event) { $('.new_map button.cancel').unbind().bind('click', function (event) {
event.preventDefault(); event.preventDefault();
GlobalUI.closeLightbox(); GlobalUI.closeLightbox();
}); });
$('.new_map button.submitMap').unbind().bind('click', self.submit); $('.new_map button.submitMap').unbind().bind('click', self.submit);
// bind permission changer events on the createMap form // bind permission changer events on the createMap form
$('.permIcon').unbind().bind('click', self.switchPermission); $('.permIcon').unbind().bind('click', self.switchPermission);
}, },
closeSuccess: function () { closeSuccess: function () {
$('#mapCreatedSuccess').fadeOut(300, function(){ $('#mapCreatedSuccess').fadeOut(300, function(){
$(this).remove(); $(this).remove();
}); });
}, },
generateSuccessMessage: function (id) { generateSuccessMessage: function (id) {
var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/"; var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/";
stringStart += id; stringStart += id;
stringStart += "' onclick='GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>"; stringStart += "' onclick='GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>";
stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this "; stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this ";
var page = Metamaps.Active.Map ? 'map' : 'page'; var page = Active.Map ? 'map' : 'page';
var stringEnd = "</a></div>"; var stringEnd = "</a></div>";
return stringStart + page + stringEnd; return stringStart + page + stringEnd;
}, },
switchPermission: function () { switchPermission: function () {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
self.newMap.set('permission', $(this).attr('data-permission')); self.newMap.set('permission', $(this).attr('data-permission'));
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected'); $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
$(this).find('.mapPermIcon').addClass('selected'); $(this).find('.mapPermIcon').addClass('selected');
var permText = $(this).find('.tip').html(); var permText = $(this).find('.tip').html();
$(this).parents('.new_map').find('.permText').html(permText); $(this).parents('.new_map').find('.permText').html(permText);
}, },
submit: function (event) { submit: function (event) {
if (event) event.preventDefault(); if (event) event.preventDefault();
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
if (GlobalUI.lightbox === 'forkmap') { if (GlobalUI.lightbox === 'forkmap') {
self.newMap.set('topicsToMap', self.topicsToMap); self.newMap.set('topicsToMap', self.topicsToMap);
self.newMap.set('synapsesToMap', self.synapsesToMap); self.newMap.set('synapsesToMap', self.synapsesToMap);
} }
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId); var $form = $(formId);
self.newMap.set('name', $form.find('#map_name').val()); self.newMap.set('name', $form.find('#map_name').val());
self.newMap.set('desc', $form.find('#map_desc').val()); self.newMap.set('desc', $form.find('#map_desc').val());
if (self.newMap.get('name').length===0){ if (self.newMap.get('name').length===0){
self.throwMapNameError(); self.throwMapNameError();
return; return;
} }
self.newMap.save(null, { self.newMap.save(null, {
success: self.success success: self.success
// TODO add error message // TODO add error message
}); });
GlobalUI.closeLightbox(); GlobalUI.closeLightbox();
GlobalUI.notifyUser('Working...'); GlobalUI.notifyUser('Working...');
}, },
throwMapNameError: function () { throwMapNameError: function () {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId); var $form = $(formId);
var message = $("<div class='feedback_message'>Please enter a map name...</div>"); var message = $("<div class='feedback_message'>Please enter a map name...</div>");
$form.find('#map_name').after(message); $form.find('#map_name').after(message);
setTimeout(function(){ setTimeout(function(){
message.fadeOut('fast', function(){ message.fadeOut('fast', function(){
message.remove(); message.remove();
}); });
}, 5000); }, 5000);
}, },
success: function (model) { success: function (model) {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
//push the new map onto the collection of 'my maps' //push the new map onto the collection of 'my maps'
Metamaps.Maps.Mine.add(model); Metamaps.Maps.Mine.add(model);
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var form = $(formId); var form = $(formId);
GlobalUI.clearNotify(); GlobalUI.clearNotify();
$('#wrapper').append(self.generateSuccessMessage(model.id)); $('#wrapper').append(self.generateSuccessMessage(model.id));
}, },
reset: function (id) { reset: function (id) {
var self = GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
var form = $('#' + id); var form = $('#' + id);
if (id === "fork_map") { if (id === "fork_map") {
self.topicsToMap = []; self.topicsToMap = [];
self.synapsesToMap = []; self.synapsesToMap = [];
form.html(self.emptyForkMapForm); form.html(self.emptyForkMapForm);
} }
else { else {
form.html(self.emptyMapForm); form.html(self.emptyMapForm);
} }
self.bindFormEvents(); self.bindFormEvents();
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' }); self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
return false; return false;
}, },
} }
GlobalUI.Account = { GlobalUI.Account = {
isOpen: false, isOpen: false,
changing: false, changing: false,
init: function () { init: function () {
var self = GlobalUI.Account; var self = GlobalUI.Account;
$('.sidebarAccountIcon').click(self.toggleBox); $('.sidebarAccountIcon').click(self.toggleBox);
$('.sidebarAccountBox').click(function(event){ $('.sidebarAccountBox').click(function(event){
event.stopPropagation(); event.stopPropagation();
}); });
$('body').click(self.close); $('body').click(self.close);
}, },
toggleBox: function (event) { toggleBox: function (event) {
var self = GlobalUI.Account; var self = GlobalUI.Account;
if (self.isOpen) self.close(); if (self.isOpen) self.close();
else self.open(); else self.open();
event.stopPropagation(); event.stopPropagation();
}, },
open: function () { open: function () {
var self = GlobalUI.Account; var self = GlobalUI.Account;
Metamaps.Filter.close(); Filter.close();
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide'); $('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
if (!self.isOpen && !self.changing) { if (!self.isOpen && !self.changing) {
self.changing = true; self.changing = true;
$('.sidebarAccountBox').fadeIn(200, function () { $('.sidebarAccountBox').fadeIn(200, function () {
self.changing = false; self.changing = false;
self.isOpen = true; self.isOpen = true;
$('.sidebarAccountBox #user_email').focus(); $('.sidebarAccountBox #user_email').focus();
}); });
}
},
close: function () {
var self = GlobalUI.Account;
$('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
if (!self.changing) {
self.changing = true;
$('.sidebarAccountBox #user_email').blur();
$('.sidebarAccountBox').fadeOut(200, function () {
self.changing = false;
self.isOpen = false;
});
}
} }
},
close: function () {
var self = GlobalUI.Account;
$('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
if (!self.changing) {
self.changing = true;
$('.sidebarAccountBox #user_email').blur();
$('.sidebarAccountBox').fadeOut(200, function () {
self.changing = false;
self.isOpen = false;
});
}
}
} }
GlobalUI.Search = { GlobalUI.Search = {
@ -425,8 +434,8 @@ GlobalUI.Search = {
startTypeahead: function () { startTypeahead: function () {
var self = GlobalUI.Search; var self = GlobalUI.Search;
var mapheader = Metamaps.Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>'; var mapheader = Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>';
var topicheader = Metamaps.Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>'; var topicheader = Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>';
var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>'; var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>';
var topics = { var topics = {
@ -455,8 +464,8 @@ GlobalUI.Search = {
url: '/search/topics', url: '/search/topics',
prepare: function(query, settings) { prepare: function(query, settings) {
settings.url += '?term=' + query; settings.url += '?term=' + query;
if (Metamaps.Active.Mapper && self.limitTopicsToMe) { if (Active.Mapper && self.limitTopicsToMe) {
settings.url += "&user=" + Metamaps.Active.Mapper.id.toString(); settings.url += "&user=" + Active.Mapper.id.toString();
} }
return settings; return settings;
}, },
@ -488,8 +497,8 @@ GlobalUI.Search = {
url: '/search/maps', url: '/search/maps',
prepare: function(query, settings) { prepare: function(query, settings) {
settings.url += '?term=' + query; settings.url += '?term=' + query;
if (Metamaps.Active.Mapper && self.limitMapsToMe) { if (Active.Mapper && self.limitMapsToMe) {
settings.url += "&user=" + Metamaps.Active.Mapper.id.toString(); settings.url += "&user=" + Active.Mapper.id.toString();
} }
return settings; return settings;
}, },
@ -578,11 +587,11 @@ GlobalUI.Search = {
self.close(0, true); self.close(0, true);
var win; var win;
if (datum.rtype == "topic") { if (datum.rtype == "topic") {
Metamaps.Router.topics(datum.id); Router.topics(datum.id);
} else if (datum.rtype == "map") { } else if (datum.rtype == "map") {
Metamaps.Router.maps(datum.id); Router.maps(datum.id);
} else if (datum.rtype == "mapper") { } else if (datum.rtype == "mapper") {
Metamaps.Router.explore("mapper", datum.id); Router.explore("mapper", datum.id);
} }
} }
}, },

9
frontend/src/Metamaps/Import.js
View file

@ -1,7 +1,10 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active' import Active from './Active'
import GlobalUI from './GlobalUI'
import Map from './Map' import Map from './Map'
import Synapse from './Synapse'
import Topic from './Topic'
/* /*
* Metamaps.Import.js.erb * Metamaps.Import.js.erb
@ -290,11 +293,11 @@ const Import = {
Metamaps.Mappings.add(mapping) Metamaps.Mappings.add(mapping)
// this function also includes the creation of the topic in the database // this function also includes the creation of the topic in the database
Metamaps.Topic.renderTopic(mapping, topic, true, true, { Topic.renderTopic(mapping, topic, true, true, {
success: opts.success success: opts.success
}) })
Metamaps.GlobalUI.hideDiv('#instructions') GlobalUI.hideDiv('#instructions')
}, },
createSynapseWithParameters: function (desc, category, permission, createSynapseWithParameters: function (desc, category, permission,
@ -322,7 +325,7 @@ const Import = {
}) })
Metamaps.Mappings.add(mapping) Metamaps.Mappings.add(mapping)
Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, true) Synapse.renderSynapse(mapping, synapse, node1, node2, true)
} }
} }

485
frontend/src/Metamaps/JIT.js
View file

File diff suppressed because it is too large Load diff

77
frontend/src/Metamaps/Listeners.js
View file

@ -1,57 +1,59 @@
/* global Metamaps, $ */ /* global $ */
import Active from './Active'
import Control from './Control'
import JIT from './JIT'
import Mobile from './Mobile'
import Realtime from './Realtime'
import Selected from './Selected'
import Topic from './Topic'
import Visualize from './Visualize'
/*
* Dependencies:
* - Metamaps.Active
* - Metamaps.Control
* - Metamaps.JIT
* - Metamaps.Visualize
*/
const Listeners = { const Listeners = {
init: function () { init: function () {
var self = this var self = this
$(document).on('keydown', function (e) { $(document).on('keydown', function (e) {
if (!(Metamaps.Active.Map || Metamaps.Active.Topic)) return if (!(Active.Map || Active.Topic)) return
switch (e.which) { switch (e.which) {
case 13: // if enter key is pressed case 13: // if enter key is pressed
Metamaps.JIT.enterKeyHandler() JIT.enterKeyHandler()
e.preventDefault() e.preventDefault()
break break
case 27: // if esc key is pressed case 27: // if esc key is pressed
Metamaps.JIT.escKeyHandler() JIT.escKeyHandler()
break break
case 65: // if a or A is pressed case 65: // if a or A is pressed
if (e.ctrlKey) { if (e.ctrlKey) {
Metamaps.Control.deselectAllNodes() Control.deselectAllNodes()
Metamaps.Control.deselectAllEdges() Control.deselectAllEdges()
e.preventDefault() e.preventDefault()
Metamaps.Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function (n) {
Metamaps.Control.selectNode(n, e) Control.selectNode(n, e)
}) })
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
} }
break break
case 68: // if d or D is pressed case 68: // if d or D is pressed
if (e.ctrlKey) { if (e.ctrlKey) {
e.preventDefault() e.preventDefault()
Metamaps.Control.deleteSelected() Control.deleteSelected()
} }
break break
case 69: // if e or E is pressed case 69: // if e or E is pressed
if (e.ctrlKey && Metamaps.Active.Map) { if (e.ctrlKey && Active.Map) {
e.preventDefault() e.preventDefault()
Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas) JIT.zoomExtents(null, Visualize.mGraph.canvas)
break break
} }
if (e.altKey && Metamaps.Active.Topic) { if (e.altKey && Active.Topic) {
e.preventDefault() e.preventDefault()
if (Metamaps.Active.Topic) { if (Active.Topic) {
self.centerAndReveal(Metamaps.Selected.Nodes, { self.centerAndReveal(Selected.Nodes, {
center: true, center: true,
reveal: false reveal: false
}) })
@ -62,30 +64,30 @@ const Listeners = {
case 72: // if h or H is pressed case 72: // if h or H is pressed
if (e.ctrlKey) { if (e.ctrlKey) {
e.preventDefault() e.preventDefault()
Metamaps.Control.hideSelectedNodes() Control.hideSelectedNodes()
Metamaps.Control.hideSelectedEdges() Control.hideSelectedEdges()
} }
break break
case 77: // if m or M is pressed case 77: // if m or M is pressed
if (e.ctrlKey) { if (e.ctrlKey) {
e.preventDefault() e.preventDefault()
Metamaps.Control.removeSelectedNodes() Control.removeSelectedNodes()
Metamaps.Control.removeSelectedEdges() Control.removeSelectedEdges()
} }
break break
case 82: // if r or R is pressed case 82: // if r or R is pressed
if (e.altKey && Metamaps.Active.Topic) { if (e.altKey && Active.Topic) {
e.preventDefault() e.preventDefault()
self.centerAndReveal(Metamaps.Selected.Nodes, { self.centerAndReveal(Selected.Nodes, {
center: false, center: false,
reveal: true reveal: true
}) })
} }
break break
case 84: // if t or T is pressed case 84: // if t or T is pressed
if (e.altKey && Metamaps.Active.Topic) { if (e.altKey && Active.Topic) {
e.preventDefault() e.preventDefault()
self.centerAndReveal(Metamaps.Selected.Nodes, { self.centerAndReveal(Selected.Nodes, {
center: true, center: true,
reveal: true reveal: true
}) })
@ -98,23 +100,22 @@ const Listeners = {
}) })
$(window).resize(function () { $(window).resize(function () {
if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height()) if (Visualize && Visualize.mGraph) Visualize.mGraph.canvas.resize($(window).width(), $(window).height())
if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition() if (Active.Map && Realtime.inConversation) Realtime.positionVideos()
if (Metamaps.Active.Map && Metamaps.Realtime.inConversation) Metamaps.Realtime.positionVideos() Mobile.resizeTitle()
Metamaps.Mobile.resizeTitle()
}) })
}, },
centerAndReveal: function(nodes, opts) { centerAndReveal: function(nodes, opts) {
if (nodes.length < 1) return if (nodes.length < 1) return
var node = nodes[nodes.length - 1] var node = nodes[nodes.length - 1]
if (opts.center && opts.reveal) { if (opts.center && opts.reveal) {
Metamaps.Topic.centerOn(node.id, function() { Topic.centerOn(node.id, function() {
Metamaps.Topic.fetchRelatives(nodes) Topic.fetchRelatives(nodes)
}) })
} else if (opts.center) { } else if (opts.center) {
Metamaps.Topic.centerOn(node.id) Topic.centerOn(node.id)
} else if (opts.reveal) { } else if (opts.reveal) {
Metamaps.Topic.fetchRelatives(nodes) Topic.fetchRelatives(nodes)
} }
} }
} }

180
frontend/src/Metamaps/Map.js
View file

@ -1,30 +1,29 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import AutoLayout from './AutoLayout'
import Create from './Create'
import Filter from './Filter'
import GlobalUI from './GlobalUI'
import JIT from './JIT'
import Realtime from './Realtime'
import Selected from './Selected'
import SynapseCard from './SynapseCard'
import TopicCard from './TopicCard'
import Visualize from './Visualize'
/* /*
* Metamaps.Map.js.erb * Metamaps.Map.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.AutoLayout
* - Metamaps.Create
* - Metamaps.Erb
* - Metamaps.Filter
* - Metamaps.JIT
* - Metamaps.Loading
* - Metamaps.Maps
* - Metamaps.Realtime
* - Metamaps.Router
* - Metamaps.Selected
* - Metamaps.SynapseCard
* - Metamaps.TopicCard
* - Metamaps.Visualize
* - Metamaps.Active
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.GlobalUI * - Metamaps.Erb
* - Metamaps.Loading
* - Metamaps.Mappers * - Metamaps.Mappers
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Maps
* - Metamaps.Messages * - Metamaps.Messages
* - Metamaps.Router
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topics * - Metamaps.Topics
* *
@ -33,6 +32,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Map.InfoBox * - Metamaps.Map.InfoBox
*/ */
window.Metamaps = window.Metamaps || {}
Metamaps.Map = { Metamaps.Map = {
events: { events: {
editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper' editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
@ -54,7 +54,7 @@ Metamaps.Map = {
self.fork() self.fork()
}) })
Metamaps.GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html() GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
self.updateStar() self.updateStar()
self.InfoBox.init() self.InfoBox.init()
@ -65,7 +65,7 @@ Metamaps.Map = {
launch: function (id) { launch: function (id) {
var bb = Metamaps.Backbone var bb = Metamaps.Backbone
var start = function (data) { var start = function (data) {
Metamaps.Active.Map = new bb.Map(data.map) Active.Map = new bb.Map(data.map)
Metamaps.Mappers = new bb.MapperCollection(data.mappers) Metamaps.Mappers = new bb.MapperCollection(data.mappers)
Metamaps.Collaborators = new bb.MapperCollection(data.collaborators) Metamaps.Collaborators = new bb.MapperCollection(data.collaborators)
Metamaps.Topics = new bb.TopicCollection(data.topics) Metamaps.Topics = new bb.TopicCollection(data.topics)
@ -75,8 +75,8 @@ Metamaps.Map = {
Metamaps.Stars = data.stars Metamaps.Stars = data.stars
Metamaps.Backbone.attachCollectionEvents() Metamaps.Backbone.attachCollectionEvents()
var map = Metamaps.Active.Map var map = Active.Map
var mapper = Metamaps.Active.Mapper var mapper = Active.Mapper
// add class to .wrapper for specifying whether you can edit the map // add class to .wrapper for specifying whether you can edit the map
if (map.authorizeToEdit(mapper)) { if (map.authorizeToEdit(mapper)) {
@ -95,24 +95,24 @@ Metamaps.Map = {
$('#filter_by_mapper h3').html('MAPPERS') $('#filter_by_mapper h3').html('MAPPERS')
// build and render the visualization // build and render the visualization
Metamaps.Visualize.type = 'ForceDirected' Visualize.type = 'ForceDirected'
Metamaps.JIT.prepareVizData() JIT.prepareVizData()
// update filters // update filters
Metamaps.Filter.reset() Filter.reset()
// reset selected arrays // reset selected arrays
Metamaps.Selected.reset() Selected.reset()
// set the proper mapinfobox content // set the proper mapinfobox content
Metamaps.Map.InfoBox.load() Metamaps.Map.InfoBox.load()
// these three update the actual filter box with the right list items // these three update the actual filter box with the right list items
Metamaps.Filter.checkMetacodes() Filter.checkMetacodes()
Metamaps.Filter.checkSynapses() Filter.checkSynapses()
Metamaps.Filter.checkMappers() Filter.checkMappers()
Metamaps.Realtime.startActiveMap() Realtime.startActiveMap()
Metamaps.Loading.hide() Metamaps.Loading.hide()
// for mobile // for mobile
@ -125,24 +125,24 @@ Metamaps.Map = {
}) })
}, },
end: function () { end: function () {
if (Metamaps.Active.Map) { if (Active.Map) {
$('.wrapper').removeClass('canEditMap commonsMap') $('.wrapper').removeClass('canEditMap commonsMap')
Metamaps.AutoLayout.resetSpiral() AutoLayout.resetSpiral()
$('.rightclickmenu').remove() $('.rightclickmenu').remove()
Metamaps.TopicCard.hideCard() TopicCard.hideCard()
Metamaps.SynapseCard.hideCard() SynapseCard.hideCard()
Metamaps.Create.newTopic.hide(true) // true means force (and override pinned) Create.newTopic.hide(true) // true means force (and override pinned)
Metamaps.Create.newSynapse.hide() Create.newSynapse.hide()
Metamaps.Filter.close() Filter.close()
Metamaps.Map.InfoBox.close() Metamaps.Map.InfoBox.close()
Metamaps.Realtime.endActiveMap() Realtime.endActiveMap()
} }
}, },
updateStar: function () { updateStar: function () {
if (!Metamaps.Active.Mapper || !Metamaps.Stars) return if (!Active.Mapper || !Metamaps.Stars) return
// update the star/unstar icon // update the star/unstar icon
if (Metamaps.Stars.find(function (s) { return s.user_id === Metamaps.Active.Mapper.id })) { if (Metamaps.Stars.find(function (s) { return s.user_id === Active.Mapper.id })) {
$('.starMap').addClass('starred') $('.starMap').addClass('starred')
$('.starMap .tooltipsAbove').html('Unstar') $('.starMap .tooltipsAbove').html('Unstar')
} else { } else {
@ -153,31 +153,31 @@ Metamaps.Map = {
star: function () { star: function () {
var self = Metamaps.Map var self = Metamaps.Map
if (!Metamaps.Active.Map) return if (!Active.Map) return
$.post('/maps/' + Metamaps.Active.Map.id + '/star') $.post('/maps/' + Active.Map.id + '/star')
Metamaps.Stars.push({ user_id: Metamaps.Active.Mapper.id, map_id: Metamaps.Active.Map.id }) Metamaps.Stars.push({ user_id: Active.Mapper.id, map_id: Active.Map.id })
Metamaps.Maps.Starred.add(Metamaps.Active.Map) Metamaps.Maps.Starred.add(Active.Map)
Metamaps.GlobalUI.notifyUser('Map is now starred') GlobalUI.notifyUser('Map is now starred')
self.updateStar() self.updateStar()
}, },
unstar: function () { unstar: function () {
var self = Metamaps.Map var self = Metamaps.Map
if (!Metamaps.Active.Map) return if (!Active.Map) return
$.post('/maps/' + Metamaps.Active.Map.id + '/unstar') $.post('/maps/' + Active.Map.id + '/unstar')
Metamaps.Stars = Metamaps.Stars.filter(function (s) { return s.user_id != Metamaps.Active.Mapper.id }) Metamaps.Stars = Metamaps.Stars.filter(function (s) { return s.user_id != Active.Mapper.id })
Metamaps.Maps.Starred.remove(Metamaps.Active.Map) Metamaps.Maps.Starred.remove(Active.Map)
self.updateStar() self.updateStar()
}, },
fork: function () { fork: function () {
Metamaps.GlobalUI.openLightbox('forkmap') GlobalUI.openLightbox('forkmap')
var nodes_data = '', var nodes_data = '',
synapses_data = '' synapses_data = ''
var nodes_array = [] var nodes_array = []
var synapses_array = [] var synapses_array = []
// collect the unfiltered topics // collect the unfiltered topics
Metamaps.Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function (n) {
// if the opacity is less than 1 then it's filtered // if the opacity is less than 1 then it's filtered
if (n.getData('alpha') === 1) { if (n.getData('alpha') === 1) {
var id = n.getData('topic').id var id = n.getData('topic').id
@ -197,7 +197,7 @@ Metamaps.Map = {
Metamaps.Synapses.each(function (synapse) { Metamaps.Synapses.each(function (synapse) {
var desc = synapse.get('desc') var desc = synapse.get('desc')
var descNotFiltered = Metamaps.Filter.visible.synapses.indexOf(desc) > -1 var descNotFiltered = Filter.visible.synapses.indexOf(desc) > -1
// make sure that both topics are being added, otherwise, it // make sure that both topics are being added, otherwise, it
// doesn't make sense to add the synapse // doesn't make sense to add the synapse
var topicsNotFiltered = nodes_array.indexOf(synapse.get('node1_id')) > -1 var topicsNotFiltered = nodes_array.indexOf(synapse.get('node1_id')) > -1
@ -210,32 +210,32 @@ Metamaps.Map = {
synapses_data = synapses_array.join() synapses_data = synapses_array.join()
nodes_data = nodes_data.slice(0, -1) nodes_data = nodes_data.slice(0, -1)
Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data GlobalUI.CreateMap.topicsToMap = nodes_data
Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data GlobalUI.CreateMap.synapsesToMap = synapses_data
}, },
leavePrivateMap: function () { leavePrivateMap: function () {
var map = Metamaps.Active.Map var map = Active.Map
Metamaps.Maps.Active.remove(map) Metamaps.Maps.Active.remove(map)
Metamaps.Maps.Featured.remove(map) Metamaps.Maps.Featured.remove(map)
Metamaps.Router.home() Metamaps.Router.home()
Metamaps.GlobalUI.notifyUser('Sorry! That map has been changed to Private.') GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
}, },
cantEditNow: function () { cantEditNow: function () {
Metamaps.Realtime.turnOff(true); // true is for 'silence' Realtime.turnOff(true); // true is for 'silence'
Metamaps.GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.') GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.')
Metamaps.Active.Map.trigger('changeByOther') Active.Map.trigger('changeByOther')
}, },
canEditNow: function () { canEditNow: function () {
var confirmString = "You've been granted permission to edit this map. " var confirmString = "You've been granted permission to edit this map. "
confirmString += 'Do you want to reload and enable realtime collaboration?' confirmString += 'Do you want to reload and enable realtime collaboration?'
var c = confirm(confirmString) var c = confirm(confirmString)
if (c) { if (c) {
Metamaps.Router.maps(Metamaps.Active.Map.id) Metamaps.Router.maps(Active.Map.id)
} }
}, },
editedByActiveMapper: function () { editedByActiveMapper: function () {
if (Metamaps.Active.Mapper) { if (Active.Mapper) {
Metamaps.Mappers.add(Metamaps.Active.Mapper) Metamaps.Mappers.add(Active.Mapper)
} }
}, },
exportImage: function () { exportImage: function () {
@ -282,14 +282,14 @@ Metamaps.Map = {
// center it // center it
canvas.getCtx().translate(1880 / 2, 1260 / 2) canvas.getCtx().translate(1880 / 2, 1260 / 2)
var mGraph = Metamaps.Visualize.mGraph var mGraph = Visualize.mGraph
var id = mGraph.root var id = mGraph.root
var root = mGraph.graph.getNode(id) var root = mGraph.graph.getNode(id)
var T = !!root.visited var T = !!root.visited
// pass true to avoid basing it on a selection // pass true to avoid basing it on a selection
Metamaps.JIT.zoomExtents(null, canvas, true) JIT.zoomExtents(null, canvas, true)
var c = canvas.canvas, var c = canvas.canvas,
ctx = canvas.getCtx(), ctx = canvas.getCtx(),
@ -327,7 +327,7 @@ Metamaps.Map = {
encoded_image: canvas.canvas.toDataURL() encoded_image: canvas.canvas.toDataURL()
} }
var map = Metamaps.Active.Map var map = Active.Map
var today = new Date() var today = new Date()
var dd = today.getDate() var dd = today.getDate()
@ -346,12 +346,12 @@ Metamaps.Map = {
downloadMessage += 'Captured map screenshot! ' downloadMessage += 'Captured map screenshot! '
downloadMessage += "<a href='" + imageData.encoded_image + "' " downloadMessage += "<a href='" + imageData.encoded_image + "' "
downloadMessage += "download='metamap-" + map.id + '-' + mapName + '-' + today + ".png'>DOWNLOAD</a>" downloadMessage += "download='metamap-" + map.id + '-' + mapName + '-' + today + ".png'>DOWNLOAD</a>"
Metamaps.GlobalUI.notifyUser(downloadMessage) GlobalUI.notifyUser(downloadMessage)
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
dataType: 'json', dataType: 'json',
url: '/maps/' + Metamaps.Active.Map.id + '/upload_screenshot', url: '/maps/' + Active.Map.id + '/upload_screenshot',
data: imageData, data: imageData,
success: function (data) { success: function (data) {
console.log('successfully uploaded map screenshot') console.log('successfully uploaded map screenshot')
@ -461,12 +461,12 @@ Metamaps.Map.InfoBox = {
load: function () { load: function () {
var self = Metamaps.Map.InfoBox var self = Metamaps.Map.InfoBox
var map = Metamaps.Active.Map var map = Active.Map
var obj = map.pick('permission', 'topic_count', 'synapse_count') var obj = map.pick('permission', 'topic_count', 'synapse_count')
var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper) var isCreator = map.authorizePermissionChange(Active.Mapper)
var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper) var canEdit = map.authorizeToEdit(Active.Mapper)
var relevantPeople = map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators var relevantPeople = map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var shareable = map.get('permission') !== 'private' var shareable = map.get('permission') !== 'private'
@ -519,8 +519,8 @@ Metamaps.Map.InfoBox = {
$('.mapInfoName .best_in_place_name').unbind('ajax:success').bind('ajax:success', function () { $('.mapInfoName .best_in_place_name').unbind('ajax:success').bind('ajax:success', function () {
var name = $(this).html() var name = $(this).html()
Metamaps.Active.Map.set('name', name) Active.Map.set('name', name)
Metamaps.Active.Map.trigger('saved') Active.Map.trigger('saved')
// mobile menu // mobile menu
$('#header_content').html(name) $('#header_content').html(name)
$('.mapInfoBox').removeClass('mapRequestTitle') $('.mapInfoBox').removeClass('mapRequestTitle')
@ -529,8 +529,8 @@ Metamaps.Map.InfoBox = {
$('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () { $('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () {
var desc = $(this).html() var desc = $(this).html()
Metamaps.Active.Map.set('desc', desc) Active.Map.set('desc', desc)
Metamaps.Active.Map.trigger('saved') Active.Map.trigger('saved')
}) })
$('.yourMap .mapPermission').unbind().click(self.onPermissionClick) $('.yourMap .mapPermission').unbind().click(self.onPermissionClick)
@ -558,7 +558,7 @@ Metamaps.Map.InfoBox = {
addTypeahead: function () { addTypeahead: function () {
var self = Metamaps.Map.InfoBox var self = Metamaps.Map.InfoBox
if (!Metamaps.Active.Map) return if (!Active.Map) return
// for autocomplete // for autocomplete
var collaborators = { var collaborators = {
@ -589,7 +589,7 @@ Metamaps.Map.InfoBox = {
} }
// for adding map collaborators, who will have edit rights // for adding map collaborators, who will have edit rights
if (Metamaps.Active.Mapper && Metamaps.Active.Mapper.id === Metamaps.Active.Map.get('user_id')) { if (Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')) {
$('.collaboratorSearchField').typeahead( $('.collaboratorSearchField').typeahead(
{ {
highlight: false, highlight: false,
@ -606,23 +606,23 @@ Metamaps.Map.InfoBox = {
var self = Metamaps.Map.InfoBox var self = Metamaps.Map.InfoBox
Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId)) Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId))
var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id }) var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
$.post('/maps/' + Metamaps.Active.Map.id + '/access', { access: mapperIds }) $.post('/maps/' + Active.Map.id + '/access', { access: mapperIds })
self.updateNumbers() self.updateNumbers()
}, },
addCollaborator: function (newCollaboratorId) { addCollaborator: function (newCollaboratorId) {
var self = Metamaps.Map.InfoBox var self = Metamaps.Map.InfoBox
if (Metamaps.Collaborators.get(newCollaboratorId)) { if (Metamaps.Collaborators.get(newCollaboratorId)) {
Metamaps.GlobalUI.notifyUser('That user already has access') GlobalUI.notifyUser('That user already has access')
return return
} }
function callback(mapper) { function callback(mapper) {
Metamaps.Collaborators.add(mapper) Metamaps.Collaborators.add(mapper)
var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id }) var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
$.post('/maps/' + Metamaps.Active.Map.id + '/access', { access: mapperIds }) $.post('/maps/' + Active.Map.id + '/access', { access: mapperIds })
var name = Metamaps.Collaborators.get(newCollaboratorId).get('name') var name = Metamaps.Collaborators.get(newCollaboratorId).get('name')
Metamaps.GlobalUI.notifyUser(name + ' will be notified by email') GlobalUI.notifyUser(name + ' will be notified by email')
self.updateNumbers() self.updateNumbers()
} }
@ -642,13 +642,13 @@ Metamaps.Map.InfoBox = {
}, },
createContributorList: function () { createContributorList: function () {
var self = Metamaps.Map.InfoBox var self = Metamaps.Map.InfoBox
var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators var relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var activeMapperIsCreator = Metamaps.Active.Mapper && Metamaps.Active.Mapper.id === Metamaps.Active.Map.get('user_id') var activeMapperIsCreator = Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')
var string = '' var string = ''
string += '<ul>' string += '<ul>'
relevantPeople.each(function (m) { relevantPeople.each(function (m) {
var isCreator = Metamaps.Active.Map.get('user_id') === m.get('id') var isCreator = Active.Map.get('user_id') === m.get('id')
string += '<li><a href="/explore/mapper/' + m.get('id') + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get('image') + '" />' + m.get('name') string += '<li><a href="/explore/mapper/' + m.get('id') + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get('image') + '" />' + m.get('name')
if (isCreator) string += ' (creator)' if (isCreator) string += ' (creator)'
string += '</a>' string += '</a>'
@ -664,11 +664,11 @@ Metamaps.Map.InfoBox = {
return string return string
}, },
updateNumbers: function () { updateNumbers: function () {
if (!Metamaps.Active.Map) return if (!Active.Map) return
var self = Metamaps.Map.InfoBox var self = Metamaps.Map.InfoBox
var mapper = Metamaps.Active.Mapper var mapper = Active.Mapper
var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators var relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var contributors_class = '' var contributors_class = ''
if (relevantPeople.length === 2) contributors_class = 'multiple mTwo' if (relevantPeople.length === 2) contributors_class = 'multiple mTwo'
@ -720,10 +720,10 @@ Metamaps.Map.InfoBox = {
self.selectingPermission = false self.selectingPermission = false
var permission = $(this).attr('class') var permission = $(this).attr('class')
Metamaps.Active.Map.save({ Active.Map.save({
permission: permission permission: permission
}) })
Metamaps.Active.Map.updateMapWrapper() Active.Map.updateMapWrapper()
shareable = permission === 'private' ? '' : 'shareable' shareable = permission === 'private' ? '' : 'shareable'
$('.mapPermission').removeClass('commons public private minimize').addClass(permission) $('.mapPermission').removeClass('commons public private minimize').addClass(permission)
$('.mapPermission .permissionSelect').remove() $('.mapPermission .permissionSelect').remove()
@ -735,8 +735,8 @@ Metamaps.Map.InfoBox = {
confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.' confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.'
var doIt = confirm(confirmString) var doIt = confirm(confirmString)
var map = Metamaps.Active.Map var map = Active.Map
var mapper = Metamaps.Active.Mapper var mapper = Active.Mapper
var authorized = map.authorizePermissionChange(mapper) var authorized = map.authorizePermissionChange(mapper)
if (doIt && authorized) { if (doIt && authorized) {
@ -747,7 +747,7 @@ Metamaps.Map.InfoBox = {
Metamaps.Maps.Shared.remove(map) Metamaps.Maps.Shared.remove(map)
map.destroy() map.destroy()
Metamaps.Router.home() Metamaps.Router.home()
Metamaps.GlobalUI.notifyUser('Map eliminated!') GlobalUI.notifyUser('Map eliminated!')
} }
else if (!authorized) { else if (!authorized) {
alert("Hey now. We can't just go around willy nilly deleting other people's maps now can we? Run off and find something constructive to do, eh?") alert("Hey now. We can't just go around willy nilly deleting other people's maps now can we? Run off and find something constructive to do, eh?")

6
frontend/src/Metamaps/Mapper.js
View file

@ -1,4 +1,6 @@
import Backbone from './Backbone' /*
* Metamaps.Backbone
*/
const Mapper = { const Mapper = {
// this function is to retrieve a mapper JSON object from the database // this function is to retrieve a mapper JSON object from the database
@ -9,7 +11,7 @@ const Mapper = {
if (!response.ok) throw response if (!response.ok) throw response
return response.json() return response.json()
}).then(payload => { }).then(payload => {
callback(new Backbone.Mapper(payload)) callback(new Metamaps.Backbone.Mapper(payload))
}) })
} }
} }

6
frontend/src/Metamaps/PasteInput.js
View file

@ -2,6 +2,8 @@
import AutoLayout from './AutoLayout' import AutoLayout from './AutoLayout'
import Import from './Import' import Import from './Import'
import TopicCard from './TopicCard'
import Util from './Util'
const PasteInput = { const PasteInput = {
// thanks to https://github.com/kevva/url-regex // thanks to https://github.com/kevva/url-regex
@ -19,7 +21,7 @@ const PasteInput = {
window.addEventListener("drop", function(e) { window.addEventListener("drop", function(e) {
e = e || event; e = e || event;
e.preventDefault(); e.preventDefault();
var coords = Metamaps.Util.pixelsToCoords({ x: e.clientX, y: e.clientY }) var coords = Util.pixelsToCoords({ x: e.clientX, y: e.clientY })
if (e.dataTransfer.files.length > 0) { if (e.dataTransfer.files.length > 0) {
var fileReader = new FileReader() var fileReader = new FileReader()
var text = fileReader.readAsText(e.dataTransfer.files[0]) var text = fileReader.readAsText(e.dataTransfer.files[0])
@ -86,7 +88,7 @@ const PasteInput = {
import_id, import_id,
{ {
success: function(topic) { success: function(topic) {
Metamaps.TopicCard.showCard(topic.get('node'), function() { TopicCard.showCard(topic.get('node'), function() {
$('#showcard #titleActivator').click() $('#showcard #titleActivator').click()
.find('textarea, input').focus() .find('textarea, input').focus()
}) })

320
frontend/src/Metamaps/Realtime.js
View file

@ -1,27 +1,27 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import Control from './Control'
import GlobalUI from './GlobalUI'
import JIT from './JIT'
import Map from './Map'
import Mapper from './Mapper'
import Topic from './Topic'
import Util from './Util'
import Views from './Views'
import Visualize from './Visualize'
/* /*
* Metamaps.Realtime.js * Metamaps.Realtime.js
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.Backbone
* - Metamaps.Control
* - Metamaps.Erb * - Metamaps.Erb
* - Metamaps.GlobalUI
* - Metamaps.JIT
* - Metamaps.Map
* - Metamaps.Mapper
* - Metamaps.Mappers * - Metamaps.Mappers
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Messages * - Metamaps.Messages
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topic
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Util
* - Metamaps.Views
* - Metamaps.Visualize
*/ */
const Realtime = { const Realtime = {
@ -52,7 +52,7 @@ const Realtime = {
self.disconnected = true self.disconnected = true
}) })
if (Metamaps.Active.Mapper) { if (Active.Mapper) {
self.webrtc = new SimpleWebRTC({ self.webrtc = new SimpleWebRTC({
connection: self.socket, connection: self.socket,
localVideoEl: self.videoId, localVideoEl: self.videoId,
@ -69,23 +69,23 @@ const Realtime = {
video: true, video: true,
audio: true audio: true
}, },
nick: Metamaps.Active.Mapper.id nick: Active.Mapper.id
}) })
var $video = $('<video></video>').attr('id', self.videoId) var $video = $('<video></video>').attr('id', self.videoId)
self.localVideo = { self.localVideo = {
$video: $video, $video: $video,
view: new Metamaps.Views.videoView($video[0], $('body'), 'me', true, { view: new Views.videoView($video[0], $('body'), 'me', true, {
DOUBLE_CLICK_TOLERANCE: 200, DOUBLE_CLICK_TOLERANCE: 200,
avatar: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '' avatar: Active.Mapper ? Active.Mapper.get('image') : ''
}) })
} }
self.room = new Metamaps.Views.room({ self.room = new Views.room({
webrtc: self.webrtc, webrtc: self.webrtc,
socket: self.socket, socket: self.socket,
username: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('name') : '', username: Active.Mapper ? Active.Mapper.get('name') : '',
image: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '', image: Active.Mapper ? Active.Mapper.get('image') : '',
room: 'global', room: 'global',
$video: self.localVideo.$video, $video: self.localVideo.$video,
myVideoView: self.localVideo.view, myVideoView: self.localVideo.view,
@ -93,35 +93,35 @@ const Realtime = {
}) })
self.room.videoAdded(self.handleVideoAdded) self.room.videoAdded(self.handleVideoAdded)
if (!Metamaps.Active.Map) { if (!Active.Map) {
self.room.chat.$container.hide() self.room.chat.$container.hide()
} }
$('body').prepend(self.room.chat.$container) $('body').prepend(self.room.chat.$container)
} // if Metamaps.Active.Mapper } // if Active.Mapper
}, },
addJuntoListeners: function () { addJuntoListeners: function () {
var self = Realtime var self = Realtime
$(document).on(Metamaps.Views.chatView.events.openTray, function () { $(document).on(Views.chatView.events.openTray, function () {
$('.main').addClass('compressed') $('.main').addClass('compressed')
self.chatOpen = true self.chatOpen = true
self.positionPeerIcons() self.positionPeerIcons()
}) })
$(document).on(Metamaps.Views.chatView.events.closeTray, function () { $(document).on(Views.chatView.events.closeTray, function () {
$('.main').removeClass('compressed') $('.main').removeClass('compressed')
self.chatOpen = false self.chatOpen = false
self.positionPeerIcons() self.positionPeerIcons()
}) })
$(document).on(Metamaps.Views.chatView.events.videosOn, function () { $(document).on(Views.chatView.events.videosOn, function () {
$('#wrapper').removeClass('hideVideos') $('#wrapper').removeClass('hideVideos')
}) })
$(document).on(Metamaps.Views.chatView.events.videosOff, function () { $(document).on(Views.chatView.events.videosOff, function () {
$('#wrapper').addClass('hideVideos') $('#wrapper').addClass('hideVideos')
}) })
$(document).on(Metamaps.Views.chatView.events.cursorsOn, function () { $(document).on(Views.chatView.events.cursorsOn, function () {
$('#wrapper').removeClass('hideCursors') $('#wrapper').removeClass('hideCursors')
}) })
$(document).on(Metamaps.Views.chatView.events.cursorsOff, function () { $(document).on(Views.chatView.events.cursorsOff, function () {
$('#wrapper').addClass('hideCursors') $('#wrapper').addClass('hideCursors')
}) })
}, },
@ -187,8 +187,8 @@ const Realtime = {
startActiveMap: function () { startActiveMap: function () {
var self = Realtime var self = Realtime
if (Metamaps.Active.Map && Metamaps.Active.Mapper) { if (Active.Map && Active.Mapper) {
if (Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)) { if (Active.Map.authorizeToEdit(Active.Mapper)) {
self.turnOn() self.turnOn()
self.setupSocket() self.setupSocket()
} else { } else {
@ -219,15 +219,15 @@ const Realtime = {
self.status = true self.status = true
$('.collabCompass').show() $('.collabCompass').show()
self.room.chat.$container.show() self.room.chat.$container.show()
self.room.room = 'map-' + Metamaps.Active.Map.id self.room.room = 'map-' + Active.Map.id
self.checkForACallToJoin() self.checkForACallToJoin()
self.activeMapper = { self.activeMapper = {
id: Metamaps.Active.Mapper.id, id: Active.Mapper.id,
name: Metamaps.Active.Mapper.get('name'), name: Active.Mapper.get('name'),
username: Metamaps.Active.Mapper.get('name'), username: Active.Mapper.get('name'),
image: Metamaps.Active.Mapper.get('image'), image: Active.Mapper.get('image'),
color: Metamaps.Util.getPastelColor(), color: Util.getPastelColor(),
self: true self: true
} }
self.localVideo.view.$container.find('.video-cutoff').css({ self.localVideo.view.$container.find('.video-cutoff').css({
@ -237,7 +237,7 @@ const Realtime = {
}, },
checkForACallToJoin: function () { checkForACallToJoin: function () {
var self = Realtime var self = Realtime
self.socket.emit('checkForCall', { room: self.room.room, mapid: Metamaps.Active.Map.id }) self.socket.emit('checkForCall', { room: self.room.room, mapid: Active.Map.id })
}, },
promptToJoin: function () { promptToJoin: function () {
var self = Realtime var self = Realtime
@ -245,7 +245,7 @@ const Realtime = {
var notifyText = "There's a conversation happening, want to join?" var notifyText = "There's a conversation happening, want to join?"
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>' notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>' notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>'
Metamaps.GlobalUI.notifyUser(notifyText, true) GlobalUI.notifyUser(notifyText, true)
self.room.conversationInProgress() self.room.conversationInProgress()
}, },
conversationHasBegun: function () { conversationHasBegun: function () {
@ -255,7 +255,7 @@ const Realtime = {
var notifyText = "There's a conversation starting, want to join?" var notifyText = "There's a conversation starting, want to join?"
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>' notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>' notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>'
Metamaps.GlobalUI.notifyUser(notifyText, true) GlobalUI.notifyUser(notifyText, true)
self.room.conversationInProgress() self.room.conversationInProgress()
}, },
countOthersInConversation: function () { countOthersInConversation: function () {
@ -275,7 +275,7 @@ const Realtime = {
if (self.inConversation) { if (self.inConversation) {
var username = mapper.name var username = mapper.name
var notifyText = username + ' joined the call' var notifyText = username + ' joined the call'
Metamaps.GlobalUI.notifyUser(notifyText) GlobalUI.notifyUser(notifyText)
} }
mapper.inConversation = true mapper.inConversation = true
@ -290,7 +290,7 @@ const Realtime = {
if (self.inConversation) { if (self.inConversation) {
var username = mapper.name var username = mapper.name
var notifyText = username + ' left the call' var notifyText = username + ' left the call'
Metamaps.GlobalUI.notifyUser(notifyText) GlobalUI.notifyUser(notifyText)
} }
mapper.inConversation = false mapper.inConversation = false
@ -332,7 +332,7 @@ const Realtime = {
notifyText += username + ' is inviting you to a conversation. Join live?' notifyText += username + ' is inviting you to a conversation. Join live?'
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>' notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>' notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>'
Metamaps.GlobalUI.notifyUser(notifyText, true) GlobalUI.notifyUser(notifyText, true)
}, },
invitedToJoin: function (inviter) { invitedToJoin: function (inviter) {
var self = Realtime var self = Realtime
@ -344,55 +344,55 @@ const Realtime = {
var notifyText = username + ' is inviting you to the conversation. Join?' var notifyText = username + ' is inviting you to the conversation. Join?'
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>' notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyInvite(' + inviter + ')">No</button>' notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyInvite(' + inviter + ')">No</button>'
Metamaps.GlobalUI.notifyUser(notifyText, true) GlobalUI.notifyUser(notifyText, true)
}, },
acceptCall: function (userid) { acceptCall: function (userid) {
var self = Realtime var self = Realtime
self.room.chat.sound.stop('sessioninvite') self.room.chat.sound.stop('sessioninvite')
self.socket.emit('callAccepted', { self.socket.emit('callAccepted', {
mapid: Metamaps.Active.Map.id, mapid: Active.Map.id,
invited: Metamaps.Active.Mapper.id, invited: Active.Mapper.id,
inviter: userid inviter: userid
}) })
$.post('/maps/' + Metamaps.Active.Map.id + '/events/conversation') $.post('/maps/' + Active.Map.id + '/events/conversation')
self.joinCall() self.joinCall()
Metamaps.GlobalUI.clearNotify() GlobalUI.clearNotify()
}, },
denyCall: function (userid) { denyCall: function (userid) {
var self = Realtime var self = Realtime
self.room.chat.sound.stop('sessioninvite') self.room.chat.sound.stop('sessioninvite')
self.socket.emit('callDenied', { self.socket.emit('callDenied', {
mapid: Metamaps.Active.Map.id, mapid: Active.Map.id,
invited: Metamaps.Active.Mapper.id, invited: Active.Mapper.id,
inviter: userid inviter: userid
}) })
Metamaps.GlobalUI.clearNotify() GlobalUI.clearNotify()
}, },
denyInvite: function (userid) { denyInvite: function (userid) {
var self = Realtime var self = Realtime
self.room.chat.sound.stop('sessioninvite') self.room.chat.sound.stop('sessioninvite')
self.socket.emit('inviteDenied', { self.socket.emit('inviteDenied', {
mapid: Metamaps.Active.Map.id, mapid: Active.Map.id,
invited: Metamaps.Active.Mapper.id, invited: Active.Mapper.id,
inviter: userid inviter: userid
}) })
Metamaps.GlobalUI.clearNotify() GlobalUI.clearNotify()
}, },
inviteACall: function (userid) { inviteACall: function (userid) {
var self = Realtime var self = Realtime
self.socket.emit('inviteACall', { self.socket.emit('inviteACall', {
mapid: Metamaps.Active.Map.id, mapid: Active.Map.id,
inviter: Metamaps.Active.Mapper.id, inviter: Active.Mapper.id,
invited: userid invited: userid
}) })
self.room.chat.invitationPending(userid) self.room.chat.invitationPending(userid)
Metamaps.GlobalUI.clearNotify() GlobalUI.clearNotify()
}, },
inviteToJoin: function (userid) { inviteToJoin: function (userid) {
var self = Realtime var self = Realtime
self.socket.emit('inviteToJoin', { self.socket.emit('inviteToJoin', {
mapid: Metamaps.Active.Map.id, mapid: Active.Map.id,
inviter: Metamaps.Active.Mapper.id, inviter: Active.Mapper.id,
invited: userid invited: userid
}) })
self.room.chat.invitationPending(userid) self.room.chat.invitationPending(userid)
@ -401,7 +401,7 @@ const Realtime = {
var self = Realtime var self = Realtime
var username = self.mappersOnMap[userid].name var username = self.mappersOnMap[userid].name
Metamaps.GlobalUI.notifyUser('Conversation starting...') GlobalUI.notifyUser('Conversation starting...')
self.joinCall() self.joinCall()
self.room.chat.invitationAnswered(userid) self.room.chat.invitationAnswered(userid)
}, },
@ -409,14 +409,14 @@ const Realtime = {
var self = Realtime var self = Realtime
var username = self.mappersOnMap[userid].name var username = self.mappersOnMap[userid].name
Metamaps.GlobalUI.notifyUser(username + " didn't accept your invitation") GlobalUI.notifyUser(username + " didn't accept your invitation")
self.room.chat.invitationAnswered(userid) self.room.chat.invitationAnswered(userid)
}, },
inviteDenied: function (userid) { inviteDenied: function (userid) {
var self = Realtime var self = Realtime
var username = self.mappersOnMap[userid].name var username = self.mappersOnMap[userid].name
Metamaps.GlobalUI.notifyUser(username + " didn't accept your invitation") GlobalUI.notifyUser(username + " didn't accept your invitation")
self.room.chat.invitationAnswered(userid) self.room.chat.invitationAnswered(userid)
}, },
joinCall: function () { joinCall: function () {
@ -436,22 +436,22 @@ const Realtime = {
}) })
self.inConversation = true self.inConversation = true
self.socket.emit('mapperJoinedCall', { self.socket.emit('mapperJoinedCall', {
mapid: Metamaps.Active.Map.id, mapid: Active.Map.id,
id: Metamaps.Active.Mapper.id id: Active.Mapper.id
}) })
self.webrtc.startLocalVideo() self.webrtc.startLocalVideo()
Metamaps.GlobalUI.clearNotify() GlobalUI.clearNotify()
self.room.chat.mapperJoinedCall(Metamaps.Active.Mapper.id) self.room.chat.mapperJoinedCall(Active.Mapper.id)
}, },
leaveCall: function () { leaveCall: function () {
var self = Realtime var self = Realtime
self.socket.emit('mapperLeftCall', { self.socket.emit('mapperLeftCall', {
mapid: Metamaps.Active.Map.id, mapid: Active.Map.id,
id: Metamaps.Active.Mapper.id id: Active.Mapper.id
}) })
self.room.chat.mapperLeftCall(Metamaps.Active.Mapper.id) self.room.chat.mapperLeftCall(Active.Mapper.id)
self.room.leaveVideoOnly() self.room.leaveVideoOnly()
self.inConversation = false self.inConversation = false
self.localVideo.view.$container.hide() self.localVideo.view.$container.hide()
@ -479,63 +479,63 @@ const Realtime = {
setupSocket: function () { setupSocket: function () {
var self = Realtime var self = Realtime
var socket = Realtime.socket var socket = Realtime.socket
var myId = Metamaps.Active.Mapper.id var myId = Active.Mapper.id
socket.emit('newMapperNotify', { socket.emit('newMapperNotify', {
userid: myId, userid: myId,
username: Metamaps.Active.Mapper.get('name'), username: Active.Mapper.get('name'),
userimage: Metamaps.Active.Mapper.get('image'), userimage: Active.Mapper.get('image'),
mapid: Metamaps.Active.Map.id mapid: Active.Map.id
}) })
socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToCall', self.invitedToCall) // new call socket.on(myId + '-' + Active.Map.id + '-invitedToCall', self.invitedToCall) // new call
socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToJoin', self.invitedToJoin) // call already in progress socket.on(myId + '-' + Active.Map.id + '-invitedToJoin', self.invitedToJoin) // call already in progress
socket.on(myId + '-' + Metamaps.Active.Map.id + '-callAccepted', self.callAccepted) socket.on(myId + '-' + Active.Map.id + '-callAccepted', self.callAccepted)
socket.on(myId + '-' + Metamaps.Active.Map.id + '-callDenied', self.callDenied) socket.on(myId + '-' + Active.Map.id + '-callDenied', self.callDenied)
socket.on(myId + '-' + Metamaps.Active.Map.id + '-inviteDenied', self.inviteDenied) socket.on(myId + '-' + Active.Map.id + '-inviteDenied', self.inviteDenied)
// receive word that there's a conversation in progress // receive word that there's a conversation in progress
socket.on('maps-' + Metamaps.Active.Map.id + '-callInProgress', self.promptToJoin) socket.on('maps-' + Active.Map.id + '-callInProgress', self.promptToJoin)
socket.on('maps-' + Metamaps.Active.Map.id + '-callStarting', self.conversationHasBegun) socket.on('maps-' + Active.Map.id + '-callStarting', self.conversationHasBegun)
socket.on('maps-' + Metamaps.Active.Map.id + '-mapperJoinedCall', self.mapperJoinedCall) socket.on('maps-' + Active.Map.id + '-mapperJoinedCall', self.mapperJoinedCall)
socket.on('maps-' + Metamaps.Active.Map.id + '-mapperLeftCall', self.mapperLeftCall) socket.on('maps-' + Active.Map.id + '-mapperLeftCall', self.mapperLeftCall)
// if you're the 'new guy' update your list with who's already online // if you're the 'new guy' update your list with who's already online
socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList) socket.on(myId + '-' + Active.Map.id + '-UpdateMapperList', self.updateMapperList)
// receive word that there's a new mapper on the map // receive word that there's a new mapper on the map
socket.on('maps-' + Metamaps.Active.Map.id + '-newmapper', self.newPeerOnMap) socket.on('maps-' + Active.Map.id + '-newmapper', self.newPeerOnMap)
// receive word that a mapper left the map // receive word that a mapper left the map
socket.on('maps-' + Metamaps.Active.Map.id + '-lostmapper', self.lostPeerOnMap) socket.on('maps-' + Active.Map.id + '-lostmapper', self.lostPeerOnMap)
// receive word that there's a mapper turned on realtime // receive word that there's a mapper turned on realtime
socket.on('maps-' + Metamaps.Active.Map.id + '-newrealtime', self.newCollaborator) socket.on('maps-' + Active.Map.id + '-newrealtime', self.newCollaborator)
// receive word that there's a mapper turned on realtime // receive word that there's a mapper turned on realtime
socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator) socket.on('maps-' + Active.Map.id + '-lostrealtime', self.lostCollaborator)
// //
socket.on('maps-' + Metamaps.Active.Map.id + '-topicDrag', self.topicDrag) socket.on('maps-' + Active.Map.id + '-topicDrag', self.topicDrag)
// //
socket.on('maps-' + Metamaps.Active.Map.id + '-newTopic', self.newTopic) socket.on('maps-' + Active.Map.id + '-newTopic', self.newTopic)
// //
socket.on('maps-' + Metamaps.Active.Map.id + '-newMessage', self.newMessage) socket.on('maps-' + Active.Map.id + '-newMessage', self.newMessage)
// //
socket.on('maps-' + Metamaps.Active.Map.id + '-removeTopic', self.removeTopic) socket.on('maps-' + Active.Map.id + '-removeTopic', self.removeTopic)
// //
socket.on('maps-' + Metamaps.Active.Map.id + '-newSynapse', self.newSynapse) socket.on('maps-' + Active.Map.id + '-newSynapse', self.newSynapse)
// //
socket.on('maps-' + Metamaps.Active.Map.id + '-removeSynapse', self.removeSynapse) socket.on('maps-' + Active.Map.id + '-removeSynapse', self.removeSynapse)
// update mapper compass position // update mapper compass position
socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords) socket.on('maps-' + Active.Map.id + '-updatePeerCoords', self.updatePeerCoords)
// deletions // deletions
socket.on('deleteTopicFromServer', self.removeTopic) socket.on('deleteTopicFromServer', self.removeTopic)
@ -551,7 +551,7 @@ const Realtime = {
x: event.pageX, x: event.pageX,
y: event.pageY y: event.pageY
} }
var coords = Metamaps.Util.pixelsToCoords(pixels) var coords = Util.pixelsToCoords(pixels)
self.sendCoords(coords) self.sendCoords(coords)
} }
$(document).on('mousemove.map', sendCoords) $(document).on('mousemove.map', sendCoords)
@ -562,54 +562,54 @@ const Realtime = {
x: e.pageX, x: e.pageX,
y: e.pageY y: e.pageY
} }
var coords = Metamaps.Util.pixelsToCoords(pixels) var coords = Util.pixelsToCoords(pixels)
self.sendCoords(coords) self.sendCoords(coords)
} }
self.positionPeerIcons() self.positionPeerIcons()
} }
$(document).on(Metamaps.JIT.events.zoom + '.map', zoom) $(document).on(JIT.events.zoom + '.map', zoom)
$(document).on(Metamaps.JIT.events.pan + '.map', self.positionPeerIcons) $(document).on(JIT.events.pan + '.map', self.positionPeerIcons)
var sendTopicDrag = function (event, positions) { var sendTopicDrag = function (event, positions) {
self.sendTopicDrag(positions) self.sendTopicDrag(positions)
} }
$(document).on(Metamaps.JIT.events.topicDrag + '.map', sendTopicDrag) $(document).on(JIT.events.topicDrag + '.map', sendTopicDrag)
var sendNewTopic = function (event, data) { var sendNewTopic = function (event, data) {
self.sendNewTopic(data) self.sendNewTopic(data)
} }
$(document).on(Metamaps.JIT.events.newTopic + '.map', sendNewTopic) $(document).on(JIT.events.newTopic + '.map', sendNewTopic)
var sendDeleteTopic = function (event, data) { var sendDeleteTopic = function (event, data) {
self.sendDeleteTopic(data) self.sendDeleteTopic(data)
} }
$(document).on(Metamaps.JIT.events.deleteTopic + '.map', sendDeleteTopic) $(document).on(JIT.events.deleteTopic + '.map', sendDeleteTopic)
var sendRemoveTopic = function (event, data) { var sendRemoveTopic = function (event, data) {
self.sendRemoveTopic(data) self.sendRemoveTopic(data)
} }
$(document).on(Metamaps.JIT.events.removeTopic + '.map', sendRemoveTopic) $(document).on(JIT.events.removeTopic + '.map', sendRemoveTopic)
var sendNewSynapse = function (event, data) { var sendNewSynapse = function (event, data) {
self.sendNewSynapse(data) self.sendNewSynapse(data)
} }
$(document).on(Metamaps.JIT.events.newSynapse + '.map', sendNewSynapse) $(document).on(JIT.events.newSynapse + '.map', sendNewSynapse)
var sendDeleteSynapse = function (event, data) { var sendDeleteSynapse = function (event, data) {
self.sendDeleteSynapse(data) self.sendDeleteSynapse(data)
} }
$(document).on(Metamaps.JIT.events.deleteSynapse + '.map', sendDeleteSynapse) $(document).on(JIT.events.deleteSynapse + '.map', sendDeleteSynapse)
var sendRemoveSynapse = function (event, data) { var sendRemoveSynapse = function (event, data) {
self.sendRemoveSynapse(data) self.sendRemoveSynapse(data)
} }
$(document).on(Metamaps.JIT.events.removeSynapse + '.map', sendRemoveSynapse) $(document).on(JIT.events.removeSynapse + '.map', sendRemoveSynapse)
var sendNewMessage = function (event, data) { var sendNewMessage = function (event, data) {
self.sendNewMessage(data) self.sendNewMessage(data)
} }
$(document).on(Metamaps.Views.room.events.newMessage + '.map', sendNewMessage) $(document).on(Views.room.events.newMessage + '.map', sendNewMessage)
}, },
attachMapListener: function () { attachMapListener: function () {
var self = Realtime var self = Realtime
@ -623,9 +623,9 @@ const Realtime = {
// send this new mapper back your details, and the awareness that you're online // send this new mapper back your details, and the awareness that you're online
var update = { var update = {
username: Metamaps.Active.Mapper.get('name'), username: Active.Mapper.get('name'),
userid: Metamaps.Active.Mapper.id, userid: Active.Mapper.id,
mapid: Metamaps.Active.Map.id mapid: Active.Map.id
} }
socket.emit('notifyStartRealtime', update) socket.emit('notifyStartRealtime', update)
}, },
@ -635,9 +635,9 @@ const Realtime = {
// send this new mapper back your details, and the awareness that you're online // send this new mapper back your details, and the awareness that you're online
var update = { var update = {
username: Metamaps.Active.Mapper.get('name'), username: Active.Mapper.get('name'),
userid: Metamaps.Active.Mapper.id, userid: Active.Mapper.id,
mapid: Metamaps.Active.Map.id mapid: Active.Map.id
} }
socket.emit('notifyStopRealtime', update) socket.emit('notifyStopRealtime', update)
}, },
@ -655,7 +655,7 @@ const Realtime = {
name: data.username, name: data.username,
username: data.username, username: data.username,
image: data.userimage, image: data.userimage,
color: Metamaps.Util.getPastelColor(), color: Util.getPastelColor(),
realtime: data.userrealtime, realtime: data.userrealtime,
inConversation: data.userinconversation, inConversation: data.userinconversation,
coords: { coords: {
@ -664,7 +664,7 @@ const Realtime = {
} }
} }
if (data.userid !== Metamaps.Active.Mapper.id) { if (data.userid !== Active.Mapper.id) {
self.room.chat.addParticipant(self.mappersOnMap[data.userid]) self.room.chat.addParticipant(self.mappersOnMap[data.userid])
if (data.userinconversation) self.room.chat.mapperJoinedCall(data.userid) if (data.userinconversation) self.room.chat.mapperJoinedCall(data.userid)
@ -687,7 +687,7 @@ const Realtime = {
name: data.username, name: data.username,
username: data.username, username: data.username,
image: data.userimage, image: data.userimage,
color: Metamaps.Util.getPastelColor(), color: Util.getPastelColor(),
realtime: true, realtime: true,
coords: { coords: {
x: 0, x: 0,
@ -696,7 +696,7 @@ const Realtime = {
} }
// create an item for them in the realtime box // create an item for them in the realtime box
if (data.userid !== Metamaps.Active.Mapper.id && self.status) { if (data.userid !== Active.Mapper.id && self.status) {
self.room.chat.sound.play('joinmap') self.room.chat.sound.play('joinmap')
self.room.chat.addParticipant(self.mappersOnMap[data.userid]) self.room.chat.addParticipant(self.mappersOnMap[data.userid])
@ -707,17 +707,17 @@ const Realtime = {
if (firstOtherPerson) { if (firstOtherPerson) {
notifyMessage += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.inviteACall(' + data.userid + ')">Suggest A Video Call</button>' notifyMessage += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.inviteACall(' + data.userid + ')">Suggest A Video Call</button>'
} }
Metamaps.GlobalUI.notifyUser(notifyMessage) GlobalUI.notifyUser(notifyMessage)
// send this new mapper back your details, and the awareness that you've loaded the map // send this new mapper back your details, and the awareness that you've loaded the map
var update = { var update = {
userToNotify: data.userid, userToNotify: data.userid,
username: Metamaps.Active.Mapper.get('name'), username: Active.Mapper.get('name'),
userimage: Metamaps.Active.Mapper.get('image'), userimage: Active.Mapper.get('image'),
userid: Metamaps.Active.Mapper.id, userid: Active.Mapper.id,
userrealtime: self.status, userrealtime: self.status,
userinconversation: self.inConversation, userinconversation: self.inConversation,
mapid: Metamaps.Active.Map.id mapid: Active.Map.id
} }
socket.emit('updateNewMapperList', update) socket.emit('updateNewMapperList', update)
} }
@ -753,7 +753,7 @@ const Realtime = {
$('#compass' + data.userid).remove() $('#compass' + data.userid).remove()
self.room.chat.removeParticipant(data.username) self.room.chat.removeParticipant(data.username)
Metamaps.GlobalUI.notifyUser(data.username + ' just left the map') GlobalUI.notifyUser(data.username + ' just left the map')
if ((self.inConversation && self.countOthersInConversation() === 0) || if ((self.inConversation && self.countOthersInConversation() === 0) ||
(!self.inConversation && self.countOthersInConversation() === 1)) { (!self.inConversation && self.countOthersInConversation() === 1)) {
@ -772,7 +772,7 @@ const Realtime = {
// $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn') // $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn')
$('#compass' + data.userid).show() $('#compass' + data.userid).show()
Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime') GlobalUI.notifyUser(data.username + ' just turned on realtime')
}, },
lostCollaborator: function (data) { lostCollaborator: function (data) {
var self = Realtime var self = Realtime
@ -786,7 +786,7 @@ const Realtime = {
// $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff') // $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff')
$('#compass' + data.userid).hide() $('#compass' + data.userid).hide()
Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime') GlobalUI.notifyUser(data.username + ' just turned off realtime')
}, },
updatePeerCoords: function (data) { updatePeerCoords: function (data) {
var self = Realtime var self = Realtime
@ -819,7 +819,7 @@ const Realtime = {
var compassDiameter = 56 var compassDiameter = 56
var compassArrowSize = 24 var compassArrowSize = 24
var origPixels = Metamaps.Util.coordsToPixels(mapper.coords) var origPixels = Util.coordsToPixels(mapper.coords)
var pixels = self.limitPixelsToScreen(origPixels) var pixels = self.limitPixelsToScreen(origPixels)
$('#compass' + id).css({ $('#compass' + id).css({
left: pixels.x + 'px', left: pixels.x + 'px',
@ -867,14 +867,14 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = Realtime.socket var socket = Realtime.socket
var map = Metamaps.Active.Map var map = Active.Map
var mapper = Metamaps.Active.Mapper var mapper = Active.Mapper
if (self.status && map.authorizeToEdit(mapper) && socket) { if (self.status && map.authorizeToEdit(mapper) && socket) {
var update = { var update = {
usercoords: coords, usercoords: coords,
userid: Metamaps.Active.Mapper.id, userid: Active.Mapper.id,
mapid: Metamaps.Active.Map.id mapid: Active.Map.id
} }
socket.emit('updateMapperCoords', update) socket.emit('updateMapperCoords', update)
} }
@ -883,8 +883,8 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map && self.status) { if (Active.Map && self.status) {
positions.mapid = Metamaps.Active.Map.id positions.mapid = Active.Map.id
socket.emit('topicDrag', positions) socket.emit('topicDrag', positions)
} }
}, },
@ -895,13 +895,13 @@ const Realtime = {
var topic var topic
var node var node
if (Metamaps.Active.Map && self.status) { if (Active.Map && self.status) {
for (var key in positions) { for (var key in positions) {
topic = Metamaps.Topics.get(key) topic = Metamaps.Topics.get(key)
if (topic) node = topic.get('node') if (topic) node = topic.get('node')
if (node) node.pos.setc(positions[key].x, positions[key].y) if (node) node.pos.setc(positions[key].x, positions[key].y)
} // for } // for
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
} }
}, },
sendTopicChange: function (topic) { sendTopicChange: function (topic) {
@ -960,23 +960,23 @@ const Realtime = {
socket.emit('mapChangeFromClient', data) socket.emit('mapChangeFromClient', data)
}, },
mapChange: function (data) { mapChange: function (data) {
var map = Metamaps.Active.Map var map = Active.Map
var isActiveMap = map && data.mapId === map.id var isActiveMap = map && data.mapId === map.id
if (isActiveMap) { if (isActiveMap) {
var couldEditBefore = map.authorizeToEdit(Metamaps.Active.Mapper) var couldEditBefore = map.authorizeToEdit(Active.Mapper)
var idBefore = map.id var idBefore = map.id
map.fetch({ map.fetch({
success: function (model, response) { success: function (model, response) {
var idNow = model.id var idNow = model.id
var canEditNow = model.authorizeToEdit(Metamaps.Active.Mapper) var canEditNow = model.authorizeToEdit(Active.Mapper)
if (idNow !== idBefore) { if (idNow !== idBefore) {
Metamaps.Map.leavePrivateMap() // this means the map has been changed to private Map.leavePrivateMap() // this means the map has been changed to private
} }
else if (couldEditBefore && !canEditNow) { else if (couldEditBefore && !canEditNow) {
Metamaps.Map.cantEditNow() Map.cantEditNow()
} }
else if (!couldEditBefore && canEditNow) { else if (!couldEditBefore && canEditNow) {
Metamaps.Map.canEditNow() Map.canEditNow()
} else { } else {
model.fetchContained() model.fetchContained()
model.trigger('changeByOther') model.trigger('changeByOther')
@ -991,7 +991,7 @@ const Realtime = {
var socket = self.socket var socket = self.socket
var message = data.attributes var message = data.attributes
message.mapid = Metamaps.Active.Map.id message.mapid = Active.Map.id
socket.emit('newMessage', message) socket.emit('newMessage', message)
}, },
newMessage: function (data) { newMessage: function (data) {
@ -1005,14 +1005,14 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map && self.status) { if (Active.Map && self.status) {
data.mapperid = Metamaps.Active.Mapper.id data.mapperid = Active.Mapper.id
data.mapid = Metamaps.Active.Map.id data.mapid = Active.Map.id
socket.emit('newTopic', data) socket.emit('newTopic', data)
} }
}, },
newTopic: function (data) { newTopic: function (data) {
var topic, mapping, mapper, mapperCallback, cancel var topic, mapping, mapper, cancel
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
@ -1021,7 +1021,7 @@ const Realtime = {
function waitThenRenderTopic () { function waitThenRenderTopic () {
if (topic && mapping && mapper) { if (topic && mapping && mapper) {
Metamaps.Topic.renderTopic(mapping, topic, false, false) Topic.renderTopic(mapping, topic, false, false)
} }
else if (!cancel) { else if (!cancel) {
setTimeout(waitThenRenderTopic, 10) setTimeout(waitThenRenderTopic, 10)
@ -1030,11 +1030,10 @@ const Realtime = {
mapper = Metamaps.Mappers.get(data.mapperid) mapper = Metamaps.Mappers.get(data.mapperid)
if (mapper === undefined) { if (mapper === undefined) {
mapperCallback = function (m) { Mapper.get(data.mapperid, function(m) {
Metamaps.Mappers.add(m) Metamaps.Mappers.add(m)
mapper = m mapper = m
} })
Metamaps.Mapper.get(data.mapperid, mapperCallback)
} }
$.ajax({ $.ajax({
url: '/topics/' + data.mappableid + '.json', url: '/topics/' + data.mappableid + '.json',
@ -1064,7 +1063,7 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Active.Map) {
socket.emit('deleteTopicFromClient', data) socket.emit('deleteTopicFromClient', data)
} }
}, },
@ -1073,8 +1072,8 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Active.Map) {
data.mapid = Metamaps.Active.Map.id data.mapid = Active.Map.id
socket.emit('removeTopic', data) socket.emit('removeTopic', data)
} }
}, },
@ -1088,7 +1087,7 @@ const Realtime = {
if (topic) { if (topic) {
var node = topic.get('node') var node = topic.get('node')
var mapping = topic.getMapping() var mapping = topic.getMapping()
Metamaps.Control.hideNode(node.id) Control.hideNode(node.id)
Metamaps.Topics.remove(topic) Metamaps.Topics.remove(topic)
Metamaps.Mappings.remove(mapping) Metamaps.Mappings.remove(mapping)
} }
@ -1098,9 +1097,9 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Active.Map) {
data.mapperid = Metamaps.Active.Mapper.id data.mapperid = Active.Mapper.id
data.mapid = Metamaps.Active.Map.id data.mapid = Active.Map.id
socket.emit('newSynapse', data) socket.emit('newSynapse', data)
} }
}, },
@ -1119,7 +1118,7 @@ const Realtime = {
topic2 = synapse.getTopic2() topic2 = synapse.getTopic2()
node2 = topic2.get('node') node2 = topic2.get('node')
Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, false) Synapse.renderSynapse(mapping, synapse, node1, node2, false)
} }
else if (!cancel) { else if (!cancel) {
setTimeout(waitThenRenderSynapse, 10) setTimeout(waitThenRenderSynapse, 10)
@ -1128,11 +1127,10 @@ const Realtime = {
mapper = Metamaps.Mappers.get(data.mapperid) mapper = Metamaps.Mappers.get(data.mapperid)
if (mapper === undefined) { if (mapper === undefined) {
mapperCallback = function (m) { Mapper.get(data.mapperid, function(m) {
Metamaps.Mappers.add(m) Metamaps.Mappers.add(m)
mapper = m mapper = m
} })
Metamaps.Mapper.get(data.mapperid, mapperCallback)
} }
$.ajax({ $.ajax({
url: '/synapses/' + data.mappableid + '.json', url: '/synapses/' + data.mappableid + '.json',
@ -1161,8 +1159,8 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Active.Map) {
data.mapid = Metamaps.Active.Map.id data.mapid = Active.Map.id
socket.emit('deleteSynapseFromClient', data) socket.emit('deleteSynapseFromClient', data)
} }
}, },
@ -1171,8 +1169,8 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Active.Map) {
data.mapid = Metamaps.Active.Map.id data.mapid = Active.Map.id
socket.emit('removeSynapse', data) socket.emit('removeSynapse', data)
} }
}, },
@ -1187,7 +1185,7 @@ const Realtime = {
var edge = synapse.get('edge') var edge = synapse.get('edge')
var mapping = synapse.getMapping() var mapping = synapse.getMapping()
if (edge.getData('mappings').length - 1 === 0) { if (edge.getData('mappings').length - 1 === 0) {
Metamaps.Control.hideEdge(edge) Control.hideEdge(edge)
} }
var index = _.indexOf(edge.getData('synapses'), synapse) var index = _.indexOf(edge.getData('synapses'), synapse)

158
frontend/src/Metamaps/Router.js
View file

@ -1,19 +1,19 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, Backbone, $ */ /* global Metamaps, Backbone, $ */
import Active from './Active'
import GlobalUI from './GlobalUI'
import JIT from './JIT'
import Map from './Map'
import Topic from './Topic'
import Views from './Views'
import Visualize from './Visualize'
/* /*
* Metamaps.Router.js.erb * Metamaps.Router.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.GlobalUI
* - Metamaps.JIT
* - Metamaps.Loading * - Metamaps.Loading
* - Metamaps.Map
* - Metamaps.Maps * - Metamaps.Maps
* - Metamaps.Topic
* - Metamaps.Views
* - Metamaps.Visualize
*/ */
const _Router = Backbone.Router.extend({ const _Router = Backbone.Router.extend({
@ -24,53 +24,53 @@ const _Router = Backbone.Router.extend({
'maps/:id': 'maps' // #maps/7 'maps/:id': 'maps' // #maps/7
}, },
home: function () { home: function () {
clearTimeout(Metamaps.Router.timeoutId) clearTimeout(this.timeoutId)
if (Metamaps.Active.Mapper) document.title = 'Explore Active Maps | Metamaps' if (Active.Mapper) document.title = 'Explore Active Maps | Metamaps'
else document.title = 'Home | Metamaps' else document.title = 'Home | Metamaps'
Metamaps.Router.currentSection = '' this.currentSection = ''
Metamaps.Router.currentPage = '' this.currentPage = ''
$('.wrapper').removeClass('mapPage topicPage') $('.wrapper').removeClass('mapPage topicPage')
var classes = Metamaps.Active.Mapper ? 'homePage explorePage' : 'homePage' var classes = Active.Mapper ? 'homePage explorePage' : 'homePage'
$('.wrapper').addClass(classes) $('.wrapper').addClass(classes)
var navigate = function () { var navigate = function () {
Metamaps.Router.timeoutId = setTimeout(function () { this.timeoutId = setTimeout(function () {
Metamaps.Router.navigate('') this.navigate('')
}, 300) }, 300)
} }
// all this only for the logged in home page // all this only for the logged in home page
if (Metamaps.Active.Mapper) { if (Active.Mapper) {
$('.homeButton a').attr('href', '/') $('.homeButton a').attr('href', '/')
Metamaps.GlobalUI.hideDiv('#yield') GlobalUI.hideDiv('#yield')
Metamaps.GlobalUI.showDiv('#explore') GlobalUI.showDiv('#explore')
Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active) Views.exploreMaps.setCollection(Metamaps.Maps.Active)
if (Metamaps.Maps.Active.length === 0) { if (Metamaps.Maps.Active.length === 0) {
Metamaps.Maps.Active.getMaps(navigate) // this will trigger an explore maps render Metamaps.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
} else { } else {
Metamaps.Views.exploreMaps.render(navigate) Views.exploreMaps.render(navigate)
} }
} else { } else {
// logged out home page // logged out home page
Metamaps.GlobalUI.hideDiv('#explore') GlobalUI.hideDiv('#explore')
Metamaps.GlobalUI.showDiv('#yield') GlobalUI.showDiv('#yield')
Metamaps.Router.timeoutId = setTimeout(navigate, 500) this.timeoutId = setTimeout(navigate, 500)
} }
Metamaps.GlobalUI.hideDiv('#infovis') GlobalUI.hideDiv('#infovis')
Metamaps.GlobalUI.hideDiv('#instructions') GlobalUI.hideDiv('#instructions')
Metamaps.Map.end() Map.end()
Metamaps.Topic.end() Topic.end()
Metamaps.Active.Map = null Active.Map = null
Metamaps.Active.Topic = null Active.Topic = null
}, },
explore: function (section, id) { explore: function (section, id) {
clearTimeout(Metamaps.Router.timeoutId) clearTimeout(this.timeoutId)
// just capitalize the variable section // just capitalize the variable section
// either 'featured', 'mapper', or 'active' // either 'featured', 'mapper', or 'active'
@ -90,12 +90,12 @@ const _Router = Backbone.Router.extend({
document.title = 'Explore My Maps | Metamaps' document.title = 'Explore My Maps | Metamaps'
} }
if (Metamaps.Active.Mapper && section != 'mapper') $('.homeButton a').attr('href', '/explore/' + section) if (Active.Mapper && section != 'mapper') $('.homeButton a').attr('href', '/explore/' + section)
$('.wrapper').removeClass('homePage mapPage topicPage') $('.wrapper').removeClass('homePage mapPage topicPage')
$('.wrapper').addClass('explorePage') $('.wrapper').addClass('explorePage')
Metamaps.Router.currentSection = 'explore' this.currentSection = 'explore'
Metamaps.Router.currentPage = section this.currentPage = section
// this will mean it's a mapper page being loaded // this will mean it's a mapper page being loaded
if (id) { if (id) {
@ -108,20 +108,20 @@ const _Router = Backbone.Router.extend({
Metamaps.Maps.Mapper.mapperId = id Metamaps.Maps.Mapper.mapperId = id
} }
Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps[capitalize]) Views.exploreMaps.setCollection(Metamaps.Maps[capitalize])
var navigate = function () { var navigate = function () {
var path = '/explore/' + Metamaps.Router.currentPage var path = '/explore/' + this.currentPage
// alter url if for mapper profile page // alter url if for mapper profile page
if (Metamaps.Router.currentPage === 'mapper') { if (this.currentPage === 'mapper') {
path += '/' + Metamaps.Maps.Mapper.mapperId path += '/' + Metamaps.Maps.Mapper.mapperId
} }
Metamaps.Router.navigate(path) this.navigate(path)
} }
var navigateTimeout = function () { var navigateTimeout = function () {
Metamaps.Router.timeoutId = setTimeout(navigate, 300) this.timeoutId = setTimeout(navigate, 300)
} }
if (Metamaps.Maps[capitalize].length === 0) { if (Metamaps.Maps[capitalize].length === 0) {
Metamaps.Loading.show() Metamaps.Loading.show()
@ -130,77 +130,77 @@ const _Router = Backbone.Router.extend({
}, 300) // wait 300 milliseconds till the other animations are done to do the fetch }, 300) // wait 300 milliseconds till the other animations are done to do the fetch
} else { } else {
if (id) { if (id) {
Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout) Views.exploreMaps.fetchUserThenRender(navigateTimeout)
} else { } else {
Metamaps.Views.exploreMaps.render(navigateTimeout) Views.exploreMaps.render(navigateTimeout)
} }
} }
Metamaps.GlobalUI.showDiv('#explore') GlobalUI.showDiv('#explore')
Metamaps.GlobalUI.hideDiv('#yield') GlobalUI.hideDiv('#yield')
Metamaps.GlobalUI.hideDiv('#infovis') GlobalUI.hideDiv('#infovis')
Metamaps.GlobalUI.hideDiv('#instructions') GlobalUI.hideDiv('#instructions')
Metamaps.Map.end() Map.end()
Metamaps.Topic.end() Topic.end()
Metamaps.Active.Map = null Active.Map = null
Metamaps.Active.Topic = null Active.Topic = null
}, },
maps: function (id) { maps: function (id) {
clearTimeout(Metamaps.Router.timeoutId) clearTimeout(this.timeoutId)
document.title = 'Map ' + id + ' | Metamaps' document.title = 'Map ' + id + ' | Metamaps'
Metamaps.Router.currentSection = 'map' this.currentSection = 'map'
Metamaps.Router.currentPage = id this.currentPage = id
$('.wrapper').removeClass('homePage explorePage topicPage') $('.wrapper').removeClass('homePage explorePage topicPage')
$('.wrapper').addClass('mapPage') $('.wrapper').addClass('mapPage')
// another class will be added to wrapper if you // another class will be added to wrapper if you
// can edit this map '.canEditMap' // can edit this map '.canEditMap'
Metamaps.GlobalUI.hideDiv('#yield') GlobalUI.hideDiv('#yield')
Metamaps.GlobalUI.hideDiv('#explore') GlobalUI.hideDiv('#explore')
// clear the visualization, if there was one, before showing its div again // clear the visualization, if there was one, before showing its div again
if (Metamaps.Visualize.mGraph) { if (Visualize.mGraph) {
Metamaps.Visualize.mGraph.graph.empty() Visualize.mGraph.graph.empty()
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas) JIT.centerMap(Visualize.mGraph.canvas)
} }
Metamaps.GlobalUI.showDiv('#infovis') GlobalUI.showDiv('#infovis')
Metamaps.Topic.end() Topic.end()
Metamaps.Active.Topic = null Active.Topic = null
Metamaps.Loading.show() Metamaps.Loading.show()
Metamaps.Map.end() Map.end()
Metamaps.Map.launch(id) Map.launch(id)
}, },
topics: function (id) { topics: function (id) {
clearTimeout(Metamaps.Router.timeoutId) clearTimeout(this.timeoutId)
document.title = 'Topic ' + id + ' | Metamaps' document.title = 'Topic ' + id + ' | Metamaps'
Metamaps.Router.currentSection = 'topic' this.currentSection = 'topic'
Metamaps.Router.currentPage = id this.currentPage = id
$('.wrapper').removeClass('homePage explorePage mapPage') $('.wrapper').removeClass('homePage explorePage mapPage')
$('.wrapper').addClass('topicPage') $('.wrapper').addClass('topicPage')
Metamaps.GlobalUI.hideDiv('#yield') GlobalUI.hideDiv('#yield')
Metamaps.GlobalUI.hideDiv('#explore') GlobalUI.hideDiv('#explore')
// clear the visualization, if there was one, before showing its div again // clear the visualization, if there was one, before showing its div again
if (Metamaps.Visualize.mGraph) { if (Visualize.mGraph) {
Metamaps.Visualize.mGraph.graph.empty() Visualize.mGraph.graph.empty()
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas) JIT.centerMap(Visualize.mGraph.canvas)
} }
Metamaps.GlobalUI.showDiv('#infovis') GlobalUI.showDiv('#infovis')
Metamaps.Map.end() Map.end()
Metamaps.Active.Map = null Active.Map = null
Metamaps.Topic.end() Topic.end()
Metamaps.Topic.launch(id) Topic.launch(id)
} }
}) })
@ -227,9 +227,9 @@ Router.intercept = function (evt) {
segments.splice(0, 1) // pop off the element created by the first / segments.splice(0, 1) // pop off the element created by the first /
if (href.attr === '') { if (href.attr === '') {
Metamaps.Router.home() Router.home()
} else { } else {
Metamaps.Router[segments[0]](segments[1], segments[2]) Router[segments[0]](segments[1], segments[2])
} }
} }
} }
@ -240,7 +240,7 @@ Router.init = function () {
pushState: true, pushState: true,
root: '/' root: '/'
}) })
$(document).on('click', 'a[data-router="true"]', Metamaps.Router.intercept) $(document).on('click', 'a[data-router="true"]', Router.intercept)
} }
export default Router export default Router

52
frontend/src/Metamaps/Synapse.js
View file

@ -1,20 +1,22 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import Control from './Control'
import Create from './Create'
import JIT from './JIT'
import Map from './Map'
import Selected from './Selected'
import Settings from './Settings'
import Visualize from './Visualize'
/* /*
* Metamaps.Synapse.js.erb * Metamaps.Synapse.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.Control
* - Metamaps.Create
* - Metamaps.JIT
* - Metamaps.Map
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Selected
* - Metamaps.Settings
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Visualize
*/ */
const Synapse = { const Synapse = {
@ -52,18 +54,18 @@ const Synapse = {
* *
*/ */
renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) { renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) {
var self = Metamaps.Synapse var self = Synapse
var edgeOnViz var edgeOnViz
var newedge = synapse.createEdge(mapping) var newedge = synapse.createEdge(mapping)
Metamaps.Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data) Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data)
edgeOnViz = Metamaps.Visualize.mGraph.graph.getAdjacence(node1.id, node2.id) edgeOnViz = Visualize.mGraph.graph.getAdjacence(node1.id, node2.id)
synapse.set('edge', edgeOnViz) synapse.set('edge', edgeOnViz)
synapse.updateEdge() // links the synapse and the mapping to the edge synapse.updateEdge() // links the synapse and the mapping to the edge
Metamaps.Control.selectEdge(edgeOnViz) Control.selectEdge(edgeOnViz)
var mappingSuccessCallback = function (mappingModel, response) { var mappingSuccessCallback = function (mappingModel, response) {
var newSynapseData = { var newSynapseData = {
@ -71,17 +73,17 @@ const Synapse = {
mappableid: mappingModel.get('mappable_id') mappableid: mappingModel.get('mappable_id')
} }
$(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]) $(document).trigger(JIT.events.newSynapse, [newSynapseData])
} }
var synapseSuccessCallback = function (synapseModel, response) { var synapseSuccessCallback = function (synapseModel, response) {
if (Metamaps.Active.Map) { if (Active.Map) {
mapping.save({ mappable_id: synapseModel.id }, { mapping.save({ mappable_id: synapseModel.id }, {
success: mappingSuccessCallback success: mappingSuccessCallback
}) })
} }
} }
if (!Metamaps.Settings.sandbox && createNewInDB) { if (!Settings.sandbox && createNewInDB) {
if (synapse.isNew()) { if (synapse.isNew()) {
synapse.save(null, { synapse.save(null, {
success: synapseSuccessCallback, success: synapseSuccessCallback,
@ -89,7 +91,7 @@ const Synapse = {
console.log('error saving synapse to database') console.log('error saving synapse to database')
} }
}) })
} else if (!synapse.isNew() && Metamaps.Active.Map) { } else if (!synapse.isNew() && Active.Map) {
mapping.save(null, { mapping.save(null, {
success: mappingSuccessCallback success: mappingSuccessCallback
}) })
@ -105,27 +107,27 @@ const Synapse = {
synapse, synapse,
mapping mapping
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
// for each node in this array we will create a synapse going to the position2 node. // for each node in this array we will create a synapse going to the position2 node.
var synapsesToCreate = [] var synapsesToCreate = []
topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id) topic2 = Metamaps.Topics.get(Create.newSynapse.topic2id)
node2 = topic2.get('node') node2 = topic2.get('node')
var len = Metamaps.Selected.Nodes.length var len = Selected.Nodes.length
if (len == 0) { if (len == 0) {
topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id) topic1 = Metamaps.Topics.get(Create.newSynapse.topic1id)
synapsesToCreate[0] = topic1.get('node') synapsesToCreate[0] = topic1.get('node')
} else if (len > 0) { } else if (len > 0) {
synapsesToCreate = Metamaps.Selected.Nodes synapsesToCreate = Selected.Nodes
} }
for (var i = 0; i < synapsesToCreate.length; i++) { for (var i = 0; i < synapsesToCreate.length; i++) {
node1 = synapsesToCreate[i] node1 = synapsesToCreate[i]
topic1 = node1.getData('topic') topic1 = node1.getData('topic')
synapse = new Metamaps.Backbone.Synapse({ synapse = new Metamaps.Backbone.Synapse({
desc: Metamaps.Create.newSynapse.description, desc: Create.newSynapse.description,
node1_id: topic1.isNew() ? topic1.cid : topic1.id, node1_id: topic1.isNew() ? topic1.cid : topic1.id,
node2_id: topic2.isNew() ? topic2.cid : topic2.id, node2_id: topic2.isNew() ? topic2.cid : topic2.id,
}) })
@ -141,7 +143,7 @@ const Synapse = {
self.renderSynapse(mapping, synapse, node1, node2, true) self.renderSynapse(mapping, synapse, node1, node2, true)
} // for each in synapsesToCreate } // for each in synapsesToCreate
Metamaps.Create.newSynapse.hide() Create.newSynapse.hide()
}, },
getSynapseFromAutocomplete: function (id) { getSynapseFromAutocomplete: function (id) {
var self = Synapse, var self = Synapse,
@ -158,11 +160,11 @@ const Synapse = {
}) })
Metamaps.Mappings.add(mapping) Metamaps.Mappings.add(mapping)
topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id) topic1 = Metamaps.Topics.get(Create.newSynapse.topic1id)
node1 = topic1.get('node') node1 = topic1.get('node')
topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id) topic2 = Metamaps.Topics.get(Create.newSynapse.topic2id)
node2 = topic2.get('node') node2 = topic2.get('node')
Metamaps.Create.newSynapse.hide() Create.newSynapse.hide()
self.renderSynapse(mapping, synapse, node1, node2, true) self.renderSynapse(mapping, synapse, node1, node2, true)
} }

2
frontend/src/Metamaps/SynapseCard.js
View file

@ -1,4 +1,4 @@
/* global Metamaps, $ */ /* global $ */
import Active from './Active' import Active from './Active'
import Control from './Control' import Control from './Control'
import Mapper from './Mapper' import Mapper from './Mapper'

127
frontend/src/Metamaps/Topic.js
View file

@ -1,26 +1,29 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active' import Active from './Active'
import AutoLayout from './AutoLayout'
import Create from './Create'
import Filter from './Filter'
import GlobalUI from './GlobalUI'
import JIT from './JIT' import JIT from './JIT'
import Map from './Map'
import Router from './Router'
import Selected from './Selected' import Selected from './Selected'
import Settings from './Settings' import Settings from './Settings'
import SynapseCard from './SynapseCard'
import TopicCard from './TopicCard'
import Util from './Util' import Util from './Util'
import Visualize from './Visualize'
/* /*
* Metamaps.Topic.js.erb * Metamaps.Topic.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.Create
* - Metamaps.Creators * - Metamaps.Creators
* - Metamaps.Filter
* - Metamaps.GlobalUI
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.SynapseCard
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.TopicCard
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Visualize
*/ */
const Topic = { const Topic = {
@ -67,19 +70,19 @@ const Topic = {
$('#filter_by_mapper h3').html('CREATORS') $('#filter_by_mapper h3').html('CREATORS')
// build and render the visualization // build and render the visualization
Metamaps.Visualize.type = 'RGraph' Visualize.type = 'RGraph'
JIT.prepareVizData() JIT.prepareVizData()
// update filters // update filters
Metamaps.Filter.reset() Filter.reset()
// reset selected arrays // reset selected arrays
Selected.reset() Selected.reset()
// these three update the actual filter box with the right list items // these three update the actual filter box with the right list items
Metamaps.Filter.checkMetacodes() Filter.checkMetacodes()
Metamaps.Filter.checkSynapses() Filter.checkSynapses()
Metamaps.Filter.checkMappers() Filter.checkMappers()
// for mobile // for mobile
$('#header_content').html(Active.Topic.get('name')) $('#header_content').html(Active.Topic.get('name'))
@ -93,22 +96,22 @@ const Topic = {
end: function () { end: function () {
if (Active.Topic) { if (Active.Topic) {
$('.rightclickmenu').remove() $('.rightclickmenu').remove()
Metamaps.TopicCard.hideCard() TopicCard.hideCard()
Metamaps.SynapseCard.hideCard() SynapseCard.hideCard()
Metamaps.Filter.close() Filter.close()
} }
}, },
centerOn: function (nodeid, callback) { centerOn: function (nodeid, callback) {
// don't clash with fetchRelatives // don't clash with fetchRelatives
if (!Metamaps.Visualize.mGraph.busy) { if (!Visualize.mGraph.busy) {
Metamaps.Visualize.mGraph.onClick(nodeid, { Visualize.mGraph.onClick(nodeid, {
hideLabels: false, hideLabels: false,
duration: 1000, duration: 1000,
onComplete: function () { onComplete: function () {
if (callback) callback() if (callback) callback()
} }
}) })
Metamaps.Router.navigate('/topics/' + nodeid) Router.navigate('/topics/' + nodeid)
Active.Topic = Metamaps.Topics.get(nodeid) Active.Topic = Metamaps.Topics.get(nodeid)
} }
}, },
@ -127,7 +130,7 @@ const Topic = {
var successCallback; var successCallback;
successCallback = function (data) { successCallback = function (data) {
if (Metamaps.Visualize.mGraph.busy) { if (Visualize.mGraph.busy) {
// don't clash with centerOn // don't clash with centerOn
window.setTimeout(function() { successCallback(data) }, 100) window.setTimeout(function() { successCallback(data) }, 100)
return return
@ -141,7 +144,7 @@ const Topic = {
var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses) var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses)
var graph = JIT.convertModelsToJIT(topicColl, synapseColl)[0] var graph = JIT.convertModelsToJIT(topicColl, synapseColl)[0]
Metamaps.Visualize.mGraph.op.sum(graph, { Visualize.mGraph.op.sum(graph, {
type: 'fade', type: 'fade',
duration: 500, duration: 500,
hideLabels: false hideLabels: false
@ -149,7 +152,7 @@ const Topic = {
var i, l, t, s var i, l, t, s
Metamaps.Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function (n) {
t = Metamaps.Topics.get(n.id) t = Metamaps.Topics.get(n.id)
t.set({ node: n }, { silent: true }) t.set({ node: n }, { silent: true })
t.updateNode() t.updateNode()
@ -186,7 +189,7 @@ const Topic = {
// opts is additional options in a hash // opts is additional options in a hash
// TODO: move createNewInDB and permitCerateSYnapseAfter into opts // TODO: move createNewInDB and permitCerateSYnapseAfter into opts
renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter, opts) { renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter, opts) {
var self = Metamaps.Topic var self = Topic
var nodeOnViz, tempPos var nodeOnViz, tempPos
@ -194,37 +197,37 @@ const Topic = {
var midpoint = {}, pixelPos var midpoint = {}, pixelPos
if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) { if (!$.isEmptyObject(Visualize.mGraph.graph.nodes)) {
Metamaps.Visualize.mGraph.graph.addNode(newnode) Visualize.mGraph.graph.addNode(newnode)
nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id) nodeOnViz = Visualize.mGraph.graph.getNode(newnode.id)
topic.set('node', nodeOnViz, {silent: true}) topic.set('node', nodeOnViz, {silent: true})
topic.updateNode() // links the topic and the mapping to the node topic.updateNode() // links the topic and the mapping to the node
nodeOnViz.setData('dim', 1, 'start') nodeOnViz.setData('dim', 1, 'start')
nodeOnViz.setData('dim', 25, 'end') nodeOnViz.setData('dim', 25, 'end')
if (Metamaps.Visualize.type === 'RGraph') { if (Visualize.type === 'RGraph') {
tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')) tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'))
tempPos = tempPos.toPolar() tempPos = tempPos.toPolar()
nodeOnViz.setPos(tempPos, 'current') nodeOnViz.setPos(tempPos, 'current')
nodeOnViz.setPos(tempPos, 'start') nodeOnViz.setPos(tempPos, 'start')
nodeOnViz.setPos(tempPos, 'end') nodeOnViz.setPos(tempPos, 'end')
} else if (Metamaps.Visualize.type === 'ForceDirected') { } else if (Visualize.type === 'ForceDirected') {
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current')
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start')
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end')
} }
if (Metamaps.Create.newTopic.addSynapse && permitCreateSynapseAfter) { if (Create.newTopic.addSynapse && permitCreateSynapseAfter) {
Metamaps.Create.newSynapse.topic1id = JIT.tempNode.getData('topic').id Create.newSynapse.topic1id = JIT.tempNode.getData('topic').id
// position the form // position the form
midpoint.x = JIT.tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - JIT.tempNode.pos.getc().x) / 2 midpoint.x = JIT.tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - JIT.tempNode.pos.getc().x) / 2
midpoint.y = JIT.tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - JIT.tempNode.pos.getc().y) / 2 midpoint.y = JIT.tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - JIT.tempNode.pos.getc().y) / 2
pixelPos = Metamaps.Util.coordsToPixels(midpoint) pixelPos = Util.coordsToPixels(midpoint)
$('#new_synapse').css('left', pixelPos.x + 'px') $('#new_synapse').css('left', pixelPos.x + 'px')
$('#new_synapse').css('top', pixelPos.y + 'px') $('#new_synapse').css('top', pixelPos.y + 'px')
// show the form // show the form
Metamaps.Create.newSynapse.open() Create.newSynapse.open()
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function () { onComplete: function () {
@ -234,16 +237,16 @@ const Topic = {
} }
}) })
} else { } else {
Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas) Visualize.mGraph.fx.plotNode(nodeOnViz, Visualize.mGraph.canvas)
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function () {} onComplete: function () {}
}) })
} }
} else { } else {
Metamaps.Visualize.mGraph.loadJSON(newnode) Visualize.mGraph.loadJSON(newnode)
nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id) nodeOnViz = Visualize.mGraph.graph.getNode(newnode.id)
topic.set('node', nodeOnViz, {silent: true}) topic.set('node', nodeOnViz, {silent: true})
topic.updateNode() // links the topic and the mapping to the node topic.updateNode() // links the topic and the mapping to the node
@ -252,8 +255,8 @@ const Topic = {
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current')
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start')
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end')
Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas) Visualize.mGraph.fx.plotNode(nodeOnViz, Visualize.mGraph.canvas)
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function () {} onComplete: function () {}
@ -284,8 +287,8 @@ const Topic = {
}) })
} }
if (Metamaps.Create.newTopic.addSynapse) { if (Create.newTopic.addSynapse) {
Metamaps.Create.newSynapse.topic2id = topicModel.id Create.newSynapse.topic2id = topicModel.id
} }
} }
@ -305,58 +308,58 @@ const Topic = {
} }
}, },
createTopicLocally: function () { createTopicLocally: function () {
var self = Metamaps.Topic var self = Topic
if (Metamaps.Create.newTopic.name === '') { if (Create.newTopic.name === '') {
Metamaps.GlobalUI.notifyUser('Please enter a topic title...') GlobalUI.notifyUser('Please enter a topic title...')
return return
} }
// hide the 'double-click to add a topic' message // hide the 'double-click to add a topic' message
Metamaps.GlobalUI.hideDiv('#instructions') GlobalUI.hideDiv('#instructions')
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
var metacode = Metamaps.Metacodes.get(Metamaps.Create.newTopic.metacode) var metacode = Metamaps.Metacodes.get(Create.newTopic.metacode)
var topic = new Metamaps.Backbone.Topic({ var topic = new Metamaps.Backbone.Topic({
name: Metamaps.Create.newTopic.name, name: Create.newTopic.name,
metacode_id: metacode.id, metacode_id: metacode.id,
defer_to_map_id: Active.Map.id defer_to_map_id: Active.Map.id
}) })
Metamaps.Topics.add(topic) Metamaps.Topics.add(topic)
if (Metamaps.Create.newTopic.pinned) { if (Create.newTopic.pinned) {
var nextCoords = Metamaps.AutoLayout.getNextCoord() var nextCoords = AutoLayout.getNextCoord()
} }
var mapping = new Metamaps.Backbone.Mapping({ var mapping = new Metamaps.Backbone.Mapping({
xloc: nextCoords ? nextCoords.x : Metamaps.Create.newTopic.x, xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Metamaps.Create.newTopic.y, yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_id: topic.cid, mappable_id: topic.cid,
mappable_type: 'Topic', mappable_type: 'Topic',
}) })
Metamaps.Mappings.add(mapping) Metamaps.Mappings.add(mapping)
// these can't happen until the value is retrieved, which happens in the line above // these can't happen until the value is retrieved, which happens in the line above
Metamaps.Create.newTopic.hide() Create.newTopic.hide()
self.renderTopic(mapping, topic, true, true) // this function also includes the creation of the topic in the database self.renderTopic(mapping, topic, true, true) // this function also includes the creation of the topic in the database
}, },
getTopicFromAutocomplete: function (id) { getTopicFromAutocomplete: function (id) {
var self = Metamaps.Topic var self = Topic
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
Metamaps.Create.newTopic.hide() Create.newTopic.hide()
var topic = self.get(id) var topic = self.get(id)
if (Metamaps.Create.newTopic.pinned) { if (Create.newTopic.pinned) {
var nextCoords = Metamaps.AutoLayout.getNextCoord() var nextCoords = AutoLayout.getNextCoord()
} }
var mapping = new Metamaps.Backbone.Mapping({ var mapping = new Metamaps.Backbone.Mapping({
xloc: nextCoords ? nextCoords.x : Metamaps.Create.newTopic.x, xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Metamaps.Create.newTopic.y, yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_type: 'Topic', mappable_type: 'Topic',
mappable_id: topic.id, mappable_id: topic.id,
}) })
@ -365,13 +368,13 @@ const Topic = {
self.renderTopic(mapping, topic, true, true) self.renderTopic(mapping, topic, true, true)
}, },
getTopicFromSearch: function (event, id) { getTopicFromSearch: function (event, id) {
var self = Metamaps.Topic var self = Topic
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
var topic = self.get(id) var topic = self.get(id)
var nextCoords = Metamaps.AutoLayout.getNextCoord() var nextCoords = AutoLayout.getNextCoord()
var mapping = new Metamaps.Backbone.Mapping({ var mapping = new Metamaps.Backbone.Mapping({
xloc: nextCoords.x, xloc: nextCoords.x,
yloc: nextCoords.y, yloc: nextCoords.y,
@ -382,7 +385,7 @@ const Topic = {
self.renderTopic(mapping, topic, true, true) self.renderTopic(mapping, topic, true, true)
Metamaps.GlobalUI.notifyUser('Topic was added to your map!') GlobalUI.notifyUser('Topic was added to your map!')
event.stopPropagation() event.stopPropagation()
event.preventDefault() event.preventDefault()

8
frontend/src/Metamaps/TopicCard.js
View file

@ -1,7 +1,9 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active' import Active from './Active'
import GlobalUI from './GlobalUI'
import Mapper from './Mapper' import Mapper from './Mapper'
import Router from './Router'
import Util from './Util' import Util from './Util'
import Visualize from './Visualize' import Visualize from './Visualize'
@ -9,9 +11,7 @@ import Visualize from './Visualize'
* Metamaps.TopicCard.js * Metamaps.TopicCard.js
* *
* Dependencies: * Dependencies:
* - Metamaps.GlobalUI
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Router
*/ */
const TopicCard = { const TopicCard = {
openTopicCard: null, // stores the topic that's currently open openTopicCard: null, // stores the topic that's currently open
@ -332,7 +332,7 @@ const TopicCard = {
$('.showcard .hoverTip').removeClass('hide') $('.showcard .hoverTip').removeClass('hide')
}) })
$('.mapCount .tip li a').click(Metamaps.Router.intercept) $('.mapCount .tip li a').click(Router.intercept)
var originalText = $('.showMore').html() var originalText = $('.showMore').html()
$('.mapCount .tip .showMore').unbind().toggle( $('.mapCount .tip .showMore').unbind().toggle(
@ -353,7 +353,7 @@ const TopicCard = {
var self = TopicCard var self = TopicCard
self.removeLink() self.removeLink()
Metamaps.GlobalUI.notifyUser('Invalid link') GlobalUI.notifyUser('Invalid link')
}, },
populateShowCard: function (topic) { populateShowCard: function (topic) {
var self = TopicCard var self = TopicCard

14
frontend/src/Metamaps/Visualize.js
View file

@ -2,6 +2,8 @@
import Active from './Active' import Active from './Active'
import JIT from './JIT' import JIT from './JIT'
import Router from './Router'
import TopicCard from './TopicCard'
/* /*
* Metamaps.Visualize * Metamaps.Visualize
@ -9,9 +11,7 @@ import JIT from './JIT'
* Dependencies: * Dependencies:
* - Metamaps.Loading * - Metamaps.Loading
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Router
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.TopicCard
* - Metamaps.Topics * - Metamaps.Topics
*/ */
@ -42,7 +42,7 @@ const Visualize = {
// prevent touch events on the canvas from default behaviour // prevent touch events on the canvas from default behaviour
$('#infovis-canvas').bind('touchend touchcancel', function (event) { $('#infovis-canvas').bind('touchend touchcancel', function (event) {
lastDist = 0 lastDist = 0
if (!self.mGraph.events.touchMoved && !Visualize.touchDragNode) Metamaps.TopicCard.hideCurrentCard() if (!self.mGraph.events.touchMoved && !Visualize.touchDragNode) TopicCard.hideCurrentCard()
self.mGraph.events.touched = self.mGraph.events.touchMoved = false self.mGraph.events.touched = self.mGraph.events.touchMoved = false
Visualize.touchDragNode = false Visualize.touchDragNode = false
}) })
@ -204,16 +204,16 @@ const Visualize = {
hold() hold()
// update the url now that the map is ready // update the url now that the map is ready
clearTimeout(Metamaps.Router.timeoutId) clearTimeout(Router.timeoutId)
Metamaps.Router.timeoutId = setTimeout(function () { Router.timeoutId = setTimeout(function () {
var m = Active.Map var m = Active.Map
var t = Active.Topic var t = Active.Topic
if (m && window.location.pathname !== '/maps/' + m.id) { if (m && window.location.pathname !== '/maps/' + m.id) {
Metamaps.Router.navigate('/maps/' + m.id) Router.navigate('/maps/' + m.id)
} }
else if (t && window.location.pathname !== '/topics/' + t.id) { else if (t && window.location.pathname !== '/topics/' + t.id) {
Metamaps.Router.navigate('/topics/' + t.id) Router.navigate('/topics/' + t.id)
} }
}, 800) }, 800)
} }

20
frontend/src/Metamaps/index.js
View file

@ -83,22 +83,22 @@ document.addEventListener("DOMContentLoaded", function() {
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] ) Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] )
if (Metamaps.currentPage === "mapper") { if (Metamaps.currentPage === "mapper") {
Metamaps.Views.exploreMaps.fetchUserThenRender() Views.exploreMaps.fetchUserThenRender()
} }
else { else {
Metamaps.Views.exploreMaps.render() Views.exploreMaps.render()
} }
Metamaps.GlobalUI.showDiv('#explore') GlobalUI.showDiv('#explore')
} }
else if (Metamaps.currentSection === "" && Metamaps.Active.Mapper) { else if (Metamaps.currentSection === "" && Active.Mapper) {
Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active) Views.exploreMaps.setCollection(Metamaps.Maps.Active)
Metamaps.Views.exploreMaps.render() Views.exploreMaps.render()
Metamaps.GlobalUI.showDiv('#explore') GlobalUI.showDiv('#explore')
} }
else if (Metamaps.Active.Map || Metamaps.Active.Topic) { else if (Active.Map || Active.Topic) {
Metamaps.Loading.show() Metamaps.Loading.show()
Metamaps.JIT.prepareVizData() JIT.prepareVizData()
Metamaps.GlobalUI.showDiv('#infovis') GlobalUI.showDiv('#infovis')
} }
}); });