move Metamaps code into webpack
This commit is contained in:
Devin Howard
parent
b13ebc6716
commit
a4d31241a8
32 changed files with 775 additions and 776 deletions
|
|
@ -13,37 +13,11 @@
|
||||||
//= 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/JIT
|
||||||
//= require ./src/Metamaps.Router
|
//= require ./src/Metamaps.Erb
|
||||||
//= require ./src/Metamaps.Backbone
|
//= require ./webpacked/metamaps.bundle
|
||||||
//= require ./src/Metamaps.Views
|
|
||||||
//= require ./src/views/chatView
|
//= require ./src/views/chatView
|
||||||
//= require ./src/views/videoView
|
//= require ./src/views/videoView
|
||||||
//= require ./src/views/room
|
//= 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
|
|
||||||
|
|
|
||||||
18
app/assets/javascripts/src/Metamaps.Erb.js.erb
Normal file
18
app/assets/javascripts/src/Metamaps.Erb.js.erb
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
/* 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.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %>
|
||||||
|
Metamaps.VERSION = '<%= METAMAPS_VERSION %>'
|
||||||
|
|
@ -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();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps */
|
/* global Metamaps */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, Backbone, _, $ */
|
/* global Metamaps, Backbone, _, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/*
|
/*
|
||||||
* Metamaps.Debug.js.erb
|
* Metamaps.Debug.js.erb
|
||||||
*
|
*
|
||||||
|
|
@ -10,4 +11,5 @@ Metamaps.Debug = function () {
|
||||||
}
|
}
|
||||||
Metamaps.debug = function () {
|
Metamaps.debug = function () {
|
||||||
Metamaps.Debug()
|
Metamaps.Debug()
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
680
frontend/src/Metamaps/Metamaps.GlobalUI.js
Normal file
680
frontend/src/Metamaps/Metamaps.GlobalUI.js
Normal file
|
|
@ -0,0 +1,680 @@
|
||||||
|
window.Metamaps = window.Metamaps || {};
|
||||||
|
|
||||||
|
Metamaps.Active = Metamaps.Active || {
|
||||||
|
Map: null,
|
||||||
|
Topic: null,
|
||||||
|
Mapper: null
|
||||||
|
};
|
||||||
|
Metamaps.Maps = 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
Metamaps.JIT = {
|
Metamaps.JIT = {
|
||||||
events: {
|
events: {
|
||||||
topicDrag: 'Metamaps:JIT:events:topicDrag',
|
topicDrag: 'Metamaps:JIT:events:topicDrag',
|
||||||
|
|
@ -819,7 +820,7 @@ Metamaps.JIT = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//
|
//
|
||||||
temp = eventInfo.getNode()
|
let temp = eventInfo.getNode()
|
||||||
if (temp != false && temp.id != node.id && Metamaps.Selected.Nodes.indexOf(temp) == -1) { // this means a Node has been returned
|
if (temp != false && temp.id != node.id && Metamaps.Selected.Nodes.indexOf(temp) == -1) { // this means a Node has been returned
|
||||||
Metamaps.tempNode2 = temp
|
Metamaps.tempNode2 = temp
|
||||||
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
7
frontend/src/Metamaps/Metamaps.ReactComponents.js
Normal file
7
frontend/src/Metamaps/Metamaps.ReactComponents.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
|
|
||||||
|
import Maps from '../components/Maps'
|
||||||
|
|
||||||
|
Metamaps.ReactComponents = {
|
||||||
|
Maps
|
||||||
|
}
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
|
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, Backbone, $ */
|
/* global Metamaps, Backbone, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -421,18 +422,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>'
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps */
|
/* global Metamaps */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
window.Metamaps = window.Metamaps || {}
|
||||||
/* global Metamaps, $ */
|
/* global Metamaps, $ */
|
||||||
/*
|
/*
|
||||||
* Metamaps.Visualize
|
* Metamaps.Visualize
|
||||||
|
|
@ -1,26 +1,10 @@
|
||||||
/* global Metamaps */
|
window.Metamaps = window.Metamaps || {}
|
||||||
|
|
||||||
/*
|
|
||||||
* Metamaps.js.erb
|
|
||||||
*/
|
|
||||||
|
|
||||||
// TODO eliminate these 5 top-level variables
|
// TODO eliminate these 5 top-level variables
|
||||||
Metamaps.panningInt = null
|
Metamaps.panningInt = null
|
||||||
Metamaps.tempNode = null
|
Metamaps.tempNode = null
|
||||||
Metamaps.tempInit = false
|
Metamaps.tempInit = false
|
||||||
Metamaps.tempNode2 = null
|
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 = {
|
Metamaps.Settings = {
|
||||||
embed: false, // indicates that the app is on a page that is optimized for embedding in iFrames on other web pages
|
embed: false, // indicates that the app is on a page that is optimized for embedding in iFrames on other web pages
|
||||||
|
|
@ -65,10 +49,39 @@ Metamaps.Mouse = {
|
||||||
Metamaps.Selected = {
|
Metamaps.Selected = {
|
||||||
reset: function () {
|
reset: function () {
|
||||||
var self = Metamaps.Selected
|
var self = Metamaps.Selected
|
||||||
|
|
||||||
self.Nodes = []
|
self.Nodes = []
|
||||||
self.Edges = []
|
self.Edges = []
|
||||||
},
|
},
|
||||||
Nodes: [],
|
Nodes: [],
|
||||||
Edges: []
|
Edges: []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
require('./Metamaps.Account')
|
||||||
|
require('./Metamaps.Admin')
|
||||||
|
require('./Metamaps.AutoLayout')
|
||||||
|
require('./Metamaps.Backbone')
|
||||||
|
require('./Metamaps.Control')
|
||||||
|
require('./Metamaps.Create')
|
||||||
|
require('./Metamaps.Debug')
|
||||||
|
require('./Metamaps.Filter')
|
||||||
|
require('./Metamaps.GlobalUI')
|
||||||
|
require('./Metamaps.Import')
|
||||||
|
require('./Metamaps.JIT')
|
||||||
|
require('./Metamaps.Listeners')
|
||||||
|
require('./Metamaps.Map')
|
||||||
|
require('./Metamaps.Mapper')
|
||||||
|
require('./Metamaps.Mobile')
|
||||||
|
require('./Metamaps.Organize')
|
||||||
|
require('./Metamaps.PasteInput')
|
||||||
|
require('./Metamaps.Realtime')
|
||||||
|
require('./Metamaps.Router')
|
||||||
|
require('./Metamaps.Synapse')
|
||||||
|
require('./Metamaps.SynapseCard')
|
||||||
|
require('./Metamaps.Topic')
|
||||||
|
require('./Metamaps.TopicCard')
|
||||||
|
require('./Metamaps.Util')
|
||||||
|
require('./Metamaps.Views')
|
||||||
|
require('./Metamaps.Visualize')
|
||||||
|
require('./Metamaps.ReactComponents')
|
||||||
|
|
||||||
|
export default window.Metamaps
|
||||||
|
|
@ -2,17 +2,14 @@ import React from 'react'
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDOM from 'react-dom'
|
||||||
import Backbone from 'backbone'
|
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
|
import Metamaps from './Metamaps'
|
||||||
// in the bundle, so we won't need a global reference
|
|
||||||
|
// create global references to some libraries
|
||||||
window.React = React
|
window.React = React
|
||||||
window.ReactDOM = ReactDOM
|
window.ReactDOM = ReactDOM
|
||||||
Backbone.$ = window.$
|
Backbone.$ = window.$ // jquery from rails
|
||||||
window.Backbone = Backbone
|
window.Backbone = Backbone
|
||||||
window._ = _
|
window._ = _
|
||||||
|
|
||||||
window.Metamaps = window.Metamaps || {}
|
window.Metamaps = Metamaps
|
||||||
window.Metamaps.ReactComponents = {
|
|
||||||
Maps
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue