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

Merge pull request from metamaps/feature/Metamaps-in-frontend

Browse source 
move Metamaps code to webpack
This commit is contained in:
Devin Howard 2016-09-23 14:22:46 +08:00 committed by GitHub
commit eef8a281cb
61 changed files with 4147 additions and 6820 deletions

2
.travis.yml
View file

@ -18,4 +18,4 @@ before_script:
- nvm use stable - nvm use stable
- npm install - npm install
script: script:
- bundle exec rspec && npm test && bundle exec brakeman -q -z - bundle exec rspec && bundle exec brakeman -q -z && npm test

3
Gemfile.lock
View file

@ -332,8 +332,5 @@ DEPENDENCIES
uglifier uglifier
uservoice-ruby uservoice-ruby
RUBY VERSION
ruby 2.3.0p0
BUNDLED WITH BUNDLED WITH
1.12.5 1.12.5

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

@ -13,37 +13,7 @@
//= require jquery //= require jquery
//= require jquery-ui //= require jquery-ui
//= require jquery_ujs //= require jquery_ujs
//= require ./webpacked/metamaps.bundle
//= require_directory ./lib //= require_directory ./lib
//= require ./src/Metamaps.GlobalUI //= require ./src/Metamaps.Erb
//= require ./src/Metamaps.Router //= require ./webpacked/metamaps.bundle
//= require ./src/Metamaps.Backbone
//= require ./src/Metamaps.Views
//= require ./src/views/chatView
//= require ./src/views/videoView
//= require ./src/views/room
//= require ./src/JIT
//= require ./src/check-canvas-support //= require ./src/check-canvas-support
//= require ./src/Metamaps
//= require ./src/Metamaps.Create
//= require ./src/Metamaps.TopicCard
//= require ./src/Metamaps.SynapseCard
//= require ./src/Metamaps.Visualize
//= require ./src/Metamaps.Util
//= require ./src/Metamaps.Realtime
//= require ./src/Metamaps.Control
//= require ./src/Metamaps.Filter
//= require ./src/Metamaps.Listeners
//= require ./src/Metamaps.Organize
//= require ./src/Metamaps.Topic
//= require ./src/Metamaps.Synapse
//= require ./src/Metamaps.Map
//= require ./src/Metamaps.Account
//= require ./src/Metamaps.Mapper
//= require ./src/Metamaps.Mobile
//= require ./src/Metamaps.Admin
//= require ./src/Metamaps.Import
//= require ./src/Metamaps.AutoLayout
//= require ./src/Metamaps.PasteInput
//= require ./src/Metamaps.JIT
//= require ./src/Metamaps.Debug

2756
app/assets/javascripts/lib/Autolinker.js
View file

File diff suppressed because it is too large Load diff

13
app/assets/javascripts/src/Metamaps.Debug.js
View file

@ -1,13 +0,0 @@
/*
* Metamaps.Debug.js.erb
*
* Dependencies: none!
*/
Metamaps.Debug = function () {
console.debug(Metamaps)
console.debug('Metamaps Version: ' + Metamaps.VERSION)
}
Metamaps.debug = function () {
Metamaps.Debug()
}

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

@ -0,0 +1,20 @@
/* 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['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['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 %>'

717
app/assets/javascripts/src/Metamaps.GlobalUI.js
View file

@ -1,717 +0,0 @@
var Metamaps = window.Metamaps || {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
/*
* unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps
* object will be these
GlobalUI
Active
Maps
Mappers
Backbone
* all these get added when you are on a page with the Javascript Infovis Toolkit
Settings
Touch
Mouse
Selected
Metacodes
Topics
Synapses
Mappings
Create
TopicCard
SynapseCard
Visualize
Util
Realtime
Control
Filter
Listeners
Organize
Map
Mapper
Topic
Synapse
JIT
*/
Metamaps.Active = {
Map: null,
Topic: null,
Mapper: null
};
Metamaps.Maps = {};
$(document).ready(function () {
// initialize all the modules
for (var prop in Metamaps) {
// this runs the init function within each sub-object on the Metamaps one
if (Metamaps.hasOwnProperty(prop) &&
Metamaps[prop] != null &&
Metamaps[prop].hasOwnProperty('init') &&
typeof (Metamaps[prop].init) == 'function'
) {
Metamaps[prop].init()
}
}
// load whichever page you are on
if (Metamaps.currentSection === "explore") {
var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1)
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] )
if (Metamaps.currentPage === "mapper") {
Metamaps.Views.exploreMaps.fetchUserThenRender()
}
else {
Metamaps.Views.exploreMaps.render()
}
Metamaps.GlobalUI.showDiv('#explore')
}
else if (Metamaps.currentSection === "" && Metamaps.Active.Mapper) {
Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active)
Metamaps.Views.exploreMaps.render()
Metamaps.GlobalUI.showDiv('#explore')
}
else if (Metamaps.Active.Map || Metamaps.Active.Topic) {
Metamaps.Loading.show()
Metamaps.JIT.prepareVizData()
Metamaps.GlobalUI.showDiv('#infovis')
}
});
Metamaps.GlobalUI = {
notifyTimeout: null,
lightbox: null,
init: function () {
var self = Metamaps.GlobalUI;
self.Search.init();
self.CreateMap.init();
self.Account.init();
if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
//bind lightbox clicks
$('.openLightbox').click(function (event) {
self.openLightbox($(this).attr('data-open'));
event.preventDefault();
return false;
});
$('#lightbox_screen, #lightbox_close').click(self.closeLightbox);
// initialize global backbone models and collections
if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.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()
$(selector).animate({
opacity: 1
}, 200, 'easeOutCubic')
},
hideDiv: function (selector) {
$(selector).animate({
opacity: 0
}, 200, 'easeInCubic', function () { $(this).hide() })
},
openLightbox: function (which) {
var self = Metamaps.GlobalUI;
$('.lightboxContent').hide();
$('#' + which).show();
self.lightbox = which;
$('#lightbox_overlay').show();
var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
// animate the content in from the bottom
$('#lightbox_main').animate({
'top': '50%',
'margin-top': heightOfContent
}, 200, 'easeOutCubic');
// fade the black overlay in
$('#lightbox_screen').animate({
'opacity': '0.42'
}, 200);
if (which == "switchMetacodes") {
Metamaps.Create.isSwitchingSet = true;
}
},
closeLightbox: function (event) {
var self = Metamaps.GlobalUI;
if (event) event.preventDefault();
// animate the lightbox content offscreen
$('#lightbox_main').animate({
'top': '100%',
'margin-top': '0'
}, 200, 'easeInCubic');
// fade the black overlay out
$('#lightbox_screen').animate({
'opacity': '0.0'
}, 200, function () {
$('#lightbox_overlay').hide();
});
if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map');
if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map');
if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
Metamaps.Create.cancelMetacodeSetSwitch();
}
self.lightbox = null;
},
notifyUser: function (message, leaveOpen) {
var self = Metamaps.GlobalUI;
$('#toast').html(message)
self.showDiv('#toast')
clearTimeout(self.notifyTimeOut);
if (!leaveOpen) {
self.notifyTimeOut = setTimeout(function () {
self.hideDiv('#toast')
}, 8000);
}
},
clearNotify: function() {
var self = Metamaps.GlobalUI;
clearTimeout(self.notifyTimeOut);
self.hideDiv('#toast')
},
shareInvite: function(inviteLink) {
window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
}
};
Metamaps.GlobalUI.CreateMap = {
newMap: null,
emptyMapForm: "",
emptyForkMapForm: "",
topicsToMap: [],
synapsesToMap: [],
init: function () {
var self = Metamaps.GlobalUI.CreateMap;
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
self.bindFormEvents();
self.emptyMapForm = $('#new_map').html();
},
bindFormEvents: function () {
var self = Metamaps.GlobalUI.CreateMap;
$('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) {
if (event.keyCode === 13) self.submit()
})
$('.new_map button.cancel').unbind().bind('click', function (event) {
event.preventDefault();
Metamaps.GlobalUI.closeLightbox();
});
$('.new_map button.submitMap').unbind().bind('click', self.submit);
// bind permission changer events on the createMap form
$('.permIcon').unbind().bind('click', self.switchPermission);
},
closeSuccess: function () {
$('#mapCreatedSuccess').fadeOut(300, function(){
$(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 = Metamaps.Active.Map ? 'map' : 'page';
var stringEnd = "</a></div>";
return stringStart + page + stringEnd;
},
switchPermission: function () {
var self = Metamaps.GlobalUI.CreateMap;
self.newMap.set('permission', $(this).attr('data-permission'));
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
$(this).find('.mapPermIcon').addClass('selected');
var permText = $(this).find('.tip').html();
$(this).parents('.new_map').find('.permText').html(permText);
},
submit: function (event) {
if (event) event.preventDefault();
var self = Metamaps.GlobalUI.CreateMap;
if (Metamaps.GlobalUI.lightbox === 'forkmap') {
self.newMap.set('topicsToMap', self.topicsToMap);
self.newMap.set('synapsesToMap', self.synapsesToMap);
}
var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId);
self.newMap.set('name', $form.find('#map_name').val());
self.newMap.set('desc', $form.find('#map_desc').val());
if (self.newMap.get('name').length===0){
self.throwMapNameError();
return;
}
self.newMap.save(null, {
success: self.success
// TODO add error message
});
Metamaps.GlobalUI.closeLightbox();
Metamaps.GlobalUI.notifyUser('Working...');
},
throwMapNameError: function () {
var self = Metamaps.GlobalUI.CreateMap;
var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId);
var message = $("<div class='feedback_message'>Please enter a map name...</div>");
$form.find('#map_name').after(message);
setTimeout(function(){
message.fadeOut('fast', function(){
message.remove();
});
}, 5000);
},
success: function (model) {
var self = Metamaps.GlobalUI.CreateMap;
//push the new map onto the collection of 'my maps'
Metamaps.Maps.Mine.add(model);
var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var form = $(formId);
Metamaps.GlobalUI.clearNotify();
$('#wrapper').append(self.generateSuccessMessage(model.id));
},
reset: function (id) {
var self = Metamaps.GlobalUI.CreateMap;
var form = $('#' + id);
if (id === "fork_map") {
self.topicsToMap = [];
self.synapsesToMap = [];
form.html(self.emptyForkMapForm);
}
else {
form.html(self.emptyMapForm);
}
self.bindFormEvents();
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
return false;
},
};
Metamaps.GlobalUI.Account = {
isOpen: false,
changing: false,
init: function () {
var self = Metamaps.GlobalUI.Account;
$('.sidebarAccountIcon').click(self.toggleBox);
$('.sidebarAccountBox').click(function(event){
event.stopPropagation();
});
$('body').click(self.close);
},
toggleBox: function (event) {
var self = Metamaps.GlobalUI.Account;
if (self.isOpen) self.close();
else self.open();
event.stopPropagation();
},
open: function () {
var self = Metamaps.GlobalUI.Account;
Metamaps.Filter.close();
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
if (!self.isOpen && !self.changing) {
self.changing = true;
$('.sidebarAccountBox').fadeIn(200, function () {
self.changing = false;
self.isOpen = true;
$('.sidebarAccountBox #user_email').focus();
});
}
},
close: function () {
var self = Metamaps.GlobalUI.Account;
$('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
if (!self.changing) {
self.changing = true;
$('.sidebarAccountBox #user_email').blur();
$('.sidebarAccountBox').fadeOut(200, function () {
self.changing = false;
self.isOpen = false;
});
}
}
};
Metamaps.GlobalUI.Search = {
locked: false,
isOpen: false,
limitTopicsToMe: false,
limitMapsToMe: false,
timeOut: null,
changing: false,
optionsInitialized: false,
init: function () {
var self = Metamaps.GlobalUI.Search;
var loader = new CanvasLoader('searchLoading');
loader.setColor('#4fb5c0'); // default is '#000000'
loader.setDiameter(24); // default is 40
loader.setDensity(41); // default is 40
loader.setRange(0.9); // default is 1.3
loader.show(); // Hidden by default
// bind the hover events
$(".sidebarSearch").hover(function () {
self.open()
}, function () {
self.close(800, false)
});
$('.sidebarSearchIcon').click(function (e) {
$('.sidebarSearchField').focus();
});
$('.sidebarSearch').click(function (e) {
e.stopPropagation();
});
$('body').click(function (e) {
self.close(0, false);
});
// open if the search is closed and user hits ctrl+/
// close if they hit ESC
$('body').bind('keyup', function (e) {
switch (e.which) {
case 191:
if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) {
self.open(true); // true for focus
}
break;
case 27:
if (self.isOpen) {
self.close(0, true);
}
break;
default:
break; //console.log(e.which);
}
});
self.startTypeahead();
},
lock: function() {
var self = Metamaps.GlobalUI.Search;
self.locked = true;
},
unlock: function() {
var self = Metamaps.GlobalUI.Search;
self.locked = false;
},
open: function (focus) {
var self = Metamaps.GlobalUI.Search;
clearTimeout(self.timeOut);
if (!self.isOpen && !self.changing && !self.locked) {
self.changing = true;
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
width: '400px'
}, 300, function () {
if (focus) $('.sidebarSearchField').focus();
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({
padding: '7px 10px 3px 10px',
width: '380px'
});
self.changing = false;
self.isOpen = true;
});
}
},
close: function (closeAfter, bypass) {
// for now
return
var self = Metamaps.GlobalUI.Search;
self.timeOut = setTimeout(function () {
if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() == '')) {
self.changing = true;
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({
padding: '7px 0 3px 0',
width: '400px'
});
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
width: '0'
}, 300, function () {
$('.sidebarSearchField').typeahead('val', '');
$('.sidebarSearchField').blur();
self.changing = false;
self.isOpen = false;
});
}
}, closeAfter);
},
startTypeahead: function () {
var self = Metamaps.GlobalUI.Search;
var mapheader = Metamaps.Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>';
var topicheader = Metamaps.Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>';
var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>';
var topics = {
name: 'topics',
limit: 9999,
display: function(s) { return s.label; },
templates: {
notFound: function(s) {
return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
value: "No results",
label: "No results",
typeImageURL: Metamaps.Erb['icons/wildcard.png'],
rtype: "noresult"
});
},
header: topicheader,
suggestion: function(s) {
return Hogan.compile($('#topicSearchTemplate').html()).render(s);
},
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/topics',
prepare: function(query, settings) {
settings.url += '?term=' + query;
if (Metamaps.Active.Mapper && self.limitTopicsToMe) {
settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
}
return settings;
},
},
}),
};
var maps = {
name: 'maps',
limit: 9999,
display: function(s) { return s.label; },
templates: {
notFound: function(s) {
return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({
value: "No results",
label: "No results",
rtype: "noresult"
});
},
header: mapheader,
suggestion: function(s) {
return Hogan.compile($('#mapSearchTemplate').html()).render(s);
},
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/maps',
prepare: function(query, settings) {
settings.url += '?term=' + query;
if (Metamaps.Active.Mapper && self.limitMapsToMe) {
settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
}
return settings;
},
},
}),
};
var mappers = {
name: 'mappers',
limit: 9999,
display: function(s) { return s.label; },
templates: {
notFound: function(s) {
return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({
value: "No results",
label: "No results",
rtype: "noresult",
profile: Metamaps.Erb['user.png']
});
},
header: mapperheader,
suggestion: function(s) {
return Hogan.compile($('#mapperSearchTemplate').html()).render(s);
},
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/mappers?term=%QUERY',
wildcard: '%QUERY',
},
}),
};
// Take all that crazy setup data and put it together into one beautiful typeahead call!
$('.sidebarSearchField').typeahead(
{
highlight: true,
},
[topics, maps, mappers]
);
//Set max height of the search results box to prevent it from covering bottom left footer
$('.sidebarSearchField').bind('typeahead:render', function (event) {
self.initSearchOptions();
self.hideLoader();
var h = $(window).height();
$(".tt-dropdown-menu").css('max-height', h - 100);
if (self.limitTopicsToMe) {
$('#limitTopicsToMe').prop('checked', true);
}
if (self.limitMapsToMe) {
$('#limitMapsToMe').prop('checked', true);
}
});
$(window).resize(function () {
var h = $(window).height();
$(".tt-dropdown-menu").css('max-height', h - 100);
});
// tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
$('.sidebarSearchField').bind('typeahead:select', self.handleResultClick);
// don't do it, if they clicked on a 'addToMap' button
$('.sidebarSearch button.addToMap').click(function (event) {
event.stopPropagation();
});
// make sure that when you click on 'limit to me' or 'toggle section' it works
$('.sidebarSearchField.tt-input').keyup(function(){
if ($('.sidebarSearchField.tt-input').val() === '') {
self.hideLoader();
} else {
self.showLoader();
}
});
},
handleResultClick: function (event, datum, dataset) {
var self = Metamaps.GlobalUI.Search;
self.hideLoader();
if (["topic", "map", "mapper"].indexOf(datum.rtype) !== -1) {
self.close(0, true);
var win;
if (datum.rtype == "topic") {
Metamaps.Router.topics(datum.id);
} else if (datum.rtype == "map") {
Metamaps.Router.maps(datum.id);
} else if (datum.rtype == "mapper") {
Metamaps.Router.explore("mapper", datum.id);
}
}
},
initSearchOptions: function () {
var self = Metamaps.GlobalUI.Search;
function toggleResultSet(set) {
var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult');
if (s.is(':visible')) {
s.hide();
$(this).removeClass('minimizeResults').addClass('maximizeResults');
} else {
s.show();
$(this).removeClass('maximizeResults').addClass('minimizeResults');
}
}
$('.limitToMe').unbind().bind("change", function (e) {
if ($(this).attr('id') == 'limitTopicsToMe') {
self.limitTopicsToMe = !self.limitTopicsToMe;
}
if ($(this).attr('id') == 'limitMapsToMe') {
self.limitMapsToMe = !self.limitMapsToMe;
}
// set the value of the search equal to itself to retrigger the
// autocomplete event
var searchQuery = $('.sidebarSearchField.tt-input').val();
$(".sidebarSearchField").typeahead('val', '')
.typeahead('val', searchQuery);
});
// when the user clicks minimize section, hide the results for that section
$('.minimizeMapperResults').unbind().click(function (e) {
toggleResultSet.call(this, 'mappers');
});
$('.minimizeTopicResults').unbind().click(function (e) {
toggleResultSet.call(this, 'topics');
});
$('.minimizeMapResults').unbind().click(function (e) {
toggleResultSet.call(this, 'maps');
});
},
hideLoader: function () {
$('#searchLoading').hide();
},
showLoader: function () {
$('#searchLoading').show();
}
};

122
app/assets/javascripts/src/Metamaps.Listeners.js
View file

@ -1,122 +0,0 @@
/* global Metamaps, $ */
/*
* Metamaps.Listeners.js.erb
*
* Dependencies:
* - Metamaps.Active
* - Metamaps.Control
* - Metamaps.JIT
* - Metamaps.Visualize
*/
Metamaps.Listeners = {
init: function () {
var self = this
$(document).on('keydown', function (e) {
if (!(Metamaps.Active.Map || Metamaps.Active.Topic)) return
switch (e.which) {
case 13: // if enter key is pressed
Metamaps.JIT.enterKeyHandler()
e.preventDefault()
break
case 27: // if esc key is pressed
Metamaps.JIT.escKeyHandler()
break
case 65: // if a or A is pressed
if (e.ctrlKey) {
Metamaps.Control.deselectAllNodes()
Metamaps.Control.deselectAllEdges()
e.preventDefault()
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
Metamaps.Control.selectNode(n, e)
})
Metamaps.Visualize.mGraph.plot()
}
break
case 68: // if d or D is pressed
if (e.ctrlKey) {
e.preventDefault()
Metamaps.Control.deleteSelected()
}
break
case 69: // if e or E is pressed
if (e.ctrlKey && Metamaps.Active.Map) {
e.preventDefault()
Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas)
break
}
if (e.altKey && Metamaps.Active.Topic) {
e.preventDefault()
if (Metamaps.Active.Topic) {
self.centerAndReveal(Metamaps.Selected.Nodes, {
center: true,
reveal: false
})
}
break
}
break
case 72: // if h or H is pressed
if (e.ctrlKey) {
e.preventDefault()
Metamaps.Control.hideSelectedNodes()
Metamaps.Control.hideSelectedEdges()
}
break
case 77: // if m or M is pressed
if (e.ctrlKey) {
e.preventDefault()
Metamaps.Control.removeSelectedNodes()
Metamaps.Control.removeSelectedEdges()
}
break
case 82: // if r or R is pressed
if (e.altKey && Metamaps.Active.Topic) {
e.preventDefault()
self.centerAndReveal(Metamaps.Selected.Nodes, {
center: false,
reveal: true
})
}
break
case 84: // if t or T is pressed
if (e.altKey && Metamaps.Active.Topic) {
e.preventDefault()
self.centerAndReveal(Metamaps.Selected.Nodes, {
center: true,
reveal: true
})
}
break
default:
// console.log(e.which)
break
}
})
$(window).resize(function () {
if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height())
if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition()
if (Metamaps.Active.Map && Metamaps.Realtime.inConversation) Metamaps.Realtime.positionVideos()
Metamaps.Mobile.resizeTitle()
})
},
centerAndReveal: function(nodes, opts) {
if (nodes.length < 1) return
var node = nodes[nodes.length - 1]
if (opts.center && opts.reveal) {
Metamaps.Topic.centerOn(node.id, function() {
Metamaps.Topic.fetchRelatives(nodes)
})
} else if (opts.center) {
Metamaps.Topic.centerOn(node.id)
} else if (opts.reveal) {
Metamaps.Topic.fetchRelatives(nodes)
}
}
}; // end Metamaps.Listeners

754
app/assets/javascripts/src/Metamaps.Map.js
View file

@ -1,754 +0,0 @@
/* global Metamaps, $ */
/*
* Metamaps.Map.js.erb
*
* Dependencies:
* - Metamaps.AutoLayout
* - Metamaps.Create
* - Metamaps.Erb
* - Metamaps.Filter
* - Metamaps.JIT
* - Metamaps.Loading
* - Metamaps.Maps
* - Metamaps.Realtime
* - Metamaps.Router
* - Metamaps.Selected
* - Metamaps.SynapseCard
* - Metamaps.TopicCard
* - Metamaps.Visualize
* - Metamaps.Active
* - Metamaps.Backbone
* - Metamaps.GlobalUI
* - Metamaps.Mappers
* - Metamaps.Mappings
* - Metamaps.Messages
* - Metamaps.Synapses
* - Metamaps.Topics
*
* Major sub-modules:
* - Metamaps.Map.CheatSheet
* - Metamaps.Map.InfoBox
*/
Metamaps.Map = {
events: {
editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
},
init: function () {
var self = Metamaps.Map
// prevent right clicks on the main canvas, so as to not get in the way of our right clicks
$('#center-container').bind('contextmenu', function (e) {
return false
})
$('.starMap').click(function () {
if ($(this).is('.starred')) self.unstar()
else self.star()
})
$('.sidebarFork').click(function () {
self.fork()
})
Metamaps.GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
self.updateStar()
self.InfoBox.init()
self.CheatSheet.init()
$(document).on(Metamaps.Map.events.editedByActiveMapper, self.editedByActiveMapper)
},
launch: function (id) {
var bb = Metamaps.Backbone
var start = function (data) {
Metamaps.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()
var map = Metamaps.Active.Map
var mapper = Metamaps.Active.Mapper
// add class to .wrapper for specifying whether you can edit the map
if (map.authorizeToEdit(mapper)) {
$('.wrapper').addClass('canEditMap')
}
// add class to .wrapper for specifying if the map can
// be collaborated on
if (map.get('permission') === 'commons') {
$('.wrapper').addClass('commonsMap')
}
Metamaps.Map.updateStar()
// set filter mapper H3 text
$('#filter_by_mapper h3').html('MAPPERS')
// build and render the visualization
Metamaps.Visualize.type = 'ForceDirected'
Metamaps.JIT.prepareVizData()
// update filters
Metamaps.Filter.reset()
// reset selected arrays
Metamaps.Selected.reset()
// set the proper mapinfobox content
Metamaps.Map.InfoBox.load()
// these three update the actual filter box with the right list items
Metamaps.Filter.checkMetacodes()
Metamaps.Filter.checkSynapses()
Metamaps.Filter.checkMappers()
Metamaps.Realtime.startActiveMap()
Metamaps.Loading.hide()
// for mobile
$('#header_content').html(map.get('name'))
}
$.ajax({
url: '/maps/' + id + '/contains.json',
success: start
})
},
end: function () {
if (Metamaps.Active.Map) {
$('.wrapper').removeClass('canEditMap commonsMap')
Metamaps.AutoLayout.resetSpiral()
$('.rightclickmenu').remove()
Metamaps.TopicCard.hideCard()
Metamaps.SynapseCard.hideCard()
Metamaps.Create.newTopic.hide(true) // true means force (and override pinned)
Metamaps.Create.newSynapse.hide()
Metamaps.Filter.close()
Metamaps.Map.InfoBox.close()
Metamaps.Realtime.endActiveMap()
}
},
updateStar: function () {
if (!Metamaps.Active.Mapper || !Metamaps.Stars) return
// update the star/unstar icon
if (Metamaps.Stars.find(function (s) { return s.user_id === Metamaps.Active.Mapper.id })) {
$('.starMap').addClass('starred')
$('.starMap .tooltipsAbove').html('Unstar')
} else {
$('.starMap').removeClass('starred')
$('.starMap .tooltipsAbove').html('Star')
}
},
star: function () {
var self = Metamaps.Map
if (!Metamaps.Active.Map) return
$.post('/maps/' + Metamaps.Active.Map.id + '/star')
Metamaps.Stars.push({ user_id: Metamaps.Active.Mapper.id, map_id: Metamaps.Active.Map.id })
Metamaps.Maps.Starred.add(Metamaps.Active.Map)
Metamaps.GlobalUI.notifyUser('Map is now starred')
self.updateStar()
},
unstar: function () {
var self = Metamaps.Map
if (!Metamaps.Active.Map) return
$.post('/maps/' + Metamaps.Active.Map.id + '/unstar')
Metamaps.Stars = Metamaps.Stars.filter(function (s) { return s.user_id != Metamaps.Active.Mapper.id })
Metamaps.Maps.Starred.remove(Metamaps.Active.Map)
self.updateStar()
},
fork: function () {
Metamaps.GlobalUI.openLightbox('forkmap')
var nodes_data = '',
synapses_data = ''
var nodes_array = []
var synapses_array = []
// collect the unfiltered topics
Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
// if the opacity is less than 1 then it's filtered
if (n.getData('alpha') === 1) {
var id = n.getData('topic').id
nodes_array.push(id)
var x, y
if (n.pos.x && n.pos.y) {
x = n.pos.x
y = n.pos.y
} else {
var x = Math.cos(n.pos.theta) * n.pos.rho
var y = Math.sin(n.pos.theta) * n.pos.rho
}
nodes_data += id + '/' + x + '/' + y + ','
}
})
// collect the unfiltered synapses
Metamaps.Synapses.each(function (synapse) {
var desc = synapse.get('desc')
var descNotFiltered = Metamaps.Filter.visible.synapses.indexOf(desc) > -1
// make sure that both topics are being added, otherwise, it
// doesn't make sense to add the synapse
var topicsNotFiltered = nodes_array.indexOf(synapse.get('node1_id')) > -1
topicsNotFiltered = topicsNotFiltered && nodes_array.indexOf(synapse.get('node2_id')) > -1
if (descNotFiltered && topicsNotFiltered) {
synapses_array.push(synapse.id)
}
})
synapses_data = synapses_array.join()
nodes_data = nodes_data.slice(0, -1)
Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data
Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data
},
leavePrivateMap: function () {
var map = Metamaps.Active.Map
Metamaps.Maps.Active.remove(map)
Metamaps.Maps.Featured.remove(map)
Metamaps.Router.home()
Metamaps.GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
},
cantEditNow: function () {
Metamaps.Realtime.turnOff(true); // true is for 'silence'
Metamaps.GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.')
Metamaps.Active.Map.trigger('changeByOther')
},
canEditNow: function () {
var confirmString = "You've been granted permission to edit this map. "
confirmString += 'Do you want to reload and enable realtime collaboration?'
var c = confirm(confirmString)
if (c) {
Metamaps.Router.maps(Metamaps.Active.Map.id)
}
},
editedByActiveMapper: function () {
if (Metamaps.Active.Mapper) {
Metamaps.Mappers.add(Metamaps.Active.Mapper)
}
},
exportImage: function () {
var canvas = {}
canvas.canvas = document.createElement('canvas')
canvas.canvas.width = 1880 // 960
canvas.canvas.height = 1260 // 630
canvas.scaleOffsetX = 1
canvas.scaleOffsetY = 1
canvas.translateOffsetY = 0
canvas.translateOffsetX = 0
canvas.denySelected = true
canvas.getSize = function () {
if (this.size) return this.size
var canvas = this.canvas
return this.size = {
width: canvas.width,
height: canvas.height
}
}
canvas.scale = function (x, y) {
var px = this.scaleOffsetX * x,
py = this.scaleOffsetY * y
var dx = this.translateOffsetX * (x - 1) / px,
dy = this.translateOffsetY * (y - 1) / py
this.scaleOffsetX = px
this.scaleOffsetY = py
this.getCtx().scale(x, y)
this.translate(dx, dy)
}
canvas.translate = function (x, y) {
var sx = this.scaleOffsetX,
sy = this.scaleOffsetY
this.translateOffsetX += x * sx
this.translateOffsetY += y * sy
this.getCtx().translate(x, y)
}
canvas.getCtx = function () {
return this.canvas.getContext('2d')
}
// center it
canvas.getCtx().translate(1880 / 2, 1260 / 2)
var mGraph = Metamaps.Visualize.mGraph
var id = mGraph.root
var root = mGraph.graph.getNode(id)
var T = !!root.visited
// pass true to avoid basing it on a selection
Metamaps.JIT.zoomExtents(null, canvas, true)
var c = canvas.canvas,
ctx = canvas.getCtx(),
scale = canvas.scaleOffsetX
// draw a grey background
ctx.fillStyle = '#d8d9da'
var xPoint = (-(c.width / scale) / 2) - (canvas.translateOffsetX / scale),
yPoint = (-(c.height / scale) / 2) - (canvas.translateOffsetY / scale)
ctx.fillRect(xPoint, yPoint, c.width / scale, c.height / scale)
// draw the graph
mGraph.graph.eachNode(function (node) {
var nodeAlpha = node.getData('alpha')
node.eachAdjacency(function (adj) {
var nodeTo = adj.nodeTo
if (!!nodeTo.visited === T && node.drawn && nodeTo.drawn) {
mGraph.fx.plotLine(adj, canvas)
}
})
if (node.drawn) {
mGraph.fx.plotNode(node, canvas)
}
if (!mGraph.labelsHidden) {
if (node.drawn && nodeAlpha >= 0.95) {
mGraph.labels.plotLabel(canvas, node)
} else {
mGraph.labels.hideLabel(node, false)
}
}
node.visited = !T
})
var imageData = {
encoded_image: canvas.canvas.toDataURL()
}
var map = Metamaps.Active.Map
var today = new Date()
var dd = today.getDate()
var mm = today.getMonth() + 1; // January is 0!
var yyyy = today.getFullYear()
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = mm + '/' + dd + '/' + yyyy
var mapName = map.get('name').split(' ').join([separator = '-'])
var downloadMessage = ''
downloadMessage += 'Captured map screenshot! '
downloadMessage += "<a href='" + imageData.encoded_image + "' "
downloadMessage += "download='metamap-" + map.id + '-' + mapName + '-' + today + ".png'>DOWNLOAD</a>"
Metamaps.GlobalUI.notifyUser(downloadMessage)
$.ajax({
type: 'POST',
dataType: 'json',
url: '/maps/' + Metamaps.Active.Map.id + '/upload_screenshot',
data: imageData,
success: function (data) {
console.log('successfully uploaded map screenshot')
},
error: function () {
console.log('failed to save map screenshot')
}
})
}
}
/*
*
* CHEATSHEET
*
*/
Metamaps.Map.CheatSheet = {
init: function () {
// tab the cheatsheet
$('#cheatSheet').tabs()
$('#quickReference').tabs().addClass('ui-tabs-vertical ui-helper-clearfix')
$('#quickReference .ui-tabs-nav li').removeClass('ui-corner-top').addClass('ui-corner-left')
// id = the id of a vimeo video
var switchVideo = function (element, id) {
$('.tutorialItem').removeClass('active')
$(element).addClass('active')
$('#tutorialVideo').attr('src', '//player.vimeo.com/video/' + id)
}
$('#gettingStarted').click(function () {
// switchVideo(this,'88334167')
})
$('#upYourSkillz').click(function () {
// switchVideo(this,'100118167')
})
$('#advancedMapping').click(function () {
// switchVideo(this,'88334167')
})
}
}; // end Metamaps.Map.CheatSheet
/*
*
* INFOBOX
*
*/
Metamaps.Map.InfoBox = {
isOpen: false,
changing: false,
selectingPermission: false,
changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, and the permission of all the topics and synapses you have authority to change will change as well.</div>",
nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="textarea" data-activator="#mapInfoName">{{name}}</span>',
descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description..." data-type="textarea" data-activator="#mapInfoDesc">{{desc}}</span>',
init: function () {
var self = Metamaps.Map.InfoBox
$('.mapInfoIcon').click(self.toggleBox)
$('.mapInfoBox').click(function (event) {
event.stopPropagation()
})
$('body').click(self.close)
self.attachEventListeners()
self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
var querystring = window.location.search.replace(/^\?/, '')
if (querystring == 'new') {
self.open()
$('.mapInfoBox').addClass('mapRequestTitle')
}
},
toggleBox: function (event) {
var self = Metamaps.Map.InfoBox
if (self.isOpen) self.close()
else self.open()
event.stopPropagation()
},
open: function () {
var self = Metamaps.Map.InfoBox
$('.mapInfoIcon div').addClass('hide')
if (!self.isOpen && !self.changing) {
self.changing = true
$('.mapInfoBox').fadeIn(200, function () {
self.changing = false
self.isOpen = true
})
}
},
close: function () {
var self = Metamaps.Map.InfoBox
$('.mapInfoIcon div').removeClass('hide')
if (!self.changing) {
self.changing = true
$('.mapInfoBox').fadeOut(200, function () {
self.changing = false
self.isOpen = false
self.hidePermissionSelect()
$('.mapContributors .tip').hide()
})
}
},
load: function () {
var self = Metamaps.Map.InfoBox
var map = Metamaps.Active.Map
var obj = map.pick('permission', 'topic_count', 'synapse_count')
var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper)
var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper)
var relevantPeople = map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.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')
obj['desc'] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get('desc')}) : map.get('desc')
obj['map_creator_tip'] = isCreator ? self.changePermissionText : ''
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_list'] = self.createContributorList()
obj['user_name'] = isCreator ? 'You' : map.get('user_name')
obj['created_at'] = map.get('created_at_clean')
obj['updated_at'] = map.get('updated_at_clean')
var classes = isCreator ? 'yourMap' : ''
classes += canEdit ? ' canEdit' : ''
classes += shareable ? ' shareable' : ''
$('.mapInfoBox').removeClass('shareable yourMap canEdit')
.addClass(classes)
.html(self.generateBoxHTML.render(obj))
self.attachEventListeners()
},
attachEventListeners: function () {
var self = Metamaps.Map.InfoBox
$('.mapInfoBox.canEdit .best_in_place').best_in_place()
// because anyone who can edit the map can change the map title
var bipName = $('.mapInfoBox .best_in_place_name')
bipName.unbind('best_in_place:activate').bind('best_in_place:activate', function () {
var $el = bipName.find('textarea')
var el = $el[0]
$el.attr('maxlength', '140')
$('.mapInfoName').append('<div class="nameCounter forMap"></div>')
var callback = function (data) {
$('.nameCounter.forMap').html(data.all + '/140')
}
Countable.live(el, callback)
})
bipName.unbind('best_in_place:deactivate').bind('best_in_place:deactivate', function () {
$('.nameCounter.forMap').remove()
})
$('.mapInfoName .best_in_place_name').unbind('ajax:success').bind('ajax:success', function () {
var name = $(this).html()
Metamaps.Active.Map.set('name', name)
Metamaps.Active.Map.trigger('saved')
// mobile menu
$('#header_content').html(name)
$('.mapInfoBox').removeClass('mapRequestTitle')
document.title = name + ' | Metamaps'
})
$('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () {
var desc = $(this).html()
Metamaps.Active.Map.set('desc', desc)
Metamaps.Active.Map.trigger('saved')
})
$('.yourMap .mapPermission').unbind().click(self.onPermissionClick)
// .yourMap in the unbind/bind is just a namespace for the events
// not a reference to the class .yourMap on the .mapInfoBox
$('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect)
$('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap)
$('.mapContributors span, #mapContribs').unbind().click(function (event) {
$('.mapContributors .tip').toggle()
event.stopPropagation()
})
$('.mapContributors .tip').unbind().click(function (event) {
event.stopPropagation()
})
$('.mapContributors .tip li a').click(Metamaps.Router.intercept)
$('.mapInfoBox').unbind('.hideTip').bind('click.hideTip', function () {
$('.mapContributors .tip').hide()
})
self.addTypeahead()
},
addTypeahead: function () {
var self = Metamaps.Map.InfoBox
if (!Metamaps.Active.Map) return
// for autocomplete
var collaborators = {
name: 'collaborators',
limit: 9999,
display: function(s) { return s.label; },
templates: {
notFound: function(s) {
return Hogan.compile($('#collaboratorSearchTemplate').html()).render({
value: "No results",
label: "No results",
rtype: "noresult",
profile: Metamaps.Erb['user.png'],
});
},
suggestion: function(s) {
return Hogan.compile($('#collaboratorSearchTemplate').html()).render(s);
},
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/mappers?term=%QUERY',
wildcard: '%QUERY',
},
})
}
// for adding map collaborators, who will have edit rights
if (Metamaps.Active.Mapper && Metamaps.Active.Mapper.id === Metamaps.Active.Map.get('user_id')) {
$('.collaboratorSearchField').typeahead(
{
highlight: false,
},
[collaborators]
)
$('.collaboratorSearchField').bind('typeahead:select', self.handleResultClick)
$('.mapContributors .removeCollaborator').click(function () {
self.removeCollaborator(parseInt($(this).data('id')))
})
}
},
removeCollaborator: function (collaboratorId) {
var self = Metamaps.Map.InfoBox
Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId))
var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
$.post('/maps/' + Metamaps.Active.Map.id + '/access', { access: mapperIds })
self.updateNumbers()
},
addCollaborator: function (newCollaboratorId) {
var self = Metamaps.Map.InfoBox
if (Metamaps.Collaborators.get(newCollaboratorId)) {
Metamaps.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 })
$.post('/maps/' + Metamaps.Active.Map.id + '/access', { access: mapperIds })
var name = Metamaps.Collaborators.get(newCollaboratorId).get('name')
Metamaps.GlobalUI.notifyUser(name + ' will be notified by email')
self.updateNumbers()
}
$.getJSON('/users/' + newCollaboratorId + '.json', callback)
},
handleResultClick: function (event, item) {
var self = Metamaps.Map.InfoBox
self.addCollaborator(item.id)
$('.collaboratorSearchField').typeahead('val', '')
},
updateNameDescPerm: function (name, desc, perm) {
$('.mapInfoBox').removeClass('mapRequestTitle')
$('.mapInfoName .best_in_place_name').html(name)
$('.mapInfoDesc .best_in_place_desc').html(desc)
$('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm)
},
createContributorList: function () {
var self = Metamaps.Map.InfoBox
var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var activeMapperIsCreator = Metamaps.Active.Mapper && Metamaps.Active.Mapper.id === Metamaps.Active.Map.get('user_id')
var string = ''
string += '<ul>'
relevantPeople.each(function (m) {
var isCreator = Metamaps.Active.Map.get('user_id') === m.get('id')
string += '<li><a href="/explore/mapper/' + m.get('id') + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get('image') + '" />' + m.get('name')
if (isCreator) string += ' (creator)'
string += '</a>'
if (activeMapperIsCreator && !isCreator) string += '<span class="removeCollaborator" data-id="' + m.get('id') + '"></span>'
string += '</li>'
})
string += '</ul>'
if (activeMapperIsCreator) {
string += '<div class="collabSearchField"><span class="addCollab"></span><input class="collaboratorSearchField" placeholder="Add a collaborator!"></input></div>'
}
return string
},
updateNumbers: function () {
if (!Metamaps.Active.Map) return
var self = Metamaps.Map.InfoBox
var mapper = Metamaps.Active.Mapper
var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.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']
if (relevantPeople.length > 0) {
// get the first contributor and use their image
contributors_image = relevantPeople.models[0].get('image')
}
$('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class)
$('.mapContributors span').text(relevantPeople.length)
$('.mapContributors .tip').html(self.createContributorList())
self.addTypeahead()
$('.mapContributors .tip').unbind().click(function (event) {
event.stopPropagation()
})
$('.mapTopics').text(Metamaps.Topics.length)
$('.mapSynapses').text(Metamaps.Synapses.length)
$('.mapEditedAt').html('<span>Last edited: </span>' + Metamaps.Util.nowDateFormatted())
},
onPermissionClick: function (event) {
var self = Metamaps.Map.InfoBox
if (!self.selectingPermission) {
self.selectingPermission = true
$(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
if ($(this).hasClass('commons')) {
$(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>')
} else if ($(this).hasClass('public')) {
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>')
} else if ($(this).hasClass('private')) {
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>')
}
$('.mapPermission .permissionSelect li').click(self.selectPermission)
event.stopPropagation()
}
},
hidePermissionSelect: function () {
var self = Metamaps.Map.InfoBox
self.selectingPermission = false
$('.mapPermission').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
$('.mapPermission .permissionSelect').remove()
},
selectPermission: function (event) {
var self = Metamaps.Map.InfoBox
self.selectingPermission = false
var permission = $(this).attr('class')
Metamaps.Active.Map.save({
permission: permission
})
Metamaps.Active.Map.updateMapWrapper()
shareable = permission === 'private' ? '' : 'shareable'
$('.mapPermission').removeClass('commons public private minimize').addClass(permission)
$('.mapPermission .permissionSelect').remove()
$('.mapInfoBox').removeClass('shareable').addClass(shareable)
event.stopPropagation()
},
deleteActiveMap: function () {
var confirmString = 'Are you sure you want to delete this map? '
confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.'
var doIt = confirm(confirmString)
var map = Metamaps.Active.Map
var mapper = Metamaps.Active.Mapper
var authorized = map.authorizePermissionChange(mapper)
if (doIt && authorized) {
Metamaps.Map.InfoBox.close()
Metamaps.Maps.Active.remove(map)
Metamaps.Maps.Featured.remove(map)
Metamaps.Maps.Mine.remove(map)
Metamaps.Maps.Shared.remove(map)
map.destroy()
Metamaps.Router.home()
Metamaps.GlobalUI.notifyUser('Map eliminated!')
}
else if (!authorized) {
alert("Hey now. We can't just go around willy nilly deleting other people's maps now can we? Run off and find something constructive to do, eh?")
}
}
}; // end Metamaps.Map.InfoBox

20
app/assets/javascripts/src/Metamaps.Mapper.js
View file

@ -1,20 +0,0 @@
/* global Metamaps, $ */
/*
* Metamaps.Mapper.js.erb
*
* Dependencies: none!
*/
Metamaps.Mapper = {
// this function is to retrieve a mapper JSON object from the database
// @param id = the id of the mapper to retrieve
get: function (id, callback) {
return $.ajax({
url: '/users/' + id + '.json',
success: function (data) {
callback(new Metamaps.Backbone.Mapper(data))
}
})
}
}; // end Metamaps.Mapper

245
app/assets/javascripts/src/Metamaps.Router.js
View file

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

87
app/assets/javascripts/src/Metamaps.Views.js
View file

@ -1,87 +0,0 @@
/* global Metamaps, $ */
/*
* Metamaps.Views.js.erb
*
* Dependencies:
* - Metamaps.Loading
* - Metamaps.Active
* - Metamaps.ReactComponents
*/
Metamaps.Views = {
exploreMaps: {
setCollection: function (collection) {
var self = Metamaps.Views.exploreMaps
if (self.collection) {
self.collection.off('add', self.render)
self.collection.off('successOnFetch', self.handleSuccess)
self.collection.off('errorOnFetch', self.handleError)
}
self.collection = collection
self.collection.on('add', self.render)
self.collection.on('successOnFetch', self.handleSuccess)
self.collection.on('errorOnFetch', self.handleError)
},
render: function (mapperObj, cb) {
var self = Metamaps.Views.exploreMaps
if (typeof mapperObj === 'function') {
cb = mapperObj
mapperObj = null
}
var exploreObj = {
currentUser: Metamaps.Active.Mapper,
section: self.collection.id,
displayStyle: 'grid',
maps: self.collection,
moreToLoad: self.collection.page != 'loadedAll',
user: mapperObj,
loadMore: self.loadMore
}
ReactDOM.render(
React.createElement(Metamaps.ReactComponents.Maps, exploreObj),
document.getElementById('explore')
)
if (cb) cb()
Metamaps.Loading.hide()
},
loadMore: function () {
var self = Metamaps.Views.exploreMaps
if (self.collection.page != "loadedAll") {
self.collection.getMaps()
}
else self.render()
},
handleSuccess: function (cb) {
var self = Metamaps.Views.exploreMaps
if (self.collection && self.collection.id === 'mapper') {
self.fetchUserThenRender(cb)
} else {
self.render(cb)
}
},
handleError: function () {
console.log('error loading maps!') // TODO
},
fetchUserThenRender: function (cb) {
var self = Metamaps.Views.exploreMaps
// first load the mapper object and then call the render function
$.ajax({
url: '/users/' + self.collection.mapperId + '/details.json',
success: function (response) {
self.render(response, cb)
},
error: function () {
self.render(cb)
}
})
}
}
}

74
app/assets/javascripts/src/Metamaps.js.erb
View file

@ -1,74 +0,0 @@
/* global Metamaps */
/*
* Metamaps.js.erb
*/
// TODO eliminate these 5 top-level variables
Metamaps.panningInt = null
Metamaps.tempNode = null
Metamaps.tempInit = false
Metamaps.tempNode2 = null
Metamaps.VERSION = '<%= METAMAPS_VERSION %>'
/* erb variables from rails */
Metamaps.Erb = {}
Metamaps.Erb['REALTIME_SERVER'] = '<%= ENV['REALTIME_SERVER'] %>'
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.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %>
Metamaps.Settings = {
embed: false, // indicates that the app is on a page that is optimized for embedding in iFrames on other web pages
sandbox: false, // puts the app into a mode (when true) where it only creates data locally, and isn't writing it to the database
colors: {
background: '#344A58',
synapses: {
normal: '#888888',
hover: '#888888',
selected: '#FFFFFF'
},
topics: {
selected: '#FFFFFF'
},
labels: {
background: '#18202E',
text: '#DDD'
}
},
}
Metamaps.Touch = {
touchPos: null, // this stores the x and y values of a current touch event
touchDragNode: null // this stores a reference to a JIT node that is being dragged
}
Metamaps.Mouse = {
didPan: false,
didBoxZoom: false,
changeInX: 0,
changeInY: 0,
edgeHoveringOver: false,
boxStartCoordinates: false,
boxEndCoordinates: false,
synapseStartCoordinates: [],
synapseEndCoordinates: null,
lastNodeClick: 0,
lastCanvasClick: 0,
DOUBLE_CLICK_TOLERANCE: 300
}
Metamaps.Selected = {
reset: function () {
var self = Metamaps.Selected
self.Nodes = []
self.Edges = []
},
Nodes: [],
Edges: []
}

343
app/assets/javascripts/src/views/chatView.js.erb
View file

@ -1,343 +0,0 @@
Metamaps.Views = Metamaps.Views || {};
Metamaps.Views.chatView = (function () {
var
chatView,
linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false, twitter: false });
var Private = {
messageHTML: "<div class='chat-message'>" +
"<div class='chat-message-user'><img src='{{ user_image }}' title='{{user_name }}'/></div>" +
"<div class='chat-message-text'>{{ message }}</div>" +
"<div class='chat-message-time'>{{ timestamp }}</div>" +
"<div class='clearfloat'></div>" +
"</div>",
participantHTML: "<div class='participant participant-{{ id }} {{ selfClass }}'>" +
"<div class='chat-participant-image'><img src='{{ image }}' style='border: 2px solid {{ color }};' /></div>" +
"<div class='chat-participant-name'>{{ username }} {{ selfName }}</div>" +
"<button type='button' class='button chat-participant-invite-call' onclick='Metamaps.Realtime.inviteACall({{ id}});'></button>" +
"<button type='button' class='button chat-participant-invite-join' onclick='Metamaps.Realtime.inviteToJoin({{ id}});'></button>" +
"<span class='chat-participant-participating'><div class='green-dot'></div></span>" +
"<div class='clearfloat'></div>" +
"</div>",
templates: function() {
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
};
this.messageTemplate = _.template(Private.messageHTML);
this.participantTemplate = _.template(Private.participantHTML);
},
createElements: function() {
this.$unread = $('<div class="chat-unread"></div>');
this.$button = $('<div class="chat-button"><div class="tooltips">Chat</div></div>');
this.$messageInput = $('<textarea placeholder="Send a message..." class="chat-input"></textarea>');
this.$juntoHeader = $('<div class="junto-header">PARTICIPANTS</div>');
this.$videoToggle = $('<div class="video-toggle"></div>');
this.$cursorToggle = $('<div class="cursor-toggle"></div>');
this.$participants = $('<div class="participants"></div>');
this.$conversationInProgress = $('<div class="conversation-live">LIVE <span class="call-action leave" onclick="Metamaps.Realtime.leaveCall();">LEAVE</span><span class="call-action join" onclick="Metamaps.Realtime.joinCall();">JOIN</span></div>');
this.$chatHeader = $('<div class="chat-header">CHAT</div>');
this.$soundToggle = $('<div class="sound-toggle"></div>');
this.$messages = $('<div class="chat-messages"></div>');
this.$container = $('<div class="chat-box"></div>');
},
attachElements: function() {
this.$button.append(this.$unread);
this.$juntoHeader.append(this.$videoToggle);
this.$juntoHeader.append(this.$cursorToggle);
this.$chatHeader.append(this.$soundToggle);
this.$participants.append(this.$conversationInProgress);
this.$container.append(this.$juntoHeader);
this.$container.append(this.$participants);
this.$container.append(this.$chatHeader);
this.$container.append(this.$button);
this.$container.append(this.$messages);
this.$container.append(this.$messageInput);
},
addEventListeners: function() {
var self = this;
this.participants.on('add', function (participant) {
Private.addParticipant.call(self, participant);
});
this.participants.on('remove', function (participant) {
Private.removeParticipant.call(self, participant);
});
this.$button.on('click', function () {
Handlers.buttonClick.call(self);
});
this.$videoToggle.on('click', function () {
Handlers.videoToggleClick.call(self);
});
this.$cursorToggle.on('click', function () {
Handlers.cursorToggleClick.call(self);
});
this.$soundToggle.on('click', function () {
Handlers.soundToggleClick.call(self);
});
this.$messageInput.on('keyup', function (event) {
Handlers.keyUp.call(self, event);
});
this.$messageInput.on('focus', function () {
Handlers.inputFocus.call(self);
});
this.$messageInput.on('blur', function () {
Handlers.inputBlur.call(self);
});
},
initializeSounds: function() {
this.sound = new Howl({
urls: ["<%= asset_path 'sounds/MM_sounds.mp3' %>", "<%= asset_path 'sounds/MM_sounds.ogg' %>"],
sprite: {
joinmap: [0, 561],
leavemap: [1000, 592],
receivechat: [2000, 318],
sendchat: [3000, 296],
sessioninvite: [4000, 5393, true]
}
});
},
incrementUnread: function() {
this.unreadMessages++;
this.$unread.html(this.unreadMessages);
this.$unread.show();
},
addMessage: function(message, isInitial, wasMe) {
if (!this.isOpen && !isInitial) Private.incrementUnread.call(this);
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
var m = _.clone(message.attributes);
var today = new Date();
m.timestamp = new Date(m.created_at);
var date = (m.timestamp.getMonth() + 1) + '/' + m.timestamp.getDate();
date += " " + addZero(m.timestamp.getHours()) + ":" + addZero(m.timestamp.getMinutes());
m.timestamp = date;
m.image = m.user_image || 'http://www.hotpepper.ca/wp-content/uploads/2014/11/default_profile_1_200x200.png'; // TODO: remove
m.message = linker.link(m.message);
var $html = $(this.messageTemplate(m));
this.$messages.append($html);
if (!isInitial) this.scrollMessages(200);
if (!wasMe && !isInitial && this.alertSound) this.sound.play('receivechat');
},
initialMessages: function() {
var messages = this.messages.models;
for (var i = 0; i < messages.length; i++) {
Private.addMessage.call(this, messages[i], true);
}
},
handleInputMessage: function() {
var message = {
message: this.$messageInput.val(),
};
this.$messageInput.val('');
$(document).trigger(chatView.events.message + '-' + this.room, [message]);
},
addParticipant: function(participant) {
var p = _.clone(participant.attributes);
if (p.self) {
p.selfClass = 'is-self';
p.selfName = '(me)';
} else {
p.selfClass = '';
p.selfName = '';
}
var html = this.participantTemplate(p);
this.$participants.append(html);
},
removeParticipant: function(participant) {
this.$container.find('.participant-' + participant.get('id')).remove();
}
};
var Handlers = {
buttonClick: function() {
if (this.isOpen) this.close();
else if (!this.isOpen) this.open();
},
videoToggleClick: function() {
this.$videoToggle.toggleClass('active');
this.videosShowing = !this.videosShowing;
$(document).trigger(this.videosShowing ? chatView.events.videosOn : chatView.events.videosOff);
},
cursorToggleClick: function() {
this.$cursorToggle.toggleClass('active');
this.cursorsShowing = !this.cursorsShowing;
$(document).trigger(this.cursorsShowing ? chatView.events.cursorsOn : chatView.events.cursorsOff);
},
soundToggleClick: function() {
this.alertSound = !this.alertSound;
this.$soundToggle.toggleClass('active');
},
keyUp: function(event) {
switch(event.which) {
case 13: // enter
Private.handleInputMessage.call(this);
break;
}
},
inputFocus: function() {
$(document).trigger(chatView.events.inputFocus);
},
inputBlur: function() {
$(document).trigger(chatView.events.inputBlur);
}
};
chatView = function(messages, mapper, room) {
var self = this;
this.room = room;
this.mapper = mapper;
this.messages = messages; // backbone collection
this.isOpen = false;
this.alertSound = true; // whether to play sounds on arrival of new messages or not
this.cursorsShowing = true;
this.videosShowing = true;
this.unreadMessages = 0;
this.participants = new Backbone.Collection();
Private.templates.call(this);
Private.createElements.call(this);
Private.attachElements.call(this);
Private.addEventListeners.call(this);
Private.initialMessages.call(this);
Private.initializeSounds.call(this);
this.$container.css({
right: '-300px'
});
};
chatView.prototype.conversationInProgress = function (participating) {
this.$conversationInProgress.show();
this.$participants.addClass('is-live');
if (participating) this.$participants.addClass('is-participating');
this.$button.addClass('active');
// hide invite to call buttons
}
chatView.prototype.conversationEnded = function () {
this.$conversationInProgress.hide();
this.$participants.removeClass('is-live');
this.$participants.removeClass('is-participating');
this.$button.removeClass('active');
this.$participants.find('.participant').removeClass('active');
this.$participants.find('.participant').removeClass('pending');
}
chatView.prototype.leaveConversation = function () {
this.$participants.removeClass('is-participating');
}
chatView.prototype.mapperJoinedCall = function (id) {
this.$participants.find('.participant-' + id).addClass('active');
}
chatView.prototype.mapperLeftCall = function (id) {
this.$participants.find('.participant-' + id).removeClass('active');
}
chatView.prototype.invitationPending = function (id) {
this.$participants.find('.participant-' + id).addClass('pending');
}
chatView.prototype.invitationAnswered = function (id) {
this.$participants.find('.participant-' + id).removeClass('pending');
}
chatView.prototype.addParticipant = function (participant) {
this.participants.add(participant);
}
chatView.prototype.removeParticipant = function (username) {
var p = this.participants.find(function (p) { return p.get('username') === username; });
if (p) {
this.participants.remove(p);
}
}
chatView.prototype.removeParticipants = function () {
this.participants.remove(this.participants.models);
}
chatView.prototype.open = function () {
this.$container.css({
right: '0'
});
this.$messageInput.focus();
this.isOpen = true;
this.unreadMessages = 0;
this.$unread.hide();
this.scrollMessages(0);
$(document).trigger(chatView.events.openTray);
}
chatView.prototype.addMessage = function(message, isInitial, wasMe) {
this.messages.add(message);
Private.addMessage.call(this, message, isInitial, wasMe);
}
chatView.prototype.scrollMessages = function(duration) {
duration = duration || 0;
this.$messages.animate({
scrollTop: this.$messages[0].scrollHeight
}, duration);
}
chatView.prototype.clearMessages = function () {
this.unreadMessages = 0;
this.$unread.hide();
this.$messages.empty();
}
chatView.prototype.close = function () {
this.$container.css({
right: '-300px'
});
this.$messageInput.blur();
this.isOpen = false;
$(document).trigger(chatView.events.closeTray);
}
chatView.prototype.remove = function () {
this.$button.off();
this.$container.remove();
}
/**
* @class
* @static
*/
chatView.events = {
message: 'ChatView:message',
openTray: 'ChatView:openTray',
closeTray: 'ChatView:closeTray',
inputFocus: 'ChatView:inputFocus',
inputBlur: 'ChatView:inputBlur',
cursorsOff: 'ChatView:cursorsOff',
cursorsOn: 'ChatView:cursorsOn',
videosOff: 'ChatView:videosOff',
videosOn: 'ChatView:videosOn'
};
return chatView;
})();

195
app/assets/javascripts/src/views/room.js
View file

@ -1,195 +0,0 @@
Metamaps.Views = Metamaps.Views || {};
Metamaps.Views.room = (function () {
var ChatView = Metamaps.Views.chatView;
var VideoView = Metamaps.Views.videoView;
var room = function(opts) {
var self = this;
this.isActiveRoom = false;
this.socket = opts.socket;
this.webrtc = opts.webrtc;
//this.roomRef = opts.firebase;
this.room = opts.room;
this.config = opts.config;
this.peopleCount = 0;
this.$myVideo = opts.$video;
this.myVideo = opts.myVideoView;
this.messages = new Backbone.Collection();
this.currentMapper = new Backbone.Model({ name: opts.username, image: opts.image });
this.chat = new ChatView(this.messages, this.currentMapper, this.room);
this.videos = {};
this.init();
};
room.prototype.join = function(cb) {
this.isActiveRoom = true;
this.webrtc.joinRoom(this.room, cb);
this.chat.conversationInProgress(true); // true indicates participation
}
room.prototype.conversationInProgress = function() {
this.chat.conversationInProgress(false); // false indicates not participating
}
room.prototype.conversationEnding = function() {
this.chat.conversationEnded();
}
room.prototype.leaveVideoOnly = function() {
this.chat.leaveConversation(); // the conversation will carry on without you
for (var id in this.videos) {
this.removeVideo(id);
}
this.isActiveRoom = false;
this.webrtc.leaveRoom();
}
room.prototype.leave = function() {
for (var id in this.videos) {
this.removeVideo(id);
}
this.isActiveRoom = false;
this.webrtc.leaveRoom();
this.chat.conversationEnded();
this.chat.removeParticipants();
this.chat.clearMessages();
this.messages.reset();
}
room.prototype.setPeopleCount = function(count) {
this.peopleCount = count;
}
room.prototype.init = function () {
var self = this;
$(document).on(VideoView.events.audioControlClick, function (event, videoView) {
if (!videoView.audioStatus) self.webrtc.mute();
else if (videoView.audioStatus) self.webrtc.unmute();
});
$(document).on(VideoView.events.videoControlClick, function (event, videoView) {
if (!videoView.videoStatus) self.webrtc.pauseVideo();
else if (videoView.videoStatus) self.webrtc.resumeVideo();
});
this.webrtc.webrtc.off('peerStreamAdded');
this.webrtc.webrtc.off('peerStreamRemoved');
this.webrtc.on('peerStreamAdded', function (peer) {
var mapper = Metamaps.Realtime.mappersOnMap[peer.nick];
peer.avatar = mapper.image;
peer.username = mapper.name;
if (self.isActiveRoom) {
self.addVideo(peer);
}
});
this.webrtc.on('peerStreamRemoved', function (peer) {
if (self.isActiveRoom) {
self.removeVideo(peer);
}
});
this.webrtc.on('mute', function (data) {
var v = self.videos[data.id];
if (!v) return;
if (data.name === 'audio') {
v.audioStatus = false;
}
else if (data.name === 'video') {
v.videoStatus = false;
v.$avatar.show();
}
if (!v.audioStatus && !v.videoStatus) v.$container.hide();
});
this.webrtc.on('unmute', function (data) {
var v = self.videos[data.id];
if (!v) return;
if (data.name === 'audio') {
v.audioStatus = true;
}
else if (data.name === 'video') {
v.videoStatus = true;
v.$avatar.hide();
}
v.$container.show();
});
var sendChatMessage = function (event, data) {
self.sendChatMessage(data);
};
$(document).on(ChatView.events.message + '-' + this.room, sendChatMessage);
}
room.prototype.videoAdded = function (callback) {
this._videoAdded = callback;
}
room.prototype.addVideo = function (peer) {
var
id = this.webrtc.getDomId(peer),
video = attachMediaStream(peer.stream);
var
v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username });
this.videos[peer.id] = v;
if (this._videoAdded) this._videoAdded(v, peer.nick);
}
room.prototype.removeVideo = function (peer) {
var id = typeof peer == 'string' ? peer : peer.id;
if (this.videos[id]) {
this.videos[id].remove();
delete this.videos[id];
}
}
room.prototype.sendChatMessage = function (data) {
var self = this;
//this.roomRef.child('messages').push(data);
if (self.chat.alertSound) self.chat.sound.play('sendchat');
var m = new Metamaps.Backbone.Message({
message: data.message,
resource_id: Metamaps.Active.Map.id,
resource_type: "Map"
});
m.save(null, {
success: function (model, response) {
self.addMessages(new Metamaps.Backbone.MessageCollection(model), false, true);
$(document).trigger(room.events.newMessage, [model]);
},
error: function (model, response) {
console.log('error!', response);
}
});
}
// they should be instantiated as backbone models before they get
// passed to this function
room.prototype.addMessages = function (messages, isInitial, wasMe) {
var self = this;
messages.models.forEach(function (message) {
self.chat.addMessage(message, isInitial, wasMe);
});
}
/**
* @class
* @static
*/
room.events = {
newMessage: "Room:newMessage"
};
return room;
})();

207
app/assets/javascripts/src/views/videoView.js
View file

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

2
doc/production/first-deploy.md
View file

@ -87,8 +87,6 @@ server to see what problems show up:
sudo npm install -g forever sudo npm install -g forever
(crontab -u metamaps -l 2>/dev/null; echo "@reboot $(which forever) --append -l /home/metamaps/logs/forever.realtime.log start /home/metamaps/metamaps/realtime/realtime-server.js") | crontab -u metamaps - (crontab -u metamaps -l 2>/dev/null; echo "@reboot $(which forever) --append -l /home/metamaps/logs/forever.realtime.log start /home/metamaps/metamaps/realtime/realtime-server.js") | crontab -u metamaps -
cd /home/metamaps/metamaps/realtime
npm install
mkdir -p /home/metamaps/logs mkdir -p /home/metamaps/logs
forever --append -l /home/metamaps/logs/forever.realtime.log \ forever --append -l /home/metamaps/logs/forever.realtime.log \
start /home/metamaps/metamaps/realtime/realtime-server.js start /home/metamaps/metamaps/realtime/realtime-server.js

4
doc/production/pull-changes.md
View file

@ -29,9 +29,7 @@ Now that you have the code, run these commands:
rake perms:fix rake perms:fix
passenger-config restart-app . passenger-config restart-app .
cd realtime forever list #find the uid of the realtime server, e.g. xQKv
npm install
forever list #find the uid, e.g. xQKv
forever restart xQKv forever restart xQKv
sudo service metamaps_delayed_job restart sudo service metamaps_delayed_job restart

32
app/assets/javascripts/src/Metamaps.Account.js → frontend/src/Metamaps/Account.js
View file

@ -1,42 +1,34 @@
/* global Metamaps, $ */ /*
* Metamaps.Erb
/*
* Metamaps.Account.js.erb
*
* Dependencies:
* - Metamaps.Erb
*/ */
Metamaps.Account = { const Account = {
listenersInitialized: false, listenersInitialized: false,
init: function () {
var self = Metamaps.Account
},
initListeners: function () { initListeners: function () {
var self = Metamaps.Account var self = Account
$('#user_image').change(self.showImagePreview) $('#user_image').change(self.showImagePreview)
self.listenersInitialized = true self.listenersInitialized = true
}, },
toggleChangePicture: function () { toggleChangePicture: function () {
var self = Metamaps.Account var self = Account
$('.userImageMenu').toggle() $('.userImageMenu').toggle()
if (!self.listenersInitialized) self.initListeners() if (!self.listenersInitialized) self.initListeners()
}, },
openChangePicture: function () { openChangePicture: function () {
var self = Metamaps.Account var self = Account
$('.userImageMenu').show() $('.userImageMenu').show()
if (!self.listenersInitialized) self.initListeners() if (!self.listenersInitialized) self.initListeners()
}, },
closeChangePicture: function () { closeChangePicture: function () {
var self = Metamaps.Account var self = Account
$('.userImageMenu').hide() $('.userImageMenu').hide()
}, },
showLoading: function () { showLoading: function () {
var self = Metamaps.Account var self = Account
var loader = new CanvasLoader('accountPageLoading') var loader = new CanvasLoader('accountPageLoading')
loader.setColor('#4FC059'); // default is '#000000' loader.setColor('#4FC059'); // default is '#000000'
@ -47,7 +39,7 @@ Metamaps.Account = {
$('#accountPageLoading').show() $('#accountPageLoading').show()
}, },
showImagePreview: function () { showImagePreview: function () {
var self = Metamaps.Account var self = Account
var file = $('#user_image')[0].files[0] var file = $('#user_image')[0].files[0]
@ -93,10 +85,10 @@ Metamaps.Account = {
} }
}, },
removePicture: function () { removePicture: function () {
var self = Metamaps.Account var self = Account
$('.userImageDiv canvas').remove() $('.userImageDiv canvas').remove()
$('.userImageDiv img').attr('src', Metamaps.Erb['user.png']).show() $('.userImageDiv img').attr('src', window.Metamaps.Erb['user.png']).show()
$('.userImageMenu').hide() $('.userImageMenu').hide()
var input = $('#user_image') var input = $('#user_image')
@ -120,3 +112,5 @@ Metamaps.Account = {
$('#user_password_confirmation').val('') $('#user_password_confirmation').val('')
} }
} }
export default Account

7
frontend/src/Metamaps/Active.js Normal file
View file

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

22
app/assets/javascripts/src/Metamaps.Admin.js → frontend/src/Metamaps/Admin.js
View file

@ -1,35 +1,29 @@
/* global Metamaps, $ */ /* global $ */
/* const Admin = {
* Metamaps.Admin.js.erb
*
* Dependencies: none!
*/
Metamaps.Admin = {
selectMetacodes: [], selectMetacodes: [],
allMetacodes: [], allMetacodes: [],
init: function () { init: function () {
var self = Metamaps.Admin var self = Admin
$('#metacodes_value').val(self.selectMetacodes.toString()) $('#metacodes_value').val(self.selectMetacodes.toString())
}, },
selectAll: function () { selectAll: function () {
var self = Metamaps.Admin var self = Admin
$('.editMetacodes li').removeClass('toggledOff') $('.editMetacodes li').removeClass('toggledOff')
self.selectMetacodes = self.allMetacodes.slice(0) self.selectMetacodes = self.allMetacodes.slice(0)
$('#metacodes_value').val(self.selectMetacodes.toString()) $('#metacodes_value').val(self.selectMetacodes.toString())
}, },
deselectAll: function () { deselectAll: function () {
var self = Metamaps.Admin var self = Admin
$('.editMetacodes li').addClass('toggledOff') $('.editMetacodes li').addClass('toggledOff')
self.selectMetacodes = [] self.selectMetacodes = []
$('#metacodes_value').val(0) $('#metacodes_value').val(0)
}, },
liClickHandler: function () { liClickHandler: function () {
var self = Metamaps.Admin var self = Admin
if ($(this).attr('class') != 'toggledOff') { if ($(this).attr('class') != 'toggledOff') {
$(this).addClass('toggledOff') $(this).addClass('toggledOff')
@ -44,7 +38,7 @@ Metamaps.Admin = {
} }
}, },
validate: function () { validate: function () {
var self = Metamaps.Admin var self = Admin
if (self.selectMetacodes.length == 0) { if (self.selectMetacodes.length == 0) {
alert('Would you pretty please select at least one metacode for the set?') alert('Would you pretty please select at least one metacode for the set?')
@ -52,3 +46,5 @@ Metamaps.Admin = {
} }
} }
} }
export default Admin

16
app/assets/javascripts/src/Metamaps.AutoLayout.js → frontend/src/Metamaps/AutoLayout.js
View file

@ -1,12 +1,4 @@
/* global Metamaps */ const AutoLayout = {
/*
* Metmaaps.AutoLayout.js
*
* Dependencies: none!
*/
Metamaps.AutoLayout = {
nextX: 0, nextX: 0,
nextY: 0, nextY: 0,
sideLength: 1, sideLength: 1,
@ -16,7 +8,7 @@ Metamaps.AutoLayout = {
timeToTurn: 0, timeToTurn: 0,
getNextCoord: function () { getNextCoord: function () {
var self = Metamaps.AutoLayout var self = AutoLayout
var nextX = self.nextX var nextX = self.nextX
var nextY = self.nextY var nextY = self.nextY
@ -63,7 +55,7 @@ Metamaps.AutoLayout = {
} }
}, },
resetSpiral: function () { resetSpiral: function () {
var self = Metamaps.AutoLayout var self = AutoLayout
self.nextX = 0 self.nextX = 0
self.nextY = 0 self.nextY = 0
self.nextXshift = 1 self.nextXshift = 1
@ -73,3 +65,5 @@ Metamaps.AutoLayout = {
self.turnCount = 0 self.turnCount = 0
} }
} }
export default AutoLayout

177
app/assets/javascripts/src/Metamaps.Backbone.js → frontend/src/Metamaps/Backbone/index.js
View file

@ -1,33 +1,38 @@
/* global Metamaps, Backbone, _, $ */ /* 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 * Metamaps.Backbone.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Collaborators * - Metamaps.Collaborators
* - Metamaps.Creators * - Metamaps.Creators
* - Metamaps.Filter
* - Metamaps.JIT
* - Metamaps.Loading * - Metamaps.Loading
* - Metamaps.Map
* - Metamaps.Mapper
* - Metamaps.Mappers * - Metamaps.Mappers
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Realtime
* - Metamaps.Synapse
* - Metamaps.SynapseCard
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topic
* - Metamaps.TopicCard
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Visualize
*/ */
Metamaps.Backbone = {} const _Backbone = {}
Metamaps.Backbone.Map = Backbone.Model.extend({ _Backbone.Map = Backbone.Model.extend({
urlRoot: '/maps', urlRoot: '/maps',
blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'], blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
toJSON: function (options) { toJSON: function (options) {
@ -58,7 +63,7 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
this.on('saved', this.savedEvent) this.on('saved', this.savedEvent)
}, },
savedEvent: function () { savedEvent: function () {
Metamaps.Realtime.sendMapChange(this) Realtime.sendMapChange(this)
}, },
authorizeToEdit: function (mapper) { authorizeToEdit: function (mapper) {
if (mapper && ( if (mapper && (
@ -78,10 +83,10 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
} }
}, },
getUser: function () { getUser: function () {
return Metamaps.Mapper.get(this.get('user_id')) return Mapper.get(this.get('user_id'))
}, },
fetchContained: function () { fetchContained: function () {
var bb = Metamaps.Backbone var bb = _Backbone
var that = this var that = this
var start = function (data) { var start = function (data) {
that.set('mappers', new bb.MapperCollection(data.mappers)) that.set('mappers', new bb.MapperCollection(data.mappers))
@ -122,10 +127,10 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
return this.get('mappers') return this.get('mappers')
}, },
updateView: function () { updateView: function () {
var map = Metamaps.Active.Map var map = Active.Map
var isActiveMap = this.id === map.id var isActiveMap = this.id === map.id
if (isActiveMap) { if (isActiveMap) {
Metamaps.Map.InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission')) InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'))
this.updateMapWrapper() this.updateMapWrapper()
// mobile menu // mobile menu
$('#header_content').html(this.get('name')) $('#header_content').html(this.get('name'))
@ -133,17 +138,17 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
} }
}, },
updateMapWrapper: function () { updateMapWrapper: function () {
var map = Metamaps.Active.Map var map = Active.Map
var isActiveMap = this.id === map.id var isActiveMap = this.id === map.id
var authorized = map && map.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEditMap' : '' var authorized = map && map.authorizeToEdit(Active.Mapper) ? 'canEditMap' : ''
var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : '' var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : ''
if (isActiveMap) { if (isActiveMap) {
$('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap) $('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap)
} }
} }
}) })
Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({ _Backbone.MapsCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Map, model: _Backbone.Map,
initialize: function (models, options) { initialize: function (models, options) {
this.id = options.id this.id = options.id
this.sortBy = options.sortBy this.sortBy = options.sortBy
@ -210,7 +215,7 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
} }
}) })
Metamaps.Backbone.Message = Backbone.Model.extend({ _Backbone.Message = Backbone.Model.extend({
urlRoot: '/messages', urlRoot: '/messages',
blacklist: ['created_at', 'updated_at'], blacklist: ['created_at', 'updated_at'],
toJSON: function (options) { toJSON: function (options) {
@ -226,12 +231,12 @@ Metamaps.Backbone.Message = Backbone.Model.extend({
*/ */
} }
}) })
Metamaps.Backbone.MessageCollection = Backbone.Collection.extend({ _Backbone.MessageCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Message, model: _Backbone.Message,
url: '/messages' url: '/messages'
}) })
Metamaps.Backbone.Mapper = Backbone.Model.extend({ _Backbone.Mapper = Backbone.Model.extend({
urlRoot: '/users', urlRoot: '/users',
blacklist: ['created_at', 'updated_at'], blacklist: ['created_at', 'updated_at'],
toJSON: function (options) { toJSON: function (options) {
@ -247,13 +252,13 @@ Metamaps.Backbone.Mapper = Backbone.Model.extend({
} }
}) })
Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({ _Backbone.MapperCollection = Backbone.Collection.extend({
model: Metamaps.Backbone.Mapper, model: _Backbone.Mapper,
url: '/users' url: '/users'
}) })
Metamaps.Backbone.init = function () { _Backbone.init = function () {
var self = Metamaps.Backbone var self = _Backbone
self.Metacode = Backbone.Model.extend({ self.Metacode = Backbone.Model.extend({
initialize: function () { initialize: function () {
@ -320,10 +325,10 @@ Metamaps.Backbone.init = function () {
initialize: function () { initialize: function () {
if (this.isNew()) { if (this.isNew()) {
this.set({ this.set({
'user_id': Metamaps.Active.Mapper.id, 'user_id': Active.Mapper.id,
'desc': this.get('desc') || '', 'desc': this.get('desc') || '',
'link': this.get('link') || '', 'link': this.get('link') || '',
'permission': Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons' 'permission': Active.Map ? Active.Map.get('permission') : 'commons'
}) })
} }
@ -335,7 +340,7 @@ Metamaps.Backbone.init = function () {
mappableid: this.id mappableid: this.id
} }
$(document).trigger(Metamaps.JIT.events.removeTopic, [removeTopicData]) $(document).trigger(JIT.events.removeTopic, [removeTopicData])
}) })
this.on('noLongerPrivate', function () { this.on('noLongerPrivate', function () {
var newTopicData = { var newTopicData = {
@ -343,10 +348,10 @@ Metamaps.Backbone.init = function () {
mappableid: this.id mappableid: this.id
} }
$(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]) $(document).trigger(JIT.events.newTopic, [newTopicData])
}) })
this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this) this.on('change:metacode_id', Filter.checkMetacodes, this)
}, },
authorizeToEdit: function (mapper) { authorizeToEdit: function (mapper) {
if (mapper && if (mapper &&
@ -367,10 +372,10 @@ Metamaps.Backbone.init = function () {
return Metamaps.Metacodes.get(this.get('metacode_id')) return Metamaps.Metacodes.get(this.get('metacode_id'))
}, },
getMapping: function () { getMapping: function () {
if (!Metamaps.Active.Map) return false if (!Active.Map) return false
return Metamaps.Mappings.findWhere({ return Metamaps.Mappings.findWhere({
map_id: Metamaps.Active.Map.id, map_id: Active.Map.id,
mappable_type: 'Topic', mappable_type: 'Topic',
mappable_id: this.isNew() ? this.cid : this.id mappable_id: this.isNew() ? this.cid : this.id
}) })
@ -383,7 +388,7 @@ Metamaps.Backbone.init = function () {
name: this.get('name') name: this.get('name')
} }
if (Metamaps.Active.Map) { if (Active.Map) {
mapping = this.getMapping() mapping = this.getMapping()
node.data = { node.data = {
$mapping: null, $mapping: null,
@ -398,7 +403,7 @@ Metamaps.Backbone.init = function () {
var node = this.get('node') var node = this.get('node')
node.setData('topic', this) node.setData('topic', this)
if (Metamaps.Active.Map) { if (Active.Map) {
mapping = this.getMapping() mapping = this.getMapping()
node.setData('mapping', mapping) node.setData('mapping', mapping)
} }
@ -406,38 +411,38 @@ Metamaps.Backbone.init = function () {
return node return node
}, },
savedEvent: function () { savedEvent: function () {
Metamaps.Realtime.sendTopicChange(this) Realtime.sendTopicChange(this)
}, },
updateViews: function () { updateViews: function () {
var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node') var node = this.get('node')
// update topic card, if this topic is the one open there // update topic card, if this topic is the one open there
if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) { if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
Metamaps.TopicCard.showCard(node) TopicCard.showCard(node)
} }
// update the node on the map // update the node on the map
if (onPageWithTopicCard && node) { if (onPageWithTopicCard && node) {
node.name = this.get('name') node.name = this.get('name')
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
} }
}, },
updateCardView: function () { updateCardView: function () {
var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node') var node = this.get('node')
// update topic card, if this topic is the one open there // update topic card, if this topic is the one open there
if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) { if (onPageWithTopicCard && this == TopicCard.openTopicCard) {
Metamaps.TopicCard.showCard(node) TopicCard.showCard(node)
} }
}, },
updateNodeView: function () { updateNodeView: function () {
var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic var onPageWithTopicCard = Active.Map || Active.Topic
var node = this.get('node') var node = this.get('node')
// update the node on the map // update the node on the map
if (onPageWithTopicCard && node) { if (onPageWithTopicCard && node) {
node.name = this.get('name') node.name = this.get('name')
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
} }
} }
}) })
@ -485,8 +490,8 @@ Metamaps.Backbone.init = function () {
initialize: function () { initialize: function () {
if (this.isNew()) { if (this.isNew()) {
this.set({ this.set({
'user_id': Metamaps.Active.Mapper.id, 'user_id': Active.Mapper.id,
'permission': Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons', 'permission': Active.Map ? Active.Map.get('permission') : 'commons',
'category': 'from-to' 'category': 'from-to'
}) })
} }
@ -500,15 +505,15 @@ Metamaps.Backbone.init = function () {
mappableid: this.id mappableid: this.id
} }
$(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]) $(document).trigger(JIT.events.newSynapse, [newSynapseData])
}) })
this.on('nowPrivate', function () { this.on('nowPrivate', function () {
$(document).trigger(Metamaps.JIT.events.removeSynapse, [{ $(document).trigger(JIT.events.removeSynapse, [{
mappableid: this.id mappableid: this.id
}]) }])
}) })
this.on('change:desc', Metamaps.Filter.checkSynapses, this) this.on('change:desc', Filter.checkSynapses, this)
}, },
prepareLiForFilter: function () { prepareLiForFilter: function () {
var li = '' var li = ''
@ -542,10 +547,10 @@ Metamaps.Backbone.init = function () {
] : false ] : false
}, },
getMapping: function () { getMapping: function () {
if (!Metamaps.Active.Map) return false if (!Active.Map) return false
return Metamaps.Mappings.findWhere({ return Metamaps.Mappings.findWhere({
map_id: Metamaps.Active.Map.id, map_id: Active.Map.id,
mappable_type: 'Synapse', mappable_type: 'Synapse',
mappable_id: this.isNew() ? this.cid : this.id mappable_id: this.isNew() ? this.cid : this.id
}) })
@ -563,7 +568,7 @@ Metamaps.Backbone.init = function () {
} }
} }
if (Metamaps.Active.Map) { if (Active.Map) {
mapping = providedMapping || this.getMapping() mapping = providedMapping || this.getMapping()
mappingID = mapping.isNew() ? mapping.cid : mapping.id mappingID = mapping.isNew() ? mapping.cid : mapping.id
edge.data.$mappings = [] edge.data.$mappings = []
@ -577,7 +582,7 @@ Metamaps.Backbone.init = function () {
var edge = this.get('edge') var edge = this.get('edge')
edge.getData('synapses').push(this) edge.getData('synapses').push(this)
if (Metamaps.Active.Map) { if (Active.Map) {
mapping = this.getMapping() mapping = this.getMapping()
edge.getData('mappings').push(mapping) edge.getData('mappings').push(mapping)
} }
@ -585,28 +590,28 @@ Metamaps.Backbone.init = function () {
return edge return edge
}, },
savedEvent: function () { savedEvent: function () {
Metamaps.Realtime.sendSynapseChange(this) Realtime.sendSynapseChange(this)
}, },
updateViews: function () { updateViews: function () {
this.updateCardView() this.updateCardView()
this.updateEdgeView() this.updateEdgeView()
}, },
updateCardView: function () { updateCardView: function () {
var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic var onPageWithSynapseCard = Active.Map || Active.Topic
var edge = this.get('edge') var edge = this.get('edge')
// update synapse card, if this synapse is the one open there // update synapse card, if this synapse is the one open there
if (onPageWithSynapseCard && edge == Metamaps.SynapseCard.openSynapseCard) { if (onPageWithSynapseCard && edge == SynapseCard.openSynapseCard) {
Metamaps.SynapseCard.showCard(edge) SynapseCard.showCard(edge)
} }
}, },
updateEdgeView: function () { updateEdgeView: function () {
var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic var onPageWithSynapseCard = Active.Map || Active.Topic
var edge = this.get('edge') var edge = this.get('edge')
// update the edge on the map // update the edge on the map
if (onPageWithSynapseCard && edge) { if (onPageWithSynapseCard && edge) {
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
} }
} }
}) })
@ -625,20 +630,20 @@ Metamaps.Backbone.init = function () {
initialize: function () { initialize: function () {
if (this.isNew()) { if (this.isNew()) {
this.set({ this.set({
'user_id': Metamaps.Active.Mapper.id, 'user_id': Active.Mapper.id,
'map_id': Metamaps.Active.Map ? Metamaps.Active.Map.id : null 'map_id': Active.Map ? Active.Map.id : null
}) })
} }
}, },
getMap: function () { getMap: function () {
return Metamaps.Map.get(this.get('map_id')) return Map.get(this.get('map_id'))
}, },
getTopic: function () { getTopic: function () {
if (this.get('mappable_type') === 'Topic') return Metamaps.Topic.get(this.get('mappable_id')) if (this.get('mappable_type') === 'Topic') return Topic.get(this.get('mappable_id'))
else return false else return false
}, },
getSynapse: function () { getSynapse: function () {
if (this.get('mappable_type') === 'Synapse') return Metamaps.Synapse.get(this.get('mappable_id')) if (this.get('mappable_type') === 'Synapse') return Synapse.get(this.get('mappable_id'))
else return false else return false
} }
}) })
@ -661,36 +666,38 @@ Metamaps.Backbone.init = function () {
// this is for topic view // this is for topic view
Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection() Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection()
if (Metamaps.Active.Map) { if (Active.Map) {
Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection() Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection()
Metamaps.Active.Map = new self.Map(Metamaps.Active.Map) Active.Map = new self.Map(Active.Map)
} }
if (Metamaps.Active.Topic) Metamaps.Active.Topic = new self.Topic(Metamaps.Active.Topic) if (Active.Topic) Active.Topic = new self.Topic(Active.Topic)
// attach collection event listeners // attach collection event listeners
self.attachCollectionEvents = function () { self.attachCollectionEvents = function () {
Metamaps.Topics.on('add remove', function (topic) { Metamaps.Topics.on('add remove', function (topic) {
Metamaps.Map.InfoBox.updateNumbers() InfoBox.updateNumbers()
Metamaps.Filter.checkMetacodes() Filter.checkMetacodes()
Metamaps.Filter.checkMappers() Filter.checkMappers()
}) })
Metamaps.Synapses.on('add remove', function (synapse) { Metamaps.Synapses.on('add remove', function (synapse) {
Metamaps.Map.InfoBox.updateNumbers() InfoBox.updateNumbers()
Metamaps.Filter.checkSynapses() Filter.checkSynapses()
Metamaps.Filter.checkMappers() Filter.checkMappers()
}) })
if (Metamaps.Active.Map) { if (Active.Map) {
Metamaps.Mappings.on('add remove', function (mapping) { Metamaps.Mappings.on('add remove', function (mapping) {
Metamaps.Map.InfoBox.updateNumbers() InfoBox.updateNumbers()
Metamaps.Filter.checkSynapses() Filter.checkSynapses()
Metamaps.Filter.checkMetacodes() Filter.checkMetacodes()
Metamaps.Filter.checkMappers() Filter.checkMappers()
}) })
} }
} }
self.attachCollectionEvents() self.attachCollectionEvents()
}; // end Metamaps.Backbone.init }; // end _Backbone.init
export default _Backbone

264
app/assets/javascripts/src/Metamaps.Control.js → frontend/src/Metamaps/Control.js
View file

@ -1,154 +1,156 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import _ from 'lodash'
import Active from './Active'
import Filter from './Filter'
import GlobalUI from './GlobalUI'
import JIT from './JIT'
import Mouse from './Mouse'
import Selected from './Selected'
import Settings from './Settings'
import Visualize from './Visualize'
/* /*
* Metamaps.Control.js.erb * Metamaps.Control.js
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Control
* - Metamaps.Filter
* - Metamaps.GlobalUI
* - Metamaps.JIT
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Mouse
* - Metamaps.Selected
* - Metamaps.Settings
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Visualize
*/ */
Metamaps.Control = { const Control = {
init: function () {}, init: function () {},
selectNode: function (node, e) { selectNode: function (node, e) {
var filtered = node.getData('alpha') === 0 var filtered = node.getData('alpha') === 0
if (filtered || Metamaps.Selected.Nodes.indexOf(node) != -1) return if (filtered || Selected.Nodes.indexOf(node) != -1) return
node.selected = true node.selected = true
node.setData('dim', 30, 'current') node.setData('dim', 30, 'current')
Metamaps.Selected.Nodes.push(node) Selected.Nodes.push(node)
}, },
deselectAllNodes: function () { deselectAllNodes: function () {
var l = Metamaps.Selected.Nodes.length var l = Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
var node = Metamaps.Selected.Nodes[i] var node = Selected.Nodes[i]
Metamaps.Control.deselectNode(node) Control.deselectNode(node)
} }
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}, },
deselectNode: function (node) { deselectNode: function (node) {
delete node.selected delete node.selected
node.setData('dim', 25, 'current') node.setData('dim', 25, 'current')
// remove the node // remove the node
Metamaps.Selected.Nodes.splice( Selected.Nodes.splice(
Metamaps.Selected.Nodes.indexOf(node), 1) Selected.Nodes.indexOf(node), 1)
}, },
deleteSelected: function () { deleteSelected: function () {
if (!Metamaps.Active.Map) return if (!Active.Map) return
var n = Metamaps.Selected.Nodes.length var n = Selected.Nodes.length
var e = Metamaps.Selected.Edges.length var e = Selected.Edges.length
var ntext = n == 1 ? '1 topic' : n + ' topics' var ntext = n == 1 ? '1 topic' : n + ' topics'
var etext = e == 1 ? '1 synapse' : e + ' synapses' var etext = e == 1 ? '1 synapse' : e + ' synapses'
var text = 'You have ' + ntext + ' and ' + etext + ' selected. ' var text = 'You have ' + ntext + ' and ' + etext + ' selected. '
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
var r = confirm(text + 'Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.') var r = confirm(text + 'Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.')
if (r == true) { if (r == true) {
Metamaps.Control.deleteSelectedEdges() Control.deleteSelectedEdges()
Metamaps.Control.deleteSelectedNodes() Control.deleteSelectedNodes()
} }
}, },
deleteSelectedNodes: function () { // refers to deleting topics permanently deleteSelectedNodes: function () { // refers to deleting topics permanently
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
var l = Metamaps.Selected.Nodes.length var l = Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
var node = Metamaps.Selected.Nodes[i] var node = Selected.Nodes[i]
Metamaps.Control.deleteNode(node.id) Control.deleteNode(node.id)
} }
}, },
deleteNode: function (nodeid) { // refers to deleting topics permanently deleteNode: function (nodeid) { // refers to deleting topics permanently
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid) var node = Visualize.mGraph.graph.getNode(nodeid)
var topic = node.getData('topic') var topic = node.getData('topic')
var permToDelete = Metamaps.Active.Mapper.id === topic.get('user_id') || Metamaps.Active.Mapper.get('admin') var permToDelete = Active.Mapper.id === topic.get('user_id') || Active.Mapper.get('admin')
if (permToDelete) { if (permToDelete) {
var mappableid = topic.id var mappableid = topic.id
var mapping = node.getData('mapping') var mapping = node.getData('mapping')
topic.destroy() topic.destroy()
Metamaps.Mappings.remove(mapping) Metamaps.Mappings.remove(mapping)
$(document).trigger(Metamaps.JIT.events.deleteTopic, [{ $(document).trigger(JIT.events.deleteTopic, [{
mappableid: mappableid mappableid: mappableid
}]) }])
Metamaps.Control.hideNode(nodeid) Control.hideNode(nodeid)
} else { } else {
Metamaps.GlobalUI.notifyUser('Only topics you created can be deleted') GlobalUI.notifyUser('Only topics you created can be deleted')
} }
}, },
removeSelectedNodes: function () { // refers to removing topics permanently from a map removeSelectedNodes: function () { // refers to removing topics permanently from a map
if (Metamaps.Active.Topic) { if (Active.Topic) {
// hideNode will handle synapses as well // hideNode will handle synapses as well
var nodeids = _.map(Metamaps.Selected.Nodes, function(node) { var nodeids = _.map(Selected.Nodes, function(node) {
return node.id return node.id
}) })
_.each(nodeids, function(nodeid) { _.each(nodeids, function(nodeid) {
if (Metamaps.Active.Topic.id !== nodeid) { if (Active.Topic.id !== nodeid) {
Metamaps.Topics.remove(nodeid) Metamaps.Topics.remove(nodeid)
Metamaps.Control.hideNode(nodeid) Control.hideNode(nodeid)
} }
}) })
return return
} }
if (!Metamaps.Active.Map) return if (!Active.Map) return
var l = Metamaps.Selected.Nodes.length, var l = Selected.Nodes.length,
i, i,
node, node,
authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Selected.Nodes[i]
Metamaps.Control.removeNode(node.id) Control.removeNode(node.id)
} }
}, },
removeNode: function (nodeid) { // refers to removing topics permanently from a map removeNode: function (nodeid) { // refers to removing topics permanently from a map
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid) var node = Visualize.mGraph.graph.getNode(nodeid)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -157,116 +159,116 @@ Metamaps.Control = {
var mapping = node.getData('mapping') var mapping = node.getData('mapping')
mapping.destroy() mapping.destroy()
Metamaps.Topics.remove(topic) Metamaps.Topics.remove(topic)
$(document).trigger(Metamaps.JIT.events.removeTopic, [{ $(document).trigger(JIT.events.removeTopic, [{
mappableid: mappableid mappableid: mappableid
}]) }])
Metamaps.Control.hideNode(nodeid) Control.hideNode(nodeid)
}, },
hideSelectedNodes: function () { hideSelectedNodes: function () {
var l = Metamaps.Selected.Nodes.length, var l = Selected.Nodes.length,
i, i,
node node
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Selected.Nodes[i]
Metamaps.Control.hideNode(node.id) Control.hideNode(node.id)
} }
}, },
hideNode: function (nodeid) { hideNode: function (nodeid) {
var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid) var node = Visualize.mGraph.graph.getNode(nodeid)
var graph = Metamaps.Visualize.mGraph var graph = Visualize.mGraph
Metamaps.Control.deselectNode(node) Control.deselectNode(node)
node.setData('alpha', 0, 'end') node.setData('alpha', 0, 'end')
node.eachAdjacency(function (adj) { node.eachAdjacency(function (adj) {
adj.setData('alpha', 0, 'end') adj.setData('alpha', 0, 'end')
}) })
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:alpha', modes: ['node-property:alpha',
'edge-property:alpha' 'edge-property:alpha'
], ],
duration: 500 duration: 500
}) })
setTimeout(function () { setTimeout(function () {
if (nodeid == Metamaps.Visualize.mGraph.root) { // && Metamaps.Visualize.type === "RGraph" if (nodeid == Visualize.mGraph.root) { // && Visualize.type === "RGraph"
var newroot = _.find(graph.graph.nodes, function (n) { return n.id !== nodeid; }) var newroot = _.find(graph.graph.nodes, function (n) { return n.id !== nodeid; })
graph.root = newroot ? newroot.id : null graph.root = newroot ? newroot.id : null
} }
Metamaps.Visualize.mGraph.graph.removeNode(nodeid) Visualize.mGraph.graph.removeNode(nodeid)
}, 500) }, 500)
Metamaps.Filter.checkMetacodes() Filter.checkMetacodes()
Metamaps.Filter.checkMappers() Filter.checkMappers()
}, },
selectEdge: function (edge) { selectEdge: function (edge) {
var filtered = edge.getData('alpha') === 0; // don't select if the edge is filtered var filtered = edge.getData('alpha') === 0; // don't select if the edge is filtered
if (filtered || Metamaps.Selected.Edges.indexOf(edge) != -1) return if (filtered || Selected.Edges.indexOf(edge) != -1) return
var width = Metamaps.Mouse.edgeHoveringOver === edge ? 4 : 2 var width = Mouse.edgeHoveringOver === edge ? 4 : 2
edge.setDataset('current', { edge.setDataset('current', {
showDesc: true, showDesc: true,
lineWidth: width, lineWidth: width,
color: Metamaps.Settings.colors.synapses.selected color: Settings.colors.synapses.selected
}) })
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
Metamaps.Selected.Edges.push(edge) Selected.Edges.push(edge)
}, },
deselectAllEdges: function () { deselectAllEdges: function () {
var l = Metamaps.Selected.Edges.length var l = Selected.Edges.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
var edge = Metamaps.Selected.Edges[i] var edge = Selected.Edges[i]
Metamaps.Control.deselectEdge(edge) Control.deselectEdge(edge)
} }
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}, },
deselectEdge: function (edge) { deselectEdge: function (edge) {
edge.setData('showDesc', false, 'current') edge.setData('showDesc', false, 'current')
edge.setDataset('current', { edge.setDataset('current', {
lineWidth: 2, lineWidth: 2,
color: Metamaps.Settings.colors.synapses.normal color: Settings.colors.synapses.normal
}) })
if (Metamaps.Mouse.edgeHoveringOver == edge) { if (Mouse.edgeHoveringOver == edge) {
edge.setDataset('current', { edge.setDataset('current', {
showDesc: true, showDesc: true,
lineWidth: 4 lineWidth: 4
}) })
} }
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
// remove the edge // remove the edge
Metamaps.Selected.Edges.splice( Selected.Edges.splice(
Metamaps.Selected.Edges.indexOf(edge), 1) Selected.Edges.indexOf(edge), 1)
}, },
deleteSelectedEdges: function () { // refers to deleting topics permanently deleteSelectedEdges: function () { // refers to deleting topics permanently
var edge, var edge,
l = Metamaps.Selected.Edges.length l = Selected.Edges.length
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Selected.Edges[i]
Metamaps.Control.deleteEdge(edge) Control.deleteEdge(edge)
} }
}, },
deleteEdge: function (edge) { deleteEdge: function (edge) {
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
@ -275,10 +277,10 @@ Metamaps.Control = {
var synapse = edge.getData('synapses')[index] var synapse = edge.getData('synapses')[index]
var mapping = edge.getData('mappings')[index] var mapping = edge.getData('mappings')[index]
var permToDelete = Metamaps.Active.Mapper.id === synapse.get('user_id') || Metamaps.Active.Mapper.get('admin') var permToDelete = Active.Mapper.id === synapse.get('user_id') || Active.Mapper.get('admin')
if (permToDelete) { if (permToDelete) {
if (edge.getData('synapses').length - 1 === 0) { if (edge.getData('synapses').length - 1 === 0) {
Metamaps.Control.hideEdge(edge) Control.hideEdge(edge)
} }
var mappableid = synapse.id var mappableid = synapse.id
synapse.destroy() synapse.destroy()
@ -290,46 +292,46 @@ Metamaps.Control = {
if (edge.getData('displayIndex')) { if (edge.getData('displayIndex')) {
delete edge.data.$displayIndex delete edge.data.$displayIndex
} }
$(document).trigger(Metamaps.JIT.events.deleteSynapse, [{ $(document).trigger(JIT.events.deleteSynapse, [{
mappableid: mappableid mappableid: mappableid
}]) }])
} else { } else {
Metamaps.GlobalUI.notifyUser('Only synapses you created can be deleted') GlobalUI.notifyUser('Only synapses you created can be deleted')
} }
}, },
removeSelectedEdges: function () { removeSelectedEdges: function () {
// Topic view is handled by removeSelectedNodes // Topic view is handled by removeSelectedNodes
if (!Metamaps.Active.Map) return if (!Active.Map) return
var l = Metamaps.Selected.Edges.length, var l = Selected.Edges.length,
i, i,
edge edge
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Selected.Edges[i]
Metamaps.Control.removeEdge(edge) Control.removeEdge(edge)
} }
Metamaps.Selected.Edges = [ ] Selected.Edges = [ ]
}, },
removeEdge: function (edge) { removeEdge: function (edge) {
if (!Metamaps.Active.Map) return if (!Active.Map) return
var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper) var authorized = Active.Map.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
Metamaps.GlobalUI.notifyUser('Cannot edit Public map.') GlobalUI.notifyUser('Cannot edit Public map.')
return return
} }
if (edge.getData('mappings').length - 1 === 0) { if (edge.getData('mappings').length - 1 === 0) {
Metamaps.Control.hideEdge(edge) Control.hideEdge(edge)
} }
var index = edge.getData('displayIndex') ? edge.getData('displayIndex') : 0 var index = edge.getData('displayIndex') ? edge.getData('displayIndex') : 0
@ -346,51 +348,51 @@ Metamaps.Control = {
if (edge.getData('displayIndex')) { if (edge.getData('displayIndex')) {
delete edge.data.$displayIndex delete edge.data.$displayIndex
} }
$(document).trigger(Metamaps.JIT.events.removeSynapse, [{ $(document).trigger(JIT.events.removeSynapse, [{
mappableid: mappableid mappableid: mappableid
}]) }])
}, },
hideSelectedEdges: function () { hideSelectedEdges: function () {
var edge, var edge,
l = Metamaps.Selected.Edges.length, l = Selected.Edges.length,
i i
for (i = l - 1; i >= 0; i -= 1) { for (i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Selected.Edges[i]
Metamaps.Control.hideEdge(edge) Control.hideEdge(edge)
} }
Metamaps.Selected.Edges = [ ] Selected.Edges = [ ]
}, },
hideEdge: function (edge) { hideEdge: function (edge) {
var from = edge.nodeFrom.id var from = edge.nodeFrom.id
var to = edge.nodeTo.id var to = edge.nodeTo.id
edge.setData('alpha', 0, 'end') edge.setData('alpha', 0, 'end')
Metamaps.Control.deselectEdge(edge) Control.deselectEdge(edge)
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['edge-property:alpha'], modes: ['edge-property:alpha'],
duration: 500 duration: 500
}) })
setTimeout(function () { setTimeout(function () {
Metamaps.Visualize.mGraph.graph.removeAdjacence(from, to) Visualize.mGraph.graph.removeAdjacence(from, to)
}, 500) }, 500)
Metamaps.Filter.checkSynapses() Filter.checkSynapses()
Metamaps.Filter.checkMappers() Filter.checkMappers()
}, },
updateSelectedPermissions: function (permission) { updateSelectedPermissions: function (permission) {
var edge, synapse, node, topic var edge, synapse, node, topic
Metamaps.GlobalUI.notifyUser('Working...') GlobalUI.notifyUser('Working...')
// variables to keep track of how many nodes and synapses you had the ability to change the permission of // variables to keep track of how many nodes and synapses you had the ability to change the permission of
var nCount = 0, var nCount = 0,
sCount = 0 sCount = 0
// change the permission of the selected synapses, if logged in user is the original creator // change the permission of the selected synapses, if logged in user is the original creator
var l = Metamaps.Selected.Edges.length var l = Selected.Edges.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
edge = Metamaps.Selected.Edges[i] edge = Selected.Edges[i]
synapse = edge.getData('synapses')[0] synapse = edge.getData('synapses')[0]
if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) { if (synapse.authorizePermissionChange(Active.Mapper)) {
synapse.save({ synapse.save({
permission: permission permission: permission
}) })
@ -399,12 +401,12 @@ Metamaps.Control = {
} }
// change the permission of the selected topics, if logged in user is the original creator // change the permission of the selected topics, if logged in user is the original creator
var l = Metamaps.Selected.Nodes.length var l = Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Selected.Nodes[i]
topic = node.getData('topic') topic = node.getData('topic')
if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) { if (topic.authorizePermissionChange(Active.Mapper)) {
topic.save({ topic.save({
permission: permission permission: permission
}) })
@ -416,12 +418,12 @@ Metamaps.Control = {
var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses') var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses')
var message = nString + sString + ' you created updated to ' + permission var message = nString + sString + ' you created updated to ' + permission
Metamaps.GlobalUI.notifyUser(message) GlobalUI.notifyUser(message)
}, },
updateSelectedMetacodes: function (metacode_id) { updateSelectedMetacodes: function (metacode_id) {
var node, topic var node, topic
Metamaps.GlobalUI.notifyUser('Working...') GlobalUI.notifyUser('Working...')
var metacode = Metamaps.Metacodes.get(metacode_id) var metacode = Metamaps.Metacodes.get(metacode_id)
@ -429,12 +431,12 @@ Metamaps.Control = {
var nCount = 0 var nCount = 0
// change the permission of the selected topics, if logged in user is the original creator // change the permission of the selected topics, if logged in user is the original creator
var l = Metamaps.Selected.Nodes.length var l = Selected.Nodes.length
for (var i = l - 1; i >= 0; i -= 1) { for (var i = l - 1; i >= 0; i -= 1) {
node = Metamaps.Selected.Nodes[i] node = Selected.Nodes[i]
topic = node.getData('topic') topic = node.getData('topic')
if (topic.authorizeToEdit(Metamaps.Active.Mapper)) { if (topic.authorizeToEdit(Active.Mapper)) {
topic.save({ topic.save({
'metacode_id': metacode_id 'metacode_id': metacode_id
}) })
@ -445,7 +447,9 @@ Metamaps.Control = {
var nString = nCount == 1 ? (nCount.toString() + ' topic') : (nCount.toString() + ' topics') var nString = nCount == 1 ? (nCount.toString() + ' topic') : (nCount.toString() + ' topics')
var message = nString + ' you can edit updated to ' + metacode.get('name') var message = nString + ' you can edit updated to ' + metacode.get('name')
Metamaps.GlobalUI.notifyUser(message) GlobalUI.notifyUser(message)
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}, },
}; // end Metamaps.Control }
export default Control

103
app/assets/javascripts/src/Metamaps.Create.js → frontend/src/Metamaps/Create.js
View file

@ -1,20 +1,21 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Mouse from './Mouse'
import Selected from './Selected'
import Synapse from './Synapse'
import Topic from './Topic'
import Visualize from './Visualize'
import GlobalUI from './GlobalUI'
/* /*
* Metamaps.Create.js * Metamaps.Create.js
* *
* Dependencies: * Dependencies:
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.GlobalUI
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Mouse
* - Metamaps.Selected
* - Metamaps.Synapse
* - Metamaps.Topic
* - Metamaps.Visualize
*/ */
Metamaps.Create = { const Create = {
isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
selectedMetacodeSet: null, selectedMetacodeSet: null,
selectedMetacodeSetIndex: null, selectedMetacodeSetIndex: null,
@ -23,7 +24,7 @@ Metamaps.Create = {
selectedMetacodes: [], selectedMetacodes: [],
newSelectedMetacodes: [], newSelectedMetacodes: [],
init: function () { init: function () {
var self = Metamaps.Create var self = Create
self.newTopic.init() self.newTopic.init()
self.newSynapse.init() self.newSynapse.init()
@ -36,7 +37,7 @@ Metamaps.Create = {
$('.customMetacodeList li').click(self.toggleMetacodeSelected) // within the custom metacode set tab $('.customMetacodeList li').click(self.toggleMetacodeSelected) // within the custom metacode set tab
}, },
toggleMetacodeSelected: function () { toggleMetacodeSelected: function () {
var self = Metamaps.Create var self = Create
if ($(this).attr('class') != 'toggledOff') { if ($(this).attr('class') != 'toggledOff') {
$(this).addClass('toggledOff') $(this).addClass('toggledOff')
@ -51,29 +52,29 @@ Metamaps.Create = {
} }
}, },
updateMetacodeSet: function (set, index, custom) { updateMetacodeSet: function (set, index, custom) {
if (custom && Metamaps.Create.newSelectedMetacodes.length == 0) { if (custom && Create.newSelectedMetacodes.length == 0) {
alert('Please select at least one metacode to use!') alert('Please select at least one metacode to use!')
return false return false
} }
var codesToSwitchToIds var codesToSwitchToIds
var metacodeModels = new Metamaps.Backbone.MetacodeCollection() var metacodeModels = new Metamaps.Backbone.MetacodeCollection()
Metamaps.Create.selectedMetacodeSetIndex = index Create.selectedMetacodeSetIndex = index
Metamaps.Create.selectedMetacodeSet = 'metacodeset-' + set Create.selectedMetacodeSet = 'metacodeset-' + set
if (!custom) { if (!custom) {
codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',') codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',')
$('.customMetacodeList li').addClass('toggledOff') $('.customMetacodeList li').addClass('toggledOff')
Metamaps.Create.selectedMetacodes = [] Create.selectedMetacodes = []
Metamaps.Create.selectedMetacodeNames = [] Create.selectedMetacodeNames = []
Metamaps.Create.newSelectedMetacodes = [] Create.newSelectedMetacodes = []
Metamaps.Create.newSelectedMetacodeNames = [] Create.newSelectedMetacodeNames = []
} }
else if (custom) { else if (custom) {
// uses .slice to avoid setting the two arrays to the same actual array // uses .slice to avoid setting the two arrays to the same actual array
Metamaps.Create.selectedMetacodes = Metamaps.Create.newSelectedMetacodes.slice(0) Create.selectedMetacodes = Create.newSelectedMetacodes.slice(0)
Metamaps.Create.selectedMetacodeNames = Metamaps.Create.newSelectedMetacodeNames.slice(0) Create.selectedMetacodeNames = Create.newSelectedMetacodeNames.slice(0)
codesToSwitchToIds = Metamaps.Create.selectedMetacodes.slice(0) codesToSwitchToIds = Create.selectedMetacodes.slice(0)
} }
// sort by name // sort by name
@ -100,12 +101,12 @@ Metamaps.Create = {
bringToFront: true bringToFront: true
}) })
Metamaps.GlobalUI.closeLightbox() GlobalUI.closeLightbox()
$('#topic_name').focus() $('#topic_name').focus()
var mdata = { var mdata = {
'metacodes': { 'metacodes': {
'value': custom ? Metamaps.Create.selectedMetacodes.toString() : Metamaps.Create.selectedMetacodeSet 'value': custom ? Create.selectedMetacodes.toString() : Create.selectedMetacodeSet
} }
} }
$.ajax({ $.ajax({
@ -123,7 +124,7 @@ Metamaps.Create = {
}, },
cancelMetacodeSetSwitch: function () { cancelMetacodeSetSwitch: function () {
var self = Metamaps.Create var self = Create
self.isSwitchingSet = false self.isSwitchingSet = false
if (self.selectedMetacodeSet != 'metacodeset-custom') { if (self.selectedMetacodeSet != 'metacodeset-custom') {
@ -148,17 +149,17 @@ Metamaps.Create = {
newTopic: { newTopic: {
init: function () { init: function () {
$('#topic_name').keyup(function () { $('#topic_name').keyup(function () {
Metamaps.Create.newTopic.name = $(this).val() Create.newTopic.name = $(this).val()
}) })
$('.pinCarousel').click(function() { $('.pinCarousel').click(function() {
if (Metamaps.Create.newTopic.pinned) { if (Create.newTopic.pinned) {
$('.pinCarousel').removeClass('isPinned') $('.pinCarousel').removeClass('isPinned')
Metamaps.Create.newTopic.pinned = false Create.newTopic.pinned = false
} }
else { else {
$('.pinCarousel').addClass('isPinned') $('.pinCarousel').addClass('isPinned')
Metamaps.Create.newTopic.pinned = true Create.newTopic.pinned = true
} }
}) })
@ -192,7 +193,7 @@ Metamaps.Create = {
// tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
$('#topic_name').bind('typeahead:select', function (event, datum, dataset) { $('#topic_name').bind('typeahead:select', function (event, datum, dataset) {
Metamaps.Topic.getTopicFromAutocomplete(datum.id) Topic.getTopicFromAutocomplete(datum.id)
}) })
// initialize metacode spinner and then hide it // initialize metacode spinner and then hide it
@ -220,24 +221,24 @@ Metamaps.Create = {
$('#new_topic').fadeIn('fast', function () { $('#new_topic').fadeIn('fast', function () {
$('#topic_name').focus() $('#topic_name').focus()
}) })
Metamaps.Create.newTopic.beingCreated = true Create.newTopic.beingCreated = true
Metamaps.Create.newTopic.name = '' Create.newTopic.name = ''
}, },
hide: function (force) { hide: function (force) {
if (force || !Metamaps.Create.newTopic.pinned) { if (force || !Create.newTopic.pinned) {
$('#new_topic').fadeOut('fast') $('#new_topic').fadeOut('fast')
Metamaps.Create.newTopic.beingCreated = false Create.newTopic.beingCreated = false
} }
if (force) { if (force) {
$('.pinCarousel').removeClass('isPinned') $('.pinCarousel').removeClass('isPinned')
Metamaps.Create.newTopic.pinned = false Create.newTopic.pinned = false
} }
$('#topic_name').typeahead('val', '') $('#topic_name').typeahead('val', '')
} }
}, },
newSynapse: { newSynapse: {
init: function () { init: function () {
var self = Metamaps.Create.newSynapse var self = Create.newSynapse
var synapseBloodhound = new Bloodhound({ var synapseBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
@ -253,8 +254,8 @@ Metamaps.Create = {
remote: { remote: {
url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2', url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2',
prepare: function (query, settings) { prepare: function (query, settings) {
var self = Metamaps.Create.newSynapse var self = Create.newSynapse
if (Metamaps.Selected.Nodes.length < 2) { if (Selected.Nodes.length < 2) {
settings.url = settings.url.replace('%TOPIC1', self.topic1id).replace('%TOPIC2', self.topic2id) settings.url = settings.url.replace('%TOPIC1', self.topic1id).replace('%TOPIC2', self.topic2id)
return settings return settings
} else { } else {
@ -299,23 +300,23 @@ Metamaps.Create = {
if (e.keyCode === BACKSPACE && $(this).val() === '' || if (e.keyCode === BACKSPACE && $(this).val() === '' ||
e.keyCode === DELETE && $(this).val() === '' || e.keyCode === DELETE && $(this).val() === '' ||
e.keyCode === ESC) { e.keyCode === ESC) {
Metamaps.Create.newSynapse.hide() Create.newSynapse.hide()
} // if } // if
Metamaps.Create.newSynapse.description = $(this).val() Create.newSynapse.description = $(this).val()
}) })
$('#synapse_desc').focusout(function () { $('#synapse_desc').focusout(function () {
if (Metamaps.Create.newSynapse.beingCreated) { if (Create.newSynapse.beingCreated) {
Metamaps.Synapse.createSynapseLocally() Synapse.createSynapseLocally()
} }
}) })
$('#synapse_desc').bind('typeahead:select', function (event, datum, dataset) { $('#synapse_desc').bind('typeahead:select', function (event, datum, dataset) {
if (datum.id) { // if they clicked on an existing synapse get it if (datum.id) { // if they clicked on an existing synapse get it
Metamaps.Synapse.getSynapseFromAutocomplete(datum.id) Synapse.getSynapseFromAutocomplete(datum.id)
} else { } else {
Metamaps.Create.newSynapse.description = datum.value Create.newSynapse.description = datum.value
Metamaps.Synapse.createSynapseLocally() Synapse.createSynapseLocally()
} }
}) })
}, },
@ -328,17 +329,19 @@ Metamaps.Create = {
$('#new_synapse').fadeIn(100, function () { $('#new_synapse').fadeIn(100, function () {
$('#synapse_desc').focus() $('#synapse_desc').focus()
}) })
Metamaps.Create.newSynapse.beingCreated = true Create.newSynapse.beingCreated = true
}, },
hide: function () { hide: function () {
$('#new_synapse').fadeOut('fast') $('#new_synapse').fadeOut('fast')
$('#synapse_desc').typeahead('val', '') $('#synapse_desc').typeahead('val', '')
Metamaps.Create.newSynapse.beingCreated = false Create.newSynapse.beingCreated = false
Metamaps.Create.newTopic.addSynapse = false Create.newTopic.addSynapse = false
Metamaps.Create.newSynapse.topic1id = 0 Create.newSynapse.topic1id = 0
Metamaps.Create.newSynapse.topic2id = 0 Create.newSynapse.topic2id = 0
Metamaps.Mouse.synapseStartCoordinates = [] Mouse.synapseStartCoordinates = []
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
}, },
} }
}; // end Metamaps.Create }
export default Create

6
frontend/src/Metamaps/Debug.js Normal file
View file

@ -0,0 +1,6 @@
const Debug = (arg = window.Metamaps) => {
console.debug(arg)
console.debug(`Metamaps Version: ${arg.VERSION}`)
}
export default Debug

81
app/assets/javascripts/src/Metamaps.Filter.js → frontend/src/Metamaps/Filter.js
View file

@ -1,21 +1,24 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import _ from 'lodash'
import Active from './Active'
import Control from './Control'
import GlobalUI from './GlobalUI'
import Settings from './Settings'
import Visualize from './Visualize'
/* /*
* Metamaps.Filter.js.erb * Metamaps.Filter.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Control
* - Metamaps.Creators * - Metamaps.Creators
* - Metamaps.GlobalUI
* - Metamaps.Mappers * - Metamaps.Mappers
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Settings
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Visualize
*/ */
Metamaps.Filter = { const Filter = {
filters: { filters: {
name: '', name: '',
metacodes: [], metacodes: [],
@ -30,7 +33,7 @@ Metamaps.Filter = {
isOpen: false, isOpen: false,
changing: false, changing: false,
init: function () { init: function () {
var self = Metamaps.Filter var self = Filter
$('.sidebarFilterIcon').click(self.toggleBox) $('.sidebarFilterIcon').click(self.toggleBox)
@ -45,7 +48,7 @@ Metamaps.Filter = {
self.getFilterData() self.getFilterData()
}, },
toggleBox: function (event) { toggleBox: function (event) {
var self = Metamaps.Filter var self = Filter
if (self.isOpen) self.close() if (self.isOpen) self.close()
else self.open() else self.open()
@ -53,9 +56,9 @@ Metamaps.Filter = {
event.stopPropagation() event.stopPropagation()
}, },
open: function () { open: function () {
var self = Metamaps.Filter var self = Filter
Metamaps.GlobalUI.Account.close() GlobalUI.Account.close()
$('.sidebarFilterIcon div').addClass('hide') $('.sidebarFilterIcon div').addClass('hide')
if (!self.isOpen && !self.changing) { if (!self.isOpen && !self.changing) {
@ -69,7 +72,7 @@ Metamaps.Filter = {
} }
}, },
close: function () { close: function () {
var self = Metamaps.Filter var self = Filter
$('.sidebarFilterIcon div').removeClass('hide') $('.sidebarFilterIcon div').removeClass('hide')
if (!self.changing) { if (!self.changing) {
@ -82,7 +85,7 @@ Metamaps.Filter = {
} }
}, },
reset: function () { reset: function () {
var self = Metamaps.Filter var self = Filter
self.filters.metacodes = [] self.filters.metacodes = []
self.filters.mappers = [] self.filters.mappers = []
@ -102,7 +105,7 @@ Metamaps.Filter = {
But what these function do is load this data into three accessible array within java : metacodes, mappers and synapses But what these function do is load this data into three accessible array within java : metacodes, mappers and synapses
*/ */
getFilterData: function () { getFilterData: function () {
var self = Metamaps.Filter var self = Filter
var metacode, mapper, synapse var metacode, mapper, synapse
@ -125,7 +128,7 @@ Metamaps.Filter = {
}) })
}, },
bindLiClicks: function () { bindLiClicks: function () {
var self = Metamaps.Filter var self = Filter
$('#filter_by_metacode ul li').unbind().click(self.toggleMetacode) $('#filter_by_metacode ul li').unbind().click(self.toggleMetacode)
$('#filter_by_mapper ul li').unbind().click(self.toggleMapper) $('#filter_by_mapper ul li').unbind().click(self.toggleMapper)
$('#filter_by_synapse ul li').unbind().click(self.toggleSynapse) $('#filter_by_synapse ul li').unbind().click(self.toggleSynapse)
@ -136,7 +139,7 @@ Metamaps.Filter = {
@param @param
*/ */
updateFilters: function (collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) { updateFilters: function (collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) {
var self = Metamaps.Filter var self = Filter
var newList = [] var newList = []
var removed = [] var removed = []
@ -211,12 +214,12 @@ Metamaps.Filter = {
self.bindLiClicks() self.bindLiClicks()
}, },
checkMetacodes: function () { checkMetacodes: function () {
var self = Metamaps.Filter var self = Filter
self.updateFilters('Topics', 'metacode_id', 'Metacodes', 'metacodes', 'metacode') self.updateFilters('Topics', 'metacode_id', 'Metacodes', 'metacodes', 'metacode')
}, },
checkMappers: function () { checkMappers: function () {
var self = Metamaps.Filter var self = Filter
var onMap = Metamaps.Active.Map ? true : false var onMap = Active.Map ? true : false
if (onMap) { if (onMap) {
self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper') self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper')
} else { } else {
@ -225,11 +228,11 @@ Metamaps.Filter = {
} }
}, },
checkSynapses: function () { checkSynapses: function () {
var self = Metamaps.Filter var self = Filter
self.updateFilters('Synapses', 'desc', 'Synapses', 'synapses', 'synapse') self.updateFilters('Synapses', 'desc', 'Synapses', 'synapses', 'synapse')
}, },
filterAllMetacodes: function (e) { filterAllMetacodes: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_metacode ul li').addClass('toggledOff') $('#filter_by_metacode ul li').addClass('toggledOff')
$('.showAllMetacodes').removeClass('active') $('.showAllMetacodes').removeClass('active')
$('.hideAllMetacodes').addClass('active') $('.hideAllMetacodes').addClass('active')
@ -237,7 +240,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterNoMetacodes: function (e) { filterNoMetacodes: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_metacode ul li').removeClass('toggledOff') $('#filter_by_metacode ul li').removeClass('toggledOff')
$('.showAllMetacodes').addClass('active') $('.showAllMetacodes').addClass('active')
$('.hideAllMetacodes').removeClass('active') $('.hideAllMetacodes').removeClass('active')
@ -245,7 +248,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterAllMappers: function (e) { filterAllMappers: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_mapper ul li').addClass('toggledOff') $('#filter_by_mapper ul li').addClass('toggledOff')
$('.showAllMappers').removeClass('active') $('.showAllMappers').removeClass('active')
$('.hideAllMappers').addClass('active') $('.hideAllMappers').addClass('active')
@ -253,7 +256,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterNoMappers: function (e) { filterNoMappers: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_mapper ul li').removeClass('toggledOff') $('#filter_by_mapper ul li').removeClass('toggledOff')
$('.showAllMappers').addClass('active') $('.showAllMappers').addClass('active')
$('.hideAllMappers').removeClass('active') $('.hideAllMappers').removeClass('active')
@ -261,7 +264,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterAllSynapses: function (e) { filterAllSynapses: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_synapse ul li').addClass('toggledOff') $('#filter_by_synapse ul li').addClass('toggledOff')
$('.showAllSynapses').removeClass('active') $('.showAllSynapses').removeClass('active')
$('.hideAllSynapses').addClass('active') $('.hideAllSynapses').addClass('active')
@ -269,7 +272,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
filterNoSynapses: function (e) { filterNoSynapses: function (e) {
var self = Metamaps.Filter var self = Filter
$('#filter_by_synapse ul li').removeClass('toggledOff') $('#filter_by_synapse ul li').removeClass('toggledOff')
$('.showAllSynapses').addClass('active') $('.showAllSynapses').addClass('active')
$('.hideAllSynapses').removeClass('active') $('.hideAllSynapses').removeClass('active')
@ -280,7 +283,7 @@ Metamaps.Filter = {
// to reduce code redundancy // to reduce code redundancy
// gets called in the context of a list item in a filter box // gets called in the context of a list item in a filter box
toggleLi: function (whichToFilter) { toggleLi: function (whichToFilter) {
var self = Metamaps.Filter, index var self = Filter, index
var id = $(this).attr('data-id') var id = $(this).attr('data-id')
if (self.visible[whichToFilter].indexOf(id) == -1) { if (self.visible[whichToFilter].indexOf(id) == -1) {
self.visible[whichToFilter].push(id) self.visible[whichToFilter].push(id)
@ -293,7 +296,7 @@ Metamaps.Filter = {
self.passFilters() self.passFilters()
}, },
toggleMetacode: function () { toggleMetacode: function () {
var self = Metamaps.Filter var self = Filter
self.toggleLi.call(this, 'metacodes') self.toggleLi.call(this, 'metacodes')
if (self.visible.metacodes.length === self.filters.metacodes.length) { if (self.visible.metacodes.length === self.filters.metacodes.length) {
@ -309,7 +312,7 @@ Metamaps.Filter = {
} }
}, },
toggleMapper: function () { toggleMapper: function () {
var self = Metamaps.Filter var self = Filter
self.toggleLi.call(this, 'mappers') self.toggleLi.call(this, 'mappers')
if (self.visible.mappers.length === self.filters.mappers.length) { if (self.visible.mappers.length === self.filters.mappers.length) {
@ -325,7 +328,7 @@ Metamaps.Filter = {
} }
}, },
toggleSynapse: function () { toggleSynapse: function () {
var self = Metamaps.Filter var self = Filter
self.toggleLi.call(this, 'synapses') self.toggleLi.call(this, 'synapses')
if (self.visible.synapses.length === self.filters.synapses.length) { if (self.visible.synapses.length === self.filters.synapses.length) {
@ -341,16 +344,16 @@ Metamaps.Filter = {
} }
}, },
passFilters: function () { passFilters: function () {
var self = Metamaps.Filter var self = Filter
var visible = self.visible var visible = self.visible
var passesMetacode, passesMapper, passesSynapse var passesMetacode, passesMapper, passesSynapse
var onMap var onMap
if (Metamaps.Active.Map) { if (Active.Map) {
onMap = true onMap = true
} }
else if (Metamaps.Active.Topic) { else if (Active.Topic) {
onMap = false onMap = false
} }
@ -386,10 +389,10 @@ Metamaps.Filter = {
else console.log(topic) else console.log(topic)
} else { } else {
if (n) { if (n) {
Metamaps.Control.deselectNode(n, true) Control.deselectNode(n, true)
n.setData('alpha', opacityForFilter, 'end') n.setData('alpha', opacityForFilter, 'end')
n.eachAdjacency(function (e) { n.eachAdjacency(function (e) {
Metamaps.Control.deselectEdge(e, true) Control.deselectEdge(e, true)
}) })
} }
else console.log(topic) else console.log(topic)
@ -442,12 +445,12 @@ Metamaps.Filter = {
if (visible.mappers.indexOf(user_id) == -1) passesMapper = false if (visible.mappers.indexOf(user_id) == -1) passesMapper = false
else passesMapper = true else passesMapper = true
var color = Metamaps.Settings.colors.synapses.normal var color = Settings.colors.synapses.normal
if (passesSynapse && passesMapper) { if (passesSynapse && passesMapper) {
e.setData('alpha', 1, 'end') e.setData('alpha', 1, 'end')
e.setData('color', color, 'end') e.setData('color', color, 'end')
} else { } else {
Metamaps.Control.deselectEdge(e, true) Control.deselectEdge(e, true)
e.setData('alpha', opacityForFilter, 'end') e.setData('alpha', opacityForFilter, 'end')
} }
@ -457,10 +460,12 @@ Metamaps.Filter = {
}) })
// run the animation // run the animation
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:alpha', modes: ['node-property:alpha',
'edge-property:alpha'], 'edge-property:alpha'],
duration: 200 duration: 200
}) })
} }
}; // end Metamaps.Filter }
export default Filter

646
frontend/src/Metamaps/GlobalUI.js Normal file
View file

@ -0,0 +1,646 @@
import Active from './Active'
import Create from './Create'
import Filter from './Filter'
import Router from './Router'
/*
* Metamaps.Backbone
* Metamaps.Erb
* Metamaps.Maps
*/
const GlobalUI = {
notifyTimeout: null,
lightbox: null,
init: function () {
var self = GlobalUI;
self.Search.init();
self.CreateMap.init();
self.Account.init();
if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
//bind lightbox clicks
$('.openLightbox').click(function (event) {
self.openLightbox($(this).attr('data-open'));
event.preventDefault();
return false;
});
$('#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()
$(selector).animate({
opacity: 1
}, 200, 'easeOutCubic')
},
hideDiv: function (selector) {
$(selector).animate({
opacity: 0
}, 200, 'easeInCubic', function () { $(this).hide() })
},
openLightbox: function (which) {
var self = GlobalUI;
$('.lightboxContent').hide();
$('#' + which).show();
self.lightbox = which;
$('#lightbox_overlay').show();
var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
// animate the content in from the bottom
$('#lightbox_main').animate({
'top': '50%',
'margin-top': heightOfContent
}, 200, 'easeOutCubic');
// fade the black overlay in
$('#lightbox_screen').animate({
'opacity': '0.42'
}, 200);
if (which == "switchMetacodes") {
Create.isSwitchingSet = true;
}
},
closeLightbox: function (event) {
var self = GlobalUI;
if (event) event.preventDefault();
// animate the lightbox content offscreen
$('#lightbox_main').animate({
'top': '100%',
'margin-top': '0'
}, 200, 'easeInCubic');
// fade the black overlay out
$('#lightbox_screen').animate({
'opacity': '0.0'
}, 200, function () {
$('#lightbox_overlay').hide();
});
if (self.lightbox === 'forkmap') GlobalUI.CreateMap.reset('fork_map');
if (self.lightbox === 'newmap') GlobalUI.CreateMap.reset('new_map');
if (Create && Create.isSwitchingSet) {
Create.cancelMetacodeSetSwitch();
}
self.lightbox = null;
},
notifyUser: function (message, leaveOpen) {
var self = GlobalUI;
$('#toast').html(message)
self.showDiv('#toast')
clearTimeout(self.notifyTimeOut);
if (!leaveOpen) {
self.notifyTimeOut = setTimeout(function () {
self.hideDiv('#toast')
}, 8000);
}
},
clearNotify: function() {
var self = GlobalUI;
clearTimeout(self.notifyTimeOut);
self.hideDiv('#toast')
},
shareInvite: function(inviteLink) {
window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
}
}
GlobalUI.CreateMap = {
newMap: null,
emptyMapForm: "",
emptyForkMapForm: "",
topicsToMap: [],
synapsesToMap: [],
init: function () {
var self = GlobalUI.CreateMap;
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
self.bindFormEvents();
self.emptyMapForm = $('#new_map').html();
},
bindFormEvents: function () {
var self = GlobalUI.CreateMap;
$('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) {
if (event.keyCode === 13) self.submit()
})
$('.new_map button.cancel').unbind().bind('click', function (event) {
event.preventDefault();
GlobalUI.closeLightbox();
});
$('.new_map button.submitMap').unbind().bind('click', self.submit);
// bind permission changer events on the createMap form
$('.permIcon').unbind().bind('click', self.switchPermission);
},
closeSuccess: function () {
$('#mapCreatedSuccess').fadeOut(300, function(){
$(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='GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>";
stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='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 = GlobalUI.CreateMap;
self.newMap.set('permission', $(this).attr('data-permission'));
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
$(this).find('.mapPermIcon').addClass('selected');
var permText = $(this).find('.tip').html();
$(this).parents('.new_map').find('.permText').html(permText);
},
submit: function (event) {
if (event) event.preventDefault();
var self = GlobalUI.CreateMap;
if (GlobalUI.lightbox === 'forkmap') {
self.newMap.set('topicsToMap', self.topicsToMap);
self.newMap.set('synapsesToMap', self.synapsesToMap);
}
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId);
self.newMap.set('name', $form.find('#map_name').val());
self.newMap.set('desc', $form.find('#map_desc').val());
if (self.newMap.get('name').length===0){
self.throwMapNameError();
return;
}
self.newMap.save(null, {
success: self.success
// TODO add error message
});
GlobalUI.closeLightbox();
GlobalUI.notifyUser('Working...');
},
throwMapNameError: function () {
var self = GlobalUI.CreateMap;
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId);
var message = $("<div class='feedback_message'>Please enter a map name...</div>");
$form.find('#map_name').after(message);
setTimeout(function(){
message.fadeOut('fast', function(){
message.remove();
});
}, 5000);
},
success: function (model) {
var self = GlobalUI.CreateMap;
//push the new map onto the collection of 'my maps'
Metamaps.Maps.Mine.add(model);
var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var form = $(formId);
GlobalUI.clearNotify();
$('#wrapper').append(self.generateSuccessMessage(model.id));
},
reset: function (id) {
var self = GlobalUI.CreateMap;
var form = $('#' + id);
if (id === "fork_map") {
self.topicsToMap = [];
self.synapsesToMap = [];
form.html(self.emptyForkMapForm);
}
else {
form.html(self.emptyMapForm);
}
self.bindFormEvents();
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
return false;
},
}
GlobalUI.Account = {
isOpen: false,
changing: false,
init: function () {
var self = GlobalUI.Account;
$('.sidebarAccountIcon').click(self.toggleBox);
$('.sidebarAccountBox').click(function(event){
event.stopPropagation();
});
$('body').click(self.close);
},
toggleBox: function (event) {
var self = GlobalUI.Account;
if (self.isOpen) self.close();
else self.open();
event.stopPropagation();
},
open: function () {
var self = GlobalUI.Account;
Filter.close();
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
if (!self.isOpen && !self.changing) {
self.changing = true;
$('.sidebarAccountBox').fadeIn(200, function () {
self.changing = false;
self.isOpen = true;
$('.sidebarAccountBox #user_email').focus();
});
}
},
close: function () {
var self = GlobalUI.Account;
$('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
if (!self.changing) {
self.changing = true;
$('.sidebarAccountBox #user_email').blur();
$('.sidebarAccountBox').fadeOut(200, function () {
self.changing = false;
self.isOpen = false;
});
}
}
}
GlobalUI.Search = {
locked: false,
isOpen: false,
limitTopicsToMe: false,
limitMapsToMe: false,
timeOut: null,
changing: false,
optionsInitialized: false,
init: function () {
var self = GlobalUI.Search;
var loader = new CanvasLoader('searchLoading');
loader.setColor('#4fb5c0'); // default is '#000000'
loader.setDiameter(24); // default is 40
loader.setDensity(41); // default is 40
loader.setRange(0.9); // default is 1.3
loader.show(); // Hidden by default
// bind the hover events
$(".sidebarSearch").hover(function () {
self.open()
}, function () {
self.close(800, false)
});
$('.sidebarSearchIcon').click(function (e) {
$('.sidebarSearchField').focus();
});
$('.sidebarSearch').click(function (e) {
e.stopPropagation();
});
$('body').click(function (e) {
self.close(0, false);
});
// open if the search is closed and user hits ctrl+/
// close if they hit ESC
$('body').bind('keyup', function (e) {
switch (e.which) {
case 191:
if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) {
self.open(true); // true for focus
}
break;
case 27:
if (self.isOpen) {
self.close(0, true);
}
break;
default:
break; //console.log(e.which);
}
});
self.startTypeahead();
},
lock: function() {
var self = GlobalUI.Search;
self.locked = true;
},
unlock: function() {
var self = GlobalUI.Search;
self.locked = false;
},
open: function (focus) {
var self = GlobalUI.Search;
clearTimeout(self.timeOut);
if (!self.isOpen && !self.changing && !self.locked) {
self.changing = true;
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
width: '400px'
}, 300, function () {
if (focus) $('.sidebarSearchField').focus();
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({
padding: '7px 10px 3px 10px',
width: '380px'
});
self.changing = false;
self.isOpen = true;
});
}
},
close: function (closeAfter, bypass) {
// for now
return
var self = GlobalUI.Search;
self.timeOut = setTimeout(function () {
if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() == '')) {
self.changing = true;
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({
padding: '7px 0 3px 0',
width: '400px'
});
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
width: '0'
}, 300, function () {
$('.sidebarSearchField').typeahead('val', '');
$('.sidebarSearchField').blur();
self.changing = false;
self.isOpen = false;
});
}
}, closeAfter);
},
startTypeahead: function () {
var self = GlobalUI.Search;
var mapheader = Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>';
var topicheader = Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>';
var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>';
var topics = {
name: 'topics',
limit: 9999,
display: function(s) { return s.label; },
templates: {
notFound: function(s) {
return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
value: "No results",
label: "No results",
typeImageURL: Metamaps.Erb['icons/wildcard.png'],
rtype: "noresult"
});
},
header: topicheader,
suggestion: function(s) {
return Hogan.compile($('#topicSearchTemplate').html()).render(s);
},
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/topics',
prepare: function(query, settings) {
settings.url += '?term=' + query;
if (Active.Mapper && self.limitTopicsToMe) {
settings.url += "&user=" + Active.Mapper.id.toString();
}
return settings;
},
},
}),
};
var maps = {
name: 'maps',
limit: 9999,
display: function(s) { return s.label; },
templates: {
notFound: function(s) {
return Hogan.compile(mapheader + $('#mapSearchTemplate').html()).render({
value: "No results",
label: "No results",
rtype: "noresult"
});
},
header: mapheader,
suggestion: function(s) {
return Hogan.compile($('#mapSearchTemplate').html()).render(s);
},
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/maps',
prepare: function(query, settings) {
settings.url += '?term=' + query;
if (Active.Mapper && self.limitMapsToMe) {
settings.url += "&user=" + Active.Mapper.id.toString();
}
return settings;
},
},
}),
};
var mappers = {
name: 'mappers',
limit: 9999,
display: function(s) { return s.label; },
templates: {
notFound: function(s) {
return Hogan.compile(mapperheader + $('#mapperSearchTemplate').html()).render({
value: "No results",
label: "No results",
rtype: "noresult",
profile: Metamaps.Erb['user.png']
});
},
header: mapperheader,
suggestion: function(s) {
return Hogan.compile($('#mapperSearchTemplate').html()).render(s);
},
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/mappers?term=%QUERY',
wildcard: '%QUERY',
},
}),
};
// Take all that crazy setup data and put it together into one beautiful typeahead call!
$('.sidebarSearchField').typeahead(
{
highlight: true,
},
[topics, maps, mappers]
);
//Set max height of the search results box to prevent it from covering bottom left footer
$('.sidebarSearchField').bind('typeahead:render', function (event) {
self.initSearchOptions();
self.hideLoader();
var h = $(window).height();
$(".tt-dropdown-menu").css('max-height', h - 100);
if (self.limitTopicsToMe) {
$('#limitTopicsToMe').prop('checked', true);
}
if (self.limitMapsToMe) {
$('#limitMapsToMe').prop('checked', true);
}
});
$(window).resize(function () {
var h = $(window).height();
$(".tt-dropdown-menu").css('max-height', h - 100);
});
// tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
$('.sidebarSearchField').bind('typeahead:select', self.handleResultClick);
// don't do it, if they clicked on a 'addToMap' button
$('.sidebarSearch button.addToMap').click(function (event) {
event.stopPropagation();
});
// make sure that when you click on 'limit to me' or 'toggle section' it works
$('.sidebarSearchField.tt-input').keyup(function(){
if ($('.sidebarSearchField.tt-input').val() === '') {
self.hideLoader();
} else {
self.showLoader();
}
});
},
handleResultClick: function (event, datum, dataset) {
var self = GlobalUI.Search;
self.hideLoader();
if (["topic", "map", "mapper"].indexOf(datum.rtype) !== -1) {
self.close(0, true);
var win;
if (datum.rtype == "topic") {
Router.topics(datum.id);
} else if (datum.rtype == "map") {
Router.maps(datum.id);
} else if (datum.rtype == "mapper") {
Router.explore("mapper", datum.id);
}
}
},
initSearchOptions: function () {
var self = GlobalUI.Search;
function toggleResultSet(set) {
var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult');
if (s.is(':visible')) {
s.hide();
$(this).removeClass('minimizeResults').addClass('maximizeResults');
} else {
s.show();
$(this).removeClass('maximizeResults').addClass('minimizeResults');
}
}
$('.limitToMe').unbind().bind("change", function (e) {
if ($(this).attr('id') == 'limitTopicsToMe') {
self.limitTopicsToMe = !self.limitTopicsToMe;
}
if ($(this).attr('id') == 'limitMapsToMe') {
self.limitMapsToMe = !self.limitMapsToMe;
}
// set the value of the search equal to itself to retrigger the
// autocomplete event
var searchQuery = $('.sidebarSearchField.tt-input').val();
$(".sidebarSearchField").typeahead('val', '')
.typeahead('val', searchQuery);
});
// when the user clicks minimize section, hide the results for that section
$('.minimizeMapperResults').unbind().click(function (e) {
toggleResultSet.call(this, 'mappers');
});
$('.minimizeTopicResults').unbind().click(function (e) {
toggleResultSet.call(this, 'topics');
});
$('.minimizeMapResults').unbind().click(function (e) {
toggleResultSet.call(this, 'maps');
});
},
hideLoader: function () {
$('#searchLoading').hide();
},
showLoader: function () {
$('#searchLoading').show();
}
}
export default GlobalUI

40
app/assets/javascripts/src/Metamaps.Import.js → frontend/src/Metamaps/Import.js
View file

@ -1,19 +1,23 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import GlobalUI from './GlobalUI'
import Map from './Map'
import Synapse from './Synapse'
import Topic from './Topic'
/* /*
* Metamaps.Import.js.erb * Metamaps.Import.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.Map
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topics * - Metamaps.Topics
*/ */
Metamaps.Import = { const Import = {
// note that user is not imported // note that user is not imported
topicWhitelist: [ topicWhitelist: [
'id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission' 'id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission'
@ -24,19 +28,19 @@ Metamaps.Import = {
cidMappings: {}, // to be filled by import_id => cid mappings cidMappings: {}, // to be filled by import_id => cid mappings
handleTSV: function (text) { handleTSV: function (text) {
var self = Metamaps.Import var self = Import
results = self.parseTabbedString(text) results = self.parseTabbedString(text)
self.handle(results) self.handle(results)
}, },
handleJSON: function (text) { handleJSON: function (text) {
var self = Metamaps.Import var self = Import
results = JSON.parse(text) results = JSON.parse(text)
self.handle(results) self.handle(results)
}, },
handle: function(results) { handle: function(results) {
var self = Metamaps.Import var self = Import
var topics = results.topics var topics = results.topics
var synapses = results.synapses var synapses = results.synapses
@ -60,7 +64,7 @@ Metamaps.Import = {
}, },
parseTabbedString: function (text) { parseTabbedString: function (text) {
var self = Metamaps.Import var self = Import
// determine line ending and split lines // determine line ending and split lines
var delim = '\n' var delim = '\n'
@ -186,7 +190,7 @@ Metamaps.Import = {
}, },
importTopics: function (parsedTopics) { importTopics: function (parsedTopics) {
var self = Metamaps.Import var self = Import
// up to 25 topics: scale 100 // up to 25 topics: scale 100
// up to 81 topics: scale 200 // up to 81 topics: scale 200
@ -219,7 +223,7 @@ Metamaps.Import = {
}, },
importSynapses: function (parsedSynapses) { importSynapses: function (parsedSynapses) {
var self = Metamaps.Import var self = Import
parsedSynapses.forEach(function (synapse) { parsedSynapses.forEach(function (synapse) {
// only createSynapseWithParameters once both topics are persisted // only createSynapseWithParameters once both topics are persisted
@ -255,16 +259,16 @@ Metamaps.Import = {
createTopicWithParameters: function (name, metacode_name, permission, desc, createTopicWithParameters: function (name, metacode_name, permission, desc,
link, xloc, yloc, import_id, opts) { link, xloc, yloc, import_id, opts) {
var self = Metamaps.Import var self = Import
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
var metacode = Metamaps.Metacodes.where({name: metacode_name})[0] || null var metacode = Metamaps.Metacodes.where({name: metacode_name})[0] || null
if (metacode === null) { if (metacode === null) {
metacode = Metamaps.Metacodes.where({ name: 'Wildcard' })[0] metacode = Metamaps.Metacodes.where({ name: 'Wildcard' })[0]
console.warn("Couldn't find metacode " + metacode_name + ' so used Wildcard instead.') console.warn("Couldn't find metacode " + metacode_name + ' so used Wildcard instead.')
} }
var topic_permission = permission || Metamaps.Active.Map.get('permission') var topic_permission = permission || Active.Map.get('permission')
var defer_to_map_id = permission === topic_permission ? Metamaps.Active.Map.get('id') : null var defer_to_map_id = permission === topic_permission ? Active.Map.get('id') : null
var topic = new Metamaps.Backbone.Topic({ var topic = new Metamaps.Backbone.Topic({
name: name, name: name,
metacode_id: metacode.id, metacode_id: metacode.id,
@ -272,7 +276,7 @@ Metamaps.Import = {
defer_to_map_id: defer_to_map_id, defer_to_map_id: defer_to_map_id,
desc: desc || "", desc: desc || "",
link: link || "", link: link || "",
calculated_permission: Metamaps.Active.Map.get('permission') calculated_permission: Active.Map.get('permission')
}) })
Metamaps.Topics.add(topic) Metamaps.Topics.add(topic)
@ -289,11 +293,11 @@ Metamaps.Import = {
Metamaps.Mappings.add(mapping) Metamaps.Mappings.add(mapping)
// this function also includes the creation of the topic in the database // this function also includes the creation of the topic in the database
Metamaps.Topic.renderTopic(mapping, topic, true, true, { Topic.renderTopic(mapping, topic, true, true, {
success: opts.success success: opts.success
}) })
Metamaps.GlobalUI.hideDiv('#instructions') GlobalUI.hideDiv('#instructions')
}, },
createSynapseWithParameters: function (desc, category, permission, createSynapseWithParameters: function (desc, category, permission,
@ -321,6 +325,8 @@ Metamaps.Import = {
}) })
Metamaps.Mappings.add(mapping) Metamaps.Mappings.add(mapping)
Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, true) Synapse.renderSynapse(mapping, synapse, node1, node2, true)
} }
} }
export default Import

651
app/assets/javascripts/src/Metamaps.JIT.js → frontend/src/Metamaps/JIT.js
View file

File diff suppressed because it is too large Load diff

123
frontend/src/Metamaps/Listeners.js Normal file
View file

@ -0,0 +1,123 @@
/* global $ */
import Active from './Active'
import Control from './Control'
import JIT from './JIT'
import Mobile from './Mobile'
import Realtime from './Realtime'
import Selected from './Selected'
import Topic from './Topic'
import Visualize from './Visualize'
const Listeners = {
init: function () {
var self = this
$(document).on('keydown', function (e) {
if (!(Active.Map || Active.Topic)) return
switch (e.which) {
case 13: // if enter key is pressed
JIT.enterKeyHandler()
e.preventDefault()
break
case 27: // if esc key is pressed
JIT.escKeyHandler()
break
case 65: // if a or A is pressed
if (e.ctrlKey) {
Control.deselectAllNodes()
Control.deselectAllEdges()
e.preventDefault()
Visualize.mGraph.graph.eachNode(function (n) {
Control.selectNode(n, e)
})
Visualize.mGraph.plot()
}
break
case 68: // if d or D is pressed
if (e.ctrlKey) {
e.preventDefault()
Control.deleteSelected()
}
break
case 69: // if e or E is pressed
if (e.ctrlKey && Active.Map) {
e.preventDefault()
JIT.zoomExtents(null, Visualize.mGraph.canvas)
break
}
if (e.altKey && Active.Topic) {
e.preventDefault()
if (Active.Topic) {
self.centerAndReveal(Selected.Nodes, {
center: true,
reveal: false
})
}
break
}
break
case 72: // if h or H is pressed
if (e.ctrlKey) {
e.preventDefault()
Control.hideSelectedNodes()
Control.hideSelectedEdges()
}
break
case 77: // if m or M is pressed
if (e.ctrlKey) {
e.preventDefault()
Control.removeSelectedNodes()
Control.removeSelectedEdges()
}
break
case 82: // if r or R is pressed
if (e.altKey && Active.Topic) {
e.preventDefault()
self.centerAndReveal(Selected.Nodes, {
center: false,
reveal: true
})
}
break
case 84: // if t or T is pressed
if (e.altKey && Active.Topic) {
e.preventDefault()
self.centerAndReveal(Selected.Nodes, {
center: true,
reveal: true
})
}
break
default:
// console.log(e.which)
break
}
})
$(window).resize(function () {
if (Visualize && Visualize.mGraph) Visualize.mGraph.canvas.resize($(window).width(), $(window).height())
if (Active.Map && Realtime.inConversation) Realtime.positionVideos()
Mobile.resizeTitle()
})
},
centerAndReveal: function(nodes, opts) {
if (nodes.length < 1) return
var node = nodes[nodes.length - 1]
if (opts.center && opts.reveal) {
Topic.centerOn(node.id, function() {
Topic.fetchRelatives(nodes)
})
} else if (opts.center) {
Topic.centerOn(node.id)
} else if (opts.reveal) {
Topic.fetchRelatives(nodes)
}
}
}
export default Listeners

27
frontend/src/Metamaps/Map/CheatSheet.js Normal file
View file

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

373
frontend/src/Metamaps/Map/InfoBox.js Normal file
View file

@ -0,0 +1,373 @@
/* global Metamaps, $ */
import Active from '../Active'
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,
selectingPermission: false,
changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, and the permission of all the topics and synapses you have authority to change will change as well.</div>",
nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="textarea" data-activator="#mapInfoName">{{name}}</span>',
descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description..." data-type="textarea" data-activator="#mapInfoDesc">{{desc}}</span>',
init: function () {
var self = InfoBox
$('.mapInfoIcon').click(self.toggleBox)
$('.mapInfoBox').click(function (event) {
event.stopPropagation()
})
$('body').click(self.close)
self.attachEventListeners()
self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
var querystring = window.location.search.replace(/^\?/, '')
if (querystring == 'new') {
self.open()
$('.mapInfoBox').addClass('mapRequestTitle')
}
},
toggleBox: function (event) {
var self = InfoBox
if (self.isOpen) self.close()
else self.open()
event.stopPropagation()
},
open: function () {
var self = InfoBox
$('.mapInfoIcon div').addClass('hide')
if (!self.isOpen && !self.changing) {
self.changing = true
$('.mapInfoBox').fadeIn(200, function () {
self.changing = false
self.isOpen = true
})
}
},
close: function () {
var self = InfoBox
$('.mapInfoIcon div').removeClass('hide')
if (!self.changing) {
self.changing = true
$('.mapInfoBox').fadeOut(200, function () {
self.changing = false
self.isOpen = false
self.hidePermissionSelect()
$('.mapContributors .tip').hide()
})
}
},
load: function () {
var self = InfoBox
var map = Active.Map
var obj = map.pick('permission', 'topic_count', 'synapse_count')
var isCreator = map.authorizePermissionChange(Active.Mapper)
var canEdit = map.authorizeToEdit(Active.Mapper)
var relevantPeople = map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.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')
obj['desc'] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get('desc')}) : map.get('desc')
obj['map_creator_tip'] = isCreator ? self.changePermissionText : ''
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_list'] = self.createContributorList()
obj['user_name'] = isCreator ? 'You' : map.get('user_name')
obj['created_at'] = map.get('created_at_clean')
obj['updated_at'] = map.get('updated_at_clean')
var classes = isCreator ? 'yourMap' : ''
classes += canEdit ? ' canEdit' : ''
classes += shareable ? ' shareable' : ''
$('.mapInfoBox').removeClass('shareable yourMap canEdit')
.addClass(classes)
.html(self.generateBoxHTML.render(obj))
self.attachEventListeners()
},
attachEventListeners: function () {
var self = InfoBox
$('.mapInfoBox.canEdit .best_in_place').best_in_place()
// because anyone who can edit the map can change the map title
var bipName = $('.mapInfoBox .best_in_place_name')
bipName.unbind('best_in_place:activate').bind('best_in_place:activate', function () {
var $el = bipName.find('textarea')
var el = $el[0]
$el.attr('maxlength', '140')
$('.mapInfoName').append('<div class="nameCounter forMap"></div>')
var callback = function (data) {
$('.nameCounter.forMap').html(data.all + '/140')
}
Countable.live(el, callback)
})
bipName.unbind('best_in_place:deactivate').bind('best_in_place:deactivate', function () {
$('.nameCounter.forMap').remove()
})
$('.mapInfoName .best_in_place_name').unbind('ajax:success').bind('ajax:success', function () {
var name = $(this).html()
Active.Map.set('name', name)
Active.Map.trigger('saved')
// mobile menu
$('#header_content').html(name)
$('.mapInfoBox').removeClass('mapRequestTitle')
document.title = name + ' | Metamaps'
})
$('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () {
var desc = $(this).html()
Active.Map.set('desc', desc)
Active.Map.trigger('saved')
})
$('.yourMap .mapPermission').unbind().click(self.onPermissionClick)
// .yourMap in the unbind/bind is just a namespace for the events
// not a reference to the class .yourMap on the .mapInfoBox
$('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect)
$('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap)
$('.mapContributors span, #mapContribs').unbind().click(function (event) {
$('.mapContributors .tip').toggle()
event.stopPropagation()
})
$('.mapContributors .tip').unbind().click(function (event) {
event.stopPropagation()
})
$('.mapContributors .tip li a').click(Router.intercept)
$('.mapInfoBox').unbind('.hideTip').bind('click.hideTip', function () {
$('.mapContributors .tip').hide()
})
self.addTypeahead()
},
addTypeahead: function () {
var self = InfoBox
if (!Active.Map) return
// for autocomplete
var collaborators = {
name: 'collaborators',
limit: 9999,
display: function(s) { return s.label; },
templates: {
notFound: function(s) {
return Hogan.compile($('#collaboratorSearchTemplate').html()).render({
value: "No results",
label: "No results",
rtype: "noresult",
profile: Metamaps.Erb['user.png'],
});
},
suggestion: function(s) {
return Hogan.compile($('#collaboratorSearchTemplate').html()).render(s);
},
},
source: new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/mappers?term=%QUERY',
wildcard: '%QUERY',
},
})
}
// for adding map collaborators, who will have edit rights
if (Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')) {
$('.collaboratorSearchField').typeahead(
{
highlight: false,
},
[collaborators]
)
$('.collaboratorSearchField').bind('typeahead:select', self.handleResultClick)
$('.mapContributors .removeCollaborator').click(function () {
self.removeCollaborator(parseInt($(this).data('id')))
})
}
},
removeCollaborator: function (collaboratorId) {
var self = InfoBox
Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId))
var mapperIds = Metamaps.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)) {
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 })
$.post('/maps/' + Active.Map.id + '/access', { access: mapperIds })
var name = Metamaps.Collaborators.get(newCollaboratorId).get('name')
GlobalUI.notifyUser(name + ' will be notified by email')
self.updateNumbers()
}
$.getJSON('/users/' + newCollaboratorId + '.json', callback)
},
handleResultClick: function (event, item) {
var self = InfoBox
self.addCollaborator(item.id)
$('.collaboratorSearchField').typeahead('val', '')
},
updateNameDescPerm: function (name, desc, perm) {
$('.mapInfoBox').removeClass('mapRequestTitle')
$('.mapInfoName .best_in_place_name').html(name)
$('.mapInfoDesc .best_in_place_desc').html(desc)
$('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm)
},
createContributorList: function () {
var self = InfoBox
var relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
var activeMapperIsCreator = Active.Mapper && Active.Mapper.id === Active.Map.get('user_id')
var string = ''
string += '<ul>'
relevantPeople.each(function (m) {
var isCreator = Active.Map.get('user_id') === m.get('id')
string += '<li><a href="/explore/mapper/' + m.get('id') + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get('image') + '" />' + m.get('name')
if (isCreator) string += ' (creator)'
string += '</a>'
if (activeMapperIsCreator && !isCreator) string += '<span class="removeCollaborator" data-id="' + m.get('id') + '"></span>'
string += '</li>'
})
string += '</ul>'
if (activeMapperIsCreator) {
string += '<div class="collabSearchField"><span class="addCollab"></span><input class="collaboratorSearchField" placeholder="Add a collaborator!"></input></div>'
}
return string
},
updateNumbers: function () {
if (!Active.Map) return
var self = InfoBox
var mapper = Active.Mapper
var relevantPeople = Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.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']
if (relevantPeople.length > 0) {
// get the first contributor and use their image
contributors_image = relevantPeople.models[0].get('image')
}
$('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class)
$('.mapContributors span').text(relevantPeople.length)
$('.mapContributors .tip').html(self.createContributorList())
self.addTypeahead()
$('.mapContributors .tip').unbind().click(function (event) {
event.stopPropagation()
})
$('.mapTopics').text(Metamaps.Topics.length)
$('.mapSynapses').text(Metamaps.Synapses.length)
$('.mapEditedAt').html('<span>Last edited: </span>' + Util.nowDateFormatted())
},
onPermissionClick: function (event) {
var self = InfoBox
if (!self.selectingPermission) {
self.selectingPermission = true
$(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
if ($(this).hasClass('commons')) {
$(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>')
} else if ($(this).hasClass('public')) {
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>')
} else if ($(this).hasClass('private')) {
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>')
}
$('.mapPermission .permissionSelect li').click(self.selectPermission)
event.stopPropagation()
}
},
hidePermissionSelect: function () {
var self = InfoBox
self.selectingPermission = false
$('.mapPermission').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
$('.mapPermission .permissionSelect').remove()
},
selectPermission: function (event) {
var self = InfoBox
self.selectingPermission = false
var permission = $(this).attr('class')
Active.Map.save({
permission: permission
})
Active.Map.updateMapWrapper()
shareable = permission === 'private' ? '' : 'shareable'
$('.mapPermission').removeClass('commons public private minimize').addClass(permission)
$('.mapPermission .permissionSelect').remove()
$('.mapInfoBox').removeClass('shareable').addClass(shareable)
event.stopPropagation()
},
deleteActiveMap: function () {
var confirmString = 'Are you sure you want to delete this map? '
confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.'
var doIt = confirm(confirmString)
var map = Active.Map
var mapper = Active.Mapper
var authorized = map.authorizePermissionChange(mapper)
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)
map.destroy()
Router.home()
GlobalUI.notifyUser('Map eliminated!')
}
else if (!authorized) {
alert("Hey now. We can't just go around willy nilly deleting other people's maps now can we? Run off and find something constructive to do, eh?")
}
}
}
export default InfoBox

365
frontend/src/Metamaps/Map/index.js Normal file
View file

@ -0,0 +1,365 @@
/* global Metamaps, $ */
import Active from '../Active'
import AutoLayout from '../AutoLayout'
import Create from '../Create'
import Filter from '../Filter'
import GlobalUI from '../GlobalUI'
import JIT from '../JIT'
import Realtime from '../Realtime'
import Router from '../Router'
import Selected from '../Selected'
import SynapseCard from '../SynapseCard'
import TopicCard from '../TopicCard'
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 () {
var self = Map
// prevent right clicks on the main canvas, so as to not get in the way of our right clicks
$('#center-container').bind('contextmenu', function (e) {
return false
})
$('.starMap').click(function () {
if ($(this).is('.starred')) self.unstar()
else self.star()
})
$('.sidebarFork').click(function () {
self.fork()
})
GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
self.updateStar()
self.InfoBox.init()
CheatSheet.init()
$(document).on(Map.events.editedByActiveMapper, self.editedByActiveMapper)
},
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()
var map = Active.Map
var mapper = Active.Mapper
// add class to .wrapper for specifying whether you can edit the map
if (map.authorizeToEdit(mapper)) {
$('.wrapper').addClass('canEditMap')
}
// add class to .wrapper for specifying if the map can
// be collaborated on
if (map.get('permission') === 'commons') {
$('.wrapper').addClass('commonsMap')
}
Map.updateStar()
// set filter mapper H3 text
$('#filter_by_mapper h3').html('MAPPERS')
// build and render the visualization
Visualize.type = 'ForceDirected'
JIT.prepareVizData()
// update filters
Filter.reset()
// reset selected arrays
Selected.reset()
// set the proper mapinfobox content
Map.InfoBox.load()
// these three update the actual filter box with the right list items
Filter.checkMetacodes()
Filter.checkSynapses()
Filter.checkMappers()
Realtime.startActiveMap()
Metamaps.Loading.hide()
// for mobile
$('#header_content').html(map.get('name'))
}
$.ajax({
url: '/maps/' + id + '/contains.json',
success: start
})
},
end: function () {
if (Active.Map) {
$('.wrapper').removeClass('canEditMap commonsMap')
AutoLayout.resetSpiral()
$('.rightclickmenu').remove()
TopicCard.hideCard()
SynapseCard.hideCard()
Create.newTopic.hide(true) // true means force (and override pinned)
Create.newSynapse.hide()
Filter.close()
Map.InfoBox.close()
Realtime.endActiveMap()
}
},
updateStar: function () {
if (!Active.Mapper || !Metamaps.Stars) return
// update the star/unstar icon
if (Metamaps.Stars.find(function (s) { return s.user_id === Active.Mapper.id })) {
$('.starMap').addClass('starred')
$('.starMap .tooltipsAbove').html('Unstar')
} else {
$('.starMap').removeClass('starred')
$('.starMap .tooltipsAbove').html('Star')
}
},
star: function () {
var self = 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)
GlobalUI.notifyUser('Map is now starred')
self.updateStar()
},
unstar: function () {
var self = 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)
self.updateStar()
},
fork: function () {
GlobalUI.openLightbox('forkmap')
var nodes_data = '',
synapses_data = ''
var nodes_array = []
var synapses_array = []
// collect the unfiltered topics
Visualize.mGraph.graph.eachNode(function (n) {
// if the opacity is less than 1 then it's filtered
if (n.getData('alpha') === 1) {
var id = n.getData('topic').id
nodes_array.push(id)
var x, y
if (n.pos.x && n.pos.y) {
x = n.pos.x
y = n.pos.y
} else {
var x = Math.cos(n.pos.theta) * n.pos.rho
var y = Math.sin(n.pos.theta) * n.pos.rho
}
nodes_data += id + '/' + x + '/' + y + ','
}
})
// collect the unfiltered synapses
Metamaps.Synapses.each(function (synapse) {
var desc = synapse.get('desc')
var descNotFiltered = Filter.visible.synapses.indexOf(desc) > -1
// make sure that both topics are being added, otherwise, it
// doesn't make sense to add the synapse
var topicsNotFiltered = nodes_array.indexOf(synapse.get('node1_id')) > -1
topicsNotFiltered = topicsNotFiltered && nodes_array.indexOf(synapse.get('node2_id')) > -1
if (descNotFiltered && topicsNotFiltered) {
synapses_array.push(synapse.id)
}
})
synapses_data = synapses_array.join()
nodes_data = nodes_data.slice(0, -1)
GlobalUI.CreateMap.topicsToMap = nodes_data
GlobalUI.CreateMap.synapsesToMap = synapses_data
},
leavePrivateMap: function () {
var map = Active.Map
Metamaps.Maps.Active.remove(map)
Metamaps.Maps.Featured.remove(map)
Router.home()
GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
},
cantEditNow: function () {
Realtime.turnOff(true); // true is for 'silence'
GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.')
Active.Map.trigger('changeByOther')
},
canEditNow: function () {
var confirmString = "You've been granted permission to edit this map. "
confirmString += 'Do you want to reload and enable realtime collaboration?'
var c = confirm(confirmString)
if (c) {
Router.maps(Active.Map.id)
}
},
editedByActiveMapper: function () {
if (Active.Mapper) {
Metamaps.Mappers.add(Active.Mapper)
}
},
exportImage: function () {
var canvas = {}
canvas.canvas = document.createElement('canvas')
canvas.canvas.width = 1880 // 960
canvas.canvas.height = 1260 // 630
canvas.scaleOffsetX = 1
canvas.scaleOffsetY = 1
canvas.translateOffsetY = 0
canvas.translateOffsetX = 0
canvas.denySelected = true
canvas.getSize = function () {
if (this.size) return this.size
var canvas = this.canvas
return this.size = {
width: canvas.width,
height: canvas.height
}
}
canvas.scale = function (x, y) {
var px = this.scaleOffsetX * x,
py = this.scaleOffsetY * y
var dx = this.translateOffsetX * (x - 1) / px,
dy = this.translateOffsetY * (y - 1) / py
this.scaleOffsetX = px
this.scaleOffsetY = py
this.getCtx().scale(x, y)
this.translate(dx, dy)
}
canvas.translate = function (x, y) {
var sx = this.scaleOffsetX,
sy = this.scaleOffsetY
this.translateOffsetX += x * sx
this.translateOffsetY += y * sy
this.getCtx().translate(x, y)
}
canvas.getCtx = function () {
return this.canvas.getContext('2d')
}
// center it
canvas.getCtx().translate(1880 / 2, 1260 / 2)
var mGraph = Visualize.mGraph
var id = mGraph.root
var root = mGraph.graph.getNode(id)
var T = !!root.visited
// pass true to avoid basing it on a selection
JIT.zoomExtents(null, canvas, true)
var c = canvas.canvas,
ctx = canvas.getCtx(),
scale = canvas.scaleOffsetX
// draw a grey background
ctx.fillStyle = '#d8d9da'
var xPoint = (-(c.width / scale) / 2) - (canvas.translateOffsetX / scale),
yPoint = (-(c.height / scale) / 2) - (canvas.translateOffsetY / scale)
ctx.fillRect(xPoint, yPoint, c.width / scale, c.height / scale)
// draw the graph
mGraph.graph.eachNode(function (node) {
var nodeAlpha = node.getData('alpha')
node.eachAdjacency(function (adj) {
var nodeTo = adj.nodeTo
if (!!nodeTo.visited === T && node.drawn && nodeTo.drawn) {
mGraph.fx.plotLine(adj, canvas)
}
})
if (node.drawn) {
mGraph.fx.plotNode(node, canvas)
}
if (!mGraph.labelsHidden) {
if (node.drawn && nodeAlpha >= 0.95) {
mGraph.labels.plotLabel(canvas, node)
} else {
mGraph.labels.hideLabel(node, false)
}
}
node.visited = !T
})
var imageData = {
encoded_image: canvas.canvas.toDataURL()
}
var map = Active.Map
var today = new Date()
var dd = today.getDate()
var mm = today.getMonth() + 1; // January is 0!
var yyyy = today.getFullYear()
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = mm + '/' + dd + '/' + yyyy
var mapName = map.get('name').split(' ').join([separator = '-'])
var downloadMessage = ''
downloadMessage += 'Captured map screenshot! '
downloadMessage += "<a href='" + imageData.encoded_image + "' "
downloadMessage += "download='metamap-" + map.id + '-' + mapName + '-' + today + ".png'>DOWNLOAD</a>"
GlobalUI.notifyUser(downloadMessage)
$.ajax({
type: 'POST',
dataType: 'json',
url: '/maps/' + Active.Map.id + '/upload_screenshot',
data: imageData,
success: function (data) {
console.log('successfully uploaded map screenshot')
},
error: function () {
console.log('failed to save map screenshot')
}
})
}
}
export { CheatSheet, InfoBox }
export default Map

19
frontend/src/Metamaps/Mapper.js Normal file
View file

@ -0,0 +1,19 @@
/*
* Metamaps.Backbone
*/
const Mapper = {
// this function is to retrieve a mapper JSON object from the database
// @param id = the id of the mapper to retrieve
get: function (id, callback) {
return fetch(`/users/${id}.json`, {
}).then(response => {
if (!response.ok) throw response
return response.json()
}).then(payload => {
callback(new Metamaps.Backbone.Mapper(payload))
})
}
}
export default Mapper

23
app/assets/javascripts/src/Metamaps.Mobile.js → frontend/src/Metamaps/Mobile.js
View file

@ -1,16 +1,11 @@
/* global Metamaps, $ */ /* global $ */
/* import Active from './Active'
* Metamaps.Mobile.js import Map from './Map'
*
* Dependencies:
* - Metamaps.Active
* - Metamaps.Map
*/
Metamaps.Mobile = { const Mobile = {
init: function () { init: function () {
var self = Metamaps.Mobile var self = Mobile
$('#menu_icon').click(self.toggleMenu) $('#menu_icon').click(self.toggleMenu)
$('#mobile_menu li a').click(self.liClick) $('#mobile_menu li a').click(self.liClick)
@ -22,7 +17,7 @@ Metamaps.Mobile = {
$('#header_content').width($(document).width() - 70) $('#header_content').width($(document).width() - 70)
}, },
liClick: function () { liClick: function () {
var self = Metamaps.Mobile var self = Mobile
$('#header_content').html($(this).text()) $('#header_content').html($(this).text())
self.toggleMenu() self.toggleMenu()
}, },
@ -30,8 +25,10 @@ Metamaps.Mobile = {
$('#mobile_menu').toggle() $('#mobile_menu').toggle()
}, },
titleClick: function () { titleClick: function () {
if (Metamaps.Active.Map) { if (Active.Map) {
Metamaps.Map.InfoBox.open() Map.InfoBox.open()
} }
} }
} }
export default Mobile

16
frontend/src/Metamaps/Mouse.js Normal file
View file

@ -0,0 +1,16 @@
const Mouse = {
didPan: false,
didBoxZoom: false,
changeInX: 0,
changeInY: 0,
edgeHoveringOver: false,
boxStartCoordinates: false,
boxEndCoordinates: false,
synapseStartCoordinates: [],
synapseEndCoordinates: null,
lastNodeClick: 0,
lastCanvasClick: 0,
DOUBLE_CLICK_TOLERANCE: 300
}
export default Mouse

46
app/assets/javascripts/src/Metamaps.Organize.js → frontend/src/Metamaps/Organize.js
View file

@ -1,22 +1,22 @@
/* global Metamaps, $ */ /* global $ */
/* import _ from 'lodash'
* Metamaps.Organize.js.erb
* import $jit from '../patched/JIT'
* Dependencies:
* - Metamaps.Visualize import Visualize from './Visualize'
*/ import JIT from './JIT'
Metamaps.Organize = {
init: function () {}, const Organize = {
arrange: function (layout, centerNode) { arrange: function (layout, centerNode) {
// first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin // first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin
if (layout == 'grid') { if (layout == 'grid') {
var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization var numNodes = _.size(Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
var GRIDSPACE = 400 var GRIDSPACE = 400
var row = 0 var row = 0
var column = 0 var column = 0
Metamaps.Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function (n) {
if (column == numColumns) { if (column == numColumns) {
column = 0 column = 0
row += 1 row += 1
@ -27,14 +27,14 @@ Metamaps.Organize = {
n.setPos(newPos, 'end') n.setPos(newPos, 'end')
column += 1 column += 1
}) })
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout) Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (layout == 'grid_full') { } else if (layout == 'grid_full') {
// this will always be an integer, the # of nodes on your graph visualization // this will always be an integer, the # of nodes on your graph visualization
var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes) var numNodes = _.size(Visualize.mGraph.graph.nodes)
// var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid // var numColumns = Math.floor(Math.sqrt(numNodes)) // the number of columns to make an even grid
// var GRIDSPACE = 400 // var GRIDSPACE = 400
var height = Metamaps.Visualize.mGraph.canvas.getSize(0).height var height = Visualize.mGraph.canvas.getSize(0).height
var width = Metamaps.Visualize.mGraph.canvas.getSize(0).width var width = Visualize.mGraph.canvas.getSize(0).width
var totalArea = height * width var totalArea = height * width
var cellArea = totalArea / numNodes var cellArea = totalArea / numNodes
var ratio = height / width var ratio = height / width
@ -45,7 +45,7 @@ Metamaps.Organize = {
var totalCells = row * column var totalCells = row * column
if (totalCells) if (totalCells)
Metamaps.Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function (n) {
if (column == numColumns) { if (column == numColumns) {
column = 0 column = 0
row += 1 row += 1
@ -56,7 +56,7 @@ Metamaps.Organize = {
n.setPos(newPos, 'end') n.setPos(newPos, 'end')
column += 1 column += 1
}) })
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout) Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (layout == 'radial') { } else if (layout == 'radial') {
var centerX = centerNode.getPos().x var centerX = centerNode.getPos().x
var centerY = centerNode.getPos().y var centerY = centerNode.getPos().y
@ -88,16 +88,16 @@ Metamaps.Organize = {
}) })
} }
radial(centerNode, 1, 0) radial(centerNode, 1, 0)
Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout) Visualize.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (layout == 'center_viewport') { } else if (layout == 'center_viewport') {
var lowX = 0, var lowX = 0,
lowY = 0, lowY = 0,
highX = 0, highX = 0,
highY = 0 highY = 0
var oldOriginX = Metamaps.Visualize.mGraph.canvas.translateOffsetX var oldOriginX = Visualize.mGraph.canvas.translateOffsetX
var oldOriginY = Metamaps.Visualize.mGraph.canvas.translateOffsetY var oldOriginY = Visualize.mGraph.canvas.translateOffsetY
Metamaps.Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function (n) {
if (n.id === 1) { if (n.id === 1) {
lowX = n.getPos().x lowX = n.getPos().x
lowY = n.getPos().y lowY = n.getPos().y
@ -114,4 +114,6 @@ Metamaps.Organize = {
var newOriginY = (lowY + highY) / 2 var newOriginY = (lowY + highY) / 2
} else alert('please call function with a valid layout dammit!') } else alert('please call function with a valid layout dammit!')
} }
}; // end Metamaps.Organize }
export default Organize

33
app/assets/javascripts/src/Metamaps.PasteInput.js → frontend/src/Metamaps/PasteInput.js
View file

@ -1,19 +1,16 @@
/* global Metamaps, $ */ /* global $ */
/* import AutoLayout from './AutoLayout'
* Metamaps.PasteInput.js.erb import Import from './Import'
* import TopicCard from './TopicCard'
* Dependencies: import Util from './Util'
* - Metamaps.Import
* - Metamaps.AutoLayout
*/
Metamaps.PasteInput = { const PasteInput = {
// thanks to https://github.com/kevva/url-regex // thanks to https://github.com/kevva/url-regex
URL_REGEX: new RegExp('^(?:(?:(?:[a-z]+:)?//)|www\.)(?:\S+(?::\S*)?@)?(?:localhost|(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])(?:\.(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){3}|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#][^\s"]*)?$'), URL_REGEX: new RegExp('^(?:(?:(?:[a-z]+:)?//)|www\.)(?:\S+(?::\S*)?@)?(?:localhost|(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])(?:\.(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){3}|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#][^\s"]*)?$'),
init: function () { init: function () {
var self = Metamaps.PasteInput var self = PasteInput
// intercept dragged files // intercept dragged files
// see http://stackoverflow.com/questions/6756583 // see http://stackoverflow.com/questions/6756583
@ -24,7 +21,7 @@ Metamaps.PasteInput = {
window.addEventListener("drop", function(e) { window.addEventListener("drop", function(e) {
e = e || event; e = e || event;
e.preventDefault(); e.preventDefault();
var coords = Metamaps.Util.pixelsToCoords({ x: e.clientX, y: e.clientY }) var coords = Util.pixelsToCoords({ x: e.clientX, y: e.clientY })
if (e.dataTransfer.files.length > 0) { if (e.dataTransfer.files.length > 0) {
var fileReader = new FileReader() var fileReader = new FileReader()
var text = fileReader.readAsText(e.dataTransfer.files[0]) var text = fileReader.readAsText(e.dataTransfer.files[0])
@ -58,7 +55,7 @@ Metamaps.PasteInput = {
}, },
handle: function(text, coords) { handle: function(text, coords) {
var self = Metamaps.PasteInput var self = PasteInput
if (text.match(self.URL_REGEX)) { if (text.match(self.URL_REGEX)) {
self.handleURL(text, coords) self.handleURL(text, coords)
@ -74,13 +71,13 @@ Metamaps.PasteInput = {
handleURL: function (text, coords) { handleURL: function (text, coords) {
var title = 'Link' var title = 'Link'
if (!coords || !coords.x || !coords.y) { if (!coords || !coords.x || !coords.y) {
coords = Metamaps.AutoLayout.getNextCoord() coords = AutoLayout.getNextCoord()
} }
var import_id = null // don't store a cidMapping var import_id = null // don't store a cidMapping
var permission = null // use default var permission = null // use default
Metamaps.Import.createTopicWithParameters( Import.createTopicWithParameters(
title, title,
'Reference', // metacode - todo fix 'Reference', // metacode - todo fix
permission, permission,
@ -91,7 +88,7 @@ Metamaps.PasteInput = {
import_id, import_id,
{ {
success: function(topic) { success: function(topic) {
Metamaps.TopicCard.showCard(topic.get('node'), function() { TopicCard.showCard(topic.get('node'), function() {
$('#showcard #titleActivator').click() $('#showcard #titleActivator').click()
.find('textarea, input').focus() .find('textarea, input').focus()
}) })
@ -101,10 +98,12 @@ Metamaps.PasteInput = {
}, },
handleJSON: function (text) { handleJSON: function (text) {
Metamaps.Import.handleJSON(text) Import.handleJSON(text)
}, },
handleTSV: function (text) { handleTSV: function (text) {
Metamaps.Import.handleTSV(text) Import.handleTSV(text)
} }
} }
export default PasteInput

7
frontend/src/Metamaps/ReactComponents.js Normal file
View file

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

474
app/assets/javascripts/src/Metamaps.Realtime.js → frontend/src/Metamaps/Realtime.js
View file

File diff suppressed because it is too large Load diff

252
frontend/src/Metamaps/Router.js Normal file
View file

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

11
frontend/src/Metamaps/Selected.js Normal file
View file

@ -0,0 +1,11 @@
const Selected = {
reset: function () {
var self = Metamaps.Selected
self.Nodes = []
self.Edges = []
},
Nodes: [],
Edges: []
}
export default Selected

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

@ -0,0 +1,21 @@
const Settings = {
embed: false, // indicates that the app is on a page that is optimized for embedding in iFrames on other web pages
sandbox: false, // puts the app into a mode (when true) where it only creates data locally, and isn't writing it to the database
colors: {
background: '#344A58',
synapses: {
normal: '#888888',
hover: '#888888',
selected: '#FFFFFF'
},
topics: {
selected: '#FFFFFF'
},
labels: {
background: '#18202E',
text: '#DDD'
}
},
}
export default Settings

62
app/assets/javascripts/src/Metamaps.Synapse.js → frontend/src/Metamaps/Synapse.js
View file

@ -1,23 +1,25 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import Control from './Control'
import Create from './Create'
import JIT from './JIT'
import Map from './Map'
import Selected from './Selected'
import Settings from './Settings'
import Visualize from './Visualize'
/* /*
* Metamaps.Synapse.js.erb * Metamaps.Synapse.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.Control
* - Metamaps.Create
* - Metamaps.JIT
* - Metamaps.Map
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Selected
* - Metamaps.Settings
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Visualize
*/ */
Metamaps.Synapse = { const Synapse = {
// this function is to retrieve a synapse JSON object from the database // this function is to retrieve a synapse JSON object from the database
// @param id = the id of the synapse to retrieve // @param id = the id of the synapse to retrieve
get: function (id, callback) { get: function (id, callback) {
@ -52,18 +54,18 @@ Metamaps.Synapse = {
* *
*/ */
renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) { renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) {
var self = Metamaps.Synapse var self = Synapse
var edgeOnViz var edgeOnViz
var newedge = synapse.createEdge(mapping) var newedge = synapse.createEdge(mapping)
Metamaps.Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data) Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data)
edgeOnViz = Metamaps.Visualize.mGraph.graph.getAdjacence(node1.id, node2.id) edgeOnViz = Visualize.mGraph.graph.getAdjacence(node1.id, node2.id)
synapse.set('edge', edgeOnViz) synapse.set('edge', edgeOnViz)
synapse.updateEdge() // links the synapse and the mapping to the edge synapse.updateEdge() // links the synapse and the mapping to the edge
Metamaps.Control.selectEdge(edgeOnViz) Control.selectEdge(edgeOnViz)
var mappingSuccessCallback = function (mappingModel, response) { var mappingSuccessCallback = function (mappingModel, response) {
var newSynapseData = { var newSynapseData = {
@ -71,17 +73,17 @@ Metamaps.Synapse = {
mappableid: mappingModel.get('mappable_id') mappableid: mappingModel.get('mappable_id')
} }
$(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]) $(document).trigger(JIT.events.newSynapse, [newSynapseData])
} }
var synapseSuccessCallback = function (synapseModel, response) { var synapseSuccessCallback = function (synapseModel, response) {
if (Metamaps.Active.Map) { if (Active.Map) {
mapping.save({ mappable_id: synapseModel.id }, { mapping.save({ mappable_id: synapseModel.id }, {
success: mappingSuccessCallback success: mappingSuccessCallback
}) })
} }
} }
if (!Metamaps.Settings.sandbox && createNewInDB) { if (!Settings.sandbox && createNewInDB) {
if (synapse.isNew()) { if (synapse.isNew()) {
synapse.save(null, { synapse.save(null, {
success: synapseSuccessCallback, success: synapseSuccessCallback,
@ -89,7 +91,7 @@ Metamaps.Synapse = {
console.log('error saving synapse to database') console.log('error saving synapse to database')
} }
}) })
} else if (!synapse.isNew() && Metamaps.Active.Map) { } else if (!synapse.isNew() && Active.Map) {
mapping.save(null, { mapping.save(null, {
success: mappingSuccessCallback success: mappingSuccessCallback
}) })
@ -97,7 +99,7 @@ Metamaps.Synapse = {
} }
}, },
createSynapseLocally: function () { createSynapseLocally: function () {
var self = Metamaps.Synapse, var self = Synapse,
topic1, topic1,
topic2, topic2,
node1, node1,
@ -105,27 +107,27 @@ Metamaps.Synapse = {
synapse, synapse,
mapping mapping
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
// for each node in this array we will create a synapse going to the position2 node. // for each node in this array we will create a synapse going to the position2 node.
var synapsesToCreate = [] var synapsesToCreate = []
topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id) topic2 = Metamaps.Topics.get(Create.newSynapse.topic2id)
node2 = topic2.get('node') node2 = topic2.get('node')
var len = Metamaps.Selected.Nodes.length var len = Selected.Nodes.length
if (len == 0) { if (len == 0) {
topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id) topic1 = Metamaps.Topics.get(Create.newSynapse.topic1id)
synapsesToCreate[0] = topic1.get('node') synapsesToCreate[0] = topic1.get('node')
} else if (len > 0) { } else if (len > 0) {
synapsesToCreate = Metamaps.Selected.Nodes synapsesToCreate = Selected.Nodes
} }
for (var i = 0; i < synapsesToCreate.length; i++) { for (var i = 0; i < synapsesToCreate.length; i++) {
node1 = synapsesToCreate[i] node1 = synapsesToCreate[i]
topic1 = node1.getData('topic') topic1 = node1.getData('topic')
synapse = new Metamaps.Backbone.Synapse({ synapse = new Metamaps.Backbone.Synapse({
desc: Metamaps.Create.newSynapse.description, desc: Create.newSynapse.description,
node1_id: topic1.isNew() ? topic1.cid : topic1.id, node1_id: topic1.isNew() ? topic1.cid : topic1.id,
node2_id: topic2.isNew() ? topic2.cid : topic2.id, node2_id: topic2.isNew() ? topic2.cid : topic2.id,
}) })
@ -141,10 +143,10 @@ Metamaps.Synapse = {
self.renderSynapse(mapping, synapse, node1, node2, true) self.renderSynapse(mapping, synapse, node1, node2, true)
} // for each in synapsesToCreate } // for each in synapsesToCreate
Metamaps.Create.newSynapse.hide() Create.newSynapse.hide()
}, },
getSynapseFromAutocomplete: function (id) { getSynapseFromAutocomplete: function (id) {
var self = Metamaps.Synapse, var self = Synapse,
topic1, topic1,
topic2, topic2,
node1, node1,
@ -158,12 +160,14 @@ Metamaps.Synapse = {
}) })
Metamaps.Mappings.add(mapping) Metamaps.Mappings.add(mapping)
topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id) topic1 = Metamaps.Topics.get(Create.newSynapse.topic1id)
node1 = topic1.get('node') node1 = topic1.get('node')
topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id) topic2 = Metamaps.Topics.get(Create.newSynapse.topic2id)
node2 = topic2.get('node') node2 = topic2.get('node')
Metamaps.Create.newSynapse.hide() Create.newSynapse.hide()
self.renderSynapse(mapping, synapse, node1, node2, true) self.renderSynapse(mapping, synapse, node1, node2, true)
} }
}; // end Metamaps.Synapse }
export default Synapse

51
app/assets/javascripts/src/Metamaps.SynapseCard.js → frontend/src/Metamaps/SynapseCard.js
View file

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

188
app/assets/javascripts/src/Metamaps.Topic.js → frontend/src/Metamaps/Topic.js
View file

@ -1,33 +1,35 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import $jit from '../patched/JIT'
import Active from './Active'
import AutoLayout from './AutoLayout'
import Create from './Create'
import Filter from './Filter'
import GlobalUI from './GlobalUI'
import JIT from './JIT'
import Map from './Map'
import Router from './Router'
import Selected from './Selected'
import Settings from './Settings'
import SynapseCard from './SynapseCard'
import TopicCard from './TopicCard'
import Util from './Util'
import Visualize from './Visualize'
/* /*
* Metamaps.Topic.js.erb * Metamaps.Topic.js.erb
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.Backbone * - Metamaps.Backbone
* - Metamaps.Backbone
* - Metamaps.Create
* - Metamaps.Creators * - Metamaps.Creators
* - Metamaps.Famous
* - Metamaps.Filter
* - Metamaps.GlobalUI
* - Metamaps.JIT
* - Metamaps.Mappings * - Metamaps.Mappings
* - Metamaps.Selected
* - Metamaps.Settings
* - Metamaps.SynapseCard
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.TopicCard
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Util
* - Metamaps.Visualize
* - Metamaps.tempInit
* - Metamaps.tempNode
* - Metamaps.tempNode2
*/ */
Metamaps.Topic = { const Topic = {
// this function is to retrieve a topic JSON object from the database // this function is to retrieve a topic JSON object from the database
// @param id = the id of the topic to retrieve // @param id = the id of the topic to retrieve
get: function (id, callback) { get: function (id, callback) {
@ -61,7 +63,7 @@ Metamaps.Topic = {
launch: function (id) { launch: function (id) {
var bb = Metamaps.Backbone var bb = Metamaps.Backbone
var start = function (data) { var start = function (data) {
Metamaps.Active.Topic = new bb.Topic(data.topic) Active.Topic = new bb.Topic(data.topic)
Metamaps.Creators = new bb.MapperCollection(data.creators) Metamaps.Creators = new bb.MapperCollection(data.creators)
Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives)) Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives))
Metamaps.Synapses = new bb.SynapseCollection(data.synapses) Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
@ -71,22 +73,22 @@ Metamaps.Topic = {
$('#filter_by_mapper h3').html('CREATORS') $('#filter_by_mapper h3').html('CREATORS')
// build and render the visualization // build and render the visualization
Metamaps.Visualize.type = 'RGraph' Visualize.type = 'RGraph'
Metamaps.JIT.prepareVizData() JIT.prepareVizData()
// update filters // update filters
Metamaps.Filter.reset() Filter.reset()
// reset selected arrays // reset selected arrays
Metamaps.Selected.reset() Selected.reset()
// these three update the actual filter box with the right list items // these three update the actual filter box with the right list items
Metamaps.Filter.checkMetacodes() Filter.checkMetacodes()
Metamaps.Filter.checkSynapses() Filter.checkSynapses()
Metamaps.Filter.checkMappers() Filter.checkMappers()
// for mobile // for mobile
$('#header_content').html(Metamaps.Active.Topic.get('name')) $('#header_content').html(Active.Topic.get('name'))
} }
$.ajax({ $.ajax({
@ -95,25 +97,25 @@ Metamaps.Topic = {
}) })
}, },
end: function () { end: function () {
if (Metamaps.Active.Topic) { if (Active.Topic) {
$('.rightclickmenu').remove() $('.rightclickmenu').remove()
Metamaps.TopicCard.hideCard() TopicCard.hideCard()
Metamaps.SynapseCard.hideCard() SynapseCard.hideCard()
Metamaps.Filter.close() Filter.close()
} }
}, },
centerOn: function (nodeid, callback) { centerOn: function (nodeid, callback) {
// don't clash with fetchRelatives // don't clash with fetchRelatives
if (!Metamaps.Visualize.mGraph.busy) { if (!Visualize.mGraph.busy) {
Metamaps.Visualize.mGraph.onClick(nodeid, { Visualize.mGraph.onClick(nodeid, {
hideLabels: false, hideLabels: false,
duration: 1000, duration: 1000,
onComplete: function () { onComplete: function () {
if (callback) callback() if (callback) callback()
} }
}) })
Metamaps.Router.navigate('/topics/' + nodeid) Router.navigate('/topics/' + nodeid)
Metamaps.Active.Topic = Metamaps.Topics.get(nodeid) Active.Topic = Metamaps.Topics.get(nodeid)
} }
}, },
fetchRelatives: function (nodes, metacode_id) { fetchRelatives: function (nodes, metacode_id) {
@ -131,7 +133,7 @@ Metamaps.Topic = {
var successCallback; var successCallback;
successCallback = function (data) { successCallback = function (data) {
if (Metamaps.Visualize.mGraph.busy) { if (Visualize.mGraph.busy) {
// don't clash with centerOn // don't clash with centerOn
window.setTimeout(function() { successCallback(data) }, 100) window.setTimeout(function() { successCallback(data) }, 100)
return return
@ -144,8 +146,8 @@ Metamaps.Topic = {
topicColl.add(topic) topicColl.add(topic)
var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses) var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses)
var graph = Metamaps.JIT.convertModelsToJIT(topicColl, synapseColl)[0] var graph = JIT.convertModelsToJIT(topicColl, synapseColl)[0]
Metamaps.Visualize.mGraph.op.sum(graph, { Visualize.mGraph.op.sum(graph, {
type: 'fade', type: 'fade',
duration: 500, duration: 500,
hideLabels: false hideLabels: false
@ -153,7 +155,7 @@ Metamaps.Topic = {
var i, l, t, s var i, l, t, s
Metamaps.Visualize.mGraph.graph.eachNode(function (n) { Visualize.mGraph.graph.eachNode(function (n) {
t = Metamaps.Topics.get(n.id) t = Metamaps.Topics.get(n.id)
t.set({ node: n }, { silent: true }) t.set({ node: n }, { silent: true })
t.updateNode() t.updateNode()
@ -189,8 +191,8 @@ Metamaps.Topic = {
// opts is additional options in a hash // opts is additional options in a hash
// TODO: move createNewInDB and permitCerateSYnapseAfter into opts // TODO: move createNewInDB and permitCerateSYnapseAfter into opts
renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter, opts) { renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter, opts = {}) {
var self = Metamaps.Topic var self = Topic
var nodeOnViz, tempPos var nodeOnViz, tempPos
@ -198,56 +200,56 @@ Metamaps.Topic = {
var midpoint = {}, pixelPos var midpoint = {}, pixelPos
if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) { if (!$.isEmptyObject(Visualize.mGraph.graph.nodes)) {
Metamaps.Visualize.mGraph.graph.addNode(newnode) Visualize.mGraph.graph.addNode(newnode)
nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id) nodeOnViz = Visualize.mGraph.graph.getNode(newnode.id)
topic.set('node', nodeOnViz, {silent: true}) topic.set('node', nodeOnViz, {silent: true})
topic.updateNode() // links the topic and the mapping to the node topic.updateNode() // links the topic and the mapping to the node
nodeOnViz.setData('dim', 1, 'start') nodeOnViz.setData('dim', 1, 'start')
nodeOnViz.setData('dim', 25, 'end') nodeOnViz.setData('dim', 25, 'end')
if (Metamaps.Visualize.type === 'RGraph') { if (Visualize.type === 'RGraph') {
tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')) tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'))
tempPos = tempPos.toPolar() tempPos = tempPos.toPolar()
nodeOnViz.setPos(tempPos, 'current') nodeOnViz.setPos(tempPos, 'current')
nodeOnViz.setPos(tempPos, 'start') nodeOnViz.setPos(tempPos, 'start')
nodeOnViz.setPos(tempPos, 'end') nodeOnViz.setPos(tempPos, 'end')
} else if (Metamaps.Visualize.type === 'ForceDirected') { } else if (Visualize.type === 'ForceDirected') {
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current')
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start')
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end')
} }
if (Metamaps.Create.newTopic.addSynapse && permitCreateSynapseAfter) { if (Create.newTopic.addSynapse && permitCreateSynapseAfter) {
Metamaps.Create.newSynapse.topic1id = Metamaps.tempNode.getData('topic').id Create.newSynapse.topic1id = JIT.tempNode.getData('topic').id
// position the form // position the form
midpoint.x = Metamaps.tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - Metamaps.tempNode.pos.getc().x) / 2 midpoint.x = JIT.tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - JIT.tempNode.pos.getc().x) / 2
midpoint.y = Metamaps.tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - Metamaps.tempNode.pos.getc().y) / 2 midpoint.y = JIT.tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - JIT.tempNode.pos.getc().y) / 2
pixelPos = Metamaps.Util.coordsToPixels(midpoint) pixelPos = Util.coordsToPixels(midpoint)
$('#new_synapse').css('left', pixelPos.x + 'px') $('#new_synapse').css('left', pixelPos.x + 'px')
$('#new_synapse').css('top', pixelPos.y + 'px') $('#new_synapse').css('top', pixelPos.y + 'px')
// show the form // show the form
Metamaps.Create.newSynapse.open() Create.newSynapse.open()
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function () { onComplete: function () {
Metamaps.tempNode = null JIT.tempNode = null
Metamaps.tempNode2 = null JIT.tempNode2 = null
Metamaps.tempInit = false JIT.tempInit = false
} }
}) })
} else { } else {
Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas) Visualize.mGraph.fx.plotNode(nodeOnViz, Visualize.mGraph.canvas)
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function () {} onComplete: function () {}
}) })
} }
} else { } else {
Metamaps.Visualize.mGraph.loadJSON(newnode) Visualize.mGraph.loadJSON(newnode)
nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id) nodeOnViz = Visualize.mGraph.graph.getNode(newnode.id)
topic.set('node', nodeOnViz, {silent: true}) topic.set('node', nodeOnViz, {silent: true})
topic.updateNode() // links the topic and the mapping to the node topic.updateNode() // links the topic and the mapping to the node
@ -256,8 +258,8 @@ Metamaps.Topic = {
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current')
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start')
nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end') nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end')
Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas) Visualize.mGraph.fx.plotNode(nodeOnViz, Visualize.mGraph.canvas)
Metamaps.Visualize.mGraph.fx.animate({ Visualize.mGraph.fx.animate({
modes: ['node-property:dim'], modes: ['node-property:dim'],
duration: 500, duration: 500,
onComplete: function () {} onComplete: function () {}
@ -270,14 +272,14 @@ Metamaps.Topic = {
mappableid: mappingModel.get('mappable_id') mappableid: mappingModel.get('mappable_id')
} }
$(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]) $(document).trigger(JIT.events.newTopic, [newTopicData])
// call a success callback if provided // call a success callback if provided
if (opts.success) { if (opts.success) {
opts.success(topicModel) opts.success(topicModel)
} }
} }
var topicSuccessCallback = function (topicModel, response) { var topicSuccessCallback = function (topicModel, response) {
if (Metamaps.Active.Map) { if (Active.Map) {
mapping.save({ mappable_id: topicModel.id }, { mapping.save({ mappable_id: topicModel.id }, {
success: function (model, response) { success: function (model, response) {
mappingSuccessCallback(model, response, topicModel) mappingSuccessCallback(model, response, topicModel)
@ -288,12 +290,12 @@ Metamaps.Topic = {
}) })
} }
if (Metamaps.Create.newTopic.addSynapse) { if (Create.newTopic.addSynapse) {
Metamaps.Create.newSynapse.topic2id = topicModel.id Create.newSynapse.topic2id = topicModel.id
} }
} }
if (!Metamaps.Settings.sandbox && createNewInDB) { if (!Settings.sandbox && createNewInDB) {
if (topic.isNew()) { if (topic.isNew()) {
topic.save(null, { topic.save(null, {
success: topicSuccessCallback, success: topicSuccessCallback,
@ -301,7 +303,7 @@ Metamaps.Topic = {
console.log('error saving topic to database') console.log('error saving topic to database')
} }
}) })
} else if (!topic.isNew() && Metamaps.Active.Map) { } else if (!topic.isNew() && Active.Map) {
mapping.save(null, { mapping.save(null, {
success: mappingSuccessCallback success: mappingSuccessCallback
}) })
@ -309,58 +311,58 @@ Metamaps.Topic = {
} }
}, },
createTopicLocally: function () { createTopicLocally: function () {
var self = Metamaps.Topic var self = Topic
if (Metamaps.Create.newTopic.name === '') { if (Create.newTopic.name === '') {
Metamaps.GlobalUI.notifyUser('Please enter a topic title...') GlobalUI.notifyUser('Please enter a topic title...')
return return
} }
// hide the 'double-click to add a topic' message // hide the 'double-click to add a topic' message
Metamaps.GlobalUI.hideDiv('#instructions') GlobalUI.hideDiv('#instructions')
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
var metacode = Metamaps.Metacodes.get(Metamaps.Create.newTopic.metacode) var metacode = Metamaps.Metacodes.get(Create.newTopic.metacode)
var topic = new Metamaps.Backbone.Topic({ var topic = new Metamaps.Backbone.Topic({
name: Metamaps.Create.newTopic.name, name: Create.newTopic.name,
metacode_id: metacode.id, metacode_id: metacode.id,
defer_to_map_id: Metamaps.Active.Map.id defer_to_map_id: Active.Map.id
}) })
Metamaps.Topics.add(topic) Metamaps.Topics.add(topic)
if (Metamaps.Create.newTopic.pinned) { if (Create.newTopic.pinned) {
var nextCoords = Metamaps.AutoLayout.getNextCoord() var nextCoords = AutoLayout.getNextCoord()
} }
var mapping = new Metamaps.Backbone.Mapping({ var mapping = new Metamaps.Backbone.Mapping({
xloc: nextCoords ? nextCoords.x : Metamaps.Create.newTopic.x, xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Metamaps.Create.newTopic.y, yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_id: topic.cid, mappable_id: topic.cid,
mappable_type: 'Topic', mappable_type: 'Topic',
}) })
Metamaps.Mappings.add(mapping) Metamaps.Mappings.add(mapping)
// these can't happen until the value is retrieved, which happens in the line above // these can't happen until the value is retrieved, which happens in the line above
Metamaps.Create.newTopic.hide() Create.newTopic.hide()
self.renderTopic(mapping, topic, true, true) // this function also includes the creation of the topic in the database self.renderTopic(mapping, topic, true, true) // this function also includes the creation of the topic in the database
}, },
getTopicFromAutocomplete: function (id) { getTopicFromAutocomplete: function (id) {
var self = Metamaps.Topic var self = Topic
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
Metamaps.Create.newTopic.hide() Create.newTopic.hide()
var topic = self.get(id) var topic = self.get(id)
if (Metamaps.Create.newTopic.pinned) { if (Create.newTopic.pinned) {
var nextCoords = Metamaps.AutoLayout.getNextCoord() var nextCoords = AutoLayout.getNextCoord()
} }
var mapping = new Metamaps.Backbone.Mapping({ var mapping = new Metamaps.Backbone.Mapping({
xloc: nextCoords ? nextCoords.x : Metamaps.Create.newTopic.x, xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
yloc: nextCoords ? nextCoords.y : Metamaps.Create.newTopic.y, yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
mappable_type: 'Topic', mappable_type: 'Topic',
mappable_id: topic.id, mappable_id: topic.id,
}) })
@ -369,13 +371,13 @@ Metamaps.Topic = {
self.renderTopic(mapping, topic, true, true) self.renderTopic(mapping, topic, true, true)
}, },
getTopicFromSearch: function (event, id) { getTopicFromSearch: function (event, id) {
var self = Metamaps.Topic var self = Topic
$(document).trigger(Metamaps.Map.events.editedByActiveMapper) $(document).trigger(Map.events.editedByActiveMapper)
var topic = self.get(id) var topic = self.get(id)
var nextCoords = Metamaps.AutoLayout.getNextCoord() var nextCoords = AutoLayout.getNextCoord()
var mapping = new Metamaps.Backbone.Mapping({ var mapping = new Metamaps.Backbone.Mapping({
xloc: nextCoords.x, xloc: nextCoords.x,
yloc: nextCoords.y, yloc: nextCoords.y,
@ -386,10 +388,12 @@ Metamaps.Topic = {
self.renderTopic(mapping, topic, true, true) self.renderTopic(mapping, topic, true, true)
Metamaps.GlobalUI.notifyUser('Topic was added to your map!') GlobalUI.notifyUser('Topic was added to your map!')
event.stopPropagation() event.stopPropagation()
event.preventDefault() event.preventDefault()
return false return false
} }
}; // end Metamaps.Topic }
export default Topic

93
app/assets/javascripts/src/Metamaps.TopicCard.js → frontend/src/Metamaps/TopicCard.js
View file

@ -1,27 +1,28 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import Active from './Active'
import GlobalUI from './GlobalUI'
import Mapper from './Mapper'
import Router from './Router'
import Util from './Util'
import Visualize from './Visualize'
/* /*
* Metamaps.TopicCard.js * Metamaps.TopicCard.js
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.GlobalUI
* - Metamaps.Mapper
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Router
* - Metamaps.Util
* - Metamaps.Visualize
*/ */
Metamaps.TopicCard = { const TopicCard = {
openTopicCard: null, // stores the topic that's currently open openTopicCard: null, // stores the topic that's currently open
authorizedToEdit: false, // stores boolean for edit permission for open topic card authorizedToEdit: false, // stores boolean for edit permission for open topic card
init: function () { init: function () {
var self = Metamaps.TopicCard var self = TopicCard
// initialize best_in_place editing // initialize best_in_place editing
$('.authenticated div.permission.canEdit .best_in_place').best_in_place() $('.authenticated div.permission.canEdit .best_in_place').best_in_place()
Metamaps.TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html()) TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html())
// initialize topic card draggability and resizability // initialize topic card draggability and resizability
$('.showcard').draggable({ $('.showcard').draggable({
@ -38,12 +39,12 @@ Metamaps.TopicCard = {
* @param {$jit.Graph.Node} node * @param {$jit.Graph.Node} node
*/ */
showCard: function (node, opts) { showCard: function (node, opts) {
var self = Metamaps.TopicCard var self = TopicCard
if (!opts) opts = {}
var topic = node.getData('topic') var topic = node.getData('topic')
self.openTopicCard = topic self.openTopicCard = topic
self.authorizedToEdit = topic.authorizeToEdit(Metamaps.Active.Mapper) self.authorizedToEdit = topic.authorizeToEdit(Active.Mapper)
// populate the card that's about to show with the right topics data // populate the card that's about to show with the right topics data
self.populateShowCard(topic) self.populateShowCard(topic)
return $('.showcard').fadeIn('fast', function() { return $('.showcard').fadeIn('fast', function() {
@ -53,14 +54,14 @@ Metamaps.TopicCard = {
}) })
}, },
hideCard: function () { hideCard: function () {
var self = Metamaps.TopicCard var self = TopicCard
$('.showcard').fadeOut('fast') $('.showcard').fadeOut('fast')
self.openTopicCard = null self.openTopicCard = null
self.authorizedToEdit = false self.authorizedToEdit = false
}, },
embedlyCardRendered: function (iframe) { embedlyCardRendered: function (iframe) {
var self = Metamaps.TopicCard var self = TopicCard
$('#embedlyLinkLoader').hide() $('#embedlyLinkLoader').hide()
@ -77,7 +78,7 @@ Metamaps.TopicCard = {
} }
}, },
removeLink: function () { removeLink: function () {
var self = Metamaps.TopicCard var self = TopicCard
self.openTopicCard.save({ self.openTopicCard.save({
link: null link: null
}) })
@ -87,7 +88,7 @@ Metamaps.TopicCard = {
$('.CardOnGraph').removeClass('hasAttachment') $('.CardOnGraph').removeClass('hasAttachment')
}, },
bindShowCardListeners: function (topic) { bindShowCardListeners: function (topic) {
var self = Metamaps.TopicCard var self = TopicCard
var showCard = document.getElementById('showcard') var showCard = document.getElementById('showcard')
var authorized = self.authorizedToEdit var authorized = self.authorizedToEdit
@ -96,7 +97,7 @@ Metamaps.TopicCard = {
var setMapperImage = function (mapper) { var setMapperImage = function (mapper) {
$('.contributorIcon').attr('src', mapper.get('image')) $('.contributorIcon').attr('src', mapper.get('image'))
} }
Metamaps.Mapper.get(topic.get('user_id'), setMapperImage) Mapper.get(topic.get('user_id'), setMapperImage)
// starting embed.ly // starting embed.ly
var resetFunc = function () { var resetFunc = function () {
@ -179,24 +180,16 @@ Metamaps.TopicCard = {
topic.save({ topic.save({
metacode_id: metacode.id metacode_id: metacode.id
}) })
Metamaps.Visualize.mGraph.plot() Visualize.mGraph.plot()
$('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge') $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
$('.metacodeTitle').hide() $('.metacodeTitle').hide()
$('.showcard .icon').css('z-index', '1') $('.showcard .icon').css('z-index', '1')
} }
var openMetacodeSelect = function (event) { var openMetacodeSelect = function (event) {
var windowWidth
var showcardLeft
var TOPICCARD_WIDTH = 300 var TOPICCARD_WIDTH = 300
var METACODESELECT_WIDTH = 404 var METACODESELECT_WIDTH = 404
var distanceFromEdge
var MAX_METACODELIST_HEIGHT = 270 var MAX_METACODELIST_HEIGHT = 270
var windowHeight
var showcardTop
var topicTitleHeight
var distanceFromBottom
if (!selectingMetacode) { if (!selectingMetacode) {
selectingMetacode = true selectingMetacode = true
@ -205,9 +198,9 @@ Metamaps.TopicCard = {
// select is accessible onscreen, when opened // select is accessible onscreen, when opened
// while topic card is close to the right // while topic card is close to the right
// edge of the screen // edge of the screen
windowWidth = $(window).width() var windowWidth = $(window).width()
showcardLeft = parseInt($('.showcard').css('left')) var showcardLeft = parseInt($('.showcard').css('left'))
distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH) var distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH)
if (distanceFromEdge < METACODESELECT_WIDTH) { if (distanceFromEdge < METACODESELECT_WIDTH) {
$('.metacodeSelect').addClass('onRightEdge') $('.metacodeSelect').addClass('onRightEdge')
} }
@ -216,11 +209,11 @@ Metamaps.TopicCard = {
// select is accessible onscreen, when opened // select is accessible onscreen, when opened
// while topic card is close to the bottom // while topic card is close to the bottom
// edge of the screen // edge of the screen
windowHeight = $(window).height() var windowHeight = $(window).height()
showcardTop = parseInt($('.showcard').css('top')) var showcardTop = parseInt($('.showcard').css('top'))
topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom')) var topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'))
heightOfSetList = $('.showcard .metacodeSelect').height() var heightOfSetList = $('.showcard .metacodeSelect').height()
distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight) var distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight)
if (distanceFromBottom < MAX_METACODELIST_HEIGHT) { if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
$('.metacodeSelect').addClass('onBottomEdge') $('.metacodeSelect').addClass('onBottomEdge')
} }
@ -265,7 +258,7 @@ Metamaps.TopicCard = {
// bind best_in_place ajax callbacks // bind best_in_place ajax callbacks
bipName.bind('ajax:success', function () { bipName.bind('ajax:success', function () {
var name = Metamaps.Util.decodeEntities($(this).html()) var name = Util.decodeEntities($(this).html())
topic.set('name', name) topic.set('name', name)
topic.trigger('saved') topic.trigger('saved')
}) })
@ -313,7 +306,7 @@ Metamaps.TopicCard = {
} }
// ability to change permission // ability to change permission
var selectingPermission = false var selectingPermission = false
if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) { if (topic.authorizePermissionChange(Active.Mapper)) {
$('.showcard .yourTopic .mapPerm').click(openPermissionSelect) $('.showcard .yourTopic .mapPerm').click(openPermissionSelect)
$('.showcard').click(hidePermissionSelect) $('.showcard').click(hidePermissionSelect)
} }
@ -331,7 +324,7 @@ Metamaps.TopicCard = {
$('.showcard .hoverTip').removeClass('hide') $('.showcard .hoverTip').removeClass('hide')
}) })
$('.mapCount .tip li a').click(Metamaps.Router.intercept) $('.mapCount .tip li a').click(Router.intercept)
var originalText = $('.showMore').html() var originalText = $('.showMore').html()
$('.mapCount .tip .showMore').unbind().toggle( $('.mapCount .tip .showMore').unbind().toggle(
@ -349,13 +342,13 @@ Metamaps.TopicCard = {
}) })
}, },
handleInvalidLink: function () { handleInvalidLink: function () {
var self = Metamaps.TopicCard var self = TopicCard
self.removeLink() self.removeLink()
Metamaps.GlobalUI.notifyUser('Invalid link') GlobalUI.notifyUser('Invalid link')
}, },
populateShowCard: function (topic) { populateShowCard: function (topic) {
var self = Metamaps.TopicCard var self = TopicCard
var showCard = document.getElementById('showcard') var showCard = document.getElementById('showcard')
@ -364,11 +357,11 @@ Metamaps.TopicCard = {
var topicForTemplate = self.buildObject(topic) var topicForTemplate = self.buildObject(topic)
var html = self.generateShowcardHTML.render(topicForTemplate) var html = self.generateShowcardHTML.render(topicForTemplate)
if (topic.authorizeToEdit(Metamaps.Active.Mapper)) { if (topic.authorizeToEdit(Active.Mapper)) {
var perm = document.createElement('div') var perm = document.createElement('div')
var string = 'permission canEdit' var string = 'permission canEdit'
if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) string += ' yourTopic' if (topic.authorizePermissionChange(Active.Mapper)) string += ' yourTopic'
perm.className = string perm.className = string
perm.innerHTML = html perm.innerHTML = html
showCard.appendChild(perm) showCard.appendChild(perm)
@ -379,16 +372,16 @@ Metamaps.TopicCard = {
showCard.appendChild(perm) showCard.appendChild(perm)
} }
Metamaps.TopicCard.bindShowCardListeners(topic) TopicCard.bindShowCardListeners(topic)
}, },
generateShowcardHTML: null, // will be initialized into a Hogan template within init function generateShowcardHTML: null, // will be initialized into a Hogan template within init function
// generateShowcardHTML // generateShowcardHTML
buildObject: function (topic) { buildObject: function (topic) {
var self = Metamaps.TopicCard var self = TopicCard
var nodeValues = {} var nodeValues = {}
var authorized = topic.authorizeToEdit(Metamaps.Active.Mapper) var authorized = topic.authorizeToEdit(Active.Mapper)
if (!authorized) { if (!authorized) {
} else { } else {
@ -421,18 +414,18 @@ Metamaps.TopicCard = {
var inmapsLinks = topic.get('inmapsLinks') || [] var inmapsLinks = topic.get('inmapsLinks') || []
nodeValues.inmaps = '' nodeValues.inmaps = ''
if (inmapsAr.length < 6) { if (inmapsAr.length < 6) {
for (i = 0; i < inmapsAr.length; i++) { for (let i = 0; i < inmapsAr.length; i++) {
var url = '/maps/' + inmapsLinks[i] var url = '/maps/' + inmapsLinks[i]
nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>' nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>'
} }
} else { } else {
for (i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
var url = '/maps/' + inmapsLinks[i] var url = '/maps/' + inmapsLinks[i]
nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>' nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>'
} }
extra = inmapsAr.length - 5 extra = inmapsAr.length - 5
nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>' nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>'
for (i = 5; i < inmapsAr.length; i++) { for (let i = 5; i < inmapsAr.length; i++) {
var url = '/maps/' + inmapsLinks[i] var url = '/maps/' + inmapsLinks[i]
nodeValues.inmaps += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsAr[i] + '</a></li>' nodeValues.inmaps += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsAr[i] + '</a></li>'
} }
@ -455,4 +448,6 @@ Metamaps.TopicCard = {
nodeValues.desc = (topic.get('desc') == '' && authorized) ? desc_nil : topic.get('desc') nodeValues.desc = (topic.get('desc') == '' && authorized) ? desc_nil : topic.get('desc')
return nodeValues return nodeValues
} }
}; // end Metamaps.TopicCard }
export default TopicCard

25
app/assets/javascripts/src/Metamaps.Util.js → frontend/src/Metamaps/Util.js
View file

@ -1,13 +1,6 @@
/* global Metamaps */ import Visualize from './Visualize'
/* const Util = {
* Metamaps.Util.js
*
* Dependencies:
* - Metamaps.Visualize
*/
Metamaps.Util = {
// helper function to determine how many lines are needed // helper function to determine how many lines are needed
// Line Splitter Function // Line Splitter Function
// copyright Stephen Chapman, 19th April 2006 // copyright Stephen Chapman, 19th April 2006
@ -45,8 +38,8 @@ Metamaps.Util = {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2)) return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2))
}, },
coordsToPixels: function (coords) { coordsToPixels: function (coords) {
if (Metamaps.Visualize.mGraph) { if (Visualize.mGraph) {
var canvas = Metamaps.Visualize.mGraph.canvas, var canvas = Visualize.mGraph.canvas,
s = canvas.getSize(), s = canvas.getSize(),
p = canvas.getPos(), p = canvas.getPos(),
ox = canvas.translateOffsetX, ox = canvas.translateOffsetX,
@ -67,8 +60,8 @@ Metamaps.Util = {
}, },
pixelsToCoords: function (pixels) { pixelsToCoords: function (pixels) {
var coords var coords
if (Metamaps.Visualize.mGraph) { if (Visualize.mGraph) {
var canvas = Metamaps.Visualize.mGraph.canvas, var canvas = Visualize.mGraph.canvas,
s = canvas.getSize(), s = canvas.getSize(),
p = canvas.getPos(), p = canvas.getPos(),
ox = canvas.translateOffsetX, ox = canvas.translateOffsetX,
@ -91,7 +84,7 @@ Metamaps.Util = {
var r = (Math.round(Math.random() * 127) + 127).toString(16) var r = (Math.round(Math.random() * 127) + 127).toString(16)
var g = (Math.round(Math.random() * 127) + 127).toString(16) var g = (Math.round(Math.random() * 127) + 127).toString(16)
var b = (Math.round(Math.random() * 127) + 127).toString(16) var b = (Math.round(Math.random() * 127) + 127).toString(16)
return Metamaps.Util.colorLuminance('#' + r + g + b, -0.4) return Util.colorLuminance('#' + r + g + b, -0.4)
}, },
// darkens a hex value by 'lum' percentage // darkens a hex value by 'lum' percentage
colorLuminance: function (hex, lum) { colorLuminance: function (hex, lum) {
@ -127,4 +120,6 @@ Metamaps.Util = {
checkURLisYoutubeVideo: function (url) { checkURLisYoutubeVideo: function (url) {
return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null) return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null)
} }
}; // end Metamaps.Util }
export default Util

343
frontend/src/Metamaps/Views/ChatView.js Normal file
View file

@ -0,0 +1,343 @@
/* global $ */
import Backbone from 'backbone'
import Autolinker from 'autolinker'
// TODO is this line good or bad
// Backbone.$ = window.$
const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false, twitter: false });
var Private = {
messageHTML: "<div class='chat-message'>" +
"<div class='chat-message-user'><img src='{{ user_image }}' title='{{user_name }}'/></div>" +
"<div class='chat-message-text'>{{ message }}</div>" +
"<div class='chat-message-time'>{{ timestamp }}</div>" +
"<div class='clearfloat'></div>" +
"</div>",
participantHTML: "<div class='participant participant-{{ id }} {{ selfClass }}'>" +
"<div class='chat-participant-image'><img src='{{ image }}' style='border: 2px solid {{ color }};' /></div>" +
"<div class='chat-participant-name'>{{ username }} {{ selfName }}</div>" +
"<button type='button' class='button chat-participant-invite-call' onclick='Metamaps.Realtime.inviteACall({{ id}});'></button>" +
"<button type='button' class='button chat-participant-invite-join' onclick='Metamaps.Realtime.inviteToJoin({{ id}});'></button>" +
"<span class='chat-participant-participating'><div class='green-dot'></div></span>" +
"<div class='clearfloat'></div>" +
"</div>",
templates: function() {
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
};
this.messageTemplate = _.template(Private.messageHTML);
this.participantTemplate = _.template(Private.participantHTML);
},
createElements: function() {
this.$unread = $('<div class="chat-unread"></div>');
this.$button = $('<div class="chat-button"><div class="tooltips">Chat</div></div>');
this.$messageInput = $('<textarea placeholder="Send a message..." class="chat-input"></textarea>');
this.$juntoHeader = $('<div class="junto-header">PARTICIPANTS</div>');
this.$videoToggle = $('<div class="video-toggle"></div>');
this.$cursorToggle = $('<div class="cursor-toggle"></div>');
this.$participants = $('<div class="participants"></div>');
this.$conversationInProgress = $('<div class="conversation-live">LIVE <span class="call-action leave" onclick="Metamaps.Realtime.leaveCall();">LEAVE</span><span class="call-action join" onclick="Metamaps.Realtime.joinCall();">JOIN</span></div>');
this.$chatHeader = $('<div class="chat-header">CHAT</div>');
this.$soundToggle = $('<div class="sound-toggle"></div>');
this.$messages = $('<div class="chat-messages"></div>');
this.$container = $('<div class="chat-box"></div>');
},
attachElements: function() {
this.$button.append(this.$unread);
this.$juntoHeader.append(this.$videoToggle);
this.$juntoHeader.append(this.$cursorToggle);
this.$chatHeader.append(this.$soundToggle);
this.$participants.append(this.$conversationInProgress);
this.$container.append(this.$juntoHeader);
this.$container.append(this.$participants);
this.$container.append(this.$chatHeader);
this.$container.append(this.$button);
this.$container.append(this.$messages);
this.$container.append(this.$messageInput);
},
addEventListeners: function() {
var self = this;
this.participants.on('add', function (participant) {
Private.addParticipant.call(self, participant);
});
this.participants.on('remove', function (participant) {
Private.removeParticipant.call(self, participant);
});
this.$button.on('click', function () {
Handlers.buttonClick.call(self);
});
this.$videoToggle.on('click', function () {
Handlers.videoToggleClick.call(self);
});
this.$cursorToggle.on('click', function () {
Handlers.cursorToggleClick.call(self);
});
this.$soundToggle.on('click', function () {
Handlers.soundToggleClick.call(self);
});
this.$messageInput.on('keyup', function (event) {
Handlers.keyUp.call(self, event);
});
this.$messageInput.on('focus', function () {
Handlers.inputFocus.call(self);
});
this.$messageInput.on('blur', function () {
Handlers.inputBlur.call(self);
});
},
initializeSounds: function() {
this.sound = new Howl({
urls: [Metamaps.Erb['sounds/MM_sounds.mp3'], Metamaps.Erb['sounds/MM_sounds.ogg']],
sprite: {
joinmap: [0, 561],
leavemap: [1000, 592],
receivechat: [2000, 318],
sendchat: [3000, 296],
sessioninvite: [4000, 5393, true]
}
});
},
incrementUnread: function() {
this.unreadMessages++;
this.$unread.html(this.unreadMessages);
this.$unread.show();
},
addMessage: function(message, isInitial, wasMe) {
if (!this.isOpen && !isInitial) Private.incrementUnread.call(this);
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
var m = _.clone(message.attributes);
var today = new Date();
m.timestamp = new Date(m.created_at);
var date = (m.timestamp.getMonth() + 1) + '/' + m.timestamp.getDate();
date += " " + addZero(m.timestamp.getHours()) + ":" + addZero(m.timestamp.getMinutes());
m.timestamp = date;
m.image = m.user_image || 'http://www.hotpepper.ca/wp-content/uploads/2014/11/default_profile_1_200x200.png'; // TODO: remove
m.message = linker.link(m.message);
var $html = $(this.messageTemplate(m));
this.$messages.append($html);
if (!isInitial) this.scrollMessages(200);
if (!wasMe && !isInitial && this.alertSound) this.sound.play('receivechat');
},
initialMessages: function() {
var messages = this.messages.models;
for (var i = 0; i < messages.length; i++) {
Private.addMessage.call(this, messages[i], true);
}
},
handleInputMessage: function() {
var message = {
message: this.$messageInput.val(),
};
this.$messageInput.val('');
$(document).trigger(ChatView.events.message + '-' + this.room, [message]);
},
addParticipant: function(participant) {
var p = _.clone(participant.attributes);
if (p.self) {
p.selfClass = 'is-self';
p.selfName = '(me)';
} else {
p.selfClass = '';
p.selfName = '';
}
var html = this.participantTemplate(p);
this.$participants.append(html);
},
removeParticipant: function(participant) {
this.$container.find('.participant-' + participant.get('id')).remove();
}
};
var Handlers = {
buttonClick: function() {
if (this.isOpen) this.close();
else if (!this.isOpen) this.open();
},
videoToggleClick: function() {
this.$videoToggle.toggleClass('active');
this.videosShowing = !this.videosShowing;
$(document).trigger(this.videosShowing ? ChatView.events.videosOn : ChatView.events.videosOff);
},
cursorToggleClick: function() {
this.$cursorToggle.toggleClass('active');
this.cursorsShowing = !this.cursorsShowing;
$(document).trigger(this.cursorsShowing ? ChatView.events.cursorsOn : ChatView.events.cursorsOff);
},
soundToggleClick: function() {
this.alertSound = !this.alertSound;
this.$soundToggle.toggleClass('active');
},
keyUp: function(event) {
switch(event.which) {
case 13: // enter
Private.handleInputMessage.call(this);
break;
}
},
inputFocus: function() {
$(document).trigger(ChatView.events.inputFocus);
},
inputBlur: function() {
$(document).trigger(ChatView.events.inputBlur);
}
};
const ChatView = function(messages, mapper, room) {
var self = this;
this.room = room;
this.mapper = mapper;
this.messages = messages; // backbone collection
this.isOpen = false;
this.alertSound = true; // whether to play sounds on arrival of new messages or not
this.cursorsShowing = true;
this.videosShowing = true;
this.unreadMessages = 0;
this.participants = new Backbone.Collection();
Private.templates.call(this);
Private.createElements.call(this);
Private.attachElements.call(this);
Private.addEventListeners.call(this);
Private.initialMessages.call(this);
Private.initializeSounds.call(this);
this.$container.css({
right: '-300px'
});
};
ChatView.prototype.conversationInProgress = function (participating) {
this.$conversationInProgress.show();
this.$participants.addClass('is-live');
if (participating) this.$participants.addClass('is-participating');
this.$button.addClass('active');
// hide invite to call buttons
}
ChatView.prototype.conversationEnded = function () {
this.$conversationInProgress.hide();
this.$participants.removeClass('is-live');
this.$participants.removeClass('is-participating');
this.$button.removeClass('active');
this.$participants.find('.participant').removeClass('active');
this.$participants.find('.participant').removeClass('pending');
}
ChatView.prototype.leaveConversation = function () {
this.$participants.removeClass('is-participating');
}
ChatView.prototype.mapperJoinedCall = function (id) {
this.$participants.find('.participant-' + id).addClass('active');
}
ChatView.prototype.mapperLeftCall = function (id) {
this.$participants.find('.participant-' + id).removeClass('active');
}
ChatView.prototype.invitationPending = function (id) {
this.$participants.find('.participant-' + id).addClass('pending');
}
ChatView.prototype.invitationAnswered = function (id) {
this.$participants.find('.participant-' + id).removeClass('pending');
}
ChatView.prototype.addParticipant = function (participant) {
this.participants.add(participant);
}
ChatView.prototype.removeParticipant = function (username) {
var p = this.participants.find(function (p) { return p.get('username') === username; });
if (p) {
this.participants.remove(p);
}
}
ChatView.prototype.removeParticipants = function () {
this.participants.remove(this.participants.models);
}
ChatView.prototype.open = function () {
this.$container.css({
right: '0'
});
this.$messageInput.focus();
this.isOpen = true;
this.unreadMessages = 0;
this.$unread.hide();
this.scrollMessages(0);
$(document).trigger(ChatView.events.openTray);
}
ChatView.prototype.addMessage = function(message, isInitial, wasMe) {
this.messages.add(message);
Private.addMessage.call(this, message, isInitial, wasMe);
}
ChatView.prototype.scrollMessages = function(duration) {
duration = duration || 0;
this.$messages.animate({
scrollTop: this.$messages[0].scrollHeight
}, duration);
}
ChatView.prototype.clearMessages = function () {
this.unreadMessages = 0;
this.$unread.hide();
this.$messages.empty();
}
ChatView.prototype.close = function () {
this.$container.css({
right: '-300px'
});
this.$messageInput.blur();
this.isOpen = false;
$(document).trigger(ChatView.events.closeTray);
}
ChatView.prototype.remove = function () {
this.$button.off();
this.$container.remove();
}
/**
* @class
* @static
*/
ChatView.events = {
message: 'ChatView:message',
openTray: 'ChatView:openTray',
closeTray: 'ChatView:closeTray',
inputFocus: 'ChatView:inputFocus',
inputBlur: 'ChatView:inputBlur',
cursorsOff: 'ChatView:cursorsOff',
cursorsOn: 'ChatView:cursorsOn',
videosOff: 'ChatView:videosOff',
videosOn: 'ChatView:videosOn'
};
export default ChatView

88
frontend/src/Metamaps/Views/ExploreMaps.js Normal file
View file

@ -0,0 +1,88 @@
/* global Metamaps, $ */
import React from 'react'
import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
import Active from '../Active'
import ReactComponents from '../ReactComponents'
/*
* - Metamaps.Loading
*/
const ExploreMaps = {
setCollection: function (collection) {
var self = ExploreMaps
if (self.collection) {
self.collection.off('add', self.render)
self.collection.off('successOnFetch', self.handleSuccess)
self.collection.off('errorOnFetch', self.handleError)
}
self.collection = collection
self.collection.on('add', self.render)
self.collection.on('successOnFetch', self.handleSuccess)
self.collection.on('errorOnFetch', self.handleError)
},
render: function (mapperObj, cb) {
var self = ExploreMaps
if (typeof mapperObj === 'function') {
cb = mapperObj
mapperObj = null
}
var exploreObj = {
currentUser: Active.Mapper,
section: self.collection.id,
displayStyle: 'grid',
maps: self.collection,
moreToLoad: self.collection.page != 'loadedAll',
user: mapperObj,
loadMore: self.loadMore
}
ReactDOM.render(
React.createElement(ReactComponents.Maps, exploreObj),
document.getElementById('explore')
)
if (cb) cb()
Metamaps.Loading.hide()
},
loadMore: function () {
var self = ExploreMaps
if (self.collection.page != "loadedAll") {
self.collection.getMaps()
}
else self.render()
},
handleSuccess: function (cb) {
var self = ExploreMaps
if (self.collection && self.collection.id === 'mapper') {
self.fetchUserThenRender(cb)
} else {
self.render(cb)
}
},
handleError: function () {
console.log('error loading maps!') // TODO
},
fetchUserThenRender: function (cb) {
var self = ExploreMaps
// first load the mapper object and then call the render function
$.ajax({
url: '/users/' + self.collection.mapperId + '/details.json',
success: function (response) {
self.render(response, cb)
},
error: function () {
self.render(cb)
}
})
}
}
export default ExploreMaps

204
frontend/src/Metamaps/Views/Room.js Normal file
View file

@ -0,0 +1,204 @@
/* global Metamaps, $ */
import Backbone from 'backbone'
// TODO is this line good or bad
// Backbone.$ = window.$
import Active from '../Active'
import Realtime from '../Realtime'
import ChatView from './ChatView'
import VideoView from './VideoView'
/*
* Dependencies:
* Metamaps.Backbone
*/
const Room = function(opts) {
var self = this
this.isActiveRoom = false
this.socket = opts.socket
this.webrtc = opts.webrtc
//this.roomRef = opts.firebase
this.room = opts.room
this.config = opts.config
this.peopleCount = 0
this.$myVideo = opts.$video
this.myVideo = opts.myVideoView
this.messages = new Backbone.Collection()
this.currentMapper = new Backbone.Model({ name: opts.username, image: opts.image })
this.chat = new ChatView(this.messages, this.currentMapper, this.room)
this.videos = {}
this.init()
}
Room.prototype.join = function(cb) {
this.isActiveRoom = true
this.webrtc.joinRoom(this.room, cb)
this.chat.conversationInProgress(true) // true indicates participation
}
Room.prototype.conversationInProgress = function() {
this.chat.conversationInProgress(false) // false indicates not participating
}
Room.prototype.conversationEnding = function() {
this.chat.conversationEnded()
}
Room.prototype.leaveVideoOnly = function() {
this.chat.leaveConversation() // the conversation will carry on without you
for (var id in this.videos) {
this.removeVideo(id)
}
this.isActiveRoom = false
this.webrtc.leaveRoom()
}
Room.prototype.leave = function() {
for (var id in this.videos) {
this.removeVideo(id)
}
this.isActiveRoom = false
this.webrtc.leaveRoom()
this.chat.conversationEnded()
this.chat.removeParticipants()
this.chat.clearMessages()
this.messages.reset()
}
Room.prototype.setPeopleCount = function(count) {
this.peopleCount = count
}
Room.prototype.init = function () {
var self = this
$(document).on(VideoView.events.audioControlClick, function (event, videoView) {
if (!videoView.audioStatus) self.webrtc.mute()
else if (videoView.audioStatus) self.webrtc.unmute()
})
$(document).on(VideoView.events.videoControlClick, function (event, videoView) {
if (!videoView.videoStatus) self.webrtc.pauseVideo()
else if (videoView.videoStatus) self.webrtc.resumeVideo()
})
this.webrtc.webrtc.off('peerStreamAdded')
this.webrtc.webrtc.off('peerStreamRemoved')
this.webrtc.on('peerStreamAdded', function (peer) {
var mapper = Realtime.mappersOnMap[peer.nick]
peer.avatar = mapper.image
peer.username = mapper.name
if (self.isActiveRoom) {
self.addVideo(peer)
}
})
this.webrtc.on('peerStreamRemoved', function (peer) {
if (self.isActiveRoom) {
self.removeVideo(peer)
}
})
this.webrtc.on('mute', function (data) {
var v = self.videos[data.id]
if (!v) return
if (data.name === 'audio') {
v.audioStatus = false
}
else if (data.name === 'video') {
v.videoStatus = false
v.$avatar.show()
}
if (!v.audioStatus && !v.videoStatus) v.$container.hide()
})
this.webrtc.on('unmute', function (data) {
var v = self.videos[data.id]
if (!v) return
if (data.name === 'audio') {
v.audioStatus = true
}
else if (data.name === 'video') {
v.videoStatus = true
v.$avatar.hide()
}
v.$container.show()
})
var sendChatMessage = function (event, data) {
self.sendChatMessage(data)
}
$(document).on(ChatView.events.message + '-' + this.room, sendChatMessage)
}
Room.prototype.videoAdded = function (callback) {
this._videoAdded = callback
}
Room.prototype.addVideo = function (peer) {
var
id = this.webrtc.getDomId(peer),
video = attachMediaStream(peer.stream)
var
v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username })
this.videos[peer.id] = v
if (this._videoAdded) this._videoAdded(v, peer.nick)
}
Room.prototype.removeVideo = function (peer) {
var id = typeof peer == 'string' ? peer : peer.id
if (this.videos[id]) {
this.videos[id].remove()
delete this.videos[id]
}
}
Room.prototype.sendChatMessage = function (data) {
var self = this
//this.roomRef.child('messages').push(data)
if (self.chat.alertSound) self.chat.sound.play('sendchat')
var m = new Metamaps.Backbone.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)
$(document).trigger(Room.events.newMessage, [model])
},
error: function (model, response) {
console.log('error!', response)
}
})
}
// they should be instantiated as backbone models before they get
// passed to this function
Room.prototype.addMessages = function (messages, isInitial, wasMe) {
var self = this
messages.models.forEach(function (message) {
self.chat.addMessage(message, isInitial, wasMe)
})
}
/**
* @class
* @static
*/
Room.events = {
newMessage: "Room:newMessage"
}
export default Room

202
frontend/src/Metamaps/Views/VideoView.js Normal file
View file

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

7
frontend/src/Metamaps/Views/index.js Normal file
View file

@ -0,0 +1,7 @@
import ExploreMaps from './ExploreMaps'
import ChatView from './ChatView'
import VideoView from './VideoView'
import Room from './Room'
const Views = { ExploreMaps, ChatView, VideoView, Room }
export default Views

83
app/assets/javascripts/src/Metamaps.Visualize.js → frontend/src/Metamaps/Visualize.js
View file

@ -1,27 +1,32 @@
/* global Metamaps, $ */ /* global Metamaps, $ */
import _ from 'lodash'
import $jit from '../patched/JIT'
import Active from './Active'
import JIT from './JIT'
import Router from './Router'
import TopicCard from './TopicCard'
/* /*
* Metamaps.Visualize * Metamaps.Visualize
* *
* Dependencies: * Dependencies:
* - Metamaps.Active
* - Metamaps.JIT
* - Metamaps.Loading * - Metamaps.Loading
* - Metamaps.Metacodes * - Metamaps.Metacodes
* - Metamaps.Router
* - Metamaps.Synapses * - Metamaps.Synapses
* - Metamaps.TopicCard
* - Metamaps.Topics * - Metamaps.Topics
* - Metamaps.Touch
* - Metamaps.Visualize
*/ */
Metamaps.Visualize = { const Visualize = {
mGraph: null, // a reference to the graph object. mGraph: null, // a reference to the graph object.
cameraPosition: null, // stores the camera position when using a 3D visualization cameraPosition: null, // stores the camera position when using a 3D visualization
type: 'ForceDirected', // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D" type: 'ForceDirected', // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D"
loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created
touchDragNode: null,
init: function () { init: function () {
var self = Metamaps.Visualize var self = Visualize
// disable awkward dragging of the canvas element that would sometimes happen // disable awkward dragging of the canvas element that would sometimes happen
$('#infovis-canvas').on('dragstart', function (event) { $('#infovis-canvas').on('dragstart', function (event) {
event.preventDefault() event.preventDefault()
@ -35,19 +40,19 @@ Metamaps.Visualize = {
// prevent touch events on the canvas from default behaviour // prevent touch events on the canvas from default behaviour
$('#infovis-canvas').bind('touchmove', function (event) { $('#infovis-canvas').bind('touchmove', function (event) {
// Metamaps.JIT.touchPanZoomHandler(event) // JIT.touchPanZoomHandler(event)
}) })
// prevent touch events on the canvas from default behaviour // prevent touch events on the canvas from default behaviour
$('#infovis-canvas').bind('touchend touchcancel', function (event) { $('#infovis-canvas').bind('touchend touchcancel', function (event) {
lastDist = 0 lastDist = 0
if (!self.mGraph.events.touchMoved && !Metamaps.Touch.touchDragNode) Metamaps.TopicCard.hideCurrentCard() if (!self.mGraph.events.touchMoved && !Visualize.touchDragNode) TopicCard.hideCurrentCard()
self.mGraph.events.touched = self.mGraph.events.touchMoved = false self.mGraph.events.touched = self.mGraph.events.touchMoved = false
Metamaps.Touch.touchDragNode = false Visualize.touchDragNode = false
}) })
}, },
computePositions: function () { computePositions: function () {
var self = Metamaps.Visualize, var self = Visualize,
mapping mapping
if (self.type == 'RGraph') { if (self.type == 'RGraph') {
@ -111,31 +116,31 @@ Metamaps.Visualize = {
* *
*/ */
render: function () { render: function () {
var self = Metamaps.Visualize, RGraphSettings, FDSettings var self = Visualize, RGraphSettings, FDSettings
if (self.type == 'RGraph' && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) { if (self.type == 'RGraph' && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) {
// clear the previous canvas from #infovis // clear the previous canvas from #infovis
$('#infovis').empty() $('#infovis').empty()
RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings) RGraphSettings = $.extend(true, {}, JIT.ForceDirected.graphSettings)
$jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings) $jit.RGraph.Plot.NodeTypes.implement(JIT.ForceDirected.nodeSettings)
$jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings) $jit.RGraph.Plot.EdgeTypes.implement(JIT.ForceDirected.edgeSettings)
RGraphSettings.width = $(document).width() RGraphSettings.width = $(document).width()
RGraphSettings.height = $(document).height() RGraphSettings.height = $(document).height()
RGraphSettings.background = Metamaps.JIT.RGraph.background RGraphSettings.background = JIT.RGraph.background
RGraphSettings.levelDistance = Metamaps.JIT.RGraph.levelDistance RGraphSettings.levelDistance = JIT.RGraph.levelDistance
self.mGraph = new $jit.RGraph(RGraphSettings) self.mGraph = new $jit.RGraph(RGraphSettings)
} else if (self.type == 'ForceDirected' && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) { } else if (self.type == 'ForceDirected' && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) {
// clear the previous canvas from #infovis // clear the previous canvas from #infovis
$('#infovis').empty() $('#infovis').empty()
FDSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings) FDSettings = $.extend(true, {}, JIT.ForceDirected.graphSettings)
$jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings) $jit.ForceDirected.Plot.NodeTypes.implement(JIT.ForceDirected.nodeSettings)
$jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings) $jit.ForceDirected.Plot.EdgeTypes.implement(JIT.ForceDirected.edgeSettings)
FDSettings.width = $('body').width() FDSettings.width = $('body').width()
FDSettings.height = $('body').height() FDSettings.height = $('body').height()
@ -146,14 +151,14 @@ Metamaps.Visualize = {
$('#infovis').empty() $('#infovis').empty()
// init ForceDirected3D // init ForceDirected3D
self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings) self.mGraph = new $jit.ForceDirected3D(JIT.ForceDirected3D.graphSettings)
self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position
} else { } else {
self.mGraph.graph.empty() self.mGraph.graph.empty()
} }
if (self.type == 'ForceDirected' && Metamaps.Active.Mapper) $.post('/maps/' + Metamaps.Active.Map.id + '/events/user_presence') if (self.type == 'ForceDirected' && Active.Mapper) $.post('/maps/' + Active.Map.id + '/events/user_presence')
function runAnimation () { function runAnimation () {
Metamaps.Loading.hide() Metamaps.Loading.hide()
@ -161,22 +166,22 @@ Metamaps.Visualize = {
if (!self.loadLater) { if (!self.loadLater) {
// load JSON data. // load JSON data.
var rootIndex = 0 var rootIndex = 0
if (Metamaps.Active.Topic) { if (Active.Topic) {
var node = _.find(Metamaps.JIT.vizData, function (node) { var node = _.find(JIT.vizData, function (node) {
return node.id === Metamaps.Active.Topic.id return node.id === Active.Topic.id
}) })
rootIndex = _.indexOf(Metamaps.JIT.vizData, node) rootIndex = _.indexOf(JIT.vizData, node)
} }
self.mGraph.loadJSON(Metamaps.JIT.vizData, rootIndex) self.mGraph.loadJSON(JIT.vizData, rootIndex)
// compute positions and plot. // compute positions and plot.
self.computePositions() self.computePositions()
self.mGraph.busy = true self.mGraph.busy = true
if (self.type == 'RGraph') { if (self.type == 'RGraph') {
self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate) self.mGraph.fx.animate(JIT.RGraph.animate)
} else if (self.type == 'ForceDirected') { } else if (self.type == 'ForceDirected') {
self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout) self.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
} else if (self.type == 'ForceDirected3D') { } else if (self.type == 'ForceDirected3D') {
self.mGraph.animate(Metamaps.JIT.ForceDirected.animateFDLayout) self.mGraph.animate(JIT.ForceDirected.animateFDLayout)
} }
} }
} }
@ -203,17 +208,19 @@ Metamaps.Visualize = {
hold() hold()
// update the url now that the map is ready // update the url now that the map is ready
clearTimeout(Metamaps.Router.timeoutId) clearTimeout(Router.timeoutId)
Metamaps.Router.timeoutId = setTimeout(function () { Router.timeoutId = setTimeout(function () {
var m = Metamaps.Active.Map var m = Active.Map
var t = Metamaps.Active.Topic var t = Active.Topic
if (m && window.location.pathname !== '/maps/' + m.id) { if (m && window.location.pathname !== '/maps/' + m.id) {
Metamaps.Router.navigate('/maps/' + m.id) Router.navigate('/maps/' + m.id)
} }
else if (t && window.location.pathname !== '/topics/' + t.id) { else if (t && window.location.pathname !== '/topics/' + t.id) {
Metamaps.Router.navigate('/topics/' + t.id) Router.navigate('/topics/' + t.id)
} }
}, 800) }, 800)
} }
}; // end Metamaps.Visualize }
export default Visualize

107
frontend/src/Metamaps/index.js Normal file
View file

@ -0,0 +1,107 @@
/* global $ */
import Account from './Account'
import Active from './Active'
import Admin from './Admin'
import AutoLayout from './AutoLayout'
import Backbone from './Backbone'
import Control from './Control'
import Create from './Create'
import Debug from './Debug'
import Filter from './Filter'
import GlobalUI from './GlobalUI'
import Import from './Import'
import JIT from './JIT'
import Listeners from './Listeners'
import Map, { CheatSheet, InfoBox } from './Map'
import Mapper from './Mapper'
import Mobile from './Mobile'
import Mouse from './Mouse'
import Organize from './Organize'
import PasteInput from './PasteInput'
import Realtime from './Realtime'
import Router from './Router'
import Selected from './Selected'
import Settings from './Settings'
import Synapse from './Synapse'
import SynapseCard from './SynapseCard'
import Topic from './Topic'
import TopicCard from './TopicCard'
import Util from './Util'
import Views from './Views'
import Visualize from './Visualize'
import ReactComponents from './ReactComponents'
Metamaps.Account = Account
Metamaps.Active = Active
Metamaps.Admin = Admin
Metamaps.AutoLayout = AutoLayout
Metamaps.Backbone = Backbone
Metamaps.Control = Control
Metamaps.Create = Create
Metamaps.Debug = Debug
Metamaps.Filter = Filter
Metamaps.GlobalUI = GlobalUI
Metamaps.Import = Import
Metamaps.JIT = JIT
Metamaps.Listeners = Listeners
Metamaps.Map = Map
Metamaps.Map.CheatSheet = CheatSheet
Metamaps.Map.InfoBox = InfoBox
Metamaps.Maps = {}
Metamaps.Mapper = Mapper
Metamaps.Mobile = Mobile
Metamaps.Mouse = Mouse
Metamaps.Organize = Organize
Metamaps.PasteInput = PasteInput
Metamaps.Realtime = Realtime
Metamaps.ReactComponents = ReactComponents
Metamaps.Router = Router
Metamaps.Selected = Selected
Metamaps.Settings = Settings
Metamaps.Synapse = Synapse
Metamaps.SynapseCard = SynapseCard
Metamaps.Topic = Topic
Metamaps.TopicCard = TopicCard
Metamaps.Util = Util
Metamaps.Views = Views
Metamaps.Visualize = Visualize
document.addEventListener("DOMContentLoaded", function() {
// initialize all the modules
for (const prop in Metamaps) {
// this runs the init function within each sub-object on the Metamaps one
if (Metamaps.hasOwnProperty(prop) &&
Metamaps[prop] != null &&
Metamaps[prop].hasOwnProperty('init') &&
typeof (Metamaps[prop].init) == 'function'
) {
Metamaps[prop].init()
}
}
// load whichever page you are on
if (Metamaps.currentSection === "explore") {
const capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1)
Metamaps.Views.ExploreMaps.setCollection( Metamaps.Maps[capitalize] )
if (Metamaps.currentPage === "mapper") {
Views.ExploreMaps.fetchUserThenRender()
}
else {
Views.ExploreMaps.render()
}
GlobalUI.showDiv('#explore')
}
else if (Metamaps.currentSection === "" && Active.Mapper) {
Views.ExploreMaps.setCollection(Metamaps.Maps.Active)
Views.ExploreMaps.render()
GlobalUI.showDiv('#explore')
}
else if (Active.Map || Active.Topic) {
Metamaps.Loading.show()
JIT.prepareVizData()
GlobalUI.showDiv('#infovis')
}
});
export default Metamaps

16
frontend/src/index.js
View file

@ -1,18 +1,8 @@
import React from 'react' // create global references to some utility libraries
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import Backbone from 'backbone'
import _ from 'underscore' import _ from 'underscore'
import Maps from './components/Maps.js'
// this is optional really, if we import components directly React will be
// in the bundle, so we won't need a global reference
window.React = React
window.ReactDOM = ReactDOM window.ReactDOM = ReactDOM
Backbone.$ = window.$
window.Backbone = Backbone
window._ = _ window._ = _
window.Metamaps = window.Metamaps || {} import Metamaps from './Metamaps'
window.Metamaps.ReactComponents = { window.Metamaps = Metamaps
Maps
}

38
app/assets/javascripts/src/JIT.js.erb → frontend/src/patched/JIT.js
View file

@ -20,7 +20,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE. THE SOFTWARE.
*/ */
(function () {
/* /*
File: Core.js File: Core.js
@ -34,7 +33,11 @@ THE SOFTWARE.
This variable is the *only* global variable defined in the Toolkit. This variable is the *only* global variable defined in the Toolkit.
There are also other interesting properties attached to this variable described below. There are also other interesting properties attached to this variable described below.
*/ */
window.$jit = function(w) { // START METAMAPS CODE
const $jit = function(w) {
// ORIGINAL:
// window.$jit = function(w) {
// END METAMAPS CODE
w = w || window; w = w || window;
for(var k in $jit) { for(var k in $jit) {
if($jit[k].$extend) { if($jit[k].$extend) {
@ -3122,9 +3125,15 @@ var Canvas;
}; };
}, },
translateToCenter: function(ps) { translateToCenter: function(ps) {
var size = this.getSize(), // START METAMAPS CODE
width = ps? (size.width - ps.width - this.translateOffsetX*2) : size.width; var size = this.getSize();
height = ps? (size.height - ps.height - this.translateOffsetY*2) : size.height; var width = ps ? (size.width - ps.width - this.translateOffsetX*2) : size.width;
var height = ps ? (size.height - ps.height - this.translateOffsetY*2) : size.height;
// ORIGINAL CODE
// var size = this.getSize(),
// width = ps? (size.width - ps.width - this.translateOffsetX*2) : size.width;
// height = ps? (size.height - ps.height - this.translateOffsetY*2) : size.height;
// END METAMAPS CODE
var ctx = this.getCtx(); var ctx = this.getCtx();
ps && ctx.scale(1/this.scaleOffsetX, 1/this.scaleOffsetY); ps && ctx.scale(1/this.scaleOffsetX, 1/this.scaleOffsetY);
ctx.translate(width/2, height/2); ctx.translate(width/2, height/2);
@ -3232,7 +3241,7 @@ var Canvas;
ctx = base.getCtx(), ctx = base.getCtx(),
scale = base.scaleOffsetX; scale = base.scaleOffsetX;
//var pattern = new Image(); //var pattern = new Image();
//pattern.src = "<%= asset_path('cubes.png') %>"; //pattern.src = Metamaps.Erb['cubes.png']
//var ptrn = ctx.createPattern(pattern, 'repeat'); //var ptrn = ctx.createPattern(pattern, 'repeat');
//ctx.fillStyle = ptrn; //ctx.fillStyle = ptrn;
ctx.fillStyle = Metamaps.Settings.colors.background; ctx.fillStyle = Metamaps.Settings.colors.background;
@ -5634,7 +5643,11 @@ Graph.Op = {
break; break;
case 'fade:seq': case 'fade': case 'fade:con': case 'fade:seq': case 'fade': case 'fade:con':
that = this; // START METAMAPS CODE
var that = this;
// ORIGINAL CODE:
// that = this;
// END METAMAPS CODE
graph = viz.construct(json); graph = viz.construct(json);
//set alpha to 0 for nodes to add. //set alpha to 0 for nodes to add.
@ -5770,7 +5783,11 @@ Graph.Op = {
break; break;
case 'fade:seq': case 'fade': case 'fade:con': case 'fade:seq': case 'fade': case 'fade:con':
that = this; // START METAMAPS CODE
var that = this;
// ORIGINAL CODE:
// that = this;
// END METAMAPS CODE
graph = viz.construct(json); graph = viz.construct(json);
//preprocessing for nodes to delete. //preprocessing for nodes to delete.
//get node property modes to interpolate //get node property modes to interpolate
@ -11312,7 +11329,4 @@ $jit.ForceDirected3D.$extend = true;
})($jit.ForceDirected3D); })($jit.ForceDirected3D);
export default $jit
})();

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

@ -1,13 +1,14 @@
/* global describe, it */ /* global describe, it */
const chai = require('chai')
const expect = chai.expect
Metamaps = {} import chai from 'chai'
require('../../app/assets/javascripts/src/Metamaps.Import')
import Import from '../src/Metamaps/Import'
const { expect } = chai
describe('Metamaps.Import.js', function () { describe('Metamaps.Import.js', function () {
it('has a topic whitelist', function () { it('has a topic whitelist', function () {
expect(Metamaps.Import.topicWhitelist).to.deep.equal( expect(Import.topicWhitelist).to.deep.equal(
['id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission'] ['id', 'name', 'metacode', 'x', 'y', 'description', 'link', 'permission']
) )
}) })

6
package.json
View file

@ -5,7 +5,7 @@
"scripts": { "scripts": {
"build": "webpack", "build": "webpack",
"build:watch": "webpack --watch", "build:watch": "webpack --watch",
"test": "mocha frontend/test || (echo 'Run `npm install` to setup testing' && false)" "test": "mocha --compilers js:babel-core/register frontend/test || (echo 'Run `npm install` to setup testing' && false)"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -18,6 +18,7 @@
}, },
"homepage": "https://github.com/metamaps/metamaps#readme", "homepage": "https://github.com/metamaps/metamaps#readme",
"dependencies": { "dependencies": {
"autolinker": "^0.17.1",
"babel-cli": "^6.11.4", "babel-cli": "^6.11.4",
"babel-loader": "^6.2.4", "babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.11.5", "babel-plugin-transform-class-properties": "^6.11.5",
@ -27,9 +28,12 @@
"chai": "^3.5.0", "chai": "^3.5.0",
"jquery": "1.12.1", "jquery": "1.12.1",
"mocha": "^3.0.2", "mocha": "^3.0.2",
"mocha-jsdom": "^1.1.0",
"node-uuid": "1.2.0",
"react": "^15.3.0", "react": "^15.3.0",
"react-dom": "^15.3.0", "react-dom": "^15.3.0",
"requirejs": "^2.1.1", "requirejs": "^2.1.1",
"socket.io": "0.9.12",
"underscore": "^1.4.4", "underscore": "^1.4.4",
"webpack": "^1.13.1" "webpack": "^1.13.1"
} }

10
realtime/package.json
View file

@ -1,10 +0,0 @@
{
"name": "RoR-real-time",
"description": "providing real-time sychronization for ruby on rails",
"version": "0.0.1",
"private": true,
"dependencies": {
"socket.io": "0.9.12",
"node-uuid": "1.2.0"
}
}