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

start making the code modular. many files still need global scape

Browse source
This commit is contained in:
Devin Howard 2016-09-22 15:21:59 +08:00
parent d02c836805
commit 03446f548a
29 changed files with 598 additions and 566 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -121,3 +121,5 @@ Metamaps.Account = {
$('#user_password_confirmation').val('') $('#user_password_confirmation').val('')
} }
} }
export default Metamaps.Account

13
frontend/src/Metamaps/Admin.js
View file

@ -1,13 +1,6 @@
window.Metamaps = window.Metamaps || {} /* global $ */
/* global Metamaps, $ */
/* const Admin = {
* Metamaps.Admin.js.erb
*
* Dependencies: none!
*/
Metamaps.Admin = {
selectMetacodes: [], selectMetacodes: [],
allMetacodes: [], allMetacodes: [],
init: function () { init: function () {
@ -53,3 +46,5 @@ Metamaps.Admin = {
} }
} }
} }
export default Admin

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

@ -1,13 +1,4 @@
window.Metamaps = window.Metamaps || {} const AutoLayout = {
/* global Metamaps */
/*
* Metmaaps.AutoLayout.js
*
* Dependencies: none!
*/
Metamaps.AutoLayout = {
nextX: 0, nextX: 0,
nextY: 0, nextY: 0,
sideLength: 1, sideLength: 1,
@ -74,3 +65,5 @@ Metamaps.AutoLayout = {
self.turnCount = 0 self.turnCount = 0
} }
} }
export default AutoLayout

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

@ -695,3 +695,5 @@ Metamaps.Backbone.init = function () {
} }
self.attachCollectionEvents() self.attachCollectionEvents()
}; // end Metamaps.Backbone.init }; // end Metamaps.Backbone.init
export default Metamaps.Backbone

1
frontend/src/Metamaps/Constants.js
View file

@ -1,7 +1,6 @@
window.Metamaps = window.Metamaps || {} window.Metamaps = window.Metamaps || {}
// TODO eliminate these 5 top-level variables // TODO eliminate these 5 top-level variables
Metamaps.panningInt = null
Metamaps.tempNode = null Metamaps.tempNode = null
Metamaps.tempInit = false Metamaps.tempInit = false
Metamaps.tempNode2 = null Metamaps.tempNode2 = null

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

@ -1,12 +1,10 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
* Metamaps.Control.js.erb * Metamaps.Control.js
* *
* Dependencies: * Dependencies:
* - Metamaps.Active * - Metamaps.Active
* - Metamaps.Control
* - Metamaps.Filter * - Metamaps.Filter
* - Metamaps.GlobalUI * - Metamaps.GlobalUI
* - Metamaps.JIT * - Metamaps.JIT
@ -20,7 +18,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.Control = { const Control = {
init: function () {}, init: function () {},
selectNode: function (node, e) { selectNode: function (node, e) {
var filtered = node.getData('alpha') === 0 var filtered = node.getData('alpha') === 0
@ -34,7 +32,7 @@ Metamaps.Control = {
var l = Metamaps.Selected.Nodes.length var l = Metamaps.Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
var node = Metamaps.Selected.Nodes[i] var node = Metamaps.Selected.Nodes[i]
Metamaps.Control.deselectNode(node) Control.deselectNode(node)
} }
Metamaps.Visualize.mGraph.plot() Metamaps.Visualize.mGraph.plot()
}, },
@ -64,8 +62,8 @@ Metamaps.Control = {
var r = confirm(text + 'Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.') var r = confirm(text + 'Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.')
if (r == true) { if (r == true) {
Metamaps.Control.deleteSelectedEdges() Control.deleteSelectedEdges()
Metamaps.Control.deleteSelectedNodes() Control.deleteSelectedNodes()
} }
}, },
deleteSelectedNodes: function () { // refers to deleting topics permanently deleteSelectedNodes: function () { // refers to deleting topics permanently
@ -81,7 +79,7 @@ Metamaps.Control = {
var l = Metamaps.Selected.Nodes.length var l = Metamaps.Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
var node = Metamaps.Selected.Nodes[i] var node = Metamaps.Selected.Nodes[i]
Metamaps.Control.deleteNode(node.id) Control.deleteNode(node.id)
} }
}, },
deleteNode: function (nodeid) { // refers to deleting topics permanently deleteNode: function (nodeid) { // refers to deleting topics permanently
@ -106,7 +104,7 @@ Metamaps.Control = {
$(document).trigger(Metamaps.JIT.events.deleteTopic, [{ $(document).trigger(Metamaps.JIT.events.deleteTopic, [{
mappableid: mappableid mappableid: mappableid
}]) }])
Metamaps.Control.hideNode(nodeid) Control.hideNode(nodeid)
} else { } else {
Metamaps.GlobalUI.notifyUser('Only topics you created can be deleted') Metamaps.GlobalUI.notifyUser('Only topics you created can be deleted')
} }
@ -120,7 +118,7 @@ Metamaps.Control = {
_.each(nodeids, function(nodeid) { _.each(nodeids, function(nodeid) {
if (Metamaps.Active.Topic.id !== nodeid) { if (Metamaps.Active.Topic.id !== nodeid) {
Metamaps.Topics.remove(nodeid) Metamaps.Topics.remove(nodeid)
Metamaps.Control.hideNode(nodeid) Control.hideNode(nodeid)
} }
}) })
return return
@ -139,7 +137,7 @@ Metamaps.Control = {
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Metamaps.Selected.Nodes[i]
Metamaps.Control.removeNode(node.id) Control.removeNode(node.id)
} }
}, },
removeNode: function (nodeid) { // refers to removing topics permanently from a map removeNode: function (nodeid) { // refers to removing topics permanently from a map
@ -161,7 +159,7 @@ Metamaps.Control = {
$(document).trigger(Metamaps.JIT.events.removeTopic, [{ $(document).trigger(Metamaps.JIT.events.removeTopic, [{
mappableid: mappableid mappableid: mappableid
}]) }])
Metamaps.Control.hideNode(nodeid) Control.hideNode(nodeid)
}, },
hideSelectedNodes: function () { hideSelectedNodes: function () {
var l = Metamaps.Selected.Nodes.length, var l = Metamaps.Selected.Nodes.length,
@ -170,14 +168,14 @@ Metamaps.Control = {
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Metamaps.Selected.Nodes[i]
Metamaps.Control.hideNode(node.id) Control.hideNode(node.id)
} }
}, },
hideNode: function (nodeid) { hideNode: function (nodeid) {
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid) var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid)
var graph = Metamaps.Visualize.mGraph var graph = Metamaps.Visualize.mGraph
Metamaps.Control.deselectNode(node) Control.deselectNode(node)
node.setData('alpha', 0, 'end') node.setData('alpha', 0, 'end')
node.eachAdjacency(function (adj) { node.eachAdjacency(function (adj) {
@ -218,7 +216,7 @@ Metamaps.Control = {
var l = Metamaps.Selected.Edges.length var l = Metamaps.Selected.Edges.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
var edge = Metamaps.Selected.Edges[i] var edge = Metamaps.Selected.Edges[i]
Metamaps.Control.deselectEdge(edge) Control.deselectEdge(edge)
} }
Metamaps.Visualize.mGraph.plot() Metamaps.Visualize.mGraph.plot()
}, },
@ -258,7 +256,7 @@ Metamaps.Control = {
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Metamaps.Selected.Edges[i]
Metamaps.Control.deleteEdge(edge) Control.deleteEdge(edge)
} }
}, },
deleteEdge: function (edge) { deleteEdge: function (edge) {
@ -279,7 +277,7 @@ Metamaps.Control = {
var permToDelete = Metamaps.Active.Mapper.id === synapse.get('user_id') || Metamaps.Active.Mapper.get('admin') var permToDelete = Metamaps.Active.Mapper.id === synapse.get('user_id') || Metamaps.Active.Mapper.get('admin')
if (permToDelete) { if (permToDelete) {
if (edge.getData('synapses').length - 1 === 0) { if (edge.getData('synapses').length - 1 === 0) {
Metamaps.Control.hideEdge(edge) Control.hideEdge(edge)
} }
var mappableid = synapse.id var mappableid = synapse.id
synapse.destroy() synapse.destroy()
@ -315,7 +313,7 @@ Metamaps.Control = {
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Metamaps.Selected.Edges[i]
Metamaps.Control.removeEdge(edge) Control.removeEdge(edge)
} }
Metamaps.Selected.Edges = [ ] Metamaps.Selected.Edges = [ ]
}, },
@ -330,7 +328,7 @@ Metamaps.Control = {
} }
if (edge.getData('mappings').length - 1 === 0) { if (edge.getData('mappings').length - 1 === 0) {
Metamaps.Control.hideEdge(edge) Control.hideEdge(edge)
} }
var index = edge.getData('displayIndex') ? edge.getData('displayIndex') : 0 var index = edge.getData('displayIndex') ? edge.getData('displayIndex') : 0
@ -357,7 +355,7 @@ Metamaps.Control = {
i i
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Metamaps.Selected.Edges[i]
Metamaps.Control.hideEdge(edge) Control.hideEdge(edge)
} }
Metamaps.Selected.Edges = [ ] Metamaps.Selected.Edges = [ ]
}, },
@ -365,7 +363,7 @@ Metamaps.Control = {
var from = edge.nodeFrom.id var from = edge.nodeFrom.id
var to = edge.nodeTo.id var to = edge.nodeTo.id
edge.setData('alpha', 0, 'end') edge.setData('alpha', 0, 'end')
Metamaps.Control.deselectEdge(edge) Control.deselectEdge(edge)
Metamaps.Visualize.mGraph.fx.animate({ Metamaps.Visualize.mGraph.fx.animate({
modes: ['edge-property:alpha'], modes: ['edge-property:alpha'],
duration: 500 duration: 500
@ -449,4 +447,6 @@ Metamaps.Control = {
Metamaps.GlobalUI.notifyUser(message) Metamaps.GlobalUI.notifyUser(message)
Metamaps.Visualize.mGraph.plot() Metamaps.Visualize.mGraph.plot()
}, },
}; // end Metamaps.Control }
export default Control

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

@ -15,7 +15,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.Create = { const Create = {
isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
selectedMetacodeSet: null, selectedMetacodeSet: null,
selectedMetacodeSetIndex: null, selectedMetacodeSetIndex: null,
@ -24,7 +24,7 @@ Metamaps.Create = {
selectedMetacodes: [], selectedMetacodes: [],
newSelectedMetacodes: [], newSelectedMetacodes: [],
init: function () { init: function () {
var self = Metamaps.Create var self = Create
self.newTopic.init() self.newTopic.init()
self.newSynapse.init() self.newSynapse.init()
@ -37,7 +37,7 @@ Metamaps.Create = {
$('.customMetacodeList li').click(self.toggleMetacodeSelected) // within the custom metacode set tab $('.customMetacodeList li').click(self.toggleMetacodeSelected) // within the custom metacode set tab
}, },
toggleMetacodeSelected: function () { toggleMetacodeSelected: function () {
var self = Metamaps.Create var self = Create
if ($(this).attr('class') != 'toggledOff') { if ($(this).attr('class') != 'toggledOff') {
$(this).addClass('toggledOff') $(this).addClass('toggledOff')
@ -52,29 +52,29 @@ Metamaps.Create = {
} }
}, },
updateMetacodeSet: function (set, index, custom) { updateMetacodeSet: function (set, index, custom) {
if (custom && Metamaps.Create.newSelectedMetacodes.length == 0) { if (custom && Create.newSelectedMetacodes.length == 0) {
alert('Please select at least one metacode to use!') alert('Please select at least one metacode to use!')
return false return false
} }
var codesToSwitchToIds var codesToSwitchToIds
var metacodeModels = new Metamaps.Backbone.MetacodeCollection() var metacodeModels = new Metamaps.Backbone.MetacodeCollection()
Metamaps.Create.selectedMetacodeSetIndex = index Create.selectedMetacodeSetIndex = index
Metamaps.Create.selectedMetacodeSet = 'metacodeset-' + set Create.selectedMetacodeSet = 'metacodeset-' + set
if (!custom) { if (!custom) {
codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',') codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',')
$('.customMetacodeList li').addClass('toggledOff') $('.customMetacodeList li').addClass('toggledOff')
Metamaps.Create.selectedMetacodes = [] Create.selectedMetacodes = []
Metamaps.Create.selectedMetacodeNames = [] Create.selectedMetacodeNames = []
Metamaps.Create.newSelectedMetacodes = [] Create.newSelectedMetacodes = []
Metamaps.Create.newSelectedMetacodeNames = [] Create.newSelectedMetacodeNames = []
} }
else if (custom) { else if (custom) {
// uses .slice to avoid setting the two arrays to the same actual array // uses .slice to avoid setting the two arrays to the same actual array
Metamaps.Create.selectedMetacodes = Metamaps.Create.newSelectedMetacodes.slice(0) Create.selectedMetacodes = Create.newSelectedMetacodes.slice(0)
Metamaps.Create.selectedMetacodeNames = Metamaps.Create.newSelectedMetacodeNames.slice(0) Create.selectedMetacodeNames = Create.newSelectedMetacodeNames.slice(0)
codesToSwitchToIds = Metamaps.Create.selectedMetacodes.slice(0) codesToSwitchToIds = Create.selectedMetacodes.slice(0)
} }
// sort by name // sort by name
@ -106,7 +106,7 @@ Metamaps.Create = {
var mdata = { var mdata = {
'metacodes': { 'metacodes': {
'value': custom ? Metamaps.Create.selectedMetacodes.toString() : Metamaps.Create.selectedMetacodeSet 'value': custom ? Create.selectedMetacodes.toString() : Create.selectedMetacodeSet
} }
} }
$.ajax({ $.ajax({
@ -124,7 +124,7 @@ Metamaps.Create = {
}, },
cancelMetacodeSetSwitch: function () { cancelMetacodeSetSwitch: function () {
var self = Metamaps.Create var self = Create
self.isSwitchingSet = false self.isSwitchingSet = false
if (self.selectedMetacodeSet != 'metacodeset-custom') { if (self.selectedMetacodeSet != 'metacodeset-custom') {
@ -149,17 +149,17 @@ Metamaps.Create = {
newTopic: { newTopic: {
init: function () { init: function () {
$('#topic_name').keyup(function () { $('#topic_name').keyup(function () {
Metamaps.Create.newTopic.name = $(this).val() Create.newTopic.name = $(this).val()
}) })
$('.pinCarousel').click(function() { $('.pinCarousel').click(function() {
if (Metamaps.Create.newTopic.pinned) { if (Create.newTopic.pinned) {
$('.pinCarousel').removeClass('isPinned') $('.pinCarousel').removeClass('isPinned')
Metamaps.Create.newTopic.pinned = false Create.newTopic.pinned = false
} }
else { else {
$('.pinCarousel').addClass('isPinned') $('.pinCarousel').addClass('isPinned')
Metamaps.Create.newTopic.pinned = true Create.newTopic.pinned = true
} }
}) })
@ -221,24 +221,24 @@ Metamaps.Create = {
$('#new_topic').fadeIn('fast', function () { $('#new_topic').fadeIn('fast', function () {
$('#topic_name').focus() $('#topic_name').focus()
}) })
Metamaps.Create.newTopic.beingCreated = true Create.newTopic.beingCreated = true
Metamaps.Create.newTopic.name = '' Create.newTopic.name = ''
}, },
hide: function (force) { hide: function (force) {
if (force || !Metamaps.Create.newTopic.pinned) { if (force || !Create.newTopic.pinned) {
$('#new_topic').fadeOut('fast') $('#new_topic').fadeOut('fast')
Metamaps.Create.newTopic.beingCreated = false Create.newTopic.beingCreated = false
} }
if (force) { if (force) {
$('.pinCarousel').removeClass('isPinned') $('.pinCarousel').removeClass('isPinned')
Metamaps.Create.newTopic.pinned = false Create.newTopic.pinned = false
} }
$('#topic_name').typeahead('val', '') $('#topic_name').typeahead('val', '')
} }
}, },
newSynapse: { newSynapse: {
init: function () { init: function () {
var self = Metamaps.Create.newSynapse var self = Create.newSynapse
var synapseBloodhound = new Bloodhound({ var synapseBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
@ -254,7 +254,7 @@ Metamaps.Create = {
remote: { remote: {
url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2', url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2',
prepare: function (query, settings) { prepare: function (query, settings) {
var self = Metamaps.Create.newSynapse var self = Create.newSynapse
if (Metamaps.Selected.Nodes.length < 2) { if (Metamaps.Selected.Nodes.length < 2) {
settings.url = settings.url.replace('%TOPIC1', self.topic1id).replace('%TOPIC2', self.topic2id) settings.url = settings.url.replace('%TOPIC1', self.topic1id).replace('%TOPIC2', self.topic2id)
return settings return settings
@ -300,13 +300,13 @@ Metamaps.Create = {
if (e.keyCode === BACKSPACE && $(this).val() === '' || if (e.keyCode === BACKSPACE && $(this).val() === '' ||
e.keyCode === DELETE && $(this).val() === '' || e.keyCode === DELETE && $(this).val() === '' ||
e.keyCode === ESC) { e.keyCode === ESC) {
Metamaps.Create.newSynapse.hide() Create.newSynapse.hide()
} // if } // if
Metamaps.Create.newSynapse.description = $(this).val() Create.newSynapse.description = $(this).val()
}) })
$('#synapse_desc').focusout(function () { $('#synapse_desc').focusout(function () {
if (Metamaps.Create.newSynapse.beingCreated) { if (Create.newSynapse.beingCreated) {
Metamaps.Synapse.createSynapseLocally() Metamaps.Synapse.createSynapseLocally()
} }
}) })
@ -315,7 +315,7 @@ Metamaps.Create = {
if (datum.id) { // if they clicked on an existing synapse get it if (datum.id) { // if they clicked on an existing synapse get it
Metamaps.Synapse.getSynapseFromAutocomplete(datum.id) Metamaps.Synapse.getSynapseFromAutocomplete(datum.id)
} else { } else {
Metamaps.Create.newSynapse.description = datum.value Create.newSynapse.description = datum.value
Metamaps.Synapse.createSynapseLocally() Metamaps.Synapse.createSynapseLocally()
} }
}) })
@ -329,17 +329,19 @@ Metamaps.Create = {
$('#new_synapse').fadeIn(100, function () { $('#new_synapse').fadeIn(100, function () {
$('#synapse_desc').focus() $('#synapse_desc').focus()
}) })
Metamaps.Create.newSynapse.beingCreated = true Create.newSynapse.beingCreated = true
}, },
hide: function () { hide: function () {
$('#new_synapse').fadeOut('fast') $('#new_synapse').fadeOut('fast')
$('#synapse_desc').typeahead('val', '') $('#synapse_desc').typeahead('val', '')
Metamaps.Create.newSynapse.beingCreated = false Create.newSynapse.beingCreated = false
Metamaps.Create.newTopic.addSynapse = false Create.newTopic.addSynapse = false
Metamaps.Create.newSynapse.topic1id = 0 Create.newSynapse.topic1id = 0
Metamaps.Create.newSynapse.topic2id = 0 Create.newSynapse.topic2id = 0
Metamaps.Mouse.synapseStartCoordinates = [] Metamaps.Mouse.synapseStartCoordinates = []
Metamaps.Visualize.mGraph.plot() Metamaps.Visualize.mGraph.plot()
}, },
} }
}; // end Metamaps.Create }
export default Create

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

@ -1,15 +1,6 @@
window.Metamaps = window.Metamaps || {} const Debug = () => {
/* console.debug(window.Metamaps)
* Metamaps.Debug.js.erb console.debug(`Metamaps Version: ${window.Metamaps.VERSION}`)
* }
* Dependencies: none!
*/
Metamaps.Debug = function () { export default Debug
console.debug(Metamaps)
console.debug('Metamaps Version: ' + Metamaps.VERSION)
}
Metamaps.debug = function () {
Metamaps.Debug()
window.Metamaps = window.Metamaps || {}
}

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -16,7 +15,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.Filter = { const Filter = {
filters: { filters: {
name: '', name: '',
metacodes: [], metacodes: [],
@ -31,7 +30,7 @@ Metamaps.Filter = {
isOpen: false, isOpen: false,
changing: false, changing: false,
init: function () { init: function () {
var self = Metamaps.Filter var self = Filter
$('.sidebarFilterIcon').click(self.toggleBox) $('.sidebarFilterIcon').click(self.toggleBox)
@ -46,7 +45,7 @@ Metamaps.Filter = {
self.getFilterData() self.getFilterData()
}, },
toggleBox: function (event) { toggleBox: function (event) {
var self = Metamaps.Filter var self = Filter
if (self.isOpen) self.close() if (self.isOpen) self.close()
else self.open() else self.open()
@ -54,7 +53,7 @@ Metamaps.Filter = {
event.stopPropagation() event.stopPropagation()
}, },
open: function () { open: function () {
var self = Metamaps.Filter var self = Filter
Metamaps.GlobalUI.Account.close() Metamaps.GlobalUI.Account.close()
$('.sidebarFilterIcon div').addClass('hide') $('.sidebarFilterIcon div').addClass('hide')
@ -70,7 +69,7 @@ Metamaps.Filter = {
} }
}, },
close: function () { close: function () {
var self = Metamaps.Filter var self = Filter
$('.sidebarFilterIcon div').removeClass('hide') $('.sidebarFilterIcon div').removeClass('hide')
if (!self.changing) { if (!self.changing) {
@ -83,7 +82,7 @@ Metamaps.Filter = {
} }
}, },
reset: function () { reset: function () {
var self = Metamaps.Filter var self = Filter
self.filters.metacodes = [] self.filters.metacodes = []
self.filters.mappers = [] self.filters.mappers = []
@ -103,7 +102,7 @@ Metamaps.Filter = {
But what these function do is load this data into three accessible array within java : metacodes, mappers and synapses But what these function do is load this data into three accessible array within java : metacodes, mappers and synapses
*/ */
getFilterData: function () { getFilterData: function () {
var self = Metamaps.Filter var self = Filter
var metacode, mapper, synapse var metacode, mapper, synapse
@ -126,7 +125,7 @@ Metamaps.Filter = {
}) })
}, },
bindLiClicks: function () { bindLiClicks: function () {
var self = Metamaps.Filter var self = Filter
$('#filter_by_metacode ul li').unbind().click(self.toggleMetacode) $('#filter_by_metacode ul li').unbind().click(self.toggleMetacode)
$('#filter_by_mapper ul li').unbind().click(self.toggleMapper) $('#filter_by_mapper ul li').unbind().click(self.toggleMapper)
$('#filter_by_synapse ul li').unbind().click(self.toggleSynapse) $('#filter_by_synapse ul li').unbind().click(self.toggleSynapse)
@ -137,7 +136,7 @@ Metamaps.Filter = {
@param @param
*/ */
updateFilters: function (collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) { updateFilters: function (collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) {
var self = Metamaps.Filter var self = Filter
var newList = [] var newList = []
var removed = [] var removed = []
@ -212,11 +211,11 @@ Metamaps.Filter = {
self.bindLiClicks() self.bindLiClicks()
}, },
checkMetacodes: function () { checkMetacodes: function () {
var self = Metamaps.Filter var self = Filter
self.updateFilters('Topics', 'metacode_id', 'Metacodes', 'metacodes', 'metacode') self.updateFilters('Topics', 'metacode_id', 'Metacodes', 'metacodes', 'metacode')
}, },
checkMappers: function () { checkMappers: function () {
var self = Metamaps.Filter var self = Filter
var onMap = Metamaps.Active.Map ? true : false var onMap = Metamaps.Active.Map ? true : false
if (onMap) { if (onMap) {
self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper') self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper')
@ -226,11 +225,11 @@ Metamaps.Filter = {
} }
}, },
checkSynapses: function () { checkSynapses: function () {
var self = Metamaps.Filter var self = Filter
self.updateFilters('Synapses', 'desc', 'Synapses', 'synapses', 'synapse') self.updateFilters('Synapses', 'desc', 'Synapses', 'synapses', 'synapse')
}, },
filterAllMetacodes: function (e) { filterAllMetacodes: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_metacode ul li').addClass('toggledOff') $('#filter_by_metacode ul li').addClass('toggledOff')
$('.showAllMetacodes').removeClass('active') $('.showAllMetacodes').removeClass('active')
$('.hideAllMetacodes').addClass('active') $('.hideAllMetacodes').addClass('active')
@ -238,7 +237,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterNoMetacodes: function (e) { filterNoMetacodes: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_metacode ul li').removeClass('toggledOff') $('#filter_by_metacode ul li').removeClass('toggledOff')
$('.showAllMetacodes').addClass('active') $('.showAllMetacodes').addClass('active')
$('.hideAllMetacodes').removeClass('active') $('.hideAllMetacodes').removeClass('active')
@ -246,7 +245,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterAllMappers: function (e) { filterAllMappers: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_mapper ul li').addClass('toggledOff') $('#filter_by_mapper ul li').addClass('toggledOff')
$('.showAllMappers').removeClass('active') $('.showAllMappers').removeClass('active')
$('.hideAllMappers').addClass('active') $('.hideAllMappers').addClass('active')
@ -254,7 +253,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterNoMappers: function (e) { filterNoMappers: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_mapper ul li').removeClass('toggledOff') $('#filter_by_mapper ul li').removeClass('toggledOff')
$('.showAllMappers').addClass('active') $('.showAllMappers').addClass('active')
$('.hideAllMappers').removeClass('active') $('.hideAllMappers').removeClass('active')
@ -262,7 +261,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterAllSynapses: function (e) { filterAllSynapses: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_synapse ul li').addClass('toggledOff') $('#filter_by_synapse ul li').addClass('toggledOff')
$('.showAllSynapses').removeClass('active') $('.showAllSynapses').removeClass('active')
$('.hideAllSynapses').addClass('active') $('.hideAllSynapses').addClass('active')
@ -270,7 +269,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterNoSynapses: function (e) { filterNoSynapses: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_synapse ul li').removeClass('toggledOff') $('#filter_by_synapse ul li').removeClass('toggledOff')
$('.showAllSynapses').addClass('active') $('.showAllSynapses').addClass('active')
$('.hideAllSynapses').removeClass('active') $('.hideAllSynapses').removeClass('active')
@ -281,7 +280,7 @@ Metamaps.Filter = {
// to reduce code redundancy // to reduce code redundancy
// gets called in the context of a list item in a filter box // gets called in the context of a list item in a filter box
toggleLi: function (whichToFilter) { toggleLi: function (whichToFilter) {
var self = Metamaps.Filter, index var self = Filter, index
var id = $(this).attr('data-id') var id = $(this).attr('data-id')
if (self.visible[whichToFilter].indexOf(id) == -1) { if (self.visible[whichToFilter].indexOf(id) == -1) {
self.visible[whichToFilter].push(id) self.visible[whichToFilter].push(id)
@ -294,7 +293,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
toggleMetacode: function () { toggleMetacode: function () {
var self = Metamaps.Filter var self = Filter
self.toggleLi.call(this, 'metacodes') self.toggleLi.call(this, 'metacodes')
if (self.visible.metacodes.length === self.filters.metacodes.length) { if (self.visible.metacodes.length === self.filters.metacodes.length) {
@ -310,7 +309,7 @@ Metamaps.Filter = {
} }
}, },
toggleMapper: function () { toggleMapper: function () {
var self = Metamaps.Filter var self = Filter
self.toggleLi.call(this, 'mappers') self.toggleLi.call(this, 'mappers')
if (self.visible.mappers.length === self.filters.mappers.length) { if (self.visible.mappers.length === self.filters.mappers.length) {
@ -326,7 +325,7 @@ Metamaps.Filter = {
} }
}, },
toggleSynapse: function () { toggleSynapse: function () {
var self = Metamaps.Filter var self = Filter
self.toggleLi.call(this, 'synapses') self.toggleLi.call(this, 'synapses')
if (self.visible.synapses.length === self.filters.synapses.length) { if (self.visible.synapses.length === self.filters.synapses.length) {
@ -342,7 +341,7 @@ Metamaps.Filter = {
} }
}, },
passFilters: function () { passFilters: function () {
var self = Metamaps.Filter var self = Filter
var visible = self.visible var visible = self.visible
var passesMetacode, passesMapper, passesSynapse var passesMetacode, passesMapper, passesSynapse
@ -464,4 +463,6 @@ Metamaps.Filter = {
duration: 200 duration: 200
}) })
} }
}; // end Metamaps.Filter }
export default Filter

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

@ -678,3 +678,5 @@ Metamaps.GlobalUI.Search = {
$('#searchLoading').show(); $('#searchLoading').show();
} }
} }
export default Metamaps.GlobalUI

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -14,7 +13,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Topics * - Metamaps.Topics
*/ */
Metamaps.Import = { const Import = {
// note that user is not imported // note that user is not imported
topicWhitelist: [ topicWhitelist: [
'id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission' 'id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission'
@ -25,19 +24,19 @@ Metamaps.Import = {
cidMappings: {}, // to be filled by import_id => cid mappings cidMappings: {}, // to be filled by import_id => cid mappings
handleTSV: function (text) { handleTSV: function (text) {
var self = Metamaps.Import var self = Import
results = self.parseTabbedString(text) results = self.parseTabbedString(text)
self.handle(results) self.handle(results)
}, },
handleJSON: function (text) { handleJSON: function (text) {
var self = Metamaps.Import var self = Import
results = JSON.parse(text) results = JSON.parse(text)
self.handle(results) self.handle(results)
}, },
handle: function(results) { handle: function(results) {
var self = Metamaps.Import var self = Import
var topics = results.topics var topics = results.topics
var synapses = results.synapses var synapses = results.synapses
@ -61,7 +60,7 @@ Metamaps.Import = {
}, },
parseTabbedString: function (text) { parseTabbedString: function (text) {
var self = Metamaps.Import var self = Import
// determine line ending and split lines // determine line ending and split lines
var delim = '\n' var delim = '\n'
@ -187,7 +186,7 @@ Metamaps.Import = {
}, },
importTopics: function (parsedTopics) { importTopics: function (parsedTopics) {
var self = Metamaps.Import var self = Import
// up to 25 topics: scale 100 // up to 25 topics: scale 100
// up to 81 topics: scale 200 // up to 81 topics: scale 200
@ -220,7 +219,7 @@ Metamaps.Import = {
}, },
importSynapses: function (parsedSynapses) { importSynapses: function (parsedSynapses) {
var self = Metamaps.Import var self = Import
parsedSynapses.forEach(function (synapse) { parsedSynapses.forEach(function (synapse) {
// only createSynapseWithParameters once both topics are persisted // only createSynapseWithParameters once both topics are persisted
@ -256,7 +255,7 @@ Metamaps.Import = {
createTopicWithParameters: function (name, metacode_name, permission, desc, createTopicWithParameters: function (name, metacode_name, permission, desc,
link, xloc, yloc, import_id, opts) { link, xloc, yloc, import_id, opts) {
var self = Metamaps.Import var self = Import
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Metamaps.Map.events.editedByActiveMapper)
var metacode = Metamaps.Metacodes.where({name: metacode_name})[0] || null var metacode = Metamaps.Metacodes.where({name: metacode_name})[0] || null
if (metacode === null) { if (metacode === null) {
@ -325,3 +324,5 @@ Metamaps.Import = {
Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, true) Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, true)
} }
} }
export default Import

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

@ -1,6 +1,8 @@
window.Metamaps = window.Metamaps || {} /* global Metamaps */
Metamaps.JIT = { let panningInt
const JIT = {
events: { events: {
topicDrag: 'Metamaps:JIT:events:topicDrag', topicDrag: 'Metamaps:JIT:events:topicDrag',
newTopic: 'Metamaps:JIT:events:newTopic', newTopic: 'Metamaps:JIT:events:newTopic',
@ -18,7 +20,7 @@ Metamaps.JIT = {
* This method will bind the event handlers it is interested and initialize the class. * This method will bind the event handlers it is interested and initialize the class.
*/ */
init: function () { init: function () {
var self = Metamaps.JIT var self = JIT
$('.zoomIn').click(self.zoomIn) $('.zoomIn').click(self.zoomIn)
$('.zoomOut').click(self.zoomOut) $('.zoomOut').click(self.zoomOut)
@ -94,7 +96,7 @@ Metamaps.JIT = {
return [jitReady, synapsesToRemove] return [jitReady, synapsesToRemove]
}, },
prepareVizData: function () { prepareVizData: function () {
var self = Metamaps.JIT var self = JIT
var mapping var mapping
// reset/empty vizData // reset/empty vizData
@ -148,7 +150,7 @@ Metamaps.JIT = {
var color = Metamaps.Settings.colors.synapses.normal var color = Metamaps.Settings.colors.synapses.normal
canvas.getCtx().fillStyle = canvas.getCtx().strokeStyle = color canvas.getCtx().fillStyle = canvas.getCtx().strokeStyle = color
} }
Metamaps.JIT.renderEdgeArrows($jit.Graph.Plot.edgeHelper, adj, synapse, canvas) JIT.renderEdgeArrows($jit.Graph.Plot.edgeHelper, adj, synapse, canvas)
// check for edge label in data // check for edge label in data
var desc = synapse.get('desc') var desc = synapse.get('desc')
@ -253,7 +255,7 @@ Metamaps.JIT = {
duration: 800, duration: 800,
onComplete: function () { onComplete: function () {
Metamaps.Visualize.mGraph.busy = false Metamaps.Visualize.mGraph.busy = false
$(document).trigger(Metamaps.JIT.events.animationDone) $(document).trigger(JIT.events.animationDone)
} }
}, },
animateFDLayout: { animateFDLayout: {
@ -323,26 +325,26 @@ Metamaps.JIT = {
enable: true, enable: true,
enableForEdges: true, enableForEdges: true,
onMouseMove: function (node, eventInfo, e) { onMouseMove: function (node, eventInfo, e) {
Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e) JIT.onMouseMoveHandler(node, eventInfo, e)
// console.log('called mouse move handler') // console.log('called mouse move handler')
}, },
// Update node positions when dragged // Update node positions when dragged
onDragMove: function (node, eventInfo, e) { onDragMove: function (node, eventInfo, e) {
Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e) JIT.onDragMoveTopicHandler(node, eventInfo, e)
// console.log('called drag move handler') // console.log('called drag move handler')
}, },
onDragEnd: function (node, eventInfo, e) { onDragEnd: function (node, eventInfo, e) {
Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false) JIT.onDragEndTopicHandler(node, eventInfo, e, false)
// console.log('called drag end handler') // console.log('called drag end handler')
}, },
onDragCancel: function (node, eventInfo, e) { onDragCancel: function (node, eventInfo, e) {
Metamaps.JIT.onDragCancelHandler(node, eventInfo, e, false) JIT.onDragCancelHandler(node, eventInfo, e, false)
}, },
// Implement the same handler for touchscreens // Implement the same handler for touchscreens
onTouchStart: function (node, eventInfo, e) {}, onTouchStart: function (node, eventInfo, e) {},
// Implement the same handler for touchscreens // Implement the same handler for touchscreens
onTouchMove: function (node, eventInfo, e) { onTouchMove: function (node, eventInfo, e) {
Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e) JIT.onDragMoveTopicHandler(node, eventInfo, e)
}, },
// Implement the same handler for touchscreens // Implement the same handler for touchscreens
onTouchEnd: function (node, eventInfo, e) {}, onTouchEnd: function (node, eventInfo, e) {},
@ -361,7 +363,7 @@ Metamaps.JIT = {
var bS = Metamaps.Mouse.boxStartCoordinates var bS = Metamaps.Mouse.boxStartCoordinates
var bE = Metamaps.Mouse.boxEndCoordinates var bE = Metamaps.Mouse.boxEndCoordinates
if (Math.abs(bS.x - bE.x) > 20 && Math.abs(bS.y - bE.y) > 20) { if (Math.abs(bS.x - bE.x) > 20 && Math.abs(bS.y - bE.y) > 20) {
Metamaps.JIT.zoomToBox(e) JIT.zoomToBox(e)
return return
} else { } else {
Metamaps.Mouse.boxStartCoordinates = null Metamaps.Mouse.boxStartCoordinates = null
@ -373,7 +375,7 @@ Metamaps.JIT = {
if (e.shiftKey) { if (e.shiftKey) {
Metamaps.Visualize.mGraph.busy = false Metamaps.Visualize.mGraph.busy = false
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos() Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos()
Metamaps.JIT.selectWithBox(e) JIT.selectWithBox(e)
// console.log('called select with box') // console.log('called select with box')
return return
} }
@ -383,13 +385,13 @@ Metamaps.JIT = {
// clicking on a edge, node, or clicking on blank part of canvas? // clicking on a edge, node, or clicking on blank part of canvas?
if (node.nodeFrom) { if (node.nodeFrom) {
Metamaps.JIT.selectEdgeOnClickHandler(node, e) JIT.selectEdgeOnClickHandler(node, e)
// console.log('called selectEdgeOnClickHandler') // console.log('called selectEdgeOnClickHandler')
} else if (node && !node.nodeFrom) { } else if (node && !node.nodeFrom) {
Metamaps.JIT.selectNodeOnClickHandler(node, e) JIT.selectNodeOnClickHandler(node, e)
// console.log('called selectNodeOnClickHandler') // console.log('called selectNodeOnClickHandler')
} else { } else {
Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e) JIT.canvasClickHandler(eventInfo.getPos(), e)
// console.log('called canvasClickHandler') // console.log('called canvasClickHandler')
} // if } // if
}, },
@ -401,7 +403,7 @@ Metamaps.JIT = {
if (Metamaps.Mouse.boxStartCoordinates) { if (Metamaps.Mouse.boxStartCoordinates) {
Metamaps.Visualize.mGraph.busy = false Metamaps.Visualize.mGraph.busy = false
Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos() Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos()
Metamaps.JIT.selectWithBox(e) JIT.selectWithBox(e)
return return
} }
@ -409,9 +411,9 @@ Metamaps.JIT = {
// clicking on a edge, node, or clicking on blank part of canvas? // clicking on a edge, node, or clicking on blank part of canvas?
if (node.nodeFrom) { if (node.nodeFrom) {
Metamaps.JIT.selectEdgeOnRightClickHandler(node, e) JIT.selectEdgeOnRightClickHandler(node, e)
} else if (node && !node.nodeFrom) { } else if (node && !node.nodeFrom) {
Metamaps.JIT.selectNodeOnRightClickHandler(node, e) JIT.selectNodeOnRightClickHandler(node, e)
} else { } else {
// console.log('right clicked on open space') // console.log('right clicked on open space')
} }
@ -455,7 +457,7 @@ Metamaps.JIT = {
// if the topic has a link, draw a small image to indicate that // if the topic has a link, draw a small image to indicate that
var hasLink = topic && topic.get('link') !== '' && topic.get('link') !== null var hasLink = topic && topic.get('link') !== '' && topic.get('link') !== null
var linkImage = Metamaps.JIT.topicLinkImage var linkImage = JIT.topicLinkImage
var linkImageLoaded = linkImage.complete || var linkImageLoaded = linkImage.complete ||
(typeof linkImage.naturalWidth !== 'undefined' && (typeof linkImage.naturalWidth !== 'undefined' &&
linkImage.naturalWidth !== 0) linkImage.naturalWidth !== 0)
@ -465,7 +467,7 @@ Metamaps.JIT = {
// if the topic has a desc, draw a small image to indicate that // if the topic has a desc, draw a small image to indicate that
var hasDesc = topic && topic.get('desc') !== '' && topic.get('desc') !== null var hasDesc = topic && topic.get('desc') !== '' && topic.get('desc') !== null
var descImage = Metamaps.JIT.topicDescImage var descImage = JIT.topicDescImage
var descImageLoaded = descImage.complete || var descImageLoaded = descImage.complete ||
(typeof descImage.naturalWidth !== 'undefined' && (typeof descImage.naturalWidth !== 'undefined' &&
descImage.naturalWidth !== 0) descImage.naturalWidth !== 0)
@ -500,7 +502,7 @@ Metamaps.JIT = {
edgeSettings: { edgeSettings: {
'customEdge': { 'customEdge': {
'render': function (adj, canvas) { 'render': function (adj, canvas) {
Metamaps.JIT.edgeRender(adj, canvas) JIT.edgeRender(adj, canvas)
}, },
'contains': function (adj, pos) { 'contains': function (adj, pos) {
var from = adj.nodeFrom.pos.getc(), var from = adj.nodeFrom.pos.getc(),
@ -667,7 +669,7 @@ Metamaps.JIT = {
Metamaps.Visualize.mGraph.plot() Metamaps.Visualize.mGraph.plot()
}, // onMouseLeave }, // onMouseLeave
onMouseMoveHandler: function (node, eventInfo, e) { onMouseMoveHandler: function (node, eventInfo, e) {
var self = Metamaps.JIT var self = JIT
if (Metamaps.Visualize.mGraph.busy) return if (Metamaps.Visualize.mGraph.busy) return
@ -721,7 +723,7 @@ Metamaps.JIT = {
Metamaps.Control.deselectAllNodes() Metamaps.Control.deselectAllNodes()
}, // escKeyHandler }, // escKeyHandler
onDragMoveTopicHandler: function (node, eventInfo, e) { onDragMoveTopicHandler: function (node, eventInfo, e) {
var self = Metamaps.JIT var self = JIT
// this is used to send nodes that are moving to // this is used to send nodes that are moving to
// other realtime collaborators on the same map // other realtime collaborators on the same map
@ -751,7 +753,7 @@ Metamaps.JIT = {
// to be the same as on other collaborators // to be the same as on other collaborators
// maps // maps
positionsToSend[topic.id] = pos positionsToSend[topic.id] = pos
$(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]) $(document).trigger(JIT.events.topicDrag, [positionsToSend])
} }
} else { } else {
var len = Metamaps.Selected.Nodes.length var len = Metamaps.Selected.Nodes.length
@ -782,7 +784,7 @@ Metamaps.JIT = {
} // for } // for
if (Metamaps.Active.Map) { if (Metamaps.Active.Map) {
$(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]) $(document).trigger(JIT.events.topicDrag, [positionsToSend])
} }
} // if } // if
@ -1201,7 +1203,7 @@ Metamaps.JIT = {
selectNodeOnClickHandler: function (node, e) { selectNodeOnClickHandler: function (node, e) {
if (Metamaps.Visualize.mGraph.busy) return if (Metamaps.Visualize.mGraph.busy) return
var self = Metamaps.JIT var self = JIT
// catch right click on mac, which is often like ctrl+click // catch right click on mac, which is often like ctrl+click
if (navigator.platform.indexOf('Mac') != -1 && e.ctrlKey) { if (navigator.platform.indexOf('Mac') != -1 && e.ctrlKey) {
@ -1222,7 +1224,7 @@ Metamaps.JIT = {
} else { } else {
// wait a certain length of time, then check again, then run this code // wait a certain length of time, then check again, then run this code
setTimeout(function () { setTimeout(function () {
if (!Metamaps.JIT.nodeWasDoubleClicked()) { if (!JIT.nodeWasDoubleClicked()) {
var nodeAlreadySelected = node.selected var nodeAlreadySelected = node.selected
if (!e.shiftKey) { if (!e.shiftKey) {
@ -1403,7 +1405,7 @@ Metamaps.JIT = {
var fetch_sent = false var fetch_sent = false
$('.rc-siblings').hover(function () { $('.rc-siblings').hover(function () {
if (!fetch_sent) { if (!fetch_sent) {
Metamaps.JIT.populateRightClickSiblings(node) JIT.populateRightClickSiblings(node)
fetch_sent = true fetch_sent = true
} }
}) })
@ -1414,7 +1416,7 @@ Metamaps.JIT = {
}) })
}, // selectNodeOnRightClickHandler, }, // selectNodeOnRightClickHandler,
populateRightClickSiblings: function (node) { populateRightClickSiblings: function (node) {
var self = Metamaps.JIT var self = JIT
// depending on how many topics are selected, do different things // depending on how many topics are selected, do different things
@ -1456,7 +1458,7 @@ Metamaps.JIT = {
selectEdgeOnClickHandler: function (adj, e) { selectEdgeOnClickHandler: function (adj, e) {
if (Metamaps.Visualize.mGraph.busy) return if (Metamaps.Visualize.mGraph.busy) return
var self = Metamaps.JIT var self = JIT
// catch right click on mac, which is often like ctrl+click // catch right click on mac, which is often like ctrl+click
if (navigator.platform.indexOf('Mac') != -1 && e.ctrlKey) { if (navigator.platform.indexOf('Mac') != -1 && e.ctrlKey) {
@ -1471,7 +1473,7 @@ Metamaps.JIT = {
} else { } else {
// wait a certain length of time, then check again, then run this code // wait a certain length of time, then check again, then run this code
setTimeout(function () { setTimeout(function () {
if (!Metamaps.JIT.nodeWasDoubleClicked()) { if (!JIT.nodeWasDoubleClicked()) {
var edgeAlreadySelected = Metamaps.Selected.Edges.indexOf(adj) !== -1 var edgeAlreadySelected = Metamaps.Selected.Edges.indexOf(adj) !== -1
if (!e.shiftKey) { if (!e.shiftKey) {
@ -1611,17 +1613,17 @@ Metamaps.JIT = {
easing = 1 // frictional value easing = 1 // frictional value
easing = 1 easing = 1
window.clearInterval(Metamaps.panningInt) window.clearInterval(panningInt)
Metamaps.panningInt = setInterval(function () { panningInt = setInterval(function () {
myTimer() myTimer()
}, 1) }, 1)
function myTimer () { function myTimer () {
Metamaps.Visualize.mGraph.canvas.translate(x_velocity * easing * 1 / sx, y_velocity * easing * 1 / sy) Metamaps.Visualize.mGraph.canvas.translate(x_velocity * easing * 1 / sx, y_velocity * easing * 1 / sy)
$(document).trigger(Metamaps.JIT.events.pan) $(document).trigger(JIT.events.pan)
easing = easing * 0.75 easing = easing * 0.75
if (easing < 0.1) window.clearInterval(Metamaps.panningInt) if (easing < 0.1) window.clearInterval(panningInt)
} }
}, // SmoothPanning }, // SmoothPanning
renderMidArrow: function (from, to, dim, swap, canvas, placement, newSynapse) { renderMidArrow: function (from, to, dim, swap, canvas, placement, newSynapse) {
@ -1666,7 +1668,7 @@ Metamaps.JIT = {
ctx.stroke() ctx.stroke()
}, // renderMidArrow }, // renderMidArrow
renderEdgeArrows: function (edgeHelper, adj, synapse, canvas) { renderEdgeArrows: function (edgeHelper, adj, synapse, canvas) {
var self = Metamaps.JIT var self = JIT
var directionCat = synapse.get('category') var directionCat = synapse.get('category')
var direction = synapse.getDirection() var direction = synapse.getDirection()
@ -1720,11 +1722,11 @@ Metamaps.JIT = {
}, // renderEdgeArrows }, // renderEdgeArrows
zoomIn: function (event) { zoomIn: function (event) {
Metamaps.Visualize.mGraph.canvas.scale(1.25, 1.25) Metamaps.Visualize.mGraph.canvas.scale(1.25, 1.25)
$(document).trigger(Metamaps.JIT.events.zoom, [event]) $(document).trigger(JIT.events.zoom, [event])
}, },
zoomOut: function (event) { zoomOut: function (event) {
Metamaps.Visualize.mGraph.canvas.scale(0.8, 0.8) Metamaps.Visualize.mGraph.canvas.scale(0.8, 0.8)
$(document).trigger(Metamaps.JIT.events.zoom, [event]) $(document).trigger(JIT.events.zoom, [event])
}, },
centerMap: function (canvas) { centerMap: function (canvas) {
var offsetScale = canvas.scaleOffsetX var offsetScale = canvas.scaleOffsetX
@ -1743,7 +1745,7 @@ Metamaps.JIT = {
eY = Metamaps.Mouse.boxEndCoordinates.y eY = Metamaps.Mouse.boxEndCoordinates.y
var canvas = Metamaps.Visualize.mGraph.canvas var canvas = Metamaps.Visualize.mGraph.canvas
Metamaps.JIT.centerMap(canvas) JIT.centerMap(canvas)
var height = $(document).height(), var height = $(document).height(),
width = $(document).width() width = $(document).width()
@ -1770,14 +1772,14 @@ Metamaps.JIT = {
var cogY = (sY + eY) / 2 var cogY = (sY + eY) / 2
canvas.translate(-1 * cogX, -1 * cogY) canvas.translate(-1 * cogX, -1 * cogY)
$(document).trigger(Metamaps.JIT.events.zoom, [event]) $(document).trigger(JIT.events.zoom, [event])
Metamaps.Mouse.boxStartCoordinates = false Metamaps.Mouse.boxStartCoordinates = false
Metamaps.Mouse.boxEndCoordinates = false Metamaps.Mouse.boxEndCoordinates = false
Metamaps.Visualize.mGraph.plot() Metamaps.Visualize.mGraph.plot()
}, },
zoomExtents: function (event, canvas, denySelected) { zoomExtents: function (event, canvas, denySelected) {
Metamaps.JIT.centerMap(canvas) JIT.centerMap(canvas)
var height = canvas.getSize().height, var height = canvas.getSize().height,
width = canvas.getSize().width, width = canvas.getSize().width,
maxX, minX, maxY, minY, counter = 0 maxX, minX, maxY, minY, counter = 0
@ -1847,7 +1849,7 @@ Metamaps.JIT = {
canvas.scale(scaleMultiplier, scaleMultiplier) canvas.scale(scaleMultiplier, scaleMultiplier)
} }
$(document).trigger(Metamaps.JIT.events.zoom, [event]) $(document).trigger(JIT.events.zoom, [event])
} }
else if (nodes.length == 1) { else if (nodes.length == 1) {
nodes.forEach(function (n) { nodes.forEach(function (n) {
@ -1855,8 +1857,10 @@ Metamaps.JIT = {
y = n.pos.y y = n.pos.y
canvas.translate(-1 * x, -1 * y) canvas.translate(-1 * x, -1 * y)
$(document).trigger(Metamaps.JIT.events.zoom, [event]) $(document).trigger(JIT.events.zoom, [event])
}) })
} }
} }
} }
export default JIT

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -10,7 +9,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.JIT * - Metamaps.JIT
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.Listeners = { const Listeners = {
init: function () { init: function () {
var self = this var self = this
$(document).on('keydown', function (e) { $(document).on('keydown', function (e) {
@ -120,4 +119,6 @@ Metamaps.Listeners = {
Metamaps.Topic.fetchRelatives(nodes) Metamaps.Topic.fetchRelatives(nodes)
} }
} }
}; // end Metamaps.Listeners }
export default Listeners

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

@ -1,4 +1,5 @@
window.Metamaps = window.Metamaps || {} window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -753,3 +754,5 @@ Metamaps.Map.InfoBox = {
} }
} }
}; // end Metamaps.Map.InfoBox }; // end Metamaps.Map.InfoBox
export default Metamaps.Map

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

@ -1,21 +1,21 @@
window.Metamaps = window.Metamaps || {} /* global Metamaps */
/* global Metamaps, $ */
/* /*
* Metamaps.Mapper.js.erb * Dependencies:
* * - Metamaps.Backbone
* Dependencies: none!
*/ */
const Mapper = {
Metamaps.Mapper = {
// this function is to retrieve a mapper JSON object from the database // this function is to retrieve a mapper JSON object from the database
// @param id = the id of the mapper to retrieve // @param id = the id of the mapper to retrieve
get: function (id, callback) { get: function (id, callback) {
return $.ajax({ return fetch(`/users/${id}.json`, {
url: '/users/' + id + '.json', }).then(response => {
success: function (data) { if (!response.ok) throw response
callback(new Metamaps.Backbone.Mapper(data)) return response.json()
} }).then(payload => {
callback(new Metamaps.Backbone.Mapper(payload))
}) })
} }
}; // end Metamaps.Mapper }
export default Mapper

7
frontend/src/Metamaps/Mobile.js
View file

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -9,7 +8,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Map * - Metamaps.Map
*/ */
Metamaps.Mobile = { const Mobile = {
init: function () { init: function () {
var self = Metamaps.Mobile var self = Metamaps.Mobile
@ -23,7 +22,7 @@ Metamaps.Mobile = {
$('#header_content').width($(document).width() - 70) $('#header_content').width($(document).width() - 70)
}, },
liClick: function () { liClick: function () {
var self = Metamaps.Mobile var self = Mobile
$('#header_content').html($(this).text()) $('#header_content').html($(this).text())
self.toggleMenu() self.toggleMenu()
}, },
@ -36,3 +35,5 @@ Metamaps.Mobile = {
} }
} }
} }
export default Mobile

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -7,8 +6,7 @@ window.Metamaps = window.Metamaps || {}
* Dependencies: * Dependencies:
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.Organize = { const Organize = {
init: function () {},
arrange: function (layout, centerNode) { arrange: function (layout, centerNode) {
// first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin // first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin
if (layout == 'grid') { if (layout == 'grid') {
@ -115,4 +113,6 @@ Metamaps.Organize = {
var newOriginY = (lowY + highY) / 2 var newOriginY = (lowY + highY) / 2
} else alert('please call function with a valid layout dammit!') } else alert('please call function with a valid layout dammit!')
} }
}; // end Metamaps.Organize }
export default Organize

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -9,12 +8,12 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.AutoLayout * - Metamaps.AutoLayout
*/ */
Metamaps.PasteInput = { const PasteInput = {
// thanks to https://github.com/kevva/url-regex // thanks to https://github.com/kevva/url-regex
URL_REGEX: new RegExp('^(?:(?:(?:[a-z]+:)?//)|www\.)(?:\S+(?::\S*)?@)?(?:localhost|(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])(?:\.(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){3}|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#][^\s"]*)?$'), URL_REGEX: new RegExp('^(?:(?:(?:[a-z]+:)?//)|www\.)(?:\S+(?::\S*)?@)?(?:localhost|(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])(?:\.(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){3}|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#][^\s"]*)?$'),
init: function () { init: function () {
var self = Metamaps.PasteInput var self = PasteInput
// intercept dragged files // intercept dragged files
// see http://stackoverflow.com/questions/6756583 // see http://stackoverflow.com/questions/6756583
@ -59,7 +58,7 @@ Metamaps.PasteInput = {
}, },
handle: function(text, coords) { handle: function(text, coords) {
var self = Metamaps.PasteInput var self = PasteInput
if (text.match(self.URL_REGEX)) { if (text.match(self.URL_REGEX)) {
self.handleURL(text, coords) self.handleURL(text, coords)
@ -109,3 +108,5 @@ Metamaps.PasteInput = {
Metamaps.Import.handleTSV(text) Metamaps.Import.handleTSV(text)
} }
} }
export default PasteInput

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

@ -1,7 +1,7 @@
window.Metamaps = window.Metamaps || {}
import Maps from '../components/Maps' import Maps from '../components/Maps'
Metamaps.ReactComponents = { const ReactComponents = {
Maps Maps
} }
export default ReactComponents

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

@ -1,5 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -26,7 +24,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.Realtime = { const Realtime = {
videoId: 'video-wrapper', videoId: 'video-wrapper',
socket: null, socket: null,
webrtc: null, webrtc: null,
@ -39,7 +37,7 @@ Metamaps.Realtime = {
inConversation: false, inConversation: false,
localVideo: null, localVideo: null,
init: function () { init: function () {
var self = Metamaps.Realtime var self = Realtime
self.addJuntoListeners() self.addJuntoListeners()
@ -102,7 +100,7 @@ Metamaps.Realtime = {
} // if Metamaps.Active.Mapper } // if Metamaps.Active.Mapper
}, },
addJuntoListeners: function () { addJuntoListeners: function () {
var self = Metamaps.Realtime var self = Realtime
$(document).on(Metamaps.Views.chatView.events.openTray, function () { $(document).on(Metamaps.Views.chatView.events.openTray, function () {
$('.main').addClass('compressed') $('.main').addClass('compressed')
@ -128,7 +126,7 @@ Metamaps.Realtime = {
}) })
}, },
handleVideoAdded: function (v, id) { handleVideoAdded: function (v, id) {
var self = Metamaps.Realtime var self = Realtime
self.positionVideos() self.positionVideos()
v.setParent($('#wrapper')) v.setParent($('#wrapper'))
v.$container.find('.video-cutoff').css({ v.$container.find('.video-cutoff').css({
@ -137,7 +135,7 @@ Metamaps.Realtime = {
$('#wrapper').append(v.$container) $('#wrapper').append(v.$container)
}, },
positionVideos: function () { positionVideos: function () {
var self = Metamaps.Realtime var self = Realtime
var videoIds = Object.keys(self.room.videos) var videoIds = Object.keys(self.room.videos)
var numOfVideos = videoIds.length var numOfVideos = videoIds.length
var numOfVideosToPosition = _.filter(videoIds, function (id) { var numOfVideosToPosition = _.filter(videoIds, function (id) {
@ -169,7 +167,7 @@ Metamaps.Realtime = {
} }
// do self first // do self first
var myVideo = Metamaps.Realtime.localVideo.view var myVideo = Realtime.localVideo.view
if (!myVideo.manuallyPositioned) { if (!myVideo.manuallyPositioned) {
myVideo.$container.css({ myVideo.$container.css({
top: yFormula() + 'px', top: yFormula() + 'px',
@ -187,7 +185,7 @@ Metamaps.Realtime = {
}) })
}, },
startActiveMap: function () { startActiveMap: function () {
var self = Metamaps.Realtime var self = Realtime
if (Metamaps.Active.Map && Metamaps.Active.Mapper) { if (Metamaps.Active.Map && Metamaps.Active.Mapper) {
if (Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)) { if (Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper)) {
@ -200,7 +198,7 @@ Metamaps.Realtime = {
} }
}, },
endActiveMap: function () { endActiveMap: function () {
var self = Metamaps.Realtime var self = Realtime
$(document).off('.map') $(document).off('.map')
self.socket.removeAllListeners() self.socket.removeAllListeners()
@ -215,7 +213,7 @@ Metamaps.Realtime = {
} }
}, },
turnOn: function (notify) { turnOn: function (notify) {
var self = Metamaps.Realtime var self = Realtime
if (notify) self.sendRealtimeOn() if (notify) self.sendRealtimeOn()
self.status = true self.status = true
@ -238,11 +236,11 @@ Metamaps.Realtime = {
self.room.chat.addParticipant(self.activeMapper) self.room.chat.addParticipant(self.activeMapper)
}, },
checkForACallToJoin: function () { checkForACallToJoin: function () {
var self = Metamaps.Realtime var self = Realtime
self.socket.emit('checkForCall', { room: self.room.room, mapid: Metamaps.Active.Map.id }) self.socket.emit('checkForCall', { room: self.room.room, mapid: Metamaps.Active.Map.id })
}, },
promptToJoin: function () { promptToJoin: function () {
var self = Metamaps.Realtime var self = Realtime
var notifyText = "There's a conversation happening, want to join?" var notifyText = "There's a conversation happening, want to join?"
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>' notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
@ -251,7 +249,7 @@ Metamaps.Realtime = {
self.room.conversationInProgress() self.room.conversationInProgress()
}, },
conversationHasBegun: function () { conversationHasBegun: function () {
var self = Metamaps.Realtime var self = Realtime
if (self.inConversation) return if (self.inConversation) return
var notifyText = "There's a conversation starting, want to join?" var notifyText = "There's a conversation starting, want to join?"
@ -261,7 +259,7 @@ Metamaps.Realtime = {
self.room.conversationInProgress() self.room.conversationInProgress()
}, },
countOthersInConversation: function () { countOthersInConversation: function () {
var self = Metamaps.Realtime var self = Realtime
var count = 0 var count = 0
for (var key in self.mappersOnMap) { for (var key in self.mappersOnMap) {
@ -270,7 +268,7 @@ Metamaps.Realtime = {
return count return count
}, },
mapperJoinedCall: function (id) { mapperJoinedCall: function (id) {
var self = Metamaps.Realtime var self = Realtime
var mapper = self.mappersOnMap[id] var mapper = self.mappersOnMap[id]
if (mapper) { if (mapper) {
@ -285,7 +283,7 @@ Metamaps.Realtime = {
} }
}, },
mapperLeftCall: function (id) { mapperLeftCall: function (id) {
var self = Metamaps.Realtime var self = Realtime
var mapper = self.mappersOnMap[id] var mapper = self.mappersOnMap[id]
if (mapper) { if (mapper) {
@ -305,7 +303,7 @@ Metamaps.Realtime = {
} }
}, },
callEnded: function () { callEnded: function () {
var self = Metamaps.Realtime var self = Realtime
self.room.conversationEnding() self.room.conversationEnding()
self.room.leaveVideoOnly() self.room.leaveVideoOnly()
@ -324,7 +322,7 @@ Metamaps.Realtime = {
self.webrtc.webrtc.localStreams = [] self.webrtc.webrtc.localStreams = []
}, },
invitedToCall: function (inviter) { invitedToCall: function (inviter) {
var self = Metamaps.Realtime var self = Realtime
self.room.chat.sound.stop('sessioninvite') self.room.chat.sound.stop('sessioninvite')
self.room.chat.sound.play('sessioninvite') self.room.chat.sound.play('sessioninvite')
@ -337,7 +335,7 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.notifyUser(notifyText, true) Metamaps.GlobalUI.notifyUser(notifyText, true)
}, },
invitedToJoin: function (inviter) { invitedToJoin: function (inviter) {
var self = Metamaps.Realtime var self = Realtime
self.room.chat.sound.stop('sessioninvite') self.room.chat.sound.stop('sessioninvite')
self.room.chat.sound.play('sessioninvite') self.room.chat.sound.play('sessioninvite')
@ -349,7 +347,7 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.notifyUser(notifyText, true) Metamaps.GlobalUI.notifyUser(notifyText, true)
}, },
acceptCall: function (userid) { acceptCall: function (userid) {
var self = Metamaps.Realtime var self = Realtime
self.room.chat.sound.stop('sessioninvite') self.room.chat.sound.stop('sessioninvite')
self.socket.emit('callAccepted', { self.socket.emit('callAccepted', {
mapid: Metamaps.Active.Map.id, mapid: Metamaps.Active.Map.id,
@ -361,7 +359,7 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.clearNotify() Metamaps.GlobalUI.clearNotify()
}, },
denyCall: function (userid) { denyCall: function (userid) {
var self = Metamaps.Realtime var self = Realtime
self.room.chat.sound.stop('sessioninvite') self.room.chat.sound.stop('sessioninvite')
self.socket.emit('callDenied', { self.socket.emit('callDenied', {
mapid: Metamaps.Active.Map.id, mapid: Metamaps.Active.Map.id,
@ -371,7 +369,7 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.clearNotify() Metamaps.GlobalUI.clearNotify()
}, },
denyInvite: function (userid) { denyInvite: function (userid) {
var self = Metamaps.Realtime var self = Realtime
self.room.chat.sound.stop('sessioninvite') self.room.chat.sound.stop('sessioninvite')
self.socket.emit('inviteDenied', { self.socket.emit('inviteDenied', {
mapid: Metamaps.Active.Map.id, mapid: Metamaps.Active.Map.id,
@ -381,7 +379,7 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.clearNotify() Metamaps.GlobalUI.clearNotify()
}, },
inviteACall: function (userid) { inviteACall: function (userid) {
var self = Metamaps.Realtime var self = Realtime
self.socket.emit('inviteACall', { self.socket.emit('inviteACall', {
mapid: Metamaps.Active.Map.id, mapid: Metamaps.Active.Map.id,
inviter: Metamaps.Active.Mapper.id, inviter: Metamaps.Active.Mapper.id,
@ -391,7 +389,7 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.clearNotify() Metamaps.GlobalUI.clearNotify()
}, },
inviteToJoin: function (userid) { inviteToJoin: function (userid) {
var self = Metamaps.Realtime var self = Realtime
self.socket.emit('inviteToJoin', { self.socket.emit('inviteToJoin', {
mapid: Metamaps.Active.Map.id, mapid: Metamaps.Active.Map.id,
inviter: Metamaps.Active.Mapper.id, inviter: Metamaps.Active.Mapper.id,
@ -400,7 +398,7 @@ Metamaps.Realtime = {
self.room.chat.invitationPending(userid) self.room.chat.invitationPending(userid)
}, },
callAccepted: function (userid) { callAccepted: function (userid) {
var self = Metamaps.Realtime var self = Realtime
var username = self.mappersOnMap[userid].name var username = self.mappersOnMap[userid].name
Metamaps.GlobalUI.notifyUser('Conversation starting...') Metamaps.GlobalUI.notifyUser('Conversation starting...')
@ -408,21 +406,21 @@ Metamaps.Realtime = {
self.room.chat.invitationAnswered(userid) self.room.chat.invitationAnswered(userid)
}, },
callDenied: function (userid) { callDenied: function (userid) {
var self = Metamaps.Realtime var self = Realtime
var username = self.mappersOnMap[userid].name var username = self.mappersOnMap[userid].name
Metamaps.GlobalUI.notifyUser(username + " didn't accept your invitation") Metamaps.GlobalUI.notifyUser(username + " didn't accept your invitation")
self.room.chat.invitationAnswered(userid) self.room.chat.invitationAnswered(userid)
}, },
inviteDenied: function (userid) { inviteDenied: function (userid) {
var self = Metamaps.Realtime var self = Realtime
var username = self.mappersOnMap[userid].name var username = self.mappersOnMap[userid].name
Metamaps.GlobalUI.notifyUser(username + " didn't accept your invitation") Metamaps.GlobalUI.notifyUser(username + " didn't accept your invitation")
self.room.chat.invitationAnswered(userid) self.room.chat.invitationAnswered(userid)
}, },
joinCall: function () { joinCall: function () {
var self = Metamaps.Realtime var self = Realtime
self.webrtc.off('readyToCall') self.webrtc.off('readyToCall')
self.webrtc.once('readyToCall', function () { self.webrtc.once('readyToCall', function () {
@ -446,7 +444,7 @@ Metamaps.Realtime = {
self.room.chat.mapperJoinedCall(Metamaps.Active.Mapper.id) self.room.chat.mapperJoinedCall(Metamaps.Active.Mapper.id)
}, },
leaveCall: function () { leaveCall: function () {
var self = Metamaps.Realtime var self = Realtime
self.socket.emit('mapperLeftCall', { self.socket.emit('mapperLeftCall', {
mapid: Metamaps.Active.Map.id, mapid: Metamaps.Active.Map.id,
@ -465,7 +463,7 @@ Metamaps.Realtime = {
} }
}, },
turnOff: function (silent) { turnOff: function (silent) {
var self = Metamaps.Realtime var self = Realtime
if (self.status) { if (self.status) {
if (!silent) self.sendRealtimeOff() if (!silent) self.sendRealtimeOff()
@ -479,8 +477,8 @@ Metamaps.Realtime = {
} }
}, },
setupSocket: function () { setupSocket: function () {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
var myId = Metamaps.Active.Mapper.id var myId = Metamaps.Active.Mapper.id
socket.emit('newMapperNotify', { socket.emit('newMapperNotify', {
@ -614,14 +612,14 @@ Metamaps.Realtime = {
$(document).on(Metamaps.Views.room.events.newMessage + '.map', sendNewMessage) $(document).on(Metamaps.Views.room.events.newMessage + '.map', sendNewMessage)
}, },
attachMapListener: function () { attachMapListener: function () {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
socket.on('mapChangeFromServer', self.mapChange) socket.on('mapChangeFromServer', self.mapChange)
}, },
sendRealtimeOn: function () { sendRealtimeOn: function () {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
// send this new mapper back your details, and the awareness that you're online // send this new mapper back your details, and the awareness that you're online
var update = { var update = {
@ -632,8 +630,8 @@ Metamaps.Realtime = {
socket.emit('notifyStartRealtime', update) socket.emit('notifyStartRealtime', update)
}, },
sendRealtimeOff: function () { sendRealtimeOff: function () {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
// send this new mapper back your details, and the awareness that you're online // send this new mapper back your details, and the awareness that you're online
var update = { var update = {
@ -644,8 +642,8 @@ Metamaps.Realtime = {
socket.emit('notifyStopRealtime', update) socket.emit('notifyStopRealtime', update)
}, },
updateMapperList: function (data) { updateMapperList: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
// data.userid // data.userid
// data.username // data.username
@ -675,8 +673,8 @@ Metamaps.Realtime = {
} }
}, },
newPeerOnMap: function (data) { newPeerOnMap: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
// data.userid // data.userid
// data.username // data.username
@ -743,8 +741,8 @@ Metamaps.Realtime = {
}) })
}, },
lostPeerOnMap: function (data) { lostPeerOnMap: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
// data.userid // data.userid
// data.username // data.username
@ -763,8 +761,8 @@ Metamaps.Realtime = {
} }
}, },
newCollaborator: function (data) { newCollaborator: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
// data.userid // data.userid
// data.username // data.username
@ -777,8 +775,8 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime') Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime')
}, },
lostCollaborator: function (data) { lostCollaborator: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
// data.userid // data.userid
// data.username // data.username
@ -791,15 +789,15 @@ Metamaps.Realtime = {
Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime') Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime')
}, },
updatePeerCoords: function (data) { updatePeerCoords: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
self.mappersOnMap[data.userid].coords = {x: data.usercoords.x,y: data.usercoords.y} self.mappersOnMap[data.userid].coords = {x: data.usercoords.x,y: data.usercoords.y}
self.positionPeerIcon(data.userid) self.positionPeerIcon(data.userid)
}, },
positionPeerIcons: function () { positionPeerIcons: function () {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
if (self.status) { // if i have realtime turned on if (self.status) { // if i have realtime turned on
for (var key in self.mappersOnMap) { for (var key in self.mappersOnMap) {
@ -811,8 +809,8 @@ Metamaps.Realtime = {
} }
}, },
positionPeerIcon: function (id) { positionPeerIcon: function (id) {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
var boundary = self.chatOpen ? '#wrapper' : document var boundary = self.chatOpen ? '#wrapper' : document
var mapper = self.mappersOnMap[id] var mapper = self.mappersOnMap[id]
@ -848,8 +846,8 @@ Metamaps.Realtime = {
} }
}, },
limitPixelsToScreen: function (pixels) { limitPixelsToScreen: function (pixels) {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
var boundary = self.chatOpen ? '#wrapper' : document var boundary = self.chatOpen ? '#wrapper' : document
var xLimit, yLimit var xLimit, yLimit
@ -866,8 +864,8 @@ Metamaps.Realtime = {
return {x: xLimit,y: yLimit} return {x: xLimit,y: yLimit}
}, },
sendCoords: function (coords) { sendCoords: function (coords) {
var self = Metamaps.Realtime var self = Realtime
var socket = Metamaps.Realtime.socket var socket = Realtime.socket
var map = Metamaps.Active.Map var map = Metamaps.Active.Map
var mapper = Metamaps.Active.Mapper var mapper = Metamaps.Active.Mapper
@ -882,7 +880,7 @@ Metamaps.Realtime = {
} }
}, },
sendTopicDrag: function (positions) { sendTopicDrag: function (positions) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map && self.status) { if (Metamaps.Active.Map && self.status) {
@ -891,7 +889,7 @@ Metamaps.Realtime = {
} }
}, },
topicDrag: function (positions) { topicDrag: function (positions) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
var topic var topic
@ -907,7 +905,7 @@ Metamaps.Realtime = {
} }
}, },
sendTopicChange: function (topic) { sendTopicChange: function (topic) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
var data = { var data = {
@ -929,7 +927,7 @@ Metamaps.Realtime = {
} }
}, },
sendSynapseChange: function (synapse) { sendSynapseChange: function (synapse) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
var data = { var data = {
@ -952,7 +950,7 @@ Metamaps.Realtime = {
} }
}, },
sendMapChange: function (map) { sendMapChange: function (map) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
var data = { var data = {
@ -989,7 +987,7 @@ Metamaps.Realtime = {
}, },
// newMessage // newMessage
sendNewMessage: function (data) { sendNewMessage: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
var message = data.attributes var message = data.attributes
@ -997,14 +995,14 @@ Metamaps.Realtime = {
socket.emit('newMessage', message) socket.emit('newMessage', message)
}, },
newMessage: function (data) { newMessage: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
self.room.addMessages(new Metamaps.Backbone.MessageCollection(data)) self.room.addMessages(new Metamaps.Backbone.MessageCollection(data))
}, },
// newTopic // newTopic
sendNewTopic: function (data) { sendNewTopic: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map && self.status) { if (Metamaps.Active.Map && self.status) {
@ -1016,7 +1014,7 @@ Metamaps.Realtime = {
newTopic: function (data) { newTopic: function (data) {
var topic, mapping, mapper, mapperCallback, cancel var topic, mapping, mapper, mapperCallback, cancel
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (!self.status) return if (!self.status) return
@ -1063,7 +1061,7 @@ Metamaps.Realtime = {
}, },
// removeTopic // removeTopic
sendDeleteTopic: function (data) { sendDeleteTopic: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Metamaps.Active.Map) {
@ -1072,7 +1070,7 @@ Metamaps.Realtime = {
}, },
// removeTopic // removeTopic
sendRemoveTopic: function (data) { sendRemoveTopic: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Metamaps.Active.Map) {
@ -1081,7 +1079,7 @@ Metamaps.Realtime = {
} }
}, },
removeTopic: function (data) { removeTopic: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (!self.status) return if (!self.status) return
@ -1097,7 +1095,7 @@ Metamaps.Realtime = {
}, },
// newSynapse // newSynapse
sendNewSynapse: function (data) { sendNewSynapse: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Metamaps.Active.Map) {
@ -1109,7 +1107,7 @@ Metamaps.Realtime = {
newSynapse: function (data) { newSynapse: function (data) {
var topic1, topic2, node1, node2, synapse, mapping, cancel var topic1, topic2, node1, node2, synapse, mapping, cancel
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (!self.status) return if (!self.status) return
@ -1160,7 +1158,7 @@ Metamaps.Realtime = {
}, },
// deleteSynapse // deleteSynapse
sendDeleteSynapse: function (data) { sendDeleteSynapse: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Metamaps.Active.Map) {
@ -1170,7 +1168,7 @@ Metamaps.Realtime = {
}, },
// removeSynapse // removeSynapse
sendRemoveSynapse: function (data) { sendRemoveSynapse: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Metamaps.Active.Map) { if (Metamaps.Active.Map) {
@ -1179,7 +1177,7 @@ Metamaps.Realtime = {
} }
}, },
removeSynapse: function (data) { removeSynapse: function (data) {
var self = Metamaps.Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (!self.status) return if (!self.status) return
@ -1202,4 +1200,6 @@ Metamaps.Realtime = {
Metamaps.Mappings.remove(mapping) Metamaps.Mappings.remove(mapping)
} }
}, },
}; // end Metamaps.Realtime }
export default Realtime

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

@ -16,231 +16,231 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
;(function () { const _Router = Backbone.Router.extend({
var Router = Backbone.Router.extend({ routes: {
routes: { '': 'home', // #home
'': 'home', // #home 'explore/:section': 'explore', // #explore/active
'explore/:section': 'explore', // #explore/active 'explore/:section/:id': 'explore', // #explore/mapper/1234
'explore/:section/:id': 'explore', // #explore/mapper/1234 'maps/:id': 'maps' // #maps/7
'maps/:id': 'maps' // #maps/7 },
}, home: function () {
home: function () { clearTimeout(Metamaps.Router.timeoutId)
clearTimeout(Metamaps.Router.timeoutId)
if (Metamaps.Active.Mapper) document.title = 'Explore Active Maps | Metamaps' if (Metamaps.Active.Mapper) document.title = 'Explore Active Maps | Metamaps'
else document.title = 'Home | Metamaps' else document.title = 'Home | Metamaps'
Metamaps.Router.currentSection = '' Metamaps.Router.currentSection = ''
Metamaps.Router.currentPage = '' Metamaps.Router.currentPage = ''
$('.wrapper').removeClass('mapPage topicPage') $('.wrapper').removeClass('mapPage topicPage')
var classes = Metamaps.Active.Mapper ? 'homePage explorePage' : 'homePage' var classes = Metamaps.Active.Mapper ? 'homePage explorePage' : 'homePage'
$('.wrapper').addClass(classes) $('.wrapper').addClass(classes)
var navigate = function () { var navigate = function () {
Metamaps.Router.timeoutId = setTimeout(function () { Metamaps.Router.timeoutId = setTimeout(function () {
Metamaps.Router.navigate('') Metamaps.Router.navigate('')
}, 300) }, 300)
} }
// all this only for the logged in home page // all this only for the logged in home page
if (Metamaps.Active.Mapper) { if (Metamaps.Active.Mapper) {
$('.homeButton a').attr('href', '/') $('.homeButton a').attr('href', '/')
Metamaps.GlobalUI.hideDiv('#yield') Metamaps.GlobalUI.hideDiv('#yield')
Metamaps.GlobalUI.showDiv('#explore')
Metamaps.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)
}
} else {
// logged out home page
Metamaps.GlobalUI.hideDiv('#explore')
Metamaps.GlobalUI.showDiv('#yield')
Metamaps.Router.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
},
explore: function (section, id) {
clearTimeout(Metamaps.Router.timeoutId)
// just capitalize the variable section
// either 'featured', 'mapper', or 'active'
var capitalize = section.charAt(0).toUpperCase() + section.slice(1)
if (section === 'shared' || section === 'featured' || section === 'active' || section === 'starred') {
document.title = 'Explore ' + capitalize + ' Maps | Metamaps'
} else if (section === 'mapper') {
$.ajax({
url: '/users/' + id + '.json',
success: function (response) {
document.title = response.name + ' | Metamaps'
},
error: function () {}
})
} else if (section === 'mine') {
document.title = 'Explore My Maps | Metamaps'
}
if (Metamaps.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 will mean it's a mapper page being loaded
if (id) {
if (Metamaps.Maps.Mapper.mapperId !== id) {
// empty the collection if we are trying to load the maps
// collection of a different mapper than we had previously
Metamaps.Maps.Mapper.reset()
Metamaps.Maps.Mapper.page = 1
}
Metamaps.Maps.Mapper.mapperId = id
}
Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps[capitalize])
var navigate = function () {
var path = '/explore/' + Metamaps.Router.currentPage
// alter url if for mapper profile page
if (Metamaps.Router.currentPage === 'mapper') {
path += '/' + Metamaps.Maps.Mapper.mapperId
}
Metamaps.Router.navigate(path)
}
var navigateTimeout = function () {
Metamaps.Router.timeoutId = setTimeout(navigate, 300)
}
if (Metamaps.Maps[capitalize].length === 0) {
Metamaps.Loading.show()
setTimeout(function () {
Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
}, 300) // wait 300 milliseconds till the other animations are done to do the fetch
} else {
if (id) {
Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout)
} else {
Metamaps.Views.exploreMaps.render(navigateTimeout)
}
}
Metamaps.GlobalUI.showDiv('#explore') 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
},
maps: function (id) {
clearTimeout(Metamaps.Router.timeoutId)
document.title = 'Map ' + id + ' | Metamaps' Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active)
if (Metamaps.Maps.Active.length === 0) {
Metamaps.Router.currentSection = 'map' Metamaps.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
Metamaps.Router.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')
// 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)
}
Metamaps.GlobalUI.showDiv('#infovis')
Metamaps.Topic.end()
Metamaps.Active.Topic = null
Metamaps.Loading.show()
Metamaps.Map.end()
Metamaps.Map.launch(id)
},
topics: function (id) {
clearTimeout(Metamaps.Router.timeoutId)
document.title = 'Topic ' + id + ' | Metamaps'
Metamaps.Router.currentSection = 'topic'
Metamaps.Router.currentPage = id
$('.wrapper').removeClass('homePage explorePage mapPage')
$('.wrapper').addClass('topicPage')
Metamaps.GlobalUI.hideDiv('#yield')
Metamaps.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)
}
Metamaps.GlobalUI.showDiv('#infovis')
Metamaps.Map.end()
Metamaps.Active.Map = null
Metamaps.Topic.end()
Metamaps.Topic.launch(id)
}
})
Metamaps.Router = new Router()
Metamaps.Router.currentPage = ''
Metamaps.Router.currentSection = undefined
Metamaps.Router.timeoutId = undefined
Metamaps.Router.intercept = function (evt) {
var segments
var href = {
prop: $(this).prop('href'),
attr: $(this).attr('href')
}
var root = window.location.protocol + '//' + window.location.host + Backbone.history.options.root
if (href.prop && href.prop === root) href.attr = ''
if (href.prop && href.prop.slice(0, root.length) === root) {
evt.preventDefault()
segments = href.attr.split('/')
segments.splice(0, 1) // pop off the element created by the first /
if (href.attr === '') {
Metamaps.Router.home()
} else { } else {
Metamaps.Router[segments[0]](segments[1], segments[2]) Metamaps.Views.exploreMaps.render(navigate)
}
} else {
// logged out home page
Metamaps.GlobalUI.hideDiv('#explore')
Metamaps.GlobalUI.showDiv('#yield')
Metamaps.Router.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
},
explore: function (section, id) {
clearTimeout(Metamaps.Router.timeoutId)
// just capitalize the variable section
// either 'featured', 'mapper', or 'active'
var capitalize = section.charAt(0).toUpperCase() + section.slice(1)
if (section === 'shared' || section === 'featured' || section === 'active' || section === 'starred') {
document.title = 'Explore ' + capitalize + ' Maps | Metamaps'
} else if (section === 'mapper') {
$.ajax({
url: '/users/' + id + '.json',
success: function (response) {
document.title = response.name + ' | Metamaps'
},
error: function () {}
})
} else if (section === 'mine') {
document.title = 'Explore My Maps | Metamaps'
}
if (Metamaps.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 will mean it's a mapper page being loaded
if (id) {
if (Metamaps.Maps.Mapper.mapperId !== id) {
// empty the collection if we are trying to load the maps
// collection of a different mapper than we had previously
Metamaps.Maps.Mapper.reset()
Metamaps.Maps.Mapper.page = 1
}
Metamaps.Maps.Mapper.mapperId = id
}
Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps[capitalize])
var navigate = function () {
var path = '/explore/' + Metamaps.Router.currentPage
// alter url if for mapper profile page
if (Metamaps.Router.currentPage === 'mapper') {
path += '/' + Metamaps.Maps.Mapper.mapperId
}
Metamaps.Router.navigate(path)
}
var navigateTimeout = function () {
Metamaps.Router.timeoutId = setTimeout(navigate, 300)
}
if (Metamaps.Maps[capitalize].length === 0) {
Metamaps.Loading.show()
setTimeout(function () {
Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
}, 300) // wait 300 milliseconds till the other animations are done to do the fetch
} else {
if (id) {
Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout)
} else {
Metamaps.Views.exploreMaps.render(navigateTimeout)
} }
} }
}
Metamaps.Router.init = function () { Metamaps.GlobalUI.showDiv('#explore')
Backbone.history.start({ Metamaps.GlobalUI.hideDiv('#yield')
silent: true, Metamaps.GlobalUI.hideDiv('#infovis')
pushState: true, Metamaps.GlobalUI.hideDiv('#instructions')
root: '/' Metamaps.Map.end()
}) Metamaps.Topic.end()
$(document).on('click', 'a[data-router="true"]', Metamaps.Router.intercept) Metamaps.Active.Map = null
Metamaps.Active.Topic = null
},
maps: function (id) {
clearTimeout(Metamaps.Router.timeoutId)
document.title = 'Map ' + id + ' | Metamaps'
Metamaps.Router.currentSection = 'map'
Metamaps.Router.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')
// 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)
}
Metamaps.GlobalUI.showDiv('#infovis')
Metamaps.Topic.end()
Metamaps.Active.Topic = null
Metamaps.Loading.show()
Metamaps.Map.end()
Metamaps.Map.launch(id)
},
topics: function (id) {
clearTimeout(Metamaps.Router.timeoutId)
document.title = 'Topic ' + id + ' | Metamaps'
Metamaps.Router.currentSection = 'topic'
Metamaps.Router.currentPage = id
$('.wrapper').removeClass('homePage explorePage mapPage')
$('.wrapper').addClass('topicPage')
Metamaps.GlobalUI.hideDiv('#yield')
Metamaps.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)
}
Metamaps.GlobalUI.showDiv('#infovis')
Metamaps.Map.end()
Metamaps.Active.Map = null
Metamaps.Topic.end()
Metamaps.Topic.launch(id)
} }
})() })
const Router = new _Router()
Router.currentPage = ''
Router.currentSection = undefined
Router.timeoutId = undefined
Router.intercept = function (evt) {
var segments
var href = {
prop: $(this).prop('href'),
attr: $(this).attr('href')
}
var root = window.location.protocol + '//' + window.location.host + Backbone.history.options.root
if (href.prop && href.prop === root) href.attr = ''
if (href.prop && href.prop.slice(0, root.length) === root) {
evt.preventDefault()
segments = href.attr.split('/')
segments.splice(0, 1) // pop off the element created by the first /
if (href.attr === '') {
Metamaps.Router.home()
} else {
Metamaps.Router[segments[0]](segments[1], segments[2])
}
}
}
Router.init = function () {
Backbone.history.start({
silent: true,
pushState: true,
root: '/'
})
$(document).on('click', 'a[data-router="true"]', Metamaps.Router.intercept)
}
export default Router

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -18,7 +17,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.Synapse = { const Synapse = {
// this function is to retrieve a synapse JSON object from the database // this function is to retrieve a synapse JSON object from the database
// @param id = the id of the synapse to retrieve // @param id = the id of the synapse to retrieve
get: function (id, callback) { get: function (id, callback) {
@ -98,7 +97,7 @@ Metamaps.Synapse = {
} }
}, },
createSynapseLocally: function () { createSynapseLocally: function () {
var self = Metamaps.Synapse, var self = Synapse,
topic1, topic1,
topic2, topic2,
node1, node1,
@ -145,7 +144,7 @@ Metamaps.Synapse = {
Metamaps.Create.newSynapse.hide() Metamaps.Create.newSynapse.hide()
}, },
getSynapseFromAutocomplete: function (id) { getSynapseFromAutocomplete: function (id) {
var self = Metamaps.Synapse, var self = Synapse,
topic1, topic1,
topic2, topic2,
node1, node1,
@ -167,4 +166,6 @@ Metamaps.Synapse = {
self.renderSynapse(mapping, synapse, node1, node2, true) self.renderSynapse(mapping, synapse, node1, node2, true)
} }
}; // end Metamaps.Synapse }
export default Synapse

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -10,10 +9,10 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Mapper * - Metamaps.Mapper
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.SynapseCard = { const SynapseCard = {
openSynapseCard: null, openSynapseCard: null,
showCard: function (edge, e) { showCard: function (edge, e) {
var self = Metamaps.SynapseCard var self = SynapseCard
// reset so we don't interfere with other edges, but first, save its x and y // reset so we don't interfere with other edges, but first, save its x and y
var myX = $('#edit_synapse').css('left') var myX = $('#edit_synapse').css('left')
@ -59,11 +58,11 @@ Metamaps.SynapseCard = {
hideCard: function () { hideCard: function () {
$('#edit_synapse').remove() $('#edit_synapse').remove()
Metamaps.SynapseCard.openSynapseCard = null SynapseCard.openSynapseCard = null
}, },
populateShowCard: function (edge, synapse) { populateShowCard: function (edge, synapse) {
var self = Metamaps.SynapseCard var self = SynapseCard
self.add_synapse_count(edge) self.add_synapse_count(edge)
self.add_desc_form(synapse) self.add_desc_form(synapse)
@ -154,7 +153,7 @@ Metamaps.SynapseCard = {
var index = parseInt($(this).attr('data-synapse-index')) var index = parseInt($(this).attr('data-synapse-index'))
edge.setData('displayIndex', index) edge.setData('displayIndex', index)
Metamaps.Visualize.mGraph.plot() Metamaps.Visualize.mGraph.plot()
Metamaps.SynapseCard.showCard(edge, false) SynapseCard.showCard(edge, false)
}) })
} }
}, },
@ -286,4 +285,6 @@ Metamaps.SynapseCard = {
}) })
} // if } // if
} // add_direction_form } // add_direction_form
}; // end Metamaps.SynapseCard }
export default SynapseCard

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -28,7 +27,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.tempNode2 * - Metamaps.tempNode2
*/ */
Metamaps.Topic = { const Topic = {
// this function is to retrieve a topic JSON object from the database // this function is to retrieve a topic JSON object from the database
// @param id = the id of the topic to retrieve // @param id = the id of the topic to retrieve
get: function (id, callback) { get: function (id, callback) {
@ -393,4 +392,6 @@ Metamaps.Topic = {
event.preventDefault() event.preventDefault()
return false return false
} }
}; // end Metamaps.Topic }
export default Topic

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -13,16 +12,16 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Util * - Metamaps.Util
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.TopicCard = { const TopicCard = {
openTopicCard: null, // stores the topic that's currently open openTopicCard: null, // stores the topic that's currently open
authorizedToEdit: false, // stores boolean for edit permission for open topic card authorizedToEdit: false, // stores boolean for edit permission for open topic card
init: function () { init: function () {
var self = Metamaps.TopicCard var self = TopicCard
// initialize best_in_place editing // initialize best_in_place editing
$('.authenticated div.permission.canEdit .best_in_place').best_in_place() $('.authenticated div.permission.canEdit .best_in_place').best_in_place()
Metamaps.TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html()) TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html())
// initialize topic card draggability and resizability // initialize topic card draggability and resizability
$('.showcard').draggable({ $('.showcard').draggable({
@ -39,7 +38,7 @@ Metamaps.TopicCard = {
* @param {$jit.Graph.Node} node * @param {$jit.Graph.Node} node
*/ */
showCard: function (node, opts) { showCard: function (node, opts) {
var self = Metamaps.TopicCard var self = TopicCard
var topic = node.getData('topic') var topic = node.getData('topic')
@ -54,14 +53,14 @@ Metamaps.TopicCard = {
}) })
}, },
hideCard: function () { hideCard: function () {
var self = Metamaps.TopicCard var self = TopicCard
$('.showcard').fadeOut('fast') $('.showcard').fadeOut('fast')
self.openTopicCard = null self.openTopicCard = null
self.authorizedToEdit = false self.authorizedToEdit = false
}, },
embedlyCardRendered: function (iframe) { embedlyCardRendered: function (iframe) {
var self = Metamaps.TopicCard var self = TopicCard
$('#embedlyLinkLoader').hide() $('#embedlyLinkLoader').hide()
@ -78,7 +77,7 @@ Metamaps.TopicCard = {
} }
}, },
removeLink: function () { removeLink: function () {
var self = Metamaps.TopicCard var self = TopicCard
self.openTopicCard.save({ self.openTopicCard.save({
link: null link: null
}) })
@ -88,7 +87,7 @@ Metamaps.TopicCard = {
$('.CardOnGraph').removeClass('hasAttachment') $('.CardOnGraph').removeClass('hasAttachment')
}, },
bindShowCardListeners: function (topic) { bindShowCardListeners: function (topic) {
var self = Metamaps.TopicCard var self = TopicCard
var showCard = document.getElementById('showcard') var showCard = document.getElementById('showcard')
var authorized = self.authorizedToEdit var authorized = self.authorizedToEdit
@ -350,13 +349,13 @@ Metamaps.TopicCard = {
}) })
}, },
handleInvalidLink: function () { handleInvalidLink: function () {
var self = Metamaps.TopicCard var self = TopicCard
self.removeLink() self.removeLink()
Metamaps.GlobalUI.notifyUser('Invalid link') Metamaps.GlobalUI.notifyUser('Invalid link')
}, },
populateShowCard: function (topic) { populateShowCard: function (topic) {
var self = Metamaps.TopicCard var self = TopicCard
var showCard = document.getElementById('showcard') var showCard = document.getElementById('showcard')
@ -380,12 +379,12 @@ Metamaps.TopicCard = {
showCard.appendChild(perm) showCard.appendChild(perm)
} }
Metamaps.TopicCard.bindShowCardListeners(topic) TopicCard.bindShowCardListeners(topic)
}, },
generateShowcardHTML: null, // will be initialized into a Hogan template within init function generateShowcardHTML: null, // will be initialized into a Hogan template within init function
// generateShowcardHTML // generateShowcardHTML
buildObject: function (topic) { buildObject: function (topic) {
var self = Metamaps.TopicCard var self = TopicCard
var nodeValues = {} var nodeValues = {}
@ -456,4 +455,6 @@ Metamaps.TopicCard = {
nodeValues.desc = (topic.get('desc') == '' && authorized) ? desc_nil : topic.get('desc') nodeValues.desc = (topic.get('desc') == '' && authorized) ? desc_nil : topic.get('desc')
return nodeValues return nodeValues
} }
}; // end Metamaps.TopicCard }
export default TopicCard

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps */ /* global Metamaps */
/* /*
@ -8,7 +7,7 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
Metamaps.Util = { const Util = {
// helper function to determine how many lines are needed // helper function to determine how many lines are needed
// Line Splitter Function // Line Splitter Function
// copyright Stephen Chapman, 19th April 2006 // copyright Stephen Chapman, 19th April 2006
@ -92,7 +91,7 @@ Metamaps.Util = {
var r = (Math.round(Math.random() * 127) + 127).toString(16) var r = (Math.round(Math.random() * 127) + 127).toString(16)
var g = (Math.round(Math.random() * 127) + 127).toString(16) var g = (Math.round(Math.random() * 127) + 127).toString(16)
var b = (Math.round(Math.random() * 127) + 127).toString(16) var b = (Math.round(Math.random() * 127) + 127).toString(16)
return Metamaps.Util.colorLuminance('#' + r + g + b, -0.4) return Util.colorLuminance('#' + r + g + b, -0.4)
}, },
// darkens a hex value by 'lum' percentage // darkens a hex value by 'lum' percentage
colorLuminance: function (hex, lum) { colorLuminance: function (hex, lum) {
@ -128,4 +127,6 @@ Metamaps.Util = {
checkURLisYoutubeVideo: function (url) { checkURLisYoutubeVideo: function (url) {
return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null) return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null)
} }
}; // end Metamaps.Util }
export default Util

15
frontend/src/Metamaps/Views.js
View file

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
@ -10,10 +9,10 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.ReactComponents * - Metamaps.ReactComponents
*/ */
Metamaps.Views = { const Views = {
exploreMaps: { exploreMaps: {
setCollection: function (collection) { setCollection: function (collection) {
var self = Metamaps.Views.exploreMaps var self = Views.exploreMaps
if (self.collection) { if (self.collection) {
self.collection.off('add', self.render) self.collection.off('add', self.render)
@ -26,7 +25,7 @@ Metamaps.Views = {
self.collection.on('errorOnFetch', self.handleError) self.collection.on('errorOnFetch', self.handleError)
}, },
render: function (mapperObj, cb) { render: function (mapperObj, cb) {
var self = Metamaps.Views.exploreMaps var self = Views.exploreMaps
if (typeof mapperObj === 'function') { if (typeof mapperObj === 'function') {
cb = mapperObj cb = mapperObj
@ -51,7 +50,7 @@ Metamaps.Views = {
Metamaps.Loading.hide() Metamaps.Loading.hide()
}, },
loadMore: function () { loadMore: function () {
var self = Metamaps.Views.exploreMaps var self = Views.exploreMaps
if (self.collection.page != "loadedAll") { if (self.collection.page != "loadedAll") {
self.collection.getMaps() self.collection.getMaps()
@ -59,7 +58,7 @@ Metamaps.Views = {
else self.render() else self.render()
}, },
handleSuccess: function (cb) { handleSuccess: function (cb) {
var self = Metamaps.Views.exploreMaps var self = Views.exploreMaps
if (self.collection && self.collection.id === 'mapper') { if (self.collection && self.collection.id === 'mapper') {
self.fetchUserThenRender(cb) self.fetchUserThenRender(cb)
@ -71,7 +70,7 @@ Metamaps.Views = {
console.log('error loading maps!') // TODO console.log('error loading maps!') // TODO
}, },
fetchUserThenRender: function (cb) { fetchUserThenRender: function (cb) {
var self = Metamaps.Views.exploreMaps var self = Views.exploreMaps
// first load the mapper object and then call the render function // first load the mapper object and then call the render function
$.ajax({ $.ajax({
@ -86,3 +85,5 @@ Metamaps.Views = {
} }
} }
} }
export default Views

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

@ -1,4 +1,3 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
/* /*
* Metamaps.Visualize * Metamaps.Visualize
@ -13,16 +12,15 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.TopicCard * - Metamaps.TopicCard
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Touch * - Metamaps.Touch
* - Metamaps.Visualize
*/ */
Metamaps.Visualize = { const Visualize = {
mGraph: null, // a reference to the graph object. mGraph: null, // a reference to the graph object.
cameraPosition: null, // stores the camera position when using a 3D visualization cameraPosition: null, // stores the camera position when using a 3D visualization
type: 'ForceDirected', // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D" type: 'ForceDirected', // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D"
loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created
init: function () { init: function () {
var self = Metamaps.Visualize var self = Visualize
// disable awkward dragging of the canvas element that would sometimes happen // disable awkward dragging of the canvas element that would sometimes happen
$('#infovis-canvas').on('dragstart', function (event) { $('#infovis-canvas').on('dragstart', function (event) {
event.preventDefault() event.preventDefault()
@ -48,7 +46,7 @@ Metamaps.Visualize = {
}) })
}, },
computePositions: function () { computePositions: function () {
var self = Metamaps.Visualize, var self = Visualize,
mapping mapping
if (self.type == 'RGraph') { if (self.type == 'RGraph') {
@ -112,7 +110,7 @@ Metamaps.Visualize = {
* *
*/ */
render: function () { render: function () {
var self = Metamaps.Visualize, RGraphSettings, FDSettings var self = Visualize, RGraphSettings, FDSettings
if (self.type == 'RGraph' && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) { if (self.type == 'RGraph' && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) {
// clear the previous canvas from #infovis // clear the previous canvas from #infovis
@ -217,4 +215,6 @@ Metamaps.Visualize = {
} }
}, 800) }, 800)
} }
}; // end Metamaps.Visualize }
export default Visualize

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

@ -2,32 +2,60 @@ window.Metamaps = window.Metamaps || {}
import './Constants' import './Constants'
import './Account' import Account from './Account'
import './Admin' import Admin from './Admin'
import './AutoLayout' import AutoLayout from './AutoLayout'
import './Backbone' import Backbone from './Backbone'
import './Control' import Control from './Control'
import './Create' import Create from './Create'
import './Debug' import Debug from './Debug'
import './Filter' import Filter from './Filter'
import './GlobalUI' import GlobalUI from './GlobalUI'
import './Import' import Import from './Import'
import './JIT' import JIT from './JIT'
import './Listeners' import Listeners from './Listeners'
import './Map' import Map from './Map'
import './Mapper' import Mapper from './Mapper'
import './Mobile' import Mobile from './Mobile'
import './Organize' import Organize from './Organize'
import './PasteInput' import PasteInput from './PasteInput'
import './Realtime' import Realtime from './Realtime'
import './Router' import Router from './Router'
import './Synapse' import Synapse from './Synapse'
import './SynapseCard' import SynapseCard from './SynapseCard'
import './Topic' import Topic from './Topic'
import './TopicCard' import TopicCard from './TopicCard'
import './Util' import Util from './Util'
import './Views' import Views from './Views'
import './Visualize' import Visualize from './Visualize'
import './ReactComponents' import ReactComponents from './ReactComponents'
Metamaps.Account = Account
Metamaps.Admin = Admin
Metamaps.AutoLayout = AutoLayout
Metamaps.Backbone = Backbone
Metamaps.Control = Control
Metamaps.Create = Create
Metamaps.Debug = Debug
Metamaps.Filter = Filter
Metamaps.GlobalUI = GlobalUI
Metamaps.Import = Import
Metamaps.JIT = JIT
Metamaps.Listeners = Listeners
Metamaps.Map = Map
Metamaps.Mapper = Mapper
Metamaps.Mobile = Mobile
Metamaps.Organize = Organize
Metamaps.PasteInput = PasteInput
Metamaps.Realtime = Realtime
Metamaps.ReactComponents = ReactComponents
Metamaps.Router = Router
Metamaps.Synapse = Synapse
Metamaps.SynapseCard = SynapseCard
Metamaps.Topic = Topic
Metamaps.TopicCard = TopicCard
Metamaps.Util = Util
Metamaps.Views = Views
Metamaps.Visualize = Visualize
export default window.Metamaps export default window.Metamaps