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 = {
listenersInitialized: false,
init: function () {
var self = Metamaps.Account
},
initListeners: function () {
var self = Metamaps.Account
var self = Account
$('#user_image').change(self.showImagePreview)
self.listenersInitialized = true

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

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

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

@ -26,9 +26,9 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Visualize
*/
Metamaps.Backbone = {}
const _Backbone = {}
Metamaps.Backbone.Map = Backbone.Model.extend({
_Backbone.Map = Backbone.Model.extend({
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'],
toJSON: function (options) {
@ -82,7 +82,7 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
return Metamaps.Mapper.get(this.get('user_id'))
},
fetchContained: function () {
var bb = Metamaps.Backbone
var bb = _Backbone
var that = this
var start = function (data) {
that.set('mappers', new bb.MapperCollection(data.mappers))
@ -143,8 +143,8 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
}
}
})
Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Map,
_Backbone.MapsCollection = Backbone.Collection.extend({
model: _Backbone.Map,
initialize: function (models, options) {
this.id = options.id
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',
blacklist: ['created_at', 'updated_at'],
toJSON: function (options) {
@ -227,12 +227,12 @@ Metamaps.Backbone.Message = Backbone.Model.extend({
*/
}
})
Metamaps.Backbone.MessageCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Message,
_Backbone.MessageCollection = Backbone.Collection.extend({
model: _Backbone.Message,
url: '/messages'
})
Metamaps.Backbone.Mapper = Backbone.Model.extend({
_Backbone.Mapper = Backbone.Model.extend({
urlRoot: '/users',
blacklist: ['created_at', 'updated_at'],
toJSON: function (options) {
@ -248,13 +248,13 @@ Metamaps.Backbone.Mapper = Backbone.Model.extend({
}
})
Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Mapper,
_Backbone.MapperCollection = Backbone.Collection.extend({
model: _Backbone.Mapper,
url: '/users'
})
Metamaps.Backbone.init = function () {
var self = Metamaps.Backbone
_Backbone.init = function () {
var self = _Backbone
self.Metacode = Backbone.Model.extend({
initialize: function () {
@ -694,6 +694,6 @@ Metamaps.Backbone.init = function () {
}
}
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 Filter from './Filter'
import GlobalUI from './GlobalUI'
import JIT from './JIT'
import Mouse from './Mouse'
import Selected from './Selected'
@ -12,7 +13,6 @@ import Visualize from './Visualize'
* Metamaps.Control.js
*
* Dependencies:
* - Metamaps.GlobalUI
* - Metamaps.Mappings
* - Metamaps.Metacodes
* - Metamaps.Synapses
@ -57,7 +57,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
@ -73,7 +73,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
@ -89,7 +89,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
@ -107,7 +107,7 @@ const Control = {
}])
Control.hideNode(nodeid)
} 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
@ -132,7 +132,7 @@ const Control = {
authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
@ -148,7 +148,7 @@ const Control = {
var node = Visualize.mGraph.graph.getNode(nodeid)
if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
@ -251,7 +251,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
@ -266,7 +266,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
@ -294,7 +294,7 @@ const Control = {
mappableid: mappableid
}])
} else {
Metamaps.GlobalUI.notifyUser('Only synapses you created can be deleted')
GlobalUI.notifyUser('Only synapses you created can be deleted')
}
},
removeSelectedEdges: function () {
@ -308,7 +308,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
@ -324,7 +324,7 @@ const Control = {
var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
@ -378,7 +378,7 @@ const Control = {
updateSelectedPermissions: function (permission) {
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
var nCount = 0,
@ -416,12 +416,12 @@ const Control = {
var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses')
var message = nString + sString + ' you created updated to ' + permission
Metamaps.GlobalUI.notifyUser(message)
GlobalUI.notifyUser(message)
},
updateSelectedMetacodes: function (metacode_id) {
var node, topic
Metamaps.GlobalUI.notifyUser('Working...')
GlobalUI.notifyUser('Working...')
var metacode = Metamaps.Metacodes.get(metacode_id)
@ -445,7 +445,7 @@ const Control = {
var nString = nCount == 1 ? (nCount.toString() + ' topic') : (nCount.toString() + ' topics')
var message = nString + ' you can edit updated to ' + metacode.get('name')
Metamaps.GlobalUI.notifyUser(message)
GlobalUI.notifyUser(message)
Visualize.mGraph.plot()
},
}

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

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

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

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

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

@ -2,6 +2,7 @@
import Active from './Active'
import Control from './Control'
import GlobalUI from './GlobalUI'
import Settings from './Settings'
import Visualize from './Visualize'
@ -10,7 +11,6 @@ import Visualize from './Visualize'
*
* Dependencies:
* - Metamaps.Creators
* - Metamaps.GlobalUI
* - Metamaps.Mappers
* - Metamaps.Metacodes
* - Metamaps.Synapses
@ -56,7 +56,7 @@ const Filter = {
open: function () {
var self = Filter
Metamaps.GlobalUI.Account.close()
GlobalUI.Account.close()
$('.sidebarFilterIcon div').addClass('hide')
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 = {
notifyTimeout: null,
lightbox: null,
init: function () {
var self = GlobalUI;
notifyTimeout: null,
lightbox: null,
init: function () {
var self = GlobalUI;
self.Search.init();
self.CreateMap.init();
self.Account.init();
if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
self.Search.init();
self.CreateMap.init();
self.Account.init();
//bind lightbox clicks
$('.openLightbox').click(function (event) {
self.openLightbox($(this).attr('data-open'));
event.preventDefault();
return false;
});
if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
$('#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
if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);
$('#lightbox_screen, #lightbox_close').click(self.closeLightbox);
var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : [];
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;
// initialize global backbone models and collections
if (Active.Mapper) Active.Mapper = new Metamaps.Backbone.Mapper(Active.Mapper);
$('.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") {
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 myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : [];
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();
$('#' + 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 = {
newMap: null,
emptyMapForm: "",
emptyForkMapForm: "",
topicsToMap: [],
synapsesToMap: [],
init: function () {
var self = GlobalUI.CreateMap;
newMap: null,
emptyMapForm: "",
emptyForkMapForm: "",
topicsToMap: [],
synapsesToMap: [],
init: function () {
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 () {
var self = GlobalUI.CreateMap;
},
bindFormEvents: function () {
var self = GlobalUI.CreateMap;
$('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) {
if (event.keyCode === 13) self.submit()
})
$('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) {
if (event.keyCode === 13) self.submit()
})
$('.new_map button.cancel').unbind().bind('click', function (event) {
event.preventDefault();
GlobalUI.closeLightbox();
});
$('.new_map button.submitMap').unbind().bind('click', self.submit);
$('.new_map button.cancel').unbind().bind('click', function (event) {
event.preventDefault();
GlobalUI.closeLightbox();
});
$('.new_map button.submitMap').unbind().bind('click', self.submit);
// bind permission changer events on the createMap form
$('.permIcon').unbind().bind('click', self.switchPermission);
},
closeSuccess: function () {
$('#mapCreatedSuccess').fadeOut(300, function(){
$(this).remove();
});
},
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/";
stringStart += id;
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 ";
var page = Metamaps.Active.Map ? 'map' : 'page';
var stringEnd = "</a></div>";
return stringStart + page + stringEnd;
},
switchPermission: function () {
var self = GlobalUI.CreateMap;
// bind permission changer events on the createMap form
$('.permIcon').unbind().bind('click', self.switchPermission);
},
closeSuccess: function () {
$('#mapCreatedSuccess').fadeOut(300, function(){
$(this).remove();
});
},
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/";
stringStart += id;
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 ";
var page = Active.Map ? 'map' : 'page';
var stringEnd = "</a></div>";
return stringStart + page + stringEnd;
},
switchPermission: function () {
var self = GlobalUI.CreateMap;
self.newMap.set('permission', $(this).attr('data-permission'));
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
$(this).find('.mapPermIcon').addClass('selected');
self.newMap.set('permission', $(this).attr('data-permission'));
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
$(this).find('.mapPermIcon').addClass('selected');
var permText = $(this).find('.tip').html();
$(this).parents('.new_map').find('.permText').html(permText);
},
submit: function (event) {
if (event) event.preventDefault();
var permText = $(this).find('.tip').html();
$(this).parents('.new_map').find('.permText').html(permText);
},
submit: function (event) {
if (event) event.preventDefault();
var self = GlobalUI.CreateMap;
var self = GlobalUI.CreateMap;
if (GlobalUI.lightbox === 'forkmap') {
self.newMap.set('topicsToMap', self.topicsToMap);
self.newMap.set('synapsesToMap', self.synapsesToMap);
}
if (GlobalUI.lightbox === 'forkmap') {
self.newMap.set('topicsToMap', self.topicsToMap);
self.newMap.set('synapsesToMap', self.synapsesToMap);
}
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId);
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId);
self.newMap.set('name', $form.find('#map_name').val());
self.newMap.set('desc', $form.find('#map_desc').val());
self.newMap.set('name', $form.find('#map_name').val());
self.newMap.set('desc', $form.find('#map_desc').val());
if (self.newMap.get('name').length===0){
self.throwMapNameError();
return;
}
if (self.newMap.get('name').length===0){
self.throwMapNameError();
return;
}
self.newMap.save(null, {
success: self.success
// TODO add error message
});
self.newMap.save(null, {
success: self.success
// TODO add error message
});
GlobalUI.closeLightbox();
GlobalUI.notifyUser('Working...');
},
throwMapNameError: function () {
var self = GlobalUI.CreateMap;
GlobalUI.closeLightbox();
GlobalUI.notifyUser('Working...');
},
throwMapNameError: function () {
var self = GlobalUI.CreateMap;
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId);
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
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);
setTimeout(function(){
message.fadeOut('fast', function(){
message.remove();
});
}, 5000);
},
success: function (model) {
var self = GlobalUI.CreateMap;
$form.find('#map_name').after(message);
setTimeout(function(){
message.fadeOut('fast', function(){
message.remove();
});
}, 5000);
},
success: function (model) {
var self = GlobalUI.CreateMap;
//push the new map onto the collection of 'my maps'
Metamaps.Maps.Mine.add(model);
//push the new map onto the collection of 'my maps'
Metamaps.Maps.Mine.add(model);
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var form = $(formId);
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var form = $(formId);
GlobalUI.clearNotify();
$('#wrapper').append(self.generateSuccessMessage(model.id));
GlobalUI.clearNotify();
$('#wrapper').append(self.generateSuccessMessage(model.id));
},
reset: function (id) {
var self = GlobalUI.CreateMap;
},
reset: function (id) {
var self = GlobalUI.CreateMap;
var form = $('#' + id);
var form = $('#' + id);
if (id === "fork_map") {
self.topicsToMap = [];
self.synapsesToMap = [];
form.html(self.emptyForkMapForm);
}
else {
form.html(self.emptyMapForm);
}
if (id === "fork_map") {
self.topicsToMap = [];
self.synapsesToMap = [];
form.html(self.emptyForkMapForm);
}
else {
form.html(self.emptyMapForm);
}
self.bindFormEvents();
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
self.bindFormEvents();
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
return false;
},
return false;
},
}
GlobalUI.Account = {
isOpen: false,
changing: false,
init: function () {
var self = GlobalUI.Account;
isOpen: false,
changing: false,
init: function () {
var self = GlobalUI.Account;
$('.sidebarAccountIcon').click(self.toggleBox);
$('.sidebarAccountBox').click(function(event){
event.stopPropagation();
});
$('body').click(self.close);
},
toggleBox: function (event) {
var self = GlobalUI.Account;
$('.sidebarAccountIcon').click(self.toggleBox);
$('.sidebarAccountBox').click(function(event){
event.stopPropagation();
});
$('body').click(self.close);
},
toggleBox: function (event) {
var self = GlobalUI.Account;
if (self.isOpen) self.close();
else self.open();
if (self.isOpen) self.close();
else self.open();
event.stopPropagation();
},
open: function () {
var self = GlobalUI.Account;
event.stopPropagation();
},
open: function () {
var self = GlobalUI.Account;
Metamaps.Filter.close();
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
Filter.close();
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
if (!self.isOpen && !self.changing) {
self.changing = true;
$('.sidebarAccountBox').fadeIn(200, function () {
self.changing = false;
self.isOpen = true;
$('.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;
});
}
if (!self.isOpen && !self.changing) {
self.changing = true;
$('.sidebarAccountBox').fadeIn(200, function () {
self.changing = false;
self.isOpen = true;
$('.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;
});
}
}
}
GlobalUI.Search = {
@ -425,8 +434,8 @@ GlobalUI.Search = {
startTypeahead: function () {
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 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 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 = 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 topics = {
@ -455,8 +464,8 @@ GlobalUI.Search = {
url: '/search/topics',
prepare: function(query, settings) {
settings.url += '?term=' + query;
if (Metamaps.Active.Mapper && self.limitTopicsToMe) {
settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
if (Active.Mapper && self.limitTopicsToMe) {
settings.url += "&user=" + Active.Mapper.id.toString();
}
return settings;
},
@ -488,8 +497,8 @@ GlobalUI.Search = {
url: '/search/maps',
prepare: function(query, settings) {
settings.url += '?term=' + query;
if (Metamaps.Active.Mapper && self.limitMapsToMe) {
settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
if (Active.Mapper && self.limitMapsToMe) {
settings.url += "&user=" + Active.Mapper.id.toString();
}
return settings;
},
@ -578,11 +587,11 @@ GlobalUI.Search = {
self.close(0, true);
var win;
if (datum.rtype == "topic") {
Metamaps.Router.topics(datum.id);
Router.topics(datum.id);
} else if (datum.rtype == "map") {
Metamaps.Router.maps(datum.id);
Router.maps(datum.id);
} 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, $ */
import Active from './Active'
import GlobalUI from './GlobalUI'
import Map from './Map'
import Synapse from './Synapse'
import Topic from './Topic'
/*
* Metamaps.Import.js.erb
@ -290,11 +293,11 @@ const Import = {
Metamaps.Mappings.add(mapping)
// 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
})
Metamaps.GlobalUI.hideDiv('#instructions')
GlobalUI.hideDiv('#instructions')
},
createSynapseWithParameters: function (desc, category, permission,
@ -322,7 +325,7 @@ const Import = {
})
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 = {
init: function () {
var self = this
$(document).on('keydown', function (e) {
if (!(Metamaps.Active.Map || Metamaps.Active.Topic)) return
if (!(Active.Map || Active.Topic)) return
switch (e.which) {
case 13: // if enter key is pressed
Metamaps.JIT.enterKeyHandler()
JIT.enterKeyHandler()
e.preventDefault()
break
case 27: // if esc key is pressed
Metamaps.JIT.escKeyHandler()
JIT.escKeyHandler()
break
case 65: // if a or A is pressed
if (e.ctrlKey) {
Metamaps.Control.deselectAllNodes()
Metamaps.Control.deselectAllEdges()
Control.deselectAllNodes()
Control.deselectAllEdges()
e.preventDefault()
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
Metamaps.Control.selectNode(n, e)
Visualize.mGraph.graph.eachNode(function (n) {
Control.selectNode(n, e)
})
Metamaps.Visualize.mGraph.plot()
Visualize.mGraph.plot()
}
break
case 68: // if d or D is pressed
if (e.ctrlKey) {
e.preventDefault()
Metamaps.Control.deleteSelected()
Control.deleteSelected()
}
break
case 69: // if e or E is pressed
if (e.ctrlKey && Metamaps.Active.Map) {
if (e.ctrlKey && Active.Map) {
e.preventDefault()
Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas)
JIT.zoomExtents(null, Visualize.mGraph.canvas)
break
}
if (e.altKey && Metamaps.Active.Topic) {
if (e.altKey && Active.Topic) {
e.preventDefault()
if (Metamaps.Active.Topic) {
self.centerAndReveal(Metamaps.Selected.Nodes, {
if (Active.Topic) {
self.centerAndReveal(Selected.Nodes, {
center: true,
reveal: false
})
@ -62,30 +64,30 @@ const Listeners = {
case 72: // if h or H is pressed
if (e.ctrlKey) {
e.preventDefault()
Metamaps.Control.hideSelectedNodes()
Metamaps.Control.hideSelectedEdges()
Control.hideSelectedNodes()
Control.hideSelectedEdges()
}
break
case 77: // if m or M is pressed
if (e.ctrlKey) {
e.preventDefault()
Metamaps.Control.removeSelectedNodes()
Metamaps.Control.removeSelectedEdges()
Control.removeSelectedNodes()
Control.removeSelectedEdges()
}
break
case 82: // if r or R is pressed
if (e.altKey && Metamaps.Active.Topic) {
if (e.altKey && Active.Topic) {
e.preventDefault()
self.centerAndReveal(Metamaps.Selected.Nodes, {
self.centerAndReveal(Selected.Nodes, {
center: false,
reveal: true
})
}
break
case 84: // if t or T is pressed
if (e.altKey && Metamaps.Active.Topic) {
if (e.altKey && Active.Topic) {
e.preventDefault()
self.centerAndReveal(Metamaps.Selected.Nodes, {
self.centerAndReveal(Selected.Nodes, {
center: true,
reveal: true
})
@ -98,23 +100,22 @@ const Listeners = {
})
$(window).resize(function () {
if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.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 (Metamaps.Active.Map && Metamaps.Realtime.inConversation) Metamaps.Realtime.positionVideos()
Metamaps.Mobile.resizeTitle()
if (Visualize && Visualize.mGraph) Visualize.mGraph.canvas.resize($(window).width(), $(window).height())
if (Active.Map && Realtime.inConversation) Realtime.positionVideos()
Mobile.resizeTitle()
})
},
centerAndReveal: function(nodes, opts) {
if (nodes.length < 1) return
var node = nodes[nodes.length - 1]
if (opts.center && opts.reveal) {
Metamaps.Topic.centerOn(node.id, function() {
Metamaps.Topic.fetchRelatives(nodes)
Topic.centerOn(node.id, function() {
Topic.fetchRelatives(nodes)
})
} else if (opts.center) {
Metamaps.Topic.centerOn(node.id)
Topic.centerOn(node.id)
} 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, $ */
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
*
* 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.GlobalUI
* - Metamaps.Erb
* - Metamaps.Loading
* - Metamaps.Mappers
* - Metamaps.Mappings
* - Metamaps.Maps
* - Metamaps.Messages
* - Metamaps.Router
* - Metamaps.Synapses
* - Metamaps.Topics
*
@ -33,6 +32,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Map.InfoBox
*/
window.Metamaps = window.Metamaps || {}
Metamaps.Map = {
events: {
editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
@ -54,7 +54,7 @@ Metamaps.Map = {
self.fork()
})
Metamaps.GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
self.updateStar()
self.InfoBox.init()
@ -65,7 +65,7 @@ Metamaps.Map = {
launch: function (id) {
var bb = Metamaps.Backbone
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.Collaborators = new bb.MapperCollection(data.collaborators)
Metamaps.Topics = new bb.TopicCollection(data.topics)
@ -75,8 +75,8 @@ Metamaps.Map = {
Metamaps.Stars = data.stars
Metamaps.Backbone.attachCollectionEvents()
var map = Metamaps.Active.Map
var mapper = Metamaps.Active.Mapper
var map = Active.Map
var mapper = Active.Mapper
// add class to .wrapper for specifying whether you can edit the map
if (map.authorizeToEdit(mapper)) {
@ -95,24 +95,24 @@ Metamaps.Map = {
$('#filter_by_mapper h3').html('MAPPERS')
// build and render the visualization
Metamaps.Visualize.type = 'ForceDirected'
Metamaps.JIT.prepareVizData()
Visualize.type = 'ForceDirected'
JIT.prepareVizData()
// update filters
Metamaps.Filter.reset()
Filter.reset()
// reset selected arrays
Metamaps.Selected.reset()
Selected.reset()
// set the proper mapinfobox content
Metamaps.Map.InfoBox.load()
// these three update the actual filter box with the right list items
Metamaps.Filter.checkMetacodes()
Metamaps.Filter.checkSynapses()
Metamaps.Filter.checkMappers()
Filter.checkMetacodes()
Filter.checkSynapses()
Filter.checkMappers()
Metamaps.Realtime.startActiveMap()
Realtime.startActiveMap()
Metamaps.Loading.hide()
// for mobile
@ -125,24 +125,24 @@ Metamaps.Map = {
})
},
end: function () {
if (Metamaps.Active.Map) {
if (Active.Map) {
$('.wrapper').removeClass('canEditMap commonsMap')
Metamaps.AutoLayout.resetSpiral()
AutoLayout.resetSpiral()
$('.rightclickmenu').remove()
Metamaps.TopicCard.hideCard()
Metamaps.SynapseCard.hideCard()
Metamaps.Create.newTopic.hide(true) // true means force (and override pinned)
Metamaps.Create.newSynapse.hide()
Metamaps.Filter.close()
TopicCard.hideCard()
SynapseCard.hideCard()
Create.newTopic.hide(true) // true means force (and override pinned)
Create.newSynapse.hide()
Filter.close()
Metamaps.Map.InfoBox.close()
Metamaps.Realtime.endActiveMap()
Realtime.endActiveMap()
}
},
updateStar: function () {
if (!Metamaps.Active.Mapper || !Metamaps.Stars) return
if (!Active.Mapper || !Metamaps.Stars) return
// 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 .tooltipsAbove').html('Unstar')
} else {
@ -153,31 +153,31 @@ Metamaps.Map = {
star: function () {
var self = Metamaps.Map
if (!Metamaps.Active.Map) return
$.post('/maps/' + Metamaps.Active.Map.id + '/star')
Metamaps.Stars.push({ user_id: Metamaps.Active.Mapper.id, map_id: Metamaps.Active.Map.id })
Metamaps.Maps.Starred.add(Metamaps.Active.Map)
Metamaps.GlobalUI.notifyUser('Map is now starred')
if (!Active.Map) return
$.post('/maps/' + Active.Map.id + '/star')
Metamaps.Stars.push({ user_id: Active.Mapper.id, map_id: Active.Map.id })
Metamaps.Maps.Starred.add(Active.Map)
GlobalUI.notifyUser('Map is now starred')
self.updateStar()
},
unstar: function () {
var self = Metamaps.Map
if (!Metamaps.Active.Map) return
$.post('/maps/' + Metamaps.Active.Map.id + '/unstar')
Metamaps.Stars = Metamaps.Stars.filter(function (s) { return s.user_id != Metamaps.Active.Mapper.id })
Metamaps.Maps.Starred.remove(Metamaps.Active.Map)
if (!Active.Map) return
$.post('/maps/' + Active.Map.id + '/unstar')
Metamaps.Stars = Metamaps.Stars.filter(function (s) { return s.user_id != Active.Mapper.id })
Metamaps.Maps.Starred.remove(Active.Map)
self.updateStar()
},
fork: function () {
Metamaps.GlobalUI.openLightbox('forkmap')
GlobalUI.openLightbox('forkmap')
var nodes_data = '',
synapses_data = ''
var nodes_array = []
var synapses_array = []
// 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 (n.getData('alpha') === 1) {
var id = n.getData('topic').id
@ -197,7 +197,7 @@ Metamaps.Map = {
Metamaps.Synapses.each(function (synapse) {
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
// doesn't make sense to add the synapse
var topicsNotFiltered = nodes_array.indexOf(synapse.get('node1_id')) > -1
@ -210,32 +210,32 @@ Metamaps.Map = {
synapses_data = synapses_array.join()
nodes_data = nodes_data.slice(0, -1)
Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data
Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data
GlobalUI.CreateMap.topicsToMap = nodes_data
GlobalUI.CreateMap.synapsesToMap = synapses_data
},
leavePrivateMap: function () {
var map = Metamaps.Active.Map
var map = Active.Map
Metamaps.Maps.Active.remove(map)
Metamaps.Maps.Featured.remove(map)
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 () {
Metamaps.Realtime.turnOff(true); // true is for 'silence'
Metamaps.GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.')
Metamaps.Active.Map.trigger('changeByOther')
Realtime.turnOff(true); // true is for 'silence'
GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.')
Active.Map.trigger('changeByOther')
},
canEditNow: function () {
var confirmString = "You've been granted permission to edit this map. "
confirmString += 'Do you want to reload and enable realtime collaboration?'
var c = confirm(confirmString)
if (c) {
Metamaps.Router.maps(Metamaps.Active.Map.id)
Metamaps.Router.maps(Active.Map.id)
}
},
editedByActiveMapper: function () {
if (Metamaps.Active.Mapper) {
Metamaps.Mappers.add(Metamaps.Active.Mapper)
if (Active.Mapper) {
Metamaps.Mappers.add(Active.Mapper)
}
},
exportImage: function () {
@ -282,14 +282,14 @@ Metamaps.Map = {
// center it
canvas.getCtx().translate(1880 / 2, 1260 / 2)
var mGraph = Metamaps.Visualize.mGraph
var mGraph = Visualize.mGraph
var id = mGraph.root
var root = mGraph.graph.getNode(id)
var T = !!root.visited
// pass true to avoid basing it on a selection
Metamaps.JIT.zoomExtents(null, canvas, true)
JIT.zoomExtents(null, canvas, true)
var c = canvas.canvas,
ctx = canvas.getCtx(),
@ -327,7 +327,7 @@ Metamaps.Map = {
encoded_image: canvas.canvas.toDataURL()
}
var map = Metamaps.Active.Map
var map = Active.Map
var today = new Date()
var dd = today.getDate()
@ -346,12 +346,12 @@ Metamaps.Map = {
downloadMessage += 'Captured map screenshot! '
downloadMessage += "<a href='" + imageData.encoded_image + "' "
downloadMessage += "download='metamap-" + map.id + '-' + mapName + '-' + today + ".png'>DOWNLOAD</a>"
Metamaps.GlobalUI.notifyUser(downloadMessage)
GlobalUI.notifyUser(downloadMessage)
$.ajax({
type: 'POST',
dataType: 'json',
url: '/maps/' + Metamaps.Active.Map.id + '/upload_screenshot',
url: '/maps/' + Active.Map.id + '/upload_screenshot',
data: imageData,
success: function (data) {
console.log('successfully uploaded map screenshot')
@ -461,12 +461,12 @@ Metamaps.Map.InfoBox = {
load: function () {
var self = Metamaps.Map.InfoBox
var map = Metamaps.Active.Map
var map = Active.Map
var obj = map.pick('permission', 'topic_count', 'synapse_count')
var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper)
var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper)
var isCreator = map.authorizePermissionChange(Active.Mapper)
var canEdit = map.authorizeToEdit(Active.Mapper)
var relevantPeople = map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
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 () {
var name = $(this).html()
Metamaps.Active.Map.set('name', name)
Metamaps.Active.Map.trigger('saved')
Active.Map.set('name', name)
Active.Map.trigger('saved')
// mobile menu
$('#header_content').html(name)
$('.mapInfoBox').removeClass('mapRequestTitle')
@ -529,8 +529,8 @@ Metamaps.Map.InfoBox = {
$('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () {
var desc = $(this).html()
Metamaps.Active.Map.set('desc', desc)
Metamaps.Active.Map.trigger('saved')
Active.Map.set('desc', desc)
Active.Map.trigger('saved')
})
$('.yourMap .mapPermission').unbind().click(self.onPermissionClick)
@ -558,7 +558,7 @@ Metamaps.Map.InfoBox = {
addTypeahead: function () {
var self = Metamaps.Map.InfoBox
if (!Metamaps.Active.Map) return
if (!Active.Map) return
// for autocomplete
var collaborators = {
@ -589,7 +589,7 @@ Metamaps.Map.InfoBox = {
}
// 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(
{
highlight: false,
@ -606,23 +606,23 @@ Metamaps.Map.InfoBox = {
var self = Metamaps.Map.InfoBox
Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId))
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()
},
addCollaborator: function (newCollaboratorId) {
var self = Metamaps.Map.InfoBox
if (Metamaps.Collaborators.get(newCollaboratorId)) {
Metamaps.GlobalUI.notifyUser('That user already has access')
GlobalUI.notifyUser('That user already has access')
return
}
function callback(mapper) {
Metamaps.Collaborators.add(mapper)
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')
Metamaps.GlobalUI.notifyUser(name + ' will be notified by email')
GlobalUI.notifyUser(name + ' will be notified by email')
self.updateNumbers()
}
@ -642,13 +642,13 @@ Metamaps.Map.InfoBox = {
},
createContributorList: function () {
var self = Metamaps.Map.InfoBox
var relevantPeople = Metamaps.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 relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var activeMapperIsCreator = Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')
var string = ''
string += '<ul>'
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')
if (isCreator) string += ' (creator)'
string += '</a>'
@ -664,11 +664,11 @@ Metamaps.Map.InfoBox = {
return string
},
updateNumbers: function () {
if (!Metamaps.Active.Map) return
if (!Active.Map) return
var self = Metamaps.Map.InfoBox
var mapper = Metamaps.Active.Mapper
var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var mapper = Active.Mapper
var relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var contributors_class = ''
if (relevantPeople.length === 2) contributors_class = 'multiple mTwo'
@ -720,10 +720,10 @@ Metamaps.Map.InfoBox = {
self.selectingPermission = false
var permission = $(this).attr('class')
Metamaps.Active.Map.save({
Active.Map.save({
permission: permission
})
Metamaps.Active.Map.updateMapWrapper()
Active.Map.updateMapWrapper()
shareable = permission === 'private' ? '' : 'shareable'
$('.mapPermission').removeClass('commons public private minimize').addClass(permission)
$('.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.'
var doIt = confirm(confirmString)
var map = Metamaps.Active.Map
var mapper = Metamaps.Active.Mapper
var map = Active.Map
var mapper = Active.Mapper
var authorized = map.authorizePermissionChange(mapper)
if (doIt && authorized) {
@ -747,7 +747,7 @@ Metamaps.Map.InfoBox = {
Metamaps.Maps.Shared.remove(map)
map.destroy()
Metamaps.Router.home()
Metamaps.GlobalUI.notifyUser('Map eliminated!')
GlobalUI.notifyUser('Map eliminated!')
}
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?")

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

@ -1,4 +1,6 @@
import Backbone from './Backbone'
/*
* Metamaps.Backbone
*/
const Mapper = {
// this function is to retrieve a mapper JSON object from the database
@ -9,7 +11,7 @@ const Mapper = {
if (!response.ok) throw response
return response.json()
}).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 Import from './Import'
import TopicCard from './TopicCard'
import Util from './Util'
const PasteInput = {
// thanks to https://github.com/kevva/url-regex
@ -19,7 +21,7 @@ const PasteInput = {
window.addEventListener("drop", function(e) {
e = e || event;
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) {
var fileReader = new FileReader()
var text = fileReader.readAsText(e.dataTransfer.files[0])
@ -86,7 +88,7 @@ const PasteInput = {
import_id,
{
success: function(topic) {
Metamaps.TopicCard.showCard(topic.get('node'), function() {
TopicCard.showCard(topic.get('node'), function() {
$('#showcard #titleActivator').click()
.find('textarea, input').focus()
})

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

@ -1,27 +1,27 @@
/* 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
*
* Dependencies:
* - Metamaps.Active
* - Metamaps.Backbone
* - Metamaps.Backbone
* - Metamaps.Control
* - Metamaps.Erb
* - Metamaps.GlobalUI
* - Metamaps.JIT
* - Metamaps.Map
* - Metamaps.Mapper
* - Metamaps.Mappers
* - Metamaps.Mappings
* - Metamaps.Messages
* - Metamaps.Synapses
* - Metamaps.Topic
* - Metamaps.Topics
* - Metamaps.Util
* - Metamaps.Views
* - Metamaps.Visualize
*/
const Realtime = {
@ -52,7 +52,7 @@ const Realtime = {
self.disconnected = true
})
if (Metamaps.Active.Mapper) {
if (Active.Mapper) {
self.webrtc = new SimpleWebRTC({
connection: self.socket,
localVideoEl: self.videoId,
@ -69,23 +69,23 @@ const Realtime = {
video: true,
audio: true
},
nick: Metamaps.Active.Mapper.id
nick: Active.Mapper.id
})
var $video = $('<video></video>').attr('id', self.videoId)
self.localVideo = {
$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,
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,
socket: self.socket,
username: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('name') : '',
image: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '',
username: Active.Mapper ? Active.Mapper.get('name') : '',
image: Active.Mapper ? Active.Mapper.get('image') : '',
room: 'global',
$video: self.localVideo.$video,
myVideoView: self.localVideo.view,
@ -93,35 +93,35 @@ const Realtime = {
})
self.room.videoAdded(self.handleVideoAdded)
if (!Metamaps.Active.Map) {
if (!Active.Map) {
self.room.chat.$container.hide()
}
$('body').prepend(self.room.chat.$container)
} // if Metamaps.Active.Mapper
} // if Active.Mapper
},
addJuntoListeners: function () {
var self = Realtime
$(document).on(Metamaps.Views.chatView.events.openTray, function () {
$(document).on(Views.chatView.events.openTray, function () {
$('.main').addClass('compressed')
self.chatOpen = true
self.positionPeerIcons()
})
$(document).on(Metamaps.Views.chatView.events.closeTray, function () {
$(document).on(Views.chatView.events.closeTray, function () {
$('.main').removeClass('compressed')
self.chatOpen = false
self.positionPeerIcons()
})
$(document).on(Metamaps.Views.chatView.events.videosOn, function () {
$(document).on(Views.chatView.events.videosOn, function () {
$('#wrapper').removeClass('hideVideos')
})
$(document).on(Metamaps.Views.chatView.events.videosOff, function () {
$(document).on(Views.chatView.events.videosOff, function () {
$('#wrapper').addClass('hideVideos')
})
$(document).on(Metamaps.Views.chatView.events.cursorsOn, function () {
$(document).on(Views.chatView.events.cursorsOn, function () {
$('#wrapper').removeClass('hideCursors')
})
$(document).on(Metamaps.Views.chatView.events.cursorsOff, function () {
$(document).on(Views.chatView.events.cursorsOff, function () {
$('#wrapper').addClass('hideCursors')
})
},
@ -187,8 +187,8 @@ const Realtime = {
startActiveMap: function () {
var self = Realtime
if (Metamaps.Active.Map && Metamaps.Active.Mapper) {
if (Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)) {
if (Active.Map && Active.Mapper) {
if (Active.Map.authorizeToEdit(Active.Mapper)) {
self.turnOn()
self.setupSocket()
} else {
@ -219,15 +219,15 @@ const Realtime = {
self.status = true
$('.collabCompass').show()
self.room.chat.$container.show()
self.room.room = 'map-' + Metamaps.Active.Map.id
self.room.room = 'map-' + Active.Map.id
self.checkForACallToJoin()
self.activeMapper = {
id: Metamaps.Active.Mapper.id,
name: Metamaps.Active.Mapper.get('name'),
username: Metamaps.Active.Mapper.get('name'),
image: Metamaps.Active.Mapper.get('image'),
color: Metamaps.Util.getPastelColor(),
id: Active.Mapper.id,
name: Active.Mapper.get('name'),
username: Active.Mapper.get('name'),
image: Active.Mapper.get('image'),
color: Util.getPastelColor(),
self: true
}
self.localVideo.view.$container.find('.video-cutoff').css({
@ -237,7 +237,7 @@ const Realtime = {
},
checkForACallToJoin: function () {
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 () {
var self = Realtime
@ -245,7 +245,7 @@ const Realtime = {
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 btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>'
Metamaps.GlobalUI.notifyUser(notifyText, true)
GlobalUI.notifyUser(notifyText, true)
self.room.conversationInProgress()
},
conversationHasBegun: function () {
@ -255,7 +255,7 @@ const Realtime = {
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 btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>'
Metamaps.GlobalUI.notifyUser(notifyText, true)
GlobalUI.notifyUser(notifyText, true)
self.room.conversationInProgress()
},
countOthersInConversation: function () {
@ -275,7 +275,7 @@ const Realtime = {
if (self.inConversation) {
var username = mapper.name
var notifyText = username + ' joined the call'
Metamaps.GlobalUI.notifyUser(notifyText)
GlobalUI.notifyUser(notifyText)
}
mapper.inConversation = true
@ -290,7 +290,7 @@ const Realtime = {
if (self.inConversation) {
var username = mapper.name
var notifyText = username + ' left the call'
Metamaps.GlobalUI.notifyUser(notifyText)
GlobalUI.notifyUser(notifyText)
}
mapper.inConversation = false
@ -332,7 +332,7 @@ const Realtime = {
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 btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>'
Metamaps.GlobalUI.notifyUser(notifyText, true)
GlobalUI.notifyUser(notifyText, true)
},
invitedToJoin: function (inviter) {
var self = Realtime
@ -344,55 +344,55 @@ const Realtime = {
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 btn-no" onclick="Metamaps.Realtime.denyInvite(' + inviter + ')">No</button>'
Metamaps.GlobalUI.notifyUser(notifyText, true)
GlobalUI.notifyUser(notifyText, true)
},
acceptCall: function (userid) {
var self = Realtime
self.room.chat.sound.stop('sessioninvite')
self.socket.emit('callAccepted', {
mapid: Metamaps.Active.Map.id,
invited: Metamaps.Active.Mapper.id,
mapid: Active.Map.id,
invited: Active.Mapper.id,
inviter: userid
})
$.post('/maps/' + Metamaps.Active.Map.id + '/events/conversation')
$.post('/maps/' + Active.Map.id + '/events/conversation')
self.joinCall()
Metamaps.GlobalUI.clearNotify()
GlobalUI.clearNotify()
},
denyCall: function (userid) {
var self = Realtime
self.room.chat.sound.stop('sessioninvite')
self.socket.emit('callDenied', {
mapid: Metamaps.Active.Map.id,
invited: Metamaps.Active.Mapper.id,
mapid: Active.Map.id,
invited: Active.Mapper.id,
inviter: userid
})
Metamaps.GlobalUI.clearNotify()
GlobalUI.clearNotify()
},
denyInvite: function (userid) {
var self = Realtime
self.room.chat.sound.stop('sessioninvite')
self.socket.emit('inviteDenied', {
mapid: Metamaps.Active.Map.id,
invited: Metamaps.Active.Mapper.id,
mapid: Active.Map.id,
invited: Active.Mapper.id,
inviter: userid
})
Metamaps.GlobalUI.clearNotify()
GlobalUI.clearNotify()
},
inviteACall: function (userid) {
var self = Realtime
self.socket.emit('inviteACall', {
mapid: Metamaps.Active.Map.id,
inviter: Metamaps.Active.Mapper.id,
mapid: Active.Map.id,
inviter: Active.Mapper.id,
invited: userid
})
self.room.chat.invitationPending(userid)
Metamaps.GlobalUI.clearNotify()
GlobalUI.clearNotify()
},
inviteToJoin: function (userid) {
var self = Realtime
self.socket.emit('inviteToJoin', {
mapid: Metamaps.Active.Map.id,
inviter: Metamaps.Active.Mapper.id,
mapid: Active.Map.id,
inviter: Active.Mapper.id,
invited: userid
})
self.room.chat.invitationPending(userid)
@ -401,7 +401,7 @@ const Realtime = {
var self = Realtime
var username = self.mappersOnMap[userid].name
Metamaps.GlobalUI.notifyUser('Conversation starting...')
GlobalUI.notifyUser('Conversation starting...')
self.joinCall()
self.room.chat.invitationAnswered(userid)
},
@ -409,14 +409,14 @@ const Realtime = {
var self = Realtime
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)
},
inviteDenied: function (userid) {
var self = Realtime
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)
},
joinCall: function () {
@ -436,22 +436,22 @@ const Realtime = {
})
self.inConversation = true
self.socket.emit('mapperJoinedCall', {
mapid: Metamaps.Active.Map.id,
id: Metamaps.Active.Mapper.id
mapid: Active.Map.id,
id: Active.Mapper.id
})
self.webrtc.startLocalVideo()
Metamaps.GlobalUI.clearNotify()
self.room.chat.mapperJoinedCall(Metamaps.Active.Mapper.id)
GlobalUI.clearNotify()
self.room.chat.mapperJoinedCall(Active.Mapper.id)
},
leaveCall: function () {
var self = Realtime
self.socket.emit('mapperLeftCall', {
mapid: Metamaps.Active.Map.id,
id: Metamaps.Active.Mapper.id
mapid: Active.Map.id,
id: Active.Mapper.id
})
self.room.chat.mapperLeftCall(Metamaps.Active.Mapper.id)
self.room.chat.mapperLeftCall(Active.Mapper.id)
self.room.leaveVideoOnly()
self.inConversation = false
self.localVideo.view.$container.hide()
@ -479,63 +479,63 @@ const Realtime = {
setupSocket: function () {
var self = Realtime
var socket = Realtime.socket
var myId = Metamaps.Active.Mapper.id
var myId = Active.Mapper.id
socket.emit('newMapperNotify', {
userid: myId,
username: Metamaps.Active.Mapper.get('name'),
userimage: Metamaps.Active.Mapper.get('image'),
mapid: Metamaps.Active.Map.id
username: Active.Mapper.get('name'),
userimage: Active.Mapper.get('image'),
mapid: Active.Map.id
})
socket.on(myId + '-' + Metamaps.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 + '-' + Metamaps.Active.Map.id + '-callAccepted', self.callAccepted)
socket.on(myId + '-' + Metamaps.Active.Map.id + '-callDenied', self.callDenied)
socket.on(myId + '-' + Metamaps.Active.Map.id + '-inviteDenied', self.inviteDenied)
socket.on(myId + '-' + Active.Map.id + '-invitedToCall', self.invitedToCall) // new call
socket.on(myId + '-' + Active.Map.id + '-invitedToJoin', self.invitedToJoin) // call already in progress
socket.on(myId + '-' + Active.Map.id + '-callAccepted', self.callAccepted)
socket.on(myId + '-' + Active.Map.id + '-callDenied', self.callDenied)
socket.on(myId + '-' + Active.Map.id + '-inviteDenied', self.inviteDenied)
// receive word that there's a conversation in progress
socket.on('maps-' + Metamaps.Active.Map.id + '-callInProgress', self.promptToJoin)
socket.on('maps-' + Metamaps.Active.Map.id + '-callStarting', self.conversationHasBegun)
socket.on('maps-' + Active.Map.id + '-callInProgress', self.promptToJoin)
socket.on('maps-' + Active.Map.id + '-callStarting', self.conversationHasBegun)
socket.on('maps-' + Metamaps.Active.Map.id + '-mapperJoinedCall', self.mapperJoinedCall)
socket.on('maps-' + Metamaps.Active.Map.id + '-mapperLeftCall', self.mapperLeftCall)
socket.on('maps-' + Active.Map.id + '-mapperJoinedCall', self.mapperJoinedCall)
socket.on('maps-' + Active.Map.id + '-mapperLeftCall', self.mapperLeftCall)
// 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
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
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
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
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
socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords)
socket.on('maps-' + Active.Map.id + '-updatePeerCoords', self.updatePeerCoords)
// deletions
socket.on('deleteTopicFromServer', self.removeTopic)
@ -551,7 +551,7 @@ const Realtime = {
x: event.pageX,
y: event.pageY
}
var coords = Metamaps.Util.pixelsToCoords(pixels)
var coords = Util.pixelsToCoords(pixels)
self.sendCoords(coords)
}
$(document).on('mousemove.map', sendCoords)
@ -562,54 +562,54 @@ const Realtime = {
x: e.pageX,
y: e.pageY
}
var coords = Metamaps.Util.pixelsToCoords(pixels)
var coords = Util.pixelsToCoords(pixels)
self.sendCoords(coords)
}
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) {
self.sendTopicDrag(positions)
}
$(document).on(Metamaps.JIT.events.topicDrag + '.map', sendTopicDrag)
$(document).on(JIT.events.topicDrag + '.map', sendTopicDrag)
var sendNewTopic = function (event, data) {
self.sendNewTopic(data)
}
$(document).on(Metamaps.JIT.events.newTopic + '.map', sendNewTopic)
$(document).on(JIT.events.newTopic + '.map', sendNewTopic)
var sendDeleteTopic = function (event, data) {
self.sendDeleteTopic(data)
}
$(document).on(Metamaps.JIT.events.deleteTopic + '.map', sendDeleteTopic)
$(document).on(JIT.events.deleteTopic + '.map', sendDeleteTopic)
var sendRemoveTopic = function (event, data) {
self.sendRemoveTopic(data)
}
$(document).on(Metamaps.JIT.events.removeTopic + '.map', sendRemoveTopic)
$(document).on(JIT.events.removeTopic + '.map', sendRemoveTopic)
var sendNewSynapse = function (event, data) {
self.sendNewSynapse(data)
}
$(document).on(Metamaps.JIT.events.newSynapse + '.map', sendNewSynapse)
$(document).on(JIT.events.newSynapse + '.map', sendNewSynapse)
var sendDeleteSynapse = function (event, data) {
self.sendDeleteSynapse(data)
}
$(document).on(Metamaps.JIT.events.deleteSynapse + '.map', sendDeleteSynapse)
$(document).on(JIT.events.deleteSynapse + '.map', sendDeleteSynapse)
var sendRemoveSynapse = function (event, data) {
self.sendRemoveSynapse(data)
}
$(document).on(Metamaps.JIT.events.removeSynapse + '.map', sendRemoveSynapse)
$(document).on(JIT.events.removeSynapse + '.map', sendRemoveSynapse)
var sendNewMessage = function (event, data) {
self.sendNewMessage(data)
}
$(document).on(Metamaps.Views.room.events.newMessage + '.map', sendNewMessage)
$(document).on(Views.room.events.newMessage + '.map', sendNewMessage)
},
attachMapListener: function () {
var self = Realtime
@ -623,9 +623,9 @@ const Realtime = {
// send this new mapper back your details, and the awareness that you're online
var update = {
username: Metamaps.Active.Mapper.get('name'),
userid: Metamaps.Active.Mapper.id,
mapid: Metamaps.Active.Map.id
username: Active.Mapper.get('name'),
userid: Active.Mapper.id,
mapid: Active.Map.id
}
socket.emit('notifyStartRealtime', update)
},
@ -635,9 +635,9 @@ const Realtime = {
// send this new mapper back your details, and the awareness that you're online
var update = {
username: Metamaps.Active.Mapper.get('name'),
userid: Metamaps.Active.Mapper.id,
mapid: Metamaps.Active.Map.id
username: Active.Mapper.get('name'),
userid: Active.Mapper.id,
mapid: Active.Map.id
}
socket.emit('notifyStopRealtime', update)
},
@ -655,7 +655,7 @@ const Realtime = {
name: data.username,
username: data.username,
image: data.userimage,
color: Metamaps.Util.getPastelColor(),
color: Util.getPastelColor(),
realtime: data.userrealtime,
inConversation: data.userinconversation,
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])
if (data.userinconversation) self.room.chat.mapperJoinedCall(data.userid)
@ -687,7 +687,7 @@ const Realtime = {
name: data.username,
username: data.username,
image: data.userimage,
color: Metamaps.Util.getPastelColor(),
color: Util.getPastelColor(),
realtime: true,
coords: {
x: 0,
@ -696,7 +696,7 @@ const Realtime = {
}
// 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.addParticipant(self.mappersOnMap[data.userid])
@ -707,17 +707,17 @@ const Realtime = {
if (firstOtherPerson) {
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
var update = {
userToNotify: data.userid,
username: Metamaps.Active.Mapper.get('name'),
userimage: Metamaps.Active.Mapper.get('image'),
userid: Metamaps.Active.Mapper.id,
username: Active.Mapper.get('name'),
userimage: Active.Mapper.get('image'),
userid: Active.Mapper.id,
userrealtime: self.status,
userinconversation: self.inConversation,
mapid: Metamaps.Active.Map.id
mapid: Active.Map.id
}
socket.emit('updateNewMapperList', update)
}
@ -753,7 +753,7 @@ const Realtime = {
$('#compass' + data.userid).remove()
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) ||
(!self.inConversation && self.countOthersInConversation() === 1)) {
@ -772,7 +772,7 @@ const Realtime = {
// $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn')
$('#compass' + data.userid).show()
Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime')
GlobalUI.notifyUser(data.username + ' just turned on realtime')
},
lostCollaborator: function (data) {
var self = Realtime
@ -786,7 +786,7 @@ const Realtime = {
// $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff')
$('#compass' + data.userid).hide()
Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime')
GlobalUI.notifyUser(data.username + ' just turned off realtime')
},
updatePeerCoords: function (data) {
var self = Realtime
@ -819,7 +819,7 @@ const Realtime = {
var compassDiameter = 56
var compassArrowSize = 24
var origPixels = Metamaps.Util.coordsToPixels(mapper.coords)
var origPixels = Util.coordsToPixels(mapper.coords)
var pixels = self.limitPixelsToScreen(origPixels)
$('#compass' + id).css({
left: pixels.x + 'px',
@ -867,14 +867,14 @@ const Realtime = {
var self = Realtime
var socket = Realtime.socket
var map = Metamaps.Active.Map
var mapper = Metamaps.Active.Mapper
var map = Active.Map
var mapper = Active.Mapper
if (self.status && map.authorizeToEdit(mapper) && socket) {
var update = {
usercoords: coords,
userid: Metamaps.Active.Mapper.id,
mapid: Metamaps.Active.Map.id
userid: Active.Mapper.id,
mapid: Active.Map.id
}
socket.emit('updateMapperCoords', update)
}
@ -883,8 +883,8 @@ const Realtime = {
var self = Realtime
var socket = self.socket
if (Metamaps.Active.Map && self.status) {
positions.mapid = Metamaps.Active.Map.id
if (Active.Map && self.status) {
positions.mapid = Active.Map.id
socket.emit('topicDrag', positions)
}
},
@ -895,13 +895,13 @@ const Realtime = {
var topic
var node
if (Metamaps.Active.Map && self.status) {
if (Active.Map && self.status) {
for (var key in positions) {
topic = Metamaps.Topics.get(key)
if (topic) node = topic.get('node')
if (node) node.pos.setc(positions[key].x, positions[key].y)
} // for
Metamaps.Visualize.mGraph.plot()
Visualize.mGraph.plot()
}
},
sendTopicChange: function (topic) {
@ -960,23 +960,23 @@ const Realtime = {
socket.emit('mapChangeFromClient', data)
},
mapChange: function (data) {
var map = Metamaps.Active.Map
var map = Active.Map
var isActiveMap = map && data.mapId === map.id
if (isActiveMap) {
var couldEditBefore = map.authorizeToEdit(Metamaps.Active.Mapper)
var couldEditBefore = map.authorizeToEdit(Active.Mapper)
var idBefore = map.id
map.fetch({
success: function (model, response) {
var idNow = model.id
var canEditNow = model.authorizeToEdit(Metamaps.Active.Mapper)
var canEditNow = model.authorizeToEdit(Active.Mapper)
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) {
Metamaps.Map.cantEditNow()
Map.cantEditNow()
}
else if (!couldEditBefore && canEditNow) {
Metamaps.Map.canEditNow()
Map.canEditNow()
} else {
model.fetchContained()
model.trigger('changeByOther')
@ -991,7 +991,7 @@ const Realtime = {
var socket = self.socket
var message = data.attributes
message.mapid = Metamaps.Active.Map.id
message.mapid = Active.Map.id
socket.emit('newMessage', message)
},
newMessage: function (data) {
@ -1005,14 +1005,14 @@ const Realtime = {
var self = Realtime
var socket = self.socket
if (Metamaps.Active.Map && self.status) {
data.mapperid = Metamaps.Active.Mapper.id
data.mapid = Metamaps.Active.Map.id
if (Active.Map && self.status) {
data.mapperid = Active.Mapper.id
data.mapid = Active.Map.id
socket.emit('newTopic', data)
}
},
newTopic: function (data) {
var topic, mapping, mapper, mapperCallback, cancel
var topic, mapping, mapper, cancel
var self = Realtime
var socket = self.socket
@ -1021,7 +1021,7 @@ const Realtime = {
function waitThenRenderTopic () {
if (topic && mapping && mapper) {
Metamaps.Topic.renderTopic(mapping, topic, false, false)
Topic.renderTopic(mapping, topic, false, false)
}
else if (!cancel) {
setTimeout(waitThenRenderTopic, 10)
@ -1030,11 +1030,10 @@ const Realtime = {
mapper = Metamaps.Mappers.get(data.mapperid)
if (mapper === undefined) {
mapperCallback = function (m) {
Mapper.get(data.mapperid, function(m) {
Metamaps.Mappers.add(m)
mapper = m
}
Metamaps.Mapper.get(data.mapperid, mapperCallback)
})
}
$.ajax({
url: '/topics/' + data.mappableid + '.json',
@ -1064,7 +1063,7 @@ const Realtime = {
var self = Realtime
var socket = self.socket
if (Metamaps.Active.Map) {
if (Active.Map) {
socket.emit('deleteTopicFromClient', data)
}
},
@ -1073,8 +1072,8 @@ const Realtime = {
var self = Realtime
var socket = self.socket
if (Metamaps.Active.Map) {
data.mapid = Metamaps.Active.Map.id
if (Active.Map) {
data.mapid = Active.Map.id
socket.emit('removeTopic', data)
}
},
@ -1088,7 +1087,7 @@ const Realtime = {
if (topic) {
var node = topic.get('node')
var mapping = topic.getMapping()
Metamaps.Control.hideNode(node.id)
Control.hideNode(node.id)
Metamaps.Topics.remove(topic)
Metamaps.Mappings.remove(mapping)
}
@ -1098,9 +1097,9 @@ const Realtime = {
var self = Realtime
var socket = self.socket
if (Metamaps.Active.Map) {
data.mapperid = Metamaps.Active.Mapper.id
data.mapid = Metamaps.Active.Map.id
if (Active.Map) {
data.mapperid = Active.Mapper.id
data.mapid = Active.Map.id
socket.emit('newSynapse', data)
}
},
@ -1119,7 +1118,7 @@ const Realtime = {
topic2 = synapse.getTopic2()
node2 = topic2.get('node')
Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, false)
Synapse.renderSynapse(mapping, synapse, node1, node2, false)
}
else if (!cancel) {
setTimeout(waitThenRenderSynapse, 10)
@ -1128,11 +1127,10 @@ const Realtime = {
mapper = Metamaps.Mappers.get(data.mapperid)
if (mapper === undefined) {
mapperCallback = function (m) {
Mapper.get(data.mapperid, function(m) {
Metamaps.Mappers.add(m)
mapper = m
}
Metamaps.Mapper.get(data.mapperid, mapperCallback)
})
}
$.ajax({
url: '/synapses/' + data.mappableid + '.json',
@ -1161,8 +1159,8 @@ const Realtime = {
var self = Realtime
var socket = self.socket
if (Metamaps.Active.Map) {
data.mapid = Metamaps.Active.Map.id
if (Active.Map) {
data.mapid = Active.Map.id
socket.emit('deleteSynapseFromClient', data)
}
},
@ -1171,8 +1169,8 @@ const Realtime = {
var self = Realtime
var socket = self.socket
if (Metamaps.Active.Map) {
data.mapid = Metamaps.Active.Map.id
if (Active.Map) {
data.mapid = Active.Map.id
socket.emit('removeSynapse', data)
}
},
@ -1187,7 +1185,7 @@ const Realtime = {
var edge = synapse.get('edge')
var mapping = synapse.getMapping()
if (edge.getData('mappings').length - 1 === 0) {
Metamaps.Control.hideEdge(edge)
Control.hideEdge(edge)
}
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, $ */
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
*
* Dependencies:
* - Metamaps.Active
* - Metamaps.GlobalUI
* - Metamaps.JIT
* - Metamaps.Loading
* - Metamaps.Map
* - Metamaps.Maps
* - Metamaps.Topic
* - Metamaps.Views
* - Metamaps.Visualize
*/
const _Router = Backbone.Router.extend({
@ -24,53 +24,53 @@ const _Router = Backbone.Router.extend({
'maps/:id': 'maps' // #maps/7
},
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'
Metamaps.Router.currentSection = ''
Metamaps.Router.currentPage = ''
this.currentSection = ''
this.currentPage = ''
$('.wrapper').removeClass('mapPage topicPage')
var classes = Metamaps.Active.Mapper ? 'homePage explorePage' : 'homePage'
var classes = Active.Mapper ? 'homePage explorePage' : 'homePage'
$('.wrapper').addClass(classes)
var navigate = function () {
Metamaps.Router.timeoutId = setTimeout(function () {
Metamaps.Router.navigate('')
this.timeoutId = setTimeout(function () {
this.navigate('')
}, 300)
}
// all this only for the logged in home page
if (Metamaps.Active.Mapper) {
if (Active.Mapper) {
$('.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) {
Metamaps.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
} else {
Metamaps.Views.exploreMaps.render(navigate)
Views.exploreMaps.render(navigate)
}
} else {
// logged out home page
Metamaps.GlobalUI.hideDiv('#explore')
Metamaps.GlobalUI.showDiv('#yield')
Metamaps.Router.timeoutId = setTimeout(navigate, 500)
GlobalUI.hideDiv('#explore')
GlobalUI.showDiv('#yield')
this.timeoutId = setTimeout(navigate, 500)
}
Metamaps.GlobalUI.hideDiv('#infovis')
Metamaps.GlobalUI.hideDiv('#instructions')
Metamaps.Map.end()
Metamaps.Topic.end()
Metamaps.Active.Map = null
Metamaps.Active.Topic = null
GlobalUI.hideDiv('#infovis')
GlobalUI.hideDiv('#instructions')
Map.end()
Topic.end()
Active.Map = null
Active.Topic = null
},
explore: function (section, id) {
clearTimeout(Metamaps.Router.timeoutId)
clearTimeout(this.timeoutId)
// just capitalize the variable section
// either 'featured', 'mapper', or 'active'
@ -90,12 +90,12 @@ const _Router = Backbone.Router.extend({
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').addClass('explorePage')
Metamaps.Router.currentSection = 'explore'
Metamaps.Router.currentPage = section
this.currentSection = 'explore'
this.currentPage = section
// this will mean it's a mapper page being loaded
if (id) {
@ -108,20 +108,20 @@ const _Router = Backbone.Router.extend({
Metamaps.Maps.Mapper.mapperId = id
}
Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps[capitalize])
Views.exploreMaps.setCollection(Metamaps.Maps[capitalize])
var navigate = function () {
var path = '/explore/' + Metamaps.Router.currentPage
var path = '/explore/' + this.currentPage
// alter url if for mapper profile page
if (Metamaps.Router.currentPage === 'mapper') {
if (this.currentPage === 'mapper') {
path += '/' + Metamaps.Maps.Mapper.mapperId
}
Metamaps.Router.navigate(path)
this.navigate(path)
}
var navigateTimeout = function () {
Metamaps.Router.timeoutId = setTimeout(navigate, 300)
this.timeoutId = setTimeout(navigate, 300)
}
if (Metamaps.Maps[capitalize].length === 0) {
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
} else {
if (id) {
Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout)
Views.exploreMaps.fetchUserThenRender(navigateTimeout)
} else {
Metamaps.Views.exploreMaps.render(navigateTimeout)
Views.exploreMaps.render(navigateTimeout)
}
}
Metamaps.GlobalUI.showDiv('#explore')
Metamaps.GlobalUI.hideDiv('#yield')
Metamaps.GlobalUI.hideDiv('#infovis')
Metamaps.GlobalUI.hideDiv('#instructions')
Metamaps.Map.end()
Metamaps.Topic.end()
Metamaps.Active.Map = null
Metamaps.Active.Topic = null
GlobalUI.showDiv('#explore')
GlobalUI.hideDiv('#yield')
GlobalUI.hideDiv('#infovis')
GlobalUI.hideDiv('#instructions')
Map.end()
Topic.end()
Active.Map = null
Active.Topic = null
},
maps: function (id) {
clearTimeout(Metamaps.Router.timeoutId)
clearTimeout(this.timeoutId)
document.title = 'Map ' + id + ' | Metamaps'
Metamaps.Router.currentSection = 'map'
Metamaps.Router.currentPage = id
this.currentSection = 'map'
this.currentPage = id
$('.wrapper').removeClass('homePage explorePage topicPage')
$('.wrapper').addClass('mapPage')
// another class will be added to wrapper if you
// can edit this map '.canEditMap'
Metamaps.GlobalUI.hideDiv('#yield')
Metamaps.GlobalUI.hideDiv('#explore')
GlobalUI.hideDiv('#yield')
GlobalUI.hideDiv('#explore')
// clear the visualization, if there was one, before showing its div again
if (Metamaps.Visualize.mGraph) {
Metamaps.Visualize.mGraph.graph.empty()
Metamaps.Visualize.mGraph.plot()
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
if (Visualize.mGraph) {
Visualize.mGraph.graph.empty()
Visualize.mGraph.plot()
JIT.centerMap(Visualize.mGraph.canvas)
}
Metamaps.GlobalUI.showDiv('#infovis')
Metamaps.Topic.end()
Metamaps.Active.Topic = null
GlobalUI.showDiv('#infovis')
Topic.end()
Active.Topic = null
Metamaps.Loading.show()
Metamaps.Map.end()
Metamaps.Map.launch(id)
Map.end()
Map.launch(id)
},
topics: function (id) {
clearTimeout(Metamaps.Router.timeoutId)
clearTimeout(this.timeoutId)
document.title = 'Topic ' + id + ' | Metamaps'
Metamaps.Router.currentSection = 'topic'
Metamaps.Router.currentPage = id
this.currentSection = 'topic'
this.currentPage = id
$('.wrapper').removeClass('homePage explorePage mapPage')
$('.wrapper').addClass('topicPage')
Metamaps.GlobalUI.hideDiv('#yield')
Metamaps.GlobalUI.hideDiv('#explore')
GlobalUI.hideDiv('#yield')
GlobalUI.hideDiv('#explore')
// clear the visualization, if there was one, before showing its div again
if (Metamaps.Visualize.mGraph) {
Metamaps.Visualize.mGraph.graph.empty()
Metamaps.Visualize.mGraph.plot()
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
if (Visualize.mGraph) {
Visualize.mGraph.graph.empty()
Visualize.mGraph.plot()
JIT.centerMap(Visualize.mGraph.canvas)
}
Metamaps.GlobalUI.showDiv('#infovis')
Metamaps.Map.end()
Metamaps.Active.Map = null
GlobalUI.showDiv('#infovis')
Map.end()
Active.Map = null
Metamaps.Topic.end()
Metamaps.Topic.launch(id)
Topic.end()
Topic.launch(id)
}
})
@ -227,9 +227,9 @@ Router.intercept = function (evt) {
segments.splice(0, 1) // pop off the element created by the first /
if (href.attr === '') {
Metamaps.Router.home()
Router.home()
} 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,
root: '/'
})
$(document).on('click', 'a[data-router="true"]', Metamaps.Router.intercept)
$(document).on('click', 'a[data-router="true"]', Router.intercept)
}
export default Router

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

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

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

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

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

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

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

@ -2,6 +2,8 @@
import Active from './Active'
import JIT from './JIT'
import Router from './Router'
import TopicCard from './TopicCard'
/*
* Metamaps.Visualize
@ -9,9 +11,7 @@ import JIT from './JIT'
* Dependencies:
* - Metamaps.Loading
* - Metamaps.Metacodes
* - Metamaps.Router
* - Metamaps.Synapses
* - Metamaps.TopicCard
* - Metamaps.Topics
*/
@ -42,7 +42,7 @@ const Visualize = {
// prevent touch events on the canvas from default behaviour
$('#infovis-canvas').bind('touchend touchcancel', function (event) {
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
Visualize.touchDragNode = false
})
@ -204,16 +204,16 @@ const Visualize = {
hold()
// update the url now that the map is ready
clearTimeout(Metamaps.Router.timeoutId)
Metamaps.Router.timeoutId = setTimeout(function () {
clearTimeout(Router.timeoutId)
Router.timeoutId = setTimeout(function () {
var m = Active.Map
var t = Active.Topic
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) {
Metamaps.Router.navigate('/topics/' + t.id)
Router.navigate('/topics/' + t.id)
}
}, 800)
}

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

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