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

Merge pull request #707 from metamaps/feature/split-out-backbone

Browse source 
finish removing global Metamaps references from frontend code
This commit is contained in:
Devin Howard 2016-11-07 14:58:20 -05:00 committed by GitHub
commit bd4072f81c
60 changed files with 1423 additions and 1406 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/assets/javascripts/Metamaps.ServerData.js.erb Normal file
View file

@ -0,0 +1,18 @@
/* global Metamaps */
/* erb variables from rails */
Metamaps.ServerData = Metamaps.ServerData || {}
Metamaps.ServerData['junto_spinner_darkgrey.gif'] = '<%= asset_path('junto_spinner_darkgrey.gif') %>'
Metamaps.ServerData['user.png'] = '<%= asset_path('user.png') %>'
Metamaps.ServerData['icons/wildcard.png'] = '<%= asset_path('icons/wildcard.png') %>'
Metamaps.ServerData['topic_description_signifier.png'] = '<%= asset_path('topic_description_signifier.png') %>'
Metamaps.ServerData['topic_link_signifier.png'] = '<%= asset_path('topic_link_signifier.png') %>'
Metamaps.ServerData['synapse16.png'] = '<%= asset_path('synapse16.png') %>'
Metamaps.ServerData['sounds/MM_sounds.mp3'] = '<%= asset_path 'sounds/MM_sounds.mp3' %>'
Metamaps.ServerData['sounds/MM_sounds.ogg'] = '<%= asset_path 'sounds/MM_sounds.ogg' %>'
Metamaps.ServerData.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %>
Metamaps.ServerData.REALTIME_SERVER = '<%= ENV['REALTIME_SERVER'] %>'
Metamaps.ServerData.RAILS_ENV = '<%= ENV['RAILS_ENV'] %>'
Metamaps.ServerData.VERSION = '<%= METAMAPS_VERSION %>'
Metamaps.ServerData.BUILD = '<%= METAMAPS_BUILD %>'
Metamaps.ServerData.LAST_UPDATED = '<%= METAMAPS_LAST_UPDATED %>'

2
app/assets/javascripts/application.js
View file

@ -14,5 +14,5 @@
//= require jquery-ui
//= require jquery_ujs
//= require_directory ./lib
//= require ./src/Metamaps.Erb
//= require ./webpacked/metamaps.bundle
//= require ./Metamaps.ServerData

24
app/assets/javascripts/src/Metamaps.Erb.js.erb
View file

@ -1,24 +0,0 @@
/* global Metamaps */
/*
* Metamaps.Erb.js.erb
*/
/* erb variables from rails */
window.Metamaps = window.Metamaps || {}
Metamaps.Erb = {}
Metamaps.Erb['REALTIME_SERVER'] = '<%= ENV['REALTIME_SERVER'] %>'
Metamaps.Erb['RAILS_ENV'] = '<%= ENV['RAILS_ENV'] %>'
Metamaps.Erb['junto_spinner_darkgrey.gif'] = '<%= asset_path('junto_spinner_darkgrey.gif') %>'
Metamaps.Erb['user.png'] = '<%= asset_path('user.png') %>'
Metamaps.Erb['icons/wildcard.png'] = '<%= asset_path('icons/wildcard.png') %>'
Metamaps.Erb['topic_description_signifier.png'] = '<%= asset_path('topic_description_signifier.png') %>'
Metamaps.Erb['topic_link_signifier.png'] = '<%= asset_path('topic_link_signifier.png') %>'
Metamaps.Erb['synapse16.png'] = '<%= asset_path('synapse16.png') %>'
Metamaps.Erb['import-example.png'] = '<%= asset_path('import-example.png') %>'
Metamaps.Erb['sounds/MM_sounds.mp3'] = '<%= asset_path 'sounds/MM_sounds.mp3' %>'
Metamaps.Erb['sounds/MM_sounds.ogg'] = '<%= asset_path 'sounds/MM_sounds.ogg' %>'
Metamaps.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %>
Metamaps.VERSION = '<%= METAMAPS_VERSION %>'
Metamaps.BUILD = '<%= METAMAPS_BUILD %>'
Metamaps.LAST_UPDATED = '<%= METAMAPS_LAST_UPDATED %>'

4
app/views/explore/active.html.erb
View file

@ -5,11 +5,11 @@
# %>
<script>
Metamaps.Maps.Active = <%= @maps.to_json.html_safe %>;
Metamaps.currentPage = "active";
<% content_for :title, "Explore Active Maps | Metamaps" %>
<% content_for :mobile_title, "Recently Active" %>
Metamaps.currentSection = "explore";
Metamaps.currentPage = "active";
Metamaps.ServerData.Active = <%= @maps.to_json.html_safe %>;
Metamaps.GlobalUI.Search.focus();
</script>

4
app/views/explore/featured.html.erb
View file

@ -5,11 +5,11 @@
# %>
<script>
Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
Metamaps.currentPage = "featured";
<% content_for :title, "Explore Featured Maps | Metamaps" %>
<% content_for :mobile_title, "Featured Maps" %>
Metamaps.currentSection = "explore";
Metamaps.currentPage = "featured";
Metamaps.ServerData.Featured = <%= @maps.to_json.html_safe %>;
Metamaps.GlobalUI.Search.focus();
</script>

10
app/views/explore/mapper.html.erb
View file

@ -5,14 +5,14 @@
# %>
<script>
Metamaps.Maps.Mapper = {
models: <%= @maps.to_json.html_safe %>,
id: <%= params[:id] %>
};
Metamaps.currentPage = "mapper";
<% content_for :title, @user.name + " | Metamaps" %>
<% content_for :mobile_title, @user.name %>
Metamaps.currentSection = "explore";
Metamaps.currentPage = "mapper";
Metamaps.ServerData.Mapper = {
models: <%= @maps.to_json.html_safe %>,
id: <%= params[:id] %>
};
Metamaps.GlobalUI.Search.focus();
</script>

4
app/views/explore/mine.html.erb
View file

@ -5,11 +5,11 @@
# %>
<script>
Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
Metamaps.currentPage = "mine";
<% content_for :title, "Explore My Maps | Metamaps" %>
<% content_for :mobile_title, "My Maps" %>
Metamaps.currentPage = "mine";
Metamaps.currentSection = "explore";
Metamaps.ServerData.Mine = <%= @maps.to_json.html_safe %>;
Metamaps.GlobalUI.Search.focus();
</script>

4
app/views/explore/shared.html.erb
View file

@ -5,11 +5,11 @@
# %>
<script>
Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>;
Metamaps.currentPage = "shared";
<% content_for :title, "Explore Shared Maps | Metamaps" %>
<% content_for :mobile_title, "Shared With Me" %>
Metamaps.currentPage = "shared";
Metamaps.currentSection = "explore";
Metamaps.ServerData.Shared = <%= @maps.to_json.html_safe %>;
Metamaps.GlobalUI.Search.focus();
</script>

4
app/views/explore/starred.html.erb
View file

@ -5,11 +5,11 @@
# %>
<script>
Metamaps.Maps.Starred = <%= @maps.to_json.html_safe %>;
Metamaps.currentPage = "starred";
<% content_for :title, "Starred Maps | Metamaps" %>
<% content_for :mobile_title, "Starred Maps" %>
Metamaps.currentPage = "starred";
Metamaps.currentSection = "explore";
Metamaps.ServerData.Starred = <%= @maps.to_json.html_safe %>;
Metamaps.GlobalUI.Search.focus();
</script>

21
app/views/layouts/_foot.html.erb
View file

@ -2,28 +2,13 @@
<%= render :partial => 'layouts/templates' %>
<%= render :partial => 'shared/metacodeBgColors' %>
<script type="text/javascript" charset="utf-8">
// TODO move this into Metamaps.ServerData somehow
<% if current_user %>
Metamaps.Active.Mapper = <%= current_user.to_json.html_safe %>
Metamaps.ServerData.ActiveMapper = <%= current_user.to_json.html_safe %>
<% else %>
Metamaps.Active.Mapper = null;
Metamaps.ServerData.ActiveMapper = null
<% end %>
// TODO move this into frontend/
Metamaps.Loading = {
loader: new CanvasLoader('loading'),
hide: function () {
$('#loading').hide();
},
show: function () {
$('#loading').show();
}
};
Metamaps.Loading.loader.setColor('#4fb5c0'); // default is '#000000'
Metamaps.Loading.loader.setDiameter(28); // default is 40
Metamaps.Loading.loader.setDensity(41); // default is 40
Metamaps.Loading.loader.setRange(0.9); // default is 1.3
Metamaps.Loading.loader.show(); // Hidden by default
Metamaps.Loading.setup()
</script>
<%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>
</body>

22
app/views/layouts/_templates.html.erb
View file

@ -4,7 +4,6 @@
#%>
<div class="templates">
<script type="text/template" id="mapInfoBoxTemplate">
<div class="requestTitle">Click here to name this map!</div>
<div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
@ -161,7 +160,8 @@
<script type="text/template" id="topicAutocompleteTemplate">
<div>
<img class="autocompleteSection topicType" width="24" height="24" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
<img class="autocompleteSection topicType" width="24" height="24"
src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
<p class="autocompleteSection topicTitle">{{label}}</p>
<div class="expandTopicMetadata"></div>
<div class="topicMetadata">
@ -177,7 +177,6 @@
</div>
</script>
<script type="text/template" id="topicCardTemplate">
<div class="CardOnGraph {{hasAttachment}}" id="topic_{{id}}">
<span class="title">
@ -188,7 +187,10 @@
data-bip-attribute="name"
data-bip-activator="#titleActivator"
data-bip-value="{{name}}"
data-bip-type="textarea">{{name}}</span>
data-bip-type="textarea"
>
{{name}}
</span>
</div>
</span>
<div class="links">
@ -218,10 +220,18 @@
</a>
<div class="linkItem mapPerm {{mk_permission}}" title="{{permission}}"></div>
<div class="clearfloat"></div>
</div>
<div class="scroll">
<div class="desc">
<span class="best_in_place best_in_place_desc" data-bip-url="/topics/{{id}}" data-bip-object="topic" data-bip-nil="{{desc_nil}}" data-bip-attribute="desc" data-bip-type="textarea" data-bip-value="{{desc_markdown}}">{{{desc_html}}}</span>
<span class="best_in_place best_in_place_desc"
data-bip-url="/topics/{{id}}"
data-bip-object="topic"
data-bip-nil="{{desc_nil}}"
data-bip-attribute="desc"
data-bip-type="textarea"
data-bip-value="{{desc_markdown}}"
>
{{{desc_html}}}
</span>
<div class="clearfloat"></div>
</div>
</div>

5
app/views/main/home.html.erb
View file

@ -33,7 +33,8 @@
</div>
</div>
</div><!-- end yield -->
<script>
Metamaps.currentSection = "";
Metamaps.currentPage = "";
Metamaps.currentSection = ''
Metamaps.currentPage = ''
</script>

19
app/views/maps/show.html.erb
View file

@ -9,13 +9,14 @@
<script>
Metamaps.currentSection = "map";
Metamaps.currentPage = <%= @map.id.to_s %>;
Metamaps.Active.Map = <%= @map.to_json.html_safe %>;
Metamaps.Mappers = <%= @allmappers.to_json.html_safe %>;
Metamaps.Collaborators = <%= @allcollaborators.to_json.html_safe %>;
Metamaps.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
Metamaps.Mappings = <%= @allmappings.to_json.html_safe %>;
Metamaps.Messages = <%= @allmessages.to_json.html_safe %>;
Metamaps.Stars = <%= @allstars.to_json.html_safe %>;
Metamaps.Visualize.type = "ForceDirected";
Metamaps.ServerData = Metamaps.ServerData || {}
Metamaps.ServerData.ActiveMap = <%= @map.to_json.html_safe %>;
Metamaps.ServerData.Mappers = <%= @allmappers.to_json.html_safe %>;
Metamaps.ServerData.Collaborators = <%= @allcollaborators.to_json.html_safe %>;
Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>;
Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>;
Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>;
Metamaps.ServerData.VisualizeType = "ForceDirected";
</script>

4
app/views/shared/_switchmetacodes.html.erb
View file

@ -117,6 +117,6 @@
<div class="clearfloat"></div>
<script>
Metamaps.Create.selectedMetacodeSet = "metacodeset-<%= selectedSet %>";
Metamaps.Create.selectedMetacodeSetIndex = <%= index %>;
Metamaps.Create.selectedMetacodeSet = "metacodeset-<%= selectedSet %>"
Metamaps.Create.selectedMetacodeSetIndex = <%= index %>
</script>

29
app/views/topics/show.html.erb
View file

@ -1,27 +1,20 @@
<%#
#
# @file
# This shows a topic view. It is used.
# The first commented out section used to be a card at the top showing all
# info. Now we're moving towards most screens looking the same. The
# consequence of accessing data from this view is that you can't remove
# the topic that corresponds to the page you're on. Originally, accessing this
# page showed the topic with its neighbours arrayed around. Now it shows the
# same, but there's no cues to say which topic's page you're on. So when the
# map recenters on a new topic, it's like you're on that topic's page.
# Nice, but the URL and being unable to remove the root node still hamper that
# experience.
# This shows a topic and its siblings.
# URL: /topics/<topicid>
#
#%>
%>
<% content_for :title, @topic.name + " | Metamaps" %>
<% content_for :mobile_title, @topic.name %>
<script>
Metamaps.currentSection = "topic";
Metamaps.currentPage = <%= @topic.id.to_s %>;
Metamaps.Active.Topic = <%= @topic.to_json(user: current_user).html_safe %>;
Metamaps.Creators = <%= @allcreators.to_json.html_safe %>;
Metamaps.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>;
Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
Metamaps.Visualize.type = "RGraph";
Metamaps.currentSection = "topic"
Metamaps.currentPage = <%= @topic.id.to_s %>
Metamaps.ServerData = Metamaps.ServerData || {}
Metamaps.ServerData.ActiveTopic = <%= @topic.to_json(user: current_user).html_safe %>
Metamaps.ServerData.Creators = <%= @allcreators.to_json.html_safe %>
Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>
Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>
Metamaps.ServerData.VisualizeType = "RGraph"
</script>

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

@ -1,11 +1,11 @@
/* global $, CanvasLoader */
/*
* Metamaps.Erb
*/
const Account = {
init: function (serverData) {
Account.userIconUrl = serverData['user.png']
},
listenersInitialized: false,
userIconUrl: null,
initListeners: function () {
var self = Account
@ -25,24 +25,18 @@ const Account = {
if (!self.listenersInitialized) self.initListeners()
},
closeChangePicture: function () {
var self = Account
$('.userImageMenu').hide()
},
showLoading: function () {
var self = Account
var loader = new CanvasLoader('accountPageLoading')
loader.setColor('#4FC059'); // default is '#000000'
loader.setColor('#4FC059') // 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
$('#accountPageLoading').show()
},
showImagePreview: function () {
var self = Account
var file = $('#user_image')[0].files[0]
var reader = new window.FileReader()
@ -90,7 +84,7 @@ const Account = {
var self = Account
$('.userImageDiv canvas').remove()
$('.userImageDiv img').attr('src', window.Metamaps.Erb['user.png']).show()
$('.userImageDiv img').attr('src', self.userIconUrl).show()
$('.userImageMenu').hide()
var input = $('#user_image')

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

@ -1,7 +1,7 @@
const Active = {
Map: null,
Topic: null,
Mapper: null
};
Mapper: null,
Topic: null
}
export default Active

663
frontend/src/Metamaps/Backbone/index.js
View file

@ -1,663 +0,0 @@
/* global Metamaps, Backbone, $ */
import _ from 'lodash'
import Backbone from 'backbone'
Backbone.$ = window.$
import Active from '../Active'
import Filter from '../Filter'
import JIT from '../JIT'
import Map, { InfoBox } from '../Map'
import Mapper from '../Mapper'
import Realtime from '../Realtime'
import Synapse from '../Synapse'
import SynapseCard from '../SynapseCard'
import Topic from '../Topic'
import TopicCard from '../TopicCard'
import Visualize from '../Visualize'
/*
* Metamaps.Backbone.js.erb
*
* Dependencies:
* - Metamaps.Collaborators
* - Metamaps.Creators
* - Metamaps.Loading
* - Metamaps.Mappers
* - Metamaps.Mappings
* - Metamaps.Metacodes
* - Metamaps.Synapses
* - Metamaps.Topics
*/
const _Backbone = {}
_Backbone.Map = Backbone.Model.extend({
urlRoot: '/maps',
blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
save: function (key, val, options) {
var attrs
// Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') {
attrs = key
options = val
} else {
(attrs = {})[key] = val
}
var newOptions = options || {}
var s = newOptions.success
newOptions.success = function (model, response, opt) {
if (s) s(model, response, opt)
model.trigger('saved')
}
return Backbone.Model.prototype.save.call(this, attrs, newOptions)
},
initialize: function () {
this.on('changeByOther', this.updateView)
this.on('saved', this.savedEvent)
},
savedEvent: function () {
Realtime.updateMap(this)
},
authorizeToEdit: function (mapper) {
if (mapper && (
this.get('permission') === 'commons' ||
(this.get('collaborator_ids') || []).includes(mapper.get('id')) ||
this.get('user_id') === mapper.get('id'))) {
return true
} else {
return false
}
},
authorizePermissionChange: function (mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) {
return true
} else {
return false
}
},
getUser: function () {
return Mapper.get(this.get('user_id'))
},
updateView: function () {
var map = Active.Map
var isActiveMap = this.id === map.id
if (isActiveMap) {
InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'))
this.updateMapWrapper()
// mobile menu
$('#header_content').html(this.get('name'))
document.title = this.get('name') + ' | Metamaps'
}
},
updateMapWrapper: function () {
var map = Active.Map
var isActiveMap = this.id === map.id
var authorized = map && map.authorizeToEdit(Active.Mapper) ? 'canEditMap' : ''
var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : ''
if (isActiveMap) {
$('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap)
}
}
})
_Backbone.MapsCollection = Backbone.Collection.extend({
model: _Backbone.Map,
initialize: function (models, options) {
this.id = options.id
this.sortBy = options.sortBy
if (options.mapperId) {
this.mapperId = options.mapperId
}
// this.page represents the NEXT page to fetch
this.page = models.length > 0 ? (models.length < 20 ? 'loadedAll' : 2) : 1
},
url: function () {
if (!this.mapperId) {
return '/explore/' + this.id + '.json'
} else {
return '/explore/mapper/' + this.mapperId + '.json'
}
},
comparator: function (a, b) {
a = a.get(this.sortBy)
b = b.get(this.sortBy)
var temp
if (this.sortBy === 'name') {
a = a ? a.toLowerCase() : ''
b = b ? b.toLowerCase() : ''
} else {
// this is for updated_at and created_at
temp = a
a = b
b = temp
a = (new Date(a)).getTime()
b = (new Date(b)).getTime()
}
return a > b ? 1 : a < b ? -1 : 0
},
getMaps: function (cb) {
var self = this
Metamaps.Loading.show()
if (this.page !== 'loadedAll') {
var numBefore = this.length
this.fetch({
remove: false,
silent: true,
data: { page: this.page },
success: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well
if (collection.length - numBefore < 20) {
self.page = 'loadedAll'
} else {
self.page += 1
}
self.trigger('successOnFetch', cb)
},
error: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well
self.trigger('errorOnFetch')
}
})
} else {
self.trigger('successOnFetch', cb)
}
}
})
_Backbone.Message = Backbone.Model.extend({
urlRoot: '/messages',
blacklist: ['created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
prepareLiForFilter: function () {
/* var li = ''
* li += '<li data-id="' + this.id.toString() + '">'
* li += '<img src="' + this.get("image") + '" data-id="' + this.id.toString() + '"'
* li += ' alt="' + this.get('name') + '" />'
* li += '<p>' + this.get('name') + '</p></li>'
* return li
*/
}
})
_Backbone.MessageCollection = Backbone.Collection.extend({
model: _Backbone.Message,
url: '/messages'
})
_Backbone.Mapper = Backbone.Model.extend({
urlRoot: '/users',
blacklist: ['created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
prepareLiForFilter: function () {
var li = ''
li += '<li data-id="' + this.id.toString() + '">'
li += '<img src="' + this.get('image') + '" data-id="' + this.id.toString() + '"'
li += ' alt="' + this.get('name') + '" />'
li += '<p>' + this.get('name') + '</p></li>'
return li
}
})
_Backbone.MapperCollection = Backbone.Collection.extend({
model: _Backbone.Mapper,
url: '/users'
})
_Backbone.init = function () {
var self = _Backbone
self.Metacode = Backbone.Model.extend({
initialize: function () {
var image = new Image()
image.crossOrigin = 'Anonymous'
image.src = this.get('icon')
this.set('image', image)
},
prepareLiForFilter: function () {
var li = ''
li += '<li data-id="' + this.id.toString() + '">'
li += '<img src="' + this.get('icon') + '" data-id="' + this.id.toString() + '"'
li += ' alt="' + this.get('name') + '" />'
li += '<p>' + this.get('name').toLowerCase() + '</p></li>'
return li
}
})
self.MetacodeCollection = Backbone.Collection.extend({
model: this.Metacode,
url: '/metacodes',
comparator: function (a, b) {
a = a.get('name').toLowerCase()
b = b.get('name').toLowerCase()
return a > b ? 1 : a < b ? -1 : 0
}
})
self.Topic = Backbone.Model.extend({
urlRoot: '/topics',
blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
save: function (key, val, options) {
var attrs
// Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') {
attrs = key
options = val
} else {
(attrs = {})[key] = val
}
var newOptions = options || {}
var s = newOptions.success
var permBefore = this.get('permission')
newOptions.success = function (model, response, opt) {
if (s) s(model, response, opt)
model.trigger('saved')
model.set('calculated_permission', model.get('permission'))
if (permBefore === 'private' && model.get('permission') !== 'private') {
model.trigger('noLongerPrivate')
}
else if (permBefore !== 'private' && model.get('permission') === 'private') {
model.trigger('nowPrivate')
}
}
return Backbone.Model.prototype.save.call(this, attrs, newOptions)
},
initialize: function () {
if (this.isNew()) {
this.set({
'user_id': Active.Mapper.id,
'desc': this.get('desc') || '',
'link': this.get('link') || '',
'permission': Active.Map ? Active.Map.get('permission') : 'commons'
})
}
this.on('changeByOther', this.updateCardView)
this.on('change', this.updateNodeView)
this.on('saved', this.savedEvent)
this.on('nowPrivate', function () {
var removeTopicData = {
mappableid: this.id
}
$(document).trigger(JIT.events.removeTopic, [removeTopicData])
})
this.on('noLongerPrivate', function () {
var newTopicData = {
mappingid: this.getMapping().id,
mappableid: this.id
}
$(document).trigger(JIT.events.newTopic, [newTopicData])
})
this.on('change:metacode_id', Filter.checkMetacodes, this)
},
authorizeToEdit: function (mapper) {
if (mapper &&
(this.get('user_id') === mapper.get('id') ||
this.get('calculated_permission') === 'commons' ||
this.get('collaborator_ids').includes(mapper.get('id')))) {
return true
} else {
return false
}
},
authorizePermissionChange: function (mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) return true
else return false
},
getDate: function () {},
getMetacode: function () {
return Metamaps.Metacodes.get(this.get('metacode_id'))
},
getMapping: function () {
if (!Active.Map) return false
return Metamaps.Mappings.findWhere({
map_id: Active.Map.id,
mappable_type: 'Topic',
mappable_id: this.isNew() ? this.cid : this.id
})
},
createNode: function () {
var mapping
var node = {
adjacencies: [],
id: this.isNew() ? this.cid : this.id,
name: this.get('name')
}
if (Active.Map) {
mapping = this.getMapping()
node.data = {
$mapping: null,
$mappingID: mapping.id
}
}
return node
},
updateNode: function () {
var mapping
var node = this.get('node')
node.setData('topic', this)
if (Active.Map) {
mapping = this.getMapping()
node.setData('mapping', mapping)
}
return node
},
savedEvent: function () {
Realtime.updateTopic(this)
},
updateViews: function () {
var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node')
// update topic card, if this topic is the one open there
if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
TopicCard.showCard(node)
}
// update the node on the map
if (onPageWithTopicCard && node) {
node.name = this.get('name')
Visualize.mGraph.plot()
}
},
updateCardView: function () {
var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node')
// update topic card, if this topic is the one open there
if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
TopicCard.showCard(node)
}
},
updateNodeView: function () {
var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node')
// update the node on the map
if (onPageWithTopicCard && node) {
node.name = this.get('name')
Visualize.mGraph.plot()
}
}
})
self.TopicCollection = Backbone.Collection.extend({
model: self.Topic,
url: '/topics'
})
self.Synapse = Backbone.Model.extend({
urlRoot: '/synapses',
blacklist: ['edge', 'created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
save: function (key, val, options) {
var attrs
// Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') {
attrs = key
options = val
} else {
(attrs = {})[key] = val
}
var newOptions = options || {}
var s = newOptions.success
var permBefore = this.get('permission')
newOptions.success = function (model, response, opt) {
if (s) s(model, response, opt)
model.trigger('saved')
if (permBefore === 'private' && model.get('permission') !== 'private') {
model.trigger('noLongerPrivate')
}
else if (permBefore !== 'private' && model.get('permission') === 'private') {
model.trigger('nowPrivate')
}
}
return Backbone.Model.prototype.save.call(this, attrs, newOptions)
},
initialize: function () {
if (this.isNew()) {
this.set({
'user_id': Active.Mapper.id,
'permission': Active.Map ? Active.Map.get('permission') : 'commons',
'category': 'from-to'
})
}
this.on('changeByOther', this.updateCardView)
this.on('change', this.updateEdgeView)
this.on('saved', this.savedEvent)
this.on('noLongerPrivate', function () {
var newSynapseData = {
mappingid: this.getMapping().id,
mappableid: this.id
}
$(document).trigger(JIT.events.newSynapse, [newSynapseData])
})
this.on('nowPrivate', function () {
$(document).trigger(JIT.events.removeSynapse, [{
mappableid: this.id
}])
})
this.on('change:desc', Filter.checkSynapses, this)
},
prepareLiForFilter: function () {
var li = ''
li += '<li data-id="' + this.get('desc') + '">'
li += '<img src="' + Metamaps.Erb['synapse16.png'] + '"'
li += ' alt="synapse icon" />'
li += '<p>' + this.get('desc') + '</p></li>'
return li
},
authorizeToEdit: function (mapper) {
if (mapper && (this.get('calculated_permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || this.get('user_id') === mapper.get('id'))) return true
else return false
},
authorizePermissionChange: function (mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) return true
else return false
},
getTopic1: function () {
return Metamaps.Topics.get(this.get('topic1_id'))
},
getTopic2: function () {
return Metamaps.Topics.get(this.get('topic2_id'))
},
getDirection: function () {
var t1 = this.getTopic1(),
t2 = this.getTopic2()
return t1 && t2 ? [
t1.get('node').id,
t2.get('node').id
] : false
},
getMapping: function () {
if (!Active.Map) return false
return Metamaps.Mappings.findWhere({
map_id: Active.Map.id,
mappable_type: 'Synapse',
mappable_id: this.isNew() ? this.cid : this.id
})
},
createEdge: function (providedMapping) {
var mapping, mappingID
var synapseID = this.isNew() ? this.cid : this.id
var edge = {
nodeFrom: this.get('topic1_id'),
nodeTo: this.get('topic2_id'),
data: {
$synapses: [],
$synapseIDs: [synapseID],
}
}
if (Active.Map) {
mapping = providedMapping || this.getMapping()
mappingID = mapping.isNew() ? mapping.cid : mapping.id
edge.data.$mappings = []
edge.data.$mappingIDs = [mappingID]
}
return edge
},
updateEdge: function () {
var mapping
var edge = this.get('edge')
edge.getData('synapses').push(this)
if (Active.Map) {
mapping = this.getMapping()
edge.getData('mappings').push(mapping)
}
return edge
},
savedEvent: function () {
Realtime.updateSynapse(this)
},
updateViews: function () {
this.updateCardView()
this.updateEdgeView()
},
updateCardView: function () {
var onPageWithSynapseCard = Active.Map || Active.Topic
var edge = this.get('edge')
// update synapse card, if this synapse is the one open there
if (onPageWithSynapseCard && edge == SynapseCard.openSynapseCard) {
SynapseCard.showCard(edge)
}
},
updateEdgeView: function () {
var onPageWithSynapseCard = Active.Map || Active.Topic
var edge = this.get('edge')
// update the edge on the map
if (onPageWithSynapseCard && edge) {
Visualize.mGraph.plot()
}
}
})
self.SynapseCollection = Backbone.Collection.extend({
model: self.Synapse,
url: '/synapses'
})
self.Mapping = Backbone.Model.extend({
urlRoot: '/mappings',
blacklist: ['created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
initialize: function () {
if (this.isNew()) {
this.set({
'user_id': Active.Mapper.id,
'map_id': Active.Map ? Active.Map.id : null
})
}
},
getMap: function () {
return Map.get(this.get('map_id'))
},
getTopic: function () {
if (this.get('mappable_type') === 'Topic') return Topic.get(this.get('mappable_id'))
else return false
},
getSynapse: function () {
if (this.get('mappable_type') === 'Synapse') return Synapse.get(this.get('mappable_id'))
else return false
}
})
self.MappingCollection = Backbone.Collection.extend({
model: self.Mapping,
url: '/mappings'
})
Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection()
Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection()
Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection()
Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection()
Metamaps.Collaborators = Metamaps.Collaborators ? new self.MapperCollection(Metamaps.Collaborators) : new self.MapperCollection()
// this is for topic view
Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection()
if (Active.Map) {
Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection()
Active.Map = new self.Map(Active.Map)
}
if (Active.Topic) Active.Topic = new self.Topic(Active.Topic)
// attach collection event listeners
self.attachCollectionEvents = function () {
Metamaps.Topics.on('add remove', function (topic) {
InfoBox.updateNumbers()
Filter.checkMetacodes()
Filter.checkMappers()
})
Metamaps.Synapses.on('add remove', function (synapse) {
InfoBox.updateNumbers()
Filter.checkSynapses()
Filter.checkMappers()
})
if (Active.Map) {
Metamaps.Mappings.on('add remove', function (mapping) {
InfoBox.updateNumbers()
Filter.checkSynapses()
Filter.checkMetacodes()
Filter.checkMappers()
})
}
}
self.attachCollectionEvents()
}; // end _Backbone.init
export default _Backbone

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

@ -1,9 +1,10 @@
/* global Metamaps, $ */
/* global $ */
import _ from 'lodash'
import outdent from 'outdent'
import Active from './Active'
import DataModel from './DataModel'
import Filter from './Filter'
import GlobalUI from './GlobalUI'
import JIT from './JIT'
@ -12,16 +13,6 @@ import Selected from './Selected'
import Settings from './Settings'
import Visualize from './Visualize'
/*
* Metamaps.Control.js
*
* Dependencies:
* - Metamaps.Mappings
* - Metamaps.Metacodes
* - Metamaps.Synapses
* - Metamaps.Topics
*/
const Control = {
init: function () {},
selectNode: function (node, e) {
@ -72,7 +63,7 @@ const Control = {
Control.deleteSelectedNodes()
}
if (Metamaps.Topics.length === 0) {
if (DataModel.Topics.length === 0) {
GlobalUI.showDiv('#instructions')
}
},
@ -110,7 +101,7 @@ const Control = {
var mappableid = topic.id
var mapping = node.getData('mapping')
topic.destroy()
Metamaps.Mappings.remove(mapping)
DataModel.Mappings.remove(mapping)
$(document).trigger(JIT.events.deleteTopic, [{
mappableid: mappableid
}])
@ -127,7 +118,7 @@ const Control = {
})
_.each(nodeids, function(nodeid) {
if (Active.Topic.id !== nodeid) {
Metamaps.Topics.remove(nodeid)
DataModel.Topics.remove(nodeid)
Control.hideNode(nodeid)
}
})
@ -165,7 +156,7 @@ const Control = {
var mappableid = topic.id
var mapping = node.getData('mapping')
mapping.destroy()
Metamaps.Topics.remove(topic)
DataModel.Topics.remove(topic)
$(document).trigger(JIT.events.removeTopic, [{
mappableid: mappableid
}])
@ -293,7 +284,7 @@ const Control = {
synapse.destroy()
// the server will destroy the mapping, we just need to remove it here
Metamaps.Mappings.remove(mapping)
DataModel.Mappings.remove(mapping)
edge.getData('mappings').splice(index, 1)
edge.getData('synapses').splice(index, 1)
if (edge.getData('displayIndex')) {
@ -348,7 +339,7 @@ const Control = {
var mappableid = synapse.id
mapping.destroy()
Metamaps.Synapses.remove(synapse)
DataModel.Synapses.remove(synapse)
edge.getData('mappings').splice(index, 1)
edge.getData('synapses').splice(index, 1)
@ -432,7 +423,7 @@ const Control = {
GlobalUI.notifyUser('Working...')
var metacode = Metamaps.Metacodes.get(metacode_id)
var metacode = DataModel.Metacodes.get(metacode_id)
// variables to keep track of how many nodes and synapses you had the ability to change the permission of
var nCount = 0

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

@ -1,5 +1,6 @@
/* global Metamaps, $, Hogan, Bloodhound */
/* global $, Hogan, Bloodhound */
import DataModel from './DataModel'
import Mouse from './Mouse'
import Selected from './Selected'
import Synapse from './Synapse'
@ -7,15 +8,6 @@ import Topic from './Topic'
import Visualize from './Visualize'
import GlobalUI from './GlobalUI'
/*
* Metamaps.Create.js
*
* Dependencies:
* - Metamaps.Backbone
* - Metamaps.Metacodes
* - Metamaps.Topics
*/
const Create = {
isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
selectedMetacodeSet: null,
@ -59,7 +51,7 @@ const Create = {
}
var codesToSwitchToIds
var metacodeModels = new Metamaps.Backbone.MetacodeCollection()
var metacodeModels = new DataModel.MetacodeCollection()
Create.selectedMetacodeSetIndex = index
Create.selectedMetacodeSet = 'metacodeset-' + set
@ -80,7 +72,7 @@ const Create = {
// sort by name
for (var i = 0; i < codesToSwitchToIds.length; i++) {
metacodeModels.add(Metamaps.Metacodes.get(codesToSwitchToIds[i]))
metacodeModels.add(DataModel.Metacodes.get(codesToSwitchToIds[i]))
}
metacodeModels.sort()
@ -243,7 +235,7 @@ const Create = {
$('.pinCarousel').removeClass('isPinned')
Create.newTopic.pinned = false
}
if (Metamaps.Topics.length === 0) {
if (DataModel.Topics.length === 0) {
GlobalUI.showDiv('#instructions')
}
Create.newTopic.beingCreated = false

92
frontend/src/Metamaps/DataModel/Map.js Normal file
View file

@ -0,0 +1,92 @@
/* global $ */
import _ from 'lodash'
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Active from '../Active'
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'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
save: function (key, val, options) {
var attrs
// Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') {
attrs = key
options = val
} else {
(attrs = {})[key] = val
}
var newOptions = options || {}
var s = newOptions.success
newOptions.success = function (model, response, opt) {
if (s) s(model, response, opt)
model.trigger('saved')
}
return Backbone.Model.prototype.save.call(this, attrs, newOptions)
},
initialize: function () {
this.on('changeByOther', this.updateView)
this.on('saved', this.savedEvent)
},
savedEvent: function () {
Realtime.updateMap(this)
},
authorizeToEdit: function (mapper) {
if (mapper && (
this.get('permission') === 'commons' ||
(this.get('collaborator_ids') || []).includes(mapper.get('id')) ||
this.get('user_id') === mapper.get('id'))) {
return true
} else {
return false
}
},
authorizePermissionChange: function (mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) {
return true
} else {
return false
}
},
getUser: function () {
return Mapper.get(this.get('user_id'))
},
updateView: function () {
var map = Active.Map
var isActiveMap = this.id === map.id
if (isActiveMap) {
InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'))
this.updateMapWrapper()
// mobile menu
$('#header_content').html(this.get('name'))
document.title = this.get('name') + ' | Metamaps'
}
},
updateMapWrapper: function () {
var map = Active.Map
var isActiveMap = this.id === map.id
var authorized = map && map.authorizeToEdit(Active.Mapper) ? 'canEditMap' : ''
var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : ''
if (isActiveMap) {
$('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap)
}
}
})
export default Map

76
frontend/src/Metamaps/DataModel/MapCollection.js Normal file
View file

@ -0,0 +1,76 @@
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Loading from '../Loading'
import Map from './Map'
const MapCollection = Backbone.Collection.extend({
model: Map,
initialize: function (models, options) {
this.id = options.id
this.sortBy = options.sortBy
if (options.mapperId) {
this.mapperId = options.mapperId
}
// this.page represents the NEXT page to fetch
this.page = models.length > 0 ? (models.length < 20 ? 'loadedAll' : 2) : 1
},
url: function () {
if (!this.mapperId) {
return '/explore/' + this.id + '.json'
} else {
return '/explore/mapper/' + this.mapperId + '.json'
}
},
comparator: function (a, b) {
a = a.get(this.sortBy)
b = b.get(this.sortBy)
var temp
if (this.sortBy === 'name') {
a = a ? a.toLowerCase() : ''
b = b ? b.toLowerCase() : ''
} else {
// this is for updated_at and created_at
temp = a
a = b
b = temp
a = (new Date(a)).getTime()
b = (new Date(b)).getTime()
}
return a > b ? 1 : a < b ? -1 : 0
},
getMaps: function (cb) {
var self = this
Loading.show()
if (this.page !== 'loadedAll') {
var numBefore = this.length
this.fetch({
remove: false,
silent: true,
data: { page: this.page },
success: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well
if (collection.length - numBefore < 20) {
self.page = 'loadedAll'
} else {
self.page += 1
}
self.trigger('successOnFetch', cb)
},
error: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well
self.trigger('errorOnFetch')
}
})
} else {
self.trigger('successOnFetch', cb)
}
}
})
export default MapCollection

21
frontend/src/Metamaps/DataModel/Mapper.js Normal file
View file

@ -0,0 +1,21 @@
import _ from 'lodash'
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import outdent from 'outdent'
const Mapper = Backbone.Model.extend({
urlRoot: '/users',
blacklist: ['created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
prepareLiForFilter: function () {
return outdent`
<li data-id="${this.id}">
<img src="${this.get('image')}" data-id="${this.id}" alt="${this.get('name')}" />
<p>${this.get('name')}</p>
</li>`
}
})
export default Mapper

11
frontend/src/Metamaps/DataModel/MapperCollection.js Normal file
View file

@ -0,0 +1,11 @@
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Mapper from './Mapper'
const MapperCollection = Backbone.Collection.extend({
model: Mapper,
url: '/users'
})
export default MapperCollection

37
frontend/src/Metamaps/DataModel/Mapping.js Normal file
View file

@ -0,0 +1,37 @@
import _ from 'lodash'
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Active from '../Active'
import Map from '../Map'
import Synapse from '../Synapse'
import Topic from '../Topic'
const Mapping = Backbone.Model.extend({
urlRoot: '/mappings',
blacklist: ['created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
initialize: function () {
if (this.isNew()) {
this.set({
'user_id': Active.Mapper.id,
'map_id': Active.Map ? Active.Map.id : null
})
}
},
getMap: function () {
return Map.get(this.get('map_id'))
},
getTopic: function () {
if (this.get('mappable_type') !== 'Topic') return false
return Topic.get(this.get('mappable_id'))
},
getSynapse: function () {
if (this.get('mappable_type') !== 'Synapse') return false
return Synapse.get(this.get('mappable_id'))
}
})
export default Mapping

11
frontend/src/Metamaps/DataModel/MappingCollection.js Normal file
View file

@ -0,0 +1,11 @@
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Mapping from './Mapping'
const MappingCollection = Backbone.Collection.extend({
model: Mapping,
url: '/mappings'
})
export default MappingCollection

13
frontend/src/Metamaps/DataModel/Message.js Normal file
View file

@ -0,0 +1,13 @@
import _ from 'lodash'
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
const Message = Backbone.Model.extend({
urlRoot: '/messages',
blacklist: ['created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
}
})
export default Message

11
frontend/src/Metamaps/DataModel/MessageCollection.js Normal file
View file

@ -0,0 +1,11 @@
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Message from './Message'
const MessageCollection = Backbone.Collection.extend({
model: Message,
url: '/messages'
})
export default MessageCollection

21
frontend/src/Metamaps/DataModel/Metacode.js Normal file
View file

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

16
frontend/src/Metamaps/DataModel/MetacodeCollection.js Normal file
View file

@ -0,0 +1,16 @@
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Metacode from './Metacode'
const MetacodeCollection = Backbone.Collection.extend({
model: Metacode,
url: '/metacodes',
comparator: function (a, b) {
a = a.get('name').toLowerCase()
b = b.get('name').toLowerCase()
return a > b ? 1 : a < b ? -1 : 0
}
})
export default MetacodeCollection

179
frontend/src/Metamaps/DataModel/Synapse.js Normal file
View file

@ -0,0 +1,179 @@
/* global $ */
import _ from 'lodash'
import outdent from 'outdent'
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Active from '../Active'
import Filter from '../Filter'
import JIT from '../JIT'
import Realtime from '../Realtime'
import SynapseCard from '../SynapseCard'
import Visualize from '../Visualize'
import DataModel from './index'
const Synapse = Backbone.Model.extend({
urlRoot: '/synapses',
blacklist: ['edge', 'created_at', 'updated_at'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
save: function (key, val, options) {
var attrs
// Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') {
attrs = key
options = val
} else {
(attrs = {})[key] = val
}
var newOptions = options || {}
var s = newOptions.success
var permBefore = this.get('permission')
newOptions.success = function (model, response, opt) {
if (s) s(model, response, opt)
model.trigger('saved')
if (permBefore === 'private' && model.get('permission') !== 'private') {
model.trigger('noLongerPrivate')
} else if (permBefore !== 'private' && model.get('permission') === 'private') {
model.trigger('nowPrivate')
}
}
return Backbone.Model.prototype.save.call(this, attrs, newOptions)
},
initialize: function () {
if (this.isNew()) {
this.set({
'user_id': Active.Mapper.id,
'permission': Active.Map ? Active.Map.get('permission') : 'commons',
'category': 'from-to'
})
}
this.on('changeByOther', this.updateCardView)
this.on('change', this.updateEdgeView)
this.on('saved', this.savedEvent)
this.on('noLongerPrivate', function () {
var newSynapseData = {
mappingid: this.getMapping().id,
mappableid: this.id
}
$(document).trigger(JIT.events.newSynapse, [newSynapseData])
})
this.on('nowPrivate', function () {
$(document).trigger(JIT.events.removeSynapse, [{
mappableid: this.id
}])
})
this.on('change:desc', Filter.checkSynapses, this)
},
prepareLiForFilter: function () {
return outdent`
<li data-id="${this.get('desc')}">
<img src="${DataModel.synapseIconUrl}" alt="synapse icon" />
<p>${this.get('desc')}</p>
</li>`
},
authorizeToEdit: function (mapper) {
if (mapper && (this.get('calculated_permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || this.get('user_id') === mapper.get('id'))) return true
else return false
},
authorizePermissionChange: function (mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) return true
else return false
},
getTopic1: function () {
return DataModel.Topics.get(this.get('topic1_id'))
},
getTopic2: function () {
return DataModel.Topics.get(this.get('topic2_id'))
},
getDirection: function () {
var t1 = this.getTopic1()
var t2 = this.getTopic2()
return t1 && t2 ? [
t1.get('node').id,
t2.get('node').id
] : false
},
getMapping: function () {
if (!Active.Map) return false
return DataModel.Mappings.findWhere({
map_id: Active.Map.id,
mappable_type: 'Synapse',
mappable_id: this.isNew() ? this.cid : this.id
})
},
createEdge: function (providedMapping) {
var mapping, mappingID
var synapseID = this.isNew() ? this.cid : this.id
var edge = {
nodeFrom: this.get('topic1_id'),
nodeTo: this.get('topic2_id'),
data: {
$synapses: [],
$synapseIDs: [synapseID]
}
}
if (Active.Map) {
mapping = providedMapping || this.getMapping()
mappingID = mapping.isNew() ? mapping.cid : mapping.id
edge.data.$mappings = []
edge.data.$mappingIDs = [mappingID]
}
return edge
},
updateEdge: function () {
var mapping
var edge = this.get('edge')
edge.getData('synapses').push(this)
if (Active.Map) {
mapping = this.getMapping()
edge.getData('mappings').push(mapping)
}
return edge
},
savedEvent: function () {
Realtime.updateSynapse(this)
},
updateViews: function () {
this.updateCardView()
this.updateEdgeView()
},
updateCardView: function () {
var onPageWithSynapseCard = Active.Map || Active.Topic
var edge = this.get('edge')
// update synapse card, if this synapse is the one open there
if (onPageWithSynapseCard && edge === SynapseCard.openSynapseCard) {
SynapseCard.showCard(edge)
}
},
updateEdgeView: function () {
var onPageWithSynapseCard = Active.Map || Active.Topic
var edge = this.get('edge')
// update the edge on the map
if (onPageWithSynapseCard && edge) {
Visualize.mGraph.plot()
}
}
})
export default Synapse

11
frontend/src/Metamaps/DataModel/SynapseCollection.js Normal file
View file

@ -0,0 +1,11 @@
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Synapse from './Synapse'
const SynapseCollection = Backbone.Collection.extend({
model: Synapse,
url: '/synapses'
})
export default SynapseCollection

176
frontend/src/Metamaps/DataModel/Topic.js Normal file
View file

@ -0,0 +1,176 @@
/* global $ */
import _ from 'lodash'
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Active from '../Active'
import Filter from '../Filter'
import JIT from '../JIT'
import Realtime from '../Realtime'
import TopicCard from '../TopicCard'
import Visualize from '../Visualize'
import DataModel from './index'
const Topic = Backbone.Model.extend({
urlRoot: '/topics',
blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
toJSON: function (options) {
return _.omit(this.attributes, this.blacklist)
},
save: function (key, val, options) {
var attrs
// Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') {
attrs = key
options = val
} else {
(attrs = {})[key] = val
}
var newOptions = options || {}
var s = newOptions.success
var permBefore = this.get('permission')
newOptions.success = function (model, response, opt) {
if (s) s(model, response, opt)
model.trigger('saved')
model.set('calculated_permission', model.get('permission'))
if (permBefore === 'private' && model.get('permission') !== 'private') {
model.trigger('noLongerPrivate')
} else if (permBefore !== 'private' && model.get('permission') === 'private') {
model.trigger('nowPrivate')
}
}
return Backbone.Model.prototype.save.call(this, attrs, newOptions)
},
initialize: function () {
if (this.isNew()) {
this.set({
'user_id': Active.Mapper.id,
'desc': this.get('desc') || '',
'link': this.get('link') || '',
'permission': Active.Map ? Active.Map.get('permission') : 'commons'
})
}
this.on('changeByOther', this.updateCardView)
this.on('change', this.updateNodeView)
this.on('saved', this.savedEvent)
this.on('nowPrivate', function () {
var removeTopicData = {
mappableid: this.id
}
$(document).trigger(JIT.events.removeTopic, [removeTopicData])
})
this.on('noLongerPrivate', function () {
var newTopicData = {
mappingid: this.getMapping().id,
mappableid: this.id
}
$(document).trigger(JIT.events.newTopic, [newTopicData])
})
this.on('change:metacode_id', Filter.checkMetacodes, this)
},
authorizeToEdit: function (mapper) {
if (mapper &&
(this.get('user_id') === mapper.get('id') ||
this.get('calculated_permission') === 'commons' ||
this.get('collaborator_ids').includes(mapper.get('id')))) {
return true
} else {
return false
}
},
authorizePermissionChange: function (mapper) {
if (mapper && this.get('user_id') === mapper.get('id')) return true
else return false
},
getDate: function () {},
getMetacode: function () {
return DataModel.Metacodes.get(this.get('metacode_id'))
},
getMapping: function () {
if (!Active.Map) return false
return DataModel.Mappings.findWhere({
map_id: Active.Map.id,
mappable_type: 'Topic',
mappable_id: this.isNew() ? this.cid : this.id
})
},
createNode: function () {
var mapping
var node = {
adjacencies: [],
id: this.isNew() ? this.cid : this.id,
name: this.get('name')
}
if (Active.Map) {
mapping = this.getMapping()
node.data = {
$mapping: null,
$mappingID: mapping.id
}
}
return node
},
updateNode: function () {
var mapping
var node = this.get('node')
node.setData('topic', this)
if (Active.Map) {
mapping = this.getMapping()
node.setData('mapping', mapping)
}
return node
},
savedEvent: function () {
Realtime.updateTopic(this)
},
updateViews: function () {
var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node')
// update topic card, if this topic is the one open there
if (onPageWithTopicCard && this === TopicCard.openTopicCard) {
TopicCard.showCard(node)
}
// update the node on the map
if (onPageWithTopicCard && node) {
node.name = this.get('name')
Visualize.mGraph.plot()
}
},
updateCardView: function () {
var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node')
// update topic card, if this topic is the one open there
if (onPageWithTopicCard && this === TopicCard.openTopicCard) {
TopicCard.showCard(node)
}
},
updateNodeView: function () {
var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node')
// update the node on the map
if (onPageWithTopicCard && node) {
node.name = this.get('name')
Visualize.mGraph.plot()
}
}
})
export default Topic

11
frontend/src/Metamaps/DataModel/TopicCollection.js Normal file
View file

@ -0,0 +1,11 @@
import Backbone from 'backbone'
try { Backbone.$ = window.$ } catch (err) {}
import Topic from './Topic'
const TopicCollection = Backbone.Collection.extend({
model: Topic,
url: '/topics'
})
export default TopicCollection

129
frontend/src/Metamaps/DataModel/index.js Normal file
View file

@ -0,0 +1,129 @@
import Active from '../Active'
import Filter from '../Filter'
import { InfoBox } from '../Map'
import Map from './Map'
import MapCollection from './MapCollection'
import Message from './Message'
import MessageCollection from './MessageCollection'
import Mapper from './Mapper'
import MapperCollection from './MapperCollection'
import Metacode from './Metacode'
import MetacodeCollection from './MetacodeCollection'
import Topic from './Topic'
import TopicCollection from './TopicCollection'
import Synapse from './Synapse'
import SynapseCollection from './SynapseCollection'
import Mapping from './Mapping'
import MappingCollection from './MappingCollection'
const DataModel = {
Map: Map,
MapCollection: MapCollection,
Message: Message,
MessageCollection: MessageCollection,
Mapper: Mapper,
MapperCollection: MapperCollection,
Metacode: Metacode,
MetacodeCollection: MetacodeCollection,
Topic: Topic,
TopicCollection: TopicCollection,
Synapse: Synapse,
SynapseCollection: SynapseCollection,
Mapping: Mapping,
MappingCollection: MappingCollection,
Collaborators: new MapperCollection(),
Creators: new MapperCollection(),
Mappers: new MapperCollection(),
Mappings: new MappingCollection(),
Maps: {
Mine: [],
Shared: [],
Starred: [],
Mapper: {
models: [],
mapperId: null
},
Featured: [],
Active: []
},
Messages: [],
Metacodes: new MetacodeCollection(),
Stars: [],
Synapses: new SynapseCollection(),
Topics: new TopicCollection(),
init: function (serverData) {
var self = DataModel
// workaround circular import problem
if (!self.MapCollection.model) self.MapCollection.model = Map
self.synapseIconUrl = serverData['synapse16.png']
if (serverData.ActiveMap) Active.Map = new Map(serverData.ActiveMap)
if (serverData.ActiveMapper) Active.Mapper = new Mapper(serverData.ActiveMapper)
if (serverData.ActiveTopic) Active.Topic = new Topic(serverData.ActiveTopic)
if (serverData.Collaborators) self.Collaborators = new MapperCollection(serverData.Collaborators)
if (serverData.Creators) self.Creators = new MapperCollection(serverData.Creators)
if (serverData.Mappers) self.Mappers = new MapperCollection(serverData.Mappers)
if (serverData.Mappings) self.Mappings = new MappingCollection(serverData.Mappings)
if (serverData.Messages) self.Messages = serverData.Messages
if (serverData.Metacodes) self.Metacodes = new MetacodeCollection(serverData.Metacodes)
if (serverData.Stars) self.Stars = serverData.Stars
if (serverData.Synapses) self.Synapses = new SynapseCollection(serverData.Synapses)
if (serverData.Topics) self.Topics = new TopicCollection(serverData.Topics)
// initialize global backbone models and collections
if (Active.Mapper) Active.Mapper = new self.Mapper(Active.Mapper)
var myCollection = serverData.Mine ? serverData.Mine : []
var sharedCollection = serverData.Shared ? serverData.Shared : []
var starredCollection = serverData.Starred ? serverData.Starred : []
var mapperCollection = []
var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
if (self.Maps.Mapper.mapperId) {
mapperCollection = serverData.Mapper.models
mapperOptionsObj.mapperId = serverData.Mapper.id
}
var featuredCollection = serverData.Featured ? serverData.Featured : []
var activeCollection = serverData.Active ? serverData.Active : []
self.Maps.Mine = new MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
self.Maps.Shared = new MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
self.Maps.Starred = new MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
// 'Mapper' refers to another mapper
self.Maps.Mapper = new MapCollection(mapperCollection, mapperOptionsObj)
self.Maps.Featured = new MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
self.Maps.Active = new MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
self.attachCollectionEvents()
},
attachCollectionEvents: function () {
DataModel.Topics.on('add remove', function (topic) {
InfoBox.updateNumbers()
Filter.checkMetacodes()
Filter.checkMappers()
})
DataModel.Synapses.on('add remove', function (synapse) {
InfoBox.updateNumbers()
Filter.checkSynapses()
Filter.checkMappers()
})
DataModel.Mappings.on('add remove', function (mapping) {
InfoBox.updateNumbers()
Filter.checkSynapses()
Filter.checkMetacodes()
Filter.checkMappers()
})
}
}
// Note: Topics, Metacodes, Synapses, Mappers, Mappings, Collaborators, Creators are not exported
// You can access them by importing DataModel
export { Map, MapCollection, Mapper, MapperCollection, Mapping, MappingCollection, Message, MessageCollection, Metacode, MetacodeCollection, Synapse, SynapseCollection, Topic, TopicCollection }
export default DataModel

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

@ -1,23 +1,14 @@
/* global Metamaps, $ */
/* global $ */
import _ from 'lodash'
import Active from './Active'
import Control from './Control'
import DataModel from './DataModel'
import GlobalUI from './GlobalUI'
import Settings from './Settings'
import Visualize from './Visualize'
/*
* Metamaps.Filter.js.erb
*
* Dependencies:
* - Metamaps.Creators
* - Metamaps.Mappers
* - Metamaps.Metacodes
* - Metamaps.Synapses
* - Metamaps.Topics
*/
const Filter = {
filters: {
name: '',
@ -148,7 +139,7 @@ const Filter = {
// the first option enables us to accept
// ['Topics', 'Synapses'] as 'collection'
if (typeof collection === 'object') {
Metamaps[collection[0]].each(function (model) {
DataModel[collection[0]].each(function (model) {
var prop = model.get(propertyToCheck)
if (prop !== null) {
prop = prop.toString()
@ -157,7 +148,7 @@ const Filter = {
}
}
})
Metamaps[collection[1]].each(function (model) {
DataModel[collection[1]].each(function (model) {
var prop = model.get(propertyToCheck)
if (prop !== null) {
prop = prop.toString()
@ -167,7 +158,7 @@ const Filter = {
}
})
} else if (typeof collection === 'string') {
Metamaps[collection].each(function (model) {
DataModel[collection].each(function (model) {
var prop = model.get(propertyToCheck)
if (prop !== null) {
prop = prop.toString()
@ -196,8 +187,8 @@ const Filter = {
}
// for each new filter to be added, create a list item for it and fade it in
_.each(added, function (identifier) {
model = Metamaps[correlatedModel].get(identifier) ||
Metamaps[correlatedModel].find(function (model) {
model = DataModel[correlatedModel].get(identifier) ||
DataModel[correlatedModel].find(function (model) {
return model.get(propertyToCheck) === identifier
})
li = model.prepareLiForFilter()
@ -359,7 +350,7 @@ const Filter = {
var opacityForFilter = onMap ? 0 : 0.4
Metamaps.Topics.each(function (topic) {
DataModel.Topics.each(function (topic) {
var n = topic.get('node')
var metacode_id = topic.get('metacode_id').toString()
@ -400,11 +391,11 @@ const Filter = {
})
// flag all the edges back to 'untouched'
Metamaps.Synapses.each(function (synapse) {
DataModel.Synapses.each(function (synapse) {
var e = synapse.get('edge')
e.setData('touched', false)
})
Metamaps.Synapses.each(function (synapse) {
DataModel.Synapses.each(function (synapse) {
var e = synapse.get('edge')
var desc
var user_id = synapse.get('user_id').toString()

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

@ -1,13 +1,12 @@
/* global Metamaps, $ */
/* global $ */
import outdent from 'outdent'
import Active from '../Active'
import DataModel from '../DataModel'
import DataModelMap from '../DataModel/Map'
import GlobalUI from './index'
/*
* Metamaps.Backbone
* Metamaps.Maps
*/
const CreateMap = {
newMap: null,
emptyMapForm: '',
@ -17,7 +16,7 @@ const CreateMap = {
init: function () {
var self = CreateMap
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' })
self.newMap = new DataModelMap({ permission: 'commons' })
self.bindFormEvents()
@ -44,15 +43,6 @@ const CreateMap = {
$(this).remove()
})
},
generateSuccessMessage: function (id) {
var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/"
stringStart += id
stringStart += "' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>"
stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this "
var page = Active.Map ? 'map' : 'page'
var stringEnd = '</a></div>'
return stringStart + page + stringEnd
},
switchPermission: function () {
var self = CreateMap
@ -109,10 +99,23 @@ const CreateMap = {
success: function (model) {
var self = CreateMap
// push the new map onto the collection of 'my maps'
Metamaps.Maps.Mine.add(model)
DataModel.Maps.Mine.add(model)
GlobalUI.clearNotify()
$('#wrapper').append(self.generateSuccessMessage(model.id))
$('#wrapper').append(outdent`
<div id="mapCreatedSuccess">
<h6>SUCCESS!</h6>
Your map has been created. Do you want to:
<a id="mapGo" href="/maps/${model.id}">Go to your new map</a>
<span>OR</span>
<a id="mapStay" href="#">Stay on this ${Active.Map ? 'map' : 'page'}</a>
</div>
`)
$('#mapGo').click(e => GlobalUI.CreateMap.closeSuccess())
$('#mapStay').click(e => {
GlobalUI.CreateMap.closeSuccess()
return false
})
},
reset: function (id) {
var self = CreateMap
@ -128,7 +131,7 @@ const CreateMap = {
}
self.bindFormEvents()
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' })
self.newMap = new DataModel.Map({ permission: 'commons' })
return false
}

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

@ -1,13 +1,8 @@
/* global Metamaps, $, Hogan, Bloodhound, CanvasLoader */
/* global $, Hogan, Bloodhound, CanvasLoader */
import Active from '../Active'
import Router from '../Router'
/*
* Metamaps.Erb
* Metamaps.Maps
*/
const Search = {
locked: false,
isOpen: false,
@ -15,11 +10,13 @@ const Search = {
limitMapsToMe: false,
changing: false,
optionsInitialized: false,
init: function () {
init: function (serverData) {
var self = Search
// TODO does this overlap with Metamaps.Loading?
// devin sez: I'd like to remove Metamaps.Loading from the rails code
self.wildcardIconUrl = serverData['icons/wildcard.png']
self.userIconUrl = serverData['user.png']
// this is similar to Metamaps.Loading, but it's for the search element
var loader = new CanvasLoader('searchLoading')
loader.setColor('#4fb5c0') // default is '#000000'
loader.setDiameter(24) // default is 40
@ -56,7 +53,7 @@ const Search = {
return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
value: 'No results',
label: 'No results',
typeImageURL: Metamaps.Erb['icons/wildcard.png'],
typeImageURL: self.wildcardIconUrl,
rtype: 'noresult'
})
},
@ -124,7 +121,7 @@ const Search = {
value: 'No results',
label: 'No results',
rtype: 'noresult',
profile: Metamaps.Erb['user.png']
profile: self.userIconUrl
})
},
header: mapperheader,

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

@ -1,8 +1,7 @@
/* global Metamaps, $ */
/* global $ */
import clipboard from 'clipboard-js'
import Active from '../Active'
import Create from '../Create'
import Search from './Search'
@ -10,21 +9,16 @@ import CreateMap from './CreateMap'
import Account from './Account'
import ImportDialog from './ImportDialog'
/*
* Metamaps.Backbone
* Metamaps.Maps
*/
const GlobalUI = {
notifyTimeout: null,
lightbox: null,
init: function () {
init: function (serverData) {
var self = GlobalUI
self.Search.init()
self.CreateMap.init()
self.Account.init()
self.ImportDialog.init(Metamaps.Erb, self.openLightbox, self.closeLightbox)
self.Search.init(serverData)
self.CreateMap.init(serverData)
self.Account.init(serverData)
self.ImportDialog.init(serverData, self.openLightbox, self.closeLightbox)
if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
@ -36,28 +30,6 @@ const GlobalUI = {
})
$('#lightbox_screen, #lightbox_close').click(self.closeLightbox)
// initialize global backbone models and collections
if (Active.Mapper) Active.Mapper = new Metamaps.Backbone.Mapper(Active.Mapper)
var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : []
var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : []
var starredCollection = Metamaps.Maps.Starred ? Metamaps.Maps.Starred : []
var mapperCollection = []
var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' }
if (Metamaps.Maps.Mapper) {
mapperCollection = Metamaps.Maps.Mapper.models
mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id
}
var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : []
var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : []
Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, { id: 'mine', sortBy: 'updated_at' })
Metamaps.Maps.Shared = new Metamaps.Backbone.MapsCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' })
Metamaps.Maps.Starred = new Metamaps.Backbone.MapsCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' })
// 'Mapper' refers to another mapper
Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj)
Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
},
showDiv: function (selector) {
$(selector).show()

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

@ -1,26 +1,16 @@
/* global Metamaps, $ */
/* global $ */
import parse from 'csv-parse'
import _ from 'lodash'
import Active from './Active'
import AutoLayout from './AutoLayout'
import DataModel from './DataModel'
import GlobalUI from './GlobalUI'
import Map from './Map'
import Synapse from './Synapse'
import Topic from './Topic'
/*
* Metamaps.Import.js.erb
*
* Dependencies:
* - Metamaps.Backbone
* - Metamaps.Mappings
* - Metamaps.Metacodes
* - Metamaps.Synapses
* - Metamaps.Topics
*/
const Import = {
// note that user is not imported
topicWhitelist: [
@ -228,7 +218,7 @@ const Import = {
parsedTopics.forEach(topic => {
let coords = { x: topic.x, y: topic.y }
if (!coords.x || !coords.y) {
coords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
}
if (!topic.name && topic.link ||
@ -255,10 +245,10 @@ const Import = {
parsedSynapses.forEach(function (synapse) {
// only createSynapseWithParameters once both topics are persisted
// if there isn't a cidMapping, check by topic name instead
var topic1 = Metamaps.Topics.get(self.cidMappings[synapse.topic1])
if (!topic1) topic1 = Metamaps.Topics.findWhere({ name: synapse.topic1 })
var topic2 = Metamaps.Topics.get(self.cidMappings[synapse.topic2])
if (!topic2) topic2 = Metamaps.Topics.findWhere({ name: synapse.topic2 })
var topic1 = DataModel.Topics.get(self.cidMappings[synapse.topic1])
if (!topic1) topic1 = DataModel.Topics.findWhere({ name: synapse.topic1 })
var topic2 = DataModel.Topics.get(self.cidMappings[synapse.topic2])
if (!topic2) topic2 = DataModel.Topics.findWhere({ name: synapse.topic2 })
if (!topic1 || !topic2) {
console.error("One of the two topics doesn't exist!")
@ -291,15 +281,15 @@ const Import = {
link, xloc, yloc, import_id, opts = {}) {
var self = Import
$(document).trigger(Map.events.editedByActiveMapper)
var metacode = Metamaps.Metacodes.where({name: metacode_name})[0] || null
var metacode = DataModel.Metacodes.where({name: metacode_name})[0] || null
if (metacode === null) {
metacode = Metamaps.Metacodes.where({ name: 'Wildcard' })[0]
metacode = DataModel.Metacodes.where({ name: 'Wildcard' })[0]
console.warn("Couldn't find metacode " + metacode_name + ' 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
var topic = new Metamaps.Backbone.Topic({
var topic = new DataModel.Topic({
name: name,
metacode_id: metacode.id,
permission: topic_permission,
@ -308,19 +298,19 @@ const Import = {
link: link || '',
calculated_permission: Active.Map.get('permission')
})
Metamaps.Topics.add(topic)
DataModel.Topics.add(topic)
if (import_id !== null && import_id !== undefined) {
self.cidMappings[import_id] = topic.cid
}
var mapping = new Metamaps.Backbone.Mapping({
var mapping = new DataModel.Mapping({
xloc: xloc,
yloc: yloc,
mappable_id: topic.cid,
mappable_type: 'Topic'
})
Metamaps.Mappings.add(mapping)
DataModel.Mappings.add(mapping)
// this function also includes the creation of the topic in the database
Topic.renderTopic(mapping, topic, true, true, {
@ -340,20 +330,20 @@ const Import = {
return
} // if
var synapse = new Metamaps.Backbone.Synapse({
var synapse = new DataModel.Synapse({
desc: desc || '',
category: category || 'from-to',
permission: permission,
topic1_id: topic1.id,
topic2_id: topic2.id
})
Metamaps.Synapses.add(synapse)
DataModel.Synapses.add(synapse)
var mapping = new Metamaps.Backbone.Mapping({
var mapping = new DataModel.Mapping({
mappable_type: 'Synapse',
mappable_id: synapse.cid
})
Metamaps.Mappings.add(mapping)
DataModel.Mappings.add(mapping)
Synapse.renderSynapse(mapping, synapse, node1, node2, true)
},
@ -361,7 +351,7 @@ const Import = {
handleURL: function (url, opts = {}) {
let coords = opts.coords
if (!coords || coords.x === undefined || coords.y === undefined) {
coords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
}
const name = opts.name || 'Link'

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

@ -1,4 +1,4 @@
/* global Metamaps, $, Image, CanvasLoader */
/* global $, Image, CanvasLoader */
import _ from 'lodash'
import outdent from 'outdent'
@ -8,6 +8,7 @@ import $jit from '../patched/JIT'
import Active from './Active'
import Control from './Control'
import Create from './Create'
import DataModel from './DataModel'
import Filter from './Filter'
import GlobalUI from './GlobalUI'
import Map from './Map'
@ -23,14 +24,6 @@ import Util from './Util'
import Visualize from './Visualize'
import clipboard from 'clipboard-js'
/*
* Metamaps.Erb
* Metamaps.Mappings
* Metamaps.Metacodes
* Metamaps.Synapses
* Metamaps.Topics
*/
let panningInt
const JIT = {
@ -58,7 +51,7 @@ const JIT = {
/**
* This method will bind the event handlers it is interested and initialize the class.
*/
init: function () {
init: function (serverData) {
const self = JIT
$('.zoomIn').click(self.zoomIn)
@ -72,10 +65,10 @@ const JIT = {
$('.takeScreenshot').click(Map.exportImage)
self.topicDescImage = new Image()
self.topicDescImage.src = Metamaps.Erb['topic_description_signifier.png']
self.topicDescImage.src = serverData['topic_description_signifier.png']
self.topicLinkImage = new Image()
self.topicLinkImage.src = Metamaps.Erb['topic_link_signifier.png']
self.topicLinkImage.src = serverData['topic_link_signifier.png']
},
/**
* convert our topic JSON into something JIT can use
@ -140,15 +133,15 @@ const JIT = {
self.vizData = []
Visualize.loadLater = false
const results = self.convertModelsToJIT(Metamaps.Topics, Metamaps.Synapses)
const results = self.convertModelsToJIT(DataModel.Topics, DataModel.Synapses)
self.vizData = results[0]
// clean up the synapses array in case of any faulty data
_.each(results[1], function (synapse) {
mapping = synapse.getMapping()
Metamaps.Synapses.remove(synapse)
if (Metamaps.Mappings) Metamaps.Mappings.remove(mapping)
DataModel.Synapses.remove(synapse)
if (DataModel.Mappings) DataModel.Mappings.remove(mapping)
})
// set up addTopic instructions in case they delete all the topics
@ -320,17 +313,6 @@ const JIT = {
panning: 'avoid nodes',
zooming: 28 // zoom speed. higher is more sensible
},
// background: {
// type: 'Metamaps'
// },
// NodeStyles: {
// enable: true,
// type: 'Native',
// stylesHover: {
// dim: 30
// },
// duration: 300
// },
// Change node and edge styles such as
// color and width.
// These properties are also set per node
@ -656,7 +638,6 @@ const JIT = {
},
// this will just be used to patch the ForceDirected graphsettings with the few things which actually differ
background: {
// type: 'Metamaps',
levelDistance: 200,
numberOfCircles: 4,
CanvasStyles: {
@ -1191,7 +1172,7 @@ const JIT = {
eY = -1 * eY
const edgesToToggle = []
Metamaps.Synapses.each(function (synapse) {
DataModel.Synapses.each(function (synapse) {
const e = synapse.get('edge')
if (edgesToToggle.indexOf(e) === -1) {
edgesToToggle.push(e)
@ -1579,15 +1560,15 @@ const JIT = {
loader.setRange(0.9) // default is 1.3
loader.show() // Hidden by default
const topics = Metamaps.Topics.map(function (t) { return t.id })
const topics = DataModel.Topics.map(function (t) { return t.id })
const topicsString = topics.join()
const successCallback = function (data) {
$('#loadingSiblings').remove()
for (var key in data) {
const string = Metamaps.Metacodes.get(key).get('name') + ' (' + data[key] + ')'
$('#fetchSiblingList').append('<li class="getSiblings" data-id="' + key + '">' + string + '</li>')
const string = `${DataModel.Metacodes.get(key).get('name')} (${data[key]})`
$('#fetchSiblingList').append(`<li class="getSiblings" data-id="${key}">${string}</li>`)
}
$('.rc-siblings .getSiblings').click(function () {

21
frontend/src/Metamaps/Loading.js Normal file
View file

@ -0,0 +1,21 @@
/* global CanvasLoader, $ */
const Loading = {
loader: null, // needs CanvasLoader to be defined
hide: function () {
$('#loading').hide()
},
show: function () {
$('#loading').show()
},
setup: function () {
if (!Loading.loader) Loading.loader = new CanvasLoader('loading')
Loading.loader.setColor('#4fb5c0') // default is '#000000'
Loading.loader.setDiameter(28) // default is 40
Loading.loader.setDensity(41) // default is 40
Loading.loader.setRange(0.9) // default is 1.3
Loading.loader.show() // Hidden by default
}
}
export default Loading

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

@ -1,21 +1,13 @@
/* global Metamaps, $, Hogan, Bloodhound, Countable */
/* global $, Hogan, Bloodhound, Countable */
import outdent from 'outdent'
import Active from '../Active'
import DataModel from '../DataModel'
import GlobalUI from '../GlobalUI'
import Router from '../Router'
import Util from '../Util'
/*
* Metamaps.Collaborators
* Metamaps.Erb
* Metamaps.Mappers
* Metamaps.Maps
* Metamaps.Synapses
* Metamaps.Topics
*/
const InfoBox = {
isOpen: false,
changing: false,
@ -42,7 +34,8 @@ const InfoBox = {
data-bip-activator="#mapInfoDesc"
data-bip-value="{{desc}}"
>{{desc}}</span>`,
init: function () {
userImageUrl: '',
init: function (serverData) {
var self = InfoBox
$('.mapInfoIcon').click(self.toggleBox)
@ -55,6 +48,8 @@ const InfoBox = {
self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
self.userImageUrl = serverData['user.png']
var querystring = window.location.search.replace(/^\?/, '')
if (querystring == 'new') {
self.open()
@ -106,7 +101,7 @@ const InfoBox = {
var isCreator = map.authorizePermissionChange(Active.Mapper)
var canEdit = map.authorizeToEdit(Active.Mapper)
var relevantPeople = map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var relevantPeople = map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators
var shareable = map.get('permission') !== 'private'
obj['name'] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get('name')}) : map.get('name')
@ -116,7 +111,7 @@ const InfoBox = {
obj['contributor_count'] = relevantPeople.length
obj['contributors_class'] = relevantPeople.length > 1 ? 'multiple' : ''
obj['contributors_class'] += relevantPeople.length === 2 ? ' mTwo' : ''
obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : Metamaps.Erb['user.png']
obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : self.userImageUrl
obj['contributor_list'] = self.createContributorList()
obj['user_name'] = isCreator ? 'You' : map.get('user_name')
@ -218,7 +213,7 @@ const InfoBox = {
value: "No results",
label: "No results",
rtype: "noresult",
profile: Metamaps.Erb['user.png'],
profile: self.userImageUrl
});
},
suggestion: function(s) {
@ -251,24 +246,24 @@ const InfoBox = {
},
removeCollaborator: function (collaboratorId) {
var self = InfoBox
Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId))
var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
DataModel.Collaborators.remove(DataModel.Collaborators.get(collaboratorId))
var mapperIds = DataModel.Collaborators.models.map(function (mapper) { return mapper.id })
$.post('/maps/' + Active.Map.id + '/access', { access: mapperIds })
self.updateNumbers()
},
addCollaborator: function (newCollaboratorId) {
var self = InfoBox
if (Metamaps.Collaborators.get(newCollaboratorId)) {
if (DataModel.Collaborators.get(newCollaboratorId)) {
GlobalUI.notifyUser('That user already has access')
return
}
function callback(mapper) {
Metamaps.Collaborators.add(mapper)
var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
DataModel.Collaborators.add(mapper)
var mapperIds = DataModel.Collaborators.models.map(function (mapper) { return mapper.id })
$.post('/maps/' + Active.Map.id + '/access', { access: mapperIds })
var name = Metamaps.Collaborators.get(newCollaboratorId).get('name')
var name = DataModel.Collaborators.get(newCollaboratorId).get('name')
GlobalUI.notifyUser(name + ' will be notified by email')
self.updateNumbers()
}
@ -289,7 +284,7 @@ const InfoBox = {
},
createContributorList: function () {
var self = InfoBox
var relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var relevantPeople = Active.Map.get('permission') === 'commons' ? DataModel.Mappers : DataModel.Collaborators
var activeMapperIsCreator = Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')
var string = ''
string += '<ul>'
@ -315,13 +310,13 @@ const InfoBox = {
var self = InfoBox
var mapper = Active.Mapper
var relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
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'
var contributors_image = Metamaps.Erb['user.png']
var contributors_image = self.userImageUrl
if (relevantPeople.length > 0) {
// get the first contributor and use their image
contributors_image = relevantPeople.models[0].get('image')
@ -333,8 +328,8 @@ const InfoBox = {
$('.mapContributors .tip').unbind().click(function (event) {
event.stopPropagation()
})
$('.mapTopics').text(Metamaps.Topics.length)
$('.mapSynapses').text(Metamaps.Synapses.length)
$('.mapTopics').text(DataModel.Topics.length)
$('.mapSynapses').text(DataModel.Synapses.length)
$('.mapEditedAt').html('<span>Last edited: </span>' + Util.nowDateFormatted())
},
@ -388,10 +383,10 @@ const InfoBox = {
if (doIt && authorized) {
InfoBox.close()
Metamaps.Maps.Active.remove(map)
Metamaps.Maps.Featured.remove(map)
Metamaps.Maps.Mine.remove(map)
Metamaps.Maps.Shared.remove(map)
DataModel.Maps.Active.remove(map)
DataModel.Maps.Featured.remove(map)
DataModel.Maps.Mine.remove(map)
DataModel.Maps.Shared.remove(map)
map.destroy()
Router.home()
GlobalUI.notifyUser('Map eliminated!')

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

@ -1,13 +1,16 @@
/* global Metamaps, $ */
/* global $ */
import outdent from 'outdent'
import Active from '../Active'
import AutoLayout from '../AutoLayout'
import Create from '../Create'
import DataModel from '../DataModel'
import DataModelMap from '../DataModel/Map'
import Filter from '../Filter'
import GlobalUI from '../GlobalUI'
import JIT from '../JIT'
import Loading from '../Loading'
import Realtime from '../Realtime'
import Router from '../Router'
import Selected from '../Selected'
@ -18,26 +21,11 @@ import Visualize from '../Visualize'
import CheatSheet from './CheatSheet'
import InfoBox from './InfoBox'
/*
* Metamaps.Map.js.erb
*
* Dependencies:
* - Metamaps.Backbone
* - Metamaps.Erb
* - Metamaps.Loading
* - Metamaps.Mappers
* - Metamaps.Mappings
* - Metamaps.Maps
* - Metamaps.Messages
* - Metamaps.Synapses
* - Metamaps.Topics
*/
const Map = {
events: {
editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
},
init: function () {
init: function (serverData) {
var self = Map
$('#wrapper').mousedown(function (e){
@ -56,8 +44,8 @@ const Map = {
GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
self.updateStar()
InfoBox.init()
CheatSheet.init()
InfoBox.init(serverData)
CheatSheet.init(serverData)
$('.viewOnly .requestAccess').click(self.requestAccess)
@ -82,17 +70,16 @@ const Map = {
$('.viewOnly').removeClass('sendRequest sentRequest requestDenied').addClass(className)
},
launch: function (id) {
var bb = Metamaps.Backbone
var start = function (data) {
Active.Map = new bb.Map(data.map)
Metamaps.Mappers = new bb.MapperCollection(data.mappers)
Metamaps.Collaborators = new bb.MapperCollection(data.collaborators)
Metamaps.Topics = new bb.TopicCollection(data.topics)
Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
Metamaps.Mappings = new bb.MappingCollection(data.mappings)
Metamaps.Messages = data.messages
Metamaps.Stars = data.stars
Metamaps.Backbone.attachCollectionEvents()
Active.Map = new DataModelMap(data.map)
DataModel.Mappers = new DataModel.MapperCollection(data.mappers)
DataModel.Collaborators = new DataModel.MapperCollection(data.collaborators)
DataModel.Topics = new DataModel.TopicCollection(data.topics)
DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
DataModel.Mappings = new DataModel.MappingCollection(data.mappings)
DataModel.Messages = data.messages
DataModel.Stars = data.stars
DataModel.attachCollectionEvents()
var map = Active.Map
var mapper = Active.Mapper
@ -137,7 +124,7 @@ const Map = {
Filter.checkMappers()
Realtime.startActiveMap()
Metamaps.Loading.hide()
Loading.hide()
// for mobile
$('#header_content').html(map.get('name'))
@ -165,9 +152,9 @@ const Map = {
}
},
updateStar: function () {
if (!Active.Mapper || !Metamaps.Stars) return
if (!Active.Mapper || !DataModel.Stars) return
// update the star/unstar icon
if (Metamaps.Stars.find(function (s) { return s.user_id === Active.Mapper.id })) {
if (DataModel.Stars.find(function (s) { return s.user_id === Active.Mapper.id })) {
$('.starMap').addClass('starred')
$('.starMap .tooltipsAbove').html('Unstar')
} else {
@ -180,8 +167,8 @@ const Map = {
if (!Active.Map) return
$.post('/maps/' + Active.Map.id + '/star')
Metamaps.Stars.push({ user_id: Active.Mapper.id, map_id: Active.Map.id })
Metamaps.Maps.Starred.add(Active.Map)
DataModel.Stars.push({ user_id: Active.Mapper.id, map_id: Active.Map.id })
DataModel.Maps.Starred.add(Active.Map)
GlobalUI.notifyUser('Map is now starred')
self.updateStar()
},
@ -190,8 +177,8 @@ const Map = {
if (!Active.Map) return
$.post('/maps/' + Active.Map.id + '/unstar')
Metamaps.Stars = Metamaps.Stars.filter(function (s) { return s.user_id != Active.Mapper.id })
Metamaps.Maps.Starred.remove(Active.Map)
DataModel.Stars = DataModel.Stars.filter(function (s) { return s.user_id != Active.Mapper.id })
DataModel.Maps.Starred.remove(Active.Map)
self.updateStar()
},
fork: function () {
@ -219,7 +206,7 @@ const Map = {
}
})
// collect the unfiltered synapses
Metamaps.Synapses.each(function (synapse) {
DataModel.Synapses.each(function (synapse) {
var desc = synapse.get('desc')
var descNotFiltered = Filter.visible.synapses.indexOf(desc) > -1
@ -240,8 +227,8 @@ const Map = {
},
leavePrivateMap: function () {
var map = Active.Map
Metamaps.Maps.Active.remove(map)
Metamaps.Maps.Featured.remove(map)
DataModel.Maps.Active.remove(map)
DataModel.Maps.Featured.remove(map)
Router.home()
GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
},
@ -260,7 +247,7 @@ const Map = {
},
editedByActiveMapper: function () {
if (Active.Mapper) {
Metamaps.Mappers.add(Active.Mapper)
DataModel.Mappers.add(Active.Mapper)
}
},
exportImage: function () {

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

@ -1,9 +1,6 @@
/* global $ */
/*
* Dependencies:
* Metamaps.Backbone
*/
import DataModel from './DataModel'
const Mapper = {
// this function is to retrieve a mapper JSON object from the database
@ -12,7 +9,7 @@ const Mapper = {
$.ajax({
url: `/users/${id}.json`,
success: data => {
callback(new Metamaps.Backbone.Mapper(data))
callback(new DataModel.Mapper(data))
}
})
}

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

@ -1,23 +1,11 @@
/* global Metamaps, $ */
/*
* Metamaps.Realtime.js
*
* Dependencies:
* - Metamaps.Backbone
* - Metamaps.Erb
* - Metamaps.Mappers
* - Metamaps.Mappings
* - Metamaps.Messages
* - Metamaps.Synapses
* - Metamaps.Topics
*/
/* 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'
@ -121,12 +109,14 @@ let Realtime = {
broadcastingStatus: false,
inConversation: false,
localVideo: null,
init: function () {
'junto_spinner_darkgrey.gif': '',
init: function (serverData) {
var self = Realtime
self.addJuntoListeners()
self.socket = new SocketIoConnection({ url: Metamaps.Erb['REALTIME_SERVER']})
self.socket = new SocketIoConnection({ url: serverData['REALTIME_SERVER']})
self['junto_spinner_darkgrey.gif'] = serverData['junto_spinner_darkgrey.gif']
self.socket.on('connect', function () {
console.log('connected')
@ -230,7 +220,7 @@ let Realtime = {
self.setupSocket()
self.setupLocalSendables()
}
self.room.addMessages(new Metamaps.Backbone.MessageCollection(Metamaps.Messages), true)
self.room.addMessages(new DataModel.MessageCollection(DataModel.Messages), true)
}
},
endActiveMap: function () {

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

@ -7,6 +7,7 @@ everthing in this file happens as a result of websocket events
import { JUNTO_UPDATED } from './events'
import Active from '../Active'
import DataModel from '../DataModel'
import GlobalUI from '../GlobalUI'
import Control from '../Control'
import Map from '../Map'
@ -22,7 +23,7 @@ export const juntoUpdated = self => state => {
}
export const synapseRemoved = self => data => {
var synapse = Metamaps.Synapses.get(data.mappableid)
var synapse = DataModel.Synapses.get(data.mappableid)
if (synapse) {
var edge = synapse.get('edge')
var mapping = synapse.getMapping()
@ -36,8 +37,8 @@ export const synapseRemoved = self => data => {
if (edge.getData('displayIndex')) {
delete edge.data.$displayIndex
}
Metamaps.Synapses.remove(synapse)
Metamaps.Mappings.remove(mapping)
DataModel.Synapses.remove(synapse)
DataModel.Mappings.remove(mapping)
}
}
@ -63,18 +64,18 @@ export const synapseCreated = self => data => {
}
}
mapper = Metamaps.Mappers.get(data.mapperid)
mapper = DataModel.Mappers.get(data.mapperid)
if (mapper === undefined) {
Mapper.get(data.mapperid, function(m) {
Metamaps.Mappers.add(m)
DataModel.Mappers.add(m)
mapper = m
})
}
$.ajax({
url: '/synapses/' + data.mappableid + '.json',
success: function (response) {
Metamaps.Synapses.add(response)
synapse = Metamaps.Synapses.get(response.id)
DataModel.Synapses.add(response)
synapse = DataModel.Synapses.get(response.id)
},
error: function () {
cancel = true
@ -83,8 +84,8 @@ export const synapseCreated = self => data => {
$.ajax({
url: '/mappings/' + data.mappingid + '.json',
success: function (response) {
Metamaps.Mappings.add(response)
mapping = Metamaps.Mappings.get(response.id)
DataModel.Mappings.add(response)
mapping = DataModel.Mappings.get(response.id)
},
error: function () {
cancel = true
@ -94,13 +95,13 @@ export const synapseCreated = self => data => {
}
export const topicRemoved = self => data => {
var topic = Metamaps.Topics.get(data.mappableid)
var topic = DataModel.Topics.get(data.mappableid)
if (topic) {
var node = topic.get('node')
var mapping = topic.getMapping()
Control.hideNode(node.id)
Metamaps.Topics.remove(topic)
Metamaps.Mappings.remove(mapping)
DataModel.Topics.remove(topic)
DataModel.Mappings.remove(mapping)
}
}
@ -120,18 +121,18 @@ export const topicCreated = self => data => {
}
}
mapper = Metamaps.Mappers.get(data.mapperid)
mapper = DataModel.Mappers.get(data.mapperid)
if (mapper === undefined) {
Mapper.get(data.mapperid, function(m) {
Metamaps.Mappers.add(m)
DataModel.Mappers.add(m)
mapper = m
})
}
$.ajax({
url: '/topics/' + data.mappableid + '.json',
success: function (response) {
Metamaps.Topics.add(response)
topic = Metamaps.Topics.get(response.id)
DataModel.Topics.add(response)
topic = DataModel.Topics.get(response.id)
},
error: function () {
cancel = true
@ -140,8 +141,8 @@ export const topicCreated = self => data => {
$.ajax({
url: '/mappings/' + data.mappingid + '.json',
success: function (response) {
Metamaps.Mappings.add(response)
mapping = Metamaps.Mappings.get(response.id)
DataModel.Mappings.add(response)
mapping = DataModel.Mappings.get(response.id)
},
error: function () {
cancel = true
@ -152,7 +153,7 @@ export const topicCreated = self => data => {
}
export const messageCreated = self => data => {
self.room.addMessages(new Metamaps.Backbone.MessageCollection(data))
self.room.addMessages(new DataModel.MessageCollection(data))
}
export const mapUpdated = self => data => {
@ -182,7 +183,7 @@ export const mapUpdated = self => data => {
}
export const topicUpdated = self => data => {
var topic = Metamaps.Topics.get(data.topicId)
var topic = DataModel.Topics.get(data.topicId)
if (topic) {
var node = topic.get('node')
topic.fetch({
@ -195,7 +196,7 @@ export const topicUpdated = self => data => {
}
export const synapseUpdated = self => data => {
var synapse = Metamaps.Synapses.get(data.synapseId)
var synapse = DataModel.Synapses.get(data.synapseId)
if (synapse) {
// edge reset necessary because fetch causes model reset
var edge = synapse.get('edge')
@ -214,7 +215,7 @@ export const topicDragged = self => positions => {
if (Active.Map) {
for (var key in positions) {
topic = Metamaps.Topics.get(key)
topic = DataModel.Topics.get(key)
if (topic) node = topic.get('node')
if (node) node.pos.setc(positions[key].x, positions[key].y)
} // for
@ -301,9 +302,10 @@ export const newMapper = self => data => {
var notifyMessage = data.username + ' just joined the map'
if (firstOtherPerson) {
notifyMessage += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.inviteACall(' + data.userid + ')">Suggest A Video Call</button>'
notifyMessage += ' <button type="button" class="toast-button button">Suggest A Video Call</button>'
}
GlobalUI.notifyUser(notifyMessage)
$('#toast button').click(e => self.inviteACall(data.userid))
self.sendMapperInfo(data.userid)
}
}
@ -332,11 +334,13 @@ export const invitedToCall = self => inviter => {
self.soundId = self.room.chat.sound.play('sessioninvite')
var username = self.mappersOnMap[inviter].name
var notifyText = '<img src="' + Metamaps.Erb['junto_spinner_darkgrey.gif'] + '" style="display: inline-block; margin-top: -12px; margin-bottom: -6px; vertical-align: top;" />'
var notifyText = '<img src="' + self['junto_spinner_darkgrey.gif'] + '" style="display: inline-block; margin-top: -12px; margin-bottom: -6px; vertical-align: top;" />'
notifyText += username + ' is inviting you to a conversation. Join live?'
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>'
notifyText += ' <button type="button" class="toast-button button yes">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no no">No</button>'
GlobalUI.notifyUser(notifyText, true)
$('#toast button.yes').click(e => self.acceptCall(inviter))
$('#toast button.no').click(e => self.denyCall(inviter))
}
export const invitedToJoin = self => inviter => {
@ -345,9 +349,11 @@ export const invitedToJoin = self => inviter => {
var username = self.mappersOnMap[inviter].name
var notifyText = username + ' is inviting you to the conversation. Join?'
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyInvite(' + inviter + ')">No</button>'
notifyText += ' <button type="button" class="toast-button button yes">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no no">No</button>'
GlobalUI.notifyUser(notifyText, true)
$('#toast button.yes').click(e => self.joinCall())
$('#toast button.no').click(e => self.denyInvite(inviter))
}
export const mapperJoinedCall = self => id => {
@ -384,18 +390,24 @@ export const mapperLeftCall = self => id => {
export const callInProgress = self => () => {
var notifyText = "There's a conversation happening, want to join?"
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>'
notifyText += ' <button type="button" class="toast-button button yes">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no no">No</button>'
GlobalUI.notifyUser(notifyText, true)
$('#toast button.yes').click(e => self.joinCall())
$('#toast button.no').click(e => GlobalUI.clearNotify())
self.room.conversationInProgress()
}
export const callStarted = self => () => {
if (self.inConversation) return
var notifyText = "There's a conversation starting, want to join?"
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>'
notifyText += ' <button type="button" class="toast-button button">Yes</button>'
notifyText += ' <button type="button" class="toast-button button btn-no">No</button>'
GlobalUI.notifyUser(notifyText, true)
$('#toast button.yes').click(e => self.joinCall())
$('#toast button.no').click(e => GlobalUI.clearNotify())
self.room.conversationInProgress()
}

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

@ -1,24 +1,17 @@
/* global Metamaps, $ */
/* global $ */
import Backbone from 'backbone'
//TODO is this line good or bad?
//Backbone.$ = window.$
try { Backbone.$ = window.$ } catch (err) {}
import Active from './Active'
import DataModel from './DataModel'
import GlobalUI from './GlobalUI'
import Loading from './Loading'
import Map from './Map'
import Topic from './Topic'
import Views from './Views'
import Visualize from './Visualize'
/*
* Metamaps.Router.js.erb
*
* Dependencies:
* - Metamaps.Loading
* - Metamaps.Maps
*/
const _Router = Backbone.Router.extend({
currentPage: '',
currentSection: '',
@ -57,10 +50,10 @@ const _Router = Backbone.Router.extend({
GlobalUI.showDiv('#explore')
Views.ExploreMaps.setCollection(Metamaps.Maps.Active)
if (Metamaps.Maps.Active.length === 0) {
Views.ExploreMaps.setCollection(DataModel.Maps.Active)
if (DataModel.Maps.Active.length === 0) {
Views.ExploreMaps.pending = true
Metamaps.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
DataModel.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
} else {
Views.ExploreMaps.render(navigate)
}
@ -109,23 +102,23 @@ const _Router = Backbone.Router.extend({
// this will mean it's a mapper page being loaded
if (id) {
if (Metamaps.Maps.Mapper.mapperId !== id) {
if (DataModel.Maps.Mapper.mapperId !== id) {
// empty the collection if we are trying to load the maps
// collection of a different mapper than we had previously
Metamaps.Maps.Mapper.reset()
Metamaps.Maps.Mapper.page = 1
DataModel.Maps.Mapper.reset()
DataModel.Maps.Mapper.page = 1
}
Metamaps.Maps.Mapper.mapperId = id
DataModel.Maps.Mapper.mapperId = id
}
Views.ExploreMaps.setCollection(Metamaps.Maps[capitalize])
Views.ExploreMaps.setCollection(DataModel.Maps[capitalize])
var navigate = function () {
var path = '/explore/' + self.currentPage
// alter url if for mapper profile page
if (self.currentPage === 'mapper') {
path += '/' + Metamaps.Maps.Mapper.mapperId
path += '/' + DataModel.Maps.Mapper.mapperId
}
self.navigate(path)
@ -133,11 +126,11 @@ const _Router = Backbone.Router.extend({
var navigateTimeout = function () {
self.timeoutId = setTimeout(navigate, 300)
}
if (Metamaps.Maps[capitalize].length === 0) {
Metamaps.Loading.show()
if (DataModel.Maps[capitalize].length === 0) {
Loading.show()
Views.ExploreMaps.pending = true
setTimeout(function () {
Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
DataModel.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
}, 300) // wait 300 milliseconds till the other animations are done to do the fetch
} else {
if (id) {
@ -178,7 +171,7 @@ const _Router = Backbone.Router.extend({
Topic.end()
Active.Topic = null
Metamaps.Loading.show()
Loading.show()
Map.end()
Map.launch(id)
},

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

@ -1,44 +1,33 @@
/* global Metamaps, $ */
/* global $ */
import Active from './Active'
import Control from './Control'
import Create from './Create'
import DataModel from './DataModel'
import JIT from './JIT'
import Map from './Map'
import Selected from './Selected'
import Settings from './Settings'
import Visualize from './Visualize'
/*
* Metamaps.Synapse.js.erb
*
* Dependencies:
* - Metamaps.Backbone
* - Metamaps.Mappings
* - Metamaps.Synapses
* - Metamaps.Topics
*/
const noOp = () => {}
const Synapse = {
// this function is to retrieve a synapse JSON object from the database
// @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 (Metamaps.Synapses.get(id) == undefined) {
if (DataModel.Synapses.get(id) == undefined) {
$.ajax({
url: '/synapses/' + id + '.json',
success: function (data) {
Metamaps.Synapses.add(data)
callback(Metamaps.Synapses.get(id))
DataModel.Synapses.add(data)
callback(DataModel.Synapses.get(id))
}
})
} else callback(Metamaps.Synapses.get(id))
} else callback(DataModel.Synapses.get(id))
},
/*
*
*
*/
renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) {
var self = Synapse
@ -98,12 +87,12 @@ const Synapse = {
// for each node in this array we will create a synapse going to the position2 node.
var synapsesToCreate = []
topic2 = Metamaps.Topics.get(Create.newSynapse.topic2id)
topic2 = DataModel.Topics.get(Create.newSynapse.topic2id)
node2 = topic2.get('node')
var len = Selected.Nodes.length
if (len == 0) {
topic1 = Metamaps.Topics.get(Create.newSynapse.topic1id)
topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
synapsesToCreate[0] = topic1.get('node')
} else if (len > 0) {
synapsesToCreate = Selected.Nodes
@ -112,18 +101,18 @@ const Synapse = {
for (var i = 0; i < synapsesToCreate.length; i++) {
node1 = synapsesToCreate[i]
topic1 = node1.getData('topic')
synapse = new Metamaps.Backbone.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,
})
Metamaps.Synapses.add(synapse)
DataModel.Synapses.add(synapse)
mapping = new Metamaps.Backbone.Mapping({
mapping = new DataModel.Mapping({
mappable_type: 'Synapse',
mappable_id: synapse.cid,
})
Metamaps.Mappings.add(mapping)
DataModel.Mappings.add(mapping)
// this function also includes the creation of the synapse in the database
self.renderSynapse(mapping, synapse, node1, node2, true)
@ -139,14 +128,14 @@ const Synapse = {
node2
self.get(id, synapse => {
var mapping = new Metamaps.Backbone.Mapping({
var mapping = new DataModel.Mapping({
mappable_type: 'Synapse',
mappable_id: synapse.id,
})
Metamaps.Mappings.add(mapping)
topic1 = Metamaps.Topics.get(Create.newSynapse.topic1id)
DataModel.Mappings.add(mapping)
topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
node1 = topic1.get('node')
topic2 = Metamaps.Topics.get(Create.newSynapse.topic2id)
topic2 = DataModel.Topics.get(Create.newSynapse.topic2id)
node2 = topic2.get('node')
Create.newSynapse.hide()
self.renderSynapse(mapping, synapse, node1, node2, true)

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

@ -1,10 +1,11 @@
/* global Metamaps, $ */
/* global $ */
import $jit from '../patched/JIT'
import Active from './Active'
import AutoLayout from './AutoLayout'
import Create from './Create'
import DataModel from './DataModel'
import Filter from './Filter'
import GlobalUI from './GlobalUI'
import JIT from './JIT'
@ -17,41 +18,30 @@ import TopicCard from './TopicCard'
import Util from './Util'
import Visualize from './Visualize'
/*
* Metamaps.Topic.js.erb
*
* Dependencies:
* - Metamaps.Backbone
* - Metamaps.Creators
* - Metamaps.Mappings
* - Metamaps.Synapses
* - Metamaps.Topics
*/
const noOp = () => {}
const Topic = {
// this function is to retrieve a topic JSON object from the database
// @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 (Metamaps.Topics.get(id) == undefined) {
if (DataModel.Topics.get(id) == undefined) {
$.ajax({
url: '/topics/' + id + '.json',
success: function (data) {
Metamaps.Topics.add(data)
callback(Metamaps.Topics.get(id))
DataModel.Topics.add(data)
callback(DataModel.Topics.get(id))
}
})
} else callback(Metamaps.Topics.get(id))
} else callback(DataModel.Topics.get(id))
},
launch: function (id) {
var bb = Metamaps.Backbone
var start = function (data) {
Active.Topic = new bb.Topic(data.topic)
Metamaps.Creators = new bb.MapperCollection(data.creators)
Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives))
Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
Metamaps.Backbone.attachCollectionEvents()
Active.Topic = new DataModel.Topic(data.topic)
DataModel.Creators = new DataModel.MapperCollection(data.creators)
DataModel.Topics = new DataModel.TopicCollection([data.topic].concat(data.relatives))
DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
DataModel.attachCollectionEvents()
document.title = Active.Topic.get('name') + ' | Metamaps'
@ -101,7 +91,7 @@ const Topic = {
}
})
Router.navigate('/topics/' + nodeid)
Active.Topic = Metamaps.Topics.get(nodeid)
Active.Topic = DataModel.Topics.get(nodeid)
}
},
fetchRelatives: function (nodes, metacode_id) {
@ -109,10 +99,10 @@ const Topic = {
var node = $.isArray(nodes) ? nodes[0] : nodes
var topics = Metamaps.Topics.map(function (t) { return t.id })
var topics = DataModel.Topics.map(function (t) { return t.id })
var topics_string = topics.join()
var creators = Metamaps.Creators.map(function (t) { return t.id })
var creators = DataModel.Creators.map(function (t) { return t.id })
var creators_string = creators.join()
var topic = node.getData('topic')
@ -124,13 +114,13 @@ const Topic = {
window.setTimeout(function() { successCallback(data) }, 100)
return
}
if (data.creators.length > 0) Metamaps.Creators.add(data.creators)
if (data.topics.length > 0) Metamaps.Topics.add(data.topics)
if (data.synapses.length > 0) Metamaps.Synapses.add(data.synapses)
if (data.creators.length > 0) DataModel.Creators.add(data.creators)
if (data.topics.length > 0) DataModel.Topics.add(data.topics)
if (data.synapses.length > 0) DataModel.Synapses.add(data.synapses)
var topicColl = new Metamaps.Backbone.TopicCollection(data.topics)
var topicColl = new DataModel.TopicCollection(data.topics)
topicColl.add(topic)
var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses)
var synapseColl = new DataModel.SynapseCollection(data.synapses)
var graph = JIT.convertModelsToJIT(topicColl, synapseColl)[0]
Visualize.mGraph.op.sum(graph, {
@ -142,7 +132,7 @@ const Topic = {
var i, l, t, s
Visualize.mGraph.graph.eachNode(function (n) {
t = Metamaps.Topics.get(n.id)
t = DataModel.Topics.get(n.id)
t.set({ node: n }, { silent: true })
t.updateNode()
@ -152,7 +142,7 @@ const Topic = {
l = edge.getData('synapseIDs').length
for (i = 0; i < l; i++) {
s = Metamaps.Synapses.get(edge.getData('synapseIDs')[i])
s = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
s.set({ edge: edge }, { silent: true })
s.updateEdge()
}
@ -309,25 +299,25 @@ const Topic = {
$(document).trigger(Map.events.editedByActiveMapper)
var metacode = Metamaps.Metacodes.get(Create.newTopic.metacode)
var metacode = DataModel.Metacodes.get(Create.newTopic.metacode)
var topic = new Metamaps.Backbone.Topic({
var topic = new DataModel.Topic({
name: Create.newTopic.name,
metacode_id: metacode.id,
defer_to_map_id: Active.Map.id
})
Metamaps.Topics.add(topic)
DataModel.Topics.add(topic)
if (Create.newTopic.pinned) {
var nextCoords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
var nextCoords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
}
var mapping = new Metamaps.Backbone.Mapping({
var mapping = new DataModel.Mapping({
xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_id: topic.cid,
mappable_type: 'Topic',
})
Metamaps.Mappings.add(mapping)
DataModel.Mappings.add(mapping)
// these can't happen until the value is retrieved, which happens in the line above
if (!Create.newTopic.pinned) Create.newTopic.hide()
@ -348,15 +338,15 @@ const Topic = {
self.get(id, (topic) => {
if (Create.newTopic.pinned) {
var nextCoords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
var nextCoords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
}
var mapping = new Metamaps.Backbone.Mapping({
var mapping = new DataModel.Mapping({
xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_type: 'Topic',
mappable_id: topic.id,
})
Metamaps.Mappings.add(mapping)
DataModel.Mappings.add(mapping)
self.renderTopic(mapping, topic, true, true)
// this blocked the enterKeyHandler from creating a new topic as well
@ -364,26 +354,26 @@ const Topic = {
})
},
getMapFromAutocomplete: function (data) {
var self = Metamaps.Topic
var self = Topic
$(document).trigger(Metamaps.Map.events.editedByActiveMapper)
$(document).trigger(Map.events.editedByActiveMapper)
var metacode = Metamaps.Metacodes.findWhere({ name: 'Metamap' })
var topic = new Metamaps.Backbone.Topic({
var metacode = DataModel.Metacodes.findWhere({ name: 'Metamap' })
var topic = new DataModel.Topic({
name: data.name,
metacode_id: metacode.id,
defer_to_map_id: Metamaps.Active.Map.id,
defer_to_map_id: Active.Map.id,
link: window.location.origin + '/maps/' + data.id
})
Metamaps.Topics.add(topic)
DataModel.Topics.add(topic)
var mapping = new Metamaps.Backbone.Mapping({
xloc: Metamaps.Create.newTopic.x,
yloc: Metamaps.Create.newTopic.y,
var mapping = new DataModel.Mapping({
xloc: Create.newTopic.x,
yloc: Create.newTopic.y,
mappable_id: topic.cid,
mappable_type: 'Topic',
})
Metamaps.Mappings.add(mapping)
DataModel.Mappings.add(mapping)
// these can't happen until the value is retrieved, which happens in the line above
if (!Create.newTopic.pinned) Create.newTopic.hide()
@ -399,14 +389,14 @@ const Topic = {
$(document).trigger(Map.events.editedByActiveMapper)
self.get(id, (topic) => {
var nextCoords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings })
var mapping = new Metamaps.Backbone.Mapping({
var nextCoords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
var mapping = new DataModel.Mapping({
xloc: nextCoords.x,
yloc: nextCoords.y,
mappable_type: 'Topic',
mappable_id: topic.id,
})
Metamaps.Mappings.add(mapping)
DataModel.Mappings.add(mapping)
self.renderTopic(mapping, topic, true, true)
GlobalUI.notifyUser('Topic was added to your map!')
})

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

@ -1,24 +1,26 @@
/* global Metamaps, $, CanvasLoader, Countable, Hogan, embedly */
/* global $, CanvasLoader, Countable, Hogan, embedly */
import Active from './Active'
import DataModel from './DataModel'
import GlobalUI from './GlobalUI'
import Mapper from './Mapper'
import Router from './Router'
import Util from './Util'
import Visualize from './Visualize'
/*
* Metamaps.TopicCard.js
*
* Dependencies:
* - Metamaps.Metacodes
*/
const TopicCard = {
openTopicCard: null, // stores the topic that's currently open
authorizedToEdit: false, // stores boolean for edit permission for open topic card
init: function () {
RAILS_ENV: undefined,
init: function (serverData) {
var self = TopicCard
if (serverData.RAILS_ENV) {
self.RAILS_ENV = serverData.RAILS_ENV
} else {
console.error('RAILS_ENV is not defined! See TopicCard.js init function.')
}
// initialize best_in_place editing
$('.authenticated div.permission.canEdit .best_in_place').best_in_place()
@ -89,6 +91,23 @@ const TopicCard = {
$('.attachments').removeClass('hidden')
$('.CardOnGraph').removeClass('hasAttachment')
},
showLinkLoader: function() {
var loader = new CanvasLoader('embedlyLinkLoader')
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.show() // Hidden by default
},
showLink: function(topic) {
var e = embedly('card', document.getElementById('embedlyLink'))
if (!e && TopicCard.RAILS_ENV != 'development') {
TopicCard.handleInvalidLink()
} else if (!e) {
$('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show()
$('#embedlyLinkLoader').hide()
}
},
bindShowCardListeners: function (topic) {
var self = TopicCard
var showCard = document.getElementById('showcard')
@ -128,20 +147,9 @@ const TopicCard = {
$('.attachments').addClass('hidden')
$('.embeds').append(embedlyEl)
$('.embeds').append('<div id="embedlyLinkLoader"></div>')
var loader = new CanvasLoader('embedlyLinkLoader')
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.show() // Hidden by default
var e = embedly('card', document.getElementById('embedlyLink'))
if (!e && Metamaps.Erb.RAILS_ENV != 'development') {
self.handleInvalidLink()
}
else if (!e) {
$('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show()
$('#embedlyLinkLoader').hide()
}
self.showLinkLoader()
self.showLink(topic)
}
}, 100)
}
@ -150,20 +158,9 @@ const TopicCard = {
// initialize the link card, if there is a link
if (topic.get('link') && topic.get('link') !== '') {
var loader = new CanvasLoader('embedlyLinkLoader')
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.show() // Hidden by default
var e = embedly('card', document.getElementById('embedlyLink'))
self.showLinkLoader()
self.showLink(topic)
self.showLinkRemover()
if (!e && Metamaps.Erb.RAILS_ENV != 'development') {
self.handleInvalidLink()
} else if (!e) {
$('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show()
$('#embedlyLinkLoader').hide()
}
}
var selectingMetacode = false
@ -182,7 +179,7 @@ const TopicCard = {
var metacodeLiClick = function () {
selectingMetacode = false
var metacodeId = parseInt($(this).attr('data-id'))
var metacode = Metamaps.Metacodes.get(metacodeId)
var metacode = DataModel.Metacodes.get(metacodeId)
$('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
.append('<div class="expandMetacodeSelect"></div>')
.attr('class', 'metacodeTitle mbg' + metacode.id)

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

@ -1,9 +1,4 @@
/* global Metamaps, $ */
/*
* Dependencies:
* Metamaps.Erb
*/
/* global $ */
import Backbone from 'backbone'
import { Howl } from 'howler'
@ -126,9 +121,9 @@ var Private = {
Handlers.inputBlur.call(self)
})
},
initializeSounds: function () {
initializeSounds: function (soundUrls) {
this.sound = new Howl({
src: [Metamaps.Erb['sounds/MM_sounds.mp3'], Metamaps.Erb['sounds/MM_sounds.ogg']],
src: soundUrls,
sprite: {
joinmap: [0, 561],
leavemap: [1000, 592],
@ -248,7 +243,7 @@ const ChatView = function (messages, mapper, room) {
Private.attachElements.call(this)
Private.addEventListeners.call(this)
Private.initialMessages.call(this)
Private.initializeSounds.call(this)
Private.initializeSounds.call(this, room.soundUrls)
this.$container.css({
right: '-300px'
})

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

@ -1,4 +1,4 @@
/* global Metamaps, $ */
/* global $ */
import React from 'react'
import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
@ -6,12 +6,9 @@ import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
import Active from '../Active'
import GlobalUI from '../GlobalUI'
import Realtime from '../Realtime'
import Loading from '../Loading'
import Maps from '../../components/Maps'
/*
* - Metamaps.Loading
*/
const ExploreMaps = {
pending: false,
mapper: null,
@ -63,6 +60,7 @@ const ExploreMaps = {
).resize()
if (cb) cb()
Loading.hide()
},
loadMore: function () {
var self = ExploreMaps

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

@ -1,4 +1,4 @@
/* global Metamaps, $ */
/* global $ */
import Backbone from 'backbone'
import attachMediaStream from 'attachmediastream'
@ -7,17 +7,13 @@ import attachMediaStream from 'attachmediastream'
// Backbone.$ = window.$
import Active from '../Active'
import DataModel from '../DataModel'
import Realtime from '../Realtime'
import ChatView from './ChatView'
import VideoView from './VideoView'
/*
* Dependencies:
* Metamaps.Backbone
*/
const Room = function(opts) {
const Room = function(opts = {}) {
var self = this
this.isActiveRoom = false
@ -35,6 +31,7 @@ const Room = function(opts) {
this.chat = new ChatView(this.messages, this.currentMapper, this.room)
this.videos = {}
this.soundUrls = opts.soundUrls
this.init()
}
@ -170,14 +167,14 @@ Room.prototype.init = function () {
var self = this
//this.roomRef.child('messages').push(data)
if (self.chat.alertSound) self.chat.sound.play('sendchat')
var m = new Metamaps.Backbone.Message({
var m = new DataModel.Message({
message: data.message,
resource_id: Active.Map.id,
resource_type: "Map"
})
m.save(null, {
success: function (model, response) {
self.addMessages(new Metamaps.Backbone.MessageCollection(model), false, true)
self.addMessages(new DataModel.MessageCollection(model), false, true)
$(document).trigger(Room.events.newMessage, [model])
},
error: function (model, response) {

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

@ -15,4 +15,6 @@ const Views = {
VideoView,
Room
}
export { ExploreMaps, ChatView, VideoView, Room }
export default Views

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

@ -1,32 +1,27 @@
/* global Metamaps, $ */
/* global $ */
import _ from 'lodash'
import $jit from '../patched/JIT'
import Active from './Active'
import DataModel from './DataModel'
import JIT from './JIT'
import Loading from './Loading'
import Router from './Router'
import TopicCard from './TopicCard'
/*
* Metamaps.Visualize
*
* Dependencies:
* - Metamaps.Loading
* - Metamaps.Metacodes
* - Metamaps.Synapses
* - Metamaps.Topics
*/
const Visualize = {
mGraph: null, // a reference to the graph object.
cameraPosition: null, // stores the camera position when using a 3D visualization
type: 'ForceDirected', // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D"
loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created
touchDragNode: null,
init: function () {
init: function (serverData) {
var self = Visualize
if (serverData.VisualizeType) self.type = serverData.VisualizeType
// disable awkward dragging of the canvas element that would sometimes happen
$('#infovis-canvas').on('dragstart', function (event) {
event.preventDefault()
@ -59,7 +54,7 @@ const Visualize = {
var i, l, startPos, endPos, topic, synapse
self.mGraph.graph.eachNode(function (n) {
topic = Metamaps.Topics.get(n.id)
topic = DataModel.Topics.get(n.id)
topic.set({ node: n }, { silent: true })
topic.updateNode()
@ -69,7 +64,7 @@ const Visualize = {
l = edge.getData('synapseIDs').length
for (i = 0; i < l; i++) {
synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i])
synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
synapse.set({ edge: edge }, { silent: true })
synapse.updateEdge()
}
@ -84,7 +79,7 @@ const Visualize = {
var i, l, startPos, endPos, topic, synapse
self.mGraph.graph.eachNode(function (n) {
topic = Metamaps.Topics.get(n.id)
topic = DataModel.Topics.get(n.id)
topic.set({ node: n }, { silent: true })
topic.updateNode()
mapping = topic.getMapping()
@ -95,7 +90,7 @@ const Visualize = {
l = edge.getData('synapseIDs').length
for (i = 0; i < l; i++) {
synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i])
synapse = DataModel.Synapses.get(edge.getData('synapseIDs')[i])
synapse.set({ edge: edge }, { silent: true })
synapse.updateEdge()
}
@ -161,7 +156,7 @@ const Visualize = {
if (self.type == 'ForceDirected' && Active.Mapper) $.post('/maps/' + Active.Map.id + '/events/user_presence')
function runAnimation () {
Metamaps.Loading.hide()
Loading.hide()
// load JSON data, if it's not empty
if (!self.loadLater) {
// load JSON data.
@ -189,12 +184,12 @@ const Visualize = {
// hold for a maximum of 80 passes, or 4 seconds of waiting time
var tries = 0
function hold () {
var unique = _.uniq(Metamaps.Topics.models, function (metacode) { return metacode.get('metacode_id'); }),
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
_.each(requiredMetacodes, function (metacode_id) {
var metacode = Metamaps.Metacodes.get(metacode_id),
var metacode = DataModel.Metacodes.get(metacode_id),
img = metacode ? metacode.get('image') : false
if (img && (img.complete || (typeof img.naturalWidth !== 'undefined' && img.naturalWidth !== 0))) {

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

@ -1,20 +1,19 @@
/* global Metamaps */
import Account from './Account'
import Active from './Active'
import Admin from './Admin'
import AutoLayout from './AutoLayout'
import Backbone from './Backbone'
import DataModel from './DataModel'
import Control from './Control'
import Create from './Create'
import Debug from './Debug'
import Filter from './Filter'
import GlobalUI, {
Search, CreateMap, ImportDialog, Account as GlobalUI_Account
Search, CreateMap, ImportDialog, Account as GlobalUIAccount
} from './GlobalUI'
import Import from './Import'
import JIT from './JIT'
import Listeners from './Listeners'
import Loading from './Loading'
import Map, { CheatSheet, InfoBox } from './Map'
import Mapper from './Mapper'
import Mobile from './Mobile'
@ -33,12 +32,12 @@ import Util from './Util'
import Views from './Views'
import Visualize from './Visualize'
Metamaps = window.Metamaps || {}
const Metamaps = window.Metamaps || {}
Metamaps.Account = Account
Metamaps.Active = Active
Metamaps.Admin = Admin
Metamaps.AutoLayout = AutoLayout
Metamaps.Backbone = Backbone
Metamaps.DataModel = DataModel
Metamaps.Control = Control
Metamaps.Create = Create
Metamaps.Debug = Debug
@ -46,11 +45,12 @@ Metamaps.Filter = Filter
Metamaps.GlobalUI = GlobalUI
Metamaps.GlobalUI.Search = Search
Metamaps.GlobalUI.CreateMap = CreateMap
Metamaps.GlobalUI.Account = GlobalUI_Account
Metamaps.GlobalUI.Account = GlobalUIAccount
Metamaps.GlobalUI.ImportDialog = ImportDialog
Metamaps.Import = Import
Metamaps.JIT = JIT
Metamaps.Listeners = Listeners
Metamaps.Loading = Loading
Metamaps.Map = Map
Metamaps.Map.CheatSheet = CheatSheet
Metamaps.Map.InfoBox = InfoBox
@ -70,6 +70,10 @@ 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 () {
@ -81,26 +85,26 @@ document.addEventListener('DOMContentLoaded', function () {
Metamaps[prop].hasOwnProperty('init') &&
typeof (Metamaps[prop].init) === 'function'
) {
Metamaps[prop].init()
Metamaps[prop].init(Metamaps.ServerData)
}
}
// load whichever page you are on
if (Metamaps.currentSection === 'explore') {
const capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1)
Views.ExploreMaps.setCollection(Metamaps.Maps[capitalize])
Views.ExploreMaps.setCollection(DataModel.Maps[capitalize])
if (Metamaps.currentPage === 'mapper') {
Views.ExploreMaps.fetchUserThenRender()
ExploreMaps.fetchUserThenRender()
} else {
Views.ExploreMaps.render()
ExploreMaps.render()
}
GlobalUI.showDiv('#explore')
} else if (Metamaps.currentSection === '' && Active.Mapper) {
Views.ExploreMaps.setCollection(Metamaps.Maps.Active)
Views.ExploreMaps.render()
ExploreMaps.setCollection(DataModel.Maps.Active)
ExploreMaps.render()
GlobalUI.showDiv('#explore')
} else if (Active.Map || Active.Topic) {
Metamaps.Loading.show()
Loading.show()
JIT.prepareVizData()
GlobalUI.showDiv('#infovis')
}

4
frontend/src/patched/JIT.js
View file

@ -3261,7 +3261,7 @@ var Canvas;
ctx = base.getCtx(),
scale = base.scaleOffsetX;
//var pattern = new Image();
//pattern.src = Metamaps.Erb['cubes.png']
//pattern.src = Metamaps.ServerData['cubes.png']
//var ptrn = ctx.createPattern(pattern, 'repeat');
//ctx.fillStyle = ptrn;
ctx.fillStyle = Metamaps.Settings.colors.background;
@ -11349,4 +11349,6 @@ $jit.ForceDirected3D.$extend = true;
})($jit.ForceDirected3D);
// START METAMAPS CODE
export default $jit
// END METAMAPS CODE

1
package.json
View file

@ -49,6 +49,7 @@
"devDependencies": {
"babel-eslint": "^6.1.2",
"chai": "^3.5.0",
"circular-dependency-plugin": "^2.0.0",
"eslint": "^3.5.0",
"eslint-config-standard": "^6.2.0",
"eslint-plugin-promise": "^2.0.1",

11
webpack.config.js
View file

@ -12,6 +12,13 @@ if (NODE_ENV === 'production') {
plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
}))
} else {
// enable this to test for circular dependencies
// const CircularDependencyPlugin = require('circular-dependency-plugin')
// plugins.push(new CircularDependencyPlugin({
// exclude: /^node_modules\//,
// failOnError: true
// }))
}
const devtool = NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map'
@ -28,9 +35,7 @@ const config = module.exports = {
{
test: /\.(js|jsx)?$/,
exclude: /node_modules/,
loaders: [
'babel-loader?cacheDirectory&retainLines=true'
]
loader: 'babel-loader?cacheDirectory&retainLines=true'
}
]
},