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

eslint frontend folder (#923)

Browse source
This commit is contained in:
Devin Howard 2016-11-07 15:25:08 -05:00 committed by GitHub
parent 9df974a037
commit a176cdf231
61 changed files with 1723 additions and 1809 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc.js
View file

@ -20,6 +20,7 @@ module.exports = {
"rules": { "rules": {
"react/jsx-uses-react": [2], "react/jsx-uses-react": [2],
"react/jsx-uses-vars": [2], "react/jsx-uses-vars": [2],
"space-before-function-paren": [2, "never"],
"yoda": [2, "never", { "exceptRange": true }] "yoda": [2, "never", { "exceptRange": true }]
} }
} }

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

@ -1,33 +1,33 @@
/* global $, CanvasLoader */ /* global $, CanvasLoader */
const Account = { const Account = {
init: function (serverData) { init: function(serverData) {
Account.userIconUrl = serverData['user.png'] Account.userIconUrl = serverData['user.png']
}, },
listenersInitialized: false, listenersInitialized: false,
userIconUrl: null, userIconUrl: null,
initListeners: function () { initListeners: function() {
var self = Account var self = Account
$('#user_image').change(self.showImagePreview) $('#user_image').change(self.showImagePreview)
self.listenersInitialized = true self.listenersInitialized = true
}, },
toggleChangePicture: function () { toggleChangePicture: function() {
var self = Account var self = Account
$('.userImageMenu').toggle() $('.userImageMenu').toggle()
if (!self.listenersInitialized) self.initListeners() if (!self.listenersInitialized) self.initListeners()
}, },
openChangePicture: function () { openChangePicture: function() {
var self = Account var self = Account
$('.userImageMenu').show() $('.userImageMenu').show()
if (!self.listenersInitialized) self.initListeners() if (!self.listenersInitialized) self.initListeners()
}, },
closeChangePicture: function () { closeChangePicture: function() {
$('.userImageMenu').hide() $('.userImageMenu').hide()
}, },
showLoading: function () { showLoading: function() {
var loader = new CanvasLoader('accountPageLoading') var loader = new CanvasLoader('accountPageLoading')
loader.setColor('#4FC059') // default is '#000000' loader.setColor('#4FC059') // default is '#000000'
loader.setDiameter(28) // default is 40 loader.setDiameter(28) // default is 40
@ -36,12 +36,12 @@ const Account = {
loader.show() // Hidden by default loader.show() // Hidden by default
$('#accountPageLoading').show() $('#accountPageLoading').show()
}, },
showImagePreview: function () { showImagePreview: function() {
var file = $('#user_image')[0].files[0] var file = $('#user_image')[0].files[0]
var reader = new window.FileReader() var reader = new window.FileReader()
reader.onload = function (e) { reader.onload = function(e) {
var $canvas = $('<canvas>').attr({ var $canvas = $('<canvas>').attr({
width: 84, width: 84,
height: 84 height: 84
@ -49,7 +49,7 @@ const Account = {
var context = $canvas[0].getContext('2d') var context = $canvas[0].getContext('2d')
var imageObj = new window.Image() var imageObj = new window.Image()
imageObj.onload = function () { imageObj.onload = function() {
$('.userImageDiv canvas').remove() $('.userImageDiv canvas').remove()
$('.userImageDiv img').hide() $('.userImageDiv img').hide()
@ -80,7 +80,7 @@ const Account = {
$('#remove_image').val('0') $('#remove_image').val('0')
} }
}, },
removePicture: function () { removePicture: function() {
var self = Account var self = Account
$('.userImageDiv canvas').remove() $('.userImageDiv canvas').remove()
@ -91,15 +91,15 @@ const Account = {
input.replaceWith(input.val('').clone(true)) input.replaceWith(input.val('').clone(true))
$('#remove_image').val('1') $('#remove_image').val('1')
}, },
changeName: function () { changeName: function() {
$('.accountName').hide() $('.accountName').hide()
$('.changeName').show() $('.changeName').show()
}, },
showPass: function () { showPass: function() {
$('.toHide').show() $('.toHide').show()
$('.changePass').hide() $('.changePass').hide()
}, },
hidePass: function () { hidePass: function() {
$('.toHide').hide() $('.toHide').hide()
$('.changePass').show() $('.changePass').show()

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

@ -3,44 +3,43 @@
const Admin = { const Admin = {
selectMetacodes: [], selectMetacodes: [],
allMetacodes: [], allMetacodes: [],
init: function () { init: function() {
var self = Admin var self = Admin
$('#metacodes_value').val(self.selectMetacodes.toString()) $('#metacodes_value').val(self.selectMetacodes.toString())
}, },
selectAll: function () { selectAll: function() {
var self = Admin var self = Admin
$('.editMetacodes li').removeClass('toggledOff') $('.editMetacodes li').removeClass('toggledOff')
self.selectMetacodes = self.allMetacodes.slice(0) self.selectMetacodes = self.allMetacodes.slice(0)
$('#metacodes_value').val(self.selectMetacodes.toString()) $('#metacodes_value').val(self.selectMetacodes.toString())
}, },
deselectAll: function () { deselectAll: function() {
var self = Admin var self = Admin
$('.editMetacodes li').addClass('toggledOff') $('.editMetacodes li').addClass('toggledOff')
self.selectMetacodes = [] self.selectMetacodes = []
$('#metacodes_value').val(0) $('#metacodes_value').val(0)
}, },
liClickHandler: function () { liClickHandler: function() {
var self = Admin var self = Admin
if ($(this).attr('class') != 'toggledOff') { if ($(this).attr('class') !== 'toggledOff') {
$(this).addClass('toggledOff') $(this).addClass('toggledOff')
var value_to_remove = $(this).attr('id') const valueToRemove = $(this).attr('id')
self.selectMetacodes.splice(self.selectMetacodes.indexOf(value_to_remove), 1) self.selectMetacodes.splice(self.selectMetacodes.indexOf(valueToRemove), 1)
$('#metacodes_value').val(self.selectMetacodes.toString()) $('#metacodes_value').val(self.selectMetacodes.toString())
} } else if ($(this).attr('class') === 'toggledOff') {
else if ($(this).attr('class') == 'toggledOff') {
$(this).removeClass('toggledOff') $(this).removeClass('toggledOff')
self.selectMetacodes.push($(this).attr('id')) self.selectMetacodes.push($(this).attr('id'))
$('#metacodes_value').val(self.selectMetacodes.toString()) $('#metacodes_value').val(self.selectMetacodes.toString())
} }
}, },
validate: function () { validate: function() {
var self = Admin var self = Admin
if (self.selectMetacodes.length == 0) { if (self.selectMetacodes.length === 0) {
window.alert('Would you pretty please select at least one metacode for the set?') window.alert('Would you pretty please select at least one metacode for the set?')
return false return false
} }

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

@ -7,7 +7,7 @@ const AutoLayout = {
nextYshift: 0, nextYshift: 0,
timeToTurn: 0, timeToTurn: 0,
getNextCoord: function (opts = {}) { getNextCoord: function(opts = {}) {
var self = AutoLayout var self = AutoLayout
var nextX = self.nextX var nextX = self.nextX
var nextY = self.nextY var nextY = self.nextY
@ -28,22 +28,19 @@ const AutoLayout = {
self.timeToTurn = 0 self.timeToTurn = 0
// going right? turn down // going right? turn down
if (self.nextXshift == 1 && self.nextYshift == 0) { if (self.nextXshift === 1 && self.nextYshift === 0) {
self.nextXshift = 0 self.nextXshift = 0
self.nextYshift = 1 self.nextYshift = 1
} } else if (self.nextXshift === 0 && self.nextYshift === 1) {
// going down? turn left // going down? turn left
else if (self.nextXshift == 0 && self.nextYshift == 1) {
self.nextXshift = -1 self.nextXshift = -1
self.nextYshift = 0 self.nextYshift = 0
} } else if (self.nextXshift === -1 && self.nextYshift === 0) {
// going left? turn up // going left? turn up
else if (self.nextXshift == -1 && self.nextYshift == 0) {
self.nextXshift = 0 self.nextXshift = 0
self.nextYshift = -1 self.nextYshift = -1
} } else if (self.nextXshift === 0 && self.nextYshift === -1) {
// going up? turn right // going up? turn right
else if (self.nextXshift == 0 && self.nextYshift == -1) {
self.nextXshift = 1 self.nextXshift = 1
self.nextYshift = 0 self.nextYshift = 0
} }
@ -59,14 +56,14 @@ const AutoLayout = {
} }
} }
}, },
coordsTaken: function (x, y, mappings) { coordsTaken: function(x, y, mappings) {
if (mappings.findWhere({ xloc: x, yloc: y })) { if (mappings.findWhere({ xloc: x, yloc: y })) {
return true return true
} else { } else {
return false return false
} }
}, },
resetSpiral: function () { resetSpiral: function() {
var self = AutoLayout var self = AutoLayout
self.nextX = 0 self.nextX = 0
self.nextY = 0 self.nextY = 0

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

@ -14,16 +14,16 @@ import Settings from './Settings'
import Visualize from './Visualize' import Visualize from './Visualize'
const 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
if (filtered || 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')
Selected.Nodes.push(node) Selected.Nodes.push(node)
}, },
deselectAllNodes: function () { deselectAllNodes: function() {
var l = 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 = Selected.Nodes[i] var node = Selected.Nodes[i]
@ -31,7 +31,7 @@ const Control = {
} }
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')
@ -39,7 +39,7 @@ const Control = {
Selected.Nodes.splice( Selected.Nodes.splice(
Selected.Nodes.indexOf(node), 1) Selected.Nodes.indexOf(node), 1)
}, },
deleteSelected: function () { deleteSelected: function() {
if (!Active.Map) return if (!Active.Map) return
var n = Selected.Nodes.length var n = Selected.Nodes.length
@ -67,7 +67,7 @@ const Control = {
GlobalUI.showDiv('#instructions') GlobalUI.showDiv('#instructions')
} }
}, },
deleteSelectedNodes: function () { // refers to deleting topics permanently deleteSelectedNodes: function() { // refers to deleting topics permanently
if (!Active.Map) return if (!Active.Map) return
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
@ -83,7 +83,7 @@ const Control = {
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 (!Active.Map) return if (!Active.Map) return
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
@ -110,7 +110,7 @@ const Control = {
GlobalUI.notifyUser('Only topics you created can be deleted') GlobalUI.notifyUser('Only topics you created can be deleted')
} }
}, },
removeSelectedNodes: function () { // refers to removing topics permanently from a map removeSelectedNodes: function() { // refers to removing topics permanently from a map
if (Active.Topic) { if (Active.Topic) {
// hideNode will handle synapses as well // hideNode will handle synapses as well
var nodeids = _.map(Selected.Nodes, function(node) { var nodeids = _.map(Selected.Nodes, function(node) {
@ -126,22 +126,20 @@ const Control = {
} }
if (!Active.Map) return if (!Active.Map) return
var l = Selected.Nodes.length, const l = Selected.Nodes.length
i, const authorized = Active.Map.authorizeToEdit(Active.Mapper)
node,
authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
for (i = l - 1; i >= 0; i -= 1) { for (let i = l - 1; i >= 0; i -= 1) {
node = Selected.Nodes[i] const 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 (!Active.Map) return if (!Active.Map) return
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
@ -162,24 +160,21 @@ const Control = {
}]) }])
Control.hideNode(nodeid) Control.hideNode(nodeid)
}, },
hideSelectedNodes: function () { hideSelectedNodes: function() {
var l = Selected.Nodes.length, const l = Selected.Nodes.length
i, for (let i = l - 1; i >= 0; i -= 1) {
node const node = Selected.Nodes[i]
for (i = l - 1; i >= 0; i -= 1) {
node = Selected.Nodes[i]
Control.hideNode(node.id) Control.hideNode(node.id)
} }
}, },
hideNode: function (nodeid) { hideNode: function(nodeid) {
var node = Visualize.mGraph.graph.getNode(nodeid) var node = Visualize.mGraph.graph.getNode(nodeid)
var graph = Visualize.mGraph var graph = Visualize.mGraph
Control.deselectNode(node) Control.deselectNode(node)
node.setData('alpha', 0, 'end') node.setData('alpha', 0, 'end')
node.eachAdjacency(function (adj) { node.eachAdjacency(function(adj) {
adj.setData('alpha', 0, 'end') adj.setData('alpha', 0, 'end')
}) })
Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
@ -188,9 +183,9 @@ const Control = {
], ],
duration: 500 duration: 500
}) })
setTimeout(function () { setTimeout(function() {
if (nodeid === Visualize.mGraph.root) { // && 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
} }
Visualize.mGraph.graph.removeNode(nodeid) Visualize.mGraph.graph.removeNode(nodeid)
@ -198,10 +193,10 @@ const Control = {
Filter.checkMetacodes() Filter.checkMetacodes()
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 || Selected.Edges.indexOf(edge) != -1) return if (filtered || Selected.Edges.indexOf(edge) !== -1) return
var width = Mouse.edgeHoveringOver === edge ? 4 : 2 var width = Mouse.edgeHoveringOver === edge ? 4 : 2
edge.setDataset('current', { edge.setDataset('current', {
@ -213,7 +208,7 @@ const Control = {
Selected.Edges.push(edge) Selected.Edges.push(edge)
}, },
deselectAllEdges: function () { deselectAllEdges: function() {
var l = 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 = Selected.Edges[i] var edge = Selected.Edges[i]
@ -221,7 +216,7 @@ const Control = {
} }
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', {
@ -242,10 +237,7 @@ const Control = {
Selected.Edges.splice( Selected.Edges.splice(
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,
l = Selected.Edges.length
if (!Active.Map) return if (!Active.Map) return
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
@ -255,12 +247,13 @@ const Control = {
return return
} }
for (var i = l - 1; i >= 0; i -= 1) { const l = Selected.Edges.length
edge = Selected.Edges[i] for (let i = l - 1; i >= 0; i -= 1) {
const edge = Selected.Edges[i]
Control.deleteEdge(edge) Control.deleteEdge(edge)
} }
}, },
deleteEdge: function (edge) { deleteEdge: function(edge) {
if (!Active.Map) return if (!Active.Map) return
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
@ -297,13 +290,11 @@ const Control = {
GlobalUI.notifyUser('Only synapses you created can be deleted') GlobalUI.notifyUser('Only synapses you created can be deleted')
} }
}, },
removeSelectedEdges: function () { removeSelectedEdges: function() {
// Topic view is handled by removeSelectedNodes // Topic view is handled by removeSelectedNodes
if (!Active.Map) return if (!Active.Map) return
var l = Selected.Edges.length, const l = Selected.Edges.length
i,
edge
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
@ -312,13 +303,13 @@ const Control = {
return return
} }
for (i = l - 1; i >= 0; i -= 1) { for (let i = l - 1; i >= 0; i -= 1) {
edge = Selected.Edges[i] const edge = Selected.Edges[i]
Control.removeEdge(edge) Control.removeEdge(edge)
} }
Selected.Edges = [ ] Selected.Edges = [ ]
}, },
removeEdge: function (edge) { removeEdge: function(edge) {
if (!Active.Map) return if (!Active.Map) return
var authorized = Active.Map.authorizeToEdit(Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
@ -350,17 +341,15 @@ const Control = {
mappableid: mappableid mappableid: mappableid
}]) }])
}, },
hideSelectedEdges: function () { hideSelectedEdges: function() {
var edge, const l = Selected.Edges.length
l = Selected.Edges.length, for (let i = l - 1; i >= 0; i -= 1) {
i const edge = Selected.Edges[i]
for (i = l - 1; i >= 0; i -= 1) {
edge = Selected.Edges[i]
Control.hideEdge(edge) Control.hideEdge(edge)
} }
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')
@ -369,24 +358,24 @@ const Control = {
modes: ['edge-property:alpha'], modes: ['edge-property:alpha'],
duration: 500 duration: 500
}) })
setTimeout(function () { setTimeout(function() {
Visualize.mGraph.graph.removeAdjacence(from, to) Visualize.mGraph.graph.removeAdjacence(from, to)
}, 500) }, 500)
Filter.checkSynapses() Filter.checkSynapses()
Filter.checkMappers() Filter.checkMappers()
}, },
updateSelectedPermissions: function (permission) { updateSelectedPermissions: function(permission) {
var edge, synapse, node, topic var edge, synapse, node, topic
GlobalUI.notifyUser('Working...') GlobalUI.notifyUser('Working...')
// variables to keep track of how many nodes and synapses you had the ability to change the permission of // variables to keep track of how many nodes and synapses you had the ability to change the permission of
var nCount = 0, var nCount = 0
sCount = 0 var 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 = Selected.Edges.length const edgesLength = Selected.Edges.length
for (var i = l - 1; i >= 0; i -= 1) { for (let i = edgesLength - 1; i >= 0; i -= 1) {
edge = Selected.Edges[i] edge = Selected.Edges[i]
synapse = edge.getData('synapses')[0] synapse = edge.getData('synapses')[0]
@ -399,8 +388,8 @@ 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 = Selected.Nodes.length const nodesLength = Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) { for (let i = nodesLength - 1; i >= 0; i -= 1) {
node = Selected.Nodes[i] node = Selected.Nodes[i]
topic = node.getData('topic') topic = node.getData('topic')
@ -418,12 +407,12 @@ const Control = {
var message = nString + sString + ' you created updated to ' + permission var message = nString + sString + ' you created updated to ' + permission
GlobalUI.notifyUser(message) GlobalUI.notifyUser(message)
}, },
updateSelectedMetacodes: function (metacode_id) { updateSelectedMetacodes: function(metacodeId) {
var node, topic var node, topic
GlobalUI.notifyUser('Working...') GlobalUI.notifyUser('Working...')
var metacode = DataModel.Metacodes.get(metacode_id) var metacode = DataModel.Metacodes.get(metacodeId)
// variables to keep track of how many nodes and synapses you had the ability to change the permission of // variables to keep track of how many nodes and synapses you had the ability to change the permission of
var nCount = 0 var nCount = 0
@ -436,7 +425,7 @@ const Control = {
if (topic.authorizeToEdit(Active.Mapper)) { if (topic.authorizeToEdit(Active.Mapper)) {
topic.save({ topic.save({
'metacode_id': metacode_id 'metacode_id': metacodeId
}) })
nCount++ nCount++
} }

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

@ -16,7 +16,7 @@ const Create = {
newSelectedMetacodeNames: [], newSelectedMetacodeNames: [],
selectedMetacodes: [], selectedMetacodes: [],
newSelectedMetacodes: [], newSelectedMetacodes: [],
init: function () { init: function() {
var self = Create var self = Create
self.newTopic.init() self.newTopic.init()
self.newSynapse.init() self.newSynapse.init()
@ -29,23 +29,23 @@ const Create = {
$('#metacodeSwitchTabs .ui-tabs-nav li').removeClass('ui-corner-top').addClass('ui-corner-left') $('#metacodeSwitchTabs .ui-tabs-nav li').removeClass('ui-corner-top').addClass('ui-corner-left')
$('.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 = Create var self = Create
if ($(this).attr('class') != 'toggledOff') { if ($(this).attr('class') !== 'toggledOff') {
$(this).addClass('toggledOff') $(this).addClass('toggledOff')
var value_to_remove = $(this).attr('id') var valueToRemove = $(this).attr('id')
var name_to_remove = $(this).attr('data-name') var nameToRemove = $(this).attr('data-name')
self.newSelectedMetacodes.splice(self.newSelectedMetacodes.indexOf(value_to_remove), 1) self.newSelectedMetacodes.splice(self.newSelectedMetacodes.indexOf(valueToRemove), 1)
self.newSelectedMetacodeNames.splice(self.newSelectedMetacodeNames.indexOf(name_to_remove), 1) self.newSelectedMetacodeNames.splice(self.newSelectedMetacodeNames.indexOf(nameToRemove), 1)
} else if ($(this).attr('class') == 'toggledOff') { } else if ($(this).attr('class') === 'toggledOff') {
$(this).removeClass('toggledOff') $(this).removeClass('toggledOff')
self.newSelectedMetacodes.push($(this).attr('id')) self.newSelectedMetacodes.push($(this).attr('id'))
self.newSelectedMetacodeNames.push($(this).attr('data-name')) self.newSelectedMetacodeNames.push($(this).attr('data-name'))
} }
}, },
updateMetacodeSet: function (set, index, custom) { updateMetacodeSet: function(set, index, custom) {
if (custom && Create.newSelectedMetacodes.length == 0) { if (custom && Create.newSelectedMetacodes.length === 0) {
window.alert('Please select at least one metacode to use!') window.alert('Please select at least one metacode to use!')
return false return false
} }
@ -62,8 +62,7 @@ const Create = {
Create.selectedMetacodeNames = [] Create.selectedMetacodeNames = []
Create.newSelectedMetacodes = [] Create.newSelectedMetacodes = []
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
Create.selectedMetacodes = Create.newSelectedMetacodes.slice(0) Create.selectedMetacodes = Create.newSelectedMetacodes.slice(0)
Create.selectedMetacodeNames = Create.newSelectedMetacodeNames.slice(0) Create.selectedMetacodeNames = Create.newSelectedMetacodeNames.slice(0)
@ -79,7 +78,7 @@ const Create = {
$('#metacodeImg, #metacodeImgTitle').empty() $('#metacodeImg, #metacodeImgTitle').empty()
$('#metacodeImg').removeData('cloudcarousel') $('#metacodeImg').removeData('cloudcarousel')
var newMetacodes = '' var newMetacodes = ''
metacodeModels.each(function (metacode) { metacodeModels.each(function(metacode) {
newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + metacode.get('icon') + '" data-id="' + metacode.id + '" title="' + metacode.get('name') + '" alt="' + metacode.get('name') + '"/>' newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + metacode.get('icon') + '" data-id="' + metacode.id + '" title="' + metacode.get('name') + '" alt="' + metacode.get('name') + '"/>'
}) })
@ -107,20 +106,20 @@ const Create = {
dataType: 'json', dataType: 'json',
url: '/user/updatemetacodes', url: '/user/updatemetacodes',
data: mdata, data: mdata,
success: function (data) { success: function(data) {
console.log('selected metacodes saved') console.log('selected metacodes saved')
}, },
error: function () { error: function() {
console.log('failed to save selected metacodes') console.log('failed to save selected metacodes')
} }
}) })
}, },
cancelMetacodeSetSwitch: function () { cancelMetacodeSetSwitch: function() {
var self = Create var self = Create
self.isSwitchingSet = false self.isSwitchingSet = false
if (self.selectedMetacodeSet != 'metacodeset-custom') { if (self.selectedMetacodeSet !== 'metacodeset-custom') {
$('.customMetacodeList li').addClass('toggledOff') $('.customMetacodeList li').addClass('toggledOff')
self.selectedMetacodes = [] self.selectedMetacodes = []
self.selectedMetacodeNames = [] self.selectedMetacodeNames = []
@ -140,17 +139,16 @@ const Create = {
$('#topic_name').focus() $('#topic_name').focus()
}, },
newTopic: { newTopic: {
init: function () { init: function() {
$('#topic_name').keyup(function () { $('#topic_name').keyup(function() {
Create.newTopic.name = $(this).val() Create.newTopic.name = $(this).val()
}) })
$('.pinCarousel').click(function() { $('.pinCarousel').click(function() {
if (Create.newTopic.pinned) { if (Create.newTopic.pinned) {
$('.pinCarousel').removeClass('isPinned') $('.pinCarousel').removeClass('isPinned')
Create.newTopic.pinned = false Create.newTopic.pinned = false
} } else {
else {
$('.pinCarousel').addClass('isPinned') $('.pinCarousel').addClass('isPinned')
Create.newTopic.pinned = true Create.newTopic.pinned = true
} }
@ -174,18 +172,18 @@ const Create = {
[{ [{
name: 'topic_autocomplete', name: 'topic_autocomplete',
limit: 8, limit: 8,
display: function (s) { return s.label; }, display: function(s) { return s.label },
templates: { templates: {
suggestion: function (s) { suggestion: function(s) {
return Hogan.compile($('#topicAutocompleteTemplate').html()).render(s) return Hogan.compile($('#topicAutocompleteTemplate').html()).render(s)
} }
}, },
source: topicBloodhound, source: topicBloodhound
}] }]
) )
// 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) {
Create.newTopic.beingCreated = false Create.newTopic.beingCreated = false
if (datum.rtype === 'topic') { if (datum.rtype === 'topic') {
Topic.getTopicFromAutocomplete(datum.id) Topic.getTopicFromAutocomplete(datum.id)
@ -209,7 +207,7 @@ const Create = {
bringToFront: true bringToFront: true
}) })
$('.new_topic').hide() $('.new_topic').hide()
$('#new_topic').attr('oncontextmenu','return false') //prevents the mouse up event from opening the default context menu on this element $('#new_topic').attr('oncontextmenu', 'return false') // prevents the mouse up event from opening the default context menu on this element
}, },
name: null, name: null,
newId: 1, newId: 1,
@ -219,15 +217,15 @@ const Create = {
y: null, y: null,
addSynapse: false, addSynapse: false,
pinned: false, pinned: false,
open: function () { open: function() {
$('#new_topic').fadeIn('fast', function () { $('#new_topic').fadeIn('fast', function() {
$('#topic_name').focus() $('#topic_name').focus()
}) })
Create.newTopic.beingCreated = true Create.newTopic.beingCreated = true
Create.newTopic.name = '' Create.newTopic.name = ''
GlobalUI.hideDiv('#instructions') GlobalUI.hideDiv('#instructions')
}, },
hide: function (force) { hide: function(force) {
if (force || !Create.newTopic.pinned) { if (force || !Create.newTopic.pinned) {
$('#new_topic').fadeOut('fast') $('#new_topic').fadeOut('fast')
} }
@ -240,28 +238,26 @@ const Create = {
} }
Create.newTopic.beingCreated = false Create.newTopic.beingCreated = false
}, },
reset: function () { reset: function() {
$('#topic_name').typeahead('val', '') $('#topic_name').typeahead('val', '')
} }
}, },
newSynapse: { newSynapse: {
init: function () { init: function() {
var self = Create.newSynapse
var synapseBloodhound = new Bloodhound({ var synapseBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: { remote: {
url: '/search/synapses?term=%QUERY', url: '/search/synapses?term=%QUERY',
wildcard: '%QUERY', wildcard: '%QUERY'
}, }
}) })
var existingSynapseBloodhound = new Bloodhound({ var existingSynapseBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace,
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 = Create.newSynapse var self = Create.newSynapse
if (Selected.Nodes.length < 2 && self.topic1id && self.topic2id) { if (Selected.Nodes.length < 2 && self.topic1id && self.topic2id) {
settings.url = settings.url.replace('%TOPIC1', self.topic1id).replace('%TOPIC2', self.topic2id) settings.url = settings.url.replace('%TOPIC1', self.topic1id).replace('%TOPIC2', self.topic2id)
@ -269,42 +265,44 @@ const Create = {
} else { } else {
return null return null
} }
}, }
}, }
}) })
// initialize the autocomplete results for synapse creation // initialize the autocomplete results for synapse creation
$('#synapse_desc').typeahead( $('#synapse_desc').typeahead(
{ {
highlight: true, highlight: true,
minLength: 2, minLength: 2
}, },
[{ [{
name: 'synapse_autocomplete', name: 'synapse_autocomplete',
display: function (s) { return s.label; }, display: function(s) { return s.label },
templates: { templates: {
suggestion: function (s) { suggestion: function(s) {
return Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>").render(s) return Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>").render(s)
}, }
}, },
source: synapseBloodhound, source: synapseBloodhound
}, },
{ {
name: 'existing_synapses', name: 'existing_synapses',
limit: 50, limit: 50,
display: function (s) { return s.label; }, display: function(s) { return s.label },
templates: { templates: {
suggestion: function (s) { suggestion: function(s) {
return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s) return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s)
}, },
header: '<h3>Existing synapses</h3>' header: '<h3>Existing synapses</h3>'
}, },
source: existingSynapseBloodhound, source: existingSynapseBloodhound
}] }]
) )
$('#synapse_desc').keyup(function (e) { $('#synapse_desc').keyup(function(e) {
var ESC = 27, BACKSPACE = 8, DELETE = 46 const ESC = 27
const BACKSPACE = 8
const DELETE = 46
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) {
@ -313,13 +311,13 @@ const Create = {
Create.newSynapse.description = $(this).val() Create.newSynapse.description = $(this).val()
}) })
$('#synapse_desc').focusout(function () { $('#synapse_desc').focusout(function() {
if (Create.newSynapse.beingCreated) { if (Create.newSynapse.beingCreated) {
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
Synapse.getSynapseFromAutocomplete(datum.id) Synapse.getSynapseFromAutocomplete(datum.id)
} else { } else {
@ -333,13 +331,13 @@ const Create = {
topic1id: null, topic1id: null,
topic2id: null, topic2id: null,
newSynapseId: null, newSynapseId: null,
open: function () { open: function() {
$('#new_synapse').fadeIn(100, function () { $('#new_synapse').fadeIn(100, function() {
$('#synapse_desc').focus() $('#synapse_desc').focus()
}) })
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', '')
Create.newSynapse.beingCreated = false Create.newSynapse.beingCreated = false
@ -348,7 +346,7 @@ const Create = {
Create.newSynapse.topic2id = 0 Create.newSynapse.topic2id = 0
Mouse.synapseStartCoordinates = [] Mouse.synapseStartCoordinates = []
if (Visualize.mGraph) Visualize.mGraph.plot() if (Visualize.mGraph) Visualize.mGraph.plot()
}, }
} }
} }

25
frontend/src/Metamaps/DataModel/Map.js
View file

@ -9,18 +9,13 @@ import InfoBox from '../Map/InfoBox'
import Mapper from '../Mapper' import Mapper from '../Mapper'
import Realtime from '../Realtime' import Realtime from '../Realtime'
import MapperCollection from './MapperCollection'
import TopicCollection from './TopicCollection'
import SynapseCollection from './SynapseCollection'
import MappingCollection from './MappingCollection'
const Map = Backbone.Model.extend({ const Map = Backbone.Model.extend({
urlRoot: '/maps', urlRoot: '/maps',
blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'], blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
toJSON: function (options) { toJSON: function(options) {
return _.omit(this.attributes, this.blacklist) return _.omit(this.attributes, this.blacklist)
}, },
save: function (key, val, options) { save: function(key, val, options) {
var attrs var attrs
// Handle both `"key", value` and `{key: value}` -style arguments. // Handle both `"key", value` and `{key: value}` -style arguments.
@ -34,20 +29,20 @@ const Map = Backbone.Model.extend({
var newOptions = options || {} var newOptions = options || {}
var s = newOptions.success var s = newOptions.success
newOptions.success = function (model, response, opt) { newOptions.success = function(model, response, opt) {
if (s) s(model, response, opt) if (s) s(model, response, opt)
model.trigger('saved') model.trigger('saved')
} }
return Backbone.Model.prototype.save.call(this, attrs, newOptions) return Backbone.Model.prototype.save.call(this, attrs, newOptions)
}, },
initialize: function () { initialize: function() {
this.on('changeByOther', this.updateView) this.on('changeByOther', this.updateView)
this.on('saved', this.savedEvent) this.on('saved', this.savedEvent)
}, },
savedEvent: function () { savedEvent: function() {
Realtime.updateMap(this) Realtime.updateMap(this)
}, },
authorizeToEdit: function (mapper) { authorizeToEdit: function(mapper) {
if (mapper && ( if (mapper && (
this.get('permission') === 'commons' || this.get('permission') === 'commons' ||
(this.get('collaborator_ids') || []).includes(mapper.get('id')) || (this.get('collaborator_ids') || []).includes(mapper.get('id')) ||
@ -57,17 +52,17 @@ const Map = Backbone.Model.extend({
return false return false
} }
}, },
authorizePermissionChange: function (mapper) { authorizePermissionChange: function(mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) { if (mapper && this.get('user_id') === mapper.get('id')) {
return true return true
} else { } else {
return false return false
} }
}, },
getUser: function () { getUser: function() {
return Mapper.get(this.get('user_id')) return Mapper.get(this.get('user_id'))
}, },
updateView: function () { updateView: function() {
var map = Active.Map var map = Active.Map
var isActiveMap = this.id === map.id var isActiveMap = this.id === map.id
if (isActiveMap) { if (isActiveMap) {
@ -78,7 +73,7 @@ const Map = Backbone.Model.extend({
document.title = this.get('name') + ' | Metamaps' document.title = this.get('name') + ' | Metamaps'
} }
}, },
updateMapWrapper: function () { updateMapWrapper: function() {
var map = Active.Map var map = Active.Map
var isActiveMap = this.id === map.id var isActiveMap = this.id === map.id
var authorized = map && map.authorizeToEdit(Active.Mapper) ? 'canEditMap' : '' var authorized = map && map.authorizeToEdit(Active.Mapper) ? 'canEditMap' : ''

12
frontend/src/Metamaps/DataModel/MapCollection.js
View file

@ -7,7 +7,7 @@ import Map from './Map'
const MapCollection = Backbone.Collection.extend({ const MapCollection = Backbone.Collection.extend({
model: Map, model: Map,
initialize: function (models, options) { initialize: function(models, options) {
this.id = options.id this.id = options.id
this.sortBy = options.sortBy this.sortBy = options.sortBy
@ -18,14 +18,14 @@ const MapCollection = Backbone.Collection.extend({
// this.page represents the NEXT page to fetch // this.page represents the NEXT page to fetch
this.page = models.length > 0 ? (models.length < 20 ? 'loadedAll' : 2) : 1 this.page = models.length > 0 ? (models.length < 20 ? 'loadedAll' : 2) : 1
}, },
url: function () { url: function() {
if (!this.mapperId) { if (!this.mapperId) {
return '/explore/' + this.id + '.json' return '/explore/' + this.id + '.json'
} else { } else {
return '/explore/mapper/' + this.mapperId + '.json' return '/explore/mapper/' + this.mapperId + '.json'
} }
}, },
comparator: function (a, b) { comparator: function(a, b) {
a = a.get(this.sortBy) a = a.get(this.sortBy)
b = b.get(this.sortBy) b = b.get(this.sortBy)
var temp var temp
@ -42,7 +42,7 @@ const MapCollection = Backbone.Collection.extend({
} }
return a > b ? 1 : a < b ? -1 : 0 return a > b ? 1 : a < b ? -1 : 0
}, },
getMaps: function (cb) { getMaps: function(cb) {
var self = this var self = this
Loading.show() Loading.show()
@ -53,7 +53,7 @@ const MapCollection = Backbone.Collection.extend({
remove: false, remove: false,
silent: true, silent: true,
data: { page: this.page }, data: { page: this.page },
success: function (collection, response, options) { success: function(collection, response, options) {
// you can pass additional options to the event you trigger here as well // you can pass additional options to the event you trigger here as well
if (collection.length - numBefore < 20) { if (collection.length - numBefore < 20) {
self.page = 'loadedAll' self.page = 'loadedAll'
@ -62,7 +62,7 @@ const MapCollection = Backbone.Collection.extend({
} }
self.trigger('successOnFetch', cb) self.trigger('successOnFetch', cb)
}, },
error: function (collection, response, options) { error: function(collection, response, options) {
// you can pass additional options to the event you trigger here as well // you can pass additional options to the event you trigger here as well
self.trigger('errorOnFetch') self.trigger('errorOnFetch')
} }

4
frontend/src/Metamaps/DataModel/Mapper.js
View file

@ -6,10 +6,10 @@ import outdent from 'outdent'
const Mapper = Backbone.Model.extend({ const Mapper = Backbone.Model.extend({
urlRoot: '/users', urlRoot: '/users',
blacklist: ['created_at', 'updated_at'], blacklist: ['created_at', 'updated_at'],
toJSON: function (options) { toJSON: function(options) {
return _.omit(this.attributes, this.blacklist) return _.omit(this.attributes, this.blacklist)
}, },
prepareLiForFilter: function () { prepareLiForFilter: function() {
return outdent` return outdent`
<li data-id="${this.id}"> <li data-id="${this.id}">
<img src="${this.get('image')}" data-id="${this.id}" alt="${this.get('name')}" /> <img src="${this.get('image')}" data-id="${this.id}" alt="${this.get('name')}" />

10
frontend/src/Metamaps/DataModel/Mapping.js
View file

@ -10,10 +10,10 @@ import Topic from '../Topic'
const Mapping = Backbone.Model.extend({ const Mapping = Backbone.Model.extend({
urlRoot: '/mappings', urlRoot: '/mappings',
blacklist: ['created_at', 'updated_at'], blacklist: ['created_at', 'updated_at'],
toJSON: function (options) { toJSON: function(options) {
return _.omit(this.attributes, this.blacklist) return _.omit(this.attributes, this.blacklist)
}, },
initialize: function () { initialize: function() {
if (this.isNew()) { if (this.isNew()) {
this.set({ this.set({
'user_id': Active.Mapper.id, 'user_id': Active.Mapper.id,
@ -21,14 +21,14 @@ const Mapping = Backbone.Model.extend({
}) })
} }
}, },
getMap: function () { getMap: function() {
return Map.get(this.get('map_id')) return Map.get(this.get('map_id'))
}, },
getTopic: function () { getTopic: function() {
if (this.get('mappable_type') !== 'Topic') return false if (this.get('mappable_type') !== 'Topic') return false
return Topic.get(this.get('mappable_id')) return Topic.get(this.get('mappable_id'))
}, },
getSynapse: function () { getSynapse: function() {
if (this.get('mappable_type') !== 'Synapse') return false if (this.get('mappable_type') !== 'Synapse') return false
return Synapse.get(this.get('mappable_id')) return Synapse.get(this.get('mappable_id'))
} }

2
frontend/src/Metamaps/DataModel/Message.js
View file

@ -5,7 +5,7 @@ try { Backbone.$ = window.$ } catch (err) {}
const Message = Backbone.Model.extend({ const Message = Backbone.Model.extend({
urlRoot: '/messages', urlRoot: '/messages',
blacklist: ['created_at', 'updated_at'], blacklist: ['created_at', 'updated_at'],
toJSON: function (options) { toJSON: function(options) {
return _.omit(this.attributes, this.blacklist) return _.omit(this.attributes, this.blacklist)
} }
}) })

4
frontend/src/Metamaps/DataModel/Metacode.js
View file

@ -3,13 +3,13 @@ try { Backbone.$ = window.$ } catch (err) {}
import outdent from 'outdent' import outdent from 'outdent'
const Metacode = Backbone.Model.extend({ const Metacode = Backbone.Model.extend({
initialize: function () { initialize: function() {
var image = new window.Image() var image = new window.Image()
image.crossOrigin = 'Anonymous' image.crossOrigin = 'Anonymous'
image.src = this.get('icon') image.src = this.get('icon')
this.set('image', image) this.set('image', image)
}, },
prepareLiForFilter: function () { prepareLiForFilter: function() {
return outdent` return outdent`
<li data-id="${this.id}"> <li data-id="${this.id}">
<img src="${this.get('icon')}" data-id="${this.id}" alt="${this.get('name')}" /> <img src="${this.get('icon')}" data-id="${this.id}" alt="${this.get('name')}" />

2
frontend/src/Metamaps/DataModel/MetacodeCollection.js
View file

@ -6,7 +6,7 @@ import Metacode from './Metacode'
const MetacodeCollection = Backbone.Collection.extend({ const MetacodeCollection = Backbone.Collection.extend({
model: Metacode, model: Metacode,
url: '/metacodes', url: '/metacodes',
comparator: function (a, b) { comparator: function(a, b) {
a = a.get('name').toLowerCase() a = a.get('name').toLowerCase()
b = b.get('name').toLowerCase() b = b.get('name').toLowerCase()
return a > b ? 1 : a < b ? -1 : 0 return a > b ? 1 : a < b ? -1 : 0

38
frontend/src/Metamaps/DataModel/Synapse.js
View file

@ -17,10 +17,10 @@ import DataModel from './index'
const Synapse = Backbone.Model.extend({ const Synapse = Backbone.Model.extend({
urlRoot: '/synapses', urlRoot: '/synapses',
blacklist: ['edge', 'created_at', 'updated_at'], blacklist: ['edge', 'created_at', 'updated_at'],
toJSON: function (options) { toJSON: function(options) {
return _.omit(this.attributes, this.blacklist) return _.omit(this.attributes, this.blacklist)
}, },
save: function (key, val, options) { save: function(key, val, options) {
var attrs var attrs
// Handle both `"key", value` and `{key: value}` -style arguments. // Handle both `"key", value` and `{key: value}` -style arguments.
@ -36,7 +36,7 @@ const Synapse = Backbone.Model.extend({
var permBefore = this.get('permission') var permBefore = this.get('permission')
newOptions.success = function (model, response, opt) { newOptions.success = function(model, response, opt) {
if (s) s(model, response, opt) if (s) s(model, response, opt)
model.trigger('saved') model.trigger('saved')
@ -48,7 +48,7 @@ const Synapse = Backbone.Model.extend({
} }
return Backbone.Model.prototype.save.call(this, attrs, newOptions) return Backbone.Model.prototype.save.call(this, attrs, newOptions)
}, },
initialize: function () { initialize: function() {
if (this.isNew()) { if (this.isNew()) {
this.set({ this.set({
'user_id': Active.Mapper.id, 'user_id': Active.Mapper.id,
@ -60,7 +60,7 @@ const Synapse = Backbone.Model.extend({
this.on('changeByOther', this.updateCardView) this.on('changeByOther', this.updateCardView)
this.on('change', this.updateEdgeView) this.on('change', this.updateEdgeView)
this.on('saved', this.savedEvent) this.on('saved', this.savedEvent)
this.on('noLongerPrivate', function () { this.on('noLongerPrivate', function() {
var newSynapseData = { var newSynapseData = {
mappingid: this.getMapping().id, mappingid: this.getMapping().id,
mappableid: this.id mappableid: this.id
@ -68,7 +68,7 @@ const Synapse = Backbone.Model.extend({
$(document).trigger(JIT.events.newSynapse, [newSynapseData]) $(document).trigger(JIT.events.newSynapse, [newSynapseData])
}) })
this.on('nowPrivate', function () { this.on('nowPrivate', function() {
$(document).trigger(JIT.events.removeSynapse, [{ $(document).trigger(JIT.events.removeSynapse, [{
mappableid: this.id mappableid: this.id
}]) }])
@ -76,28 +76,28 @@ const Synapse = Backbone.Model.extend({
this.on('change:desc', Filter.checkSynapses, this) this.on('change:desc', Filter.checkSynapses, this)
}, },
prepareLiForFilter: function () { prepareLiForFilter: function() {
return outdent` return outdent`
<li data-id="${this.get('desc')}"> <li data-id="${this.get('desc')}">
<img src="${DataModel.synapseIconUrl}" alt="synapse icon" /> <img src="${DataModel.synapseIconUrl}" alt="synapse icon" />
<p>${this.get('desc')}</p> <p>${this.get('desc')}</p>
</li>` </li>`
}, },
authorizeToEdit: function (mapper) { authorizeToEdit: function(mapper) {
if (mapper && (this.get('calculated_permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || this.get('user_id') === mapper.get('id'))) return true if (mapper && (this.get('calculated_permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || this.get('user_id') === mapper.get('id'))) return true
else return false else return false
}, },
authorizePermissionChange: function (mapper) { authorizePermissionChange: function(mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) return true if (mapper && this.get('user_id') === mapper.get('id')) return true
else return false else return false
}, },
getTopic1: function () { getTopic1: function() {
return DataModel.Topics.get(this.get('topic1_id')) return DataModel.Topics.get(this.get('topic1_id'))
}, },
getTopic2: function () { getTopic2: function() {
return DataModel.Topics.get(this.get('topic2_id')) return DataModel.Topics.get(this.get('topic2_id'))
}, },
getDirection: function () { getDirection: function() {
var t1 = this.getTopic1() var t1 = this.getTopic1()
var t2 = this.getTopic2() var t2 = this.getTopic2()
@ -106,7 +106,7 @@ const Synapse = Backbone.Model.extend({
t2.get('node').id t2.get('node').id
] : false ] : false
}, },
getMapping: function () { getMapping: function() {
if (!Active.Map) return false if (!Active.Map) return false
return DataModel.Mappings.findWhere({ return DataModel.Mappings.findWhere({
@ -115,7 +115,7 @@ const Synapse = Backbone.Model.extend({
mappable_id: this.isNew() ? this.cid : this.id mappable_id: this.isNew() ? this.cid : this.id
}) })
}, },
createEdge: function (providedMapping) { createEdge: function(providedMapping) {
var mapping, mappingID var mapping, mappingID
var synapseID = this.isNew() ? this.cid : this.id var synapseID = this.isNew() ? this.cid : this.id
@ -137,7 +137,7 @@ const Synapse = Backbone.Model.extend({
return edge return edge
}, },
updateEdge: function () { updateEdge: function() {
var mapping var mapping
var edge = this.get('edge') var edge = this.get('edge')
edge.getData('synapses').push(this) edge.getData('synapses').push(this)
@ -149,14 +149,14 @@ const Synapse = Backbone.Model.extend({
return edge return edge
}, },
savedEvent: function () { savedEvent: function() {
Realtime.updateSynapse(this) Realtime.updateSynapse(this)
}, },
updateViews: function () { updateViews: function() {
this.updateCardView() this.updateCardView()
this.updateEdgeView() this.updateEdgeView()
}, },
updateCardView: function () { updateCardView: function() {
var onPageWithSynapseCard = Active.Map || Active.Topic var onPageWithSynapseCard = Active.Map || Active.Topic
var edge = this.get('edge') var edge = this.get('edge')
@ -165,7 +165,7 @@ const Synapse = Backbone.Model.extend({
SynapseCard.showCard(edge) SynapseCard.showCard(edge)
} }
}, },
updateEdgeView: function () { updateEdgeView: function() {
var onPageWithSynapseCard = Active.Map || Active.Topic var onPageWithSynapseCard = Active.Map || Active.Topic
var edge = this.get('edge') var edge = this.get('edge')

34
frontend/src/Metamaps/DataModel/Topic.js
View file

@ -16,10 +16,10 @@ import DataModel from './index'
const Topic = Backbone.Model.extend({ const Topic = Backbone.Model.extend({
urlRoot: '/topics', urlRoot: '/topics',
blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'], blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
toJSON: function (options) { toJSON: function(options) {
return _.omit(this.attributes, this.blacklist) return _.omit(this.attributes, this.blacklist)
}, },
save: function (key, val, options) { save: function(key, val, options) {
var attrs var attrs
// Handle both `"key", value` and `{key: value}` -style arguments. // Handle both `"key", value` and `{key: value}` -style arguments.
@ -35,7 +35,7 @@ const Topic = Backbone.Model.extend({
var permBefore = this.get('permission') var permBefore = this.get('permission')
newOptions.success = function (model, response, opt) { newOptions.success = function(model, response, opt) {
if (s) s(model, response, opt) if (s) s(model, response, opt)
model.trigger('saved') model.trigger('saved')
model.set('calculated_permission', model.get('permission')) model.set('calculated_permission', model.get('permission'))
@ -48,7 +48,7 @@ const Topic = Backbone.Model.extend({
} }
return Backbone.Model.prototype.save.call(this, attrs, newOptions) return Backbone.Model.prototype.save.call(this, attrs, newOptions)
}, },
initialize: function () { initialize: function() {
if (this.isNew()) { if (this.isNew()) {
this.set({ this.set({
'user_id': Active.Mapper.id, 'user_id': Active.Mapper.id,
@ -61,14 +61,14 @@ const Topic = Backbone.Model.extend({
this.on('changeByOther', this.updateCardView) this.on('changeByOther', this.updateCardView)
this.on('change', this.updateNodeView) this.on('change', this.updateNodeView)
this.on('saved', this.savedEvent) this.on('saved', this.savedEvent)
this.on('nowPrivate', function () { this.on('nowPrivate', function() {
var removeTopicData = { var removeTopicData = {
mappableid: this.id mappableid: this.id
} }
$(document).trigger(JIT.events.removeTopic, [removeTopicData]) $(document).trigger(JIT.events.removeTopic, [removeTopicData])
}) })
this.on('noLongerPrivate', function () { this.on('noLongerPrivate', function() {
var newTopicData = { var newTopicData = {
mappingid: this.getMapping().id, mappingid: this.getMapping().id,
mappableid: this.id mappableid: this.id
@ -79,7 +79,7 @@ const Topic = Backbone.Model.extend({
this.on('change:metacode_id', Filter.checkMetacodes, this) this.on('change:metacode_id', Filter.checkMetacodes, this)
}, },
authorizeToEdit: function (mapper) { authorizeToEdit: function(mapper) {
if (mapper && if (mapper &&
(this.get('user_id') === mapper.get('id') || (this.get('user_id') === mapper.get('id') ||
this.get('calculated_permission') === 'commons' || this.get('calculated_permission') === 'commons' ||
@ -89,15 +89,15 @@ const Topic = Backbone.Model.extend({
return false return false
} }
}, },
authorizePermissionChange: function (mapper) { authorizePermissionChange: function(mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) return true if (mapper && this.get('user_id') === mapper.get('id')) return true
else return false else return false
}, },
getDate: function () {}, getDate: function() {},
getMetacode: function () { getMetacode: function() {
return DataModel.Metacodes.get(this.get('metacode_id')) return DataModel.Metacodes.get(this.get('metacode_id'))
}, },
getMapping: function () { getMapping: function() {
if (!Active.Map) return false if (!Active.Map) return false
return DataModel.Mappings.findWhere({ return DataModel.Mappings.findWhere({
@ -106,7 +106,7 @@ const Topic = Backbone.Model.extend({
mappable_id: this.isNew() ? this.cid : this.id mappable_id: this.isNew() ? this.cid : this.id
}) })
}, },
createNode: function () { createNode: function() {
var mapping var mapping
var node = { var node = {
adjacencies: [], adjacencies: [],
@ -124,7 +124,7 @@ const Topic = Backbone.Model.extend({
return node return node
}, },
updateNode: function () { updateNode: function() {
var mapping var mapping
var node = this.get('node') var node = this.get('node')
node.setData('topic', this) node.setData('topic', this)
@ -136,10 +136,10 @@ const Topic = Backbone.Model.extend({
return node return node
}, },
savedEvent: function () { savedEvent: function() {
Realtime.updateTopic(this) Realtime.updateTopic(this)
}, },
updateViews: function () { updateViews: function() {
var onPageWithTopicCard = Active.Map || Active.Topic var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node') var node = this.get('node')
// update topic card, if this topic is the one open there // update topic card, if this topic is the one open there
@ -153,7 +153,7 @@ const Topic = Backbone.Model.extend({
Visualize.mGraph.plot() Visualize.mGraph.plot()
} }
}, },
updateCardView: function () { updateCardView: function() {
var onPageWithTopicCard = Active.Map || Active.Topic var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node') var node = this.get('node')
// update topic card, if this topic is the one open there // update topic card, if this topic is the one open there
@ -161,7 +161,7 @@ const Topic = Backbone.Model.extend({
TopicCard.showCard(node) TopicCard.showCard(node)
} }
}, },
updateNodeView: function () { updateNodeView: function() {
var onPageWithTopicCard = Active.Map || Active.Topic var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node') var node = this.get('node')

10
frontend/src/Metamaps/DataModel/index.js
View file

@ -54,7 +54,7 @@ const DataModel = {
Synapses: new SynapseCollection(), Synapses: new SynapseCollection(),
Topics: new TopicCollection(), Topics: new TopicCollection(),
init: function (serverData) { init: function(serverData) {
var self = DataModel var self = DataModel
// workaround circular import problem // workaround circular import problem
@ -101,18 +101,18 @@ const DataModel = {
self.attachCollectionEvents() self.attachCollectionEvents()
}, },
attachCollectionEvents: function () { attachCollectionEvents: function() {
DataModel.Topics.on('add remove', function (topic) { DataModel.Topics.on('add remove', function(topic) {
InfoBox.updateNumbers() InfoBox.updateNumbers()
Filter.checkMetacodes() Filter.checkMetacodes()
Filter.checkMappers() Filter.checkMappers()
}) })
DataModel.Synapses.on('add remove', function (synapse) { DataModel.Synapses.on('add remove', function(synapse) {
InfoBox.updateNumbers() InfoBox.updateNumbers()
Filter.checkSynapses() Filter.checkSynapses()
Filter.checkMappers() Filter.checkMappers()
}) })
DataModel.Mappings.on('add remove', function (mapping) { DataModel.Mappings.on('add remove', function(mapping) {
InfoBox.updateNumbers() InfoBox.updateNumbers()
Filter.checkSynapses() Filter.checkSynapses()
Filter.checkMetacodes() Filter.checkMetacodes()

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

@ -23,7 +23,7 @@ const Filter = {
}, },
isOpen: false, isOpen: false,
changing: false, changing: false,
init: function () { init: function() {
var self = Filter var self = Filter
$('.sidebarFilterIcon').click(self.toggleBox) $('.sidebarFilterIcon').click(self.toggleBox)
@ -38,7 +38,7 @@ const Filter = {
self.bindLiClicks() self.bindLiClicks()
self.getFilterData() self.getFilterData()
}, },
toggleBox: function (event) { toggleBox: function(event) {
var self = Filter var self = Filter
if (self.isOpen) self.close() if (self.isOpen) self.close()
@ -46,7 +46,7 @@ const Filter = {
event.stopPropagation() event.stopPropagation()
}, },
open: function () { open: function() {
var self = Filter var self = Filter
GlobalUI.Account.close() GlobalUI.Account.close()
@ -56,26 +56,26 @@ const Filter = {
self.changing = true self.changing = true
var height = $(document).height() - 108 var height = $(document).height() - 108
$('.sidebarFilterBox').css('max-height', height + 'px').fadeIn(200, function () { $('.sidebarFilterBox').css('max-height', height + 'px').fadeIn(200, function() {
self.changing = false self.changing = false
self.isOpen = true self.isOpen = true
}) })
} }
}, },
close: function () { close: function() {
var self = Filter var self = Filter
$('.sidebarFilterIcon div').removeClass('hide') $('.sidebarFilterIcon div').removeClass('hide')
if (!self.changing) { if (!self.changing) {
self.changing = true self.changing = true
$('.sidebarFilterBox').fadeOut(200, function () { $('.sidebarFilterBox').fadeOut(200, function() {
self.changing = false self.changing = false
self.isOpen = false self.isOpen = false
}) })
} }
}, },
reset: function () { reset: function() {
var self = Filter var self = Filter
self.filters.metacodes = [] self.filters.metacodes = []
@ -95,30 +95,30 @@ const Filter = {
Most of this data essentially depends on the ruby function which are happening for filter inside view filterBox Most of this data essentially depends on the ruby function which are happening for filter inside view filterBox
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 = Filter var self = Filter
var metacode, mapper, synapse var metacode, mapper, synapse
$('#filter_by_metacode li').each(function () { $('#filter_by_metacode li').each(function() {
metacode = $(this).attr('data-id') metacode = $(this).attr('data-id')
self.filters.metacodes.push(metacode) self.filters.metacodes.push(metacode)
self.visible.metacodes.push(metacode) self.visible.metacodes.push(metacode)
}) })
$('#filter_by_mapper li').each(function () { $('#filter_by_mapper li').each(function() {
mapper = ($(this).attr('data-id')) mapper = ($(this).attr('data-id'))
self.filters.mappers.push(mapper) self.filters.mappers.push(mapper)
self.visible.mappers.push(mapper) self.visible.mappers.push(mapper)
}) })
$('#filter_by_synapse li').each(function () { $('#filter_by_synapse li').each(function() {
synapse = ($(this).attr('data-id')) synapse = ($(this).attr('data-id'))
self.filters.synapses.push(synapse) self.filters.synapses.push(synapse)
self.visible.synapses.push(synapse) self.visible.synapses.push(synapse)
}) })
}, },
bindLiClicks: function () { bindLiClicks: function() {
var self = 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)
@ -129,7 +129,7 @@ const Filter = {
/* /*
@param @param
*/ */
updateFilters: function (collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) { updateFilters: function(collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) {
var self = Filter var self = Filter
var newList = [] var newList = []
@ -139,7 +139,7 @@ const Filter = {
// the first option enables us to accept // the first option enables us to accept
// ['Topics', 'Synapses'] as 'collection' // ['Topics', 'Synapses'] as 'collection'
if (typeof collection === 'object') { if (typeof collection === 'object') {
DataModel[collection[0]].each(function (model) { DataModel[collection[0]].each(function(model) {
var prop = model.get(propertyToCheck) var prop = model.get(propertyToCheck)
if (prop !== null) { if (prop !== null) {
prop = prop.toString() prop = prop.toString()
@ -148,7 +148,7 @@ const Filter = {
} }
} }
}) })
DataModel[collection[1]].each(function (model) { DataModel[collection[1]].each(function(model) {
var prop = model.get(propertyToCheck) var prop = model.get(propertyToCheck)
if (prop !== null) { if (prop !== null) {
prop = prop.toString() prop = prop.toString()
@ -158,7 +158,7 @@ const Filter = {
} }
}) })
} else if (typeof collection === 'string') { } else if (typeof collection === 'string') {
DataModel[collection].each(function (model) { DataModel[collection].each(function(model) {
var prop = model.get(propertyToCheck) var prop = model.get(propertyToCheck)
if (prop !== null) { if (prop !== null) {
prop = prop.toString() prop = prop.toString()
@ -173,8 +173,8 @@ const Filter = {
added = _.difference(newList, self.filters[filtersToUse]) added = _.difference(newList, self.filters[filtersToUse])
// remove the list items for things no longer present on the map // remove the list items for things no longer present on the map
_.each(removed, function (identifier) { _.each(removed, function(identifier) {
$('#filter_by_' + listToModify + ' li[data-id="' + identifier + '"]').fadeOut('fast', function () { $('#filter_by_' + listToModify + ' li[data-id="' + identifier + '"]').fadeOut('fast', function() {
$(this).remove() $(this).remove()
}) })
const index = self.visible[filtersToUse].indexOf(identifier) const index = self.visible[filtersToUse].indexOf(identifier)
@ -182,13 +182,13 @@ const Filter = {
}) })
var model, li, jQueryLi var model, li, jQueryLi
function sortAlpha (a, b) { function sortAlpha(a, b) {
return a.childNodes[1].innerHTML.toLowerCase() > b.childNodes[1].innerHTML.toLowerCase() ? 1 : -1 return a.childNodes[1].innerHTML.toLowerCase() > b.childNodes[1].innerHTML.toLowerCase() ? 1 : -1
} }
// for each new filter to be added, create a list item for it and fade it in // for each new filter to be added, create a list item for it and fade it in
_.each(added, function (identifier) { _.each(added, function(identifier) {
model = DataModel[correlatedModel].get(identifier) || model = DataModel[correlatedModel].get(identifier) ||
DataModel[correlatedModel].find(function (model) { DataModel[correlatedModel].find(function(model) {
return model.get(propertyToCheck) === identifier return model.get(propertyToCheck) === identifier
}) })
li = model.prepareLiForFilter() li = model.prepareLiForFilter()
@ -204,25 +204,24 @@ const Filter = {
// make sure clicks on list items still trigger the right events // make sure clicks on list items still trigger the right events
self.bindLiClicks() self.bindLiClicks()
}, },
checkMetacodes: function () { checkMetacodes: function() {
var self = 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 = Filter var self = Filter
var onMap = Active.Map ? true : false if (Active.Map) {
if (onMap) {
self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper') self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper')
} else { } else {
// on topic view // on topic view
self.updateFilters(['Topics', 'Synapses'], 'user_id', 'Creators', 'mappers', 'mapper') self.updateFilters(['Topics', 'Synapses'], 'user_id', 'Creators', 'mappers', 'mapper')
} }
}, },
checkSynapses: function () { checkSynapses: function() {
var self = 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 = Filter var self = Filter
$('#filter_by_metacode ul li').addClass('toggledOff') $('#filter_by_metacode ul li').addClass('toggledOff')
$('.showAllMetacodes').removeClass('active') $('.showAllMetacodes').removeClass('active')
@ -230,7 +229,7 @@ const Filter = {
self.visible.metacodes = [] self.visible.metacodes = []
self.passFilters() self.passFilters()
}, },
filterNoMetacodes: function (e) { filterNoMetacodes: function(e) {
var self = Filter var self = Filter
$('#filter_by_metacode ul li').removeClass('toggledOff') $('#filter_by_metacode ul li').removeClass('toggledOff')
$('.showAllMetacodes').addClass('active') $('.showAllMetacodes').addClass('active')
@ -238,7 +237,7 @@ const Filter = {
self.visible.metacodes = self.filters.metacodes.slice() self.visible.metacodes = self.filters.metacodes.slice()
self.passFilters() self.passFilters()
}, },
filterAllMappers: function (e) { filterAllMappers: function(e) {
var self = Filter var self = Filter
$('#filter_by_mapper ul li').addClass('toggledOff') $('#filter_by_mapper ul li').addClass('toggledOff')
$('.showAllMappers').removeClass('active') $('.showAllMappers').removeClass('active')
@ -246,7 +245,7 @@ const Filter = {
self.visible.mappers = [] self.visible.mappers = []
self.passFilters() self.passFilters()
}, },
filterNoMappers: function (e) { filterNoMappers: function(e) {
var self = Filter var self = Filter
$('#filter_by_mapper ul li').removeClass('toggledOff') $('#filter_by_mapper ul li').removeClass('toggledOff')
$('.showAllMappers').addClass('active') $('.showAllMappers').addClass('active')
@ -254,7 +253,7 @@ const Filter = {
self.visible.mappers = self.filters.mappers.slice() self.visible.mappers = self.filters.mappers.slice()
self.passFilters() self.passFilters()
}, },
filterAllSynapses: function (e) { filterAllSynapses: function(e) {
var self = Filter var self = Filter
$('#filter_by_synapse ul li').addClass('toggledOff') $('#filter_by_synapse ul li').addClass('toggledOff')
$('.showAllSynapses').removeClass('active') $('.showAllSynapses').removeClass('active')
@ -262,7 +261,7 @@ const Filter = {
self.visible.synapses = [] self.visible.synapses = []
self.passFilters() self.passFilters()
}, },
filterNoSynapses: function (e) { filterNoSynapses: function(e) {
var self = Filter var self = Filter
$('#filter_by_synapse ul li').removeClass('toggledOff') $('#filter_by_synapse ul li').removeClass('toggledOff')
$('.showAllSynapses').addClass('active') $('.showAllSynapses').addClass('active')
@ -273,28 +272,27 @@ const Filter = {
// an abstraction function for toggleMetacode, toggleMapper, toggleSynapse // an abstraction function for toggleMetacode, toggleMapper, toggleSynapse
// 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 = Filter, index var self = Filter
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)
$(this).removeClass('toggledOff') $(this).removeClass('toggledOff')
} else { } else {
index = self.visible[whichToFilter].indexOf(id) const index = self.visible[whichToFilter].indexOf(id)
self.visible[whichToFilter].splice(index, 1) self.visible[whichToFilter].splice(index, 1)
$(this).addClass('toggledOff') $(this).addClass('toggledOff')
} }
self.passFilters() self.passFilters()
}, },
toggleMetacode: function () { toggleMetacode: function() {
var self = 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) {
$('.showAllMetacodes').addClass('active') $('.showAllMetacodes').addClass('active')
$('.hideAllMetacodes').removeClass('active') $('.hideAllMetacodes').removeClass('active')
} } else if (self.visible.metacodes.length === 0) {
else if (self.visible.metacodes.length === 0) {
$('.showAllMetacodes').removeClass('active') $('.showAllMetacodes').removeClass('active')
$('.hideAllMetacodes').addClass('active') $('.hideAllMetacodes').addClass('active')
} else { } else {
@ -302,15 +300,14 @@ const Filter = {
$('.hideAllMetacodes').removeClass('active') $('.hideAllMetacodes').removeClass('active')
} }
}, },
toggleMapper: function () { toggleMapper: function() {
var self = 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) {
$('.showAllMappers').addClass('active') $('.showAllMappers').addClass('active')
$('.hideAllMappers').removeClass('active') $('.hideAllMappers').removeClass('active')
} } else if (self.visible.mappers.length === 0) {
else if (self.visible.mappers.length === 0) {
$('.showAllMappers').removeClass('active') $('.showAllMappers').removeClass('active')
$('.hideAllMappers').addClass('active') $('.hideAllMappers').addClass('active')
} else { } else {
@ -318,15 +315,14 @@ const Filter = {
$('.hideAllMappers').removeClass('active') $('.hideAllMappers').removeClass('active')
} }
}, },
toggleSynapse: function () { toggleSynapse: function() {
var self = 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) {
$('.showAllSynapses').addClass('active') $('.showAllSynapses').addClass('active')
$('.hideAllSynapses').removeClass('active') $('.hideAllSynapses').removeClass('active')
} } else if (self.visible.synapses.length === 0) {
else if (self.visible.synapses.length === 0) {
$('.showAllSynapses').removeClass('active') $('.showAllSynapses').removeClass('active')
$('.hideAllSynapses').addClass('active') $('.hideAllSynapses').addClass('active')
} else { } else {
@ -334,71 +330,65 @@ const Filter = {
$('.hideAllSynapses').removeClass('active') $('.hideAllSynapses').removeClass('active')
} }
}, },
passFilters: function () { passFilters: function() {
var self = Filter var self = Filter
var visible = self.visible var visible = self.visible
var passesMetacode, passesMapper, passesSynapse var passesMetacode, passesMapper, passesSynapse
var onMap
if (Active.Map) { var opacityForFilter = Active.Map ? 0 : 0.4
onMap = true
}
else if (Active.Topic) {
onMap = false
}
var opacityForFilter = onMap ? 0 : 0.4 DataModel.Topics.each(function(topic) {
DataModel.Topics.each(function (topic) {
var n = topic.get('node') var n = topic.get('node')
var metacode_id = topic.get('metacode_id').toString() var metacodeId = topic.get('metacode_id').toString()
if (visible.metacodes.indexOf(metacode_id) == -1) passesMetacode = false if (visible.metacodes.indexOf(metacodeId) === -1) passesMetacode = false
else passesMetacode = true else passesMetacode = true
if (onMap) { if (Active.Map) {
// when on a map, // when on a map,
// we filter by mapper according to the person who added the // we filter by mapper according to the person who added the
// topic or synapse to the map // topic or synapse to the map
var user_id = topic.getMapping().get('user_id').toString() let userId = topic.getMapping().get('user_id').toString()
if (visible.mappers.indexOf(user_id) == -1) passesMapper = false if (visible.mappers.indexOf(userId) === -1) passesMapper = false
else passesMapper = true else passesMapper = true
} else { } else {
// when on a topic view, // when on a topic view,
// we filter by mapper according to the person who created the // we filter by mapper according to the person who created the
// topic or synapse // topic or synapse
var user_id = topic.get('user_id').toString() let userId = topic.get('user_id').toString()
if (visible.mappers.indexOf(user_id) == -1) passesMapper = false if (visible.mappers.indexOf(userId) === -1) passesMapper = false
else passesMapper = true else passesMapper = true
} }
if (passesMetacode && passesMapper) { if (passesMetacode && passesMapper) {
if (n) { if (n) {
n.setData('alpha', 1, 'end') n.setData('alpha', 1, 'end')
} else {
console.log(topic)
} }
else console.log(topic)
} else { } else {
if (n) { if (n) {
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) {
Control.deselectEdge(e, true) Control.deselectEdge(e, true)
}) })
} else {
console.log(topic)
} }
else console.log(topic)
} }
}) })
// flag all the edges back to 'untouched' // flag all the edges back to 'untouched'
DataModel.Synapses.each(function (synapse) { DataModel.Synapses.each(function(synapse) {
var e = synapse.get('edge') var e = synapse.get('edge')
e.setData('touched', false) e.setData('touched', false)
}) })
DataModel.Synapses.each(function (synapse) { DataModel.Synapses.each(function(synapse) {
var e = synapse.get('edge') var e = synapse.get('edge')
var desc var desc
var user_id = synapse.get('user_id').toString() var userId = synapse.get('user_id').toString()
if (e && !e.getData('touched')) { if (e && !e.getData('touched')) {
var synapses = e.getData('synapses') var synapses = e.getData('synapses')
@ -406,7 +396,7 @@ const Filter = {
// if any of the synapses represent by the edge are still unfiltered // if any of the synapses represent by the edge are still unfiltered
// leave the edge visible // leave the edge visible
passesSynapse = false passesSynapse = false
for (var i = 0; i < synapses.length; i++) { for (let i = 0; i < synapses.length; i++) {
desc = synapses[i].get('desc') desc = synapses[i].get('desc')
if (visible.synapses.indexOf(desc) > -1) passesSynapse = true if (visible.synapses.indexOf(desc) > -1) passesSynapse = true
} }
@ -416,9 +406,9 @@ const Filter = {
var displayIndex = e.getData('displayIndex') ? e.getData('displayIndex') : 0 var displayIndex = e.getData('displayIndex') ? e.getData('displayIndex') : 0
var displayedSynapse = synapses[displayIndex] var displayedSynapse = synapses[displayIndex]
desc = displayedSynapse.get('desc') desc = displayedSynapse.get('desc')
if (passesSynapse && visible.synapses.indexOf(desc) == -1) { if (passesSynapse && visible.synapses.indexOf(desc) === -1) {
// iterate and find an unfiltered one // iterate and find an unfiltered one
for (var i = 0; i < synapses.length; i++) { for (let i = 0; i < synapses.length; i++) {
desc = synapses[i].get('desc') desc = synapses[i].get('desc')
if (visible.synapses.indexOf(desc) > -1) { if (visible.synapses.indexOf(desc) > -1) {
e.setData('displayIndex', i) e.setData('displayIndex', i)
@ -427,13 +417,13 @@ const Filter = {
} }
} }
if (onMap) { if (Active.Map) {
// when on a map, // when on a map,
// we filter by mapper according to the person who added the // we filter by mapper according to the person who added the
// topic or synapse to the map // topic or synapse to the map
user_id = synapse.getMapping().get('user_id').toString() userId = synapse.getMapping().get('user_id').toString()
} }
if (visible.mappers.indexOf(user_id) == -1) passesMapper = false if (visible.mappers.indexOf(userId) === -1) passesMapper = false
else passesMapper = true else passesMapper = true
var color = Settings.colors.synapses.normal var color = Settings.colors.synapses.normal
@ -446,8 +436,9 @@ const Filter = {
} }
e.setData('touched', true) e.setData('touched', true)
} else if (!e) {
console.log(synapse)
} }
else if (!e) console.log(synapse)
}) })
// run the animation // run the animation

14
frontend/src/Metamaps/GlobalUI/Account.js
View file

@ -5,16 +5,16 @@ import Filter from '../Filter'
const Account = { const Account = {
isOpen: false, isOpen: false,
changing: false, changing: false,
init: function () { init: function() {
var self = Account var self = Account
$('.sidebarAccountIcon').click(self.toggleBox) $('.sidebarAccountIcon').click(self.toggleBox)
$('.sidebarAccountBox').click(function (event) { $('.sidebarAccountBox').click(function(event) {
event.stopPropagation() event.stopPropagation()
}) })
$('body').click(self.close) $('body').click(self.close)
}, },
toggleBox: function (event) { toggleBox: function(event) {
var self = Account var self = Account
if (self.isOpen) self.close() if (self.isOpen) self.close()
@ -22,7 +22,7 @@ const Account = {
event.stopPropagation() event.stopPropagation()
}, },
open: function () { open: function() {
var self = Account var self = Account
Filter.close() Filter.close()
@ -30,21 +30,21 @@ const Account = {
if (!self.isOpen && !self.changing) { if (!self.isOpen && !self.changing) {
self.changing = true self.changing = true
$('.sidebarAccountBox').fadeIn(200, function () { $('.sidebarAccountBox').fadeIn(200, function() {
self.changing = false self.changing = false
self.isOpen = true self.isOpen = true
$('.sidebarAccountBox #user_email').focus() $('.sidebarAccountBox #user_email').focus()
}) })
} }
}, },
close: function () { close: function() {
var self = Account var self = Account
$('.sidebarAccountIcon .tooltipsUnder').removeClass('hide') $('.sidebarAccountIcon .tooltipsUnder').removeClass('hide')
if (!self.changing) { if (!self.changing) {
self.changing = true self.changing = true
$('.sidebarAccountBox #user_email').blur() $('.sidebarAccountBox #user_email').blur()
$('.sidebarAccountBox').fadeOut(200, function () { $('.sidebarAccountBox').fadeOut(200, function() {
self.changing = false self.changing = false
self.isOpen = false self.isOpen = false
}) })

28
frontend/src/Metamaps/GlobalUI/CreateMap.js
View file

@ -13,7 +13,7 @@ const CreateMap = {
emptyForkMapForm: '', emptyForkMapForm: '',
topicsToMap: [], topicsToMap: [],
synapsesToMap: [], synapsesToMap: [],
init: function () { init: function() {
var self = CreateMap var self = CreateMap
self.newMap = new DataModelMap({ permission: 'commons' }) self.newMap = new DataModelMap({ permission: 'commons' })
@ -22,14 +22,14 @@ const CreateMap = {
self.emptyMapForm = $('#new_map').html() self.emptyMapForm = $('#new_map').html()
}, },
bindFormEvents: function () { bindFormEvents: function() {
var self = CreateMap var self = CreateMap
$('.new_map input, .new_map div').unbind('keypress').bind('keypress', function (event) { $('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) {
if (event.keyCode === 13) self.submit() if (event.keyCode === 13) self.submit()
}) })
$('.new_map button.cancel').unbind().bind('click', function (event) { $('.new_map button.cancel').unbind().bind('click', function(event) {
event.preventDefault() event.preventDefault()
GlobalUI.closeLightbox() GlobalUI.closeLightbox()
}) })
@ -38,12 +38,12 @@ const CreateMap = {
// bind permission changer events on the createMap form // bind permission changer events on the createMap form
$('.permIcon').unbind().bind('click', self.switchPermission) $('.permIcon').unbind().bind('click', self.switchPermission)
}, },
closeSuccess: function () { closeSuccess: function() {
$('#mapCreatedSuccess').fadeOut(300, function () { $('#mapCreatedSuccess').fadeOut(300, function() {
$(this).remove() $(this).remove()
}) })
}, },
switchPermission: function () { switchPermission: function() {
var self = CreateMap var self = CreateMap
self.newMap.set('permission', $(this).attr('data-permission')) self.newMap.set('permission', $(this).attr('data-permission'))
@ -53,7 +53,7 @@ const CreateMap = {
var permText = $(this).find('.tip').html() var permText = $(this).find('.tip').html()
$(this).parents('.new_map').find('.permText').html(permText) $(this).parents('.new_map').find('.permText').html(permText)
}, },
submit: function (event) { submit: function(event) {
if (event) event.preventDefault() if (event) event.preventDefault()
var self = CreateMap var self = CreateMap
@ -82,22 +82,20 @@ const CreateMap = {
GlobalUI.closeLightbox() GlobalUI.closeLightbox()
GlobalUI.notifyUser('Working...') GlobalUI.notifyUser('Working...')
}, },
throwMapNameError: function () { throwMapNameError: function() {
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map' var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'
var $form = $(formId) var $form = $(formId)
var message = $("<div class='feedback_message'>Please enter a map name...</div>") var message = $("<div class='feedback_message'>Please enter a map name...</div>")
$form.find('#map_name').after(message) $form.find('#map_name').after(message)
setTimeout(function () { setTimeout(function() {
message.fadeOut('fast', function () { message.fadeOut('fast', function() {
message.remove() message.remove()
}) })
}, 5000) }, 5000)
}, },
success: function (model) { success: function(model) {
var self = CreateMap
// push the new map onto the collection of 'my maps' // push the new map onto the collection of 'my maps'
DataModel.Maps.Mine.add(model) DataModel.Maps.Mine.add(model)
@ -117,7 +115,7 @@ const CreateMap = {
return false return false
}) })
}, },
reset: function (id) { reset: function(id) {
var self = CreateMap var self = CreateMap
var form = $('#' + id) var form = $('#' + id)

6
frontend/src/Metamaps/GlobalUI/ImportDialog.js
View file

@ -12,7 +12,7 @@ const ImportDialog = {
openLightbox: null, openLightbox: null,
closeLightbox: null, closeLightbox: null,
init: function (serverData, openLightbox, closeLightbox) { init: function(serverData, openLightbox, closeLightbox) {
const self = ImportDialog const self = ImportDialog
self.openLightbox = openLightbox self.openLightbox = openLightbox
self.closeLightbox = closeLightbox self.closeLightbox = closeLightbox
@ -27,10 +27,10 @@ const ImportDialog = {
exampleImageUrl: serverData['import-example.png'] exampleImageUrl: serverData['import-example.png']
}), $('.importDialogWrapper').get(0)) }), $('.importDialogWrapper').get(0))
}, },
show: function () { show: function() {
ImportDialog.openLightbox('import-dialog') ImportDialog.openLightbox('import-dialog')
}, },
hide: function () { hide: function() {
ImportDialog.closeLightbox('import-dialog') ImportDialog.closeLightbox('import-dialog')
} }
} }

50
frontend/src/Metamaps/GlobalUI/Search.js
View file

@ -10,7 +10,7 @@ const Search = {
limitMapsToMe: false, limitMapsToMe: false,
changing: false, changing: false,
optionsInitialized: false, optionsInitialized: false,
init: function (serverData) { init: function(serverData) {
var self = Search var self = Search
self.wildcardIconUrl = serverData['icons/wildcard.png'] self.wildcardIconUrl = serverData['icons/wildcard.png']
@ -24,10 +24,10 @@ const Search = {
loader.setRange(0.9) // default is 1.3 loader.setRange(0.9) // default is 1.3
loader.show() // Hidden by default loader.show() // Hidden by default
$('.sidebarSearchIcon').click(function (e) { $('.sidebarSearchIcon').click(function(e) {
$('.sidebarSearchField').focus() $('.sidebarSearchField').focus()
}) })
$('.sidebarSearch').click(function (e) { $('.sidebarSearch').click(function(e) {
e.stopPropagation() e.stopPropagation()
}) })
@ -36,7 +36,7 @@ const Search = {
focus: function() { focus: function() {
$('.sidebarSearchField').focus() $('.sidebarSearchField').focus()
}, },
startTypeahead: function () { startTypeahead: function() {
var self = Search var self = Search
var mapheader = Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' var mapheader = Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>'
@ -49,7 +49,7 @@ const Search = {
display: s => s.label, display: s => s.label,
templates: { templates: {
notFound: function (s) { notFound: function(s) {
return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({ return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
value: 'No results', value: 'No results',
label: 'No results', label: 'No results',
@ -58,7 +58,7 @@ const Search = {
}) })
}, },
header: topicheader, header: topicheader,
suggestion: function (s) { suggestion: function(s) {
return Hogan.compile($('#topicSearchTemplate').html()).render(s) return Hogan.compile($('#topicSearchTemplate').html()).render(s)
} }
}, },
@ -67,7 +67,7 @@ const Search = {
queryTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: { remote: {
url: '/search/topics', url: '/search/topics',
prepare: function (query, settings) { prepare: function(query, settings) {
settings.url += '?term=' + query settings.url += '?term=' + query
if (Active.Mapper && self.limitTopicsToMe) { if (Active.Mapper && self.limitTopicsToMe) {
settings.url += '&user=' + Active.Mapper.id.toString() settings.url += '&user=' + Active.Mapper.id.toString()
@ -83,7 +83,7 @@ const Search = {
limit: 9999, limit: 9999,
display: s => s.label, display: s => s.label,
templates: { templates: {
notFound: function (s) { notFound: function(s) {
return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({ return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({
value: 'No results', value: 'No results',
label: 'No results', label: 'No results',
@ -91,7 +91,7 @@ const Search = {
}) })
}, },
header: mapheader, header: mapheader,
suggestion: function (s) { suggestion: function(s) {
return Hogan.compile($('#mapSearchTemplate').html()).render(s) return Hogan.compile($('#mapSearchTemplate').html()).render(s)
} }
}, },
@ -100,7 +100,7 @@ const Search = {
queryTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: { remote: {
url: '/search/maps', url: '/search/maps',
prepare: function (query, settings) { prepare: function(query, settings) {
settings.url += '?term=' + query settings.url += '?term=' + query
if (Active.Mapper && self.limitMapsToMe) { if (Active.Mapper && self.limitMapsToMe) {
settings.url += '&user=' + Active.Mapper.id.toString() settings.url += '&user=' + Active.Mapper.id.toString()
@ -116,7 +116,7 @@ const Search = {
limit: 9999, limit: 9999,
display: s => s.label, display: s => s.label,
templates: { templates: {
notFound: function (s) { notFound: function(s) {
return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({ return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({
value: 'No results', value: 'No results',
label: 'No results', label: 'No results',
@ -125,7 +125,7 @@ const Search = {
}) })
}, },
header: mapperheader, header: mapperheader,
suggestion: function (s) { suggestion: function(s) {
return Hogan.compile($('#mapperSearchTemplate').html()).render(s) return Hogan.compile($('#mapperSearchTemplate').html()).render(s)
} }
}, },
@ -148,7 +148,7 @@ const Search = {
) )
// Set max height of the search results box to prevent it from covering bottom left footer // Set max height of the search results box to prevent it from covering bottom left footer
$('.sidebarSearchField').bind('typeahead:render', function (event) { $('.sidebarSearchField').bind('typeahead:render', function(event) {
self.initSearchOptions() self.initSearchOptions()
self.hideLoader() self.hideLoader()
var h = $(window).height() var h = $(window).height()
@ -160,7 +160,7 @@ const Search = {
$('#limitMapsToMe').prop('checked', true) $('#limitMapsToMe').prop('checked', true)
} }
}) })
$(window).resize(function () { $(window).resize(function() {
var h = $(window).height() var h = $(window).height()
$('.tt-dropdown-menu').css('max-height', h - 100) $('.tt-dropdown-menu').css('max-height', h - 100)
}) })
@ -169,12 +169,12 @@ const Search = {
$('.sidebarSearchField').bind('typeahead:select', self.handleResultClick) $('.sidebarSearchField').bind('typeahead:select', self.handleResultClick)
// don't do it, if they clicked on a 'addToMap' button // don't do it, if they clicked on a 'addToMap' button
$('.sidebarSearch button.addToMap').click(function (event) { $('.sidebarSearch button.addToMap').click(function(event) {
event.stopPropagation() event.stopPropagation()
}) })
// make sure that when you click on 'limit to me' or 'toggle section' it works // make sure that when you click on 'limit to me' or 'toggle section' it works
$('.sidebarSearchField.tt-input').keyup(function () { $('.sidebarSearchField.tt-input').keyup(function() {
if ($('.sidebarSearchField.tt-input').val() === '') { if ($('.sidebarSearchField.tt-input').val() === '') {
self.hideLoader() self.hideLoader()
} else { } else {
@ -182,7 +182,7 @@ const Search = {
} }
}) })
}, },
handleResultClick: function (event, datum, dataset) { handleResultClick: function(event, datum, dataset) {
var self = Search var self = Search
self.hideLoader() self.hideLoader()
@ -197,10 +197,10 @@ const Search = {
} }
} }
}, },
initSearchOptions: function () { initSearchOptions: function() {
var self = Search var self = Search
function toggleResultSet (set) { function toggleResultSet(set) {
var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult') var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult')
if (s.is(':visible')) { if (s.is(':visible')) {
s.hide() s.hide()
@ -211,7 +211,7 @@ const Search = {
} }
} }
$('.limitToMe').unbind().bind('change', function (e) { $('.limitToMe').unbind().bind('change', function(e) {
if ($(this).attr('id') === 'limitTopicsToMe') { if ($(this).attr('id') === 'limitTopicsToMe') {
self.limitTopicsToMe = !self.limitTopicsToMe self.limitTopicsToMe = !self.limitTopicsToMe
} }
@ -227,20 +227,20 @@ const Search = {
}) })
// when the user clicks minimize section, hide the results for that section // when the user clicks minimize section, hide the results for that section
$('.minimizeMapperResults').unbind().click(function (e) { $('.minimizeMapperResults').unbind().click(function(e) {
toggleResultSet.call(this, 'mappers') toggleResultSet.call(this, 'mappers')
}) })
$('.minimizeTopicResults').unbind().click(function (e) { $('.minimizeTopicResults').unbind().click(function(e) {
toggleResultSet.call(this, 'topics') toggleResultSet.call(this, 'topics')
}) })
$('.minimizeMapResults').unbind().click(function (e) { $('.minimizeMapResults').unbind().click(function(e) {
toggleResultSet.call(this, 'maps') toggleResultSet.call(this, 'maps')
}) })
}, },
hideLoader: function () { hideLoader: function() {
$('#searchLoading').hide() $('#searchLoading').hide()
}, },
showLoader: function () { showLoader: function() {
$('#searchLoading').show() $('#searchLoading').show()
} }
} }

24
frontend/src/Metamaps/GlobalUI/index.js
View file

@ -12,7 +12,7 @@ import ImportDialog from './ImportDialog'
const GlobalUI = { const GlobalUI = {
notifyTimeout: null, notifyTimeout: null,
lightbox: null, lightbox: null,
init: function (serverData) { init: function(serverData) {
var self = GlobalUI var self = GlobalUI
self.Search.init(serverData) self.Search.init(serverData)
@ -23,7 +23,7 @@ const GlobalUI = {
if ($('#toast').html().trim()) self.notifyUser($('#toast').html()) if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
// bind lightbox clicks // bind lightbox clicks
$('.openLightbox').click(function (event) { $('.openLightbox').click(function(event) {
self.openLightbox($(this).attr('data-open')) self.openLightbox($(this).attr('data-open'))
event.preventDefault() event.preventDefault()
return false return false
@ -31,18 +31,18 @@ const GlobalUI = {
$('#lightbox_screen, #lightbox_close').click(self.closeLightbox) $('#lightbox_screen, #lightbox_close').click(self.closeLightbox)
}, },
showDiv: function (selector) { showDiv: function(selector) {
$(selector).show() $(selector).show()
$(selector).animate({ $(selector).animate({
opacity: 1 opacity: 1
}, 200, 'easeOutCubic') }, 200, 'easeOutCubic')
}, },
hideDiv: function (selector) { hideDiv: function(selector) {
$(selector).animate({ $(selector).animate({
opacity: 0 opacity: 0
}, 200, 'easeInCubic', function () { $(this).hide() }) }, 200, 'easeInCubic', function() { $(this).hide() })
}, },
openLightbox: function (which) { openLightbox: function(which) {
var self = GlobalUI var self = GlobalUI
$('.lightboxContent').hide() $('.lightboxContent').hide()
@ -69,7 +69,7 @@ const GlobalUI = {
} }
}, },
closeLightbox: function (event) { closeLightbox: function(event) {
var self = GlobalUI var self = GlobalUI
if (event) event.preventDefault() if (event) event.preventDefault()
@ -83,7 +83,7 @@ const GlobalUI = {
// fade the black overlay out // fade the black overlay out
$('#lightbox_screen').animate({ $('#lightbox_screen').animate({
'opacity': '0.0' 'opacity': '0.0'
}, 200, function () { }, 200, function() {
$('#lightbox_overlay').hide() $('#lightbox_overlay').hide()
}) })
@ -94,25 +94,25 @@ const GlobalUI = {
} }
self.lightbox = null self.lightbox = null
}, },
notifyUser: function (message, leaveOpen) { notifyUser: function(message, leaveOpen) {
var self = GlobalUI var self = GlobalUI
$('#toast').html(message) $('#toast').html(message)
self.showDiv('#toast') self.showDiv('#toast')
clearTimeout(self.notifyTimeOut) clearTimeout(self.notifyTimeOut)
if (!leaveOpen) { if (!leaveOpen) {
self.notifyTimeOut = setTimeout(function () { self.notifyTimeOut = setTimeout(function() {
self.hideDiv('#toast') self.hideDiv('#toast')
}, 8000) }, 8000)
} }
}, },
clearNotify: function () { clearNotify: function() {
var self = GlobalUI var self = GlobalUI
clearTimeout(self.notifyTimeOut) clearTimeout(self.notifyTimeOut)
self.hideDiv('#toast') self.hideDiv('#toast')
}, },
shareInvite: function (inviteLink) { shareInvite: function(inviteLink) {
clipboard.copy({ clipboard.copy({
'text/plain': inviteLink 'text/plain': inviteLink
}).then(() => { }).then(() => {

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

@ -19,14 +19,14 @@ const Import = {
synapseWhitelist: [ synapseWhitelist: [
'topic1', 'topic2', 'category', 'direction', 'desc', 'description', 'permission' 'topic1', 'topic2', 'category', 'direction', 'desc', 'description', 'permission'
], ],
cidMappings: {}, // to be filled by import_id => cid mappings cidMappings: {}, // to be filled by importId => cid mappings
handleTSV: function (text) { handleTSV: function(text) {
const results = Import.parseTabbedString(text) const results = Import.parseTabbedString(text)
Import.handle(results) Import.handle(results)
}, },
handleCSV: function (text, parserOpts = {}) { handleCSV: function(text, parserOpts = {}) {
const self = Import const self = Import
const topicsRegex = /("?Topics"?)([\s\S]*)/mi const topicsRegex = /("?Topics"?)([\s\S]*)/mi
@ -37,14 +37,14 @@ const Import = {
if (synapsesText) synapsesText = synapsesText[2].replace(topicsRegex, '') if (synapsesText) synapsesText = synapsesText[2].replace(topicsRegex, '')
// merge default options and extra options passed in parserOpts argument // merge default options and extra options passed in parserOpts argument
const csv_parser_options = Object.assign({ const csvParserOptions = Object.assign({
columns: true, // get headers columns: true, // get headers
relax_column_count: true, relax_column_count: true,
skip_empty_lines: true skip_empty_lines: true
}, parserOpts) }, parserOpts)
const topicsPromise = $.Deferred() const topicsPromise = $.Deferred()
parse(topicsText, csv_parser_options, (err, data) => { parse(topicsText, csvParserOptions, (err, data) => {
if (err) { if (err) {
console.warn(err) console.warn(err)
return topicsPromise.resolve([]) return topicsPromise.resolve([])
@ -53,7 +53,7 @@ const Import = {
}) })
const synapsesPromise = $.Deferred() const synapsesPromise = $.Deferred()
parse(synapsesText, csv_parser_options, (err, data) => { parse(synapsesText, csvParserOptions, (err, data) => {
if (err) { if (err) {
console.warn(err) console.warn(err)
return synapsesPromise.resolve([]) return synapsesPromise.resolve([])
@ -62,11 +62,11 @@ const Import = {
}) })
$.when(topicsPromise, synapsesPromise).done((topics, synapses) => { $.when(topicsPromise, synapsesPromise).done((topics, synapses) => {
self.handle({ topics, synapses}) self.handle({ topics, synapses })
}) })
}, },
handleJSON: function (text) { handleJSON: function(text) {
const results = JSON.parse(text) const results = JSON.parse(text)
Import.handle(results) Import.handle(results)
}, },
@ -80,13 +80,13 @@ const Import = {
if (window.confirm('Are you sure you want to create ' + topics.length + if (window.confirm('Are you sure you want to create ' + topics.length +
' new topics and ' + synapses.length + ' new synapses?')) { ' new topics and ' + synapses.length + ' new synapses?')) {
self.importTopics(topics) self.importTopics(topics)
//window.setTimeout(() => self.importSynapses(synapses), 5000) // window.setTimeout(() => self.importSynapses(synapses), 5000)
self.importSynapses(synapses) self.importSynapses(synapses)
} // if } // if
} // if } // if
}, },
parseTabbedString: function (text) { parseTabbedString: function(text) {
var self = Import var self = Import
// determine line ending and split lines // determine line ending and split lines
@ -113,9 +113,9 @@ const Import = {
var topicHeaders = [] var topicHeaders = []
var synapseHeaders = [] var synapseHeaders = []
lines.forEach(function (line_raw, index) { lines.forEach(function(lineRaw, index) {
var line = line_raw.split('\t') const line = lineRaw.split('\t')
var noblanks = line.filter(function (elt) { var noblanks = line.filter(function(elt) {
return elt !== '' return elt !== ''
}) })
switch (state) { switch (state) {
@ -139,7 +139,7 @@ const Import = {
self.abort('Not enough topic headers on line ' + index) self.abort('Not enough topic headers on line ' + index)
state = STATES.ABORT state = STATES.ABORT
} }
topicHeaders = line.map(function (header, index) { topicHeaders = line.map(function(header, index) {
return self.normalizeKey(header) return self.normalizeKey(header)
}) })
state = STATES.TOPICS state = STATES.TOPICS
@ -150,7 +150,7 @@ const Import = {
self.abort('Not enough synapse headers on line ' + index) self.abort('Not enough synapse headers on line ' + index)
state = STATES.ABORT state = STATES.ABORT
} }
synapseHeaders = line.map(function (header, index) { synapseHeaders = line.map(function(header, index) {
return self.normalizeKey(header) return self.normalizeKey(header)
}) })
state = STATES.SYNAPSES state = STATES.SYNAPSES
@ -165,7 +165,7 @@ const Import = {
state = STATES.SYNAPSES_NEED_HEADERS state = STATES.SYNAPSES_NEED_HEADERS
} else { } else {
var topic = {} var topic = {}
line.forEach(function (field, index) { line.forEach(function(field, index) {
var header = topicHeaders[index] var header = topicHeaders[index]
if (self.topicWhitelist.indexOf(header) === -1) return if (self.topicWhitelist.indexOf(header) === -1) return
topic[header] = field topic[header] = field
@ -186,7 +186,7 @@ const Import = {
state = STATES.SYNAPSES_NEED_HEADERS state = STATES.SYNAPSES_NEED_HEADERS
} else { } else {
var synapse = {} var synapse = {}
line.forEach(function (field, index) { line.forEach(function(field, index) {
var header = synapseHeaders[index] var header = synapseHeaders[index]
if (self.synapseWhitelist.indexOf(header) === -1) return if (self.synapseWhitelist.indexOf(header) === -1) return
synapse[header] = field synapse[header] = field
@ -212,7 +212,7 @@ const Import = {
} }
}, },
importTopics: function (parsedTopics) { importTopics: function(parsedTopics) {
var self = Import var self = Import
parsedTopics.forEach(topic => { parsedTopics.forEach(topic => {
@ -227,7 +227,7 @@ const Import = {
coords, coords,
name: topic.name, name: topic.name,
permission: topic.permission, permission: topic.permission,
import_id: topic.id importId: topic.id
}) })
return // "continue" return // "continue"
} }
@ -239,10 +239,10 @@ const Import = {
}) })
}, },
importSynapses: function (parsedSynapses) { importSynapses: function(parsedSynapses) {
var self = 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
// if there isn't a cidMapping, check by topic name instead // if there isn't a cidMapping, check by topic name instead
var topic1 = DataModel.Topics.get(self.cidMappings[synapse.topic1]) var topic1 = DataModel.Topics.get(self.cidMappings[synapse.topic1])
@ -277,31 +277,31 @@ const Import = {
}) })
}, },
createTopicWithParameters: function (name, metacode_name, permission, desc, createTopicWithParameters: function(name, metacodeName, permission, desc,
link, xloc, yloc, import_id, opts = {}) { link, xloc, yloc, importId, opts = {}) {
var self = Import var self = Import
$(document).trigger(Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
var metacode = DataModel.Metacodes.where({name: metacode_name})[0] || null var metacode = DataModel.Metacodes.where({name: metacodeName})[0] || null
if (metacode === null) { if (metacode === null) {
metacode = DataModel.Metacodes.where({ name: 'Wildcard' })[0] metacode = DataModel.Metacodes.where({ name: 'Wildcard' })[0]
console.warn("Couldn't find metacode " + metacode_name + ' so used Wildcard instead.') console.warn("Couldn't find metacode " + metacodeName + ' so used Wildcard instead.')
} }
var topic_permission = permission || Active.Map.get('permission') const topicPermision = permission || Active.Map.get('permission')
var defer_to_map_id = permission === topic_permission ? Active.Map.get('id') : null var deferToMapId = permission === topicPermision ? Active.Map.get('id') : null
var topic = new DataModel.Topic({ var topic = new DataModel.Topic({
name: name, name: name,
metacode_id: metacode.id, metacode_id: metacode.id,
permission: topic_permission, permission: topicPermision,
defer_to_map_id: defer_to_map_id, defer_to_map_id: deferToMapId,
desc: desc || '', desc: desc || '',
link: link || '', link: link || '',
calculated_permission: Active.Map.get('permission') calculated_permission: Active.Map.get('permission')
}) })
DataModel.Topics.add(topic) DataModel.Topics.add(topic)
if (import_id !== null && import_id !== undefined) { if (importId !== null && importId !== undefined) {
self.cidMappings[import_id] = topic.cid self.cidMappings[importId] = topic.cid
} }
var mapping = new DataModel.Mapping({ var mapping = new DataModel.Mapping({
@ -320,7 +320,7 @@ const Import = {
GlobalUI.hideDiv('#instructions') GlobalUI.hideDiv('#instructions')
}, },
createSynapseWithParameters: function (desc, category, permission, createSynapseWithParameters: function(desc, category, permission,
topic1, topic2) { topic1, topic2) {
var node1 = topic1.get('node') var node1 = topic1.get('node')
var node2 = topic2.get('node') var node2 = topic2.get('node')
@ -348,7 +348,7 @@ const Import = {
Synapse.renderSynapse(mapping, synapse, node1, node2, true) Synapse.renderSynapse(mapping, synapse, node1, node2, true)
}, },
handleURL: function (url, opts = {}) { handleURL: function(url, opts = {}) {
let coords = opts.coords let coords = opts.coords
if (!coords || coords.x === undefined || coords.y === undefined) { if (!coords || coords.x === undefined || coords.y === undefined) {
coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings }) coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
@ -356,7 +356,7 @@ const Import = {
const name = opts.name || 'Link' const name = opts.name || 'Link'
const metacode = opts.metacode || 'Reference' const metacode = opts.metacode || 'Reference'
const import_id = opts.import_id || null // don't store a cidMapping const importId = opts.importId || null // don't store a cidMapping
const permission = opts.permission || null // use default const permission = opts.permission || null // use default
const desc = opts.desc || url const desc = opts.desc || url
@ -368,7 +368,7 @@ const Import = {
url, url,
coords.x, coords.x,
coords.y, coords.y,
import_id, importId,
{ {
success: function(topic) { success: function(topic) {
if (topic.get('name') !== 'Link') return if (topic.get('name') !== 'Link') return
@ -393,12 +393,12 @@ const Import = {
* helper functions * helper functions
*/ */
abort: function (message) { abort: function(message) {
console.error(message) console.error(message)
}, },
// TODO investigate replacing with es6 (?) trim() // TODO investigate replacing with es6 (?) trim()
simplify: function (string) { simplify: function(string) {
return string return string
.replace(/(^\s*|\s*$)/g, '') .replace(/(^\s*|\s*$)/g, '')
.toLowerCase() .toLowerCase()

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

File diff suppressed because it is too large Load diff

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

@ -12,9 +12,9 @@ import Visualize from './Visualize'
import { Search } from './GlobalUI' import { Search } from './GlobalUI'
const Listeners = { const Listeners = {
init: function () { init: function() {
var self = this var self = this
$(document).on('keydown', function (e) { $(document).on('keydown', function(e) {
if (!(Active.Map || Active.Topic)) return if (!(Active.Map || Active.Topic)) return
const onCanvas = e.target.tagName === 'BODY' const onCanvas = e.target.tagName === 'BODY'
@ -35,7 +35,7 @@ const Listeners = {
Control.deselectAllEdges() Control.deselectAllEdges()
e.preventDefault() e.preventDefault()
Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function(n) {
Control.selectNode(n, e) Control.selectNode(n, e)
}) })
@ -110,7 +110,7 @@ const Listeners = {
} }
}) })
$(window).resize(function () { $(window).resize(function() {
if (Visualize && Visualize.mGraph) { if (Visualize && Visualize.mGraph) {
Util.resizeCanvas(Visualize.mGraph.canvas) Util.resizeCanvas(Visualize.mGraph.canvas)
} }
@ -119,11 +119,11 @@ const Listeners = {
Mobile.resizeTitle() Mobile.resizeTitle()
}) })
}, },
centerAndReveal: function (nodes, opts) { centerAndReveal: function(nodes, opts) {
if (nodes.length < 1) return if (nodes.length < 1) return
var node = nodes[nodes.length - 1] var node = nodes[nodes.length - 1]
if (opts.center && opts.reveal) { if (opts.center && opts.reveal) {
Topic.centerOn(node.id, function () { Topic.centerOn(node.id, function() {
Topic.fetchRelatives(nodes) Topic.fetchRelatives(nodes)
}) })
} else if (opts.center) { } else if (opts.center) {

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

@ -2,13 +2,13 @@
const Loading = { const Loading = {
loader: null, // needs CanvasLoader to be defined loader: null, // needs CanvasLoader to be defined
hide: function () { hide: function() {
$('#loading').hide() $('#loading').hide()
}, },
show: function () { show: function() {
$('#loading').show() $('#loading').show()
}, },
setup: function () { setup: function() {
if (!Loading.loader) Loading.loader = new CanvasLoader('loading') if (!Loading.loader) Loading.loader = new CanvasLoader('loading')
Loading.loader.setColor('#4fb5c0') // default is '#000000' Loading.loader.setColor('#4fb5c0') // default is '#000000'
Loading.loader.setDiameter(28) // default is 40 Loading.loader.setDiameter(28) // default is 40

32
frontend/src/Metamaps/Map/CheatSheet.js
View file

@ -1,28 +1,28 @@
/* global $ */ /* global $ */
const CheatSheet = { const CheatSheet = {
init: function () { init: function() {
// tab the cheatsheet // tab the cheatsheet
$('#cheatSheet').tabs() $('#cheatSheet').tabs()
$('#quickReference').tabs().addClass('ui-tabs-vertical ui-helper-clearfix') $('#quickReference').tabs().addClass('ui-tabs-vertical ui-helper-clearfix')
$('#quickReference .ui-tabs-nav li').removeClass('ui-corner-top').addClass('ui-corner-left') $('#quickReference .ui-tabs-nav li').removeClass('ui-corner-top').addClass('ui-corner-left')
// id = the id of a vimeo video // // id = the id of a vimeo video
var switchVideo = function (element, id) { // var switchVideo = function(element, id) {
$('.tutorialItem').removeClass('active') // $('.tutorialItem').removeClass('active')
$(element).addClass('active') // $(element).addClass('active')
$('#tutorialVideo').attr('src', '//player.vimeo.com/video/' + id) // $('#tutorialVideo').attr('src', '//player.vimeo.com/video/' + id)
} // }
$('#gettingStarted').click(function () { // $('#gettingStarted').click(function() {
// switchVideo(this,'88334167') // switchVideo(this,'88334167')
}) // })
$('#upYourSkillz').click(function () { // $('#upYourSkillz').click(function() {
// switchVideo(this,'100118167') // switchVideo(this,'100118167')
}) // })
$('#advancedMapping').click(function () { // $('#advancedMapping').click(function() {
// switchVideo(this,'88334167') // switchVideo(this,'88334167')
}) // })
} }
} }

151
frontend/src/Metamaps/Map/InfoBox.js
View file

@ -35,23 +35,23 @@ const InfoBox = {
data-bip-value="{{desc}}" data-bip-value="{{desc}}"
>{{desc}}</span>`, >{{desc}}</span>`,
userImageUrl: '', userImageUrl: '',
init: function (serverData) { init: function(serverData) {
var self = InfoBox var self = InfoBox
$('.mapInfoIcon').click(self.toggleBox) $('.mapInfoIcon').click(self.toggleBox)
$('.mapInfoBox').click(function (event) { $('.mapInfoBox').click(function(event) {
event.stopPropagation() event.stopPropagation()
}) })
$('body').click(self.close) $('body').click(self.close)
self.attachEventListeners() self.attachEventListeners()
self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html()) self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
self.userImageUrl = serverData['user.png'] self.userImageUrl = serverData['user.png']
var querystring = window.location.search.replace(/^\?/, '') var querystring = window.location.search.replace(/^\?/, '')
if (querystring == 'new') { if (querystring === 'new') {
self.open() self.open()
$('.mapInfoBox').addClass('mapRequestTitle') $('.mapInfoBox').addClass('mapRequestTitle')
$('#mapInfoName').trigger('click') $('#mapInfoName').trigger('click')
@ -59,7 +59,7 @@ const InfoBox = {
$('#mapInfoName textarea').select() $('#mapInfoName textarea').select()
} }
}, },
toggleBox: function (event) { toggleBox: function(event) {
var self = InfoBox var self = InfoBox
if (self.isOpen) self.close() if (self.isOpen) self.close()
@ -67,24 +67,24 @@ const InfoBox = {
event.stopPropagation() event.stopPropagation()
}, },
open: function () { open: function() {
var self = InfoBox var self = InfoBox
$('.mapInfoIcon div').addClass('hide') $('.mapInfoIcon div').addClass('hide')
if (!self.isOpen && !self.changing) { if (!self.isOpen && !self.changing) {
self.changing = true self.changing = true
$('.mapInfoBox').fadeIn(200, function () { $('.mapInfoBox').fadeIn(200, function() {
self.changing = false self.changing = false
self.isOpen = true self.isOpen = true
}) })
} }
}, },
close: function () { close: function() {
var self = InfoBox var self = InfoBox
$('.mapInfoIcon div').removeClass('hide') $('.mapInfoIcon div').removeClass('hide')
if (!self.changing) { if (!self.changing) {
self.changing = true self.changing = true
$('.mapInfoBox').fadeOut(200, function () { $('.mapInfoBox').fadeOut(200, function() {
self.changing = false self.changing = false
self.isOpen = false self.isOpen = false
self.hidePermissionSelect() self.hidePermissionSelect()
@ -92,7 +92,7 @@ const InfoBox = {
}) })
} }
}, },
load: function () { load: function() {
var self = InfoBox var self = InfoBox
var map = Active.Map var map = Active.Map
@ -127,14 +127,14 @@ const InfoBox = {
self.attachEventListeners() self.attachEventListeners()
}, },
attachEventListeners: function () { attachEventListeners: function() {
var self = InfoBox var self = InfoBox
$('.mapInfoBox.canEdit .best_in_place').best_in_place() $('.mapInfoBox.canEdit .best_in_place').best_in_place()
// because anyone who can edit the map can change the map title // because anyone who can edit the map can change the map title
var bipName = $('.mapInfoBox .best_in_place_name') var bipName = $('.mapInfoBox .best_in_place_name')
bipName.unbind('best_in_place:activate').bind('best_in_place:activate', function () { bipName.unbind('best_in_place:activate').bind('best_in_place:activate', function() {
var $el = bipName.find('textarea') var $el = bipName.find('textarea')
var el = $el[0] var el = $el[0]
@ -142,16 +142,16 @@ const InfoBox = {
$('.mapInfoName').append('<div class="nameCounter forMap"></div>') $('.mapInfoName').append('<div class="nameCounter forMap"></div>')
var callback = function (data) { var callback = function(data) {
$('.nameCounter.forMap').html(data.all + '/140') $('.nameCounter.forMap').html(data.all + '/140')
} }
Countable.live(el, callback) Countable.live(el, callback)
}) })
bipName.unbind('best_in_place:deactivate').bind('best_in_place:deactivate', function () { bipName.unbind('best_in_place:deactivate').bind('best_in_place:deactivate', function() {
$('.nameCounter.forMap').remove() $('.nameCounter.forMap').remove()
}) })
$('.mapInfoName .best_in_place_name').unbind('ajax:success').bind('ajax:success', function () { $('.mapInfoName .best_in_place_name').unbind('ajax:success').bind('ajax:success', function() {
var name = $(this).html() var name = $(this).html()
Active.Map.set('name', name) Active.Map.set('name', name)
Active.Map.trigger('saved') Active.Map.trigger('saved')
@ -162,7 +162,7 @@ const InfoBox = {
window.history.replaceState('', `${name} | Metamaps`, window.location.pathname) window.history.replaceState('', `${name} | Metamaps`, window.location.pathname)
}) })
$('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () { $('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function() {
var desc = $(this).html() var desc = $(this).html()
Active.Map.set('desc', desc) Active.Map.set('desc', desc)
Active.Map.trigger('saved') Active.Map.trigger('saved')
@ -182,76 +182,76 @@ const InfoBox = {
$('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap) $('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap)
$('.mapContributors span, #mapContribs').unbind().click(function (event) { $('.mapContributors span, #mapContribs').unbind().click(function(event) {
$('.mapContributors .tip').toggle() $('.mapContributors .tip').toggle()
event.stopPropagation() event.stopPropagation()
}) })
$('.mapContributors .tip').unbind().click(function (event) { $('.mapContributors .tip').unbind().click(function(event) {
event.stopPropagation() event.stopPropagation()
}) })
$('.mapContributors .tip li a').click(Router.intercept) $('.mapContributors .tip li a').click(Router.intercept)
$('.mapInfoBox').unbind('.hideTip').bind('click.hideTip', function () { $('.mapInfoBox').unbind('.hideTip').bind('click.hideTip', function() {
$('.mapContributors .tip').hide() $('.mapContributors .tip').hide()
}) })
self.addTypeahead() self.addTypeahead()
}, },
addTypeahead: function () { addTypeahead: function() {
var self = InfoBox var self = InfoBox
if (!Active.Map) return if (!Active.Map) return
// for autocomplete // for autocomplete
var collaborators = { var collaborators = {
name: 'collaborators', name: 'collaborators',
limit: 9999, limit: 9999,
display: function(s) { return s.label; }, display: function(s) { return s.label },
templates: { templates: {
notFound: function(s) { notFound: function(s) {
return Hogan.compile($('#collaboratorSearchTemplate').html()).render({ return Hogan.compile($('#collaboratorSearchTemplate').html()).render({
value: "No results", value: 'No results',
label: "No results", label: 'No results',
rtype: "noresult", rtype: 'noresult',
profile: self.userImageUrl profile: self.userImageUrl
}); })
},
suggestion: function(s) {
return Hogan.compile($('#collaboratorSearchTemplate').html()).render(s);
},
}, },
source: new Bloodhound({ suggestion: function(s) {
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), return Hogan.compile($('#collaboratorSearchTemplate').html()).render(s)
queryTokenizer: Bloodhound.tokenizers.whitespace, }
remote: { },
url: '/search/mappers?term=%QUERY', source: new Bloodhound({
wildcard: '%QUERY', datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
}, queryTokenizer: Bloodhound.tokenizers.whitespace,
}) remote: {
url: '/search/mappers?term=%QUERY',
wildcard: '%QUERY'
}
})
} }
// for adding map collaborators, who will have edit rights // for adding map collaborators, who will have edit rights
if (Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')) { if (Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')) {
$('.collaboratorSearchField').typeahead( $('.collaboratorSearchField').typeahead(
{ {
highlight: false, highlight: false
}, },
[collaborators] [collaborators]
) )
$('.collaboratorSearchField').bind('typeahead:select', self.handleResultClick) $('.collaboratorSearchField').bind('typeahead:select', self.handleResultClick)
$('.mapContributors .removeCollaborator').click(function () { $('.mapContributors .removeCollaborator').click(function() {
self.removeCollaborator(parseInt($(this).data('id'))) self.removeCollaborator(parseInt($(this).data('id')))
}) })
} }
}, },
removeCollaborator: function (collaboratorId) { removeCollaborator: function(collaboratorId) {
var self = InfoBox var self = InfoBox
DataModel.Collaborators.remove(DataModel.Collaborators.get(collaboratorId)) DataModel.Collaborators.remove(DataModel.Collaborators.get(collaboratorId))
var mapperIds = DataModel.Collaborators.models.map(function (mapper) { return mapper.id }) var mapperIds = DataModel.Collaborators.models.map(function(mapper) { return mapper.id })
$.post('/maps/' + Active.Map.id + '/access', { access: mapperIds }) $.post('/maps/' + Active.Map.id + '/access', { access: mapperIds })
self.updateNumbers() self.updateNumbers()
}, },
addCollaborator: function (newCollaboratorId) { addCollaborator: function(newCollaboratorId) {
var self = InfoBox var self = InfoBox
if (DataModel.Collaborators.get(newCollaboratorId)) { if (DataModel.Collaborators.get(newCollaboratorId)) {
@ -261,7 +261,7 @@ const InfoBox = {
function callback(mapper) { function callback(mapper) {
DataModel.Collaborators.add(mapper) DataModel.Collaborators.add(mapper)
var mapperIds = DataModel.Collaborators.models.map(function (mapper) { return mapper.id }) var mapperIds = DataModel.Collaborators.models.map(function(mapper) { return mapper.id })
$.post('/maps/' + Active.Map.id + '/access', { access: mapperIds }) $.post('/maps/' + Active.Map.id + '/access', { access: mapperIds })
var name = DataModel.Collaborators.get(newCollaboratorId).get('name') var name = DataModel.Collaborators.get(newCollaboratorId).get('name')
GlobalUI.notifyUser(name + ' will be notified by email') GlobalUI.notifyUser(name + ' will be notified by email')
@ -270,29 +270,28 @@ const InfoBox = {
$.getJSON('/users/' + newCollaboratorId + '.json', callback) $.getJSON('/users/' + newCollaboratorId + '.json', callback)
}, },
handleResultClick: function (event, item) { handleResultClick: function(event, item) {
var self = InfoBox var self = InfoBox
self.addCollaborator(item.id) self.addCollaborator(item.id)
$('.collaboratorSearchField').typeahead('val', '') $('.collaboratorSearchField').typeahead('val', '')
}, },
updateNameDescPerm: function (name, desc, perm) { updateNameDescPerm: function(name, desc, perm) {
$('.mapInfoBox').removeClass('mapRequestTitle') $('.mapInfoBox').removeClass('mapRequestTitle')
$('.mapInfoName .best_in_place_name').html(name) $('.mapInfoName .best_in_place_name').html(name)
$('.mapInfoDesc .best_in_place_desc').html(desc) $('.mapInfoDesc .best_in_place_desc').html(desc)
$('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm) $('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm)
}, },
createContributorList: function () { createContributorList: function() {
var self = InfoBox
var relevantPeople = Active.Map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators var relevantPeople = Active.Map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators
var activeMapperIsCreator = Active.Mapper && Active.Mapper.id === Active.Map.get('user_id') var activeMapperIsCreator = Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')
var string = '' var string = ''
string += '<ul>' string += '<ul>'
relevantPeople.each(function (m) { relevantPeople.each(function(m) {
var isCreator = Active.Map.get('user_id') === m.get('id') var isCreator = Active.Map.get('user_id') === m.get('id')
string += '<li><a href="/explore/mapper/' + m.get('id') + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get('image') + '" />' + m.get('name') string += '<li><a href="/explore/mapper/' + m.get('id') + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get('image') + '" />' + m.get('name')
if (isCreator) string += ' (creator)' if (isCreator) string += ' (creator)'
string += '</a>' string += '</a>'
if (activeMapperIsCreator && !isCreator) string += '<span class="removeCollaborator" data-id="' + m.get('id') + '"></span>' if (activeMapperIsCreator && !isCreator) string += '<span class="removeCollaborator" data-id="' + m.get('id') + '"></span>'
string += '</li>' string += '</li>'
@ -305,27 +304,30 @@ const InfoBox = {
} }
return string return string
}, },
updateNumbers: function () { updateNumbers: function() {
if (!Active.Map) return if (!Active.Map) return
var self = InfoBox const self = InfoBox
var mapper = Active.Mapper
var relevantPeople = Active.Map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators var relevantPeople = Active.Map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators
var contributors_class = '' let contributorsClass = ''
if (relevantPeople.length === 2) contributors_class = 'multiple mTwo' if (relevantPeople.length === 2) {
else if (relevantPeople.length > 2) contributors_class = 'multiple' contributorsClass = 'multiple mTwo'
} else if (relevantPeople.length > 2) {
contributorsClass = 'multiple'
}
var contributors_image = self.userImageUrl let contributorsImage = self.userImageUrl
if (relevantPeople.length > 0) { if (relevantPeople.length > 0) {
// get the first contributor and use their image // get the first contributor and use their image
contributors_image = relevantPeople.models[0].get('image') contributorsImage = relevantPeople.models[0].get('image')
} }
$('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class) $('.mapContributors img').attr('src', contributorsImage).removeClass('multiple mTwo').addClass(contributorsClass)
$('.mapContributors span').text(relevantPeople.length) $('.mapContributors span').text(relevantPeople.length)
$('.mapContributors .tip').html(self.createContributorList()) $('.mapContributors .tip').html(self.createContributorList())
self.addTypeahead() self.addTypeahead()
$('.mapContributors .tip').unbind().click(function (event) { $('.mapContributors .tip').unbind().click(function(event) {
event.stopPropagation() event.stopPropagation()
}) })
$('.mapTopics').text(DataModel.Topics.length) $('.mapTopics').text(DataModel.Topics.length)
@ -333,7 +335,7 @@ const InfoBox = {
$('.mapEditedAt').html('<span>Last edited: </span>' + Util.nowDateFormatted()) $('.mapEditedAt').html('<span>Last edited: </span>' + Util.nowDateFormatted())
}, },
onPermissionClick: function (event) { onPermissionClick: function(event) {
var self = InfoBox var self = InfoBox
if (!self.selectingPermission) { if (!self.selectingPermission) {
@ -350,14 +352,14 @@ const InfoBox = {
event.stopPropagation() event.stopPropagation()
} }
}, },
hidePermissionSelect: function () { hidePermissionSelect: function() {
var self = InfoBox var self = InfoBox
self.selectingPermission = false self.selectingPermission = false
$('.mapPermission').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow $('.mapPermission').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
$('.mapPermission .permissionSelect').remove() $('.mapPermission .permissionSelect').remove()
}, },
selectPermission: function (event) { selectPermission: function(event) {
var self = InfoBox var self = InfoBox
self.selectingPermission = false self.selectingPermission = false
@ -372,7 +374,7 @@ const InfoBox = {
$('.mapInfoBox').removeClass('shareable').addClass(shareable) $('.mapInfoBox').removeClass('shareable').addClass(shareable)
event.stopPropagation() event.stopPropagation()
}, },
deleteActiveMap: function () { deleteActiveMap: function() {
var confirmString = 'Are you sure you want to delete this map? ' var confirmString = 'Are you sure you want to delete this map? '
confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.' confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.'
@ -390,8 +392,7 @@ const InfoBox = {
map.destroy() map.destroy()
Router.home() Router.home()
GlobalUI.notifyUser('Map eliminated!') GlobalUI.notifyUser('Map eliminated!')
} } else if (!authorized) {
else if (!authorized) {
window.alert("Hey now. We can't just go around willy nilly deleting other people's maps now can we? Run off and find something constructive to do, eh?") window.alert("Hey now. We can't just go around willy nilly deleting other people's maps now can we? Run off and find something constructive to do, eh?")
} }
} }

144
frontend/src/Metamaps/Map/index.js
View file

@ -1,6 +1,7 @@
/* global $ */ /* global $ */
import outdent from 'outdent' import outdent from 'outdent'
import { find as _find } from 'lodash'
import Active from '../Active' import Active from '../Active'
import AutoLayout from '../AutoLayout' import AutoLayout from '../AutoLayout'
@ -25,19 +26,19 @@ const Map = {
events: { events: {
editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper' editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
}, },
init: function (serverData) { init: function(serverData) {
var self = Map var self = Map
$('#wrapper').mousedown(function (e){
if(e.button === 1)return false;
});
$('.starMap').click(function () { $('#wrapper').mousedown(function(e) {
if (e.button === 1) return false
})
$('.starMap').click(function() {
if ($(this).is('.starred')) self.unstar() if ($(this).is('.starred')) self.unstar()
else self.star() else self.star()
}) })
$('.sidebarFork').click(function () { $('.sidebarFork').click(function() {
self.fork() self.fork()
}) })
@ -51,26 +52,26 @@ const Map = {
$(document).on(Map.events.editedByActiveMapper, self.editedByActiveMapper) $(document).on(Map.events.editedByActiveMapper, self.editedByActiveMapper)
}, },
requestAccess: function () { requestAccess: function() {
$('.viewOnly').removeClass('sendRequest').addClass('sentRequest') $('.viewOnly').removeClass('sendRequest').addClass('sentRequest')
const mapId = Active.Map.id const mapId = Active.Map.id
$.post({ $.post({
url: `/maps/${mapId}/access_request` url: `/maps/${mapId}/access_request`
}) })
GlobalUI.notifyUser('Map creator will be notified of your request') GlobalUI.notifyUser('Map creator will be notified of your request')
}, },
setAccessRequest: function (requests, activeMapper) { setAccessRequest: function(requests, activeMapper) {
let className = 'isViewOnly ' let className = 'isViewOnly '
if (activeMapper) { if (activeMapper) {
const request = _.find(requests, r => r.user_id === activeMapper.id) const request = _find(requests, r => r.user_id === activeMapper.id)
if (!request) className += 'sendRequest' if (!request) className += 'sendRequest'
else if (request && !request.answered) className += 'sentRequest' else if (request && !request.answered) className += 'sentRequest'
else if (request && request.answered && !request.approved) className += 'requestDenied' else if (request && request.answered && !request.approved) className += 'requestDenied'
} }
$('.viewOnly').removeClass('sendRequest sentRequest requestDenied').addClass(className) $('.viewOnly').removeClass('sendRequest sentRequest requestDenied').addClass(className)
}, },
launch: function (id) { launch: function(id) {
var start = function (data) { var start = function(data) {
Active.Map = new DataModelMap(data.map) Active.Map = new DataModelMap(data.map)
DataModel.Mappers = new DataModel.MapperCollection(data.mappers) DataModel.Mappers = new DataModel.MapperCollection(data.mappers)
DataModel.Collaborators = new DataModel.MapperCollection(data.collaborators) DataModel.Collaborators = new DataModel.MapperCollection(data.collaborators)
@ -89,8 +90,7 @@ const Map = {
// add class to .wrapper for specifying whether you can edit the map // add class to .wrapper for specifying whether you can edit the map
if (map.authorizeToEdit(mapper)) { if (map.authorizeToEdit(mapper)) {
$('.wrapper').addClass('canEditMap') $('.wrapper').addClass('canEditMap')
} } else {
else {
Map.setAccessRequest(data.requests, mapper) Map.setAccessRequest(data.requests, mapper)
} }
@ -100,7 +100,7 @@ const Map = {
$('.wrapper').addClass('commonsMap') $('.wrapper').addClass('commonsMap')
} }
Map.updateStar() Map.updateStar()
// set filter mapper H3 text // set filter mapper H3 text
$('#filter_by_mapper h3').html('MAPPERS') $('#filter_by_mapper h3').html('MAPPERS')
@ -125,7 +125,7 @@ const Map = {
Realtime.startActiveMap() Realtime.startActiveMap()
Loading.hide() Loading.hide()
// for mobile // for mobile
$('#header_content').html(map.get('name')) $('#header_content').html(map.get('name'))
} }
@ -135,7 +135,7 @@ const Map = {
success: start success: start
}) })
}, },
end: function () { end: function() {
if (Active.Map) { if (Active.Map) {
$('.wrapper').removeClass('canEditMap commonsMap') $('.wrapper').removeClass('canEditMap commonsMap')
AutoLayout.resetSpiral() AutoLayout.resetSpiral()
@ -151,10 +151,10 @@ const Map = {
$('.viewOnly').removeClass('isViewOnly') $('.viewOnly').removeClass('isViewOnly')
} }
}, },
updateStar: function () { updateStar: function() {
if (!Active.Mapper || !DataModel.Stars) return if (!Active.Mapper || !DataModel.Stars) return
// update the star/unstar icon // update the star/unstar icon
if (DataModel.Stars.find(function (s) { return s.user_id === Active.Mapper.id })) { if (DataModel.Stars.find(function(s) { return s.user_id === Active.Mapper.id })) {
$('.starMap').addClass('starred') $('.starMap').addClass('starred')
$('.starMap .tooltipsAbove').html('Unstar') $('.starMap .tooltipsAbove').html('Unstar')
} else { } else {
@ -162,7 +162,7 @@ const Map = {
$('.starMap .tooltipsAbove').html('Star') $('.starMap .tooltipsAbove').html('Star')
} }
}, },
star: function () { star: function() {
var self = Map var self = Map
if (!Active.Map) return if (!Active.Map) return
@ -172,72 +172,72 @@ const Map = {
GlobalUI.notifyUser('Map is now starred') GlobalUI.notifyUser('Map is now starred')
self.updateStar() self.updateStar()
}, },
unstar: function () { unstar: function() {
var self = Map var self = Map
if (!Active.Map) return if (!Active.Map) return
$.post('/maps/' + Active.Map.id + '/unstar') $.post('/maps/' + Active.Map.id + '/unstar')
DataModel.Stars = DataModel.Stars.filter(function (s) { return s.user_id != Active.Mapper.id }) DataModel.Stars = DataModel.Stars.filter(function(s) { return s.user_id !== Active.Mapper.id })
DataModel.Maps.Starred.remove(Active.Map) DataModel.Maps.Starred.remove(Active.Map)
self.updateStar() self.updateStar()
}, },
fork: function () { fork: function() {
GlobalUI.openLightbox('forkmap') GlobalUI.openLightbox('forkmap')
var nodes_data = '', let nodesData = ''
synapses_data = '' let synapsesData = ''
var nodes_array = [] let nodesArray = []
var synapses_array = [] let synapsesArray = []
// collect the unfiltered topics // collect the unfiltered topics
Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function(n) {
// if the opacity is less than 1 then it's filtered // if the opacity is less than 1 then it's filtered
if (n.getData('alpha') === 1) { if (n.getData('alpha') === 1) {
var id = n.getData('topic').id var id = n.getData('topic').id
nodes_array.push(id) nodesArray.push(id)
var x, y let x, y
if (n.pos.x && n.pos.y) { if (n.pos.x && n.pos.y) {
x = n.pos.x x = n.pos.x
y = n.pos.y y = n.pos.y
} else { } else {
var x = Math.cos(n.pos.theta) * n.pos.rho x = Math.cos(n.pos.theta) * n.pos.rho
var y = Math.sin(n.pos.theta) * n.pos.rho y = Math.sin(n.pos.theta) * n.pos.rho
} }
nodes_data += id + '/' + x + '/' + y + ',' nodesData += id + '/' + x + '/' + y + ','
} }
}) })
// collect the unfiltered synapses // collect the unfiltered synapses
DataModel.Synapses.each(function (synapse) { DataModel.Synapses.each(function(synapse) {
var desc = synapse.get('desc') var desc = synapse.get('desc')
var descNotFiltered = Filter.visible.synapses.indexOf(desc) > -1 var descNotFiltered = Filter.visible.synapses.indexOf(desc) > -1
// make sure that both topics are being added, otherwise, it // make sure that both topics are being added, otherwise, it
// doesn't make sense to add the synapse // doesn't make sense to add the synapse
var topicsNotFiltered = nodes_array.indexOf(synapse.get('topic1_id')) > -1 var topicsNotFiltered = nodesArray.indexOf(synapse.get('topic1_id')) > -1
topicsNotFiltered = topicsNotFiltered && nodes_array.indexOf(synapse.get('topic2_id')) > -1 topicsNotFiltered = topicsNotFiltered && nodesArray.indexOf(synapse.get('topic2_id')) > -1
if (descNotFiltered && topicsNotFiltered) { if (descNotFiltered && topicsNotFiltered) {
synapses_array.push(synapse.id) synapsesArray.push(synapse.id)
} }
}) })
synapses_data = synapses_array.join() synapsesData = synapsesArray.join()
nodes_data = nodes_data.slice(0, -1) nodesData = nodesData.slice(0, -1)
GlobalUI.CreateMap.topicsToMap = nodes_data GlobalUI.CreateMap.topicsToMap = nodesData
GlobalUI.CreateMap.synapsesToMap = synapses_data GlobalUI.CreateMap.synapsesToMap = synapsesData
}, },
leavePrivateMap: function () { leavePrivateMap: function() {
var map = Active.Map var map = Active.Map
DataModel.Maps.Active.remove(map) DataModel.Maps.Active.remove(map)
DataModel.Maps.Featured.remove(map) DataModel.Maps.Featured.remove(map)
Router.home() Router.home()
GlobalUI.notifyUser('Sorry! That map has been changed to Private.') GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
}, },
cantEditNow: function () { cantEditNow: function() {
Realtime.turnOff(true); // true is for 'silence' Realtime.turnOff(true) // true is for 'silence'
GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.') GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.')
Active.Map.trigger('changeByOther') Active.Map.trigger('changeByOther')
}, },
canEditNow: function () { canEditNow: function() {
var confirmString = "You've been granted permission to edit this map. " var confirmString = "You've been granted permission to edit this map. "
confirmString += 'Do you want to reload and enable realtime collaboration?' confirmString += 'Do you want to reload and enable realtime collaboration?'
var c = window.confirm(confirmString) var c = window.confirm(confirmString)
@ -245,12 +245,12 @@ const Map = {
Router.maps(Active.Map.id) Router.maps(Active.Map.id)
} }
}, },
editedByActiveMapper: function () { editedByActiveMapper: function() {
if (Active.Mapper) { if (Active.Mapper) {
DataModel.Mappers.add(Active.Mapper) DataModel.Mappers.add(Active.Mapper)
} }
}, },
exportImage: function () { exportImage: function() {
var canvas = {} var canvas = {}
canvas.canvas = document.createElement('canvas') canvas.canvas = document.createElement('canvas')
@ -263,7 +263,7 @@ const Map = {
canvas.translateOffsetX = 0 canvas.translateOffsetX = 0
canvas.denySelected = true canvas.denySelected = true
canvas.getSize = function () { canvas.getSize = function() {
if (this.size) return this.size if (this.size) return this.size
var canvas = this.canvas var canvas = this.canvas
this.size = { this.size = {
@ -272,24 +272,24 @@ const Map = {
} }
return this.size return this.size
} }
canvas.scale = function (x, y) { canvas.scale = function(x, y) {
var px = this.scaleOffsetX * x, const px = this.scaleOffsetX * x
py = this.scaleOffsetY * y const py = this.scaleOffsetY * y
var dx = this.translateOffsetX * (x - 1) / px, const dx = this.translateOffsetX * (x - 1) / px
dy = this.translateOffsetY * (y - 1) / py const dy = this.translateOffsetY * (y - 1) / py
this.scaleOffsetX = px this.scaleOffsetX = px
this.scaleOffsetY = py this.scaleOffsetY = py
this.getCtx().scale(x, y) this.getCtx().scale(x, y)
this.translate(dx, dy) this.translate(dx, dy)
} }
canvas.translate = function (x, y) { canvas.translate = function(x, y) {
var sx = this.scaleOffsetX, const sx = this.scaleOffsetX
sy = this.scaleOffsetY const sy = this.scaleOffsetY
this.translateOffsetX += x * sx this.translateOffsetX += x * sx
this.translateOffsetY += y * sy this.translateOffsetY += y * sy
this.getCtx().translate(x, y) this.getCtx().translate(x, y)
} }
canvas.getCtx = function () { canvas.getCtx = function() {
return this.canvas.getContext('2d') return this.canvas.getContext('2d')
} }
// center it // center it
@ -304,20 +304,20 @@ const Map = {
// pass true to avoid basing it on a selection // pass true to avoid basing it on a selection
JIT.zoomExtents(null, canvas, true) JIT.zoomExtents(null, canvas, true)
var c = canvas.canvas, const c = canvas.canvas
ctx = canvas.getCtx(), const ctx = canvas.getCtx()
scale = canvas.scaleOffsetX const scale = canvas.scaleOffsetX
// draw a grey background // draw a grey background
ctx.fillStyle = '#d8d9da' ctx.fillStyle = '#d8d9da'
var xPoint = (-(c.width / scale) / 2) - (canvas.translateOffsetX / scale), const xPoint = (-(c.width / scale) / 2) - (canvas.translateOffsetX / scale)
yPoint = (-(c.height / scale) / 2) - (canvas.translateOffsetY / scale) const yPoint = (-(c.height / scale) / 2) - (canvas.translateOffsetY / scale)
ctx.fillRect(xPoint, yPoint, c.width / scale, c.height / scale) ctx.fillRect(xPoint, yPoint, c.width / scale, c.height / scale)
// draw the graph // draw the graph
mGraph.graph.eachNode(function (node) { mGraph.graph.eachNode(function(node) {
var nodeAlpha = node.getData('alpha') var nodeAlpha = node.getData('alpha')
node.eachAdjacency(function (adj) { node.eachAdjacency(function(adj) {
var nodeTo = adj.nodeTo var nodeTo = adj.nodeTo
if (!!nodeTo.visited === T && node.drawn && nodeTo.drawn) { if (!!nodeTo.visited === T && node.drawn && nodeTo.drawn) {
mGraph.fx.plotLine(adj, canvas) mGraph.fx.plotLine(adj, canvas)
@ -340,7 +340,7 @@ const Map = {
var today = new Date() var today = new Date()
var dd = today.getDate() var dd = today.getDate()
var mm = today.getMonth() + 1; // January is 0! var mm = today.getMonth() + 1 // January is 0!
var yyyy = today.getFullYear() var yyyy = today.getFullYear()
if (dd < 10) { if (dd < 10) {
dd = '0' + dd dd = '0' + dd
@ -359,7 +359,7 @@ const Map = {
GlobalUI.notifyUser(downloadMessage) GlobalUI.notifyUser(downloadMessage)
canvas.canvas.toBlob(imageBlob => { canvas.canvas.toBlob(imageBlob => {
const formData = new window.FormData(); const formData = new window.FormData()
formData.append('map[screenshot]', imageBlob, filename) formData.append('map[screenshot]', imageBlob, filename)
$.ajax({ $.ajax({
type: 'PATCH', type: 'PATCH',
@ -368,10 +368,10 @@ const Map = {
data: formData, data: formData,
processData: false, processData: false,
contentType: false, contentType: false,
success: function (data) { success: function(data) {
console.log('successfully uploaded map screenshot') console.log('successfully uploaded map screenshot')
}, },
error: function () { error: function() {
console.log('failed to save map screenshot') console.log('failed to save map screenshot')
} }
}) })

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

@ -5,7 +5,7 @@ import DataModel from './DataModel'
const Mapper = { const Mapper = {
// this function is to retrieve a mapper JSON object from the database // this function is to retrieve a mapper JSON object from the database
// @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) {
$.ajax({ $.ajax({
url: `/users/${id}.json`, url: `/users/${id}.json`,
success: data => { success: data => {

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

@ -4,27 +4,27 @@ import Active from './Active'
import Map from './Map' import Map from './Map'
const Mobile = { const Mobile = {
init: function () { init: function() {
var self = Mobile var self = Mobile
$('#menu_icon').click(self.toggleMenu) $('#menu_icon').click(self.toggleMenu)
$('#mobile_menu li a').click(self.liClick) $('#mobile_menu li a').click(self.liClick)
$('#header_content').click(self.titleClick) $('#header_content').click(self.titleClick)
self.resizeTitle() self.resizeTitle()
}, },
resizeTitle: function () { resizeTitle: function() {
// the 70 relates to padding // the 70 relates to padding
$('#header_content').width($(document).width() - 70) $('#header_content').width($(document).width() - 70)
}, },
liClick: function () { liClick: function() {
var self = Mobile var self = Mobile
$('#header_content').html($(this).text()) $('#header_content').html($(this).text())
self.toggleMenu() self.toggleMenu()
}, },
toggleMenu: function () { toggleMenu: function() {
$('#mobile_menu').toggle() $('#mobile_menu').toggle()
}, },
titleClick: function () { titleClick: function() {
if (Active.Map) { if (Active.Map) {
Map.InfoBox.open() Map.InfoBox.open()
} }

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

@ -6,16 +6,16 @@ import Visualize from './Visualize'
import JIT from './JIT' import JIT from './JIT'
const Organize = { const Organize = {
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') {
var numNodes = _.size(Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization const numNodes = _.size(Visualize.mGraph.graph.nodes) // this will always be an integer, the # of nodes on your graph visualization
var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid const numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
var GRIDSPACE = 400 const GRIDSPACE = 400
var row = 0 let row = 0
var column = 0 let column = 0
Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function(n) {
if (column == numColumns) { if (column === numColumns) {
column = 0 column = 0
row += 1 row += 1
} }
@ -26,25 +26,25 @@ const Organize = {
column += 1 column += 1
}) })
Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout) Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (layout == 'grid_full') { } else if (layout === 'grid_full') {
// this will always be an integer, the # of nodes on your graph visualization // this will always be an integer, the # of nodes on your graph visualization
var numNodes = _.size(Visualize.mGraph.graph.nodes) const numNodes = _.size(Visualize.mGraph.graph.nodes)
// var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid const numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
// var GRIDSPACE = 400 const height = Visualize.mGraph.canvas.getSize(0).height
var height = Visualize.mGraph.canvas.getSize(0).height const width = Visualize.mGraph.canvas.getSize(0).width
var width = Visualize.mGraph.canvas.getSize(0).width const totalArea = height * width
var totalArea = height * width const cellArea = totalArea / numNodes
var cellArea = totalArea / numNodes const ratio = height / width
var ratio = height / width const cellWidth = Math.sqrt(cellArea / ratio)
var cellWidth = sqrt(cellArea / ratio) const cellHeight = cellArea / cellWidth
var cellHeight = cellArea / cellWidth const GRIDSPACE = 400
var row = floor(height / cellHeight) let row = Math.floor(height / cellHeight)
var column = floor(width / cellWidth) let column = Math.floor(width / cellWidth)
var totalCells = row * column const totalCells = row * column
if (totalCells) { if (totalCells) {
Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function(n) {
if (column == numColumns) { if (column === numColumns) {
column = 0 column = 0
row += 1 row += 1
} }
@ -56,7 +56,7 @@ const Organize = {
}) })
} }
Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout) Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (layout == 'radial') { } else if (layout === 'radial') {
var centerX = centerNode.getPos().x var centerX = centerNode.getPos().x
var centerY = centerNode.getPos().y var centerY = centerNode.getPos().y
centerNode.setPos(centerNode.getPos(), 'end') centerNode.setPos(centerNode.getPos(), 'end')
@ -65,16 +65,16 @@ const Organize = {
var lineLength = 200 var lineLength = 200
var usedNodes = {} var usedNodes = {}
usedNodes[centerNode.id] = centerNode usedNodes[centerNode.id] = centerNode
var radial = function (node, level, degree) { var radial = function(node, level, degree) {
if (level == 1) { if (level === 1) {
var numLinksTemp = _.size(node.adjacencies) var numLinksTemp = _.size(node.adjacencies)
var angleTemp = 2 * Math.PI / numLinksTemp var angleTemp = 2 * Math.PI / numLinksTemp
} else { } else {
angleTemp = 2 * Math.PI / 20 angleTemp = 2 * Math.PI / 20
} }
node.eachAdjacency(function (a) { node.eachAdjacency(function(a) {
var isSecondLevelNode = (centerNode.adjacencies[a.nodeTo.id] != undefined && level > 1) var isSecondLevelNode = (centerNode.adjacencies[a.nodeTo.id] !== undefined && level > 1)
if (usedNodes[a.nodeTo.id] == undefined && !isSecondLevelNode) { if (usedNodes[a.nodeTo.id] === undefined && !isSecondLevelNode) {
var newPos = new $jit.Complex() var newPos = new $jit.Complex()
newPos.x = level * lineLength * Math.sin(degree) + centerX newPos.x = level * lineLength * Math.sin(degree) + centerX
newPos.y = level * lineLength * Math.cos(degree) + centerY newPos.y = level * lineLength * Math.cos(degree) + centerY
@ -88,15 +88,13 @@ const Organize = {
} }
radial(centerNode, 1, 0) radial(centerNode, 1, 0)
Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout) Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (layout == 'center_viewport') { } else if (layout === 'center_viewport') {
var lowX = 0, let lowX = 0
lowY = 0, let lowY = 0
highX = 0, let highX = 0
highY = 0 let highY = 0
var oldOriginX = Visualize.mGraph.canvas.translateOffsetX
var oldOriginY = Visualize.mGraph.canvas.translateOffsetY
Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function(n) {
if (n.id === 1) { if (n.id === 1) {
lowX = n.getPos().x lowX = n.getPos().x
lowY = n.getPos().y lowY = n.getPos().y
@ -109,9 +107,9 @@ const Organize = {
if (n.getPos().y > highY) highY = n.getPos().y if (n.getPos().y > highY) highY = n.getPos().y
}) })
console.log(lowX, lowY, highX, highY) console.log(lowX, lowY, highX, highY)
var newOriginX = (lowX + highX) / 2 } else {
var newOriginY = (lowY + highY) / 2 window.alert('please call function with a valid layout dammit!')
} else window.alert('please call function with a valid layout dammit!') }
} }
} }

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

@ -8,18 +8,18 @@ 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 = PasteInput var self = PasteInput
// intercept dragged files // intercept dragged files
// see http://stackoverflow.com/questions/6756583 // see http://stackoverflow.com/questions/6756583
window.addEventListener("dragover", function(e) { window.addEventListener('dragover', function(e) {
e = e || window.event; e = e || window.event
e.preventDefault(); e.preventDefault()
}, false); }, false)
window.addEventListener("drop", function(e) { window.addEventListener('drop', function(e) {
e = e || window.event; e = e || window.event
e.preventDefault(); e.preventDefault()
var coords = Util.pixelsToCoords(Visualize.mGraph, { x: e.clientX, y: e.clientY }) var coords = Util.pixelsToCoords(Visualize.mGraph, { x: e.clientX, y: e.clientY })
if (e.dataTransfer.files.length > 0) { if (e.dataTransfer.files.length > 0) {
self.handleFile(e.dataTransfer.files[0], coords) self.handleFile(e.dataTransfer.files[0], coords)
@ -32,10 +32,10 @@ const PasteInput = {
} }
}) })
} }
}, false); }, false)
// allow pasting onto canvas (but don't break existing inputs/textareas) // allow pasting onto canvas (but don't break existing inputs/textareas)
$('body').bind('paste', function (e) { $('body').bind('paste', function(e) {
if (e.target.tagName === 'INPUT') return if (e.target.tagName === 'INPUT') return
if (e.target.tagName === 'TEXTAREA') return if (e.target.tagName === 'TEXTAREA') return
@ -50,7 +50,7 @@ const PasteInput = {
fileReader.readAsText(file) fileReader.readAsText(file)
fileReader.onload = function(e) { fileReader.onload = function(e) {
var text = e.currentTarget.result var text = e.currentTarget.result
if (text.substring(0,5) === '<?xml') { if (text.substring(0, 5) === '<?xml') {
// assume this is a macOS .webloc link // assume this is a macOS .webloc link
text = text.replace(/[\s\S]*<string>(.*)<\/string>[\s\S]*/m, '$1') text = text.replace(/[\s\S]*<string>(.*)<\/string>[\s\S]*/m, '$1')
} }

203
frontend/src/Metamaps/Realtime/index.js
View file

@ -1,15 +1,11 @@
/* global $ */ /* global $ */
import _ from 'lodash'
import SimpleWebRTC from 'simplewebrtc' import SimpleWebRTC from 'simplewebrtc'
import SocketIoConnection from 'simplewebrtc/socketioconnection' import SocketIoConnection from 'simplewebrtc/socketioconnection'
import Active from '../Active' import Active from '../Active'
import DataModel from '../DataModel' import DataModel from '../DataModel'
import GlobalUI from '../GlobalUI'
import JIT from '../JIT' import JIT from '../JIT'
import Synapse from '../Synapse'
import Topic from '../Topic'
import Util from '../Util' import Util from '../Util'
import Views from '../Views' import Views from '../Views'
import Visualize from '../Visualize' import Visualize from '../Visualize'
@ -67,7 +63,7 @@ import {
synapseUpdated, synapseUpdated,
synapseRemoved, synapseRemoved,
synapseDeleted, synapseDeleted,
mapUpdated, mapUpdated
} from './receivable' } from './receivable'
import { import {
@ -110,15 +106,15 @@ let Realtime = {
inConversation: false, inConversation: false,
localVideo: null, localVideo: null,
'junto_spinner_darkgrey.gif': '', 'junto_spinner_darkgrey.gif': '',
init: function (serverData) { init: function(serverData) {
var self = Realtime var self = Realtime
self.addJuntoListeners() self.addJuntoListeners()
self.socket = new SocketIoConnection({ url: serverData['REALTIME_SERVER']}) self.socket = new SocketIoConnection({ url: serverData['REALTIME_SERVER'] })
self['junto_spinner_darkgrey.gif'] = serverData['junto_spinner_darkgrey.gif'] self['junto_spinner_darkgrey.gif'] = serverData['junto_spinner_darkgrey.gif']
self.socket.on('connect', function () { self.socket.on('connect', function() {
console.log('connected') console.log('connected')
subscribeToEvents(self, self.socket) subscribeToEvents(self, self.socket)
@ -126,7 +122,7 @@ let Realtime = {
self.startActiveMap() self.startActiveMap()
} else self.disconnected = false } else self.disconnected = false
}) })
self.socket.on('disconnect', function () { self.socket.on('disconnect', function() {
self.disconnected = true self.disconnected = true
}) })
@ -136,7 +132,7 @@ let Realtime = {
localVideoEl: self.videoId, localVideoEl: self.videoId,
remoteVideosEl: '', remoteVideosEl: '',
debug: true, debug: true,
detectSpeakingEvents: false, //true, detectSpeakingEvents: false, // true,
autoAdjustMic: false, // true, autoAdjustMic: false, // true,
autoRequestMedia: false, autoRequestMedia: false,
localVideo: { localVideo: {
@ -150,11 +146,11 @@ let Realtime = {
}, },
nick: Active.Mapper.id nick: Active.Mapper.id
}) })
self.webrtc.webrtc.on('iceFailed', function (peer) { self.webrtc.webrtc.on('iceFailed', function(peer) {
console.log('local ice failure', peer) console.log('local ice failure', peer)
// local ice failure // local ice failure
}) })
self.webrtc.webrtc.on('connectivityError', function (peer) { self.webrtc.webrtc.on('connectivityError', function(peer) {
console.log('remote ice failure', peer) console.log('remote ice failure', peer)
// remote ice failure // remote ice failure
}) })
@ -186,33 +182,33 @@ let Realtime = {
$('body').prepend(self.room.chat.$container) $('body').prepend(self.room.chat.$container)
} // if Active.Mapper } // if Active.Mapper
}, },
addJuntoListeners: function () { addJuntoListeners: function() {
var self = Realtime var self = Realtime
$(document).on(Views.ChatView.events.openTray, function () { $(document).on(Views.ChatView.events.openTray, function() {
$('.main').addClass('compressed') $('.main').addClass('compressed')
self.chatOpen = true self.chatOpen = true
self.positionPeerIcons() self.positionPeerIcons()
}) })
$(document).on(Views.ChatView.events.closeTray, function () { $(document).on(Views.ChatView.events.closeTray, function() {
$('.main').removeClass('compressed') $('.main').removeClass('compressed')
self.chatOpen = false self.chatOpen = false
self.positionPeerIcons() self.positionPeerIcons()
}) })
$(document).on(Views.ChatView.events.videosOn, function () { $(document).on(Views.ChatView.events.videosOn, function() {
$('#wrapper').removeClass('hideVideos') $('#wrapper').removeClass('hideVideos')
}) })
$(document).on(Views.ChatView.events.videosOff, function () { $(document).on(Views.ChatView.events.videosOff, function() {
$('#wrapper').addClass('hideVideos') $('#wrapper').addClass('hideVideos')
}) })
$(document).on(Views.ChatView.events.cursorsOn, function () { $(document).on(Views.ChatView.events.cursorsOn, function() {
$('#wrapper').removeClass('hideCursors') $('#wrapper').removeClass('hideCursors')
}) })
$(document).on(Views.ChatView.events.cursorsOff, function () { $(document).on(Views.ChatView.events.cursorsOff, function() {
$('#wrapper').addClass('hideCursors') $('#wrapper').addClass('hideCursors')
}) })
}, },
startActiveMap: function () { startActiveMap: function() {
var self = Realtime var self = Realtime
if (Active.Map && Active.Mapper) { if (Active.Map && Active.Mapper) {
if (Active.Map.authorizeToEdit(Active.Mapper)) { if (Active.Map.authorizeToEdit(Active.Mapper)) {
@ -223,7 +219,7 @@ let Realtime = {
self.room.addMessages(new DataModel.MessageCollection(DataModel.Messages), true) self.room.addMessages(new DataModel.MessageCollection(DataModel.Messages), true)
} }
}, },
endActiveMap: function () { endActiveMap: function() {
var self = Realtime var self = Realtime
$(document).off('.map') $(document).off('.map')
// leave the appropriate rooms to leave // leave the appropriate rooms to leave
@ -236,7 +232,7 @@ let Realtime = {
self.room.chat.close() self.room.chat.close()
} }
}, },
turnOn: function (notify) { turnOn: function(notify) {
var self = Realtime var self = Realtime
$('.collabCompass').show() $('.collabCompass').show()
self.room.chat.$container.show() self.room.chat.$container.show()
@ -254,16 +250,16 @@ let Realtime = {
}) })
self.room.chat.addParticipant(self.activeMapper) self.room.chat.addParticipant(self.activeMapper)
}, },
setupSocket: function () { setupSocket: function() {
var self = Realtime var self = Realtime
self.checkForCall() self.checkForCall()
self.joinMap() self.joinMap()
}, },
setupLocalSendables: function () { setupLocalSendables: function() {
var self = Realtime var self = Realtime
// local event listeners that trigger events // local event listeners that trigger events
var sendCoords = function (event) { var sendCoords = function(event) {
var pixels = { var pixels = {
x: event.pageX, x: event.pageX,
y: event.pageY y: event.pageY
@ -273,7 +269,7 @@ let Realtime = {
} }
$(document).on('mousemove.map', sendCoords) $(document).on('mousemove.map', sendCoords)
var zoom = function (event, e) { var zoom = function(event, e) {
if (e) { if (e) {
var pixels = { var pixels = {
x: e.pageX, x: e.pageX,
@ -288,47 +284,47 @@ let Realtime = {
$(document).on(JIT.events.pan + '.map', self.positionPeerIcons) $(document).on(JIT.events.pan + '.map', self.positionPeerIcons)
var dragTopic = function (event, positions) { var dragTopic = function(event, positions) {
self.dragTopic(positions) self.dragTopic(positions)
} }
$(document).on(JIT.events.topicDrag + '.map', dragTopic) $(document).on(JIT.events.topicDrag + '.map', dragTopic)
var createTopic = function (event, data) { var createTopic = function(event, data) {
self.createTopic(data) self.createTopic(data)
} }
$(document).on(JIT.events.newTopic + '.map', createTopic) $(document).on(JIT.events.newTopic + '.map', createTopic)
var deleteTopic = function (event, data) { var deleteTopic = function(event, data) {
self.deleteTopic(data) self.deleteTopic(data)
} }
$(document).on(JIT.events.deleteTopic + '.map', deleteTopic) $(document).on(JIT.events.deleteTopic + '.map', deleteTopic)
var removeTopic = function (event, data) { var removeTopic = function(event, data) {
self.removeTopic(data) self.removeTopic(data)
} }
$(document).on(JIT.events.removeTopic + '.map', removeTopic) $(document).on(JIT.events.removeTopic + '.map', removeTopic)
var createSynapse = function (event, data) { var createSynapse = function(event, data) {
self.createSynapse(data) self.createSynapse(data)
} }
$(document).on(JIT.events.newSynapse + '.map', createSynapse) $(document).on(JIT.events.newSynapse + '.map', createSynapse)
var deleteSynapse = function (event, data) { var deleteSynapse = function(event, data) {
self.deleteSynapse(data) self.deleteSynapse(data)
} }
$(document).on(JIT.events.deleteSynapse + '.map', deleteSynapse) $(document).on(JIT.events.deleteSynapse + '.map', deleteSynapse)
var removeSynapse = function (event, data) { var removeSynapse = function(event, data) {
self.removeSynapse(data) self.removeSynapse(data)
} }
$(document).on(JIT.events.removeSynapse + '.map', removeSynapse) $(document).on(JIT.events.removeSynapse + '.map', removeSynapse)
var createMessage = function (event, data) { var createMessage = function(event, data) {
self.createMessage(data) self.createMessage(data)
} }
$(document).on(Views.Room.events.newMessage + '.map', createMessage) $(document).on(Views.Room.events.newMessage + '.map', createMessage)
}, },
countOthersInConversation: function () { countOthersInConversation: function() {
var self = Realtime var self = Realtime
var count = 0 var count = 0
for (var key in self.mappersOnMap) { for (var key in self.mappersOnMap) {
@ -336,7 +332,7 @@ let Realtime = {
} }
return count return count
}, },
handleVideoAdded: function (v, id) { handleVideoAdded: function(v, id) {
var self = Realtime var self = Realtime
self.positionVideos() self.positionVideos()
v.setParent($('#wrapper')) v.setParent($('#wrapper'))
@ -345,16 +341,15 @@ let Realtime = {
}) })
$('#wrapper').append(v.$container) $('#wrapper').append(v.$container)
}, },
positionVideos: function () { positionVideos: function() {
var self = 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) {
return !self.room.videos[id].manuallyPositioned // return !self.room.videos[id].manuallyPositioned
}).length // }).length
var screenHeight = $(document).height() var screenHeight = $(document).height()
var screenWidth = $(document).width()
var topExtraPadding = 20 var topExtraPadding = 20
var topPadding = 30 var topPadding = 30
var leftPadding = 30 var leftPadding = 30
@ -362,7 +357,7 @@ let Realtime = {
var videoWidth = 180 var videoWidth = 180
var column = 0 var column = 0
var row = 0 var row = 0
var yFormula = function () { var yFormula = function() {
var y = topExtraPadding + (topPadding + videoHeight) * row + topPadding var y = topExtraPadding + (topPadding + videoHeight) * row + topPadding
if (y + videoHeight > screenHeight) { if (y + videoHeight > screenHeight) {
row = 0 row = 0
@ -372,7 +367,7 @@ let Realtime = {
row++ row++
return y return y
} }
var xFormula = function () { var xFormula = function() {
var x = (leftPadding + videoWidth) * column + leftPadding var x = (leftPadding + videoWidth) * column + leftPadding
return x return x
} }
@ -385,7 +380,7 @@ let Realtime = {
left: xFormula() + 'px' left: xFormula() + 'px'
}) })
} }
videoIds.forEach(function (id) { videoIds.forEach(function(id) {
var video = self.room.videos[id] var video = self.room.videos[id]
if (!video.manuallyPositioned) { if (!video.manuallyPositioned) {
video.$container.css({ video.$container.css({
@ -395,7 +390,7 @@ let Realtime = {
} }
}) })
}, },
callEnded: function () { callEnded: function() {
var self = Realtime var self = Realtime
self.room.conversationEnding() self.room.conversationEnding()
@ -408,7 +403,7 @@ let Realtime = {
self.localVideo.view.audioOn() self.localVideo.view.audioOn()
self.localVideo.view.videoOn() self.localVideo.view.videoOn()
}, },
createCompass: function (name, id, image, color) { createCompass: function(name, id, image, color) {
var str = '<img width="28" height="28" src="' + image + '" /><p>' + name + '</p>' var str = '<img width="28" height="28" src="' + image + '" /><p>' + name + '</p>'
str += '<div id="compassArrow' + id + '" class="compassArrow"></div>' str += '<div id="compassArrow' + id + '" class="compassArrow"></div>'
$('#compass' + id).remove() $('#compass' + id).remove()
@ -423,20 +418,15 @@ let Realtime = {
'background-color': color 'background-color': color
}) })
}, },
positionPeerIcons: function () { positionPeerIcons: function() {
var self = Realtime var self = Realtime
for (var key in self.mappersOnMap) { for (var key in self.mappersOnMap) {
self.positionPeerIcon(key) self.positionPeerIcon(key)
} }
}, },
positionPeerIcon: function (id) { positionPeerIcon: function(id) {
var self = Realtime var self = Realtime
var boundary = self.chatOpen ? '#wrapper' : document
var mapper = self.mappersOnMap[id] var mapper = self.mappersOnMap[id]
var xMax = $(boundary).width()
var yMax = $(boundary).height()
var compassDiameter = 56
var compassArrowSize = 24
var origPixels = Util.coordsToPixels(Visualize.mGraph, mapper.coords) var origPixels = Util.coordsToPixels(Visualize.mGraph, mapper.coords)
var pixels = self.limitPixelsToScreen(origPixels) var pixels = self.limitPixelsToScreen(origPixels)
@ -448,12 +438,11 @@ let Realtime = {
if (origPixels.x !== pixels.x || origPixels.y !== pixels.y) { if (origPixels.x !== pixels.x || origPixels.y !== pixels.y) {
var dy = origPixels.y - pixels.y // opposite var dy = origPixels.y - pixels.y // opposite
var dx = origPixels.x - pixels.x // adjacent var dx = origPixels.x - pixels.x // adjacent
var ratio = dy / dx
var angle = Math.atan2(dy, dx) var angle = Math.atan2(dy, dx)
$('#compassArrow' + id).show().css({ $('#compassArrow' + id).show().css({
transform: 'rotate(' + angle + 'rad)', transform: 'rotate(' + angle + 'rad)',
'-webkit-transform': 'rotate(' + angle + 'rad)', '-webkit-transform': 'rotate(' + angle + 'rad)'
}) })
if (dx > 0) { if (dx > 0) {
@ -464,7 +453,7 @@ let Realtime = {
$('#compass' + id).removeClass('labelLeft') $('#compass' + id).removeClass('labelLeft')
} }
}, },
limitPixelsToScreen: function (pixels) { limitPixelsToScreen: function(pixels) {
var self = Realtime var self = Realtime
var boundary = self.chatOpen ? '#wrapper' : document var boundary = self.chatOpen ? '#wrapper' : document
@ -479,65 +468,65 @@ let Realtime = {
yLimit = Math.max(0 + compassArrowSize, pixels.y) yLimit = Math.max(0 + compassArrowSize, pixels.y)
yLimit = Math.min(yLimit, yMax - compassDiameter) yLimit = Math.min(yLimit, yMax - compassDiameter)
return {x: xLimit,y: yLimit} return {x: xLimit, y: yLimit}
} }
} }
const sendables = [ const sendables = [
['joinMap',joinMap], ['joinMap', joinMap],
['leaveMap',leaveMap], ['leaveMap', leaveMap],
['checkForCall',checkForCall], ['checkForCall', checkForCall],
['acceptCall',acceptCall], ['acceptCall', acceptCall],
['denyCall',denyCall], ['denyCall', denyCall],
['denyInvite',denyInvite], ['denyInvite', denyInvite],
['inviteToJoin',inviteToJoin], ['inviteToJoin', inviteToJoin],
['inviteACall',inviteACall], ['inviteACall', inviteACall],
['joinCall',joinCall], ['joinCall', joinCall],
['leaveCall',leaveCall], ['leaveCall', leaveCall],
['sendMapperInfo',sendMapperInfo], ['sendMapperInfo', sendMapperInfo],
['sendCoords',sendCoords], ['sendCoords', sendCoords],
['createMessage',createMessage], ['createMessage', createMessage],
['dragTopic',dragTopic], ['dragTopic', dragTopic],
['createTopic',createTopic], ['createTopic', createTopic],
['updateTopic',updateTopic], ['updateTopic', updateTopic],
['removeTopic',removeTopic], ['removeTopic', removeTopic],
['deleteTopic',deleteTopic], ['deleteTopic', deleteTopic],
['createSynapse',createSynapse], ['createSynapse', createSynapse],
['updateSynapse',updateSynapse], ['updateSynapse', updateSynapse],
['removeSynapse',removeSynapse], ['removeSynapse', removeSynapse],
['deleteSynapse',deleteSynapse], ['deleteSynapse', deleteSynapse],
['updateMap',updateMap] ['updateMap', updateMap]
] ]
sendables.forEach(sendable => { sendables.forEach(sendable => {
Realtime[sendable[0]] = sendable[1](Realtime) Realtime[sendable[0]] = sendable[1](Realtime)
}) })
const subscribeToEvents = (Realtime, socket) => { const subscribeToEvents = (Realtime, socket) => {
socket.on(JUNTO_UPDATED, juntoUpdated(Realtime)) socket.on(JUNTO_UPDATED, juntoUpdated(Realtime))
socket.on(INVITED_TO_CALL, invitedToCall(Realtime)) socket.on(INVITED_TO_CALL, invitedToCall(Realtime))
socket.on(INVITED_TO_JOIN, invitedToJoin(Realtime)) socket.on(INVITED_TO_JOIN, invitedToJoin(Realtime))
socket.on(CALL_ACCEPTED, callAccepted(Realtime)) socket.on(CALL_ACCEPTED, callAccepted(Realtime))
socket.on(CALL_DENIED, callDenied(Realtime)) socket.on(CALL_DENIED, callDenied(Realtime))
socket.on(INVITE_DENIED, inviteDenied(Realtime)) socket.on(INVITE_DENIED, inviteDenied(Realtime))
socket.on(CALL_IN_PROGRESS, callInProgress(Realtime)) socket.on(CALL_IN_PROGRESS, callInProgress(Realtime))
socket.on(CALL_STARTED, callStarted(Realtime)) socket.on(CALL_STARTED, callStarted(Realtime))
socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(Realtime)) socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(Realtime))
socket.on(MAPPER_JOINED_CALL, mapperJoinedCall(Realtime)) socket.on(MAPPER_JOINED_CALL, mapperJoinedCall(Realtime))
socket.on(MAPPER_LEFT_CALL, mapperLeftCall(Realtime)) socket.on(MAPPER_LEFT_CALL, mapperLeftCall(Realtime))
socket.on(PEER_COORDS_UPDATED, peerCoordsUpdated(Realtime)) socket.on(PEER_COORDS_UPDATED, peerCoordsUpdated(Realtime))
socket.on(NEW_MAPPER, newMapper(Realtime)) socket.on(NEW_MAPPER, newMapper(Realtime))
socket.on(LOST_MAPPER, lostMapper(Realtime)) socket.on(LOST_MAPPER, lostMapper(Realtime))
socket.on(MESSAGE_CREATED, messageCreated(Realtime)) socket.on(MESSAGE_CREATED, messageCreated(Realtime))
socket.on(TOPIC_DRAGGED, topicDragged(Realtime)) socket.on(TOPIC_DRAGGED, topicDragged(Realtime))
socket.on(TOPIC_CREATED, topicCreated(Realtime)) socket.on(TOPIC_CREATED, topicCreated(Realtime))
socket.on(TOPIC_UPDATED, topicUpdated(Realtime)) socket.on(TOPIC_UPDATED, topicUpdated(Realtime))
socket.on(TOPIC_REMOVED, topicRemoved(Realtime)) socket.on(TOPIC_REMOVED, topicRemoved(Realtime))
socket.on(TOPIC_DELETED, topicDeleted(Realtime)) socket.on(TOPIC_DELETED, topicDeleted(Realtime))
socket.on(SYNAPSE_CREATED, synapseCreated(Realtime)) socket.on(SYNAPSE_CREATED, synapseCreated(Realtime))
socket.on(SYNAPSE_UPDATED, synapseUpdated(Realtime)) socket.on(SYNAPSE_UPDATED, synapseUpdated(Realtime))
socket.on(SYNAPSE_REMOVED, synapseRemoved(Realtime)) socket.on(SYNAPSE_REMOVED, synapseRemoved(Realtime))
socket.on(SYNAPSE_DELETED, synapseDeleted(Realtime)) socket.on(SYNAPSE_DELETED, synapseDeleted(Realtime))
socket.on(MAP_UPDATED, mapUpdated(Realtime)) socket.on(MAP_UPDATED, mapUpdated(Realtime))
} }
export default Realtime export default Realtime

73
frontend/src/Metamaps/Realtime/receivable.js
View file

@ -4,6 +4,8 @@
everthing in this file happens as a result of websocket events everthing in this file happens as a result of websocket events
*/ */
import { indexOf } from 'lodash'
import { JUNTO_UPDATED } from './events' import { JUNTO_UPDATED } from './events'
import Active from '../Active' import Active from '../Active'
@ -31,7 +33,7 @@ export const synapseRemoved = self => data => {
Control.hideEdge(edge) Control.hideEdge(edge)
} }
var index = _.indexOf(edge.getData('synapses'), synapse) var index = indexOf(edge.getData('synapses'), synapse)
edge.getData('mappings').splice(index, 1) edge.getData('mappings').splice(index, 1)
edge.getData('synapses').splice(index, 1) edge.getData('synapses').splice(index, 1)
if (edge.getData('displayIndex')) { if (edge.getData('displayIndex')) {
@ -49,8 +51,7 @@ export const synapseDeleted = self => data => {
export const synapseCreated = self => data => { export const synapseCreated = self => data => {
var topic1, topic2, node1, node2, synapse, mapping, cancel, mapper var topic1, topic2, node1, node2, synapse, mapping, cancel, mapper
function waitThenRenderSynapse() {
function waitThenRenderSynapse () {
if (synapse && mapping && mapper) { if (synapse && mapping && mapper) {
topic1 = synapse.getTopic1() topic1 = synapse.getTopic1()
node1 = topic1.get('node') node1 = topic1.get('node')
@ -58,8 +59,7 @@ export const synapseCreated = self => data => {
node2 = topic2.get('node') node2 = topic2.get('node')
Synapse.renderSynapse(mapping, synapse, node1, node2, false) Synapse.renderSynapse(mapping, synapse, node1, node2, false)
} } else if (!cancel) {
else if (!cancel) {
setTimeout(waitThenRenderSynapse, 10) setTimeout(waitThenRenderSynapse, 10)
} }
} }
@ -73,21 +73,21 @@ export const synapseCreated = self => data => {
} }
$.ajax({ $.ajax({
url: '/synapses/' + data.mappableid + '.json', url: '/synapses/' + data.mappableid + '.json',
success: function (response) { success: function(response) {
DataModel.Synapses.add(response) DataModel.Synapses.add(response)
synapse = DataModel.Synapses.get(response.id) synapse = DataModel.Synapses.get(response.id)
}, },
error: function () { error: function() {
cancel = true cancel = true
} }
}) })
$.ajax({ $.ajax({
url: '/mappings/' + data.mappingid + '.json', url: '/mappings/' + data.mappingid + '.json',
success: function (response) { success: function(response) {
DataModel.Mappings.add(response) DataModel.Mappings.add(response)
mapping = DataModel.Mappings.get(response.id) mapping = DataModel.Mappings.get(response.id)
}, },
error: function () { error: function() {
cancel = true cancel = true
} }
}) })
@ -112,11 +112,10 @@ export const topicDeleted = self => data => {
export const topicCreated = self => data => { export const topicCreated = self => data => {
var topic, mapping, mapper, cancel var topic, mapping, mapper, cancel
function waitThenRenderTopic () { function waitThenRenderTopic() {
if (topic && mapping && mapper) { if (topic && mapping && mapper) {
Topic.renderTopic(mapping, topic, false, false) Topic.renderTopic(mapping, topic, false, false)
} } else if (!cancel) {
else if (!cancel) {
setTimeout(waitThenRenderTopic, 10) setTimeout(waitThenRenderTopic, 10)
} }
} }
@ -130,21 +129,21 @@ export const topicCreated = self => data => {
} }
$.ajax({ $.ajax({
url: '/topics/' + data.mappableid + '.json', url: '/topics/' + data.mappableid + '.json',
success: function (response) { success: function(response) {
DataModel.Topics.add(response) DataModel.Topics.add(response)
topic = DataModel.Topics.get(response.id) topic = DataModel.Topics.get(response.id)
}, },
error: function () { error: function() {
cancel = true cancel = true
} }
}) })
$.ajax({ $.ajax({
url: '/mappings/' + data.mappingid + '.json', url: '/mappings/' + data.mappingid + '.json',
success: function (response) { success: function(response) {
DataModel.Mappings.add(response) DataModel.Mappings.add(response)
mapping = DataModel.Mappings.get(response.id) mapping = DataModel.Mappings.get(response.id)
}, },
error: function () { error: function() {
cancel = true cancel = true
} }
}) })
@ -163,20 +162,18 @@ export const mapUpdated = self => data => {
var couldEditBefore = map.authorizeToEdit(Active.Mapper) var couldEditBefore = map.authorizeToEdit(Active.Mapper)
var idBefore = map.id var idBefore = map.id
map.fetch({ map.fetch({
success: function (model, response) { success: function(model, response) {
var idNow = model.id var idNow = model.id
var canEditNow = model.authorizeToEdit(Active.Mapper) var canEditNow = model.authorizeToEdit(Active.Mapper)
if (idNow !== idBefore) { if (idNow !== idBefore) {
Map.leavePrivateMap() // this means the map has been changed to private Map.leavePrivateMap() // this means the map has been changed to private
} } else if (couldEditBefore && !canEditNow) {
else if (couldEditBefore && !canEditNow) { Map.cantEditNow()
Map.cantEditNow() } else if (!couldEditBefore && canEditNow) {
} Map.canEditNow()
else if (!couldEditBefore && canEditNow) { } else {
Map.canEditNow() model.trigger('changeByOther')
} else { }
model.trigger('changeByOther')
}
} }
}) })
} }
@ -187,9 +184,9 @@ export const topicUpdated = self => data => {
if (topic) { if (topic) {
var node = topic.get('node') var node = topic.get('node')
topic.fetch({ topic.fetch({
success: function (model) { success: function(model) {
model.set({ node: node }) model.set({ node: node })
model.trigger('changeByOther') model.trigger('changeByOther')
} }
}) })
} }
@ -201,9 +198,9 @@ export const synapseUpdated = self => data => {
// edge reset necessary because fetch causes model reset // edge reset necessary because fetch causes model reset
var edge = synapse.get('edge') var edge = synapse.get('edge')
synapse.fetch({ synapse.fetch({
success: function (model) { success: function(model) {
model.set({ edge: edge }) model.set({ edge: edge })
model.trigger('changeByOther') model.trigger('changeByOther')
} }
}) })
} }
@ -225,7 +222,7 @@ export const topicDragged = self => positions => {
export const peerCoordsUpdated = self => data => { export const peerCoordsUpdated = self => data => {
if (!self.mappersOnMap[data.userid]) return if (!self.mappersOnMap[data.userid]) return
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)
} }
@ -311,7 +308,7 @@ export const newMapper = self => data => {
} }
export const callAccepted = self => userid => { export const callAccepted = self => userid => {
var username = self.mappersOnMap[userid].name // const username = self.mappersOnMap[userid].name
GlobalUI.notifyUser('Conversation starting...') GlobalUI.notifyUser('Conversation starting...')
self.joinCall() self.joinCall()
self.room.chat.invitationAnswered(userid) self.room.chat.invitationAnswered(userid)

6
frontend/src/Metamaps/Realtime/sendable.js
View file

@ -1,3 +1,5 @@
/* global $ */
import Active from '../Active' import Active from '../Active'
import GlobalUI from '../GlobalUI' import GlobalUI from '../GlobalUI'
@ -42,7 +44,7 @@ export const leaveMap = self => () => {
} }
export const checkForCall = self => () => { export const checkForCall = self => () => {
self.socket.emit(CHECK_FOR_CALL, { room: self.room.room, mapid: Active.Map.id }) self.socket.emit(CHECK_FOR_CALL, { room: self.room.room, mapid: Active.Map.id })
} }
export const sendMapperInfo = self => userid => { export const sendMapperInfo = self => userid => {
@ -60,7 +62,7 @@ export const sendMapperInfo = self => userid => {
export const joinCall = self => () => { export const joinCall = self => () => {
self.webrtc.off('readyToCall') self.webrtc.off('readyToCall')
self.webrtc.once('readyToCall', function () { self.webrtc.once('readyToCall', function() {
self.videoInitialized = true self.videoInitialized = true
self.readyToCall = true self.readyToCall = true
self.localVideo.view.manuallyPositioned = false self.localVideo.view.manuallyPositioned = false

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

@ -23,7 +23,7 @@ const _Router = Backbone.Router.extend({
'maps/:id': 'maps', // #maps/7 'maps/:id': 'maps', // #maps/7
'topics/:id': 'topics' // #topics/7 'topics/:id': 'topics' // #topics/7
}, },
home: function () { home: function() {
let self = this let self = this
clearTimeout(this.timeoutId) clearTimeout(this.timeoutId)
@ -37,8 +37,8 @@ const _Router = Backbone.Router.extend({
var classes = Active.Mapper ? 'homePage explorePage' : 'homePage' var classes = Active.Mapper ? 'homePage explorePage' : 'homePage'
$('.wrapper').addClass(classes) $('.wrapper').addClass(classes)
var navigate = function () { var navigate = function() {
self.timeoutId = setTimeout(function () { self.timeoutId = setTimeout(function() {
self.navigate('') self.navigate('')
}, 300) }, 300)
} }
@ -71,7 +71,7 @@ const _Router = Backbone.Router.extend({
Active.Map = null Active.Map = null
Active.Topic = null Active.Topic = null
}, },
explore: function (section, id) { explore: function(section, id) {
var self = this var self = this
clearTimeout(this.timeoutId) clearTimeout(this.timeoutId)
@ -84,16 +84,16 @@ const _Router = Backbone.Router.extend({
} else if (section === 'mapper') { } else if (section === 'mapper') {
$.ajax({ $.ajax({
url: '/users/' + id + '.json', url: '/users/' + id + '.json',
success: function (response) { success: function(response) {
document.title = response.name + ' | Metamaps' document.title = response.name + ' | Metamaps'
}, },
error: function () {} error: function() {}
}) })
} else if (section === 'mine') { } else if (section === 'mine') {
document.title = 'Explore My Maps | Metamaps' document.title = 'Explore My Maps | Metamaps'
} }
if (Active.Mapper && section != 'mapper') $('.homeButton a').attr('href', '/explore/' + section) if (Active.Mapper && section !== 'mapper') $('.homeButton a').attr('href', '/explore/' + section)
$('.wrapper').removeClass('homePage mapPage topicPage') $('.wrapper').removeClass('homePage mapPage topicPage')
$('.wrapper').addClass('explorePage') $('.wrapper').addClass('explorePage')
@ -113,23 +113,23 @@ const _Router = Backbone.Router.extend({
Views.ExploreMaps.setCollection(DataModel.Maps[capitalize]) Views.ExploreMaps.setCollection(DataModel.Maps[capitalize])
var navigate = function () { var navigate = function() {
var path = '/explore/' + self.currentPage var path = '/explore/' + self.currentPage
// alter url if for mapper profile page // alter url if for mapper profile page
if (self.currentPage === 'mapper') { if (self.currentPage === 'mapper') {
path += '/' + DataModel.Maps.Mapper.mapperId path += '/' + DataModel.Maps.Mapper.mapperId
} }
self.navigate(path) self.navigate(path)
} }
var navigateTimeout = function () { var navigateTimeout = function() {
self.timeoutId = setTimeout(navigate, 300) self.timeoutId = setTimeout(navigate, 300)
} }
if (DataModel.Maps[capitalize].length === 0) { if (DataModel.Maps[capitalize].length === 0) {
Loading.show() Loading.show()
Views.ExploreMaps.pending = true Views.ExploreMaps.pending = true
setTimeout(function () { setTimeout(function() {
DataModel.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render DataModel.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 }, 300) // wait 300 milliseconds till the other animations are done to do the fetch
} else { } else {
@ -149,7 +149,7 @@ const _Router = Backbone.Router.extend({
Active.Map = null Active.Map = null
Active.Topic = null Active.Topic = null
}, },
maps: function (id) { maps: function(id) {
clearTimeout(this.timeoutId) clearTimeout(this.timeoutId)
this.currentSection = 'map' this.currentSection = 'map'
@ -175,7 +175,7 @@ const _Router = Backbone.Router.extend({
Map.end() Map.end()
Map.launch(id) Map.launch(id)
}, },
topics: function (id) { topics: function(id) {
clearTimeout(this.timeoutId) clearTimeout(this.timeoutId)
this.currentSection = 'topic' this.currentSection = 'topic'
@ -202,7 +202,7 @@ const _Router = Backbone.Router.extend({
const Router = new _Router() const Router = new _Router()
Router.intercept = function (evt) { Router.intercept = function(evt) {
var segments var segments
var href = { var href = {
@ -227,7 +227,7 @@ Router.intercept = function (evt) {
} }
} }
Router.init = function () { Router.init = function() {
Backbone.history.start({ Backbone.history.start({
silent: true, silent: true,
pushState: true, pushState: true,

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

@ -1,5 +1,5 @@
const Selected = { const Selected = {
reset: function () { reset: function() {
var self = Selected var self = Selected
self.Nodes = [] self.Nodes = []
self.Edges = [] self.Edges = []

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

@ -15,12 +15,12 @@ const noOp = () => {}
const 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 = noOp) { get: function(id, callback = noOp) {
// if the desired topic is not yet in the local topic repository, fetch it // if the desired topic is not yet in the local topic repository, fetch it
if (DataModel.Synapses.get(id) == undefined) { if (DataModel.Synapses.get(id) === undefined) {
$.ajax({ $.ajax({
url: '/synapses/' + id + '.json', url: '/synapses/' + id + '.json',
success: function (data) { success: function(data) {
DataModel.Synapses.add(data) DataModel.Synapses.add(data)
callback(DataModel.Synapses.get(id)) callback(DataModel.Synapses.get(id))
} }
@ -28,9 +28,7 @@ const Synapse = {
} else callback(DataModel.Synapses.get(id)) } else callback(DataModel.Synapses.get(id))
}, },
renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) { renderSynapse: function(mapping, synapse, node1, node2, createNewInDB) {
var self = Synapse
var edgeOnViz var edgeOnViz
var newedge = synapse.createEdge(mapping) var newedge = synapse.createEdge(mapping)
@ -42,7 +40,7 @@ const Synapse = {
Control.selectEdge(edgeOnViz) Control.selectEdge(edgeOnViz)
var mappingSuccessCallback = function (mappingModel, response) { var mappingSuccessCallback = function(mappingModel, response) {
var newSynapseData = { var newSynapseData = {
mappingid: mappingModel.id, mappingid: mappingModel.id,
mappableid: mappingModel.get('mappable_id') mappableid: mappingModel.get('mappable_id')
@ -50,7 +48,7 @@ const Synapse = {
$(document).trigger(JIT.events.newSynapse, [newSynapseData]) $(document).trigger(JIT.events.newSynapse, [newSynapseData])
} }
var synapseSuccessCallback = function (synapseModel, response) { var synapseSuccessCallback = function(synapseModel, response) {
if (Active.Map) { if (Active.Map) {
mapping.save({ mappable_id: synapseModel.id }, { mapping.save({ mappable_id: synapseModel.id }, {
success: mappingSuccessCallback success: mappingSuccessCallback
@ -62,7 +60,7 @@ const Synapse = {
if (synapse.isNew()) { if (synapse.isNew()) {
synapse.save(null, { synapse.save(null, {
success: synapseSuccessCallback, success: synapseSuccessCallback,
error: function (model, response) { error: function(model, response) {
console.log('error saving synapse to database') console.log('error saving synapse to database')
} }
}) })
@ -73,14 +71,14 @@ const Synapse = {
} }
} }
}, },
createSynapseLocally: function () { createSynapseLocally: function() {
var self = Synapse, var self = Synapse
topic1, let topic1
topic2, let topic2
node1, let node1
node2, let node2
synapse, let synapse
mapping let mapping
$(document).trigger(Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
@ -91,7 +89,7 @@ const Synapse = {
node2 = topic2.get('node') node2 = topic2.get('node')
var len = Selected.Nodes.length var len = Selected.Nodes.length
if (len == 0) { if (len === 0) {
topic1 = DataModel.Topics.get(Create.newSynapse.topic1id) topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
synapsesToCreate[0] = topic1.get('node') synapsesToCreate[0] = topic1.get('node')
} else if (len > 0) { } else if (len > 0) {
@ -104,13 +102,13 @@ const Synapse = {
synapse = new DataModel.Synapse({ synapse = new DataModel.Synapse({
desc: Create.newSynapse.description, desc: Create.newSynapse.description,
topic1_id: topic1.isNew() ? topic1.cid : topic1.id, topic1_id: topic1.isNew() ? topic1.cid : topic1.id,
topic2_id: topic2.isNew() ? topic2.cid : topic2.id, topic2_id: topic2.isNew() ? topic2.cid : topic2.id
}) })
DataModel.Synapses.add(synapse) DataModel.Synapses.add(synapse)
mapping = new DataModel.Mapping({ mapping = new DataModel.Mapping({
mappable_type: 'Synapse', mappable_type: 'Synapse',
mappable_id: synapse.cid, mappable_id: synapse.cid
}) })
DataModel.Mappings.add(mapping) DataModel.Mappings.add(mapping)
@ -120,23 +118,19 @@ const Synapse = {
Create.newSynapse.hide() Create.newSynapse.hide()
}, },
getSynapseFromAutocomplete: function (id) { getSynapseFromAutocomplete: function(id) {
var self = Synapse, var self = Synapse
topic1,
topic2,
node1,
node2
self.get(id, synapse => { self.get(id, synapse => {
var mapping = new DataModel.Mapping({ const mapping = new DataModel.Mapping({
mappable_type: 'Synapse', mappable_type: 'Synapse',
mappable_id: synapse.id, mappable_id: synapse.id
}) })
DataModel.Mappings.add(mapping) DataModel.Mappings.add(mapping)
topic1 = DataModel.Topics.get(Create.newSynapse.topic1id) const topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
node1 = topic1.get('node') const node1 = topic1.get('node')
topic2 = DataModel.Topics.get(Create.newSynapse.topic2id) const topic2 = DataModel.Topics.get(Create.newSynapse.topic2id)
node2 = topic2.get('node') const node2 = topic2.get('node')
Create.newSynapse.hide() Create.newSynapse.hide()
self.renderSynapse(mapping, synapse, node1, node2, true) self.renderSynapse(mapping, synapse, node1, node2, true)
}) })

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

@ -6,7 +6,7 @@ import Visualize from './Visualize'
const SynapseCard = { const SynapseCard = {
openSynapseCard: null, openSynapseCard: null,
showCard: function (edge, e) { showCard: function(edge, e) {
var self = 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
@ -18,20 +18,20 @@ const SynapseCard = {
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
// create the wrapper around the form elements, including permissions // create the wrapper around the form elements, including permissions
// classes to make best_in_place happy // classes to make best_in_place happy
var edit_div = document.createElement('div') var editDiv = document.createElement('div')
edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>' editDiv.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>'
edit_div.setAttribute('id', 'edit_synapse') editDiv.setAttribute('id', 'edit_synapse')
if (synapse.authorizeToEdit(Active.Mapper)) { if (synapse.authorizeToEdit(Active.Mapper)) {
edit_div.className = 'permission canEdit' editDiv.className = 'permission canEdit'
edit_div.className += synapse.authorizePermissionChange(Active.Mapper) ? ' yourEdge' : '' editDiv.className += synapse.authorizePermissionChange(Active.Mapper) ? ' yourEdge' : ''
} else { } else {
edit_div.className = 'permission cannotEdit' editDiv.className = 'permission cannotEdit'
} }
$('#wrapper').append(edit_div) $('#wrapper').append(editDiv)
self.populateShowCard(edge, synapse) self.populateShowCard(edge, synapse)
@ -51,12 +51,12 @@ const SynapseCard = {
self.openSynapseCard = edge self.openSynapseCard = edge
}, },
hideCard: function () { hideCard: function() {
$('#edit_synapse').remove() $('#edit_synapse').remove()
SynapseCard.openSynapseCard = null SynapseCard.openSynapseCard = null
}, },
populateShowCard: function (edge, synapse) { populateShowCard: function(edge, synapse) {
var self = SynapseCard var self = SynapseCard
self.add_synapse_count(edge) self.add_synapse_count(edge)
@ -66,13 +66,13 @@ const SynapseCard = {
self.add_perms_form(synapse) self.add_perms_form(synapse)
self.add_direction_form(synapse) self.add_direction_form(synapse)
}, },
add_synapse_count: function (edge) { add_synapse_count: function(edge) {
var count = edge.getData('synapses').length var count = edge.getData('synapses').length
$('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>') $('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
}, },
add_desc_form: function (synapse) { add_desc_form: function(synapse) {
var data_nil = 'Click to add description.' var dataNil = 'Click to add description.'
// TODO make it so that this would work even in sandbox mode, // TODO make it so that this would work even in sandbox mode,
// currently with Best_in_place it won't // currently with Best_in_place it won't
@ -83,29 +83,29 @@ const SynapseCard = {
$('#edit_synapse_desc').attr('data-bip-object', 'synapse') $('#edit_synapse_desc').attr('data-bip-object', 'synapse')
$('#edit_synapse_desc').attr('data-bip-attribute', 'desc') $('#edit_synapse_desc').attr('data-bip-attribute', 'desc')
$('#edit_synapse_desc').attr('data-bip-type', 'textarea') $('#edit_synapse_desc').attr('data-bip-type', 'textarea')
$('#edit_synapse_desc').attr('data-bip-nil', data_nil) $('#edit_synapse_desc').attr('data-bip-nil', dataNil)
$('#edit_synapse_desc').attr('data-bip-url', '/synapses/' + synapse.id) $('#edit_synapse_desc').attr('data-bip-url', '/synapses/' + synapse.id)
$('#edit_synapse_desc').attr('data-bip-value', synapse.get('desc')) $('#edit_synapse_desc').attr('data-bip-value', synapse.get('desc'))
$('#edit_synapse_desc').html(synapse.get('desc')) $('#edit_synapse_desc').html(synapse.get('desc'))
// if edge data is blank or just whitespace, populate it with data_nil // if edge data is blank or just whitespace, populate it with dataNil
if ($('#edit_synapse_desc').html().trim() == '') { if ($('#edit_synapse_desc').html().trim() === '') {
if (synapse.authorizeToEdit(Active.Mapper)) { if (synapse.authorizeToEdit(Active.Mapper)) {
$('#edit_synapse_desc').html(data_nil) $('#edit_synapse_desc').html(dataNil)
} else { } else {
$('#edit_synapse_desc').html('(no description)') $('#edit_synapse_desc').html('(no description)')
} }
} }
$('#edit_synapse_desc').keypress(function (e) { $('#edit_synapse_desc').keypress(function(e) {
const ENTER = 13 const ENTER = 13
if (e.which === ENTER) { if (e.which === ENTER) {
$(this).data('bestInPlaceEditor').update() $(this).data('bestInPlaceEditor').update()
} }
}) })
$('#edit_synapse_desc').bind('ajax:success', function () { $('#edit_synapse_desc').bind('ajax:success', function() {
var desc = $(this).html() var desc = $(this).html()
if (desc == data_nil) { if (desc === dataNil) {
synapse.set('desc', '') synapse.set('desc', '')
} else { } else {
synapse.set('desc', desc) synapse.set('desc', desc)
@ -115,7 +115,7 @@ const SynapseCard = {
Visualize.mGraph.plot() Visualize.mGraph.plot()
}) })
}, },
add_drop_down: function (edge, synapse) { add_drop_down: function(edge, synapse) {
var list, i, synapses, l, desc var list, i, synapses, l, desc
synapses = edge.getData('synapses') synapses = edge.getData('synapses')
@ -124,13 +124,13 @@ const SynapseCard = {
if (l > 1) { if (l > 1) {
// append the element that you click to show dropdown select // append the element that you click to show dropdown select
$('#editSynUpperBar').append('<div id="dropdownSynapses"></div>') $('#editSynUpperBar').append('<div id="dropdownSynapses"></div>')
$('#dropdownSynapses').click(function (e) { $('#dropdownSynapses').click(function(e) {
e.preventDefault() e.preventDefault()
e.stopPropagation() // stop it from immediately closing it again e.stopPropagation() // stop it from immediately closing it again
$('#switchSynapseList').toggle() $('#switchSynapseList').toggle()
}) })
// hide the dropdown again if you click anywhere else on the synapse card // hide the dropdown again if you click anywhere else on the synapse card
$('#edit_synapse').click(function () { $('#edit_synapse').click(function() {
$('#switchSynapseList').hide() $('#switchSynapseList').hide()
}) })
@ -150,7 +150,7 @@ const SynapseCard = {
// attach click listeners to list items that // attach click listeners to list items that
// will cause it to switch the displayed synapse // will cause it to switch the displayed synapse
// when you click it // when you click it
$('#switchSynapseList li').click(function (e) { $('#switchSynapseList li').click(function(e) {
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)
@ -159,26 +159,26 @@ const SynapseCard = {
}) })
} }
}, },
add_user_info: function (synapse) { add_user_info: function(synapse) {
var u = '<div id="edgeUser" class="hoverForTip">' var u = '<div id="edgeUser" class="hoverForTip">'
u += '<a href="/explore/mapper/' + synapse.get('user_id') + '"> <img src="" width="24" height="24" /></a>' u += '<a href="/explore/mapper/' + synapse.get('user_id') + '"> <img src="" width="24" height="24" /></a>'
u += '<div class="tip">' + synapse.get('user_name') + '</div></div>' u += '<div class="tip">' + synapse.get('user_name') + '</div></div>'
$('#editSynLowerBar').append(u) $('#editSynLowerBar').append(u)
// get mapper image // get mapper image
var setMapperImage = function (mapper) { var setMapperImage = function(mapper) {
$('#edgeUser img').attr('src', mapper.get('image')) $('#edgeUser img').attr('src', mapper.get('image'))
} }
Mapper.get(synapse.get('user_id'), setMapperImage) Mapper.get(synapse.get('user_id'), setMapperImage)
}, },
add_perms_form: function (synapse) { add_perms_form: function(synapse) {
// permissions - if owner, also allow permission editing // permissions - if owner, also allow permission editing
$('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get('calculated_permission').substring(0, 2) + '"></div>') $('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get('calculated_permission').substring(0, 2) + '"></div>')
// ability to change permission // ability to change permission
var selectingPermission = false var selectingPermission = false
var permissionLiClick = function (event) { var permissionLiClick = function(event) {
selectingPermission = false selectingPermission = false
var permission = $(this).attr('class') var permission = $(this).attr('class')
synapse.save({ synapse.save({
@ -190,7 +190,7 @@ const SynapseCard = {
event.stopPropagation() event.stopPropagation()
} }
var openPermissionSelect = function (event) { var openPermissionSelect = function(event) {
if (!selectingPermission) { if (!selectingPermission) {
selectingPermission = true selectingPermission = true
$(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow $(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
@ -206,7 +206,7 @@ const SynapseCard = {
} }
} }
var hidePermissionSelect = function () { var hidePermissionSelect = function() {
selectingPermission = false selectingPermission = false
$('#edit_synapse.yourEdge .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow $('#edit_synapse.yourEdge .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
$('#edit_synapse .permissionSelect').remove() $('#edit_synapse .permissionSelect').remove()
@ -218,7 +218,7 @@ const SynapseCard = {
} }
}, // add_perms_form }, // add_perms_form
add_direction_form: function (synapse) { add_direction_form: function(synapse) {
// directionality checkboxes // directionality checkboxes
$('#editSynLowerBar').append('<div id="edit_synapse_left"></div>') $('#editSynLowerBar').append('<div id="edit_synapse_left"></div>')
$('#editSynLowerBar').append('<div id="edit_synapse_right"></div>') $('#editSynLowerBar').append('<div id="edit_synapse_right"></div>')
@ -227,14 +227,16 @@ const SynapseCard = {
// determine which node is to the left and the right // determine which node is to the left and the right
// if directly in a line, top is left // if directly in a line, top is left
let left
let right
if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x || if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
edge.nodeFrom.pos.x == edge.nodeTo.pos.x && edge.nodeFrom.pos.x === edge.nodeTo.pos.x &&
edge.nodeFrom.pos.y < edge.nodeTo.pos.y) { edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
var left = edge.nodeTo.getData('topic') left = edge.nodeTo.getData('topic')
var right = edge.nodeFrom.getData('topic') right = edge.nodeFrom.getData('topic')
} else { } else {
var left = edge.nodeFrom.getData('topic') left = edge.nodeFrom.getData('topic')
var right = edge.nodeTo.getData('topic') right = edge.nodeTo.getData('topic')
} }
/* /*
@ -243,24 +245,24 @@ const SynapseCard = {
* Else check the 'left' checkbox since the arrow is incoming. * Else check the 'left' checkbox since the arrow is incoming.
*/ */
var directionCat = synapse.get('category'); // both, none, from-to var directionCat = synapse.get('category') // both, none, from-to
if (directionCat == 'from-to') { if (directionCat === 'from-to') {
var from_to = [synapse.get('topic1_id'), synapse.get('topic2_id')] var fromTo = [synapse.get('topic1_id'), synapse.get('topic2_id')]
if (from_to[0] == left.id) { if (fromTo[0] === left.id) {
// check left checkbox // check left checkbox
$('#edit_synapse_left').addClass('checked') $('#edit_synapse_left').addClass('checked')
} else { } else {
// check right checkbox // check right checkbox
$('#edit_synapse_right').addClass('checked') $('#edit_synapse_right').addClass('checked')
} }
} else if (directionCat == 'both') { } else if (directionCat === 'both') {
// check both checkboxes // check both checkboxes
$('#edit_synapse_left').addClass('checked') $('#edit_synapse_left').addClass('checked')
$('#edit_synapse_right').addClass('checked') $('#edit_synapse_right').addClass('checked')
} }
if (synapse.authorizeToEdit(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')
var leftChecked = $('#edit_synapse_left').is('.checked') var leftChecked = $('#edit_synapse_left').is('.checked')

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

@ -23,20 +23,20 @@ const noOp = () => {}
const 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 = noOp) { get: function(id, callback = noOp) {
// if the desired topic is not yet in the local topic repository, fetch it // if the desired topic is not yet in the local topic repository, fetch it
if (DataModel.Topics.get(id) == undefined) { if (DataModel.Topics.get(id) === undefined) {
$.ajax({ $.ajax({
url: '/topics/' + id + '.json', url: '/topics/' + id + '.json',
success: function (data) { success: function(data) {
DataModel.Topics.add(data) DataModel.Topics.add(data)
callback(DataModel.Topics.get(id)) callback(DataModel.Topics.get(id))
} }
}) })
} else callback(DataModel.Topics.get(id)) } else callback(DataModel.Topics.get(id))
}, },
launch: function (id) { launch: function(id) {
var start = function (data) { var start = function(data) {
Active.Topic = new DataModel.Topic(data.topic) Active.Topic = new DataModel.Topic(data.topic)
DataModel.Creators = new DataModel.MapperCollection(data.creators) DataModel.Creators = new DataModel.MapperCollection(data.creators)
DataModel.Topics = new DataModel.TopicCollection([data.topic].concat(data.relatives)) DataModel.Topics = new DataModel.TopicCollection([data.topic].concat(data.relatives))
@ -62,7 +62,7 @@ const Topic = {
Filter.checkMetacodes() Filter.checkMetacodes()
Filter.checkSynapses() Filter.checkSynapses()
Filter.checkMappers() Filter.checkMappers()
// for mobile // for mobile
$('#header_content').html(Active.Topic.get('name')) $('#header_content').html(Active.Topic.get('name'))
} }
@ -72,7 +72,7 @@ const Topic = {
success: start success: start
}) })
}, },
end: function () { end: function() {
if (Active.Topic) { if (Active.Topic) {
$('.rightclickmenu').remove() $('.rightclickmenu').remove()
TopicCard.hideCard() TopicCard.hideCard()
@ -80,13 +80,13 @@ const Topic = {
Filter.close() Filter.close()
} }
}, },
centerOn: function (nodeid, callback) { centerOn: function(nodeid, callback) {
// don't clash with fetchRelatives // don't clash with fetchRelatives
if (!Visualize.mGraph.busy) { if (!Visualize.mGraph.busy) {
Visualize.mGraph.onClick(nodeid, { Visualize.mGraph.onClick(nodeid, {
hideLabels: false, hideLabels: false,
duration: 1000, duration: 1000,
onComplete: function () { onComplete: function() {
if (callback) callback() if (callback) callback()
} }
}) })
@ -94,21 +94,21 @@ const Topic = {
Active.Topic = DataModel.Topics.get(nodeid) Active.Topic = DataModel.Topics.get(nodeid)
} }
}, },
fetchRelatives: function (nodes, metacode_id) { fetchRelatives: function(nodes, metacodeId) {
var self = this var self = this
var node = $.isArray(nodes) ? nodes[0] : nodes var node = $.isArray(nodes) ? nodes[0] : nodes
var topics = DataModel.Topics.map(function (t) { return t.id }) var topics = DataModel.Topics.map(function(t) { return t.id })
var topics_string = topics.join() var topicsString = topics.join()
var creators = DataModel.Creators.map(function (t) { return t.id }) var creators = DataModel.Creators.map(function(t) { return t.id })
var creators_string = creators.join() var creatorsString = creators.join()
var topic = node.getData('topic') var topic = node.getData('topic')
var successCallback; var successCallback
successCallback = function (data) { successCallback = function(data) {
if (Visualize.mGraph.busy) { if (Visualize.mGraph.busy) {
// don't clash with centerOn // don't clash with centerOn
window.setTimeout(function() { successCallback(data) }, 100) window.setTimeout(function() { successCallback(data) }, 100)
@ -131,12 +131,12 @@ const Topic = {
var i, l, t, s var i, l, t, s
Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function(n) {
t = DataModel.Topics.get(n.id) t = DataModel.Topics.get(n.id)
t.set({ node: n }, { silent: true }) t.set({ node: n }, { silent: true })
t.updateNode() t.updateNode()
n.eachAdjacency(function (edge) { n.eachAdjacency(function(edge) {
if (!edge.getData('init')) { if (!edge.getData('init')) {
edge.setData('init', true) edge.setData('init', true)
@ -150,31 +150,30 @@ const Topic = {
}) })
}) })
if ($.isArray(nodes) && nodes.length > 1) { if ($.isArray(nodes) && nodes.length > 1) {
self.fetchRelatives(nodes.slice(1), metacode_id) self.fetchRelatives(nodes.slice(1), metacodeId)
} }
} }
var paramsString = metacode_id ? 'metacode=' + metacode_id + '&' : '' let paramsString = metacodeId ? 'metacode=' + metacodeId + '&' : ''
paramsString += 'network=' + topics_string + '&creators=' + creators_string paramsString += 'network=' + topicsString + '&creators=' + creatorsString
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: '/topics/' + topic.id + '/relatives.json?' + paramsString, url: '/topics/' + topic.id + '/relatives.json?' + paramsString,
success: successCallback, success: successCallback,
error: function () {} error: function() {}
}) })
}, },
// opts is additional options in a hash // opts is additional options in a hash
// TODO: move createNewInDB and permitCreateSynapseAfter into opts // TODO: move createNewInDB and permitCreateSynapseAfter into opts
renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter, opts = {}) { renderTopic: function(mapping, topic, createNewInDB, permitCreateSynapseAfter, opts = {}) {
var self = Topic
var nodeOnViz, tempPos var nodeOnViz, tempPos
var newnode = topic.createNode() var newnode = topic.createNode()
var midpoint = {}, pixelPos var midpoint = {}
var pixelPos
if (!$.isEmptyObject(Visualize.mGraph.graph.nodes)) { if (!$.isEmptyObject(Visualize.mGraph.graph.nodes)) {
Visualize.mGraph.graph.addNode(newnode) Visualize.mGraph.graph.addNode(newnode)
@ -209,7 +208,7 @@ const Topic = {
Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function () { onComplete: function() {
JIT.tempNode = null JIT.tempNode = null
JIT.tempNode2 = null JIT.tempNode2 = null
JIT.tempInit = false JIT.tempInit = false
@ -220,7 +219,7 @@ const Topic = {
Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function () {} onComplete: function() {}
}) })
} }
} else { } else {
@ -238,11 +237,11 @@ const Topic = {
Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function () {} onComplete: function() {}
}) })
} }
var mappingSuccessCallback = function (mappingModel, response, topicModel) { var mappingSuccessCallback = function(mappingModel, response, topicModel) {
var newTopicData = { var newTopicData = {
mappingid: mappingModel.id, mappingid: mappingModel.id,
mappableid: mappingModel.get('mappable_id') mappableid: mappingModel.get('mappable_id')
@ -254,13 +253,13 @@ const Topic = {
opts.success(topicModel) opts.success(topicModel)
} }
} }
var topicSuccessCallback = function (topicModel, response) { var topicSuccessCallback = function(topicModel, response) {
if (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)
}, },
error: function (model, response) { error: function(model, response) {
console.log('error saving mapping to database') console.log('error saving mapping to database')
} }
}) })
@ -275,7 +274,7 @@ const Topic = {
if (topic.isNew()) { if (topic.isNew()) {
topic.save(null, { topic.save(null, {
success: topicSuccessCallback, success: topicSuccessCallback,
error: function (model, response) { error: function(model, response) {
console.log('error saving topic to database') console.log('error saving topic to database')
} }
}) })
@ -286,7 +285,7 @@ const Topic = {
} }
} }
}, },
createTopicLocally: function () { createTopicLocally: function() {
var self = Topic var self = Topic
if (Create.newTopic.name === '') { if (Create.newTopic.name === '') {
@ -315,7 +314,7 @@ const Topic = {
xloc: nextCoords ? nextCoords.x : Create.newTopic.x, xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Create.newTopic.y, yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_id: topic.cid, mappable_id: topic.cid,
mappable_type: 'Topic', mappable_type: 'Topic'
}) })
DataModel.Mappings.add(mapping) DataModel.Mappings.add(mapping)
@ -325,7 +324,7 @@ const Topic = {
self.renderTopic(mapping, topic, true, true) // this function also includes the creation of the topic in the database self.renderTopic(mapping, topic, true, true) // this function also includes the creation of the topic in the database
}, },
getTopicFromAutocomplete: function (id) { getTopicFromAutocomplete: function(id) {
var self = Topic var self = Topic
// hide the 'double-click to add a topic' message // hide the 'double-click to add a topic' message
@ -344,7 +343,7 @@ const Topic = {
xloc: nextCoords ? nextCoords.x : Create.newTopic.x, xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Create.newTopic.y, yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_type: 'Topic', mappable_type: 'Topic',
mappable_id: topic.id, mappable_id: topic.id
}) })
DataModel.Mappings.add(mapping) DataModel.Mappings.add(mapping)
@ -353,7 +352,7 @@ const Topic = {
if (Create.newTopic.pinned) Create.newTopic.beingCreated = true if (Create.newTopic.pinned) Create.newTopic.beingCreated = true
}) })
}, },
getMapFromAutocomplete: function (data) { getMapFromAutocomplete: function(data) {
var self = Topic var self = Topic
$(document).trigger(Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
@ -371,7 +370,7 @@ const Topic = {
xloc: Create.newTopic.x, xloc: Create.newTopic.x,
yloc: Create.newTopic.y, yloc: Create.newTopic.y,
mappable_id: topic.cid, mappable_id: topic.cid,
mappable_type: 'Topic', mappable_type: 'Topic'
}) })
DataModel.Mappings.add(mapping) DataModel.Mappings.add(mapping)
@ -383,7 +382,7 @@ const Topic = {
// this blocked the enterKeyHandler from creating a new topic as well // this blocked the enterKeyHandler from creating a new topic as well
if (Create.newTopic.pinned) Create.newTopic.beingCreated = true if (Create.newTopic.pinned) Create.newTopic.beingCreated = true
}, },
getTopicFromSearch: function (event, id) { getTopicFromSearch: function(event, id) {
var self = Topic var self = Topic
$(document).trigger(Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
@ -394,7 +393,7 @@ const Topic = {
xloc: nextCoords.x, xloc: nextCoords.x,
yloc: nextCoords.y, yloc: nextCoords.y,
mappable_type: 'Topic', mappable_type: 'Topic',
mappable_id: topic.id, mappable_id: topic.id
}) })
DataModel.Mappings.add(mapping) DataModel.Mappings.add(mapping)
self.renderTopic(mapping, topic, true, true) self.renderTopic(mapping, topic, true, true)

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

@ -12,7 +12,7 @@ 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
RAILS_ENV: undefined, RAILS_ENV: undefined,
init: function (serverData) { init: function(serverData) {
var self = TopicCard var self = TopicCard
if (serverData.RAILS_ENV) { if (serverData.RAILS_ENV) {
@ -40,7 +40,7 @@ const TopicCard = {
* Will open the Topic Card for the node that it's passed * Will open the Topic Card for the node that it's passed
* @param {$jit.Graph.Node} node * @param {$jit.Graph.Node} node
*/ */
showCard: function (node, opts) { showCard: function(node, opts) {
var self = TopicCard var self = TopicCard
if (!opts) opts = {} if (!opts) opts = {}
var topic = node.getData('topic') var topic = node.getData('topic')
@ -55,16 +55,14 @@ const TopicCard = {
} }
}) })
}, },
hideCard: function () { hideCard: function() {
var self = 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 = TopicCard
$('#embedlyLinkLoader').hide() $('#embedlyLinkLoader').hide()
// means that the embedly call returned 404 not found // means that the embedly call returned 404 not found
@ -81,7 +79,7 @@ const TopicCard = {
$('#linkremove').click(TopicCard.removeLink) $('#linkremove').click(TopicCard.removeLink)
} }
}, },
removeLink: function () { removeLink: function() {
var self = TopicCard var self = TopicCard
self.openTopicCard.save({ self.openTopicCard.save({
link: null link: null
@ -93,43 +91,43 @@ const TopicCard = {
}, },
showLinkLoader: function() { showLinkLoader: function() {
var loader = new CanvasLoader('embedlyLinkLoader') var loader = new CanvasLoader('embedlyLinkLoader')
loader.setColor('#4fb5c0'); // default is '#000000' loader.setColor('#4fb5c0') // default is '#000000'
loader.setDiameter(28) // default is 40 loader.setDiameter(28) // default is 40
loader.setDensity(41) // default is 40 loader.setDensity(41) // default is 40
loader.setRange(0.9); // default is 1.3 loader.setRange(0.9) // default is 1.3
loader.show() // Hidden by default loader.show() // Hidden by default
}, },
showLink: function(topic) { showLink: function(topic) {
var e = embedly('card', document.getElementById('embedlyLink')) var e = embedly('card', document.getElementById('embedlyLink'))
if (!e && TopicCard.RAILS_ENV != 'development') { if (!e && TopicCard.RAILS_ENV !== 'development') {
TopicCard.handleInvalidLink() TopicCard.handleInvalidLink()
} else if (!e) { } else if (!e) {
$('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show() $('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show()
$('#embedlyLinkLoader').hide() $('#embedlyLinkLoader').hide()
} }
}, },
bindShowCardListeners: function (topic) { bindShowCardListeners: function(topic) {
var self = TopicCard var self = TopicCard
var showCard = document.getElementById('showcard') var showCard = document.getElementById('showcard')
var authorized = self.authorizedToEdit var authorized = self.authorizedToEdit
// get mapper image // get mapper image
var setMapperImage = function (mapper) { var setMapperImage = function(mapper) {
$('.contributorIcon').attr('src', mapper.get('image')) $('.contributorIcon').attr('src', mapper.get('image'))
} }
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() {
$('#addLinkInput input').val('') $('#addLinkInput input').val('')
$('#addLinkInput input').focus() $('#addLinkInput input').focus()
} }
var inputEmbedFunc = function (event) { var inputEmbedFunc = function(event) {
var element = this var element = this
setTimeout(function () { setTimeout(function() {
var text = $(element).val() var text = $(element).val()
if (event.type == 'paste' || (event.type == 'keyup' && event.which == 13)) { if (event.type === 'paste' || (event.type === 'keyup' && event.which === 13)) {
// TODO evaluate converting this to '//' no matter what (infer protocol) // TODO evaluate converting this to '//' no matter what (infer protocol)
if (text.slice(0, 7) !== 'http://' && if (text.slice(0, 7) !== 'http://' &&
text.slice(0, 8) !== 'https://' && text.slice(0, 8) !== 'https://' &&
@ -165,18 +163,18 @@ const TopicCard = {
var selectingMetacode = false var selectingMetacode = false
// attach the listener that shows the metacode title when you hover over the image // attach the listener that shows the metacode title when you hover over the image
$('.showcard .metacodeImage').mouseenter(function () { $('.showcard .metacodeImage').mouseenter(function() {
$('.showcard .icon').css('z-index', '4') $('.showcard .icon').css('z-index', '4')
$('.showcard .metacodeTitle').show() $('.showcard .metacodeTitle').show()
}) })
$('.showcard .linkItem.icon').mouseleave(function () { $('.showcard .linkItem.icon').mouseleave(function() {
if (!selectingMetacode) { if (!selectingMetacode) {
$('.showcard .metacodeTitle').hide() $('.showcard .metacodeTitle').hide()
$('.showcard .icon').css('z-index', '1') $('.showcard .icon').css('z-index', '1')
} }
}) })
var metacodeLiClick = function () { var metacodeLiClick = function() {
selectingMetacode = false selectingMetacode = false
var metacodeId = parseInt($(this).attr('data-id')) var metacodeId = parseInt($(this).attr('data-id'))
var metacode = DataModel.Metacodes.get(metacodeId) var metacode = DataModel.Metacodes.get(metacodeId)
@ -193,7 +191,7 @@ const TopicCard = {
$('.showcard .icon').css('z-index', '1') $('.showcard .icon').css('z-index', '1')
} }
var openMetacodeSelect = function (event) { var openMetacodeSelect = function(event) {
var TOPICCARD_WIDTH = 300 var TOPICCARD_WIDTH = 300
var METACODESELECT_WIDTH = 404 var METACODESELECT_WIDTH = 404
var MAX_METACODELIST_HEIGHT = 270 var MAX_METACODELIST_HEIGHT = 270
@ -219,7 +217,6 @@ const TopicCard = {
var windowHeight = $(window).height() var windowHeight = $(window).height()
var showcardTop = parseInt($('.showcard').css('top')) var showcardTop = parseInt($('.showcard').css('top'))
var topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom')) var topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'))
var heightOfSetList = $('.showcard .metacodeSelect').height()
var distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight) var distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight)
if (distanceFromBottom < MAX_METACODELIST_HEIGHT) { if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
$('.metacodeSelect').addClass('onBottomEdge') $('.metacodeSelect').addClass('onBottomEdge')
@ -230,7 +227,7 @@ const TopicCard = {
} }
} }
var hideMetacodeSelect = function () { var hideMetacodeSelect = function() {
selectingMetacode = false selectingMetacode = false
$('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge') $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
$('.metacodeTitle').hide() $('.metacodeTitle').hide()
@ -240,13 +237,13 @@ const TopicCard = {
if (authorized) { if (authorized) {
$('.showcard .metacodeTitle').click(openMetacodeSelect) $('.showcard .metacodeTitle').click(openMetacodeSelect)
$('.showcard').click(hideMetacodeSelect) $('.showcard').click(hideMetacodeSelect)
$('.metacodeSelect > ul > li').click(function (event) { $('.metacodeSelect > ul > li').click(function(event) {
event.stopPropagation() event.stopPropagation()
}) })
$('.metacodeSelect li li').click(metacodeLiClick) $('.metacodeSelect li li').click(metacodeLiClick)
var bipName = $(showCard).find('.best_in_place_name') var bipName = $(showCard).find('.best_in_place_name')
bipName.bind('best_in_place:activate', function () { bipName.bind('best_in_place:activate', function() {
var $el = bipName.find('textarea') var $el = bipName.find('textarea')
var el = $el[0] var el = $el[0]
@ -254,12 +251,12 @@ const TopicCard = {
$('.showcard .title').append('<div class="nameCounter forTopic"></div>') $('.showcard .title').append('<div class="nameCounter forTopic"></div>')
var callback = function (data) { var callback = function(data) {
$('.nameCounter.forTopic').html(data.all + '/140') $('.nameCounter.forTopic').html(data.all + '/140')
} }
Countable.live(el, callback) Countable.live(el, callback)
}) })
bipName.bind('best_in_place:deactivate', function () { bipName.bind('best_in_place:deactivate', function() {
$('.nameCounter.forTopic').remove() $('.nameCounter.forTopic').remove()
}) })
bipName.keypress(function(e) { bipName.keypress(function(e) {
@ -270,7 +267,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 = Util.decodeEntities($(this).html()) var name = Util.decodeEntities($(this).html())
topic.set('name', name) topic.set('name', name)
topic.trigger('saved') topic.trigger('saved')
@ -278,7 +275,7 @@ const TopicCard = {
// this is for all subsequent renders after in-place editing the desc field // this is for all subsequent renders after in-place editing the desc field
const bipDesc = $(showCard).find('.best_in_place_desc') const bipDesc = $(showCard).find('.best_in_place_desc')
bipDesc.bind('ajax:success', function () { bipDesc.bind('ajax:success', function() {
var desc = $(this).html() === $(this).data('bip-nil') var desc = $(this).html() === $(this).data('bip-nil')
? '' ? ''
: $(this).text() : $(this).text()
@ -296,7 +293,7 @@ const TopicCard = {
}) })
} }
var permissionLiClick = function (event) { var permissionLiClick = function(event) {
selectingPermission = false selectingPermission = false
var permission = $(this).attr('class') var permission = $(this).attr('class')
topic.save({ topic.save({
@ -308,7 +305,7 @@ const TopicCard = {
event.stopPropagation() event.stopPropagation()
} }
var openPermissionSelect = function (event) { var openPermissionSelect = function(event) {
if (!selectingPermission) { if (!selectingPermission) {
selectingPermission = true selectingPermission = true
$(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow $(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
@ -324,7 +321,7 @@ const TopicCard = {
} }
} }
var hidePermissionSelect = function () { var hidePermissionSelect = function() {
selectingPermission = false selectingPermission = false
$('.showcard .yourTopic .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow $('.showcard .yourTopic .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
$('.showcard .permissionSelect').remove() $('.showcard .permissionSelect').remove()
@ -336,15 +333,15 @@ const TopicCard = {
$('.showcard').click(hidePermissionSelect) $('.showcard').click(hidePermissionSelect)
} }
$('.links .mapCount').unbind().click(function (event) { $('.links .mapCount').unbind().click(function(event) {
$('.mapCount .tip').toggle() $('.mapCount .tip').toggle()
$('.showcard .hoverTip').toggleClass('hide') $('.showcard .hoverTip').toggleClass('hide')
event.stopPropagation() event.stopPropagation()
}) })
$('.mapCount .tip').unbind().click(function (event) { $('.mapCount .tip').unbind().click(function(event) {
event.stopPropagation() event.stopPropagation()
}) })
$('.showcard').unbind('.hideTip').bind('click.hideTip', function () { $('.showcard').unbind('.hideTip').bind('click.hideTip', function() {
$('.mapCount .tip').hide() $('.mapCount .tip').hide()
$('.showcard .hoverTip').removeClass('hide') $('.showcard .hoverTip').removeClass('hide')
}) })
@ -353,26 +350,26 @@ const TopicCard = {
var originalText = $('.showMore').html() var originalText = $('.showMore').html()
$('.mapCount .tip .showMore').unbind().toggle( $('.mapCount .tip .showMore').unbind().toggle(
function (event) { function(event) {
$('.extraText').toggleClass('hideExtra') $('.extraText').toggleClass('hideExtra')
$('.showMore').html('Show less...') $('.showMore').html('Show less...')
}, },
function (event) { function(event) {
$('.extraText').toggleClass('hideExtra') $('.extraText').toggleClass('hideExtra')
$('.showMore').html(originalText) $('.showMore').html(originalText)
}) })
$('.mapCount .tip showMore').unbind().click(function (event) { $('.mapCount .tip showMore').unbind().click(function(event) {
event.stopPropagation() event.stopPropagation()
}) })
}, },
handleInvalidLink: function () { handleInvalidLink: function() {
var self = TopicCard var self = TopicCard
self.removeLink() self.removeLink()
GlobalUI.notifyUser('Invalid link') GlobalUI.notifyUser('Invalid link')
}, },
populateShowCard: function (topic) { populateShowCard: function(topic) {
var self = TopicCard var self = TopicCard
var showCard = document.getElementById('showcard') var showCard = document.getElementById('showcard')
@ -383,7 +380,7 @@ const TopicCard = {
var html = self.generateShowcardHTML.render(topicForTemplate) var html = self.generateShowcardHTML.render(topicForTemplate)
if (topic.authorizeToEdit(Active.Mapper)) { if (topic.authorizeToEdit(Active.Mapper)) {
var perm = document.createElement('div') let perm = document.createElement('div')
var string = 'permission canEdit' var string = 'permission canEdit'
if (topic.authorizePermissionChange(Active.Mapper)) string += ' yourTopic' if (topic.authorizePermissionChange(Active.Mapper)) string += ' yourTopic'
@ -391,7 +388,7 @@ const TopicCard = {
perm.innerHTML = html perm.innerHTML = html
showCard.appendChild(perm) showCard.appendChild(perm)
} else { } else {
var perm = document.createElement('div') let perm = document.createElement('div')
perm.className = 'permission cannotEdit' perm.className = 'permission cannotEdit'
perm.innerHTML = html perm.innerHTML = html
showCard.appendChild(perm) showCard.appendChild(perm)
@ -401,9 +398,7 @@ const TopicCard = {
}, },
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 = TopicCard
var nodeValues = {} var nodeValues = {}
var authorized = topic.authorizeToEdit(Active.Mapper) var authorized = topic.authorizeToEdit(Active.Mapper)
@ -438,18 +433,18 @@ const TopicCard = {
nodeValues.inmaps = '' nodeValues.inmaps = ''
if (inmapsAr.length < 6) { if (inmapsAr.length < 6) {
for (let i = 0; i < inmapsAr.length; i++) { for (let i = 0; i < inmapsAr.length; i++) {
var url = '/maps/' + inmapsLinks[i] const url = '/maps/' + inmapsLinks[i]
nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>' nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>'
} }
} else { } else {
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
var url = '/maps/' + inmapsLinks[i] const url = '/maps/' + inmapsLinks[i]
nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>' nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>'
} }
var extra = inmapsAr.length - 5 const extra = inmapsAr.length - 5
nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>' nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>'
for (let i = 5; i < inmapsAr.length; i++) { for (let i = 5; i < inmapsAr.length; i++) {
var url = '/maps/' + inmapsLinks[i] const url = '/maps/' + inmapsLinks[i]
nodeValues.inmaps += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsAr[i] + '</a></li>' nodeValues.inmaps += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsAr[i] + '</a></li>'
} }
} }

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

@ -7,22 +7,22 @@ const Util = {
// Line Splitter Function // Line Splitter Function
// copyright Stephen Chapman, 19th April 2006 // copyright Stephen Chapman, 19th April 2006
// you may copy this code but please keep the copyright notice as well // you may copy this code but please keep the copyright notice as well
splitLine: function (st, n) { splitLine: function(st, n) {
var b = '' var b = ''
var s = st ? st : '' var s = st || ''
while (s.length > n) { while (s.length > n) {
var c = s.substring(0, n) var c = s.substring(0, n)
var d = c.lastIndexOf(' ') var d = c.lastIndexOf(' ')
var e = c.lastIndexOf('\n') var e = c.lastIndexOf('\n')
if (e != -1) d = e if (e !== -1) d = e
if (d == -1) d = n if (d === -1) d = n
b += c.substring(0, d) + '\n' b += c.substring(0, d) + '\n'
s = s.substring(d + 1) s = s.substring(d + 1)
} }
return b + s return b + s
}, },
nowDateFormatted: function (date = new Date(Date.now())) { nowDateFormatted: function(date = new Date(Date.now())) {
const month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1) const month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
const year = date.getFullYear() const year = date.getFullYear()
@ -30,33 +30,32 @@ const Util = {
return month + '/' + day + '/' + year return month + '/' + day + '/' + year
}, },
decodeEntities: function (desc) { decodeEntities: function(desc) {
var str, temp = document.createElement('p') let temp = document.createElement('p')
temp.innerHTML = desc // browser handles the topics temp.innerHTML = desc // browser handles the topics
str = temp.textContent || temp.innerText let str = temp.textContent || temp.innerText
temp = null // delete the element temp = null // delete the element
return str return str
}, // decodeEntities }, // decodeEntities
getDistance: function (p1, p2) { getDistance: function(p1, p2) {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2)) return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2))
}, },
// Try using Visualize.mGraph // Try using Visualize.mGraph
coordsToPixels: function (mGraph, coords) { coordsToPixels: function(mGraph, coords) {
if (mGraph) { if (mGraph) {
var canvas = mGraph.canvas, const canvas = mGraph.canvas
s = canvas.getSize(), const s = canvas.getSize()
p = canvas.getPos(), const p = canvas.getPos()
ox = canvas.translateOffsetX, const ox = canvas.translateOffsetX
oy = canvas.translateOffsetY, const oy = canvas.translateOffsetY
sx = canvas.scaleOffsetX, const sx = canvas.scaleOffsetX
sy = canvas.scaleOffsetY const sy = canvas.scaleOffsetY
var pixels = { return {
x: (coords.x / (1 / sx)) + p.x + s.width / 2 + ox, x: (coords.x / (1 / sx)) + p.x + s.width / 2 + ox,
y: (coords.y / (1 / sy)) + p.y + s.height / 2 + oy y: (coords.y / (1 / sy)) + p.y + s.height / 2 + oy
} }
return pixels
} else { } else {
return { return {
x: 0, x: 0,
@ -66,29 +65,27 @@ const Util = {
}, },
// Try using Visualize.mGraph // Try using Visualize.mGraph
pixelsToCoords: function (mGraph, pixels) { pixelsToCoords: function(mGraph, pixels) {
var coords
if (mGraph) { if (mGraph) {
var canvas = mGraph.canvas, const canvas = mGraph.canvas
s = canvas.getSize(), const s = canvas.getSize()
p = canvas.getPos(), const p = canvas.getPos()
ox = canvas.translateOffsetX, const ox = canvas.translateOffsetX
oy = canvas.translateOffsetY, const oy = canvas.translateOffsetY
sx = canvas.scaleOffsetX, const sx = canvas.scaleOffsetX
sy = canvas.scaleOffsetY const sy = canvas.scaleOffsetY
coords = { return {
x: (pixels.x - p.x - s.width / 2 - ox) * (1 / sx), x: (pixels.x - p.x - s.width / 2 - ox) * (1 / sx),
y: (pixels.y - p.y - s.height / 2 - oy) * (1 / sy), y: (pixels.y - p.y - s.height / 2 - oy) * (1 / sy)
} }
} else { } else {
coords = { return {
x: 0, x: 0,
y: 0 y: 0
} }
} }
return coords
}, },
getPastelColor: function (opts = {}) { getPastelColor: function(opts = {}) {
const rseed = opts.rseed === undefined ? Math.random() : opts.rseed const rseed = opts.rseed === undefined ? Math.random() : opts.rseed
const gseed = opts.gseed === undefined ? Math.random() : opts.gseed const gseed = opts.gseed === undefined ? Math.random() : opts.gseed
const bseed = opts.bseed === undefined ? Math.random() : opts.bseed const bseed = opts.bseed === undefined ? Math.random() : opts.bseed
@ -98,7 +95,7 @@ const Util = {
return 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) {
// validate hex string // validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '') hex = String(hex).replace(/[^0-9a-f]/gi, '')
if (hex.length < 6) { if (hex.length < 6) {
@ -107,25 +104,25 @@ const Util = {
lum = lum || 0 lum = lum || 0
// convert to decimal and change luminosity // convert to decimal and change luminosity
var rgb = '#', c, i var rgb = '#'
for (i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
c = parseInt(hex.substr(i * 2, 2), 16) let c = parseInt(hex.substr(i * 2, 2), 16)
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16) c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16)
rgb += ('00' + c).substr(c.length) rgb += ('00' + c).substr(c.length)
} }
return rgb return rgb
}, },
openLink: function(url){ openLink: function(url) {
var win = (url !== "") ? window.open(url, '_blank') : "empty"; var win = (url !== '') ? window.open(url, '_blank') : 'empty'
if (win) { if (win) {
//Browser has allowed it to be opened // Browser has allowed it to be opened
return true; return true
} else { } else {
//Browser has blocked it // Browser has blocked it
alert('Please allow popups in order to open the link'); window.alert('Please allow popups in order to open the link')
return false; return false
} }
}, },
mdToHTML: text => { mdToHTML: text => {
@ -134,24 +131,24 @@ const Util = {
return new HtmlRenderer({ safe: true }) return new HtmlRenderer({ safe: true })
.render(new Parser().parse(safeText)) .render(new Parser().parse(safeText))
}, },
logCanvasAttributes: function(canvas){ logCanvasAttributes: function(canvas) {
const fakeMgraph = { canvas } const fakeMgraph = { canvas }
return { return {
scaleX: canvas.scaleOffsetX, scaleX: canvas.scaleOffsetX,
scaleY: canvas.scaleOffsetY, scaleY: canvas.scaleOffsetY,
centreCoords: Util.pixelsToCoords(fakeMgraph, { x: canvas.canvases[0].size.width / 2, y: canvas.canvases[0].size.height / 2 }), centreCoords: Util.pixelsToCoords(fakeMgraph, { x: canvas.canvases[0].size.width / 2, y: canvas.canvases[0].size.height / 2 })
}; }
}, },
resizeCanvas: function(canvas){ resizeCanvas: function(canvas) {
// Store the current canvas attributes, i.e. scale and map-coordinate at the centre of the user's screen // Store the current canvas attributes, i.e. scale and map-coordinate at the centre of the user's screen
const oldAttr = Util.logCanvasAttributes(canvas); const oldAttr = Util.logCanvasAttributes(canvas)
// Resize the canvas to fill the new window size. Based on how JIT works, this also resets the map back to scale 1 and tranlations = 0 // Resize the canvas to fill the new window size. Based on how JIT works, this also resets the map back to scale 1 and tranlations = 0
canvas.resize($(window).width(), $(window).height()) canvas.resize($(window).width(), $(window).height())
// Return the map to the original scale, and then put the previous central map-coordinate back to the centre of user's newly resized screen // Return the map to the original scale, and then put the previous central map-coordinate back to the centre of user's newly resized screen
canvas.scale(oldAttr.scaleX, oldAttr.scaleY) canvas.scale(oldAttr.scaleX, oldAttr.scaleY)
const newAttr = Util.logCanvasAttributes(canvas); const newAttr = Util.logCanvasAttributes(canvas)
canvas.translate(newAttr.centreCoords.x - oldAttr.centreCoords.x, newAttr.centreCoords.y - oldAttr.centreCoords.y) canvas.translate(newAttr.centreCoords.x - oldAttr.centreCoords.x, newAttr.centreCoords.y - oldAttr.centreCoords.y)
} }
} }

90
frontend/src/Metamaps/Views/ChatView.js
View file

@ -40,7 +40,7 @@ var Private = {
</span> </span>
<div class='clearfloat'></div> <div class='clearfloat'></div>
</div>`, </div>`,
templates: function () { templates: function() {
underscore.templateSettings = { underscore.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g interpolate: /\{\{(.+?)\}\}/g
} }
@ -48,7 +48,7 @@ var Private = {
this.participantTemplate = underscore.template(Private.participantHTML) this.participantTemplate = underscore.template(Private.participantHTML)
}, },
createElements: function () { createElements: function() {
this.$unread = $('<div class="chat-unread"></div>') this.$unread = $('<div class="chat-unread"></div>')
this.$button = $('<div class="chat-button"><div class="tooltips">Chat</div></div>') this.$button = $('<div class="chat-button"><div class="tooltips">Chat</div></div>')
this.$messageInput = $('<textarea placeholder="Send a message..." class="chat-input"></textarea>') this.$messageInput = $('<textarea placeholder="Send a message..." class="chat-input"></textarea>')
@ -71,7 +71,7 @@ var Private = {
this.$messages = $('<div class="chat-messages"></div>') this.$messages = $('<div class="chat-messages"></div>')
this.$container = $('<div class="chat-box"></div>') this.$container = $('<div class="chat-box"></div>')
}, },
attachElements: function () { attachElements: function() {
this.$button.append(this.$unread) this.$button.append(this.$unread)
this.$juntoHeader.append(this.$videoToggle) this.$juntoHeader.append(this.$videoToggle)
@ -88,40 +88,40 @@ var Private = {
this.$container.append(this.$messages) this.$container.append(this.$messages)
this.$container.append(this.$messageInput) this.$container.append(this.$messageInput)
}, },
addEventListeners: function () { addEventListeners: function() {
var self = this var self = this
this.participants.on('add', function (participant) { this.participants.on('add', function(participant) {
Private.addParticipant.call(self, participant) Private.addParticipant.call(self, participant)
}) })
this.participants.on('remove', function (participant) { this.participants.on('remove', function(participant) {
Private.removeParticipant.call(self, participant) Private.removeParticipant.call(self, participant)
}) })
this.$button.on('click', function () { this.$button.on('click', function() {
Handlers.buttonClick.call(self) Handlers.buttonClick.call(self)
}) })
this.$videoToggle.on('click', function () { this.$videoToggle.on('click', function() {
Handlers.videoToggleClick.call(self) Handlers.videoToggleClick.call(self)
}) })
this.$cursorToggle.on('click', function () { this.$cursorToggle.on('click', function() {
Handlers.cursorToggleClick.call(self) Handlers.cursorToggleClick.call(self)
}) })
this.$soundToggle.on('click', function () { this.$soundToggle.on('click', function() {
Handlers.soundToggleClick.call(self) Handlers.soundToggleClick.call(self)
}) })
this.$messageInput.on('keyup', function (event) { this.$messageInput.on('keyup', function(event) {
Handlers.keyUp.call(self, event) Handlers.keyUp.call(self, event)
}) })
this.$messageInput.on('focus', function () { this.$messageInput.on('focus', function() {
Handlers.inputFocus.call(self) Handlers.inputFocus.call(self)
}) })
this.$messageInput.on('blur', function () { this.$messageInput.on('blur', function() {
Handlers.inputBlur.call(self) Handlers.inputBlur.call(self)
}) })
}, },
initializeSounds: function (soundUrls) { initializeSounds: function(soundUrls) {
this.sound = new Howl({ this.sound = new Howl({
src: soundUrls, src: soundUrls,
sprite: { sprite: {
@ -133,15 +133,15 @@ var Private = {
} }
}) })
}, },
incrementUnread: function () { incrementUnread: function() {
this.unreadMessages++ this.unreadMessages++
this.$unread.html(this.unreadMessages) this.$unread.html(this.unreadMessages)
this.$unread.show() this.$unread.show()
}, },
addMessage: function (message, isInitial, wasMe) { addMessage: function(message, isInitial, wasMe) {
if (!this.isOpen && !isInitial) Private.incrementUnread.call(this) if (!this.isOpen && !isInitial) Private.incrementUnread.call(this)
function addZero (i) { function addZero(i) {
if (i < 10) { if (i < 10) {
i = '0' + i i = '0' + i
} }
@ -162,20 +162,20 @@ var Private = {
if (!wasMe && !isInitial && this.alertSound) this.sound.play('receivechat') if (!wasMe && !isInitial && this.alertSound) this.sound.play('receivechat')
}, },
initialMessages: function () { initialMessages: function() {
var messages = this.messages.models var messages = this.messages.models
for (var i = 0; i < messages.length; i++) { for (var i = 0; i < messages.length; i++) {
Private.addMessage.call(this, messages[i], true) Private.addMessage.call(this, messages[i], true)
} }
}, },
handleInputMessage: function () { handleInputMessage: function() {
var message = { var message = {
message: this.$messageInput.val() message: this.$messageInput.val()
} }
this.$messageInput.val('') this.$messageInput.val('')
$(document).trigger(ChatView.events.message + '-' + this.room, [message]) $(document).trigger(ChatView.events.message + '-' + this.room, [message])
}, },
addParticipant: function (participant) { addParticipant: function(participant) {
var p = _.clone(participant.attributes) var p = _.clone(participant.attributes)
if (p.self) { if (p.self) {
p.selfClass = 'is-self' p.selfClass = 'is-self'
@ -187,46 +187,46 @@ var Private = {
var html = this.participantTemplate(p) var html = this.participantTemplate(p)
this.$participants.append(html) this.$participants.append(html)
}, },
removeParticipant: function (participant) { removeParticipant: function(participant) {
this.$container.find('.participant-' + participant.get('id')).remove() this.$container.find('.participant-' + participant.get('id')).remove()
} }
} }
var Handlers = { var Handlers = {
buttonClick: function () { buttonClick: function() {
if (this.isOpen) this.close() if (this.isOpen) this.close()
else if (!this.isOpen) this.open() else if (!this.isOpen) this.open()
}, },
videoToggleClick: function () { videoToggleClick: function() {
this.$videoToggle.toggleClass('active') this.$videoToggle.toggleClass('active')
this.videosShowing = !this.videosShowing this.videosShowing = !this.videosShowing
$(document).trigger(this.videosShowing ? ChatView.events.videosOn : ChatView.events.videosOff) $(document).trigger(this.videosShowing ? ChatView.events.videosOn : ChatView.events.videosOff)
}, },
cursorToggleClick: function () { cursorToggleClick: function() {
this.$cursorToggle.toggleClass('active') this.$cursorToggle.toggleClass('active')
this.cursorsShowing = !this.cursorsShowing this.cursorsShowing = !this.cursorsShowing
$(document).trigger(this.cursorsShowing ? ChatView.events.cursorsOn : ChatView.events.cursorsOff) $(document).trigger(this.cursorsShowing ? ChatView.events.cursorsOn : ChatView.events.cursorsOff)
}, },
soundToggleClick: function () { soundToggleClick: function() {
this.alertSound = !this.alertSound this.alertSound = !this.alertSound
this.$soundToggle.toggleClass('active') this.$soundToggle.toggleClass('active')
}, },
keyUp: function (event) { keyUp: function(event) {
switch (event.which) { switch (event.which) {
case 13: // enter case 13: // enter
Private.handleInputMessage.call(this) Private.handleInputMessage.call(this)
break break
} }
}, },
inputFocus: function () { inputFocus: function() {
$(document).trigger(ChatView.events.inputFocus) $(document).trigger(ChatView.events.inputFocus)
}, },
inputBlur: function () { inputBlur: function() {
$(document).trigger(ChatView.events.inputBlur) $(document).trigger(ChatView.events.inputBlur)
} }
} }
const ChatView = function (messages, mapper, room) { const ChatView = function(messages, mapper, room) {
this.room = room this.room = room
this.mapper = mapper this.mapper = mapper
this.messages = messages // backbone collection this.messages = messages // backbone collection
@ -249,7 +249,7 @@ const ChatView = function (messages, mapper, room) {
}) })
} }
ChatView.prototype.conversationInProgress = function (participating) { ChatView.prototype.conversationInProgress = function(participating) {
this.$conversationInProgress.show() this.$conversationInProgress.show()
this.$participants.addClass('is-live') this.$participants.addClass('is-live')
if (participating) this.$participants.addClass('is-participating') if (participating) this.$participants.addClass('is-participating')
@ -258,7 +258,7 @@ ChatView.prototype.conversationInProgress = function (participating) {
// hide invite to call buttons // hide invite to call buttons
} }
ChatView.prototype.conversationEnded = function () { ChatView.prototype.conversationEnded = function() {
this.$conversationInProgress.hide() this.$conversationInProgress.hide()
this.$participants.removeClass('is-live') this.$participants.removeClass('is-live')
this.$participants.removeClass('is-participating') this.$participants.removeClass('is-participating')
@ -267,42 +267,42 @@ ChatView.prototype.conversationEnded = function () {
this.$participants.find('.participant').removeClass('pending') this.$participants.find('.participant').removeClass('pending')
} }
ChatView.prototype.leaveConversation = function () { ChatView.prototype.leaveConversation = function() {
this.$participants.removeClass('is-participating') this.$participants.removeClass('is-participating')
} }
ChatView.prototype.mapperJoinedCall = function (id) { ChatView.prototype.mapperJoinedCall = function(id) {
this.$participants.find('.participant-' + id).addClass('active') this.$participants.find('.participant-' + id).addClass('active')
} }
ChatView.prototype.mapperLeftCall = function (id) { ChatView.prototype.mapperLeftCall = function(id) {
this.$participants.find('.participant-' + id).removeClass('active') this.$participants.find('.participant-' + id).removeClass('active')
} }
ChatView.prototype.invitationPending = function (id) { ChatView.prototype.invitationPending = function(id) {
this.$participants.find('.participant-' + id).addClass('pending') this.$participants.find('.participant-' + id).addClass('pending')
} }
ChatView.prototype.invitationAnswered = function (id) { ChatView.prototype.invitationAnswered = function(id) {
this.$participants.find('.participant-' + id).removeClass('pending') this.$participants.find('.participant-' + id).removeClass('pending')
} }
ChatView.prototype.addParticipant = function (participant) { ChatView.prototype.addParticipant = function(participant) {
this.participants.add(participant) this.participants.add(participant)
} }
ChatView.prototype.removeParticipant = function (username) { ChatView.prototype.removeParticipant = function(username) {
var p = this.participants.find(p => p.get('username') === username) var p = this.participants.find(p => p.get('username') === username)
if (p) { if (p) {
this.participants.remove(p) this.participants.remove(p)
} }
} }
ChatView.prototype.removeParticipants = function () { ChatView.prototype.removeParticipants = function() {
this.participants.remove(this.participants.models) this.participants.remove(this.participants.models)
} }
ChatView.prototype.open = function () { ChatView.prototype.open = function() {
this.$container.css({ this.$container.css({
right: '0' right: '0'
}) })
@ -314,12 +314,12 @@ ChatView.prototype.open = function () {
$(document).trigger(ChatView.events.openTray) $(document).trigger(ChatView.events.openTray)
} }
ChatView.prototype.addMessage = function (message, isInitial, wasMe) { ChatView.prototype.addMessage = function(message, isInitial, wasMe) {
this.messages.add(message) this.messages.add(message)
Private.addMessage.call(this, message, isInitial, wasMe) Private.addMessage.call(this, message, isInitial, wasMe)
} }
ChatView.prototype.scrollMessages = function (duration) { ChatView.prototype.scrollMessages = function(duration) {
duration = duration || 0 duration = duration || 0
this.$messages.animate({ this.$messages.animate({
@ -327,13 +327,13 @@ ChatView.prototype.scrollMessages = function (duration) {
}, duration) }, duration)
} }
ChatView.prototype.clearMessages = function () { ChatView.prototype.clearMessages = function() {
this.unreadMessages = 0 this.unreadMessages = 0
this.$unread.hide() this.$unread.hide()
this.$messages.empty() this.$messages.empty()
} }
ChatView.prototype.close = function () { ChatView.prototype.close = function() {
this.$container.css({ this.$container.css({
right: '-300px' right: '-300px'
}) })
@ -342,7 +342,7 @@ ChatView.prototype.close = function () {
$(document).trigger(ChatView.events.closeTray) $(document).trigger(ChatView.events.closeTray)
} }
ChatView.prototype.remove = function () { ChatView.prototype.remove = function() {
this.$button.off() this.$button.off()
this.$container.remove() this.$container.remove()
} }

39
frontend/src/Metamaps/Views/ExploreMaps.js
View file

@ -4,6 +4,7 @@ import React from 'react'
import ReactDOM from 'react-dom' // TODO ensure this isn't a double import import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
import Active from '../Active' import Active from '../Active'
import DataModel from '../DataModel'
import GlobalUI from '../GlobalUI' import GlobalUI from '../GlobalUI'
import Realtime from '../Realtime' import Realtime from '../Realtime'
import Loading from '../Loading' import Loading from '../Loading'
@ -12,7 +13,7 @@ import Maps from '../../components/Maps'
const ExploreMaps = { const ExploreMaps = {
pending: false, pending: false,
mapper: null, mapper: null,
setCollection: function (collection) { setCollection: function(collection) {
var self = ExploreMaps var self = ExploreMaps
if (self.collection) { if (self.collection) {
@ -25,7 +26,7 @@ const ExploreMaps = {
self.collection.on('successOnFetch', self.handleSuccess) self.collection.on('successOnFetch', self.handleSuccess)
self.collection.on('errorOnFetch', self.handleError) self.collection.on('errorOnFetch', self.handleError)
}, },
render: function (cb) { render: function(cb) {
var self = ExploreMaps var self = ExploreMaps
if (!self.collection) return if (!self.collection) return
@ -35,19 +36,19 @@ const ExploreMaps = {
section: self.collection.id, section: self.collection.id,
maps: self.collection, maps: self.collection,
juntoState: Realtime.juntoState, juntoState: Realtime.juntoState,
moreToLoad: self.collection.page != 'loadedAll', moreToLoad: self.collection.page !== 'loadedAll',
user: self.collection.id === 'mapper' ? self.mapper : null, user: self.collection.id === 'mapper' ? self.mapper : null,
loadMore: self.loadMore, loadMore: self.loadMore,
pending: self.pending, pending: self.pending,
onStar: function (map) { onStar: function(map) {
$.post('/maps/' + map.id + '/star') $.post('/maps/' + map.id + '/star')
map.set('star_count', map.get('star_count') + 1) map.set('star_count', map.get('star_count') + 1)
if (Metamaps.Stars) Metamaps.Stars.push({ user_id: Active.Mapper.id, map_id: map.id }) if (DataModel.Stars) DataModel.Stars.push({ user_id: Active.Mapper.id, map_id: map.id })
Metamaps.Maps.Starred.add(map) DataModel.Maps.Starred.add(map)
GlobalUI.notifyUser('Map is now starred') GlobalUI.notifyUser('Map is now starred')
self.render() self.render()
}, },
onRequest: function (map) { onRequest: function(map) {
$.post({ $.post({
url: `/maps/${map.id}/access_request` url: `/maps/${map.id}/access_request`
}) })
@ -62,47 +63,47 @@ const ExploreMaps = {
if (cb) cb() if (cb) cb()
Loading.hide() Loading.hide()
}, },
loadMore: function () { loadMore: function() {
var self = ExploreMaps var self = ExploreMaps
if (self.collection.page != "loadedAll") { if (self.collection.page !== 'loadedAll') {
self.collection.getMaps() self.collection.getMaps()
self.pending = true self.pending = true
} }
self.render() self.render()
}, },
handleSuccess: function (cb) { handleSuccess: function(cb) {
var self = ExploreMaps var self = ExploreMaps
self.pending = false self.pending = false
if (self.collection && self.collection.id === 'mapper') { if (self.collection && self.collection.id === 'mapper') {
self.fetchUserThenRender(cb) self.fetchUserThenRender(cb)
} else { } else {
self.render(cb) self.render(cb)
Metamaps.Loading.hide() Loading.hide()
} }
}, },
handleError: function () { handleError: function() {
console.log('error loading maps!') // TODO console.log('error loading maps!') // TODO
Metamaps.Loading.hide() Loading.hide()
}, },
fetchUserThenRender: function (cb) { fetchUserThenRender: function(cb) {
var self = ExploreMaps var self = ExploreMaps
if (self.mapper && self.mapper.id === self.collection.mapperId) { if (self.mapper && self.mapper.id === self.collection.mapperId) {
self.render(cb) self.render(cb)
return Metamaps.Loading.hide() return Loading.hide()
} }
// first load the mapper object and then call the render function // first load the mapper object and then call the render function
$.ajax({ $.ajax({
url: '/users/' + self.collection.mapperId + '/details.json', url: '/users/' + self.collection.mapperId + '/details.json',
success: function (response) { success: function(response) {
self.mapper = response self.mapper = response
self.render(cb) self.render(cb)
Metamaps.Loading.hide() Loading.hide()
}, },
error: function () { error: function() {
self.render(cb) self.render(cb)
Metamaps.Loading.hide() Loading.hide()
} }
}) })
} }

208
frontend/src/Metamaps/Views/Room.js
View file

@ -14,8 +14,6 @@ import ChatView from './ChatView'
import VideoView from './VideoView' import VideoView from './VideoView'
const Room = function(opts = {}) { const Room = function(opts = {}) {
var self = this
this.isActiveRoom = false this.isActiveRoom = false
this.socket = opts.socket this.socket = opts.socket
this.webrtc = opts.webrtc this.webrtc = opts.webrtc
@ -77,128 +75,124 @@ Room.prototype.setPeopleCount = function(count) {
this.peopleCount = count this.peopleCount = count
} }
Room.prototype.init = function () { Room.prototype.init = function() {
var self = this var self = this
$(document).on(VideoView.events.audioControlClick, function (event, videoView) { $(document).on(VideoView.events.audioControlClick, function(event, videoView) {
if (!videoView.audioStatus) self.webrtc.mute() if (!videoView.audioStatus) self.webrtc.mute()
else if (videoView.audioStatus) self.webrtc.unmute() else if (videoView.audioStatus) self.webrtc.unmute()
}) })
$(document).on(VideoView.events.videoControlClick, function (event, videoView) { $(document).on(VideoView.events.videoControlClick, function(event, videoView) {
if (!videoView.videoStatus) self.webrtc.pauseVideo() if (!videoView.videoStatus) self.webrtc.pauseVideo()
else if (videoView.videoStatus) self.webrtc.resumeVideo() else if (videoView.videoStatus) self.webrtc.resumeVideo()
}) })
this.webrtc.webrtc.off('peerStreamAdded') this.webrtc.webrtc.off('peerStreamAdded')
this.webrtc.webrtc.off('peerStreamRemoved') this.webrtc.webrtc.off('peerStreamRemoved')
this.webrtc.on('peerStreamAdded', function (peer) { this.webrtc.on('peerStreamAdded', function(peer) {
var mapper = Realtime.mappersOnMap[peer.nick] var mapper = Realtime.mappersOnMap[peer.nick]
peer.avatar = mapper.image peer.avatar = mapper.image
peer.username = mapper.name peer.username = mapper.name
if (self.isActiveRoom) { if (self.isActiveRoom) {
self.addVideo(peer) self.addVideo(peer)
}
})
this.webrtc.on('peerStreamRemoved', function (peer) {
if (self.isActiveRoom) {
self.removeVideo(peer)
}
})
this.webrtc.on('mute', function (data) {
var v = self.videos[data.id]
if (!v) return
if (data.name === 'audio') {
v.audioStatus = false
}
else if (data.name === 'video') {
v.videoStatus = false
v.$avatar.show()
}
if (!v.audioStatus && !v.videoStatus) v.$container.hide()
})
this.webrtc.on('unmute', function (data) {
var v = self.videos[data.id]
if (!v) return
if (data.name === 'audio') {
v.audioStatus = true
}
else if (data.name === 'video') {
v.videoStatus = true
v.$avatar.hide()
}
v.$container.show()
})
var sendChatMessage = function (event, data) {
self.sendChatMessage(data)
} }
$(document).on(ChatView.events.message + '-' + this.room, sendChatMessage) })
this.webrtc.on('peerStreamRemoved', function(peer) {
if (self.isActiveRoom) {
self.removeVideo(peer)
}
})
this.webrtc.on('mute', function(data) {
var v = self.videos[data.id]
if (!v) return
if (data.name === 'audio') {
v.audioStatus = false
} else if (data.name === 'video') {
v.videoStatus = false
v.$avatar.show()
}
if (!v.audioStatus && !v.videoStatus) v.$container.hide()
})
this.webrtc.on('unmute', function(data) {
const v = self.videos[data.id]
if (!v) return
if (data.name === 'audio') {
v.audioStatus = true
} else if (data.name === 'video') {
v.videoStatus = true
v.$avatar.hide()
}
v.$container.show()
})
var sendChatMessage = function(event, data) {
self.sendChatMessage(data)
} }
$(document).on(ChatView.events.message + '-' + this.room, sendChatMessage)
}
Room.prototype.videoAdded = function (callback) { Room.prototype.videoAdded = function(callback) {
this._videoAdded = callback this._videoAdded = callback
}
Room.prototype.addVideo = function(peer) {
const id = this.webrtc.getDomId(peer)
const video = attachMediaStream(peer.stream)
const v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username })
this.videos[peer.id] = v
if (this._videoAdded) this._videoAdded(v, peer.nick)
}
Room.prototype.removeVideo = function(peer) {
var id = typeof peer === 'string' ? peer : peer.id
if (this.videos[id]) {
this.videos[id].remove()
delete this.videos[id]
} }
}
Room.prototype.addVideo = function (peer) { Room.prototype.sendChatMessage = function(data) {
var var self = this
id = this.webrtc.getDomId(peer), // this.roomRef.child('messages').push(data)
video = attachMediaStream(peer.stream) if (self.chat.alertSound) self.chat.sound.play('sendchat')
var m = new DataModel.Message({
var message: data.message,
v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username }) resource_id: Active.Map.id,
resource_type: 'Map'
this.videos[peer.id] = v })
if (this._videoAdded) this._videoAdded(v, peer.nick) m.save(null, {
} success: function(model, response) {
self.addMessages(new DataModel.MessageCollection(model), false, true)
Room.prototype.removeVideo = function (peer) { $(document).trigger(Room.events.newMessage, [model])
var id = typeof peer == 'string' ? peer : peer.id },
if (this.videos[id]) { error: function(model, response) {
this.videos[id].remove() console.log('error!', response)
delete this.videos[id] }
} })
} }
Room.prototype.sendChatMessage = function (data) {
var self = this
//this.roomRef.child('messages').push(data)
if (self.chat.alertSound) self.chat.sound.play('sendchat')
var m = new DataModel.Message({
message: data.message,
resource_id: Active.Map.id,
resource_type: "Map"
})
m.save(null, {
success: function (model, response) {
self.addMessages(new DataModel.MessageCollection(model), false, true)
$(document).trigger(Room.events.newMessage, [model])
},
error: function (model, response) {
console.log('error!', response)
}
})
}
// they should be instantiated as backbone models before they get // they should be instantiated as backbone models before they get
// passed to this function // passed to this function
Room.prototype.addMessages = function (messages, isInitial, wasMe) { Room.prototype.addMessages = function(messages, isInitial, wasMe) {
var self = this var self = this
messages.models.forEach(function (message) { messages.models.forEach(function(message) {
self.chat.addMessage(message, isInitial, wasMe) self.chat.addMessage(message, isInitial, wasMe)
}) })
} }
/** /**
* @class * @class
* @static * @static
*/ */
Room.events = { Room.events = {
newMessage: "Room:newMessage" newMessage: 'Room:newMessage'
} }
export default Room export default Room

327
frontend/src/Metamaps/Views/VideoView.js
View file

@ -1,189 +1,188 @@
/* global $ */ /* global $ */
var Private = { var Private = {
addControls: function() { addControls: function() {
var self = this; var self = this
this.$audioControl = $('<div class="video-audio"></div>'); this.$audioControl = $('<div class="video-audio"></div>')
this.$videoControl = $('<div class="video-video"></div>'); this.$videoControl = $('<div class="video-video"></div>')
this.$audioControl.on('click', function () { this.$audioControl.on('click', function() {
Handlers.audioControlClick.call(self); Handlers.audioControlClick.call(self)
}); })
this.$videoControl.on('click', function () { this.$videoControl.on('click', function() {
Handlers.videoControlClick.call(self); Handlers.videoControlClick.call(self)
}); })
this.$container.append(this.$audioControl); this.$container.append(this.$audioControl)
this.$container.append(this.$videoControl); this.$container.append(this.$videoControl)
}, },
cancelClick: function() { cancelClick: function() {
this.mouseIsDown = false; this.mouseIsDown = false
if (this.hasMoved) { if (this.hasMoved) {
}
$(document).trigger(VideoView.events.dragEnd);
} }
};
$(document).trigger(VideoView.events.dragEnd)
}
}
var Handlers = { var Handlers = {
mousedown: function(event) { mousedown: function(event) {
this.mouseIsDown = true; this.mouseIsDown = true
this.hasMoved = false; this.hasMoved = false
this.mouseMoveStart = { this.mouseMoveStart = {
x: event.pageX, x: event.pageX,
y: event.pageY y: event.pageY
}; }
this.posStart = { this.posStart = {
x: parseInt(this.$container.css('left'), '10'), x: parseInt(this.$container.css('left'), '10'),
y: parseInt(this.$container.css('top'), '10') y: parseInt(this.$container.css('top'), '10')
}
$(document).trigger(VideoView.events.mousedown);
},
mouseup: function(event) {
$(document).trigger(VideoView.events.mouseup, [this]);
var storedTime = this.lastClick;
var now = Date.now();
this.lastClick = now;
if (now - storedTime < this.config.DOUBLE_CLICK_TOLERANCE) {
$(document).trigger(VideoView.events.doubleClick, [this]);
}
},
mousemove: function(event) {
var
diffX,
diffY,
newX,
newY;
if (this.$parent && this.mouseIsDown) {
this.manuallyPositioned = true;
this.hasMoved = true;
diffX = event.pageX - this.mouseMoveStart.x;
diffY = this.mouseMoveStart.y - event.pageY;
newX = this.posStart.x + diffX;
newY = this.posStart.y - diffY;
this.$container.css({
top: newY,
left: newX
});
}
},
audioControlClick: function() {
if (this.audioStatus) {
this.audioOff();
} else {
this.audioOn();
}
$(document).trigger(VideoView.events.audioControlClick, [this]);
},
videoControlClick: function() {
if (this.videoStatus) {
this.videoOff();
} else {
this.videoOn();
}
$(document).trigger(VideoView.events.videoControlClick, [this]);
},
};
var VideoView = function(video, $parent, id, isMyself, config) {
var self = this;
this.$parent = $parent; // mapView
this.video = video;
this.id = id;
this.config = config;
this.mouseIsDown = false;
this.mouseDownOffset = { x: 0, y: 0 };
this.lastClick = null;
this.hasMoved = false;
this.audioStatus = true;
this.videoStatus = true;
this.$container = $('<div></div>');
this.$container.addClass('collaborator-video' + (isMyself ? ' my-video' : ''));
this.$container.attr('id', 'container_' + id);
var $vidContainer = $('<div></div>');
$vidContainer.addClass('video-cutoff');
$vidContainer.append(this.video);
this.avatar = config.avatar;
this.$avatar = $('<img draggable="false" class="collaborator-video-avatar" src="' + config.avatar + '" width="150" height="150" />');
$vidContainer.append(this.$avatar);
this.$container.append($vidContainer);
this.$container.on('mousedown', function (event) {
Handlers.mousedown.call(self, event);
});
if (isMyself) {
Private.addControls.call(this);
} }
// suppress contextmenu $(document).trigger(VideoView.events.mousedown)
this.video.oncontextmenu = function () { return false; }; },
mouseup: function(event) {
$(document).trigger(VideoView.events.mouseup, [this])
if (this.$parent) this.setParent(this.$parent); var storedTime = this.lastClick
}; var now = Date.now()
this.lastClick = now
if (now - storedTime < this.config.DOUBLE_CLICK_TOLERANCE) {
$(document).trigger(VideoView.events.doubleClick, [this])
}
},
mousemove: function(event) {
var
diffX,
diffY,
newX,
newY
if (this.$parent && this.mouseIsDown) {
this.manuallyPositioned = true
this.hasMoved = true
diffX = event.pageX - this.mouseMoveStart.x
diffY = this.mouseMoveStart.y - event.pageY
newX = this.posStart.x + diffX
newY = this.posStart.y - diffY
this.$container.css({
top: newY,
left: newX
})
}
},
audioControlClick: function() {
if (this.audioStatus) {
this.audioOff()
} else {
this.audioOn()
}
$(document).trigger(VideoView.events.audioControlClick, [this])
},
videoControlClick: function() {
if (this.videoStatus) {
this.videoOff()
} else {
this.videoOn()
}
$(document).trigger(VideoView.events.videoControlClick, [this])
}
}
var VideoView = function(video, $parent, id, isMyself, config) {
var self = this
this.$parent = $parent // mapView
this.video = video
this.id = id
this.config = config
this.mouseIsDown = false
this.mouseDownOffset = { x: 0, y: 0 }
this.lastClick = null
this.hasMoved = false
this.audioStatus = true
this.videoStatus = true
this.$container = $('<div></div>')
this.$container.addClass('collaborator-video' + (isMyself ? ' my-video' : ''))
this.$container.attr('id', 'container_' + id)
var $vidContainer = $('<div></div>')
$vidContainer.addClass('video-cutoff')
$vidContainer.append(this.video)
this.avatar = config.avatar
this.$avatar = $('<img draggable="false" class="collaborator-video-avatar" src="' + config.avatar + '" width="150" height="150" />')
$vidContainer.append(this.$avatar)
this.$container.append($vidContainer)
this.$container.on('mousedown', function(event) {
Handlers.mousedown.call(self, event)
})
if (isMyself) {
Private.addControls.call(this)
}
// suppress contextmenu
this.video.oncontextmenu = function() { return false }
if (this.$parent) this.setParent(this.$parent)
}
VideoView.prototype.setParent = function($parent) { VideoView.prototype.setParent = function($parent) {
var self = this; var self = this
this.$parent = $parent; this.$parent = $parent
this.$parent.off('.video' + this.id); this.$parent.off('.video' + this.id)
this.$parent.on('mouseup.video' + this.id, function (event) { this.$parent.on('mouseup.video' + this.id, function(event) {
Handlers.mouseup.call(self, event); Handlers.mouseup.call(self, event)
Private.cancelClick.call(self); Private.cancelClick.call(self)
}); })
this.$parent.on('mousemove.video' + this.id, function (event) { this.$parent.on('mousemove.video' + this.id, function(event) {
Handlers.mousemove.call(self, event); Handlers.mousemove.call(self, event)
}); })
} }
VideoView.prototype.setAvatar = function (src) { VideoView.prototype.setAvatar = function(src) {
this.$avatar.attr('src', src); this.$avatar.attr('src', src)
this.avatar = src; this.avatar = src
} }
VideoView.prototype.remove = function () { VideoView.prototype.remove = function() {
this.$container.off(); this.$container.off()
if (this.$parent) this.$parent.off('.video' + this.id); if (this.$parent) this.$parent.off('.video' + this.id)
this.$container.remove(); this.$container.remove()
} }
VideoView.prototype.videoOff = function () { VideoView.prototype.videoOff = function() {
this.$videoControl.addClass('active'); this.$videoControl.addClass('active')
this.$avatar.show(); this.$avatar.show()
this.videoStatus = false; this.videoStatus = false
} }
VideoView.prototype.videoOn = function () { VideoView.prototype.videoOn = function() {
this.$videoControl.removeClass('active'); this.$videoControl.removeClass('active')
this.$avatar.hide(); this.$avatar.hide()
this.videoStatus = true; this.videoStatus = true
} }
VideoView.prototype.audioOff = function () { VideoView.prototype.audioOff = function() {
this.$audioControl.addClass('active'); this.$audioControl.addClass('active')
this.audioStatus = false; this.audioStatus = false
} }
VideoView.prototype.audioOn = function () { VideoView.prototype.audioOn = function() {
this.$audioControl.removeClass('active'); this.$audioControl.removeClass('active')
this.audioStatus = true; this.audioStatus = true
} }
/** /**
@ -191,12 +190,12 @@ VideoView.prototype.audioOn = function () {
* @static * @static
*/ */
VideoView.events = { VideoView.events = {
mousedown: "VideoView:mousedown", mousedown: 'VideoView:mousedown',
mouseup: "VideoView:mouseup", mouseup: 'VideoView:mouseup',
doubleClick: "VideoView:doubleClick", doubleClick: 'VideoView:doubleClick',
dragEnd: "VideoView:dragEnd", dragEnd: 'VideoView:dragEnd',
audioControlClick: "VideoView:audioControlClick", audioControlClick: 'VideoView:audioControlClick',
videoControlClick: "VideoView:videoControlClick", videoControlClick: 'VideoView:videoControlClick'
}; }
export default VideoView export default VideoView

4
frontend/src/Metamaps/Views/index.js
View file

@ -6,9 +6,9 @@ import VideoView from './VideoView'
import Room from './Room' import Room from './Room'
import { JUNTO_UPDATED } from '../Realtime/events' import { JUNTO_UPDATED } from '../Realtime/events'
const Views = { const Views = {
init: () => { init: () => {
$(document).on(JUNTO_UPDATED, () => ExploreMaps.render()) $(document).on(JUNTO_UPDATED, () => ExploreMaps.render())
}, },
ExploreMaps, ExploreMaps,
ChatView, ChatView,

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

@ -17,54 +17,53 @@ const Visualize = {
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
touchDragNode: null, touchDragNode: null,
init: function (serverData) { init: function(serverData) {
var self = Visualize var self = Visualize
if (serverData.VisualizeType) self.type = serverData.VisualizeType if (serverData.VisualizeType) self.type = serverData.VisualizeType
// 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()
}) })
// prevent touch events on the canvas from default behaviour // prevent touch events on the canvas from default behaviour
$('#infovis-canvas').bind('touchstart', function (event) { $('#infovis-canvas').bind('touchstart', function(event) {
event.preventDefault() event.preventDefault()
self.mGraph.events.touched = true self.mGraph.events.touched = true
}) })
// 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) {
// JIT.touchPanZoomHandler(event) // JIT.touchPanZoomHandler(event)
}) })
// prevent touch events on the canvas from default behaviour // prevent touch events on the canvas from default behaviour
$('#infovis-canvas').bind('touchend touchcancel', function (event) { $('#infovis-canvas').bind('touchend touchcancel', function(event) {
lastDist = 0
if (!self.mGraph.events.touchMoved && !Visualize.touchDragNode) TopicCard.hideCurrentCard() if (!self.mGraph.events.touchMoved && !Visualize.touchDragNode) TopicCard.hideCurrentCard()
self.mGraph.events.touched = self.mGraph.events.touchMoved = false self.mGraph.events.touched = self.mGraph.events.touchMoved = false
Visualize.touchDragNode = false Visualize.touchDragNode = false
}) })
}, },
computePositions: function () { computePositions: function() {
var self = Visualize, const self = Visualize
mapping
if (self.type == 'RGraph') { if (self.type === 'RGraph') {
var i, l, startPos, endPos, topic, synapse let i
let l
self.mGraph.graph.eachNode(function (n) { self.mGraph.graph.eachNode(function(n) {
topic = DataModel.Topics.get(n.id) const topic = DataModel.Topics.get(n.id)
topic.set({ node: n }, { silent: true }) topic.set({ node: n }, { silent: true })
topic.updateNode() topic.updateNode()
n.eachAdjacency(function (edge) { n.eachAdjacency(function(edge) {
if (!edge.getData('init')) { if (!edge.getData('init')) {
edge.setData('init', true) edge.setData('init', true)
l = edge.getData('synapseIDs').length l = edge.getData('synapseIDs').length
for (i = 0; i < l; i++) { for (i = 0; i < l; i++) {
synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i]) const synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
synapse.set({ edge: edge }, { silent: true }) synapse.set({ edge: edge }, { silent: true })
synapse.updateEdge() synapse.updateEdge()
} }
@ -75,34 +74,32 @@ const Visualize = {
pos.setc(-200, -200) pos.setc(-200, -200)
}) })
self.mGraph.compute('end') self.mGraph.compute('end')
} else if (self.type == 'ForceDirected') { } else if (self.type === 'ForceDirected') {
var i, l, startPos, endPos, topic, synapse self.mGraph.graph.eachNode(function(n) {
const topic = DataModel.Topics.get(n.id)
self.mGraph.graph.eachNode(function (n) {
topic = DataModel.Topics.get(n.id)
topic.set({ node: n }, { silent: true }) topic.set({ node: n }, { silent: true })
topic.updateNode() topic.updateNode()
mapping = topic.getMapping() const mapping = topic.getMapping()
n.eachAdjacency(function (edge) { n.eachAdjacency(function(edge) {
if (!edge.getData('init')) { if (!edge.getData('init')) {
edge.setData('init', true) edge.setData('init', true)
l = edge.getData('synapseIDs').length const l = edge.getData('synapseIDs').length
for (i = 0; i < l; i++) { for (let i = 0; i < l; i++) {
synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i]) const synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
synapse.set({ edge: edge }, { silent: true }) synapse.set({ edge: edge }, { silent: true })
synapse.updateEdge() synapse.updateEdge()
} }
} }
}) })
startPos = new $jit.Complex(0, 0) const startPos = new $jit.Complex(0, 0)
endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')) const endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'))
n.setPos(startPos, 'start') n.setPos(startPos, 'start')
n.setPos(endPos, 'end') n.setPos(endPos, 'end')
}) })
} else if (self.type == 'ForceDirected3D') { } else if (self.type === 'ForceDirected3D') {
self.mGraph.compute() self.mGraph.compute()
} }
}, },
@ -110,14 +107,14 @@ const Visualize = {
* render does the heavy lifting of creating the engine that renders the graph with the properties we desire * render does the heavy lifting of creating the engine that renders the graph with the properties we desire
* *
*/ */
render: function () { render: function() {
var self = Visualize, RGraphSettings, FDSettings const self = Visualize
if (self.type == 'RGraph') { if (self.type === 'RGraph') {
// clear the previous canvas from #infovis // clear the previous canvas from #infovis
$('#infovis').empty() $('#infovis').empty()
RGraphSettings = $.extend(true, {}, JIT.ForceDirected.graphSettings) const RGraphSettings = $.extend(true, {}, JIT.ForceDirected.graphSettings)
$jit.RGraph.Plot.NodeTypes.implement(JIT.ForceDirected.nodeSettings) $jit.RGraph.Plot.NodeTypes.implement(JIT.ForceDirected.nodeSettings)
$jit.RGraph.Plot.EdgeTypes.implement(JIT.ForceDirected.edgeSettings) $jit.RGraph.Plot.EdgeTypes.implement(JIT.ForceDirected.edgeSettings)
@ -128,11 +125,11 @@ const Visualize = {
RGraphSettings.levelDistance = 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') { } else if (self.type === 'ForceDirected') {
// clear the previous canvas from #infovis // clear the previous canvas from #infovis
$('#infovis').empty() $('#infovis').empty()
FDSettings = $.extend(true, {}, JIT.ForceDirected.graphSettings) const FDSettings = $.extend(true, {}, JIT.ForceDirected.graphSettings)
$jit.ForceDirected.Plot.NodeTypes.implement(JIT.ForceDirected.nodeSettings) $jit.ForceDirected.Plot.NodeTypes.implement(JIT.ForceDirected.nodeSettings)
$jit.ForceDirected.Plot.EdgeTypes.implement(JIT.ForceDirected.edgeSettings) $jit.ForceDirected.Plot.EdgeTypes.implement(JIT.ForceDirected.edgeSettings)
@ -141,10 +138,10 @@ const Visualize = {
FDSettings.height = $('body').height() FDSettings.height = $('body').height()
self.mGraph = new $jit.ForceDirected(FDSettings) self.mGraph = new $jit.ForceDirected(FDSettings)
} else if (self.type == 'ForceDirected3D' && !self.mGraph) { } else if (self.type === 'ForceDirected3D' && !self.mGraph) {
// clear the previous canvas from #infovis // clear the previous canvas from #infovis
$('#infovis').empty() $('#infovis').empty()
// init ForceDirected3D // init ForceDirected3D
self.mGraph = new $jit.ForceDirected3D(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
@ -152,17 +149,16 @@ const Visualize = {
self.mGraph.graph.empty() self.mGraph.graph.empty()
} }
if (self.type === 'ForceDirected' && Active.Mapper) $.post('/maps/' + Active.Map.id + '/events/user_presence')
if (self.type == 'ForceDirected' && Active.Mapper) $.post('/maps/' + Active.Map.id + '/events/user_presence') function runAnimation() {
function runAnimation () {
Loading.hide() Loading.hide()
// load JSON data, if it's not empty // load JSON data, if it's not empty
if (!self.loadLater) { if (!self.loadLater) {
// load JSON data. // load JSON data.
var rootIndex = 0 var rootIndex = 0
if (Active.Topic) { if (Active.Topic) {
var node = _.find(JIT.vizData, function (node) { var node = _.find(JIT.vizData, function(node) {
return node.id === Active.Topic.id return node.id === Active.Topic.id
}) })
rootIndex = _.indexOf(JIT.vizData, node) rootIndex = _.indexOf(JIT.vizData, node)
@ -171,11 +167,11 @@ const Visualize = {
// 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(JIT.RGraph.animate) self.mGraph.fx.animate(JIT.RGraph.animate)
} else if (self.type == 'ForceDirected') { } else if (self.type === 'ForceDirected') {
self.mGraph.animate(JIT.ForceDirected.animateSavedLayout) self.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (self.type == 'ForceDirected3D') { } else if (self.type === 'ForceDirected3D') {
self.mGraph.animate(JIT.ForceDirected.animateFDLayout) self.mGraph.animate(JIT.ForceDirected.animateFDLayout)
} }
} }
@ -183,35 +179,37 @@ const Visualize = {
// hold until all the needed metacode images are loaded // hold until all the needed metacode images are loaded
// hold for a maximum of 80 passes, or 4 seconds of waiting time // hold for a maximum of 80 passes, or 4 seconds of waiting time
var tries = 0 var tries = 0
function hold () { function hold() {
var unique = _.uniq(DataModel.Topics.models, function (metacode) { return metacode.get('metacode_id'); }), const unique = _.uniq(DataModel.Topics.models, function(metacode) { return metacode.get('metacode_id') })
requiredMetacodes = _.map(unique, function (metacode) { return metacode.get('metacode_id'); }), const requiredMetacodes = _.map(unique, function(metacode) { return metacode.get('metacode_id') })
loadedCount = 0 let loadedCount = 0
_.each(requiredMetacodes, function (metacode_id) { _.each(requiredMetacodes, function(metacodeId) {
var metacode = DataModel.Metacodes.get(metacode_id), const metacode = DataModel.Metacodes.get(metacodeId)
img = metacode ? metacode.get('image') : false const img = metacode ? metacode.get('image') : false
if (img && (img.complete || (typeof img.naturalWidth !== 'undefined' && img.naturalWidth !== 0))) { if (img && (img.complete || (typeof img.naturalWidth !== 'undefined' && img.naturalWidth !== 0))) {
loadedCount += 1 loadedCount += 1
} }
}) })
if (loadedCount === requiredMetacodes.length || tries > 80) runAnimation() if (loadedCount === requiredMetacodes.length || tries > 80) {
else setTimeout(function () { tries++; hold() }, 50) runAnimation()
} else {
setTimeout(function() { tries++; hold() }, 50)
}
} }
hold() hold()
// update the url now that the map is ready // update the url now that the map is ready
clearTimeout(Router.timeoutId) clearTimeout(Router.timeoutId)
Router.timeoutId = setTimeout(function () { Router.timeoutId = setTimeout(function() {
var m = Active.Map var m = Active.Map
var t = Active.Topic var t = Active.Topic
if (m && window.location.pathname !== '/maps/' + m.id) { if (m && window.location.pathname !== '/maps/' + m.id) {
Router.navigate('/maps/' + m.id) Router.navigate('/maps/' + m.id)
} } else if (t && window.location.pathname !== '/topics/' + t.id) {
else if (t && window.location.pathname !== '/topics/' + t.id) {
Router.navigate('/topics/' + t.id) Router.navigate('/topics/' + t.id)
} }
}, 800) }, 800)
@ -221,7 +219,7 @@ const Visualize = {
Visualize.mGraph.plot() Visualize.mGraph.plot()
JIT.centerMap(Visualize.mGraph.canvas) JIT.centerMap(Visualize.mGraph.canvas)
$('#infovis').empty() $('#infovis').empty()
}, }
} }
export default Visualize export default Visualize

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

@ -70,13 +70,9 @@ Metamaps.Topic = Topic
Metamaps.TopicCard = TopicCard Metamaps.TopicCard = TopicCard
Metamaps.Util = Util Metamaps.Util = Util
Metamaps.Views = Views Metamaps.Views = Views
Metamaps.Views.ExploreMaps = ExploreMaps
Metamaps.Views.ChatView = ChatView
Metamaps.Views.VideoView = VideoView
Metamaps.Views.Room = Room
Metamaps.Visualize = Visualize Metamaps.Visualize = Visualize
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function() {
// initialize all the modules // initialize all the modules
for (const prop in Metamaps) { for (const prop in Metamaps) {
// this runs the init function within each sub-object on the Metamaps one // this runs the init function within each sub-object on the Metamaps one
@ -94,14 +90,14 @@ document.addEventListener('DOMContentLoaded', function () {
Views.ExploreMaps.setCollection(DataModel.Maps[capitalize]) Views.ExploreMaps.setCollection(DataModel.Maps[capitalize])
if (Metamaps.currentPage === 'mapper') { if (Metamaps.currentPage === 'mapper') {
ExploreMaps.fetchUserThenRender() Views.ExploreMaps.fetchUserThenRender()
} else { } else {
ExploreMaps.render() Views.ExploreMaps.render()
} }
GlobalUI.showDiv('#explore') GlobalUI.showDiv('#explore')
} else if (Metamaps.currentSection === '' && Active.Mapper) { } else if (Metamaps.currentSection === '' && Active.Mapper) {
ExploreMaps.setCollection(DataModel.Maps.Active) Views.ExploreMaps.setCollection(DataModel.Maps.Active)
ExploreMaps.render() Views.ExploreMaps.render()
GlobalUI.showDiv('#explore') GlobalUI.showDiv('#explore')
} else if (Active.Map || Active.Topic) { } else if (Active.Map || Active.Topic) {
Loading.show() Loading.show()

2
frontend/src/components/ImportDialogBox.js
View file

@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react'
import Dropzone from 'react-dropzone' import Dropzone from 'react-dropzone'
class ImportDialogBox extends Component { class ImportDialogBox extends Component {
constructor (props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {

4
frontend/src/components/Maps/MapCard.js
View file

@ -87,10 +87,6 @@ class MapCard extends Component {
const hasMapper = hasMap && !hasConversation const hasMapper = hasMap && !hasConversation
const mapperList = hasMap && Object.keys(hasMap).map(id => juntoState.connectedPeople[id]) const mapperList = hasMap && Object.keys(hasMap).map(id => juntoState.connectedPeople[id])
function capitalize (string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
const n = map.get('name') const n = map.get('name')
const d = map.get('desc') const d = map.get('desc')

10
frontend/src/components/Maps/index.js
View file

@ -31,22 +31,22 @@ class Maps extends Component {
const { maps, user, currentUser } = this.props const { maps, user, currentUser } = this.props
const numCards = maps.length + (user || currentUser ? 1 : 0) const numCards = maps.length + (user || currentUser ? 1 : 0)
const mapSpaces = Math.floor(document.body.clientWidth / MAP_WIDTH) const mapSpaces = Math.floor(document.body.clientWidth / MAP_WIDTH)
const mapsWidth = document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT ? const mapsWidth = document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT
document.body.clientWidth - MOBILE_VIEW_PADDING : ? document.body.clientWidth - MOBILE_VIEW_PADDING
Math.min(MAX_COLUMNS, Math.min(numCards, mapSpaces)) * MAP_WIDTH : Math.min(MAX_COLUMNS, Math.min(numCards, mapSpaces)) * MAP_WIDTH
this.setState({ mapsWidth }) this.setState({ mapsWidth })
} }
scroll = () => { scroll = () => {
const { loadMore, moreToLoad, pending } = this.props const { loadMore, moreToLoad, pending } = this.props
const { maps } = this.refs const { maps } = this.refs
if (moreToLoad && !pending && maps.scrollTop + maps.offsetHeight > maps.scrollHeight - 300 ) { if (moreToLoad && !pending && maps.scrollTop + maps.offsetHeight > maps.scrollHeight - 300) {
loadMore() loadMore()
} }
} }
render = () => { render = () => {
const { maps, currentUser, juntoState, pending, section, user, moreToLoad, loadMore, onStar, onRequest } = this.props const { maps, currentUser, juntoState, pending, section, user, onStar, onRequest } = this.props
const style = { width: this.state.mapsWidth + 'px' } const style = { width: this.state.mapsWidth + 'px' }
const mobile = document && document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT const mobile = document && document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT

4
frontend/test/Metamaps.Import.spec.js
View file

@ -6,8 +6,8 @@ import Import from '../src/Metamaps/Import'
const { expect } = chai const { expect } = chai
describe('Metamaps.Import.js', function () { describe('Metamaps.Import.js', function() {
it('has a topic whitelist', function () { it('has a topic whitelist', function() {
expect(Import.topicWhitelist).to.deep.equal( expect(Import.topicWhitelist).to.deep.equal(
['id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission'] ['id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission']
) )

72
frontend/test/Metamaps.Util.spec.js
View file

@ -6,123 +6,123 @@ import Util from '../src/Metamaps/Util'
const { expect } = chai const { expect } = chai
describe('Metamaps.Util.js', function () { describe('Metamaps.Util.js', function() {
describe('splitLine', function () { describe('splitLine', function() {
it('splits on words', function () { it('splits on words', function() {
expect(Util.splitLine('test test test', 10)) expect(Util.splitLine('test test test', 10))
.to.equal('test test\ntest') .to.equal('test test\ntest')
}) })
// TODO this test seems like it's incorrect behaviour // TODO this test seems like it's incorrect behaviour
it('splits mid-word if need be', function () { it('splits mid-word if need be', function() {
expect(Util.splitLine('test test', 2)) expect(Util.splitLine('test test', 2))
.to.equal('te\nt\nte\nt') .to.equal('te\nt\nte\nt')
}) })
it('splits words over 30 chars', function () { it('splits words over 30 chars', function() {
expect(Util.splitLine('suprainterpostantidisestablishmentarianism', 30)) expect(Util.splitLine('suprainterpostantidisestablishmentarianism', 30))
.to.equal('suprainterpostantidisestablish\nentarianism') .to.equal('suprainterpostantidisestablish\nentarianism')
}) })
}) })
describe('nowDateFormatted', function () { describe('nowDateFormatted', function() {
it.skip('TODO need `Date`') it.skip('TODO need `Date`')
}) })
describe('decodeEntities', function () { describe('decodeEntities', function() {
it.skip('TODO need `document`') it.skip('TODO need `document`')
}) })
describe('getDistance', function () { describe('getDistance', function() {
it('(0,0) -> (0,0) = 0', function () { it('(0,0) -> (0,0) = 0', function() {
expect(Util.getDistance({ x: 0, y: 0 }, { x: 0, y: 0 })) expect(Util.getDistance({ x: 0, y: 0 }, { x: 0, y: 0 }))
.to.equal(0) .to.equal(0)
}) })
it('(-5,0) -> (5,0) = 10', function () { it('(-5,0) -> (5,0) = 10', function() {
expect(Util.getDistance({ x: -5, y: 0 }, { x: 5, y: 0 })) expect(Util.getDistance({ x: -5, y: 0 }, { x: 5, y: 0 }))
.to.equal(10) .to.equal(10)
}) })
it('(0,0) -> (5,7) = 8.6023', function () { it('(0,0) -> (5,7) = 8.6023', function() {
expect(Util.getDistance({ x: 0, y: 0 }, { x: 5, y: 7 }).toFixed(4)) expect(Util.getDistance({ x: 0, y: 0 }, { x: 5, y: 7 }).toFixed(4))
.to.equal('8.6023') .to.equal('8.6023')
}) })
}) })
describe('coordsToPixels', function () { describe('coordsToPixels', function() {
it('returns 0,0 for null canvas', function () { it('returns 0,0 for null canvas', function() {
expect(Util.coordsToPixels(null, {}).x).to.equal(0) expect(Util.coordsToPixels(null, {}).x).to.equal(0)
expect(Util.coordsToPixels(null, {}).y).to.equal(0) expect(Util.coordsToPixels(null, {}).y).to.equal(0)
}) })
it.skip('TODO need initialized mGraph to test further') it.skip('TODO need initialized mGraph to test further')
}) })
describe('pixelsToCoords', function () { describe('pixelsToCoords', function() {
it('returns 0,0 for null canvas', function () { it('returns 0,0 for null canvas', function() {
expect(Util.pixelsToCoords(null, {}).x).to.equal(0) expect(Util.pixelsToCoords(null, {}).x).to.equal(0)
expect(Util.pixelsToCoords(null, {}).y).to.equal(0) expect(Util.pixelsToCoords(null, {}).y).to.equal(0)
}) })
it.skip('TODO need initialized mGraph to test further') it.skip('TODO need initialized mGraph to test further')
}) })
describe('getPastelColor', function () { describe('getPastelColor', function() {
it('1 => fefefe', function () { it('1 => fefefe', function() {
expect(Util.getPastelColor({ rseed: 1, gseed: 1, bseed: 1 })) expect(Util.getPastelColor({ rseed: 1, gseed: 1, bseed: 1 }))
.to.equal(Util.colorLuminance('#fefefe', -0.4)) .to.equal(Util.colorLuminance('#fefefe', -0.4))
}) })
it('0 => 7f7f7f', function () { it('0 => 7f7f7f', function() {
expect(Util.getPastelColor({ rseed: 0, gseed: 0, bseed: 0 })) expect(Util.getPastelColor({ rseed: 0, gseed: 0, bseed: 0 }))
.to.equal(Util.colorLuminance('#7f7f7f', -0.4)) .to.equal(Util.colorLuminance('#7f7f7f', -0.4))
}) })
}) })
describe('colorLuminance', function () { describe('colorLuminance', function() {
describe('-0.4 lum', function () { describe('-0.4 lum', function() {
it('white => ?', function () { it('white => ?', function() {
expect(Util.colorLuminance('#ffffff', -0.4)).to.equal('#999999') expect(Util.colorLuminance('#ffffff', -0.4)).to.equal('#999999')
}) })
it('black => ?', function () { it('black => ?', function() {
expect(Util.colorLuminance('#000000', -0.4)).to.equal('#000000') expect(Util.colorLuminance('#000000', -0.4)).to.equal('#000000')
}) })
it('7f7f7f => ?', function () { it('7f7f7f => ?', function() {
expect(Util.colorLuminance('#7f7f7f', -0.4)).to.equal('#4c4c4c') expect(Util.colorLuminance('#7f7f7f', -0.4)).to.equal('#4c4c4c')
}) })
}) })
describe('other lum values', function () { describe('other lum values', function() {
it('-1', function () { it('-1', function() {
expect(Util.colorLuminance('#7f7f7f', -1)).to.equal('#000000') expect(Util.colorLuminance('#7f7f7f', -1)).to.equal('#000000')
}) })
it('-0.5', function () { it('-0.5', function() {
expect(Util.colorLuminance('#7f7f7f', -0.5)).to.equal('#404040') expect(Util.colorLuminance('#7f7f7f', -0.5)).to.equal('#404040')
}) })
it('0', function () { it('0', function() {
expect(Util.colorLuminance('#7f7f7f', 0)).to.equal('#7f7f7f') expect(Util.colorLuminance('#7f7f7f', 0)).to.equal('#7f7f7f')
}) })
it('0.5', function () { it('0.5', function() {
expect(Util.colorLuminance('#7f7f7f', 0.5)).to.equal('#bfbfbf') expect(Util.colorLuminance('#7f7f7f', 0.5)).to.equal('#bfbfbf')
}) })
it('1', function () { it('1', function() {
expect(Util.colorLuminance('#7f7f7f', 1)).to.equal('#fefefe') expect(Util.colorLuminance('#7f7f7f', 1)).to.equal('#fefefe')
}) })
}) })
}) })
describe('openLink', function () { describe('openLink', function() {
it.skip('TODO need `window`') it.skip('TODO need `window`')
}) })
describe('mdToHTML', function () { describe('mdToHTML', function() {
it('filters xss', function () { it('filters xss', function() {
const md = '<script>alert("xss");</script>' const md = '<script>alert("xss");</script>'
const html = '<!-- raw HTML omitted -->' const html = '<!-- raw HTML omitted -->'
expect(Util.mdToHTML(md).trim()).to.equal(html) expect(Util.mdToHTML(md).trim()).to.equal(html)
}) })
it('bold and italics', function () { it('bold and italics', function() {
const md = '**Bold** *Italics*' const md = '**Bold** *Italics*'
const html = '<p><strong>Bold</strong> <em>Italics</em></p>' const html = '<p><strong>Bold</strong> <em>Italics</em></p>'
expect(Util.mdToHTML(md).trim()).to.equal(html) expect(Util.mdToHTML(md).trim()).to.equal(html)
}) })
it('links and images', function () { it('links and images', function() {
const md = '[Link](https://metamaps.cc) ![Image](https://example.org/image.png)' const md = '[Link](https://metamaps.cc) ![Image](https://example.org/image.png)'
const html = '<p><a href="https://metamaps.cc">Link</a> <img src="https://example.org/image.png" alt="Image" /></p>' const html = '<p><a href="https://metamaps.cc">Link</a> <img src="https://example.org/image.png" alt="Image" /></p>'
expect(Util.mdToHTML(md).trim()).to.equal(html) expect(Util.mdToHTML(md).trim()).to.equal(html)
}) })
}) })
describe('logCanvasAttributes', function () { describe('logCanvasAttributes', function() {
it.skip('TODO need a canvas') it.skip('TODO need a canvas')
}) })
describe('resizeCanvas', function () { describe('resizeCanvas', function() {
it.skip('TODO need a canvas') it.skip('TODO need a canvas')
}) })
}) })

15
realtime/global.js
View file

@ -19,14 +19,13 @@ const {
UPDATE_MAP UPDATE_MAP
} = require('../frontend/src/Metamaps/Realtime/events') } = require('../frontend/src/Metamaps/Realtime/events')
module.exports = function (io, store) { module.exports = function(io, store) {
store.subscribe(() => { store.subscribe(() => {
console.log(store.getState()) console.log(store.getState())
io.sockets.emit(JUNTO_UPDATED, store.getState()) io.sockets.emit(JUNTO_UPDATED, store.getState())
}) })
io.on('connection', function (socket) { io.on('connection', function(socket) {
io.sockets.emit(JUNTO_UPDATED, store.getState()) io.sockets.emit(JUNTO_UPDATED, store.getState())
socket.on(JOIN_MAP, data => store.dispatch({ type: JOIN_MAP, payload: data })) socket.on(JOIN_MAP, data => store.dispatch({ type: JOIN_MAP, payload: data }))
@ -35,23 +34,23 @@ module.exports = function (io, store) {
socket.on(LEAVE_CALL, () => store.dispatch({ type: LEAVE_CALL, payload: socket })) socket.on(LEAVE_CALL, () => store.dispatch({ type: LEAVE_CALL, payload: socket }))
socket.on('disconnect', () => store.dispatch({ type: 'DISCONNECT', payload: socket })) socket.on('disconnect', () => store.dispatch({ type: 'DISCONNECT', payload: socket }))
socket.on(UPDATE_TOPIC, function (data) { socket.on(UPDATE_TOPIC, function(data) {
socket.broadcast.emit(TOPIC_UPDATED, data) socket.broadcast.emit(TOPIC_UPDATED, data)
}) })
socket.on(DELETE_TOPIC, function (data) { socket.on(DELETE_TOPIC, function(data) {
socket.broadcast.emit(TOPIC_DELETED, data) socket.broadcast.emit(TOPIC_DELETED, data)
}) })
socket.on(UPDATE_SYNAPSE, function (data) { socket.on(UPDATE_SYNAPSE, function(data) {
socket.broadcast.emit(SYNAPSE_UPDATED, data) socket.broadcast.emit(SYNAPSE_UPDATED, data)
}) })
socket.on(DELETE_SYNAPSE, function (data) { socket.on(DELETE_SYNAPSE, function(data) {
socket.broadcast.emit(SYNAPSE_DELETED, data) socket.broadcast.emit(SYNAPSE_DELETED, data)
}) })
socket.on(UPDATE_MAP, function (data) { socket.on(UPDATE_MAP, function(data) {
socket.broadcast.emit(MAP_UPDATED, data) socket.broadcast.emit(MAP_UPDATED, data)
}) })
}) })

23
realtime/junto.js
View file

@ -21,41 +21,40 @@ const {
const { mapRoom, userMapRoom } = require('./rooms') const { mapRoom, userMapRoom } = require('./rooms')
module.exports = function (io, store) { module.exports = function(io, store) {
io.on('connection', function (socket) { io.on('connection', function(socket) {
socket.on(CHECK_FOR_CALL, function(data) {
socket.on(CHECK_FOR_CALL, function (data) {
var callInProgress = Object.keys(io.nsps['/'].adapter.rooms[data.room] || {}).length var callInProgress = Object.keys(io.nsps['/'].adapter.rooms[data.room] || {}).length
if (callInProgress) socket.emit(CALL_IN_PROGRESS) if (callInProgress) socket.emit(CALL_IN_PROGRESS)
}) })
socket.on(INVITE_A_CALL, function (data) { socket.on(INVITE_A_CALL, function(data) {
socket.broadcast.in(userMapRoom(data.invited, data.mapid)).emit(INVITED_TO_CALL, data.inviter) socket.broadcast.in(userMapRoom(data.invited, data.mapid)).emit(INVITED_TO_CALL, data.inviter)
}) })
socket.on(INVITE_TO_JOIN, function (data) { socket.on(INVITE_TO_JOIN, function(data) {
socket.broadcast.in(userMapRoom(data.invited, data.mapid)).emit(INVITED_TO_JOIN, data.inviter) socket.broadcast.in(userMapRoom(data.invited, data.mapid)).emit(INVITED_TO_JOIN, data.inviter)
}) })
socket.on(ACCEPT_CALL, function (data) { socket.on(ACCEPT_CALL, function(data) {
socket.broadcast.in(userMapRoom(data.inviter, data.mapid)).emit(CALL_ACCEPTED, data.invited) socket.broadcast.in(userMapRoom(data.inviter, data.mapid)).emit(CALL_ACCEPTED, data.invited)
socket.broadcast.in(mapRoom(data.mapid)).emit(CALL_STARTED) socket.broadcast.in(mapRoom(data.mapid)).emit(CALL_STARTED)
}) })
socket.on(DENY_CALL, function (data) { socket.on(DENY_CALL, function(data) {
socket.broadcast.in(userMapRoom(data.inviter, data.mapid)).emit(CALL_DENIED, data.invited) socket.broadcast.in(userMapRoom(data.inviter, data.mapid)).emit(CALL_DENIED, data.invited)
}) })
socket.on(DENY_INVITE, function (data) { socket.on(DENY_INVITE, function(data) {
socket.broadcast.in(userMapRoom(data.inviter, data.mapid)).emit(INVITE_DENIED, data.invited) socket.broadcast.in(userMapRoom(data.inviter, data.mapid)).emit(INVITE_DENIED, data.invited)
}) })
socket.on(JOIN_CALL, function (data) { socket.on(JOIN_CALL, function(data) {
socket.broadcast.in(mapRoom(data.mapid)).emit(MAPPER_JOINED_CALL, data.id) socket.broadcast.in(mapRoom(data.mapid)).emit(MAPPER_JOINED_CALL, data.id)
}) })
socket.on(LEAVE_CALL, function (data) { socket.on(LEAVE_CALL, function(data) {
socket.broadcast.in(mapRoom(data.mapid)).emit(MAPPER_LEFT_CALL, data.id) socket.broadcast.in(mapRoom(data.mapid)).emit(MAPPER_LEFT_CALL, data.id)
}) })
}) })
} }

25
realtime/map.js
View file

@ -24,11 +24,10 @@ const {
const { mapRoom, userMapRoom } = require('./rooms') const { mapRoom, userMapRoom } = require('./rooms')
module.exports = function (io, store) { module.exports = function(io, store) {
io.on('connection', function (socket) { io.on('connection', function(socket) {
// this will ping everyone on a map that there's a person just joined the map // this will ping everyone on a map that there's a person just joined the map
socket.on(JOIN_MAP, function (data) { socket.on(JOIN_MAP, function(data) {
socket.mapid = data.mapid socket.mapid = data.mapid
socket.userid = data.userid socket.userid = data.userid
socket.username = data.username socket.username = data.username
@ -52,12 +51,12 @@ module.exports = function (io, store) {
socket.leave(userMapRoom(socket.userid, socket.mapid)) socket.leave(userMapRoom(socket.userid, socket.mapid))
socket.broadcast.in(mapRoom(socket.mapid)).emit(LOST_MAPPER, data) socket.broadcast.in(mapRoom(socket.mapid)).emit(LOST_MAPPER, data)
socket.mapid = null socket.mapid = null
} }
socket.on(LEAVE_MAP, leaveMap) socket.on(LEAVE_MAP, leaveMap)
socket.on('disconnect', leaveMap) socket.on('disconnect', leaveMap)
// this will ping a new person with awareness of who's already on the map // this will ping a new person with awareness of who's already on the map
socket.on(SEND_MAPPER_INFO, function (data) { socket.on(SEND_MAPPER_INFO, function(data) {
var existingUser = { var existingUser = {
userid: data.userid, userid: data.userid,
username: data.username, username: data.username,
@ -67,7 +66,7 @@ module.exports = function (io, store) {
socket.broadcast.in(userMapRoom(data.userToNotify, data.mapid)).emit(MAPPER_LIST_UPDATED, existingUser) socket.broadcast.in(userMapRoom(data.userToNotify, data.mapid)).emit(MAPPER_LIST_UPDATED, existingUser)
}) })
socket.on(SEND_COORDS, function (data) { socket.on(SEND_COORDS, function(data) {
var peer = { var peer = {
userid: data.userid, userid: data.userid,
usercoords: data.usercoords usercoords: data.usercoords
@ -75,37 +74,37 @@ module.exports = function (io, store) {
socket.broadcast.in(mapRoom(data.mapid)).emit(PEER_COORDS_UPDATED, peer) socket.broadcast.in(mapRoom(data.mapid)).emit(PEER_COORDS_UPDATED, peer)
}) })
socket.on(CREATE_MESSAGE, function (data) { socket.on(CREATE_MESSAGE, function(data) {
var mapId = data.mapid var mapId = data.mapid
delete data.mapid delete data.mapid
socket.broadcast.in(mapRoom(mapId)).emit(MESSAGE_CREATED, data) socket.broadcast.in(mapRoom(mapId)).emit(MESSAGE_CREATED, data)
}) })
socket.on(DRAG_TOPIC, function (data) { socket.on(DRAG_TOPIC, function(data) {
var mapId = data.mapid var mapId = data.mapid
delete data.mapid delete data.mapid
socket.broadcast.in(mapRoom(mapId)).emit(TOPIC_DRAGGED, data) socket.broadcast.in(mapRoom(mapId)).emit(TOPIC_DRAGGED, data)
}) })
socket.on(CREATE_TOPIC, function (data) { socket.on(CREATE_TOPIC, function(data) {
var mapId = data.mapid var mapId = data.mapid
delete data.mapid delete data.mapid
socket.broadcast.in(mapRoom(mapId)).emit(TOPIC_CREATED, data) socket.broadcast.in(mapRoom(mapId)).emit(TOPIC_CREATED, data)
}) })
socket.on(REMOVE_TOPIC, function (data) { socket.on(REMOVE_TOPIC, function(data) {
var mapId = data.mapid var mapId = data.mapid
delete data.mapid delete data.mapid
socket.broadcast.in(mapRoom(mapId)).emit(TOPIC_REMOVED, data) socket.broadcast.in(mapRoom(mapId)).emit(TOPIC_REMOVED, data)
}) })
socket.on(CREATE_SYNAPSE, function (data) { socket.on(CREATE_SYNAPSE, function(data) {
var mapId = data.mapid var mapId = data.mapid
delete data.mapid delete data.mapid
socket.broadcast.in(mapRoom(mapId)).emit(SYNAPSE_CREATED, data) socket.broadcast.in(mapRoom(mapId)).emit(SYNAPSE_CREATED, data)
}) })
socket.on(REMOVE_SYNAPSE, function (data) { socket.on(REMOVE_SYNAPSE, function(data) {
var mapId = data.mapid var mapId = data.mapid
delete data.mapid delete data.mapid
socket.broadcast.in(mapRoom(mapId)).emit(SYNAPSE_REMOVED, data) socket.broadcast.in(mapRoom(mapId)).emit(SYNAPSE_REMOVED, data)

13
realtime/realtime-server.js
View file

@ -1,10 +1,9 @@
var const io = require('socket.io')()
io = require('socket.io')(), const signalling = require('./signal')
signalling = require('./signal'), const junto = require('./junto')
junto = require('./junto'), const map = require('./map')
map = require('./map'), const global = require('./global')
global = require('./global'), const stunservers = [{'url': 'stun:stun.l.google.com:19302'}]
stunservers = [{"url": "stun:stun.l.google.com:19302"}]
const { createStore } = require('redux') const { createStore } = require('redux')
const reducer = require('./reducer') const reducer = require('./reducer')

80
realtime/reducer.js
View file

@ -9,7 +9,7 @@ const {
const NOT_IN_CONVERSATION = 0 const NOT_IN_CONVERSATION = 0
const IN_CONVERSATION = 1 const IN_CONVERSATION = 1
const addMapperToMap = (map, userId) => { return Object.assign({}, map, { [userId]: NOT_IN_CONVERSATION })} const addMapperToMap = (map, userId) => { return Object.assign({}, map, { [userId]: NOT_IN_CONVERSATION }) }
const reducer = (state = { connectedPeople: {}, liveMaps: {} }, action) => { const reducer = (state = { connectedPeople: {}, liveMaps: {} }, action) => {
const { type, payload } = action const { type, payload } = action
@ -19,56 +19,56 @@ const reducer = (state = { connectedPeople: {}, liveMaps: {} }, action) => {
const callWillFinish = map && (type === LEAVE_CALL || type === 'DISCONNECT') && Object.keys(map).length === 2 const callWillFinish = map && (type === LEAVE_CALL || type === 'DISCONNECT') && Object.keys(map).length === 2
switch (type) { switch (type) {
case JOIN_MAP: case JOIN_MAP:
return Object.assign({}, state, { return Object.assign({}, state, {
connectedPeople: Object.assign({}, connectedPeople, { connectedPeople: Object.assign({}, connectedPeople, {
[payload.userid]: { [payload.userid]: {
id: payload.userid, id: payload.userid,
username: payload.username, username: payload.username,
avatar: payload.avatar avatar: payload.avatar
} }
}), }),
liveMaps: Object.assign({}, liveMaps, { liveMaps: Object.assign({}, liveMaps, {
[payload.mapid]: addMapperToMap(map || {}, payload.userid) [payload.mapid]: addMapperToMap(map || {}, payload.userid)
})
}) })
}) case LEAVE_MAP:
case LEAVE_MAP:
// if the map will empty, remove it from liveMaps, if the map will not empty, just remove the mapper // if the map will empty, remove it from liveMaps, if the map will not empty, just remove the mapper
const newLiveMaps = mapWillEmpty const newLiveMaps = mapWillEmpty
? omit(liveMaps, payload.mapid) ? omit(liveMaps, payload.mapid)
: Object.assign({}, liveMaps, { [payload.mapid]: omit(map, payload.userid) }) : Object.assign({}, liveMaps, { [payload.mapid]: omit(map, payload.userid) })
return { return {
connectedPeople: omit(connectedPeople, payload.userid), connectedPeople: omit(connectedPeople, payload.userid),
liveMaps: omitBy(newLiveMaps, isNil) liveMaps: omitBy(newLiveMaps, isNil)
} }
case JOIN_CALL: case JOIN_CALL:
// update the user (payload.id is user id) in the given map to be marked in the conversation // update the user (payload.id is user id) in the given map to be marked in the conversation
return Object.assign({}, state, { return Object.assign({}, state, {
liveMaps: Object.assign({}, liveMaps, { liveMaps: Object.assign({}, liveMaps, {
[payload.mapid]: Object.assign({}, map, { [payload.mapid]: Object.assign({}, map, {
[payload.id]: IN_CONVERSATION [payload.id]: IN_CONVERSATION
})
}) })
}) })
}) case LEAVE_CALL:
case LEAVE_CALL: const newMap = callWillFinish
const newMap = callWillFinish
? mapValues(map, () => NOT_IN_CONVERSATION) ? mapValues(map, () => NOT_IN_CONVERSATION)
: Object.assign({}, map, { [payload.userid]: NOT_IN_CONVERSATION }) : Object.assign({}, map, { [payload.userid]: NOT_IN_CONVERSATION })
return Object.assign({}, state, { return Object.assign({}, state, {
liveMaps: Object.assign({}, liveMaps, { map: newMap }) liveMaps: Object.assign({}, liveMaps, { map: newMap })
}) })
case 'DISCONNECT': case 'DISCONNECT':
const mapWithoutUser = omit(map, payload.userid) const mapWithoutUser = omit(map, payload.userid)
const newMapWithoutUser = callWillFinish ? mapValues(mapWithoutUser, () => NOT_IN_CONVERSATION) : mapWithoutUser const newMapWithoutUser = callWillFinish ? mapValues(mapWithoutUser, () => NOT_IN_CONVERSATION) : mapWithoutUser
const newLiveMapsWithoutUser = mapWillEmpty ? omit(liveMaps, payload.mapid) : Object.assign({}, liveMaps, { [payload.mapid]: newMapWithoutUser }) const newLiveMapsWithoutUser = mapWillEmpty ? omit(liveMaps, payload.mapid) : Object.assign({}, liveMaps, { [payload.mapid]: newMapWithoutUser })
return { return {
connectedPeople: omit(connectedPeople, payload.userid), connectedPeople: omit(connectedPeople, payload.userid),
liveMaps: omitBy(newLiveMapsWithoutUser, isNil) liveMaps: omitBy(newLiveMapsWithoutUser, isNil)
} }
default: default:
return state return state
} }
} }

30
realtime/signal.js
View file

@ -5,14 +5,14 @@ const uuid = require('node-uuid')
function safeCb(cb) { function safeCb(cb) {
if (typeof cb === 'function') { if (typeof cb === 'function') {
return cb; return cb
} else { } else {
return function () {}; return function() {}
} }
} }
module.exports = function(io, stunservers, state) { module.exports = function(io, stunservers, state) {
io.on('connection', function (socket) { io.on('connection', function(socket) {
socket.resources = { socket.resources = {
screen: false, screen: false,
video: true, video: true,
@ -20,7 +20,7 @@ module.exports = function(io, stunservers, state) {
} }
// pass a message to another id // pass a message to another id
socket.on('message', function (details) { socket.on('message', function(details) {
if (!details) return if (!details) return
var otherClient = io.to(details.to) var otherClient = io.to(details.to)
@ -30,11 +30,11 @@ module.exports = function(io, stunservers, state) {
otherClient.emit('message', details) otherClient.emit('message', details)
}) })
socket.on('shareScreen', function () { socket.on('shareScreen', function() {
socket.resources.screen = true socket.resources.screen = true
}) })
socket.on('unshareScreen', function (type) { socket.on('unshareScreen', function(type) {
socket.resources.screen = false socket.resources.screen = false
removeFeed('screen') removeFeed('screen')
}) })
@ -66,16 +66,16 @@ module.exports = function(io, stunservers, state) {
// we don't want to pass "leave" directly because the // we don't want to pass "leave" directly because the
// event type string of "socket end" gets passed too. // event type string of "socket end" gets passed too.
socket.on('disconnect', function () { socket.on('disconnect', function() {
removeFeed() removeFeed()
}) })
socket.on('leave', function () { socket.on('leave', function() {
removeFeed() removeFeed()
}) })
socket.on('create', function (name, cb) { socket.on('create', function(name, cb) {
if (arguments.length == 2) { if (arguments.length === 2) {
cb = (typeof cb == 'function') ? cb : function () {} cb = (typeof cb === 'function') ? cb : function() {}
name = name || uuid() name = name || uuid()
} else { } else {
cb = name cb = name
@ -93,7 +93,7 @@ module.exports = function(io, stunservers, state) {
// support for logging full webrtc traces to stdout // support for logging full webrtc traces to stdout
// useful for large-scale error monitoring // useful for large-scale error monitoring
socket.on('trace', function (data) { socket.on('trace', function(data) {
console.log('trace', JSON.stringify( console.log('trace', JSON.stringify(
[data.type, data.session, data.prefix, data.peer, data.time, data.value] [data.type, data.session, data.prefix, data.peer, data.time, data.value]
)) ))
@ -106,13 +106,9 @@ module.exports = function(io, stunservers, state) {
var result = { var result = {
clients: {} clients: {}
} }
Object.keys(sockets).forEach(function (id) { Object.keys(sockets).forEach(function(id) {
result.clients[id] = adapter.nsp.connected[id].resources result.clients[id] = adapter.nsp.connected[id].resources
}) })
return result return result
} }
function socketsInRoom(name) {
return io.sockets.sockets(name).length
}
} }