glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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": {
"react/jsx-uses-react": [2],
"react/jsx-uses-vars": [2],
"space-before-function-paren": [2, "never"],
"yoda": [2, "never", { "exceptRange": true }]
}
}

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

@ -25,13 +25,12 @@ const Admin = {
liClickHandler: function() {
var self = Admin
if ($(this).attr('class') != 'toggledOff') {
if ($(this).attr('class') !== 'toggledOff') {
$(this).addClass('toggledOff')
var value_to_remove = $(this).attr('id')
self.selectMetacodes.splice(self.selectMetacodes.indexOf(value_to_remove), 1)
const valueToRemove = $(this).attr('id')
self.selectMetacodes.splice(self.selectMetacodes.indexOf(valueToRemove), 1)
$('#metacodes_value').val(self.selectMetacodes.toString())
}
else if ($(this).attr('class') == 'toggledOff') {
} else if ($(this).attr('class') === 'toggledOff') {
$(this).removeClass('toggledOff')
self.selectMetacodes.push($(this).attr('id'))
$('#metacodes_value').val(self.selectMetacodes.toString())
@ -40,7 +39,7 @@ const Admin = {
validate: function() {
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?')
return false
}

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

@ -28,22 +28,19 @@ const AutoLayout = {
self.timeToTurn = 0
// going right? turn down
if (self.nextXshift == 1 && self.nextYshift == 0) {
if (self.nextXshift === 1 && self.nextYshift === 0) {
self.nextXshift = 0
self.nextYshift = 1
}
} else if (self.nextXshift === 0 && self.nextYshift === 1) {
// going down? turn left
else if (self.nextXshift == 0 && self.nextYshift == 1) {
self.nextXshift = -1
self.nextYshift = 0
}
} else if (self.nextXshift === -1 && self.nextYshift === 0) {
// going left? turn up
else if (self.nextXshift == -1 && self.nextYshift == 0) {
self.nextXshift = 0
self.nextYshift = -1
}
} else if (self.nextXshift === 0 && self.nextYshift === -1) {
// going up? turn right
else if (self.nextXshift == 0 && self.nextYshift == -1) {
self.nextXshift = 1
self.nextYshift = 0
}

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

@ -18,7 +18,7 @@ const Control = {
selectNode: function(node, e) {
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.setData('dim', 30, 'current')
Selected.Nodes.push(node)
@ -126,18 +126,16 @@ const Control = {
}
if (!Active.Map) return
var l = Selected.Nodes.length,
i,
node,
authorized = Active.Map.authorizeToEdit(Active.Mapper)
const l = Selected.Nodes.length
const authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) {
GlobalUI.notifyUser('Cannot edit Public map.')
return
}
for (i = l - 1; i >= 0; i -= 1) {
node = Selected.Nodes[i]
for (let i = l - 1; i >= 0; i -= 1) {
const node = Selected.Nodes[i]
Control.removeNode(node.id)
}
},
@ -163,12 +161,9 @@ const Control = {
Control.hideNode(nodeid)
},
hideSelectedNodes: function() {
var l = Selected.Nodes.length,
i,
node
for (i = l - 1; i >= 0; i -= 1) {
node = Selected.Nodes[i]
const l = Selected.Nodes.length
for (let i = l - 1; i >= 0; i -= 1) {
const node = Selected.Nodes[i]
Control.hideNode(node.id)
}
},
@ -190,7 +185,7 @@ const Control = {
})
setTimeout(function() {
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
}
Visualize.mGraph.graph.removeNode(nodeid)
@ -199,9 +194,9 @@ const Control = {
Filter.checkMappers()
},
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
edge.setDataset('current', {
@ -243,9 +238,6 @@ const Control = {
Selected.Edges.indexOf(edge), 1)
},
deleteSelectedEdges: function() { // refers to deleting topics permanently
var edge,
l = Selected.Edges.length
if (!Active.Map) return
var authorized = Active.Map.authorizeToEdit(Active.Mapper)
@ -255,8 +247,9 @@ const Control = {
return
}
for (var i = l - 1; i >= 0; i -= 1) {
edge = Selected.Edges[i]
const l = Selected.Edges.length
for (let i = l - 1; i >= 0; i -= 1) {
const edge = Selected.Edges[i]
Control.deleteEdge(edge)
}
},
@ -301,9 +294,7 @@ const Control = {
// Topic view is handled by removeSelectedNodes
if (!Active.Map) return
var l = Selected.Edges.length,
i,
edge
const l = Selected.Edges.length
var authorized = Active.Map.authorizeToEdit(Active.Mapper)
@ -312,8 +303,8 @@ const Control = {
return
}
for (i = l - 1; i >= 0; i -= 1) {
edge = Selected.Edges[i]
for (let i = l - 1; i >= 0; i -= 1) {
const edge = Selected.Edges[i]
Control.removeEdge(edge)
}
Selected.Edges = [ ]
@ -351,11 +342,9 @@ const Control = {
}])
},
hideSelectedEdges: function() {
var edge,
l = Selected.Edges.length,
i
for (i = l - 1; i >= 0; i -= 1) {
edge = Selected.Edges[i]
const l = Selected.Edges.length
for (let i = l - 1; i >= 0; i -= 1) {
const edge = Selected.Edges[i]
Control.hideEdge(edge)
}
Selected.Edges = [ ]
@ -381,12 +370,12 @@ const Control = {
GlobalUI.notifyUser('Working...')
// variables to keep track of how many nodes and synapses you had the ability to change the permission of
var nCount = 0,
sCount = 0
var nCount = 0
var sCount = 0
// change the permission of the selected synapses, if logged in user is the original creator
var l = Selected.Edges.length
for (var i = l - 1; i >= 0; i -= 1) {
const edgesLength = Selected.Edges.length
for (let i = edgesLength - 1; i >= 0; i -= 1) {
edge = Selected.Edges[i]
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
var l = Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) {
const nodesLength = Selected.Nodes.length
for (let i = nodesLength - 1; i >= 0; i -= 1) {
node = Selected.Nodes[i]
topic = node.getData('topic')
@ -418,12 +407,12 @@ const Control = {
var message = nString + sString + ' you created updated to ' + permission
GlobalUI.notifyUser(message)
},
updateSelectedMetacodes: function (metacode_id) {
updateSelectedMetacodes: function(metacodeId) {
var node, topic
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
var nCount = 0
@ -436,7 +425,7 @@ const Control = {
if (topic.authorizeToEdit(Active.Mapper)) {
topic.save({
'metacode_id': metacode_id
'metacode_id': metacodeId
})
nCount++
}

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

@ -32,20 +32,20 @@ const Create = {
toggleMetacodeSelected: function() {
var self = Create
if ($(this).attr('class') != 'toggledOff') {
if ($(this).attr('class') !== 'toggledOff') {
$(this).addClass('toggledOff')
var value_to_remove = $(this).attr('id')
var name_to_remove = $(this).attr('data-name')
self.newSelectedMetacodes.splice(self.newSelectedMetacodes.indexOf(value_to_remove), 1)
self.newSelectedMetacodeNames.splice(self.newSelectedMetacodeNames.indexOf(name_to_remove), 1)
} else if ($(this).attr('class') == 'toggledOff') {
var valueToRemove = $(this).attr('id')
var nameToRemove = $(this).attr('data-name')
self.newSelectedMetacodes.splice(self.newSelectedMetacodes.indexOf(valueToRemove), 1)
self.newSelectedMetacodeNames.splice(self.newSelectedMetacodeNames.indexOf(nameToRemove), 1)
} else if ($(this).attr('class') === 'toggledOff') {
$(this).removeClass('toggledOff')
self.newSelectedMetacodes.push($(this).attr('id'))
self.newSelectedMetacodeNames.push($(this).attr('data-name'))
}
},
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!')
return false
}
@ -62,8 +62,7 @@ const Create = {
Create.selectedMetacodeNames = []
Create.newSelectedMetacodes = []
Create.newSelectedMetacodeNames = []
}
else if (custom) {
} else if (custom) {
// uses .slice to avoid setting the two arrays to the same actual array
Create.selectedMetacodes = Create.newSelectedMetacodes.slice(0)
Create.selectedMetacodeNames = Create.newSelectedMetacodeNames.slice(0)
@ -120,7 +119,7 @@ const Create = {
var self = Create
self.isSwitchingSet = false
if (self.selectedMetacodeSet != 'metacodeset-custom') {
if (self.selectedMetacodeSet !== 'metacodeset-custom') {
$('.customMetacodeList li').addClass('toggledOff')
self.selectedMetacodes = []
self.selectedMetacodeNames = []
@ -149,8 +148,7 @@ const Create = {
if (Create.newTopic.pinned) {
$('.pinCarousel').removeClass('isPinned')
Create.newTopic.pinned = false
}
else {
} else {
$('.pinCarousel').addClass('isPinned')
Create.newTopic.pinned = true
}
@ -174,13 +172,13 @@ const Create = {
[{
name: 'topic_autocomplete',
limit: 8,
display: function (s) { return s.label; },
display: function(s) { return s.label },
templates: {
suggestion: function(s) {
return Hogan.compile($('#topicAutocompleteTemplate').html()).render(s)
}
},
source: topicBloodhound,
source: topicBloodhound
}]
)
@ -246,15 +244,13 @@ const Create = {
},
newSynapse: {
init: function() {
var self = Create.newSynapse
var synapseBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/synapses?term=%QUERY',
wildcard: '%QUERY',
},
wildcard: '%QUERY'
}
})
var existingSynapseBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
@ -269,42 +265,44 @@ const Create = {
} else {
return null
}
},
},
}
}
})
// initialize the autocomplete results for synapse creation
$('#synapse_desc').typeahead(
{
highlight: true,
minLength: 2,
minLength: 2
},
[{
name: 'synapse_autocomplete',
display: function (s) { return s.label; },
display: function(s) { return s.label },
templates: {
suggestion: function(s) {
return Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>").render(s)
}
},
},
source: synapseBloodhound,
source: synapseBloodhound
},
{
name: 'existing_synapses',
limit: 50,
display: function (s) { return s.label; },
display: function(s) { return s.label },
templates: {
suggestion: function(s) {
return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s)
},
header: '<h3>Existing synapses</h3>'
},
source: existingSynapseBloodhound,
source: existingSynapseBloodhound
}]
)
$('#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() === '' ||
e.keyCode === DELETE && $(this).val() === '' ||
e.keyCode === ESC) {
@ -348,7 +346,7 @@ const Create = {
Create.newSynapse.topic2id = 0
Mouse.synapseStartCoordinates = []
if (Visualize.mGraph) Visualize.mGraph.plot()
},
}
}
}

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

@ -9,11 +9,6 @@ import InfoBox from '../Map/InfoBox'
import Mapper from '../Mapper'
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({
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'],

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

@ -210,8 +210,7 @@ const Filter = {
},
checkMappers: function() {
var self = Filter
var onMap = Active.Map ? true : false
if (onMap) {
if (Active.Map) {
self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper')
} else {
// on topic view
@ -274,13 +273,13 @@ const Filter = {
// to reduce code redundancy
// gets called in the context of a list item in a filter box
toggleLi: function(whichToFilter) {
var self = Filter, index
var self = Filter
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)
$(this).removeClass('toggledOff')
} else {
index = self.visible[whichToFilter].indexOf(id)
const index = self.visible[whichToFilter].indexOf(id)
self.visible[whichToFilter].splice(index, 1)
$(this).addClass('toggledOff')
}
@ -293,8 +292,7 @@ const Filter = {
if (self.visible.metacodes.length === self.filters.metacodes.length) {
$('.showAllMetacodes').addClass('active')
$('.hideAllMetacodes').removeClass('active')
}
else if (self.visible.metacodes.length === 0) {
} else if (self.visible.metacodes.length === 0) {
$('.showAllMetacodes').removeClass('active')
$('.hideAllMetacodes').addClass('active')
} else {
@ -309,8 +307,7 @@ const Filter = {
if (self.visible.mappers.length === self.filters.mappers.length) {
$('.showAllMappers').addClass('active')
$('.hideAllMappers').removeClass('active')
}
else if (self.visible.mappers.length === 0) {
} else if (self.visible.mappers.length === 0) {
$('.showAllMappers').removeClass('active')
$('.hideAllMappers').addClass('active')
} else {
@ -325,8 +322,7 @@ const Filter = {
if (self.visible.synapses.length === self.filters.synapses.length) {
$('.showAllSynapses').addClass('active')
$('.hideAllSynapses').removeClass('active')
}
else if (self.visible.synapses.length === 0) {
} else if (self.visible.synapses.length === 0) {
$('.showAllSynapses').removeClass('active')
$('.hideAllSynapses').addClass('active')
} else {
@ -339,45 +335,38 @@ const Filter = {
var visible = self.visible
var passesMetacode, passesMapper, passesSynapse
var onMap
if (Active.Map) {
onMap = true
}
else if (Active.Topic) {
onMap = false
}
var opacityForFilter = onMap ? 0 : 0.4
var opacityForFilter = Active.Map ? 0 : 0.4
DataModel.Topics.each(function(topic) {
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
if (onMap) {
if (Active.Map) {
// when on a map,
// we filter by mapper according to the person who added the
// topic or synapse to the map
var user_id = topic.getMapping().get('user_id').toString()
if (visible.mappers.indexOf(user_id) == -1) passesMapper = false
let userId = topic.getMapping().get('user_id').toString()
if (visible.mappers.indexOf(userId) === -1) passesMapper = false
else passesMapper = true
} else {
// when on a topic view,
// we filter by mapper according to the person who created the
// topic or synapse
var user_id = topic.get('user_id').toString()
if (visible.mappers.indexOf(user_id) == -1) passesMapper = false
let userId = topic.get('user_id').toString()
if (visible.mappers.indexOf(userId) === -1) passesMapper = false
else passesMapper = true
}
if (passesMetacode && passesMapper) {
if (n) {
n.setData('alpha', 1, 'end')
} else {
console.log(topic)
}
else console.log(topic)
} else {
if (n) {
Control.deselectNode(n, true)
@ -385,8 +374,9 @@ const Filter = {
n.eachAdjacency(function(e) {
Control.deselectEdge(e, true)
})
} else {
console.log(topic)
}
else console.log(topic)
}
})
@ -398,7 +388,7 @@ const Filter = {
DataModel.Synapses.each(function(synapse) {
var e = synapse.get('edge')
var desc
var user_id = synapse.get('user_id').toString()
var userId = synapse.get('user_id').toString()
if (e && !e.getData('touched')) {
var synapses = e.getData('synapses')
@ -406,7 +396,7 @@ const Filter = {
// if any of the synapses represent by the edge are still unfiltered
// leave the edge visible
passesSynapse = false
for (var i = 0; i < synapses.length; i++) {
for (let i = 0; i < synapses.length; i++) {
desc = synapses[i].get('desc')
if (visible.synapses.indexOf(desc) > -1) passesSynapse = true
}
@ -416,9 +406,9 @@ const Filter = {
var displayIndex = e.getData('displayIndex') ? e.getData('displayIndex') : 0
var displayedSynapse = synapses[displayIndex]
desc = displayedSynapse.get('desc')
if (passesSynapse && visible.synapses.indexOf(desc) == -1) {
if (passesSynapse && visible.synapses.indexOf(desc) === -1) {
// 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')
if (visible.synapses.indexOf(desc) > -1) {
e.setData('displayIndex', i)
@ -427,13 +417,13 @@ const Filter = {
}
}
if (onMap) {
if (Active.Map) {
// when on a map,
// we filter by mapper according to the person who added the
// 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
var color = Settings.colors.synapses.normal
@ -446,8 +436,9 @@ const Filter = {
}
e.setData('touched', true)
} else if (!e) {
console.log(synapse)
}
else if (!e) console.log(synapse)
})
// run the animation

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

@ -83,7 +83,6 @@ const CreateMap = {
GlobalUI.notifyUser('Working...')
},
throwMapNameError: function() {
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'
var $form = $(formId)
@ -97,7 +96,6 @@ const CreateMap = {
}, 5000)
},
success: function(model) {
var self = CreateMap
// push the new map onto the collection of 'my maps'
DataModel.Maps.Mine.add(model)

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

@ -19,7 +19,7 @@ const Import = {
synapseWhitelist: [
'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) {
const results = Import.parseTabbedString(text)
@ -37,14 +37,14 @@ const Import = {
if (synapsesText) synapsesText = synapsesText[2].replace(topicsRegex, '')
// merge default options and extra options passed in parserOpts argument
const csv_parser_options = Object.assign({
const csvParserOptions = Object.assign({
columns: true, // get headers
relax_column_count: true,
skip_empty_lines: true
}, parserOpts)
const topicsPromise = $.Deferred()
parse(topicsText, csv_parser_options, (err, data) => {
parse(topicsText, csvParserOptions, (err, data) => {
if (err) {
console.warn(err)
return topicsPromise.resolve([])
@ -53,7 +53,7 @@ const Import = {
})
const synapsesPromise = $.Deferred()
parse(synapsesText, csv_parser_options, (err, data) => {
parse(synapsesText, csvParserOptions, (err, data) => {
if (err) {
console.warn(err)
return synapsesPromise.resolve([])
@ -113,8 +113,8 @@ const Import = {
var topicHeaders = []
var synapseHeaders = []
lines.forEach(function (line_raw, index) {
var line = line_raw.split('\t')
lines.forEach(function(lineRaw, index) {
const line = lineRaw.split('\t')
var noblanks = line.filter(function(elt) {
return elt !== ''
})
@ -227,7 +227,7 @@ const Import = {
coords,
name: topic.name,
permission: topic.permission,
import_id: topic.id
importId: topic.id
})
return // "continue"
}
@ -277,31 +277,31 @@ const Import = {
})
},
createTopicWithParameters: function (name, metacode_name, permission, desc,
link, xloc, yloc, import_id, opts = {}) {
createTopicWithParameters: function(name, metacodeName, permission, desc,
link, xloc, yloc, importId, opts = {}) {
var self = Import
$(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) {
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')
var defer_to_map_id = permission === topic_permission ? Active.Map.get('id') : null
const topicPermision = permission || Active.Map.get('permission')
var deferToMapId = permission === topicPermision ? Active.Map.get('id') : null
var topic = new DataModel.Topic({
name: name,
metacode_id: metacode.id,
permission: topic_permission,
defer_to_map_id: defer_to_map_id,
permission: topicPermision,
defer_to_map_id: deferToMapId,
desc: desc || '',
link: link || '',
calculated_permission: Active.Map.get('permission')
})
DataModel.Topics.add(topic)
if (import_id !== null && import_id !== undefined) {
self.cidMappings[import_id] = topic.cid
if (importId !== null && importId !== undefined) {
self.cidMappings[importId] = topic.cid
}
var mapping = new DataModel.Mapping({
@ -356,7 +356,7 @@ const Import = {
const name = opts.name || 'Link'
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 desc = opts.desc || url
@ -368,7 +368,7 @@ const Import = {
url,
coords.x,
coords.y,
import_id,
importId,
{
success: function(topic) {
if (topic.get('name') !== 'Link') return

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

@ -13,7 +13,6 @@ import Filter from './Filter'
import GlobalUI from './GlobalUI'
import Map from './Map'
import Mouse from './Mouse'
import Realtime from './Realtime'
import Selected from './Selected'
import Settings from './Settings'
import Synapse from './Synapse'
@ -746,111 +745,109 @@ const JIT = {
if (node && !node.nodeFrom) {
self.handleSelectionBeforeDragging(node, e)
var pos = eventInfo.getPos(),
EDGE_THICKNESS = 30 /** Metamaps.Visualize.mGraph.canvas.scaleOffsetX*/,
SHIFT = 2 / Metamaps.Visualize.mGraph.canvas.scaleOffsetX,
PERIOD = 5;
const pos = eventInfo.getPos()
const EDGE_THICKNESS = 30
const SHIFT = 2 / Visualize.mGraph.canvas.scaleOffsetX
const PERIOD = 5
// self.virtualPointer = pos;
// if it's a left click, or a touch, move the node
if (e.touches || (e.button === 0 && !e.altKey && !e.ctrlKey && (e.buttons === 0 || e.buttons === 1 || e.buttons === undefined))) {
var width = Visualize.mGraph.canvas.getSize().width,
height = Visualize.mGraph.canvas.getSize().height,
xPix = Util.coordsToPixels(Visualize.mGraph, pos).x,
yPix = Util.coordsToPixels(Visualize.mGraph, pos).y;
const width = Visualize.mGraph.canvas.getSize().width
const height = Visualize.mGraph.canvas.getSize().height
const xPix = Util.coordsToPixels(Visualize.mGraph, pos).x
const yPix = Util.coordsToPixels(Visualize.mGraph, pos).y
if (self.dragFlag === 0) {
self.mouseDownPix = Util.coordsToPixels(Visualize.mGraph, eventInfo.getPos());
self.dragFlag = 1;
self.mouseDownPix = Util.coordsToPixels(Visualize.mGraph, eventInfo.getPos())
self.dragFlag = 1
}
if (Util.getDistance(Util.coordsToPixels(Visualize.mGraph, pos), self.mouseDownPix) > 2 && !self.dragTolerance) {
self.dragTolerance = 1;
self.dragTolerance = 1
}
if (xPix < EDGE_THICKNESS && self.dragTolerance) {
clearInterval(self.dragLeftEdge);
clearInterval(self.dragRightEdge);
clearInterval(self.dragTopEdge);
clearInterval(self.dragBottomEdge);
clearInterval(self.dragLeftEdge)
clearInterval(self.dragRightEdge)
clearInterval(self.dragTopEdge)
clearInterval(self.dragBottomEdge)
self.virtualPointer = { x: Util.pixelsToCoords(Visualize.mGraph, { x: EDGE_THICKNESS, y: yPix }).x - SHIFT, y: pos.y }
Visualize.mGraph.canvas.translate(SHIFT, 0);
self.updateTopicPositions(node, self.virtualPointer);
Visualize.mGraph.plot();
Visualize.mGraph.canvas.translate(SHIFT, 0)
self.updateTopicPositions(node, self.virtualPointer)
Visualize.mGraph.plot()
self.dragLeftEdge = setInterval(function() {
self.virtualPointer = { x: Util.pixelsToCoords(Visualize.mGraph, { x: EDGE_THICKNESS, y: yPix }).x - SHIFT, y: pos.y }
Visualize.mGraph.canvas.translate(SHIFT, 0);
self.updateTopicPositions(node,self.virtualPointer);
Visualize.mGraph.plot();
} , PERIOD);
Visualize.mGraph.canvas.translate(SHIFT, 0)
self.updateTopicPositions(node, self.virtualPointer)
Visualize.mGraph.plot()
}, PERIOD)
}
if (width - xPix < EDGE_THICKNESS && self.dragTolerance) {
clearInterval(self.dragLeftEdge);
clearInterval(self.dragRightEdge);
clearInterval(self.dragTopEdge);
clearInterval(self.dragBottomEdge);
clearInterval(self.dragLeftEdge)
clearInterval(self.dragRightEdge)
clearInterval(self.dragTopEdge)
clearInterval(self.dragBottomEdge)
self.virtualPointer = { x: Util.pixelsToCoords(Visualize.mGraph, { x: width - EDGE_THICKNESS, y: yPix }).x + SHIFT, y: pos.y }
Visualize.mGraph.canvas.translate(-SHIFT, 0);
self.updateTopicPositions(node, self.virtualPointer);
Visualize.mGraph.plot();
Visualize.mGraph.canvas.translate(-SHIFT, 0)
self.updateTopicPositions(node, self.virtualPointer)
Visualize.mGraph.plot()
self.dragRightEdge = setInterval(function() {
self.virtualPointer = { x: Util.pixelsToCoords(Visualize.mGraph, { x: width - EDGE_THICKNESS, y: yPix }).x + SHIFT, y: pos.y }
Visualize.mGraph.canvas.translate(-SHIFT, 0);
self.updateTopicPositions(node, self.virtualPointer);
Visualize.mGraph.plot();
} , PERIOD);
Visualize.mGraph.canvas.translate(-SHIFT, 0)
self.updateTopicPositions(node, self.virtualPointer)
Visualize.mGraph.plot()
}, PERIOD)
}
if (yPix < EDGE_THICKNESS && self.dragTolerance) {
clearInterval(self.dragLeftEdge);
clearInterval(self.dragRightEdge);
clearInterval(self.dragTopEdge);
clearInterval(self.dragBottomEdge);
clearInterval(self.dragLeftEdge)
clearInterval(self.dragRightEdge)
clearInterval(self.dragTopEdge)
clearInterval(self.dragBottomEdge)
self.virtualPointer = { x: pos.x, y: Util.pixelsToCoords(Visualize.mGraph, { x: xPix, y: EDGE_THICKNESS }).y - SHIFT }
Visualize.mGraph.canvas.translate(0, SHIFT);
self.updateTopicPositions(node, self.virtualPointer);
Visualize.mGraph.plot();
Visualize.mGraph.canvas.translate(0, SHIFT)
self.updateTopicPositions(node, self.virtualPointer)
Visualize.mGraph.plot()
self.dragTopEdge = setInterval(function() {
self.virtualPointer = { x: pos.x, y: Util.pixelsToCoords(Visualize.mGraph, { x: xPix, y: EDGE_THICKNESS }).y - SHIFT }
Visualize.mGraph.canvas.translate(0, SHIFT);
self.updateTopicPositions(node, self.virtualPointer);
Visualize.mGraph.plot();
} , PERIOD);
Visualize.mGraph.canvas.translate(0, SHIFT)
self.updateTopicPositions(node, self.virtualPointer)
Visualize.mGraph.plot()
}, PERIOD)
}
if (height - yPix < EDGE_THICKNESS && self.dragTolerance) {
clearInterval(self.dragLeftEdge);
clearInterval(self.dragRightEdge);
clearInterval(self.dragTopEdge);
clearInterval(self.dragBottomEdge);
clearInterval(self.dragLeftEdge)
clearInterval(self.dragRightEdge)
clearInterval(self.dragTopEdge)
clearInterval(self.dragBottomEdge)
self.virtualPointer = { x: pos.x, y: Util.pixelsToCoords(Visualize.mGraph, { x: xPix, y: height - EDGE_THICKNESS }).y + SHIFT }
Visualize.mGraph.canvas.translate(0, -SHIFT);
self.updateTopicPositions(node, self.virtualPointer);
Visualize.mGraph.plot();
Visualize.mGraph.canvas.translate(0, -SHIFT)
self.updateTopicPositions(node, self.virtualPointer)
Visualize.mGraph.plot()
self.dragBottomEdge = setInterval(function() {
self.virtualPointer = { x: pos.x, y: Util.pixelsToCoords(Visualize.mGraph, { x: xPix, y: height - EDGE_THICKNESS }).y + SHIFT }
Visualize.mGraph.canvas.translate(0, -SHIFT);
self.updateTopicPositions(node, self.virtualPointer);
Visualize.mGraph.plot();
Visualize.mGraph.canvas.translate(0, -SHIFT)
self.updateTopicPositions(node, self.virtualPointer)
Visualize.mGraph.plot()
}, PERIOD)
}
if (xPix >= EDGE_THICKNESS && width - xPix >= EDGE_THICKNESS && yPix >= EDGE_THICKNESS && height - yPix >= EDGE_THICKNESS) {
clearInterval(self.dragLeftEdge);
clearInterval(self.dragRightEdge);
clearInterval(self.dragTopEdge);
clearInterval(self.dragBottomEdge);
clearInterval(self.dragLeftEdge)
clearInterval(self.dragRightEdge)
clearInterval(self.dragTopEdge)
clearInterval(self.dragBottomEdge)
self.updateTopicPositions(node,pos);
self.updateTopicPositions(node, pos)
Visualize.mGraph.plot()
}
}
} else if ((e.button === 2 || (e.button === 0 && e.altKey) || e.buttons === 2) && authorized) {
// if it's a right click or holding down alt, start synapse creation ->third option is for firefox
else if ((e.button === 2 || (e.button === 0 && e.altKey) || e.buttons === 2) && authorized) {
if (JIT.tempInit === false) {
JIT.tempNode = node
JIT.tempInit = true
@ -913,11 +910,9 @@ const JIT = {
y: pos.y
}
}
}
else if ((e.button === 2 || (e.button === 0 && e.altKey) || e.buttons === 2) && Active.Topic) {
} else if ((e.button === 2 || (e.button === 0 && e.altKey) || e.buttons === 2) && Active.Topic) {
GlobalUI.notifyUser('Cannot create in Topic view.')
}
else if ((e.button === 2 || (e.button === 0 && e.altKey) || e.buttons === 2) && !authorized) {
} else if ((e.button === 2 || (e.button === 0 && e.altKey) || e.buttons === 2) && !authorized) {
GlobalUI.notifyUser('Cannot edit this map.')
}
}
@ -933,21 +928,23 @@ const JIT = {
Visualize.mGraph.plot()
}, // onDragCancelHandler
onDragEndTopicHandler: function(node, eventInfo, e) {
var self = JIT;
var midpoint = {}, pixelPos, mapping
const self = JIT
const midpoint = {}
let pixelPos
let mapping
clearInterval(self.dragLeftEdge);
clearInterval(self.dragRightEdge);
clearInterval(self.dragTopEdge);
clearInterval(self.dragBottomEdge);
clearInterval(self.dragLeftEdge)
clearInterval(self.dragRightEdge)
clearInterval(self.dragTopEdge)
clearInterval(self.dragBottomEdge)
delete self.dragLeftEdge;
delete self.dragRightEdge;
delete self.dragTopEdge;
delete self.dragBottomEdge;
delete self.dragLeftEdge
delete self.dragRightEdge
delete self.dragTopEdge
delete self.dragBottomEdge
self.dragFlag = 0;
self.dragTolerance = 0;
self.dragFlag = 0
self.dragTolerance = 0
if (JIT.tempInit && JIT.tempNode2 === null) {
// this means you want to add a new topic, and then a synapse
@ -1047,35 +1044,35 @@ const JIT = {
}
}, // canvasClickHandler
updateTopicPositions: function(node, pos) {
var len = Selected.Nodes.length;
var topic;
const len = Selected.Nodes.length
// this is used to send nodes that are moving to
// other realtime collaborators on the same map
var positionsToSend = {};
const positionsToSend = {}
// first define offset for each node
var xOffset = []
var yOffset = []
for (var i = 0; i < len; i += 1) {
var n = Selected.Nodes[i]
for (let i = 0; i < len; i += 1) {
const n = Selected.Nodes[i]
xOffset[i] = n.pos.getc().x - node.pos.getc().x
yOffset[i] = n.pos.getc().y - node.pos.getc().y
} // for
for (var i = 0; i < len; i += 1) {
var n = Selected.Nodes[i]
var x = pos.x + xOffset[i]
var y = pos.y + yOffset[i]
for (let i = 0; i < len; i += 1) {
const n = Selected.Nodes[i]
const x = pos.x + xOffset[i]
const y = pos.y + yOffset[i]
if (n.pos.rho || n.pos.rho === 0) {
// this means we're in topic view
var rho = Math.sqrt(x * x + y * y)
var theta = Math.atan2(y, x)
const rho = Math.sqrt(x * x + y * y)
const theta = Math.atan2(y, x)
n.pos.setp(theta, rho)
} else {
n.pos.setc(x, y)
}
else n.pos.setc(x, y)
if (Active.Map) {
topic = n.getData('topic')
const topic = n.getData('topic')
// we use the topic ID not the node id
// because we can't depend on the node id
// to be the same as on other collaborators
@ -1303,7 +1300,7 @@ const JIT = {
const self = JIT
// Copy topic title to clipboard
if(e.button===1 && e.ctrlKey) clipboard.copy(node.name);
if (e.button === 1 && e.ctrlKey) clipboard.copy(node.name)
// catch right click on mac, which is often like ctrl+click
if (navigator.platform.indexOf('Mac') !== -1 && e.ctrlKey) {
@ -1345,22 +1342,21 @@ const JIT = {
duration: 500
})
Visualize.mGraph.plot()
} else {
if (!e.ctrlKey) {
var len = Selected.Nodes.length;
var len = Selected.Nodes.length
for (let i = 0; i < len; i += 1) {
let n = Selected.Nodes[i];
let result = Metamaps.Util.openLink(Metamaps.Topics.get(n.id).attributes.link);
let n = Selected.Nodes[i]
let result = Util.openLink(DataModel.Topics.get(n.id).attributes.link)
if (!result) { // if link failed to open
break;
break
}
}
if (!node.selected) {
Metamaps.Util.openLink(Metamaps.Topics.get(node.id).attributes.link);
Util.openLink(DataModel.Topics.get(node.id).attributes.link)
}
}
}
@ -1589,9 +1585,9 @@ const JIT = {
if (Visualize.mGraph.busy) return
const self = JIT
var synapseText = adj.data.$synapses[0].attributes.desc;
var synapseText = adj.data.$synapses[0].attributes.desc
// Copy synapse label to clipboard
if(e.button===1 && e.ctrlKey && synapseText !== "") clipboard.copy(synapseText);
if (e.button === 1 && e.ctrlKey && synapseText !== '') clipboard.copy(synapseText)
// catch right click on mac, which is often like ctrl+click
if (navigator.platform.indexOf('Mac') !== -1 && e.ctrlKey) {

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

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

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

@ -51,7 +51,7 @@ const InfoBox = {
self.userImageUrl = serverData['user.png']
var querystring = window.location.search.replace(/^\?/, '')
if (querystring == 'new') {
if (querystring === 'new') {
self.open()
$('.mapInfoBox').addClass('mapRequestTitle')
$('#mapInfoName').trigger('click')
@ -206,27 +206,27 @@ const InfoBox = {
var collaborators = {
name: 'collaborators',
limit: 9999,
display: function(s) { return s.label; },
display: function(s) { return s.label },
templates: {
notFound: function(s) {
return Hogan.compile($('#collaboratorSearchTemplate').html()).render({
value: "No results",
label: "No results",
rtype: "noresult",
value: 'No results',
label: 'No results',
rtype: 'noresult',
profile: self.userImageUrl
});
})
},
suggestion: function(s) {
return Hogan.compile($('#collaboratorSearchTemplate').html()).render(s);
},
return Hogan.compile($('#collaboratorSearchTemplate').html()).render(s)
}
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/mappers?term=%QUERY',
wildcard: '%QUERY',
},
wildcard: '%QUERY'
}
})
}
@ -234,7 +234,7 @@ const InfoBox = {
if (Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')) {
$('.collaboratorSearchField').typeahead(
{
highlight: false,
highlight: false
},
[collaborators]
)
@ -283,7 +283,6 @@ const InfoBox = {
$('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm)
},
createContributorList: function() {
var self = InfoBox
var relevantPeople = Active.Map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators
var activeMapperIsCreator = Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')
var string = ''
@ -308,20 +307,23 @@ const InfoBox = {
updateNumbers: function() {
if (!Active.Map) return
var self = InfoBox
var mapper = Active.Mapper
const self = InfoBox
var relevantPeople = Active.Map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators
var contributors_class = ''
if (relevantPeople.length === 2) contributors_class = 'multiple mTwo'
else if (relevantPeople.length > 2) contributors_class = 'multiple'
let contributorsClass = ''
if (relevantPeople.length === 2) {
contributorsClass = 'multiple mTwo'
} else if (relevantPeople.length > 2) {
contributorsClass = 'multiple'
}
var contributors_image = self.userImageUrl
let contributorsImage = self.userImageUrl
if (relevantPeople.length > 0) {
// 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 .tip').html(self.createContributorList())
self.addTypeahead()
@ -390,8 +392,7 @@ const InfoBox = {
map.destroy()
Router.home()
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?")
}
}

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

@ -1,6 +1,7 @@
/* global $ */
import outdent from 'outdent'
import { find as _find } from 'lodash'
import Active from '../Active'
import AutoLayout from '../AutoLayout'
@ -29,8 +30,8 @@ const Map = {
var self = Map
$('#wrapper').mousedown(function(e) {
if(e.button === 1)return false;
});
if (e.button === 1) return false
})
$('.starMap').click(function() {
if ($(this).is('.starred')) self.unstar()
@ -62,7 +63,7 @@ const Map = {
setAccessRequest: function(requests, activeMapper) {
let className = 'isViewOnly '
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'
else if (request && !request.answered) className += 'sentRequest'
else if (request && request.answered && !request.approved) className += 'requestDenied'
@ -89,8 +90,7 @@ const Map = {
// add class to .wrapper for specifying whether you can edit the map
if (map.authorizeToEdit(mapper)) {
$('.wrapper').addClass('canEditMap')
}
else {
} else {
Map.setAccessRequest(data.requests, mapper)
}
@ -177,32 +177,32 @@ const Map = {
if (!Active.Map) return
$.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)
self.updateStar()
},
fork: function() {
GlobalUI.openLightbox('forkmap')
var nodes_data = '',
synapses_data = ''
var nodes_array = []
var synapses_array = []
let nodesData = ''
let synapsesData = ''
let nodesArray = []
let synapsesArray = []
// collect the unfiltered topics
Visualize.mGraph.graph.eachNode(function(n) {
// if the opacity is less than 1 then it's filtered
if (n.getData('alpha') === 1) {
var id = n.getData('topic').id
nodes_array.push(id)
var x, y
nodesArray.push(id)
let x, y
if (n.pos.x && n.pos.y) {
x = n.pos.x
y = n.pos.y
} else {
var x = Math.cos(n.pos.theta) * n.pos.rho
var y = Math.sin(n.pos.theta) * n.pos.rho
x = Math.cos(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
@ -212,18 +212,18 @@ const Map = {
var descNotFiltered = Filter.visible.synapses.indexOf(desc) > -1
// make sure that both topics are being added, otherwise, it
// doesn't make sense to add the synapse
var topicsNotFiltered = nodes_array.indexOf(synapse.get('topic1_id')) > -1
topicsNotFiltered = topicsNotFiltered && nodes_array.indexOf(synapse.get('topic2_id')) > -1
var topicsNotFiltered = nodesArray.indexOf(synapse.get('topic1_id')) > -1
topicsNotFiltered = topicsNotFiltered && nodesArray.indexOf(synapse.get('topic2_id')) > -1
if (descNotFiltered && topicsNotFiltered) {
synapses_array.push(synapse.id)
synapsesArray.push(synapse.id)
}
})
synapses_data = synapses_array.join()
nodes_data = nodes_data.slice(0, -1)
synapsesData = synapsesArray.join()
nodesData = nodesData.slice(0, -1)
GlobalUI.CreateMap.topicsToMap = nodes_data
GlobalUI.CreateMap.synapsesToMap = synapses_data
GlobalUI.CreateMap.topicsToMap = nodesData
GlobalUI.CreateMap.synapsesToMap = synapsesData
},
leavePrivateMap: function() {
var map = Active.Map
@ -233,7 +233,7 @@ const Map = {
GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
},
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.')
Active.Map.trigger('changeByOther')
},
@ -273,18 +273,18 @@ const Map = {
return this.size
}
canvas.scale = function(x, y) {
var px = this.scaleOffsetX * x,
py = this.scaleOffsetY * y
var dx = this.translateOffsetX * (x - 1) / px,
dy = this.translateOffsetY * (y - 1) / py
const px = this.scaleOffsetX * x
const py = this.scaleOffsetY * y
const dx = this.translateOffsetX * (x - 1) / px
const dy = this.translateOffsetY * (y - 1) / py
this.scaleOffsetX = px
this.scaleOffsetY = py
this.getCtx().scale(x, y)
this.translate(dx, dy)
}
canvas.translate = function(x, y) {
var sx = this.scaleOffsetX,
sy = this.scaleOffsetY
const sx = this.scaleOffsetX
const sy = this.scaleOffsetY
this.translateOffsetX += x * sx
this.translateOffsetY += y * sy
this.getCtx().translate(x, y)
@ -304,14 +304,14 @@ const Map = {
// pass true to avoid basing it on a selection
JIT.zoomExtents(null, canvas, true)
var c = canvas.canvas,
ctx = canvas.getCtx(),
scale = canvas.scaleOffsetX
const c = canvas.canvas
const ctx = canvas.getCtx()
const scale = canvas.scaleOffsetX
// draw a grey background
ctx.fillStyle = '#d8d9da'
var xPoint = (-(c.width / scale) / 2) - (canvas.translateOffsetX / scale),
yPoint = (-(c.height / scale) / 2) - (canvas.translateOffsetY / scale)
const xPoint = (-(c.width / scale) / 2) - (canvas.translateOffsetX / scale)
const yPoint = (-(c.height / scale) / 2) - (canvas.translateOffsetY / scale)
ctx.fillRect(xPoint, yPoint, c.width / scale, c.height / scale)
// draw the graph
@ -340,7 +340,7 @@ const Map = {
var today = new Date()
var dd = today.getDate()
var mm = today.getMonth() + 1; // January is 0!
var mm = today.getMonth() + 1 // January is 0!
var yyyy = today.getFullYear()
if (dd < 10) {
dd = '0' + dd
@ -359,7 +359,7 @@ const Map = {
GlobalUI.notifyUser(downloadMessage)
canvas.canvas.toBlob(imageBlob => {
const formData = new window.FormData();
const formData = new window.FormData()
formData.append('map[screenshot]', imageBlob, filename)
$.ajax({
type: 'PATCH',

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

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

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

@ -13,13 +13,13 @@ const PasteInput = {
// intercept dragged files
// see http://stackoverflow.com/questions/6756583
window.addEventListener("dragover", function(e) {
e = e || window.event;
e.preventDefault();
}, false);
window.addEventListener("drop", function(e) {
e = e || window.event;
e.preventDefault();
window.addEventListener('dragover', function(e) {
e = e || window.event
e.preventDefault()
}, false)
window.addEventListener('drop', function(e) {
e = e || window.event
e.preventDefault()
var coords = Util.pixelsToCoords(Visualize.mGraph, { x: e.clientX, y: e.clientY })
if (e.dataTransfer.files.length > 0) {
self.handleFile(e.dataTransfer.files[0], coords)
@ -32,7 +32,7 @@ const PasteInput = {
}
})
}
}, false);
}, false)
// allow pasting onto canvas (but don't break existing inputs/textareas)
$('body').bind('paste', function(e) {

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

@ -1,15 +1,11 @@
/* global $ */
import _ from 'lodash'
import SimpleWebRTC from 'simplewebrtc'
import SocketIoConnection from 'simplewebrtc/socketioconnection'
import Active from '../Active'
import DataModel from '../DataModel'
import GlobalUI from '../GlobalUI'
import JIT from '../JIT'
import Synapse from '../Synapse'
import Topic from '../Topic'
import Util from '../Util'
import Views from '../Views'
import Visualize from '../Visualize'
@ -67,7 +63,7 @@ import {
synapseUpdated,
synapseRemoved,
synapseDeleted,
mapUpdated,
mapUpdated
} from './receivable'
import {
@ -348,13 +344,12 @@ let Realtime = {
positionVideos: function() {
var self = Realtime
var videoIds = Object.keys(self.room.videos)
var numOfVideos = videoIds.length
var numOfVideosToPosition = _.filter(videoIds, function (id) {
return !self.room.videos[id].manuallyPositioned
}).length
// var numOfVideos = videoIds.length
// var numOfVideosToPosition = _.filter(videoIds, function(id) {
// return !self.room.videos[id].manuallyPositioned
// }).length
var screenHeight = $(document).height()
var screenWidth = $(document).width()
var topExtraPadding = 20
var topPadding = 30
var leftPadding = 30
@ -431,12 +426,7 @@ let Realtime = {
},
positionPeerIcon: function(id) {
var self = Realtime
var boundary = self.chatOpen ? '#wrapper' : document
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 pixels = self.limitPixelsToScreen(origPixels)
@ -448,12 +438,11 @@ let Realtime = {
if (origPixels.x !== pixels.x || origPixels.y !== pixels.y) {
var dy = origPixels.y - pixels.y // opposite
var dx = origPixels.x - pixels.x // adjacent
var ratio = dy / dx
var angle = Math.atan2(dy, dx)
$('#compassArrow' + id).show().css({
transform: 'rotate(' + angle + 'rad)',
'-webkit-transform': 'rotate(' + angle + 'rad)',
'-webkit-transform': 'rotate(' + angle + 'rad)'
})
if (dx > 0) {

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

@ -4,6 +4,8 @@
everthing in this file happens as a result of websocket events
*/
import { indexOf } from 'lodash'
import { JUNTO_UPDATED } from './events'
import Active from '../Active'
@ -31,7 +33,7 @@ export const synapseRemoved = self => data => {
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('synapses').splice(index, 1)
if (edge.getData('displayIndex')) {
@ -49,7 +51,6 @@ export const synapseDeleted = self => data => {
export const synapseCreated = self => data => {
var topic1, topic2, node1, node2, synapse, mapping, cancel, mapper
function waitThenRenderSynapse() {
if (synapse && mapping && mapper) {
topic1 = synapse.getTopic1()
@ -58,8 +59,7 @@ export const synapseCreated = self => data => {
node2 = topic2.get('node')
Synapse.renderSynapse(mapping, synapse, node1, node2, false)
}
else if (!cancel) {
} else if (!cancel) {
setTimeout(waitThenRenderSynapse, 10)
}
}
@ -115,8 +115,7 @@ export const topicCreated = self => data => {
function waitThenRenderTopic() {
if (topic && mapping && mapper) {
Topic.renderTopic(mapping, topic, false, false)
}
else if (!cancel) {
} else if (!cancel) {
setTimeout(waitThenRenderTopic, 10)
}
}
@ -168,11 +167,9 @@ export const mapUpdated = self => data => {
var canEditNow = model.authorizeToEdit(Active.Mapper)
if (idNow !== idBefore) {
Map.leavePrivateMap() // this means the map has been changed to private
}
else if (couldEditBefore && !canEditNow) {
} else if (couldEditBefore && !canEditNow) {
Map.cantEditNow()
}
else if (!couldEditBefore && canEditNow) {
} else if (!couldEditBefore && canEditNow) {
Map.canEditNow()
} else {
model.trigger('changeByOther')
@ -311,7 +308,7 @@ export const newMapper = self => data => {
}
export const callAccepted = self => userid => {
var username = self.mappersOnMap[userid].name
// const username = self.mappersOnMap[userid].name
GlobalUI.notifyUser('Conversation starting...')
self.joinCall()
self.room.chat.invitationAnswered(userid)

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

@ -1,3 +1,5 @@
/* global $ */
import Active from '../Active'
import GlobalUI from '../GlobalUI'

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

@ -93,7 +93,7 @@ const _Router = Backbone.Router.extend({
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').addClass('explorePage')

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

@ -17,7 +17,7 @@ const Synapse = {
// @param id = the id of the synapse to retrieve
get: function(id, callback = noOp) {
// 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({
url: '/synapses/' + id + '.json',
success: function(data) {
@ -29,8 +29,6 @@ const Synapse = {
},
renderSynapse: function(mapping, synapse, node1, node2, createNewInDB) {
var self = Synapse
var edgeOnViz
var newedge = synapse.createEdge(mapping)
@ -74,13 +72,13 @@ const Synapse = {
}
},
createSynapseLocally: function() {
var self = Synapse,
topic1,
topic2,
node1,
node2,
synapse,
mapping
var self = Synapse
let topic1
let topic2
let node1
let node2
let synapse
let mapping
$(document).trigger(Map.events.editedByActiveMapper)
@ -91,7 +89,7 @@ const Synapse = {
node2 = topic2.get('node')
var len = Selected.Nodes.length
if (len == 0) {
if (len === 0) {
topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
synapsesToCreate[0] = topic1.get('node')
} else if (len > 0) {
@ -104,13 +102,13 @@ const Synapse = {
synapse = new DataModel.Synapse({
desc: Create.newSynapse.description,
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)
mapping = new DataModel.Mapping({
mappable_type: 'Synapse',
mappable_id: synapse.cid,
mappable_id: synapse.cid
})
DataModel.Mappings.add(mapping)
@ -121,22 +119,18 @@ const Synapse = {
Create.newSynapse.hide()
},
getSynapseFromAutocomplete: function(id) {
var self = Synapse,
topic1,
topic2,
node1,
node2
var self = Synapse
self.get(id, synapse => {
var mapping = new DataModel.Mapping({
const mapping = new DataModel.Mapping({
mappable_type: 'Synapse',
mappable_id: synapse.id,
mappable_id: synapse.id
})
DataModel.Mappings.add(mapping)
topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
node1 = topic1.get('node')
topic2 = DataModel.Topics.get(Create.newSynapse.topic2id)
node2 = topic2.get('node')
const topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
const node1 = topic1.get('node')
const topic2 = DataModel.Topics.get(Create.newSynapse.topic2id)
const node2 = topic2.get('node')
Create.newSynapse.hide()
self.renderSynapse(mapping, synapse, node1, node2, true)
})

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

@ -18,20 +18,20 @@ const SynapseCard = {
Control.deselectEdge(edge)
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
// classes to make best_in_place happy
var edit_div = document.createElement('div')
edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>'
edit_div.setAttribute('id', 'edit_synapse')
var editDiv = document.createElement('div')
editDiv.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>'
editDiv.setAttribute('id', 'edit_synapse')
if (synapse.authorizeToEdit(Active.Mapper)) {
edit_div.className = 'permission canEdit'
edit_div.className += synapse.authorizePermissionChange(Active.Mapper) ? ' yourEdge' : ''
editDiv.className = 'permission canEdit'
editDiv.className += synapse.authorizePermissionChange(Active.Mapper) ? ' yourEdge' : ''
} else {
edit_div.className = 'permission cannotEdit'
editDiv.className = 'permission cannotEdit'
}
$('#wrapper').append(edit_div)
$('#wrapper').append(editDiv)
self.populateShowCard(edge, synapse)
@ -72,7 +72,7 @@ const SynapseCard = {
$('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
},
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,
// currently with Best_in_place it won't
@ -83,15 +83,15 @@ const SynapseCard = {
$('#edit_synapse_desc').attr('data-bip-object', 'synapse')
$('#edit_synapse_desc').attr('data-bip-attribute', 'desc')
$('#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-value', synapse.get('desc'))
$('#edit_synapse_desc').html(synapse.get('desc'))
// if edge data is blank or just whitespace, populate it with data_nil
if ($('#edit_synapse_desc').html().trim() == '') {
// if edge data is blank or just whitespace, populate it with dataNil
if ($('#edit_synapse_desc').html().trim() === '') {
if (synapse.authorizeToEdit(Active.Mapper)) {
$('#edit_synapse_desc').html(data_nil)
$('#edit_synapse_desc').html(dataNil)
} else {
$('#edit_synapse_desc').html('(no description)')
}
@ -105,7 +105,7 @@ const SynapseCard = {
})
$('#edit_synapse_desc').bind('ajax:success', function() {
var desc = $(this).html()
if (desc == data_nil) {
if (desc === dataNil) {
synapse.set('desc', '')
} else {
synapse.set('desc', desc)
@ -227,14 +227,16 @@ const SynapseCard = {
// determine which node is to the left and the right
// if directly in a line, top is left
let left
let right
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) {
var left = edge.nodeTo.getData('topic')
var right = edge.nodeFrom.getData('topic')
left = edge.nodeTo.getData('topic')
right = edge.nodeFrom.getData('topic')
} else {
var left = edge.nodeFrom.getData('topic')
var right = edge.nodeTo.getData('topic')
left = edge.nodeFrom.getData('topic')
right = edge.nodeTo.getData('topic')
}
/*
@ -243,17 +245,17 @@ const SynapseCard = {
* Else check the 'left' checkbox since the arrow is incoming.
*/
var directionCat = synapse.get('category'); // both, none, from-to
if (directionCat == 'from-to') {
var from_to = [synapse.get('topic1_id'), synapse.get('topic2_id')]
if (from_to[0] == left.id) {
var directionCat = synapse.get('category') // both, none, from-to
if (directionCat === 'from-to') {
var fromTo = [synapse.get('topic1_id'), synapse.get('topic2_id')]
if (fromTo[0] === left.id) {
// check left checkbox
$('#edit_synapse_left').addClass('checked')
} else {
// check right checkbox
$('#edit_synapse_right').addClass('checked')
}
} else if (directionCat == 'both') {
} else if (directionCat === 'both') {
// check both checkboxes
$('#edit_synapse_left').addClass('checked')
$('#edit_synapse_right').addClass('checked')

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

@ -25,7 +25,7 @@ const Topic = {
// @param id = the id of the topic to retrieve
get: function(id, callback = noOp) {
// 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({
url: '/topics/' + id + '.json',
success: function(data) {
@ -94,20 +94,20 @@ const Topic = {
Active.Topic = DataModel.Topics.get(nodeid)
}
},
fetchRelatives: function (nodes, metacode_id) {
fetchRelatives: function(nodes, metacodeId) {
var self = this
var node = $.isArray(nodes) ? nodes[0] : nodes
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_string = creators.join()
var creatorsString = creators.join()
var topic = node.getData('topic')
var successCallback;
var successCallback
successCallback = function(data) {
if (Visualize.mGraph.busy) {
// don't clash with centerOn
@ -150,12 +150,12 @@ const Topic = {
})
})
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 + '&' : ''
paramsString += 'network=' + topics_string + '&creators=' + creators_string
let paramsString = metacodeId ? 'metacode=' + metacodeId + '&' : ''
paramsString += 'network=' + topicsString + '&creators=' + creatorsString
$.ajax({
type: 'GET',
@ -168,13 +168,12 @@ const Topic = {
// opts is additional options in a hash
// TODO: move createNewInDB and permitCreateSynapseAfter into opts
renderTopic: function(mapping, topic, createNewInDB, permitCreateSynapseAfter, opts = {}) {
var self = Topic
var nodeOnViz, tempPos
var newnode = topic.createNode()
var midpoint = {}, pixelPos
var midpoint = {}
var pixelPos
if (!$.isEmptyObject(Visualize.mGraph.graph.nodes)) {
Visualize.mGraph.graph.addNode(newnode)
@ -315,7 +314,7 @@ const Topic = {
xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_id: topic.cid,
mappable_type: 'Topic',
mappable_type: 'Topic'
})
DataModel.Mappings.add(mapping)
@ -344,7 +343,7 @@ const Topic = {
xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_type: 'Topic',
mappable_id: topic.id,
mappable_id: topic.id
})
DataModel.Mappings.add(mapping)
@ -371,7 +370,7 @@ const Topic = {
xloc: Create.newTopic.x,
yloc: Create.newTopic.y,
mappable_id: topic.cid,
mappable_type: 'Topic',
mappable_type: 'Topic'
})
DataModel.Mappings.add(mapping)
@ -394,7 +393,7 @@ const Topic = {
xloc: nextCoords.x,
yloc: nextCoords.y,
mappable_type: 'Topic',
mappable_id: topic.id,
mappable_id: topic.id
})
DataModel.Mappings.add(mapping)
self.renderTopic(mapping, topic, true, true)

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

@ -63,8 +63,6 @@ const TopicCard = {
self.authorizedToEdit = false
},
embedlyCardRendered: function(iframe) {
var self = TopicCard
$('#embedlyLinkLoader').hide()
// means that the embedly call returned 404 not found
@ -93,15 +91,15 @@ const TopicCard = {
},
showLinkLoader: function() {
var loader = new CanvasLoader('embedlyLinkLoader')
loader.setColor('#4fb5c0'); // default is '#000000'
loader.setColor('#4fb5c0') // default is '#000000'
loader.setDiameter(28) // 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
},
showLink: function(topic) {
var e = embedly('card', document.getElementById('embedlyLink'))
if (!e && TopicCard.RAILS_ENV != 'development') {
if (!e && TopicCard.RAILS_ENV !== 'development') {
TopicCard.handleInvalidLink()
} else if (!e) {
$('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show()
@ -129,7 +127,7 @@ const TopicCard = {
var element = this
setTimeout(function() {
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)
if (text.slice(0, 7) !== 'http://' &&
text.slice(0, 8) !== 'https://' &&
@ -219,7 +217,6 @@ const TopicCard = {
var windowHeight = $(window).height()
var showcardTop = parseInt($('.showcard').css('top'))
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)
if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
$('.metacodeSelect').addClass('onBottomEdge')
@ -383,7 +380,7 @@ const TopicCard = {
var html = self.generateShowcardHTML.render(topicForTemplate)
if (topic.authorizeToEdit(Active.Mapper)) {
var perm = document.createElement('div')
let perm = document.createElement('div')
var string = 'permission canEdit'
if (topic.authorizePermissionChange(Active.Mapper)) string += ' yourTopic'
@ -391,7 +388,7 @@ const TopicCard = {
perm.innerHTML = html
showCard.appendChild(perm)
} else {
var perm = document.createElement('div')
let perm = document.createElement('div')
perm.className = 'permission cannotEdit'
perm.innerHTML = html
showCard.appendChild(perm)
@ -402,8 +399,6 @@ const TopicCard = {
generateShowcardHTML: null, // will be initialized into a Hogan template within init function
// generateShowcardHTML
buildObject: function(topic) {
var self = TopicCard
var nodeValues = {}
var authorized = topic.authorizeToEdit(Active.Mapper)
@ -438,18 +433,18 @@ const TopicCard = {
nodeValues.inmaps = ''
if (inmapsAr.length < 6) {
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>'
}
} else {
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>'
}
var extra = inmapsAr.length - 5
const extra = inmapsAr.length - 5
nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>'
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>'
}
}

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

@ -9,13 +9,13 @@ const Util = {
// you may copy this code but please keep the copyright notice as well
splitLine: function(st, n) {
var b = ''
var s = st ? st : ''
var s = st || ''
while (s.length > n) {
var c = s.substring(0, n)
var d = c.lastIndexOf(' ')
var e = c.lastIndexOf('\n')
if (e != -1) d = e
if (d == -1) d = n
if (e !== -1) d = e
if (d === -1) d = n
b += c.substring(0, d) + '\n'
s = s.substring(d + 1)
}
@ -31,9 +31,9 @@ const Util = {
},
decodeEntities: function(desc) {
var str, temp = document.createElement('p')
let temp = document.createElement('p')
temp.innerHTML = desc // browser handles the topics
str = temp.textContent || temp.innerText
let str = temp.textContent || temp.innerText
temp = null // delete the element
return str
}, // decodeEntities
@ -45,18 +45,17 @@ const Util = {
// Try using Visualize.mGraph
coordsToPixels: function(mGraph, coords) {
if (mGraph) {
var canvas = mGraph.canvas,
s = canvas.getSize(),
p = canvas.getPos(),
ox = canvas.translateOffsetX,
oy = canvas.translateOffsetY,
sx = canvas.scaleOffsetX,
sy = canvas.scaleOffsetY
var pixels = {
const canvas = mGraph.canvas
const s = canvas.getSize()
const p = canvas.getPos()
const ox = canvas.translateOffsetX
const oy = canvas.translateOffsetY
const sx = canvas.scaleOffsetX
const sy = canvas.scaleOffsetY
return {
x: (coords.x / (1 / sx)) + p.x + s.width / 2 + ox,
y: (coords.y / (1 / sy)) + p.y + s.height / 2 + oy
}
return pixels
} else {
return {
x: 0,
@ -67,26 +66,24 @@ const Util = {
// Try using Visualize.mGraph
pixelsToCoords: function(mGraph, pixels) {
var coords
if (mGraph) {
var canvas = mGraph.canvas,
s = canvas.getSize(),
p = canvas.getPos(),
ox = canvas.translateOffsetX,
oy = canvas.translateOffsetY,
sx = canvas.scaleOffsetX,
sy = canvas.scaleOffsetY
coords = {
const canvas = mGraph.canvas
const s = canvas.getSize()
const p = canvas.getPos()
const ox = canvas.translateOffsetX
const oy = canvas.translateOffsetY
const sx = canvas.scaleOffsetX
const sy = canvas.scaleOffsetY
return {
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 {
coords = {
return {
x: 0,
y: 0
}
}
return coords
},
getPastelColor: function(opts = {}) {
const rseed = opts.rseed === undefined ? Math.random() : opts.rseed
@ -107,9 +104,9 @@ const Util = {
lum = lum || 0
// convert to decimal and change luminosity
var rgb = '#', c, i
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i * 2, 2), 16)
var rgb = '#'
for (let i = 0; i < 3; i++) {
let c = parseInt(hex.substr(i * 2, 2), 16)
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16)
rgb += ('00' + c).substr(c.length)
}
@ -117,15 +114,15 @@ const Util = {
return rgb
},
openLink: function(url) {
var win = (url !== "") ? window.open(url, '_blank') : "empty";
var win = (url !== '') ? window.open(url, '_blank') : 'empty'
if (win) {
// Browser has allowed it to be opened
return true;
return true
} else {
// Browser has blocked it
alert('Please allow popups in order to open the link');
return false;
window.alert('Please allow popups in order to open the link')
return false
}
},
mdToHTML: text => {
@ -139,19 +136,19 @@ const Util = {
return {
scaleX: canvas.scaleOffsetX,
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) {
// 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
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
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)
}
}

19
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 Active from '../Active'
import DataModel from '../DataModel'
import GlobalUI from '../GlobalUI'
import Realtime from '../Realtime'
import Loading from '../Loading'
@ -35,15 +36,15 @@ const ExploreMaps = {
section: self.collection.id,
maps: self.collection,
juntoState: Realtime.juntoState,
moreToLoad: self.collection.page != 'loadedAll',
moreToLoad: self.collection.page !== 'loadedAll',
user: self.collection.id === 'mapper' ? self.mapper : null,
loadMore: self.loadMore,
pending: self.pending,
onStar: function(map) {
$.post('/maps/' + map.id + '/star')
map.set('star_count', map.get('star_count') + 1)
if (Metamaps.Stars) Metamaps.Stars.push({ user_id: Active.Mapper.id, map_id: map.id })
Metamaps.Maps.Starred.add(map)
if (DataModel.Stars) DataModel.Stars.push({ user_id: Active.Mapper.id, map_id: map.id })
DataModel.Maps.Starred.add(map)
GlobalUI.notifyUser('Map is now starred')
self.render()
},
@ -64,7 +65,7 @@ const ExploreMaps = {
},
loadMore: function() {
var self = ExploreMaps
if (self.collection.page != "loadedAll") {
if (self.collection.page !== 'loadedAll') {
self.collection.getMaps()
self.pending = true
}
@ -77,19 +78,19 @@ const ExploreMaps = {
self.fetchUserThenRender(cb)
} else {
self.render(cb)
Metamaps.Loading.hide()
Loading.hide()
}
},
handleError: function() {
console.log('error loading maps!') // TODO
Metamaps.Loading.hide()
Loading.hide()
},
fetchUserThenRender: function(cb) {
var self = ExploreMaps
if (self.mapper && self.mapper.id === self.collection.mapperId) {
self.render(cb)
return Metamaps.Loading.hide()
return Loading.hide()
}
// first load the mapper object and then call the render function
@ -98,11 +99,11 @@ const ExploreMaps = {
success: function(response) {
self.mapper = response
self.render(cb)
Metamaps.Loading.hide()
Loading.hide()
},
error: function() {
self.render(cb)
Metamaps.Loading.hide()
Loading.hide()
}
})
}

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

@ -14,8 +14,6 @@ import ChatView from './ChatView'
import VideoView from './VideoView'
const Room = function(opts = {}) {
var self = this
this.isActiveRoom = false
this.socket = opts.socket
this.webrtc = opts.webrtc
@ -112,21 +110,19 @@ Room.prototype.init = function () {
if (data.name === 'audio') {
v.audioStatus = false
}
else if (data.name === 'video') {
} 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]
const v = self.videos[data.id]
if (!v) return
if (data.name === 'audio') {
v.audioStatus = true
}
else if (data.name === 'video') {
} else if (data.name === 'video') {
v.videoStatus = true
v.$avatar.hide()
}
@ -144,19 +140,17 @@ Room.prototype.init = function () {
}
Room.prototype.addVideo = function(peer) {
var
id = this.webrtc.getDomId(peer),
video = attachMediaStream(peer.stream)
const id = this.webrtc.getDomId(peer)
const video = attachMediaStream(peer.stream)
var
v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username })
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
var id = typeof peer === 'string' ? peer : peer.id
if (this.videos[id]) {
this.videos[id].remove()
delete this.videos[id]
@ -170,7 +164,7 @@ Room.prototype.init = function () {
var m = new DataModel.Message({
message: data.message,
resource_id: Active.Map.id,
resource_type: "Map"
resource_type: 'Map'
})
m.save(null, {
success: function(model, response) {
@ -198,7 +192,7 @@ Room.prototype.init = function () {
* @static
*/
Room.events = {
newMessage: "Room:newMessage"
newMessage: 'Room:newMessage'
}
export default Room

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

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

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

@ -40,21 +40,20 @@ const Visualize = {
// prevent touch events on the canvas from default behaviour
$('#infovis-canvas').bind('touchend touchcancel', function(event) {
lastDist = 0
if (!self.mGraph.events.touchMoved && !Visualize.touchDragNode) TopicCard.hideCurrentCard()
self.mGraph.events.touched = self.mGraph.events.touchMoved = false
Visualize.touchDragNode = false
})
},
computePositions: function() {
var self = Visualize,
mapping
const self = Visualize
if (self.type == 'RGraph') {
var i, l, startPos, endPos, topic, synapse
if (self.type === 'RGraph') {
let i
let l
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.updateNode()
@ -64,7 +63,7 @@ const Visualize = {
l = edge.getData('synapseIDs').length
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.updateEdge()
}
@ -75,34 +74,32 @@ const Visualize = {
pos.setc(-200, -200)
})
self.mGraph.compute('end')
} else if (self.type == 'ForceDirected') {
var i, l, startPos, endPos, topic, synapse
} else if (self.type === 'ForceDirected') {
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.updateNode()
mapping = topic.getMapping()
const mapping = topic.getMapping()
n.eachAdjacency(function(edge) {
if (!edge.getData('init')) {
edge.setData('init', true)
l = edge.getData('synapseIDs').length
for (i = 0; i < l; i++) {
synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
const l = edge.getData('synapseIDs').length
for (let i = 0; i < l; i++) {
const synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
synapse.set({ edge: edge }, { silent: true })
synapse.updateEdge()
}
}
})
startPos = new $jit.Complex(0, 0)
endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'))
const startPos = new $jit.Complex(0, 0)
const endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'))
n.setPos(startPos, 'start')
n.setPos(endPos, 'end')
})
} else if (self.type == 'ForceDirected3D') {
} else if (self.type === 'ForceDirected3D') {
self.mGraph.compute()
}
},
@ -111,13 +108,13 @@ const Visualize = {
*
*/
render: function() {
var self = Visualize, RGraphSettings, FDSettings
const self = Visualize
if (self.type == 'RGraph') {
if (self.type === 'RGraph') {
// clear the previous canvas from #infovis
$('#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.EdgeTypes.implement(JIT.ForceDirected.edgeSettings)
@ -128,11 +125,11 @@ const Visualize = {
RGraphSettings.levelDistance = JIT.RGraph.levelDistance
self.mGraph = new $jit.RGraph(RGraphSettings)
} else if (self.type == 'ForceDirected') {
} else if (self.type === 'ForceDirected') {
// clear the previous canvas from #infovis
$('#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.EdgeTypes.implement(JIT.ForceDirected.edgeSettings)
@ -141,7 +138,7 @@ const Visualize = {
FDSettings.height = $('body').height()
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
$('#infovis').empty()
@ -152,8 +149,7 @@ const Visualize = {
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() {
Loading.hide()
@ -171,11 +167,11 @@ const Visualize = {
// compute positions and plot.
self.computePositions()
self.mGraph.busy = true
if (self.type == 'RGraph') {
if (self.type === 'RGraph') {
self.mGraph.fx.animate(JIT.RGraph.animate)
} else if (self.type == 'ForceDirected') {
} else if (self.type === 'ForceDirected') {
self.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (self.type == 'ForceDirected3D') {
} else if (self.type === 'ForceDirected3D') {
self.mGraph.animate(JIT.ForceDirected.animateFDLayout)
}
}
@ -184,21 +180,24 @@ const Visualize = {
// hold for a maximum of 80 passes, or 4 seconds of waiting time
var tries = 0
function hold() {
var unique = _.uniq(DataModel.Topics.models, function (metacode) { return metacode.get('metacode_id'); }),
requiredMetacodes = _.map(unique, function (metacode) { return metacode.get('metacode_id'); }),
loadedCount = 0
const unique = _.uniq(DataModel.Topics.models, function(metacode) { return metacode.get('metacode_id') })
const requiredMetacodes = _.map(unique, function(metacode) { return metacode.get('metacode_id') })
let loadedCount = 0
_.each(requiredMetacodes, function (metacode_id) {
var metacode = DataModel.Metacodes.get(metacode_id),
img = metacode ? metacode.get('image') : false
_.each(requiredMetacodes, function(metacodeId) {
const metacode = DataModel.Metacodes.get(metacodeId)
const img = metacode ? metacode.get('image') : false
if (img && (img.complete || (typeof img.naturalWidth !== 'undefined' && img.naturalWidth !== 0))) {
loadedCount += 1
}
})
if (loadedCount === requiredMetacodes.length || tries > 80) runAnimation()
else setTimeout(function () { tries++; hold() }, 50)
if (loadedCount === requiredMetacodes.length || tries > 80) {
runAnimation()
} else {
setTimeout(function() { tries++; hold() }, 50)
}
}
hold()
@ -210,8 +209,7 @@ const Visualize = {
if (m && window.location.pathname !== '/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)
}
}, 800)
@ -221,7 +219,7 @@ const Visualize = {
Visualize.mGraph.plot()
JIT.centerMap(Visualize.mGraph.canvas)
$('#infovis').empty()
},
}
}
export default Visualize

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

@ -70,10 +70,6 @@ Metamaps.Topic = Topic
Metamaps.TopicCard = TopicCard
Metamaps.Util = Util
Metamaps.Views = Views
Metamaps.Views.ExploreMaps = ExploreMaps
Metamaps.Views.ChatView = ChatView
Metamaps.Views.VideoView = VideoView
Metamaps.Views.Room = Room
Metamaps.Visualize = Visualize
document.addEventListener('DOMContentLoaded', function() {
@ -94,14 +90,14 @@ document.addEventListener('DOMContentLoaded', function () {
Views.ExploreMaps.setCollection(DataModel.Maps[capitalize])
if (Metamaps.currentPage === 'mapper') {
ExploreMaps.fetchUserThenRender()
Views.ExploreMaps.fetchUserThenRender()
} else {
ExploreMaps.render()
Views.ExploreMaps.render()
}
GlobalUI.showDiv('#explore')
} else if (Metamaps.currentSection === '' && Active.Mapper) {
ExploreMaps.setCollection(DataModel.Maps.Active)
ExploreMaps.render()
Views.ExploreMaps.setCollection(DataModel.Maps.Active)
Views.ExploreMaps.render()
GlobalUI.showDiv('#explore')
} else if (Active.Map || Active.Topic) {
Loading.show()

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

@ -87,10 +87,6 @@ class MapCard extends Component {
const hasMapper = hasMap && !hasConversation
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 d = map.get('desc')

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

@ -31,9 +31,9 @@ class Maps extends Component {
const { maps, user, currentUser } = this.props
const numCards = maps.length + (user || currentUser ? 1 : 0)
const mapSpaces = Math.floor(document.body.clientWidth / MAP_WIDTH)
const mapsWidth = document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT ?
document.body.clientWidth - MOBILE_VIEW_PADDING :
Math.min(MAX_COLUMNS, Math.min(numCards, mapSpaces)) * MAP_WIDTH
const mapsWidth = document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT
? document.body.clientWidth - MOBILE_VIEW_PADDING
: Math.min(MAX_COLUMNS, Math.min(numCards, mapSpaces)) * MAP_WIDTH
this.setState({ mapsWidth })
}
@ -46,7 +46,7 @@ class Maps extends Component {
}
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 mobile = document && document.body.clientWidth <= MOBILE_VIEW_BREAKPOINT

1
realtime/global.js
View file

@ -26,7 +26,6 @@ module.exports = function (io, store) {
})
io.on('connection', function(socket) {
io.sockets.emit(JUNTO_UPDATED, store.getState())
socket.on(JOIN_MAP, data => store.dispatch({ type: JOIN_MAP, payload: data }))

1
realtime/junto.js
View file

@ -23,7 +23,6 @@ const { mapRoom, userMapRoom } = require('./rooms')
module.exports = function(io, store) {
io.on('connection', function(socket) {
socket.on(CHECK_FOR_CALL, function(data) {
var callInProgress = Object.keys(io.nsps['/'].adapter.rooms[data.room] || {}).length
if (callInProgress) socket.emit(CALL_IN_PROGRESS)

1
realtime/map.js
View file

@ -26,7 +26,6 @@ const { mapRoom, userMapRoom } = require('./rooms')
module.exports = function(io, store) {
io.on('connection', function(socket) {
// this will ping everyone on a map that there's a person just joined the map
socket.on(JOIN_MAP, function(data) {
socket.mapid = data.mapid

13
realtime/realtime-server.js
View file

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

12
realtime/signal.js
View file

@ -5,9 +5,9 @@ const uuid = require('node-uuid')
function safeCb(cb) {
if (typeof cb === 'function') {
return cb;
return cb
} else {
return function () {};
return function() {}
}
}
@ -74,8 +74,8 @@ module.exports = function(io, stunservers, state) {
})
socket.on('create', function(name, cb) {
if (arguments.length == 2) {
cb = (typeof cb == 'function') ? cb : function () {}
if (arguments.length === 2) {
cb = (typeof cb === 'function') ? cb : function() {}
name = name || uuid()
} else {
cb = name
@ -111,8 +111,4 @@ module.exports = function(io, stunservers, state) {
})
return result
}
function socketsInRoom(name) {
return io.sockets.sockets(name).length
}
}