From 7f83f86460d9c9b3eb5e1dc201d0689ea04b8084 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Thu, 22 Sep 2016 15:29:55 +0800 Subject: [PATCH] refactor a bit, make a comment about the Constants file --- frontend/src/Metamaps/Constants.js | 12 ++- frontend/src/Metamaps/GlobalUI.js | 133 ++++++++++------------------- frontend/src/Metamaps/index.js | 38 +++++++++ 3 files changed, 93 insertions(+), 90 deletions(-) diff --git a/frontend/src/Metamaps/Constants.js b/frontend/src/Metamaps/Constants.js index a79054e6..ab62ba14 100644 --- a/frontend/src/Metamaps/Constants.js +++ b/frontend/src/Metamaps/Constants.js @@ -1,10 +1,20 @@ 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.tempInit = false Metamaps.tempNode2 = null +Metamaps.Active = Metamaps.Active || { + Map: null, + Topic: null, + Mapper: null +}; + +Metamaps.Maps = Metamaps.Maps || {} + 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 diff --git a/frontend/src/Metamaps/GlobalUI.js b/frontend/src/Metamaps/GlobalUI.js index e4522c2f..5abf25ee 100644 --- a/frontend/src/Metamaps/GlobalUI.js +++ b/frontend/src/Metamaps/GlobalUI.js @@ -1,54 +1,10 @@ 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 = { +const GlobalUI = { notifyTimeout: null, lightbox: null, init: function () { - var self = Metamaps.GlobalUI; + var self = GlobalUI; self.Search.init(); self.CreateMap.init(); @@ -99,7 +55,7 @@ Metamaps.GlobalUI = { }, 200, 'easeInCubic', function () { $(this).hide() }) }, openLightbox: function (which) { - var self = Metamaps.GlobalUI; + var self = GlobalUI; $('.lightboxContent').hide(); $('#' + which).show(); @@ -126,7 +82,7 @@ Metamaps.GlobalUI = { }, closeLightbox: function (event) { - var self = Metamaps.GlobalUI; + var self = GlobalUI; if (event) event.preventDefault(); @@ -143,15 +99,15 @@ Metamaps.GlobalUI = { $('#lightbox_overlay').hide(); }); - if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map'); - if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map'); + if (self.lightbox === 'forkmap') GlobalUI.CreateMap.reset('fork_map'); + if (self.lightbox === 'newmap') 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; + var self = GlobalUI; $('#toast').html(message) self.showDiv('#toast') @@ -163,7 +119,7 @@ Metamaps.GlobalUI = { } }, clearNotify: function() { - var self = Metamaps.GlobalUI; + var self = GlobalUI; clearTimeout(self.notifyTimeOut); self.hideDiv('#toast') @@ -171,16 +127,16 @@ Metamaps.GlobalUI = { shareInvite: function(inviteLink) { window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink); } -}; +} -Metamaps.GlobalUI.CreateMap = { +GlobalUI.CreateMap = { newMap: null, emptyMapForm: "", emptyForkMapForm: "", topicsToMap: [], synapsesToMap: [], init: function () { - var self = Metamaps.GlobalUI.CreateMap; + var self = GlobalUI.CreateMap; self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' }); @@ -190,7 +146,7 @@ Metamaps.GlobalUI.CreateMap = { }, bindFormEvents: function () { - var self = Metamaps.GlobalUI.CreateMap; + var self = GlobalUI.CreateMap; $('.new_map input, .new_map div').unbind('keypress').bind('keypress', function(event) { if (event.keyCode === 13) self.submit() @@ -198,7 +154,7 @@ Metamaps.GlobalUI.CreateMap = { $('.new_map button.cancel').unbind().bind('click', function (event) { event.preventDefault(); - Metamaps.GlobalUI.closeLightbox(); + GlobalUI.closeLightbox(); }); $('.new_map button.submitMap').unbind().bind('click', self.submit); @@ -213,14 +169,14 @@ Metamaps.GlobalUI.CreateMap = { generateSuccessMessage: function (id) { var stringStart = "
SUCCESS!
Your map has been created. Do you want to: Go to your new map"; - stringStart += "ORStay on this "; + stringStart += "' onclick='GlobalUI.CreateMap.closeSuccess();'>Go to your new map"; + stringStart += "ORStay on this "; var page = Metamaps.Active.Map ? 'map' : 'page'; var stringEnd = "
"; return stringStart + page + stringEnd; }, switchPermission: function () { - var self = Metamaps.GlobalUI.CreateMap; + var self = GlobalUI.CreateMap; self.newMap.set('permission', $(this).attr('data-permission')); $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected'); @@ -232,14 +188,14 @@ Metamaps.GlobalUI.CreateMap = { submit: function (event) { 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('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); self.newMap.set('name', $form.find('#map_name').val()); @@ -255,13 +211,13 @@ Metamaps.GlobalUI.CreateMap = { // TODO add error message }); - Metamaps.GlobalUI.closeLightbox(); - Metamaps.GlobalUI.notifyUser('Working...'); + GlobalUI.closeLightbox(); + GlobalUI.notifyUser('Working...'); }, 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 message = $("
Please enter a map name...
"); @@ -274,20 +230,20 @@ Metamaps.GlobalUI.CreateMap = { }, 5000); }, success: function (model) { - var self = Metamaps.GlobalUI.CreateMap; + var self = 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 formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var form = $(formId); - Metamaps.GlobalUI.clearNotify(); + GlobalUI.clearNotify(); $('#wrapper').append(self.generateSuccessMessage(model.id)); }, reset: function (id) { - var self = Metamaps.GlobalUI.CreateMap; + var self = GlobalUI.CreateMap; var form = $('#' + id); @@ -305,14 +261,13 @@ Metamaps.GlobalUI.CreateMap = { return false; }, -}; +} - -Metamaps.GlobalUI.Account = { +GlobalUI.Account = { isOpen: false, changing: false, init: function () { - var self = Metamaps.GlobalUI.Account; + var self = GlobalUI.Account; $('.sidebarAccountIcon').click(self.toggleBox); $('.sidebarAccountBox').click(function(event){ @@ -321,7 +276,7 @@ Metamaps.GlobalUI.Account = { $('body').click(self.close); }, toggleBox: function (event) { - var self = Metamaps.GlobalUI.Account; + var self = GlobalUI.Account; if (self.isOpen) self.close(); else self.open(); @@ -329,7 +284,7 @@ Metamaps.GlobalUI.Account = { event.stopPropagation(); }, open: function () { - var self = Metamaps.GlobalUI.Account; + var self = GlobalUI.Account; Metamaps.Filter.close(); $('.sidebarAccountIcon .tooltipsUnder').addClass('hide'); @@ -345,7 +300,7 @@ Metamaps.GlobalUI.Account = { } }, close: function () { - var self = Metamaps.GlobalUI.Account; + var self = GlobalUI.Account; $('.sidebarAccountIcon .tooltipsUnder').removeClass('hide'); if (!self.changing) { @@ -357,9 +312,9 @@ Metamaps.GlobalUI.Account = { }); } } -}; +} -Metamaps.GlobalUI.Search = { +GlobalUI.Search = { locked: false, isOpen: false, limitTopicsToMe: false, @@ -368,7 +323,7 @@ Metamaps.GlobalUI.Search = { changing: false, optionsInitialized: false, init: function () { - var self = Metamaps.GlobalUI.Search; + var self = GlobalUI.Search; var loader = new CanvasLoader('searchLoading'); loader.setColor('#4fb5c0'); // default is '#000000' @@ -417,15 +372,15 @@ Metamaps.GlobalUI.Search = { self.startTypeahead(); }, lock: function() { - var self = Metamaps.GlobalUI.Search; + var self = GlobalUI.Search; self.locked = true; }, unlock: function() { - var self = Metamaps.GlobalUI.Search; + var self = GlobalUI.Search; self.locked = false; }, open: function (focus) { - var self = Metamaps.GlobalUI.Search; + var self = GlobalUI.Search; clearTimeout(self.timeOut); if (!self.isOpen && !self.changing && !self.locked) { @@ -447,7 +402,7 @@ Metamaps.GlobalUI.Search = { // for now return - var self = Metamaps.GlobalUI.Search; + var self = GlobalUI.Search; self.timeOut = setTimeout(function () { if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField.tt-input').val() == '')) { @@ -468,7 +423,7 @@ Metamaps.GlobalUI.Search = { }, closeAfter); }, startTypeahead: function () { - var self = Metamaps.GlobalUI.Search; + var self = GlobalUI.Search; var mapheader = Metamaps.Active.Mapper ? '

Maps

' : '

Maps

'; var topicheader = Metamaps.Active.Mapper ? '

Topics

' : '

Topics

'; @@ -615,7 +570,7 @@ Metamaps.GlobalUI.Search = { }, handleResultClick: function (event, datum, dataset) { - var self = Metamaps.GlobalUI.Search; + var self = GlobalUI.Search; self.hideLoader(); @@ -632,7 +587,7 @@ Metamaps.GlobalUI.Search = { } }, initSearchOptions: function () { - var self = Metamaps.GlobalUI.Search; + var self = GlobalUI.Search; function toggleResultSet(set) { 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 diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js index 926529ca..21d2af3a 100644 --- a/frontend/src/Metamaps/index.js +++ b/frontend/src/Metamaps/index.js @@ -1,3 +1,4 @@ +/* global $ */ window.Metamaps = window.Metamaps || {} import './Constants' @@ -58,4 +59,41 @@ Metamaps.Util = Util Metamaps.Views = Views 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