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

refactor a bit, make a comment about the Constants file

Browse source
This commit is contained in:
Devin Howard 2016-09-22 15:29:55 +08:00
parent 03446f548a
commit 7f83f86460
3 changed files with 93 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,20 @@
window.Metamaps = window.Metamaps || {} window.Metamaps = window.Metamaps || {}
// TODO eliminate these 5 top-level variables // TODO everything in this file should be moved into one of the other modules
// Either as a local constant, or as a local constant with a globally available getter/setter
Metamaps.tempNode = null Metamaps.tempNode = null
Metamaps.tempInit = false Metamaps.tempInit = false
Metamaps.tempNode2 = null Metamaps.tempNode2 = null
Metamaps.Active = Metamaps.Active || {
Map: null,
Topic: null,
Mapper: null
};
Metamaps.Maps = Metamaps.Maps || {}
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
sandbox: false, // puts the app into a mode (when true) where it only creates data locally, and isn't writing it to the database sandbox: false, // puts the app into a mode (when true) where it only creates data locally, and isn't writing it to the database

133
frontend/src/Metamaps/GlobalUI.js
View file

@ -1,54 +1,10 @@
window.Metamaps = window.Metamaps || {}; window.Metamaps = window.Metamaps || {};
Metamaps.Active = Metamaps.Active || { const GlobalUI = {
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, notifyTimeout: null,
lightbox: null, lightbox: null,
init: function () { init: function () {
var self = Metamaps.GlobalUI; var self = GlobalUI;
self.Search.init(); self.Search.init();
self.CreateMap.init(); self.CreateMap.init();
@ -99,7 +55,7 @@ Metamaps.GlobalUI = {
}, 200, 'easeInCubic', function () { $(this).hide() }) }, 200, 'easeInCubic', function () { $(this).hide() })
}, },
openLightbox: function (which) { openLightbox: function (which) {
var self = Metamaps.GlobalUI; var self = GlobalUI;
$('.lightboxContent').hide(); $('.lightboxContent').hide();
$('#' + which).show(); $('#' + which).show();
@ -126,7 +82,7 @@ Metamaps.GlobalUI = {
}, },
closeLightbox: function (event) { closeLightbox: function (event) {
var self = Metamaps.GlobalUI; var self = GlobalUI;
if (event) event.preventDefault(); if (event) event.preventDefault();
@ -143,15 +99,15 @@ Metamaps.GlobalUI = {
$('#lightbox_overlay').hide(); $('#lightbox_overlay').hide();
}); });
if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map'); if (self.lightbox === 'forkmap') GlobalUI.CreateMap.reset('fork_map');
if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map'); if (self.lightbox === 'newmap') GlobalUI.CreateMap.reset('new_map');
if (Metamaps.Create && Metamaps.Create.isSwitchingSet) { if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
Metamaps.Create.cancelMetacodeSetSwitch(); Metamaps.Create.cancelMetacodeSetSwitch();
} }
self.lightbox = null; self.lightbox = null;
}, },
notifyUser: function (message, leaveOpen) { notifyUser: function (message, leaveOpen) {
var self = Metamaps.GlobalUI; var self = GlobalUI;
$('#toast').html(message) $('#toast').html(message)
self.showDiv('#toast') self.showDiv('#toast')
@ -163,7 +119,7 @@ Metamaps.GlobalUI = {
} }
}, },
clearNotify: function() { clearNotify: function() {
var self = Metamaps.GlobalUI; var self = GlobalUI;
clearTimeout(self.notifyTimeOut); clearTimeout(self.notifyTimeOut);
self.hideDiv('#toast') self.hideDiv('#toast')
@ -171,16 +127,16 @@ Metamaps.GlobalUI = {
shareInvite: function(inviteLink) { shareInvite: function(inviteLink) {
window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink); window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
} }
}; }
Metamaps.GlobalUI.CreateMap = { GlobalUI.CreateMap = {
newMap: null, newMap: null,
emptyMapForm: "", emptyMapForm: "",
emptyForkMapForm: "", emptyForkMapForm: "",
topicsToMap: [], topicsToMap: [],
synapsesToMap: [], synapsesToMap: [],
init: function () { init: function () {
var self = Metamaps.GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' }); self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
@ -190,7 +146,7 @@ Metamaps.GlobalUI.CreateMap = {
}, },
bindFormEvents: function () { bindFormEvents: function () {
var self = Metamaps.GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
$('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) { $('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) {
if (event.keyCode === 13) self.submit() if (event.keyCode === 13) self.submit()
@ -198,7 +154,7 @@ Metamaps.GlobalUI.CreateMap = {
$('.new_map button.cancel').unbind().bind('click', function (event) { $('.new_map button.cancel').unbind().bind('click', function (event) {
event.preventDefault(); event.preventDefault();
Metamaps.GlobalUI.closeLightbox(); GlobalUI.closeLightbox();
}); });
$('.new_map button.submitMap').unbind().bind('click', self.submit); $('.new_map button.submitMap').unbind().bind('click', self.submit);
@ -213,14 +169,14 @@ Metamaps.GlobalUI.CreateMap = {
generateSuccessMessage: function (id) { 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/"; 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 += id;
stringStart += "' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>"; stringStart += "' onclick='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 "; stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this ";
var page = Metamaps.Active.Map ? 'map' : 'page'; var page = Metamaps.Active.Map ? 'map' : 'page';
var stringEnd = "</a></div>"; var stringEnd = "</a></div>";
return stringStart + page + stringEnd; return stringStart + page + stringEnd;
}, },
switchPermission: function () { switchPermission: function () {
var self = Metamaps.GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
self.newMap.set('permission', $(this).attr('data-permission')); self.newMap.set('permission', $(this).attr('data-permission'));
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected'); $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
@ -232,14 +188,14 @@ Metamaps.GlobalUI.CreateMap = {
submit: function (event) { submit: function (event) {
if (event) event.preventDefault(); if (event) event.preventDefault();
var self = Metamaps.GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
if (Metamaps.GlobalUI.lightbox === 'forkmap') { if (GlobalUI.lightbox === 'forkmap') {
self.newMap.set('topicsToMap', self.topicsToMap); self.newMap.set('topicsToMap', self.topicsToMap);
self.newMap.set('synapsesToMap', self.synapsesToMap); self.newMap.set('synapsesToMap', self.synapsesToMap);
} }
var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId); var $form = $(formId);
self.newMap.set('name', $form.find('#map_name').val()); self.newMap.set('name', $form.find('#map_name').val());
@ -255,13 +211,13 @@ Metamaps.GlobalUI.CreateMap = {
// TODO add error message // TODO add error message
}); });
Metamaps.GlobalUI.closeLightbox(); GlobalUI.closeLightbox();
Metamaps.GlobalUI.notifyUser('Working...'); GlobalUI.notifyUser('Working...');
}, },
throwMapNameError: function () { throwMapNameError: function () {
var self = Metamaps.GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var $form = $(formId); var $form = $(formId);
var message = $("<div class='feedback_message'>Please enter a map name...</div>"); var message = $("<div class='feedback_message'>Please enter a map name...</div>");
@ -274,20 +230,20 @@ Metamaps.GlobalUI.CreateMap = {
}, 5000); }, 5000);
}, },
success: function (model) { success: function (model) {
var self = Metamaps.GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
//push the new map onto the collection of 'my maps' //push the new map onto the collection of 'my maps'
Metamaps.Maps.Mine.add(model); Metamaps.Maps.Mine.add(model);
var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var form = $(formId); var form = $(formId);
Metamaps.GlobalUI.clearNotify(); GlobalUI.clearNotify();
$('#wrapper').append(self.generateSuccessMessage(model.id)); $('#wrapper').append(self.generateSuccessMessage(model.id));
}, },
reset: function (id) { reset: function (id) {
var self = Metamaps.GlobalUI.CreateMap; var self = GlobalUI.CreateMap;
var form = $('#' + id); var form = $('#' + id);
@ -305,14 +261,13 @@ Metamaps.GlobalUI.CreateMap = {
return false; return false;
}, },
}; }
GlobalUI.Account = {
Metamaps.GlobalUI.Account = {
isOpen: false, isOpen: false,
changing: false, changing: false,
init: function () { init: function () {
var self = Metamaps.GlobalUI.Account; var self = GlobalUI.Account;
$('.sidebarAccountIcon').click(self.toggleBox); $('.sidebarAccountIcon').click(self.toggleBox);
$('.sidebarAccountBox').click(function(event){ $('.sidebarAccountBox').click(function(event){
@ -321,7 +276,7 @@ Metamaps.GlobalUI.Account = {
$('body').click(self.close); $('body').click(self.close);
}, },
toggleBox: function (event) { toggleBox: function (event) {
var self = Metamaps.GlobalUI.Account; var self = GlobalUI.Account;
if (self.isOpen) self.close(); if (self.isOpen) self.close();
else self.open(); else self.open();
@ -329,7 +284,7 @@ Metamaps.GlobalUI.Account = {
event.stopPropagation(); event.stopPropagation();
}, },
open: function () { open: function () {
var self = Metamaps.GlobalUI.Account; var self = GlobalUI.Account;
Metamaps.Filter.close(); Metamaps.Filter.close();
$('.sidebarAccountIcon .tooltipsUnder').addClass('hide'); $('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
@ -345,7 +300,7 @@ Metamaps.GlobalUI.Account = {
} }
}, },
close: function () { close: function () {
var self = Metamaps.GlobalUI.Account; var self = GlobalUI.Account;
$('.sidebarAccountIcon .tooltipsUnder').removeClass('hide'); $('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
if (!self.changing) { if (!self.changing) {
@ -357,9 +312,9 @@ Metamaps.GlobalUI.Account = {
}); });
} }
} }
}; }
Metamaps.GlobalUI.Search = { GlobalUI.Search = {
locked: false, locked: false,
isOpen: false, isOpen: false,
limitTopicsToMe: false, limitTopicsToMe: false,
@ -368,7 +323,7 @@ Metamaps.GlobalUI.Search = {
changing: false, changing: false,
optionsInitialized: false, optionsInitialized: false,
init: function () { init: function () {
var self = Metamaps.GlobalUI.Search; var self = GlobalUI.Search;
var loader = new CanvasLoader('searchLoading'); var loader = new CanvasLoader('searchLoading');
loader.setColor('#4fb5c0'); // default is '#000000' loader.setColor('#4fb5c0'); // default is '#000000'
@ -417,15 +372,15 @@ Metamaps.GlobalUI.Search = {
self.startTypeahead(); self.startTypeahead();
}, },
lock: function() { lock: function() {
var self = Metamaps.GlobalUI.Search; var self = GlobalUI.Search;
self.locked = true; self.locked = true;
}, },
unlock: function() { unlock: function() {
var self = Metamaps.GlobalUI.Search; var self = GlobalUI.Search;
self.locked = false; self.locked = false;
}, },
open: function (focus) { open: function (focus) {
var self = Metamaps.GlobalUI.Search; var self = GlobalUI.Search;
clearTimeout(self.timeOut); clearTimeout(self.timeOut);
if (!self.isOpen && !self.changing && !self.locked) { if (!self.isOpen && !self.changing && !self.locked) {
@ -447,7 +402,7 @@ Metamaps.GlobalUI.Search = {
// for now // for now
return return
var self = Metamaps.GlobalUI.Search; var self = GlobalUI.Search;
self.timeOut = setTimeout(function () { self.timeOut = setTimeout(function () {
if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() == '')) { if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() == '')) {
@ -468,7 +423,7 @@ Metamaps.GlobalUI.Search = {
}, closeAfter); }, closeAfter);
}, },
startTypeahead: function () { startTypeahead: function () {
var self = Metamaps.GlobalUI.Search; var self = 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 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 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>';
@ -615,7 +570,7 @@ Metamaps.GlobalUI.Search = {
}, },
handleResultClick: function (event, datum, dataset) { handleResultClick: function (event, datum, dataset) {
var self = Metamaps.GlobalUI.Search; var self = GlobalUI.Search;
self.hideLoader(); self.hideLoader();
@ -632,7 +587,7 @@ Metamaps.GlobalUI.Search = {
} }
}, },
initSearchOptions: function () { initSearchOptions: function () {
var self = Metamaps.GlobalUI.Search; var self = GlobalUI.Search;
function toggleResultSet(set) { function toggleResultSet(set) {
var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult'); var s = $('.tt-dataset-' + set + ' .tt-suggestion, .tt-dataset-' + set + ' .resultnoresult');
@ -679,4 +634,4 @@ Metamaps.GlobalUI.Search = {
} }
} }
export default Metamaps.GlobalUI export default GlobalUI

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

@ -1,3 +1,4 @@
/* global $ */
window.Metamaps = window.Metamaps || {} window.Metamaps = window.Metamaps || {}
import './Constants' import './Constants'
@ -58,4 +59,41 @@ Metamaps.Util = Util
Metamaps.Views = Views Metamaps.Views = Views
Metamaps.Visualize = Visualize Metamaps.Visualize = Visualize
$(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')
}
});
export default window.Metamaps export default window.Metamaps