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

make more code modular

Browse source
This commit is contained in:
Devin Howard 2016-09-22 17:36:47 +08:00
parent 8ed2b3ffc1
commit 0065b201c7
10 changed files with 209 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,22 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import Filter from './Filter'
import JIT from './JIT'
import Mouse from './Mouse'
import Selected from './Selected'
import Settings from './Settings'
import Visualize from './Visualize'
/* /*
* Metamaps.Control.js * Metamaps.Control.js
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Filter
* - Metamaps.GlobalUI * - Metamaps.GlobalUI
* - Metamaps.JIT
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Mouse
* - Metamaps.Selected
* - Metamaps.Settings
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Visualize
*/ */
const Control = { const Control = {
@ -23,37 +24,37 @@ const Control = {
selectNode: function (node, e) { selectNode: function (node, e) {
var filtered = node.getData('alpha') === 0 var filtered = node.getData('alpha') === 0
if (filtered || Metamaps.Selected.Nodes.indexOf(node) != -1) return if (filtered || Selected.Nodes.indexOf(node) != -1) return
node.selected = true node.selected = true
node.setData('dim', 30, 'current') node.setData('dim', 30, 'current')
Metamaps.Selected.Nodes.push(node) Selected.Nodes.push(node)
}, },
deselectAllNodes: function () { deselectAllNodes: function () {
var l = Metamaps.Selected.Nodes.length var l = 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 = Selected.Nodes[i]
Control.deselectNode(node) Control.deselectNode(node)
} }
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}, },
deselectNode: function (node) { deselectNode: function (node) {
delete node.selected delete node.selected
node.setData('dim', 25, 'current') node.setData('dim', 25, 'current')
// remove the node // remove the node
Metamaps.Selected.Nodes.splice( Selected.Nodes.splice(
Metamaps.Selected.Nodes.indexOf(node), 1) Selected.Nodes.indexOf(node), 1)
}, },
deleteSelected: function () { deleteSelected: function () {
if (!Metamaps.Active.Map) return if (!Active.Map) return
var n = Metamaps.Selected.Nodes.length var n = Selected.Nodes.length
var e = Metamaps.Selected.Edges.length var e = Selected.Edges.length
var ntext = n == 1 ? '1 topic' : n + ' topics' var ntext = n == 1 ? '1 topic' : n + ' topics'
var etext = e == 1 ? '1 synapse' : e + ' synapses' var etext = e == 1 ? '1 synapse' : e + ' synapses'
var text = 'You have ' + ntext + ' and ' + etext + ' selected. ' var text = 'You have ' + ntext + ' and ' + etext + ' selected. '
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
@ -67,41 +68,41 @@ const Control = {
} }
}, },
deleteSelectedNodes: function () { // refers to deleting topics permanently deleteSelectedNodes: function () { // refers to deleting topics permanently
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
var l = Metamaps.Selected.Nodes.length var l = 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 = Selected.Nodes[i]
Control.deleteNode(node.id) Control.deleteNode(node.id)
} }
}, },
deleteNode: function (nodeid) { // refers to deleting topics permanently deleteNode: function (nodeid) { // refers to deleting topics permanently
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid) var node = Visualize.mGraph.graph.getNode(nodeid)
var topic = node.getData('topic') var topic = node.getData('topic')
var permToDelete = Metamaps.Active.Mapper.id === topic.get('user_id') || Metamaps.Active.Mapper.get('admin') var permToDelete = Active.Mapper.id === topic.get('user_id') || Active.Mapper.get('admin')
if (permToDelete) { if (permToDelete) {
var mappableid = topic.id var mappableid = topic.id
var mapping = node.getData('mapping') var mapping = node.getData('mapping')
topic.destroy() topic.destroy()
Metamaps.Mappings.remove(mapping) Metamaps.Mappings.remove(mapping)
$(document).trigger(Metamaps.JIT.events.deleteTopic, [{ $(document).trigger(JIT.events.deleteTopic, [{
mappableid: mappableid mappableid: mappableid
}]) }])
Control.hideNode(nodeid) Control.hideNode(nodeid)
@ -110,25 +111,25 @@ const Control = {
} }
}, },
removeSelectedNodes: function () { // refers to removing topics permanently from a map removeSelectedNodes: function () { // refers to removing topics permanently from a map
if (Metamaps.Active.Topic) { if (Active.Topic) {
// hideNode will handle synapses as well // hideNode will handle synapses as well
var nodeids = _.map(Metamaps.Selected.Nodes, function(node) { var nodeids = _.map(Selected.Nodes, function(node) {
return node.id return node.id
}) })
_.each(nodeids, function(nodeid) { _.each(nodeids, function(nodeid) {
if (Metamaps.Active.Topic.id !== nodeid) { if (Active.Topic.id !== nodeid) {
Metamaps.Topics.remove(nodeid) Metamaps.Topics.remove(nodeid)
Control.hideNode(nodeid) Control.hideNode(nodeid)
} }
}) })
return return
} }
if (!Metamaps.Active.Map) return if (!Active.Map) return
var l = Metamaps.Selected.Nodes.length, var l = Selected.Nodes.length,
i, i,
node, node,
authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
@ -136,15 +137,15 @@ const Control = {
} }
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Selected.Nodes[i]
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
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid) var node = Visualize.mGraph.graph.getNode(nodeid)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
@ -156,24 +157,24 @@ const Control = {
var mapping = node.getData('mapping') var mapping = node.getData('mapping')
mapping.destroy() mapping.destroy()
Metamaps.Topics.remove(topic) Metamaps.Topics.remove(topic)
$(document).trigger(Metamaps.JIT.events.removeTopic, [{ $(document).trigger(JIT.events.removeTopic, [{
mappableid: mappableid mappableid: mappableid
}]) }])
Control.hideNode(nodeid) Control.hideNode(nodeid)
}, },
hideSelectedNodes: function () { hideSelectedNodes: function () {
var l = Metamaps.Selected.Nodes.length, var l = Selected.Nodes.length,
i, i,
node node
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Selected.Nodes[i]
Control.hideNode(node.id) Control.hideNode(node.id)
} }
}, },
hideNode: function (nodeid) { hideNode: function (nodeid) {
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid) var node = Visualize.mGraph.graph.getNode(nodeid)
var graph = Metamaps.Visualize.mGraph var graph = Visualize.mGraph
Control.deselectNode(node) Control.deselectNode(node)
@ -181,73 +182,73 @@ const Control = {
node.eachAdjacency(function (adj) { node.eachAdjacency(function (adj) {
adj.setData('alpha', 0, 'end') adj.setData('alpha', 0, 'end')
}) })
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:alpha', modes: ['node-property:alpha',
'edge-property:alpha' 'edge-property:alpha'
], ],
duration: 500 duration: 500
}) })
setTimeout(function () { setTimeout(function () {
if (nodeid == Metamaps.Visualize.mGraph.root) { // && Metamaps.Visualize.type === "RGraph" if (nodeid == Visualize.mGraph.root) { // && Visualize.type === "RGraph"
var newroot = _.find(graph.graph.nodes, function (n) { return n.id !== nodeid; }) var newroot = _.find(graph.graph.nodes, function (n) { return n.id !== nodeid; })
graph.root = newroot ? newroot.id : null graph.root = newroot ? newroot.id : null
} }
Metamaps.Visualize.mGraph.graph.removeNode(nodeid) Visualize.mGraph.graph.removeNode(nodeid)
}, 500) }, 500)
Metamaps.Filter.checkMetacodes() Filter.checkMetacodes()
Metamaps.Filter.checkMappers() Filter.checkMappers()
}, },
selectEdge: function (edge) { selectEdge: function (edge) {
var filtered = edge.getData('alpha') === 0; // don't select if the edge is filtered var filtered = edge.getData('alpha') === 0; // don't select if the edge is filtered
if (filtered || Metamaps.Selected.Edges.indexOf(edge) != -1) return if (filtered || Selected.Edges.indexOf(edge) != -1) return
var width = Metamaps.Mouse.edgeHoveringOver === edge ? 4 : 2 var width = Mouse.edgeHoveringOver === edge ? 4 : 2
edge.setDataset('current', { edge.setDataset('current', {
showDesc: true, showDesc: true,
lineWidth: width, lineWidth: width,
color: Metamaps.Settings.colors.synapses.selected color: Settings.colors.synapses.selected
}) })
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
Metamaps.Selected.Edges.push(edge) Selected.Edges.push(edge)
}, },
deselectAllEdges: function () { deselectAllEdges: function () {
var l = Metamaps.Selected.Edges.length var l = 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 = Selected.Edges[i]
Control.deselectEdge(edge) Control.deselectEdge(edge)
} }
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}, },
deselectEdge: function (edge) { deselectEdge: function (edge) {
edge.setData('showDesc', false, 'current') edge.setData('showDesc', false, 'current')
edge.setDataset('current', { edge.setDataset('current', {
lineWidth: 2, lineWidth: 2,
color: Metamaps.Settings.colors.synapses.normal color: Settings.colors.synapses.normal
}) })
if (Metamaps.Mouse.edgeHoveringOver == edge) { if (Mouse.edgeHoveringOver == edge) {
edge.setDataset('current', { edge.setDataset('current', {
showDesc: true, showDesc: true,
lineWidth: 4 lineWidth: 4
}) })
} }
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
// remove the edge // remove the edge
Metamaps.Selected.Edges.splice( Selected.Edges.splice(
Metamaps.Selected.Edges.indexOf(edge), 1) Selected.Edges.indexOf(edge), 1)
}, },
deleteSelectedEdges: function () { // refers to deleting topics permanently deleteSelectedEdges: function () { // refers to deleting topics permanently
var edge, var edge,
l = Metamaps.Selected.Edges.length l = Selected.Edges.length
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
@ -255,14 +256,14 @@ const 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 = Selected.Edges[i]
Control.deleteEdge(edge) Control.deleteEdge(edge)
} }
}, },
deleteEdge: function (edge) { deleteEdge: function (edge) {
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
@ -274,7 +275,7 @@ const Control = {
var synapse = edge.getData('synapses')[index] var synapse = edge.getData('synapses')[index]
var mapping = edge.getData('mappings')[index] var mapping = edge.getData('mappings')[index]
var permToDelete = Metamaps.Active.Mapper.id === synapse.get('user_id') || Metamaps.Active.Mapper.get('admin') var permToDelete = Active.Mapper.id === synapse.get('user_id') || Active.Mapper.get('admin')
if (permToDelete) { if (permToDelete) {
if (edge.getData('synapses').length - 1 === 0) { if (edge.getData('synapses').length - 1 === 0) {
Control.hideEdge(edge) Control.hideEdge(edge)
@ -289,7 +290,7 @@ const Control = {
if (edge.getData('displayIndex')) { if (edge.getData('displayIndex')) {
delete edge.data.$displayIndex delete edge.data.$displayIndex
} }
$(document).trigger(Metamaps.JIT.events.deleteSynapse, [{ $(document).trigger(JIT.events.deleteSynapse, [{
mappableid: mappableid mappableid: mappableid
}]) }])
} else { } else {
@ -298,13 +299,13 @@ const Control = {
}, },
removeSelectedEdges: function () { removeSelectedEdges: function () {
// Topic view is handled by removeSelectedNodes // Topic view is handled by removeSelectedNodes
if (!Metamaps.Active.Map) return if (!Active.Map) return
var l = Metamaps.Selected.Edges.length, var l = Selected.Edges.length,
i, i,
edge edge
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
@ -312,15 +313,15 @@ const Control = {
} }
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Selected.Edges[i]
Control.removeEdge(edge) Control.removeEdge(edge)
} }
Metamaps.Selected.Edges = [ ] Selected.Edges = [ ]
}, },
removeEdge: function (edge) { removeEdge: function (edge) {
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') Metamaps.GlobalUI.notifyUser('Cannot edit Public map.')
@ -345,34 +346,34 @@ const Control = {
if (edge.getData('displayIndex')) { if (edge.getData('displayIndex')) {
delete edge.data.$displayIndex delete edge.data.$displayIndex
} }
$(document).trigger(Metamaps.JIT.events.removeSynapse, [{ $(document).trigger(JIT.events.removeSynapse, [{
mappableid: mappableid mappableid: mappableid
}]) }])
}, },
hideSelectedEdges: function () { hideSelectedEdges: function () {
var edge, var edge,
l = Metamaps.Selected.Edges.length, l = Selected.Edges.length,
i i
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Selected.Edges[i]
Control.hideEdge(edge) Control.hideEdge(edge)
} }
Metamaps.Selected.Edges = [ ] Selected.Edges = [ ]
}, },
hideEdge: function (edge) { hideEdge: function (edge) {
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')
Control.deselectEdge(edge) Control.deselectEdge(edge)
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['edge-property:alpha'], modes: ['edge-property:alpha'],
duration: 500 duration: 500
}) })
setTimeout(function () { setTimeout(function () {
Metamaps.Visualize.mGraph.graph.removeAdjacence(from, to) Visualize.mGraph.graph.removeAdjacence(from, to)
}, 500) }, 500)
Metamaps.Filter.checkSynapses() Filter.checkSynapses()
Metamaps.Filter.checkMappers() Filter.checkMappers()
}, },
updateSelectedPermissions: function (permission) { updateSelectedPermissions: function (permission) {
var edge, synapse, node, topic var edge, synapse, node, topic
@ -384,12 +385,12 @@ const Control = {
sCount = 0 sCount = 0
// change the permission of the selected synapses, if logged in user is the original creator // change the permission of the selected synapses, if logged in user is the original creator
var l = Metamaps.Selected.Edges.length var l = Selected.Edges.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Selected.Edges[i]
synapse = edge.getData('synapses')[0] synapse = edge.getData('synapses')[0]
if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) { if (synapse.authorizePermissionChange(Active.Mapper)) {
synapse.save({ synapse.save({
permission: permission permission: permission
}) })
@ -398,12 +399,12 @@ const Control = {
} }
// change the permission of the selected topics, if logged in user is the original creator // change the permission of the selected topics, if logged in user is the original creator
var l = Metamaps.Selected.Nodes.length var l = Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Selected.Nodes[i]
topic = node.getData('topic') topic = node.getData('topic')
if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) { if (topic.authorizePermissionChange(Active.Mapper)) {
topic.save({ topic.save({
permission: permission permission: permission
}) })
@ -428,12 +429,12 @@ const Control = {
var nCount = 0 var nCount = 0
// change the permission of the selected topics, if logged in user is the original creator // change the permission of the selected topics, if logged in user is the original creator
var l = Metamaps.Selected.Nodes.length var l = Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Selected.Nodes[i]
topic = node.getData('topic') topic = node.getData('topic')
if (topic.authorizeToEdit(Metamaps.Active.Mapper)) { if (topic.authorizeToEdit(Active.Mapper)) {
topic.save({ topic.save({
'metacode_id': metacode_id 'metacode_id': metacode_id
}) })
@ -445,7 +446,7 @@ const Control = {
var message = nString + ' you can edit updated to ' + metacode.get('name') var message = nString + ' you can edit updated to ' + metacode.get('name')
Metamaps.GlobalUI.notifyUser(message) Metamaps.GlobalUI.notifyUser(message)
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}, },
} }

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

@ -1,6 +1,11 @@
window.Metamaps = window.Metamaps || {}
/* global Metamaps, $ */ /* global Metamaps, $ */
import Mouse from './Mouse'
import Selected from './Selected'
import Synapse from './Synapse'
import Topic from './Topic'
import Visualize from './Visualize'
/* /*
* Metamaps.Create.js * Metamaps.Create.js
* *
@ -8,11 +13,6 @@ window.Metamaps = window.Metamaps || {}
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.GlobalUI * - Metamaps.GlobalUI
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Mouse
* - Metamaps.Selected
* - Metamaps.Synapse
* - Metamaps.Topic
* - Metamaps.Visualize
*/ */
const Create = { const Create = {
@ -193,7 +193,7 @@ const Create = {
// tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
$('#topic_name').bind('typeahead:select', function (event, datum, dataset) { $('#topic_name').bind('typeahead:select', function (event, datum, dataset) {
Metamaps.Topic.getTopicFromAutocomplete(datum.id) Topic.getTopicFromAutocomplete(datum.id)
}) })
// initialize metacode spinner and then hide it // initialize metacode spinner and then hide it
@ -255,7 +255,7 @@ const Create = {
url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2', url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2',
prepare: function (query, settings) { prepare: function (query, settings) {
var self = Create.newSynapse var self = Create.newSynapse
if (Metamaps.Selected.Nodes.length < 2) { if (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
} else { } else {
@ -307,16 +307,16 @@ const Create = {
$('#synapse_desc').focusout(function () { $('#synapse_desc').focusout(function () {
if (Create.newSynapse.beingCreated) { if (Create.newSynapse.beingCreated) {
Metamaps.Synapse.createSynapseLocally() Synapse.createSynapseLocally()
} }
}) })
$('#synapse_desc').bind('typeahead:select', function (event, datum, dataset) { $('#synapse_desc').bind('typeahead:select', function (event, datum, dataset) {
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) Synapse.getSynapseFromAutocomplete(datum.id)
} else { } else {
Create.newSynapse.description = datum.value Create.newSynapse.description = datum.value
Metamaps.Synapse.createSynapseLocally() Synapse.createSynapseLocally()
} }
}) })
}, },
@ -338,8 +338,8 @@ const Create = {
Create.newTopic.addSynapse = false Create.newTopic.addSynapse = false
Create.newSynapse.topic1id = 0 Create.newSynapse.topic1id = 0
Create.newSynapse.topic2id = 0 Create.newSynapse.topic2id = 0
Metamaps.Mouse.synapseStartCoordinates = [] Mouse.synapseStartCoordinates = []
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}, },
} }
} }

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

@ -1,19 +1,20 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import Control from './Control'
import Settings from './Settings'
import Visualize from './Visualize'
/* /*
* Metamaps.Filter.js.erb * Metamaps.Filter.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Control
* - Metamaps.Creators * - Metamaps.Creators
* - Metamaps.GlobalUI * - Metamaps.GlobalUI
* - Metamaps.Mappers * - Metamaps.Mappers
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Settings
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Visualize
*/ */
const Filter = { const Filter = {
filters: { filters: {
@ -216,7 +217,7 @@ const Filter = {
}, },
checkMappers: function () { checkMappers: function () {
var self = Filter var self = Filter
var onMap = Metamaps.Active.Map ? true : false var onMap = Active.Map ? true : false
if (onMap) { if (onMap) {
self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper') self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper')
} else { } else {
@ -347,10 +348,10 @@ const Filter = {
var passesMetacode, passesMapper, passesSynapse var passesMetacode, passesMapper, passesSynapse
var onMap var onMap
if (Metamaps.Active.Map) { if (Active.Map) {
onMap = true onMap = true
} }
else if (Metamaps.Active.Topic) { else if (Active.Topic) {
onMap = false onMap = false
} }
@ -386,10 +387,10 @@ const Filter = {
else console.log(topic) else console.log(topic)
} else { } else {
if (n) { if (n) {
Metamaps.Control.deselectNode(n, true) Control.deselectNode(n, true)
n.setData('alpha', opacityForFilter, 'end') n.setData('alpha', opacityForFilter, 'end')
n.eachAdjacency(function (e) { n.eachAdjacency(function (e) {
Metamaps.Control.deselectEdge(e, true) Control.deselectEdge(e, true)
}) })
} }
else console.log(topic) else console.log(topic)
@ -442,12 +443,12 @@ const Filter = {
if (visible.mappers.indexOf(user_id) == -1) passesMapper = false if (visible.mappers.indexOf(user_id) == -1) passesMapper = false
else passesMapper = true else passesMapper = true
var color = Metamaps.Settings.colors.synapses.normal var color = Settings.colors.synapses.normal
if (passesSynapse && passesMapper) { if (passesSynapse && passesMapper) {
e.setData('alpha', 1, 'end') e.setData('alpha', 1, 'end')
e.setData('color', color, 'end') e.setData('color', color, 'end')
} else { } else {
Metamaps.Control.deselectEdge(e, true) Control.deselectEdge(e, true)
e.setData('alpha', opacityForFilter, 'end') e.setData('alpha', opacityForFilter, 'end')
} }
@ -457,7 +458,7 @@ const Filter = {
}) })
// run the animation // run the animation
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:alpha', modes: ['node-property:alpha',
'edge-property:alpha'], 'edge-property:alpha'],
duration: 200 duration: 200

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

@ -1,12 +1,13 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import Map from './Map'
/* /*
* Metamaps.Import.js.erb * Metamaps.Import.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.Map
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Synapses * - Metamaps.Synapses
@ -256,15 +257,15 @@ const 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 = Import var self = Import
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(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) {
metacode = Metamaps.Metacodes.where({ name: 'Wildcard' })[0] metacode = Metamaps.Metacodes.where({ name: 'Wildcard' })[0]
console.warn("Couldn't find metacode " + metacode_name + ' so used Wildcard instead.') console.warn("Couldn't find metacode " + metacode_name + ' so used Wildcard instead.')
} }
var topic_permission = permission || Metamaps.Active.Map.get('permission') var topic_permission = permission || Active.Map.get('permission')
var defer_to_map_id = permission === topic_permission ? Metamaps.Active.Map.get('id') : null var defer_to_map_id = permission === topic_permission ? Active.Map.get('id') : null
var topic = new Metamaps.Backbone.Topic({ var topic = new Metamaps.Backbone.Topic({
name: name, name: name,
metacode_id: metacode.id, metacode_id: metacode.id,
@ -272,7 +273,7 @@ const Import = {
defer_to_map_id: defer_to_map_id, defer_to_map_id: defer_to_map_id,
desc: desc || "", desc: desc || "",
link: link || "", link: link || "",
calculated_permission: Metamaps.Active.Map.get('permission') calculated_permission: Active.Map.get('permission')
}) })
Metamaps.Topics.add(topic) Metamaps.Topics.add(topic)

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

@ -1,12 +1,7 @@
/* global Metamaps, $ */ /* global $ */
/* import Active from './Active'
* Metamaps.Mobile.js import Map from './Map'
*
* Dependencies:
* - Metamaps.Active
* - Metamaps.Map
*/
const Mobile = { const Mobile = {
init: function () { init: function () {
@ -30,8 +25,8 @@ const Mobile = {
$('#mobile_menu').toggle() $('#mobile_menu').toggle()
}, },
titleClick: function () { titleClick: function () {
if (Metamaps.Active.Map) { if (Active.Map) {
Metamaps.Map.InfoBox.open() Map.InfoBox.open()
} }
} }
} }

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

@ -1,14 +1,9 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import Control from './Control'
import Mapper from './Mapper'
import Visualize from './Visualize'
/*
* Metamaps.SynapseCard.js
*
* Dependencies:
* - Metamaps.Active
* - Metamaps.Control
* - Metamaps.Mapper
* - Metamaps.Visualize
*/
const SynapseCard = { const SynapseCard = {
openSynapseCard: null, openSynapseCard: null,
showCard: function (edge, e) { showCard: function (edge, e) {
@ -20,7 +15,7 @@ const SynapseCard = {
$('#edit_synapse').remove() $('#edit_synapse').remove()
// so label is missing while editing // so label is missing while editing
Metamaps.Control.deselectEdge(edge) Control.deselectEdge(edge)
var index = edge.getData('displayIndex') ? edge.getData('displayIndex') : 0 var index = edge.getData('displayIndex') ? edge.getData('displayIndex') : 0
var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse
@ -30,9 +25,9 @@ const SynapseCard = {
var edit_div = document.createElement('div') var edit_div = document.createElement('div')
edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>' edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>'
edit_div.setAttribute('id', 'edit_synapse') edit_div.setAttribute('id', 'edit_synapse')
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { if (synapse.authorizeToEdit(Active.Mapper)) {
edit_div.className = 'permission canEdit' edit_div.className = 'permission canEdit'
edit_div.className += synapse.authorizePermissionChange(Metamaps.Active.Mapper) ? ' yourEdge' : '' edit_div.className += synapse.authorizePermissionChange(Active.Mapper) ? ' yourEdge' : ''
} else { } else {
edit_div.className = 'permission cannotEdit' edit_div.className = 'permission cannotEdit'
} }
@ -94,7 +89,7 @@ const SynapseCard = {
// if edge data is blank or just whitespace, populate it with data_nil // if edge data is blank or just whitespace, populate it with data_nil
if ($('#edit_synapse_desc').html().trim() == '') { if ($('#edit_synapse_desc').html().trim() == '') {
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { if (synapse.authorizeToEdit(Active.Mapper)) {
$('#edit_synapse_desc').html(data_nil) $('#edit_synapse_desc').html(data_nil)
} else { } else {
$('#edit_synapse_desc').html('(no description)') $('#edit_synapse_desc').html('(no description)')
@ -109,8 +104,8 @@ const SynapseCard = {
synapse.set('desc', desc) synapse.set('desc', desc)
} }
synapse.trigger('saved') synapse.trigger('saved')
Metamaps.Control.selectEdge(synapse.get('edge')) Control.selectEdge(synapse.get('edge'))
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}) })
}, },
add_drop_down: function (edge, synapse) { add_drop_down: function (edge, synapse) {
@ -152,7 +147,7 @@ const SynapseCard = {
e.stopPropagation() e.stopPropagation()
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() Visualize.mGraph.plot()
SynapseCard.showCard(edge, false) SynapseCard.showCard(edge, false)
}) })
} }
@ -167,7 +162,7 @@ const SynapseCard = {
var setMapperImage = function (mapper) { var setMapperImage = function (mapper) {
$('#edgeUser img').attr('src', mapper.get('image')) $('#edgeUser img').attr('src', mapper.get('image'))
} }
Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage) Mapper.get(synapse.get('user_id'), setMapperImage)
}, },
add_perms_form: function (synapse) { add_perms_form: function (synapse) {
@ -210,7 +205,7 @@ const SynapseCard = {
$('#edit_synapse .permissionSelect').remove() $('#edit_synapse .permissionSelect').remove()
} }
if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) { if (synapse.authorizePermissionChange(Active.Mapper)) {
$('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect) $('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect)
$('#edit_synapse').click(hidePermissionSelect) $('#edit_synapse').click(hidePermissionSelect)
} }
@ -257,7 +252,7 @@ const SynapseCard = {
$('#edit_synapse_right').addClass('checked') $('#edit_synapse_right').addClass('checked')
} }
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) { if (synapse.authorizeToEdit(Active.Mapper)) {
$('#edit_synapse_left, #edit_synapse_right').click(function () { $('#edit_synapse_left, #edit_synapse_right').click(function () {
$(this).toggleClass('checked') $(this).toggleClass('checked')
@ -281,7 +276,7 @@ const SynapseCard = {
node1_id: dir[0], node1_id: dir[0],
node2_id: dir[1] node2_id: dir[1]
}) })
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}) })
} // if } // if
} // add_direction_form } // add_direction_form

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

@ -1,26 +1,25 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import JIT from './JIT'
import Selected from './Selected'
import Settings from './Settings'
import Util from './Util'
/* /*
* Metamaps.Topic.js.erb * Metamaps.Topic.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Backbone
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.Create * - Metamaps.Create
* - Metamaps.Creators * - Metamaps.Creators
* - Metamaps.Famous
* - Metamaps.Filter * - Metamaps.Filter
* - Metamaps.GlobalUI * - Metamaps.GlobalUI
* - Metamaps.JIT
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Selected
* - Metamaps.Settings
* - Metamaps.SynapseCard * - Metamaps.SynapseCard
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.TopicCard * - Metamaps.TopicCard
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Util
* - Metamaps.Visualize * - Metamaps.Visualize
*/ */
@ -58,7 +57,7 @@ const Topic = {
launch: function (id) { launch: function (id) {
var bb = Metamaps.Backbone var bb = Metamaps.Backbone
var start = function (data) { var start = function (data) {
Metamaps.Active.Topic = new bb.Topic(data.topic) Active.Topic = new bb.Topic(data.topic)
Metamaps.Creators = new bb.MapperCollection(data.creators) Metamaps.Creators = new bb.MapperCollection(data.creators)
Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives)) Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives))
Metamaps.Synapses = new bb.SynapseCollection(data.synapses) Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
@ -69,13 +68,13 @@ const Topic = {
// build and render the visualization // build and render the visualization
Metamaps.Visualize.type = 'RGraph' Metamaps.Visualize.type = 'RGraph'
Metamaps.JIT.prepareVizData() JIT.prepareVizData()
// update filters // update filters
Metamaps.Filter.reset() Metamaps.Filter.reset()
// reset selected arrays // reset selected arrays
Metamaps.Selected.reset() Selected.reset()
// these three update the actual filter box with the right list items // these three update the actual filter box with the right list items
Metamaps.Filter.checkMetacodes() Metamaps.Filter.checkMetacodes()
@ -83,7 +82,7 @@ const Topic = {
Metamaps.Filter.checkMappers() Metamaps.Filter.checkMappers()
// for mobile // for mobile
$('#header_content').html(Metamaps.Active.Topic.get('name')) $('#header_content').html(Active.Topic.get('name'))
} }
$.ajax({ $.ajax({
@ -92,7 +91,7 @@ const Topic = {
}) })
}, },
end: function () { end: function () {
if (Metamaps.Active.Topic) { if (Active.Topic) {
$('.rightclickmenu').remove() $('.rightclickmenu').remove()
Metamaps.TopicCard.hideCard() Metamaps.TopicCard.hideCard()
Metamaps.SynapseCard.hideCard() Metamaps.SynapseCard.hideCard()
@ -110,7 +109,7 @@ const Topic = {
} }
}) })
Metamaps.Router.navigate('/topics/' + nodeid) Metamaps.Router.navigate('/topics/' + nodeid)
Metamaps.Active.Topic = Metamaps.Topics.get(nodeid) Active.Topic = Metamaps.Topics.get(nodeid)
} }
}, },
fetchRelatives: function (nodes, metacode_id) { fetchRelatives: function (nodes, metacode_id) {
@ -141,7 +140,7 @@ const Topic = {
topicColl.add(topic) topicColl.add(topic)
var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses) var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses)
var graph = Metamaps.JIT.convertModelsToJIT(topicColl, synapseColl)[0] var graph = JIT.convertModelsToJIT(topicColl, synapseColl)[0]
Metamaps.Visualize.mGraph.op.sum(graph, { Metamaps.Visualize.mGraph.op.sum(graph, {
type: 'fade', type: 'fade',
duration: 500, duration: 500,
@ -267,14 +266,14 @@ const Topic = {
mappableid: mappingModel.get('mappable_id') mappableid: mappingModel.get('mappable_id')
} }
$(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]) $(document).trigger(JIT.events.newTopic, [newTopicData])
// call a success callback if provided // call a success callback if provided
if (opts.success) { if (opts.success) {
opts.success(topicModel) opts.success(topicModel)
} }
} }
var topicSuccessCallback = function (topicModel, response) { var topicSuccessCallback = function (topicModel, response) {
if (Metamaps.Active.Map) { if (Active.Map) {
mapping.save({ mappable_id: topicModel.id }, { mapping.save({ mappable_id: topicModel.id }, {
success: function (model, response) { success: function (model, response) {
mappingSuccessCallback(model, response, topicModel) mappingSuccessCallback(model, response, topicModel)
@ -290,7 +289,7 @@ const Topic = {
} }
} }
if (!Metamaps.Settings.sandbox && createNewInDB) { if (!Settings.sandbox && createNewInDB) {
if (topic.isNew()) { if (topic.isNew()) {
topic.save(null, { topic.save(null, {
success: topicSuccessCallback, success: topicSuccessCallback,
@ -298,7 +297,7 @@ const Topic = {
console.log('error saving topic to database') console.log('error saving topic to database')
} }
}) })
} else if (!topic.isNew() && Metamaps.Active.Map) { } else if (!topic.isNew() && Active.Map) {
mapping.save(null, { mapping.save(null, {
success: mappingSuccessCallback success: mappingSuccessCallback
}) })
@ -323,7 +322,7 @@ const Topic = {
var topic = new Metamaps.Backbone.Topic({ var topic = new Metamaps.Backbone.Topic({
name: Metamaps.Create.newTopic.name, name: Metamaps.Create.newTopic.name,
metacode_id: metacode.id, metacode_id: metacode.id,
defer_to_map_id: Metamaps.Active.Map.id defer_to_map_id: Active.Map.id
}) })
Metamaps.Topics.add(topic) Metamaps.Topics.add(topic)

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

@ -1,16 +1,17 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import Mapper from './Mapper'
import Util from './Util'
import Visualize from './Visualize'
/* /*
* Metamaps.TopicCard.js * Metamaps.TopicCard.js
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.GlobalUI * - Metamaps.GlobalUI
* - Metamaps.Mapper
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Router * - Metamaps.Router
* - Metamaps.Util
* - Metamaps.Visualize
*/ */
const TopicCard = { const TopicCard = {
openTopicCard: null, // stores the topic that's currently open openTopicCard: null, // stores the topic that's currently open
@ -43,7 +44,7 @@ const TopicCard = {
var topic = node.getData('topic') var topic = node.getData('topic')
self.openTopicCard = topic self.openTopicCard = topic
self.authorizedToEdit = topic.authorizeToEdit(Metamaps.Active.Mapper) self.authorizedToEdit = topic.authorizeToEdit(Active.Mapper)
// populate the card that's about to show with the right topics data // populate the card that's about to show with the right topics data
self.populateShowCard(topic) self.populateShowCard(topic)
return $('.showcard').fadeIn('fast', function() { return $('.showcard').fadeIn('fast', function() {
@ -96,7 +97,7 @@ const TopicCard = {
var setMapperImage = function (mapper) { var setMapperImage = function (mapper) {
$('.contributorIcon').attr('src', mapper.get('image')) $('.contributorIcon').attr('src', mapper.get('image'))
} }
Metamaps.Mapper.get(topic.get('user_id'), setMapperImage) Mapper.get(topic.get('user_id'), setMapperImage)
// starting embed.ly // starting embed.ly
var resetFunc = function () { var resetFunc = function () {
@ -179,7 +180,7 @@ const TopicCard = {
topic.save({ topic.save({
metacode_id: metacode.id metacode_id: metacode.id
}) })
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
$('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge') $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
$('.metacodeTitle').hide() $('.metacodeTitle').hide()
$('.showcard .icon').css('z-index', '1') $('.showcard .icon').css('z-index', '1')
@ -265,7 +266,7 @@ const TopicCard = {
// bind best_in_place ajax callbacks // bind best_in_place ajax callbacks
bipName.bind('ajax:success', function () { bipName.bind('ajax:success', function () {
var name = Metamaps.Util.decodeEntities($(this).html()) var name = Util.decodeEntities($(this).html())
topic.set('name', name) topic.set('name', name)
topic.trigger('saved') topic.trigger('saved')
}) })
@ -313,7 +314,7 @@ const TopicCard = {
} }
// ability to change permission // ability to change permission
var selectingPermission = false var selectingPermission = false
if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) { if (topic.authorizePermissionChange(Active.Mapper)) {
$('.showcard .yourTopic .mapPerm').click(openPermissionSelect) $('.showcard .yourTopic .mapPerm').click(openPermissionSelect)
$('.showcard').click(hidePermissionSelect) $('.showcard').click(hidePermissionSelect)
} }
@ -364,11 +365,11 @@ const TopicCard = {
var topicForTemplate = self.buildObject(topic) var topicForTemplate = self.buildObject(topic)
var html = self.generateShowcardHTML.render(topicForTemplate) var html = self.generateShowcardHTML.render(topicForTemplate)
if (topic.authorizeToEdit(Metamaps.Active.Mapper)) { if (topic.authorizeToEdit(Active.Mapper)) {
var perm = document.createElement('div') var perm = document.createElement('div')
var string = 'permission canEdit' var string = 'permission canEdit'
if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) string += ' yourTopic' if (topic.authorizePermissionChange(Active.Mapper)) string += ' yourTopic'
perm.className = string perm.className = string
perm.innerHTML = html perm.innerHTML = html
showCard.appendChild(perm) showCard.appendChild(perm)
@ -388,7 +389,7 @@ const TopicCard = {
var nodeValues = {} var nodeValues = {}
var authorized = topic.authorizeToEdit(Metamaps.Active.Mapper) var authorized = topic.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
} else { } else {

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

@ -1,12 +1,14 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import ReactComponents from './ReactComponents'
import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
/* /*
* Metamaps.Views.js.erb * Metamaps.Views.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Loading * - Metamaps.Loading
* - Metamaps.Active
* - Metamaps.ReactComponents
*/ */
const Views = { const Views = {
@ -33,7 +35,7 @@ const Views = {
} }
var exploreObj = { var exploreObj = {
currentUser: Metamaps.Active.Mapper, currentUser: Active.Mapper,
section: self.collection.id, section: self.collection.id,
displayStyle: 'grid', displayStyle: 'grid',
maps: self.collection, maps: self.collection,
@ -42,7 +44,7 @@ const Views = {
loadMore: self.loadMore loadMore: self.loadMore
} }
ReactDOM.render( ReactDOM.render(
React.createElement(Metamaps.ReactComponents.Maps, exploreObj), React.createElement(ReactComponents.Maps, exploreObj),
document.getElementById('explore') document.getElementById('explore')
) )

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

@ -1,10 +1,12 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import JIT from './JIT'
/* /*
* Metamaps.Visualize * Metamaps.Visualize
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.JIT
* - Metamaps.Loading * - Metamaps.Loading
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Router * - Metamaps.Router
@ -34,7 +36,7 @@ const Visualize = {
// prevent touch events on the canvas from default behaviour // prevent touch events on the canvas from default behaviour
$('#infovis-canvas').bind('touchmove', function (event) { $('#infovis-canvas').bind('touchmove', function (event) {
// Metamaps.JIT.touchPanZoomHandler(event) // JIT.touchPanZoomHandler(event)
}) })
// prevent touch events on the canvas from default behaviour // prevent touch events on the canvas from default behaviour
@ -116,25 +118,25 @@ const Visualize = {
// clear the previous canvas from #infovis // clear the previous canvas from #infovis
$('#infovis').empty() $('#infovis').empty()
RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings) RGraphSettings = $.extend(true, {}, JIT.ForceDirected.graphSettings)
$jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings) $jit.RGraph.Plot.NodeTypes.implement(JIT.ForceDirected.nodeSettings)
$jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings) $jit.RGraph.Plot.EdgeTypes.implement(JIT.ForceDirected.edgeSettings)
RGraphSettings.width = $(document).width() RGraphSettings.width = $(document).width()
RGraphSettings.height = $(document).height() RGraphSettings.height = $(document).height()
RGraphSettings.background = Metamaps.JIT.RGraph.background RGraphSettings.background = JIT.RGraph.background
RGraphSettings.levelDistance = Metamaps.JIT.RGraph.levelDistance RGraphSettings.levelDistance = JIT.RGraph.levelDistance
self.mGraph = new $jit.RGraph(RGraphSettings) self.mGraph = new $jit.RGraph(RGraphSettings)
} else if (self.type == 'ForceDirected' && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) { } else if (self.type == 'ForceDirected' && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) {
// clear the previous canvas from #infovis // clear the previous canvas from #infovis
$('#infovis').empty() $('#infovis').empty()
FDSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings) FDSettings = $.extend(true, {}, JIT.ForceDirected.graphSettings)
$jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings) $jit.ForceDirected.Plot.NodeTypes.implement(JIT.ForceDirected.nodeSettings)
$jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings) $jit.ForceDirected.Plot.EdgeTypes.implement(JIT.ForceDirected.edgeSettings)
FDSettings.width = $('body').width() FDSettings.width = $('body').width()
FDSettings.height = $('body').height() FDSettings.height = $('body').height()
@ -145,14 +147,14 @@ const Visualize = {
$('#infovis').empty() $('#infovis').empty()
// init ForceDirected3D // init ForceDirected3D
self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings) self.mGraph = new $jit.ForceDirected3D(JIT.ForceDirected3D.graphSettings)
self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position
} else { } else {
self.mGraph.graph.empty() self.mGraph.graph.empty()
} }
if (self.type == 'ForceDirected' && Metamaps.Active.Mapper) $.post('/maps/' + Metamaps.Active.Map.id + '/events/user_presence') if (self.type == 'ForceDirected' && Active.Mapper) $.post('/maps/' + Active.Map.id + '/events/user_presence')
function runAnimation () { function runAnimation () {
Metamaps.Loading.hide() Metamaps.Loading.hide()
@ -160,22 +162,22 @@ const Visualize = {
if (!self.loadLater) { if (!self.loadLater) {
// load JSON data. // load JSON data.
var rootIndex = 0 var rootIndex = 0
if (Metamaps.Active.Topic) { if (Active.Topic) {
var node = _.find(Metamaps.JIT.vizData, function (node) { var node = _.find(JIT.vizData, function (node) {
return node.id === Metamaps.Active.Topic.id return node.id === Active.Topic.id
}) })
rootIndex = _.indexOf(Metamaps.JIT.vizData, node) rootIndex = _.indexOf(JIT.vizData, node)
} }
self.mGraph.loadJSON(Metamaps.JIT.vizData, rootIndex) self.mGraph.loadJSON(JIT.vizData, rootIndex)
// compute positions and plot. // compute positions and plot.
self.computePositions() self.computePositions()
self.mGraph.busy = true self.mGraph.busy = true
if (self.type == 'RGraph') { if (self.type == 'RGraph') {
self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate) self.mGraph.fx.animate(JIT.RGraph.animate)
} else if (self.type == 'ForceDirected') { } else if (self.type == 'ForceDirected') {
self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout) self.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (self.type == 'ForceDirected3D') { } else if (self.type == 'ForceDirected3D') {
self.mGraph.animate(Metamaps.JIT.ForceDirected.animateFDLayout) self.mGraph.animate(JIT.ForceDirected.animateFDLayout)
} }
} }
} }
@ -204,8 +206,8 @@ const Visualize = {
// update the url now that the map is ready // update the url now that the map is ready
clearTimeout(Metamaps.Router.timeoutId) clearTimeout(Metamaps.Router.timeoutId)
Metamaps.Router.timeoutId = setTimeout(function () { Metamaps.Router.timeoutId = setTimeout(function () {
var m = Metamaps.Active.Map var m = Active.Map
var t = Metamaps.Active.Topic var t = Active.Topic
if (m && window.location.pathname !== '/maps/' + m.id) { if (m && window.location.pathname !== '/maps/' + m.id) {
Metamaps.Router.navigate('/maps/' + m.id) Metamaps.Router.navigate('/maps/' + m.id)