From 2f4fe525ce584ef2d472d5159c210e2369509e1f Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Mon, 3 Oct 2016 08:32:37 +0800 Subject: [PATCH] Fix a bunch of errors and style issues --- app/views/explore/active.html.erb | 2 +- app/views/explore/featured.html.erb | 2 +- app/views/explore/mapper.html.erb | 2 +- app/views/explore/mine.html.erb | 2 +- app/views/explore/shared.html.erb | 2 +- app/views/explore/starred.html.erb | 2 +- app/views/maps/show.html.erb | 4 +- frontend/src/Metamaps/Account.js | 6 +- frontend/src/Metamaps/Active.js | 11 +--- frontend/src/Metamaps/DataModel/Map.js | 4 +- .../src/Metamaps/DataModel/MapCollection.js | 2 +- frontend/src/Metamaps/DataModel/Mapper.js | 2 +- .../Metamaps/DataModel/MapperCollection.js | 2 +- frontend/src/Metamaps/DataModel/Mapping.js | 2 +- .../Metamaps/DataModel/MappingCollection.js | 2 +- frontend/src/Metamaps/DataModel/Message.js | 2 +- .../Metamaps/DataModel/MessageCollection.js | 2 +- frontend/src/Metamaps/DataModel/Metacode.js | 2 +- .../Metamaps/DataModel/MetacodeCollection.js | 2 +- frontend/src/Metamaps/DataModel/Synapse.js | 14 ++--- .../Metamaps/DataModel/SynapseCollection.js | 2 +- frontend/src/Metamaps/DataModel/Topic.js | 2 +- .../src/Metamaps/DataModel/TopicCollection.js | 2 +- frontend/src/Metamaps/DataModel/index.js | 51 ++++++++++++++-- frontend/src/Metamaps/GlobalUI/CreateMap.js | 29 ++++++---- frontend/src/Metamaps/GlobalUI/Search.js | 9 ++- frontend/src/Metamaps/GlobalUI/index.js | 34 ++--------- frontend/src/Metamaps/Import.js | 6 +- frontend/src/Metamaps/JIT.js | 20 ++----- frontend/src/Metamaps/Loading.js | 17 +++--- frontend/src/Metamaps/Map/InfoBox.js | 13 +++-- frontend/src/Metamaps/Map/index.js | 6 +- frontend/src/Metamaps/Router.js | 3 +- frontend/src/Metamaps/Synapse.js | 1 + frontend/src/Metamaps/Topic.js | 6 +- frontend/src/Metamaps/TopicCard.js | 58 ++++++++++--------- frontend/src/Metamaps/Views/ChatView.js | 6 +- frontend/src/Metamaps/Views/Room.js | 3 +- frontend/src/Metamaps/Views/index.js | 2 + frontend/src/Metamaps/Visualize.js | 2 +- frontend/src/Metamaps/index.js | 20 ++++--- frontend/src/patched/JIT.js | 2 + package.json | 1 + webpack.config.js | 11 +++- 44 files changed, 201 insertions(+), 174 deletions(-) diff --git a/app/views/explore/active.html.erb b/app/views/explore/active.html.erb index fd9ebe68..e6e2a3a6 100644 --- a/app/views/explore/active.html.erb +++ b/app/views/explore/active.html.erb @@ -10,6 +10,6 @@ Metamaps.currentSection = "explore"; Metamaps.currentPage = "active"; - Metamaps.Maps.Active = <%= @maps.to_json.html_safe %>; + Metamaps.ServerData.Active = <%= @maps.to_json.html_safe %>; Metamaps.GlobalUI.Search.focus(); diff --git a/app/views/explore/featured.html.erb b/app/views/explore/featured.html.erb index 15ab97fc..9396ebdc 100644 --- a/app/views/explore/featured.html.erb +++ b/app/views/explore/featured.html.erb @@ -10,6 +10,6 @@ Metamaps.currentSection = "explore"; Metamaps.currentPage = "featured"; - Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>; + Metamaps.ServerData.Featured = <%= @maps.to_json.html_safe %>; Metamaps.GlobalUI.Search.focus(); diff --git a/app/views/explore/mapper.html.erb b/app/views/explore/mapper.html.erb index 7669b808..bf3e73c0 100644 --- a/app/views/explore/mapper.html.erb +++ b/app/views/explore/mapper.html.erb @@ -10,7 +10,7 @@ Metamaps.currentSection = "explore"; Metamaps.currentPage = "mapper"; - Metamaps.Maps.Mapper = { + Metamaps.ServerData.Mapper = { models: <%= @maps.to_json.html_safe %>, id: <%= params[:id] %> }; diff --git a/app/views/explore/mine.html.erb b/app/views/explore/mine.html.erb index 8bf2da6f..21f034c3 100644 --- a/app/views/explore/mine.html.erb +++ b/app/views/explore/mine.html.erb @@ -10,6 +10,6 @@ Metamaps.currentPage = "mine"; Metamaps.currentSection = "explore"; - Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>; + Metamaps.ServerData.Mine = <%= @maps.to_json.html_safe %>; Metamaps.GlobalUI.Search.focus(); diff --git a/app/views/explore/shared.html.erb b/app/views/explore/shared.html.erb index a47757ec..0f01fcf0 100644 --- a/app/views/explore/shared.html.erb +++ b/app/views/explore/shared.html.erb @@ -10,6 +10,6 @@ Metamaps.currentPage = "shared"; Metamaps.currentSection = "explore"; - Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>; + Metamaps.ServerData.Shared = <%= @maps.to_json.html_safe %>; Metamaps.GlobalUI.Search.focus(); diff --git a/app/views/explore/starred.html.erb b/app/views/explore/starred.html.erb index 83c8de13..125c3e76 100644 --- a/app/views/explore/starred.html.erb +++ b/app/views/explore/starred.html.erb @@ -10,6 +10,6 @@ Metamaps.currentPage = "starred"; Metamaps.currentSection = "explore"; - Metamaps.Maps.Starred = <%= @maps.to_json.html_safe %>; + Metamaps.ServerData.Starred = <%= @maps.to_json.html_safe %>; Metamaps.GlobalUI.Search.focus(); diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb index b25c7610..4ecbd274 100644 --- a/app/views/maps/show.html.erb +++ b/app/views/maps/show.html.erb @@ -16,7 +16,7 @@ Metamaps.ServerData.Topics = <%= @alltopics.to_json(user: current_user).html_safe %>; Metamaps.ServerData.Synapses = <%= @allsynapses.to_json.html_safe %>; Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>; - Metamaps.Messages = <%= @allmessages.to_json.html_safe %>; - Metamaps.Stars = <%= @allstars.to_json.html_safe %>; + Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>; + Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>; Metamaps.ServerData.VisualizeType = "ForceDirected"; diff --git a/frontend/src/Metamaps/Account.js b/frontend/src/Metamaps/Account.js index 15b6f30b..b7e1fe79 100644 --- a/frontend/src/Metamaps/Account.js +++ b/frontend/src/Metamaps/Account.js @@ -1,6 +1,9 @@ /* global $, CanvasLoader */ const Account = { + init: function (serverData) { + Account.userIconUrl = serverData['user.png'] + }, listenersInitialized: false, userIconUrl: null, initListeners: function () { @@ -9,9 +12,6 @@ const Account = { $('#user_image').change(self.showImagePreview) self.listenersInitialized = true }, - init: function (serverData) { - Account.userIconUrl = serverData['user.png'] - }, toggleChangePicture: function () { var self = Account diff --git a/frontend/src/Metamaps/Active.js b/frontend/src/Metamaps/Active.js index fe8bda6d..ddd44152 100644 --- a/frontend/src/Metamaps/Active.js +++ b/frontend/src/Metamaps/Active.js @@ -1,16 +1,7 @@ -import DataModelMap from './DataModel/Map' -import DataModelMapper from './DataModel/Mapper' -import DataModelTopic from './DataModel/Topic' - const Active = { Map: null, Mapper: null, - Topic: null, - init: function(serverData) { - if (serverData.Map) Active.Map = new DataModelMap(severData.ActiveMap) - if (serverData.Mapper) Active.Mapper = new DataModelMapper(serverData.ActiveMapper) - if (serverData.Topic) Active.Topic = new DataModelTopic(serverData.ActiveTopic) - } + Topic: null } export default Active diff --git a/frontend/src/Metamaps/DataModel/Map.js b/frontend/src/Metamaps/DataModel/Map.js index 3ae47d1a..2ab98575 100644 --- a/frontend/src/Metamaps/DataModel/Map.js +++ b/frontend/src/Metamaps/DataModel/Map.js @@ -2,10 +2,10 @@ import _ from 'lodash' import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Active from '../Active' -import { InfoBox } from '../Map' +import InfoBox from '../Map/InfoBox' import Mapper from '../Mapper' import Realtime from '../Realtime' diff --git a/frontend/src/Metamaps/DataModel/MapCollection.js b/frontend/src/Metamaps/DataModel/MapCollection.js index 69b2f5a8..22bbcf7b 100644 --- a/frontend/src/Metamaps/DataModel/MapCollection.js +++ b/frontend/src/Metamaps/DataModel/MapCollection.js @@ -1,5 +1,5 @@ import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Loading from '../Loading' diff --git a/frontend/src/Metamaps/DataModel/Mapper.js b/frontend/src/Metamaps/DataModel/Mapper.js index 3627fbd6..39e83503 100644 --- a/frontend/src/Metamaps/DataModel/Mapper.js +++ b/frontend/src/Metamaps/DataModel/Mapper.js @@ -1,6 +1,6 @@ import _ from 'lodash' import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import outdent from 'outdent' const Mapper = Backbone.Model.extend({ diff --git a/frontend/src/Metamaps/DataModel/MapperCollection.js b/frontend/src/Metamaps/DataModel/MapperCollection.js index e0ce2bed..836ee48f 100644 --- a/frontend/src/Metamaps/DataModel/MapperCollection.js +++ b/frontend/src/Metamaps/DataModel/MapperCollection.js @@ -1,5 +1,5 @@ import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Mapper from './Mapper' diff --git a/frontend/src/Metamaps/DataModel/Mapping.js b/frontend/src/Metamaps/DataModel/Mapping.js index 8bf92ed2..282c419f 100644 --- a/frontend/src/Metamaps/DataModel/Mapping.js +++ b/frontend/src/Metamaps/DataModel/Mapping.js @@ -1,6 +1,6 @@ import _ from 'lodash' import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Active from '../Active' import Map from '../Map' diff --git a/frontend/src/Metamaps/DataModel/MappingCollection.js b/frontend/src/Metamaps/DataModel/MappingCollection.js index e475e098..9a69f56b 100644 --- a/frontend/src/Metamaps/DataModel/MappingCollection.js +++ b/frontend/src/Metamaps/DataModel/MappingCollection.js @@ -1,5 +1,5 @@ import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Mapping from './Mapping' diff --git a/frontend/src/Metamaps/DataModel/Message.js b/frontend/src/Metamaps/DataModel/Message.js index f7dc9bee..00f1cf4b 100644 --- a/frontend/src/Metamaps/DataModel/Message.js +++ b/frontend/src/Metamaps/DataModel/Message.js @@ -1,6 +1,6 @@ import _ from 'lodash' import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} const Message = Backbone.Model.extend({ urlRoot: '/messages', diff --git a/frontend/src/Metamaps/DataModel/MessageCollection.js b/frontend/src/Metamaps/DataModel/MessageCollection.js index a572c212..3ce440eb 100644 --- a/frontend/src/Metamaps/DataModel/MessageCollection.js +++ b/frontend/src/Metamaps/DataModel/MessageCollection.js @@ -1,5 +1,5 @@ import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Message from './Message' diff --git a/frontend/src/Metamaps/DataModel/Metacode.js b/frontend/src/Metamaps/DataModel/Metacode.js index f9bd06cf..fbd13755 100644 --- a/frontend/src/Metamaps/DataModel/Metacode.js +++ b/frontend/src/Metamaps/DataModel/Metacode.js @@ -1,5 +1,5 @@ import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import outdent from 'outdent' const Metacode = Backbone.Model.extend({ diff --git a/frontend/src/Metamaps/DataModel/MetacodeCollection.js b/frontend/src/Metamaps/DataModel/MetacodeCollection.js index ff4626d1..03c41613 100644 --- a/frontend/src/Metamaps/DataModel/MetacodeCollection.js +++ b/frontend/src/Metamaps/DataModel/MetacodeCollection.js @@ -1,5 +1,5 @@ import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Metacode from './Metacode' diff --git a/frontend/src/Metamaps/DataModel/Synapse.js b/frontend/src/Metamaps/DataModel/Synapse.js index 09f75743..a60611a3 100644 --- a/frontend/src/Metamaps/DataModel/Synapse.js +++ b/frontend/src/Metamaps/DataModel/Synapse.js @@ -1,8 +1,9 @@ /* global $ */ import _ from 'lodash' +import outdent from 'outdent' import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Active from '../Active' import Filter from '../Filter' @@ -76,12 +77,11 @@ const Synapse = Backbone.Model.extend({ this.on('change:desc', Filter.checkSynapses, this) }, prepareLiForFilter: function () { - var li = '' - li += '
  • ' - li += '
    • ' - return li + return outdent` +
  • + synapse icon +

    ${this.get('desc')}

    +
    • ` }, authorizeToEdit: function (mapper) { if (mapper && (this.get('calculated_permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || this.get('user_id') === mapper.get('id'))) return true diff --git a/frontend/src/Metamaps/DataModel/SynapseCollection.js b/frontend/src/Metamaps/DataModel/SynapseCollection.js index 86bf8c47..8d315353 100644 --- a/frontend/src/Metamaps/DataModel/SynapseCollection.js +++ b/frontend/src/Metamaps/DataModel/SynapseCollection.js @@ -1,5 +1,5 @@ import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Synapse from './Synapse' diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js index cd709a24..d8426c92 100644 --- a/frontend/src/Metamaps/DataModel/Topic.js +++ b/frontend/src/Metamaps/DataModel/Topic.js @@ -2,7 +2,7 @@ import _ from 'lodash' import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Active from '../Active' import Filter from '../Filter' diff --git a/frontend/src/Metamaps/DataModel/TopicCollection.js b/frontend/src/Metamaps/DataModel/TopicCollection.js index 4bcaf622..a1de51d6 100644 --- a/frontend/src/Metamaps/DataModel/TopicCollection.js +++ b/frontend/src/Metamaps/DataModel/TopicCollection.js @@ -1,5 +1,5 @@ import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Topic from './Topic' diff --git a/frontend/src/Metamaps/DataModel/index.js b/frontend/src/Metamaps/DataModel/index.js index c973cb3b..4e62113d 100644 --- a/frontend/src/Metamaps/DataModel/index.js +++ b/frontend/src/Metamaps/DataModel/index.js @@ -37,6 +37,17 @@ const DataModel = { Creators: new MapperCollection(), Mappers: new MapperCollection(), Mappings: new MappingCollection(), + Maps: { + Mine: [], + Shared: [], + Starred: [], + Mapper: { + models: [], + mapperId: null + }, + Featured: [], + Active: [] + }, Messages: [], Metacodes: new MetacodeCollection(), Stars: [], @@ -46,6 +57,15 @@ const DataModel = { init: function (serverData) { var self = DataModel + // workaround circular import problem + if (!self.MapCollection.model) self.MapCollection.model = Map + + self.synapseIconUrl = serverData['synapse16.png'] + + if (serverData.ActiveMap) Active.Map = new Map(serverData.ActiveMap) + if (serverData.ActiveMapper) Active.Mapper = new Mapper(serverData.ActiveMapper) + if (serverData.ActiveTopic) Active.Topic = new Topic(serverData.ActiveTopic) + if (serverData.Collaborators) self.Collaborators = new MapperCollection(serverData.Collaborators) if (serverData.Creators) self.Creators = new MapperCollection(serverData.Creators) if (serverData.Mappers) self.Mappers = new MapperCollection(serverData.Mappers) @@ -56,22 +76,43 @@ const DataModel = { if (serverData.Synapses) self.Synapses = new SynapseCollection(serverData.Synapses) if (serverData.Topics) self.Topics = new TopicCollection(serverData.Topics) + // initialize global backbone models and collections + if (Active.Mapper) Active.Mapper = new self.Mapper(Active.Mapper) + + var myCollection = serverData.Mine ? serverData.Mine : [] + var sharedCollection = serverData.Shared ? serverData.Shared : [] + var starredCollection = serverData.Starred ? serverData.Starred : [] + var mapperCollection = [] + var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' } + if (self.Maps.Mapper.mapperId) { + mapperCollection = serverData.Mapper.models + mapperOptionsObj.mapperId = serverData.Mapper.id + } + var featuredCollection = serverData.Featured ? serverData.Featured : [] + var activeCollection = serverData.Active ? serverData.Active : [] + + self.Maps.Mine = new MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' }) + self.Maps.Shared = new MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' }) + self.Maps.Starred = new MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' }) + // 'Mapper' refers to another mapper + self.Maps.Mapper = new MapCollection(mapperCollection, mapperOptionsObj) + self.Maps.Featured = new MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' }) + self.Maps.Active = new MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' }) + self.attachCollectionEvents() }, - attachCollectionEvents: function () { - var self = DataModel - self.Topics.on('add remove', function (topic) { + DataModel.Topics.on('add remove', function (topic) { InfoBox.updateNumbers() Filter.checkMetacodes() Filter.checkMappers() }) - self.Synapses.on('add remove', function (synapse) { + DataModel.Synapses.on('add remove', function (synapse) { InfoBox.updateNumbers() Filter.checkSynapses() Filter.checkMappers() }) - self.Mappings.on('add remove', function (mapping) { + DataModel.Mappings.on('add remove', function (mapping) { InfoBox.updateNumbers() Filter.checkSynapses() Filter.checkMetacodes() diff --git a/frontend/src/Metamaps/GlobalUI/CreateMap.js b/frontend/src/Metamaps/GlobalUI/CreateMap.js index 97110c91..11c8deb9 100644 --- a/frontend/src/Metamaps/GlobalUI/CreateMap.js +++ b/frontend/src/Metamaps/GlobalUI/CreateMap.js @@ -1,7 +1,10 @@ /* global $ */ +import outdent from 'outdent' + import Active from '../Active' import DataModel from '../DataModel' +import DataModelMap from '../DataModel/Map' import GlobalUI from './index' const CreateMap = { @@ -13,7 +16,7 @@ const CreateMap = { init: function () { var self = CreateMap - self.newMap = new DataModel.Map({ permission: 'commons' }) + self.newMap = new DataModelMap({ permission: 'commons' }) self.bindFormEvents() @@ -40,15 +43,6 @@ const CreateMap = { $(this).remove() }) }, - generateSuccessMessage: function (id) { - var stringStart = "
    SUCCESS!
    Your map has been created. Do you want to: Go to your new map" - stringStart += "ORStay on this " - var page = Active.Map ? 'map' : 'page' - var stringEnd = '
    ' - return stringStart + page + stringEnd - }, switchPermission: function () { var self = CreateMap @@ -108,7 +102,20 @@ const CreateMap = { DataModel.Maps.Mine.add(model) GlobalUI.clearNotify() - $('#wrapper').append(self.generateSuccessMessage(model.id)) + $('#wrapper').append(outdent` +
    +
    SUCCESS!
    + Your map has been created. Do you want to: + Go to your new map + OR + Stay on this ${Active.Map ? 'map' : 'page'} +
    + `) + $('#mapGo').click(e => GlobalUI.CreateMap.closeSuccess()) + $('#mapStay').click(e => { + GlobalUI.CreateMap.closeSuccess() + return false + }) }, reset: function (id) { var self = CreateMap diff --git a/frontend/src/Metamaps/GlobalUI/Search.js b/frontend/src/Metamaps/GlobalUI/Search.js index 1d4b82e4..0859b941 100644 --- a/frontend/src/Metamaps/GlobalUI/Search.js +++ b/frontend/src/Metamaps/GlobalUI/Search.js @@ -10,9 +10,12 @@ const Search = { limitMapsToMe: false, changing: false, optionsInitialized: false, - init: function () { + init: function (serverData) { var self = Search + self.wildcardIconUrl = serverData['icons/wildcard.png'] + self.userIconUrl = serverData['user.png'] + // this is similar to Metamaps.Loading, but it's for the search element var loader = new CanvasLoader('searchLoading') loader.setColor('#4fb5c0') // default is '#000000' @@ -50,7 +53,7 @@ const Search = { return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({ value: 'No results', label: 'No results', - typeImageURL: Metamaps.ServerData['icons/wildcard.png'], + typeImageURL: self.wildcardIconUrl, rtype: 'noresult' }) }, @@ -118,7 +121,7 @@ const Search = { value: 'No results', label: 'No results', rtype: 'noresult', - profile: Metamaps.ServerData['user.png'] + profile: self.userIconUrl }) }, header: mapperheader, diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js index 2444925a..d1a0b6ba 100644 --- a/frontend/src/Metamaps/GlobalUI/index.js +++ b/frontend/src/Metamaps/GlobalUI/index.js @@ -2,9 +2,7 @@ import clipboard from 'clipboard-js' -import Active from '../Active' import Create from '../Create' -import DataModel from '../DataModel' import Search from './Search' import CreateMap from './CreateMap' @@ -14,13 +12,13 @@ import ImportDialog from './ImportDialog' const GlobalUI = { notifyTimeout: null, lightbox: null, - init: function () { + init: function (serverData) { var self = GlobalUI - self.Search.init() - self.CreateMap.init() - self.Account.init() - self.ImportDialog.init(Metamaps.Erb, self.openLightbox, self.closeLightbox) + self.Search.init(serverData) + self.CreateMap.init(serverData) + self.Account.init(serverData) + self.ImportDialog.init(serverData, self.openLightbox, self.closeLightbox) if ($('#toast').html().trim()) self.notifyUser($('#toast').html()) @@ -32,28 +30,6 @@ const GlobalUI = { }) $('#lightbox_screen, #lightbox_close').click(self.closeLightbox) - - // initialize global backbone models and collections - if (Active.Mapper) Active.Mapper = new DataModel.Mapper(Active.Mapper) - - var myCollection = DataModel.Maps.Mine ? DataModel.Maps.Mine : [] - var sharedCollection = DataModel.Maps.Shared ? DataModel.Maps.Shared : [] - var starredCollection = DataModel.Maps.Starred ? DataModel.Maps.Starred : [] - var mapperCollection = [] - var mapperOptionsObj = { id: 'mapper', sortBy: 'updated_at' } - if (DataModel.Maps.Mapper) { - mapperCollection = DataModel.Maps.Mapper.models - mapperOptionsObj.mapperId = DataModel.Maps.Mapper.id - } - var featuredCollection = DataModel.Maps.Featured ? DataModel.Maps.Featured : [] - var activeCollection = DataModel.Maps.Active ? DataModel.Maps.Active : [] - DataModel.Maps.Mine = new DataModel.MapCollection(myCollection, { id: 'mine', sortBy: 'updated_at' }) - DataModel.Maps.Shared = new DataModel.MapCollection(sharedCollection, { id: 'shared', sortBy: 'updated_at' }) - DataModel.Maps.Starred = new DataModel.MapCollection(starredCollection, { id: 'starred', sortBy: 'updated_at' }) - // 'Mapper' refers to another mapper - DataModel.Maps.Mapper = new DataModel.MapCollection(mapperCollection, mapperOptionsObj) - DataModel.Maps.Featured = new DataModel.MapCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' }) - DataModel.Maps.Active = new DataModel.MapCollection(activeCollection, { id: 'active', sortBy: 'updated_at' }) }, showDiv: function (selector) { $(selector).show() diff --git a/frontend/src/Metamaps/Import.js b/frontend/src/Metamaps/Import.js index d273edbb..8436c148 100644 --- a/frontend/src/Metamaps/Import.js +++ b/frontend/src/Metamaps/Import.js @@ -5,7 +5,7 @@ import _ from 'lodash' import Active from './Active' import AutoLayout from './AutoLayout' -import DataModel from './DataModel' +import DataModel from './DataModel' import GlobalUI from './GlobalUI' import Map from './Map' import Synapse from './Synapse' @@ -218,7 +218,7 @@ const Import = { parsedTopics.forEach(topic => { let coords = { x: topic.x, y: topic.y } if (!coords.x || !coords.y) { - coords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings }) + coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings }) } if (!topic.name && topic.link || @@ -351,7 +351,7 @@ const Import = { handleURL: function (url, opts = {}) { let coords = opts.coords if (!coords || coords.x === undefined || coords.y === undefined) { - coords = AutoLayout.getNextCoord({ mappings: Metamaps.Mappings }) + coords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings }) } const name = opts.name || 'Link' diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js index cbcd131b..7cbce927 100644 --- a/frontend/src/Metamaps/JIT.js +++ b/frontend/src/Metamaps/JIT.js @@ -51,7 +51,7 @@ const JIT = { /** * This method will bind the event handlers it is interested and initialize the class. */ - init: function () { + init: function (serverData) { const self = JIT $('.zoomIn').click(self.zoomIn) @@ -65,10 +65,10 @@ const JIT = { $('.takeScreenshot').click(Map.exportImage) self.topicDescImage = new Image() - self.topicDescImage.src = Metamaps.ServerData['topic_description_signifier.png'] + self.topicDescImage.src = serverData['topic_description_signifier.png'] self.topicLinkImage = new Image() - self.topicLinkImage.src = Metamaps.ServerData['topic_link_signifier.png'] + self.topicLinkImage.src = serverData['topic_link_signifier.png'] }, /** * convert our topic JSON into something JIT can use @@ -313,17 +313,6 @@ const JIT = { panning: 'avoid nodes', zooming: 28 // zoom speed. higher is more sensible }, - // background: { - // type: 'Metamaps' - // }, - // NodeStyles: { - // enable: true, - // type: 'Native', - // stylesHover: { - // dim: 30 - // }, - // duration: 300 - // }, // Change node and edge styles such as // color and width. // These properties are also set per node @@ -649,7 +638,6 @@ const JIT = { }, // this will just be used to patch the ForceDirected graphsettings with the few things which actually differ background: { - // type: 'Metamaps', levelDistance: 200, numberOfCircles: 4, CanvasStyles: { @@ -1573,7 +1561,7 @@ const JIT = { loader.show() // Hidden by default const topics = DataModel.Topics.map(function (t) { return t.id }) - const topics_string = topics.join() + const topicsString = topics.join() const successCallback = function (data) { $('#loadingSiblings').remove() diff --git a/frontend/src/Metamaps/Loading.js b/frontend/src/Metamaps/Loading.js index 97275547..b1fc2abb 100644 --- a/frontend/src/Metamaps/Loading.js +++ b/frontend/src/Metamaps/Loading.js @@ -1,19 +1,20 @@ /* global CanvasLoader, $ */ const Loading = { - loader: new CanvasLoader('loading'), + loader: null, // needs CanvasLoader to be defined hide: function () { - $('#loading').hide(); + $('#loading').hide() }, show: function () { - $('#loading').show(); + $('#loading').show() }, setup: function () { - Loading.loader.setColor('#4fb5c0'); // default is '#000000' - Loading.loader.setDiameter(28); // default is 40 - Loading.loader.setDensity(41); // default is 40 - Loading.loader.setRange(0.9); // default is 1.3 - Loading.loader.show(); // Hidden by default + if (!Loading.loader) Loading.loader = new CanvasLoader('loading') + Loading.loader.setColor('#4fb5c0') // default is '#000000' + Loading.loader.setDiameter(28) // default is 40 + Loading.loader.setDensity(41) // default is 40 + Loading.loader.setRange(0.9) // default is 1.3 + Loading.loader.show() // Hidden by default } } diff --git a/frontend/src/Metamaps/Map/InfoBox.js b/frontend/src/Metamaps/Map/InfoBox.js index a3e31f19..bf56dc90 100644 --- a/frontend/src/Metamaps/Map/InfoBox.js +++ b/frontend/src/Metamaps/Map/InfoBox.js @@ -34,7 +34,8 @@ const InfoBox = { data-bip-activator="#mapInfoDesc" data-bip-value="{{desc}}" >{{desc}}`, - init: function () { + userImageUrl: '', + init: function (serverData) { var self = InfoBox $('.mapInfoIcon').click(self.toggleBox) @@ -46,7 +47,9 @@ const InfoBox = { self.attachEventListeners() self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html()) - + + self.userImageUrl = serverData['user.png'] + var querystring = window.location.search.replace(/^\?/, '') if (querystring == 'new') { self.open() @@ -108,7 +111,7 @@ const InfoBox = { obj['contributor_count'] = relevantPeople.length obj['contributors_class'] = relevantPeople.length > 1 ? 'multiple' : '' obj['contributors_class'] += relevantPeople.length === 2 ? ' mTwo' : '' - obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : Metamaps.ServerData['user.png'] + obj['contributor_image'] = relevantPeople.length > 0 ? relevantPeople.models[0].get('image') : self.userImageUrl obj['contributor_list'] = self.createContributorList() obj['user_name'] = isCreator ? 'You' : map.get('user_name') @@ -210,7 +213,7 @@ const InfoBox = { value: "No results", label: "No results", rtype: "noresult", - profile: Metamaps.ServerData['user.png'], + profile: self.userImageUrl }); }, suggestion: function(s) { @@ -313,7 +316,7 @@ const InfoBox = { if (relevantPeople.length === 2) contributors_class = 'multiple mTwo' else if (relevantPeople.length > 2) contributors_class = 'multiple' - var contributors_image = Metamaps.ServerData['user.png'] + var contributors_image = self.userImageUrl if (relevantPeople.length > 0) { // get the first contributor and use their image contributors_image = relevantPeople.models[0].get('image') diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js index 578c1f9f..b616e95f 100644 --- a/frontend/src/Metamaps/Map/index.js +++ b/frontend/src/Metamaps/Map/index.js @@ -25,7 +25,7 @@ const Map = { events: { editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper' }, - init: function () { + init: function (serverData) { var self = Map $('#wrapper').mousedown(function (e){ @@ -44,8 +44,8 @@ const Map = { GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html() self.updateStar() - InfoBox.init() - CheatSheet.init() + InfoBox.init(serverData) + CheatSheet.init(serverData) $('.viewOnly .requestAccess').click(self.requestAccess) diff --git a/frontend/src/Metamaps/Router.js b/frontend/src/Metamaps/Router.js index 9046c112..74648ac1 100644 --- a/frontend/src/Metamaps/Router.js +++ b/frontend/src/Metamaps/Router.js @@ -1,9 +1,10 @@ /* global $ */ import Backbone from 'backbone' -Backbone.$ = window.$ +try { Backbone.$ = window.$ } catch (err) {} import Active from './Active' +import DataModel from './DataModel' import GlobalUI from './GlobalUI' import Loading from './Loading' import Map from './Map' diff --git a/frontend/src/Metamaps/Synapse.js b/frontend/src/Metamaps/Synapse.js index 824aad4b..0345690d 100644 --- a/frontend/src/Metamaps/Synapse.js +++ b/frontend/src/Metamaps/Synapse.js @@ -3,6 +3,7 @@ import Active from './Active' import Control from './Control' import Create from './Create' +import DataModel from './DataModel' import JIT from './JIT' import Map from './Map' import Selected from './Selected' diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js index 05cd54f1..08ac0661 100644 --- a/frontend/src/Metamaps/Topic.js +++ b/frontend/src/Metamaps/Topic.js @@ -359,13 +359,13 @@ const Topic = { $(document).trigger(Map.events.editedByActiveMapper) var metacode = DataModel.Metacodes.findWhere({ name: 'Metamap' }) - var topic = new Metamaps.Backbone.Topic({ + var topic = new DataModel.Topic({ name: data.name, metacode_id: metacode.id, - defer_to_map_id: Metamaps.Active.Map.id, + defer_to_map_id: Active.Map.id, link: window.location.origin + '/maps/' + data.id }) - Metamaps.Topics.add(topic) + DataModel.Topics.add(topic) var mapping = new DataModel.Mapping({ xloc: Create.newTopic.x, diff --git a/frontend/src/Metamaps/TopicCard.js b/frontend/src/Metamaps/TopicCard.js index dd172971..6e798ee6 100644 --- a/frontend/src/Metamaps/TopicCard.js +++ b/frontend/src/Metamaps/TopicCard.js @@ -11,9 +11,16 @@ import Visualize from './Visualize' const TopicCard = { openTopicCard: null, // stores the topic that's currently open authorizedToEdit: false, // stores boolean for edit permission for open topic card - init: function () { + RAILS_ENV: undefined, + init: function (serverData) { var self = TopicCard + if (serverData.RAILS_ENV) { + self.RAILS_ENV = serverData.RAILS_ENV + } else { + console.error('RAILS_ENV is not defined! See TopicCard.js init function.') + } + // initialize best_in_place editing $('.authenticated div.permission.canEdit .best_in_place').best_in_place() @@ -84,6 +91,23 @@ const TopicCard = { $('.attachments').removeClass('hidden') $('.CardOnGraph').removeClass('hasAttachment') }, + showLinkLoader: function() { + var loader = new CanvasLoader('embedlyLinkLoader') + loader.setColor('#4fb5c0'); // default is '#000000' + loader.setDiameter(28) // default is 40 + loader.setDensity(41) // default is 40 + loader.setRange(0.9); // default is 1.3 + loader.show() // Hidden by default + }, + showLink: function(topic) { + var e = embedly('card', document.getElementById('embedlyLink')) + if (!e && TopicCard.RAILS_ENV != 'development') { + TopicCard.handleInvalidLink() + } else if (!e) { + $('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show() + $('#embedlyLinkLoader').hide() + } + }, bindShowCardListeners: function (topic) { var self = TopicCard var showCard = document.getElementById('showcard') @@ -123,20 +147,9 @@ const TopicCard = { $('.attachments').addClass('hidden') $('.embeds').append(embedlyEl) $('.embeds').append('
    ') - var loader = new CanvasLoader('embedlyLinkLoader') - loader.setColor('#4fb5c0'); // default is '#000000' - loader.setDiameter(28) // default is 40 - loader.setDensity(41) // default is 40 - loader.setRange(0.9); // default is 1.3 - loader.show() // Hidden by default - var e = embedly('card', document.getElementById('embedlyLink')) - if (!e && Metamaps.Erb.RAILS_ENV != 'development') { - self.handleInvalidLink() - } - else if (!e) { - $('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show() - $('#embedlyLinkLoader').hide() - } + + self.showLinkLoader() + self.showLink(topic) } }, 100) } @@ -145,20 +158,9 @@ const TopicCard = { // initialize the link card, if there is a link if (topic.get('link') && topic.get('link') !== '') { - var loader = new CanvasLoader('embedlyLinkLoader') - loader.setColor('#4fb5c0'); // default is '#000000' - loader.setDiameter(28) // default is 40 - loader.setDensity(41) // default is 40 - loader.setRange(0.9); // default is 1.3 - loader.show() // Hidden by default - var e = embedly('card', document.getElementById('embedlyLink')) + self.showLinkLoader() + self.showLink(topic) self.showLinkRemover() - if (!e && Metamaps.Erb.RAILS_ENV != 'development') { - self.handleInvalidLink() - } else if (!e) { - $('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show() - $('#embedlyLinkLoader').hide() - } } var selectingMetacode = false diff --git a/frontend/src/Metamaps/Views/ChatView.js b/frontend/src/Metamaps/Views/ChatView.js index fe33ac68..7175949f 100644 --- a/frontend/src/Metamaps/Views/ChatView.js +++ b/frontend/src/Metamaps/Views/ChatView.js @@ -121,9 +121,9 @@ var Private = { Handlers.inputBlur.call(self) }) }, - initializeSounds: function () { + initializeSounds: function (soundUrls) { this.sound = new Howl({ - src: [Metamaps.ServerData['sounds/MM_sounds.mp3'], Metamaps.ServerData['sounds/MM_sounds.ogg']], + src: soundUrls, sprite: { joinmap: [0, 561], leavemap: [1000, 592], @@ -243,7 +243,7 @@ const ChatView = function (messages, mapper, room) { Private.attachElements.call(this) Private.addEventListeners.call(this) Private.initialMessages.call(this) - Private.initializeSounds.call(this) + Private.initializeSounds.call(this, room.soundUrls) this.$container.css({ right: '-300px' }) diff --git a/frontend/src/Metamaps/Views/Room.js b/frontend/src/Metamaps/Views/Room.js index ff8975d2..f0821a10 100644 --- a/frontend/src/Metamaps/Views/Room.js +++ b/frontend/src/Metamaps/Views/Room.js @@ -13,7 +13,7 @@ import Realtime from '../Realtime' import ChatView from './ChatView' import VideoView from './VideoView' -const Room = function(opts) { +const Room = function(opts = {}) { var self = this this.isActiveRoom = false @@ -31,6 +31,7 @@ const Room = function(opts) { this.chat = new ChatView(this.messages, this.currentMapper, this.room) this.videos = {} + this.soundUrls = opts.soundUrls this.init() } diff --git a/frontend/src/Metamaps/Views/index.js b/frontend/src/Metamaps/Views/index.js index 39104b18..17b592d6 100644 --- a/frontend/src/Metamaps/Views/index.js +++ b/frontend/src/Metamaps/Views/index.js @@ -15,4 +15,6 @@ const Views = { VideoView, Room } + +export { ExploreMaps, ChatView, VideoView, Room } export default Views diff --git a/frontend/src/Metamaps/Visualize.js b/frontend/src/Metamaps/Visualize.js index 720ef598..3760a33a 100644 --- a/frontend/src/Metamaps/Visualize.js +++ b/frontend/src/Metamaps/Visualize.js @@ -17,7 +17,7 @@ const Visualize = { type: 'ForceDirected', // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D" loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created touchDragNode: null, - init: function () { + init: function (serverData) { var self = Visualize if (serverData.VisualizeType) self.type = serverData.VisualizeType diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js index 012af50b..696d1539 100644 --- a/frontend/src/Metamaps/index.js +++ b/frontend/src/Metamaps/index.js @@ -1,5 +1,3 @@ -/* global Metamaps */ - import Account from './Account' import Active from './Active' import Admin from './Admin' @@ -34,7 +32,7 @@ import Util from './Util' import Views from './Views' import Visualize from './Visualize' -Metamaps = window.Metamaps || {} +const Metamaps = window.Metamaps || {} Metamaps.Account = Account Metamaps.Active = Active Metamaps.Admin = Admin @@ -72,6 +70,10 @@ Metamaps.Topic = Topic Metamaps.TopicCard = TopicCard Metamaps.Util = Util Metamaps.Views = Views +Metamaps.Views.ExploreMaps = ExploreMaps +Metamaps.Views.ChatView = ChatView +Metamaps.Views.VideoView = VideoView +Metamaps.Views.Room = Room Metamaps.Visualize = Visualize document.addEventListener('DOMContentLoaded', function () { @@ -90,19 +92,19 @@ document.addEventListener('DOMContentLoaded', function () { if (Metamaps.currentSection === 'explore') { const capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1) - Views.ExploreMaps.setCollection(Metamaps.Maps[capitalize]) + Views.ExploreMaps.setCollection(DataModel.Maps[capitalize]) if (Metamaps.currentPage === 'mapper') { - Views.ExploreMaps.fetchUserThenRender() + ExploreMaps.fetchUserThenRender() } else { - Views.ExploreMaps.render() + ExploreMaps.render() } GlobalUI.showDiv('#explore') } else if (Metamaps.currentSection === '' && Active.Mapper) { - Views.ExploreMaps.setCollection(Metamaps.Maps.Active) - Views.ExploreMaps.render() + ExploreMaps.setCollection(DataModel.Maps.Active) + ExploreMaps.render() GlobalUI.showDiv('#explore') } else if (Active.Map || Active.Topic) { - Metamaps.Loading.show() + Loading.show() JIT.prepareVizData() GlobalUI.showDiv('#infovis') } diff --git a/frontend/src/patched/JIT.js b/frontend/src/patched/JIT.js index a41f1c65..d4c3154a 100644 --- a/frontend/src/patched/JIT.js +++ b/frontend/src/patched/JIT.js @@ -11349,4 +11349,6 @@ $jit.ForceDirected3D.$extend = true; })($jit.ForceDirected3D); +// START METAMAPS CODE export default $jit +// END METAMAPS CODE diff --git a/package.json b/package.json index 940f7c58..e33a6e0a 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "devDependencies": { "babel-eslint": "^6.1.2", "chai": "^3.5.0", + "circular-dependency-plugin": "^2.0.0", "eslint": "^3.5.0", "eslint-config-standard": "^6.2.0", "eslint-plugin-promise": "^2.0.1", diff --git a/webpack.config.js b/webpack.config.js index 644ff002..423616f9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,6 +12,13 @@ if (NODE_ENV === 'production') { plugins.push(new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })) +} else { + // enable this to test for circular dependencies + // const CircularDependencyPlugin = require('circular-dependency-plugin') + // plugins.push(new CircularDependencyPlugin({ + // exclude: /^node_modules\//, + // failOnError: true + // })) } const devtool = NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map' @@ -28,9 +35,7 @@ const config = module.exports = { { test: /\.(js|jsx)?$/, exclude: /node_modules/, - loaders: [ - 'babel-loader?cacheDirectory&retainLines=true' - ] + loader: 'babel-loader?cacheDirectory&retainLines=true' } ] },