more crazy refactoring

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -108,7 +108,7 @@ const ReactApp = {
       mobileTitleClick: (e) => self.openMap && self.openMap.InfoBox.toggleBox(e),
       openInviteLightbox: () => self.openLightbox('invite'),
       serverData: self.serverData,
-      endActiveMap: mapControl.end,
+      endActiveMap: () => mapControl.end(self.openMap),
       launchNewMap: mapControl.launch,
       mapId: self.mapId,
       topicId: self.topicId
@@ -159,7 +159,7 @@ const ReactApp = {
       openTopic: TopicCard.openTopic,
       metacodeSets: self.metacodeSets,
       updateTopic: (topic, obj) => topic.save(obj),
-      onTopicFollow: Topic.onTopicFollow // todo
+      onTopicFollow: () => {} // Topic.onTopicFollow // todo
     }
   },
   getTopicProps: function() {

frontend/src/Metamaps/GlobalUI/Search.js

@@ -1,4 +1,4 @@
-ReactApp.currentUserReactApp.currentUser/* global $, Hogan, Bloodhound, CanvasLoader */
+/* global $, Hogan, Bloodhound, CanvasLoader */
 
 import { browserHistory } from 'react-router'
 

frontend/src/Metamaps/Map/ChatView.js

@@ -4,6 +4,7 @@ import Backbone from 'backbone'
 import { Howl } from 'howler'
 
 import ReactApp from '../GlobalUI/ReactApp'
+import MessageCollection from '../DataModel/MessageCollection'
 
 const ChatView = (map) => {
 const toExport =  {
@@ -12,19 +13,6 @@ const toExport =  {
   messages: new Backbone.Collection(),
   conversationLive: false,
   isParticipating: false,
-  init: function(urls) {
-    const self = toExport
-    self.sound = new Howl({
-      src: urls,
-      sprite: {
-        joinmap: [0, 561],
-        leavemap: [1000, 592],
-        receivechat: [2000, 318],
-        sendchat: [3000, 296],
-        sessioninvite: [4000, 5393, true]
-      }
-    })
-  },
   setNewMap: function() {
     const self = toExport
     self.unreadMessages = 0
@@ -118,13 +106,13 @@ const toExport =  {
   addMessage: (message, isInitial, wasMe) => {
     const self = toExport
     if (!isInitial && !self.isOpen) self.unreadMessages += 1
-    if (!wasMe && !isInitial && self.alertSound) self.sound.play('receivechat')
+    if (!wasMe && !isInitial && self.alertSound) ChatView.sound.play('receivechat')
     self.messages.add(message)
     if (!isInitial && self.isOpen) self.render()
   },
   sendChatMessage: message => {
     var self = toExport
-    if (toExport.alertSound) toExport.sound.play('sendchat')
+    if (toExport.alertSound) ChatView.sound.play('sendchat')
     var m = new DataModel.Message({
       message: message.message,
       resource_id: map.Active.Map.id,
@@ -132,7 +120,7 @@ const toExport =  {
     })
     m.save(null, {
       success: function(model, response) {
-        self.addMessages(new DataModel.MessageCollection(model), false, true)
+        self.addMessages(new MessageCollection(model), false, true)
       },
       error: function(model, response) {
         console.log('error!', response)
@@ -150,7 +138,6 @@ const toExport =  {
 }
 return toExport
 }
-
 /**
  * @class
  * @static
@@ -165,5 +152,17 @@ ChatView.events = {
   videosOff: 'ChatView:videosOff',
   videosOn: 'ChatView:videosOn'
 }
+ChatView.init = function(urls) {
+  ChatView.sound = new Howl({
+    src: urls,
+    sprite: {
+      joinmap: [0, 561],
+      leavemap: [1000, 592],
+      receivechat: [2000, 318],
+      sendchat: [3000, 296],
+      sessioninvite: [4000, 5393, true]
+    }
+  })
+}
 
 export default ChatView

frontend/src/Metamaps/Map/Create.js

@@ -266,7 +266,7 @@ const toExport = {
       })
       toExport.newTopic.beingCreated = true
       toExport.newTopic.name = ''
-      //Map.setHasLearnedTopicCreation(true)
+      map.Map.setHasLearnedTopicCreation(true)
     },
     hide: function(force) {
       if (force || !toExport.newTopic.pinned) {
@@ -277,7 +277,7 @@ const toExport = {
         toExport.newTopic.pinned = false
       }
       if (map.DataModel.Topics.length === 0) {
-        Map.setHasLearnedTopicCreation(false)
+        map.Map.setHasLearnedTopicCreation(false)
       }
       toExport.newTopic.beingCreated = false
     },

frontend/src/Metamaps/Map/Filter.js

@@ -6,7 +6,7 @@ import GlobalUI, { ReactApp } from '../GlobalUI'
 import Settings from '../Settings'
 
 const Filter = (map) => {
-const toExport = {
+  const toExport = {
     dataForPresentation: {
       metacodes: {},
       mappers: {},
@@ -45,7 +45,7 @@ const toExport = {
       // the first option enables us to accept
       // ['Topics', 'Synapses'] as 'collection'
       if (typeof collection === 'object') {
-      DataModel[collection[0]].each(function(model) {
+        map.DataModel[collection[0]].each(function(model) {
           var prop = model.get(propertyToCheck)
           if (prop !== null) {
             prop = prop.toString()
@@ -54,7 +54,7 @@ const toExport = {
             }
           }
         })
-      DataModel[collection[1]].each(function(model) {
+        map.DataModel[collection[1]].each(function(model) {
           var prop = model.get(propertyToCheck)
           if (prop !== null) {
             prop = prop.toString()
@@ -64,7 +64,7 @@ const toExport = {
           }
         })
       } else if (typeof collection === 'string') {
-      DataModel[collection].each(function(model) {
+        map.DataModel[collection].each(function(model) {
           var prop = model.get(propertyToCheck)
           if (prop !== null) {
             prop = prop.toString()
@@ -82,8 +82,8 @@ const toExport = {
         delete self.dataForPresentation[filtersToUse][identifier]
       })
       _.each(added, function(identifier) {
-      const model = DataModel[correlatedModel].get(identifier) ||
+        const model = map.DataModel[correlatedModel].get(identifier) ||
-      DataModel[correlatedModel].find(function(m) {
+        map.DataModel[correlatedModel].find(function(m) {
           return m.get(propertyToCheck) === identifier
         })
         self.dataForPresentation[filtersToUse][identifier] = model.prepareDataForFilter()
@@ -272,8 +272,8 @@ const toExport = {
         duration: 200
       })
     }
-}
+  }
-return toExport
+  return toExport
 }
 
 export default Filter

frontend/src/Metamaps/Map/InfoBox.js

@@ -3,11 +3,12 @@
 import outdent from 'outdent'
 import { browserHistory } from 'react-router'
 
+import DataModel from '../DataModel'
 import GlobalUI, { ReactApp } from '../GlobalUI'
 import Util from '../Util'
 
 const InfoBox = (map) => {
-const toExport = {
+  const toExport = {
     isOpen: false,
     selectingPermission: false,
     changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, and the permission of all the topics and synapses you have authority to change will change as well.</div>",
@@ -39,21 +40,21 @@ const toExport = {
 
       self.updateThumbnail = updateThumbnail
 
-    $('.maptoExport').click(function(event) {
+      $('.mapInfoBox').click(function(event) {
         event.stopPropagation()
       })
       $('body').click(self.close)
 
       self.attachEventListeners()
 
-    self.generateBoxHTML = Hogan.compile($('#maptoExportTemplate').html())
+      self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
 
       self.userImageUrl = serverData['user.png']
 
       var querystring = window.location.search.replace(/^\?/, '')
       if (querystring === 'new') {
         self.open()
-      $('.maptoExport').addClass('mapRequestTitle')
+        $('.mapInfoBox').addClass('mapRequestTitle')
         $('#mapInfoName').trigger('click')
         $('#mapInfoName textarea').focus()
         $('#mapInfoName textarea').select()
@@ -77,7 +78,7 @@ const toExport = {
     close: function() {
       var self = toExport
       $('.mapInfoIcon div').removeClass('hide')
-    $('.maptoExport').fadeOut(200, function() {
+      $('.mapInfoBox').fadeOut(200, function() {
         self.isOpen = false
         self.hidePermissionSelect()
         $('.mapContributors .tip').hide()
@@ -86,17 +87,17 @@ const toExport = {
     load: function() {
       var self = toExport
 
-    var map = map.Active.Map
+      var m = map.Active.Map
 
-    var obj = map.pick('permission', 'topic_count', 'synapse_count')
+      var obj = m.pick('permission', 'topic_count', 'synapse_count')
 
-    var isCreator = map.authorizePermissionChange(map.Active.Mapper)
+      var isCreator = m.authorizePermissionChange(map.Active.Mapper)
-    var canEdit = map.authorizeToEdit(map.Active.Mapper)
+      var canEdit = m.authorizeToEdit(map.Active.Mapper)
-    var relevantPeople = map.get('permission') === 'commons' ? map.DataModel.Mappers : map.DataModel.Collaborators
+      var relevantPeople = m.get('permission') === 'commons' ? map.DataModel.Mappers : map.DataModel.Collaborators
-    var shareable = map.get('permission') !== 'private'
+      var shareable = m.get('permission') !== 'private'
 
-    obj['name'] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get('name')}) : map.get('name')
+      obj['name'] = canEdit ? Hogan.compile(self.nameHTML).render({id: m.id, name: m.get('name')}) : m.get('name')
-    obj['desc'] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get('desc')}) : map.get('desc')
+      obj['desc'] = canEdit ? Hogan.compile(self.descHTML).render({id: m.id, desc: m.get('desc')}) : m.get('desc')
       obj['map_creator_tip'] = isCreator ? self.changePermissionText : ''
 
       obj['contributor_count'] = relevantPeople.length
@@ -105,10 +106,11 @@ const toExport = {
       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')
+      obj['user_name'] = isCreator ? 'You' : m.get('user_name')
-    obj['created_at'] = map.get('created_at_clean')
+      obj['created_at'] = m.get('created_at_clean')
-    obj['updated_at'] = map.get('updated_at_clean')
+      obj['updated_at'] = m.get('updated_at_clean')
 
+      self.generateBoxHTML = self.generateBoxHTML || Hogan.compile($('#mapInfoBoxTemplate').html())
       self.html = self.generateBoxHTML.render(obj)
       ReactApp.render()
       self.attachEventListeners()
@@ -365,25 +367,25 @@ const toExport = {
       confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.'
 
       var doIt = window.confirm(confirmString)
-    var map = map.Active.Map
+      var m = map.Active.Map
       var mapper = map.Active.Mapper
       var authorized = map.authorizePermissionChange(mapper)
 
       if (doIt && authorized) {
         toExport.close()
-      DataModel.Maps.map.Active.remove(map)
+        DataModel.Maps.map.Active.remove(m)
-      DataModel.Maps.Featured.remove(map)
+        DataModel.Maps.Featured.remove(m)
-      DataModel.Maps.Mine.remove(map)
+        DataModel.Maps.Mine.remove(m)
-      DataModel.Maps.Shared.remove(map)
+        DataModel.Maps.Shared.remove(m)
-      map.destroy()
+        m.destroy()
         browserHistory.push('/')
         GlobalUI.notifyUser('Map eliminated')
       } else if (!authorized) {
         window.alert("Hey now. We can't just go around willy nilly deleting other people's maps now can we? Run off and find something constructive to do, eh?")
       }
     }
-}
+  }
-return toExport
+  return toExport
 }
 
 export default InfoBox

frontend/src/Metamaps/Map/JIT.js

@@ -17,8 +17,7 @@ import Util from '../Util'
 let panningInt
 
 const JIT = (map) => {
-
+  const toExport = {
-return {
     tempInit: false,
     tempNode: null,
     tempNode2: null,
@@ -26,13 +25,6 @@ return {
     dragFlag: 0,
     dragTolerance: 0,
     virtualPointer: {},
-
-  events: {
-    topicDrag: 'Metamaps:JIT:events:topicDrag',
-    pan: 'Metamaps:JIT:events:pan',
-    zoom: 'Metamaps:JIT:events:zoom',
-    animationDone: 'Metamaps:JIT:events:animationDone'
-  },
     vizData: [], // contains the visualization-compatible graph
     /**
      * convert our topic JSON into something JIT can use
@@ -90,7 +82,7 @@ return {
       return [jitReady, synapsesToRemove]
     },
     prepareVizData: function() {
-    const self = JIT
+      const self = toExport
       let mapping
       self.vizData = []
       map.Visualize.loadLater = false
@@ -103,10 +95,10 @@ return {
         if (map.DataModel.Mappings) map.DataModel.Mappings.remove(mapping)
       })
       if (self.vizData.length === 0) {
-      Map.setHasLearnedTopicCreation(false)
+        map.Map.setHasLearnedTopicCreation(false)
         map.Visualize.loadLater = true
       } else {
-      Map.setHasLearnedTopicCreation(true)
+        map.Map.setHasLearnedTopicCreation(true)
       }
       map.Visualize.render()
     }, // prepareVizData
@@ -239,7 +231,7 @@ return {
         duration: 800,
         onComplete: function() {
           map.Visualize.mGraph.busy = false
-        $(document).trigger(map.JIT.events.animationDone)
+          $(document).trigger(JIT.events.animationDone)
         }
       },
       animateFDLayout: {
@@ -431,7 +423,7 @@ return {
 
             // if the topic has a link, draw a small image to indicate that
             const hasLink = topic && topic.get('link') !== '' && topic.get('link') !== null
-          const linkImage = map.JIT.topicLinkImage
+            const linkImage = JIT.topicLinkImage
             const linkImageLoaded = linkImage.complete ||
             (typeof linkImage.naturalWidth !== 'undefined' &&
             linkImage.naturalWidth !== 0)
@@ -441,7 +433,7 @@ return {
 
             // if the topic has a desc, draw a small image to indicate that
             const hasDesc = topic && topic.get('desc') !== '' && topic.get('desc') !== null
-          const descImage = map.JIT.topicDescImage
+            const descImage = JIT.topicDescImage
             const descImageLoaded = descImage.complete ||
             (typeof descImage.naturalWidth !== 'undefined' &&
             descImage.naturalWidth !== 0)
@@ -643,7 +635,7 @@ return {
       map.Visualize.mGraph.plot()
     }, // onMouseLeave
     onMouseMoveHandler: function(_node, eventInfo, e) {
-    const self = JIT
+      const self = toExport
 
       if (map.Visualize.mGraph.busy) return
 
@@ -693,7 +685,7 @@ return {
       map.Control.deselectAllNodes()
     }, // escKeyHandler
     onDragMoveTopicHandler: function(node, eventInfo, e) {
-    var self = JIT
+      var self = toExport
 
       var authorized = map.Active.Map && map.Active.Map.authorizeToEdit(map.Active.Mapper)
 
@@ -883,7 +875,7 @@ return {
       map.Visualize.mGraph.plot()
     }, // onDragCancelHandler
     onDragEndTopicHandler: function(node, eventInfo, e) {
-    const self = JIT
+      const self = toExport
       const midpoint = {}
       let pixelPos
       let mapping
@@ -1039,7 +1031,7 @@ return {
       } // for
 
       if (map.Active.Map) {
-      $(document).trigger(map.JIT.events.topicDrag, [positionsToSend])
+        $(document).trigger(JIT.events.topicDrag, [positionsToSend])
       }
     },
 
@@ -1254,7 +1246,7 @@ return {
     selectNodeOnClickHandler: function(node, e) {
       if (map.Visualize.mGraph.busy) return
 
-    const self = JIT
+      const self = toExport
 
       // Copy topic title to clipboard
       if (e.button === 1 && e.ctrlKey) clipboard.copy(node.name)
@@ -1551,7 +1543,7 @@ return {
     selectEdgeOnClickHandler: function(adj, e) {
       if (map.Visualize.mGraph.busy) return
 
-    const self = JIT
+      const self = toExport
       var synapseText = adj.data.$synapses[0].attributes.desc
       // Copy synapse label to clipboard
       if (e.button === 1 && e.ctrlKey && synapseText !== '') clipboard.copy(synapseText)
@@ -1711,7 +1703,7 @@ return {
 
       function myTimer() {
         map.Visualize.mGraph.canvas.translate(xVelocity * easing * 1 / sx, yVelocity * easing * 1 / sy)
-      $(document).trigger(map.JIT.events.pan)
+        $(document).trigger(JIT.events.pan)
         easing = easing * 0.75
 
         if (easing < 0.1) window.clearInterval(panningInt)
@@ -1759,7 +1751,7 @@ return {
       ctx.stroke()
     }, // renderMidArrow
     renderEdgeArrows: function(edgeHelper, adj, synapse, canvas) {
-    const self = JIT
+      const self = toExport
 
       const directionCat = synapse.get('category')
       const direction = synapse.getDirection()
@@ -1813,11 +1805,11 @@ return {
     }, // renderEdgeArrows
     zoomIn: function(event) {
       map.Visualize.mGraph.canvas.scale(1.25, 1.25)
-    $(document).trigger(map.JIT.events.zoom, [event])
+      $(document).trigger(JIT.events.zoom, [event])
     },
     zoomOut: function(event) {
       map.Visualize.mGraph.canvas.scale(0.8, 0.8)
-    $(document).trigger(map.JIT.events.zoom, [event])
+      $(document).trigger(JIT.events.zoom, [event])
     },
     centerMap: function(canvas) {
       const offsetScale = canvas.scaleOffsetX
@@ -1862,7 +1854,7 @@ return {
       const cogY = (sY + eY) / 2
 
       canvas.translate(-1 * cogX, -1 * cogY)
-    $(document).trigger(map.JIT.events.zoom, [event])
+      $(document).trigger(JIT.events.zoom, [event])
 
       map.Mouse.boxStartCoordinates = false
       map.Mouse.boxEndCoordinates = false
@@ -1943,25 +1935,32 @@ return {
           canvas.scale(scaleMultiplier, scaleMultiplier)
         }
 
-      $(document).trigger(map.JIT.events.zoom, [event])
+        $(document).trigger(JIT.events.zoom, [event])
       } else if (nodes.length === 1) {
         nodes.forEach(function(n) {
           const x = n.pos.x
           const y = n.pos.y
 
           canvas.translate(-1 * x, -1 * y)
-        $(document).trigger(map.JIT.events.zoom, [event])
+          $(document).trigger(JIT.events.zoom, [event])
         })
       }
     }
+  }
+  return toExport
 }
+JIT.events = {
+  topicDrag: 'Metamaps:JIT:events:topicDrag',
+  pan: 'Metamaps:JIT:events:pan',
+  zoom: 'Metamaps:JIT:events:zoom',
+  animationDone: 'Metamaps:JIT:events:animationDone'
 }
-map.JIT.init = function(serverData) {
+JIT.init = function(serverData) {
-  map.JIT.topicDescImage = new Image()
+  JIT.topicDescImage = new Image()
-  map.JIT.topicDescImage.src = serverData['topic_description_signifier.png']
+  JIT.topicDescImage.src = serverData['topic_description_signifier.png']
 
-  map.JIT.topicLinkImage = new Image()
+  JIT.topicLinkImage = new Image()
-  map.JIT.topicLinkImage.src = serverData['topic_link_signifier.png']
+  JIT.topicLinkImage.src = serverData['topic_link_signifier.png']
 }
 
 export default JIT

frontend/src/Metamaps/Map/Realtime/index.js

@@ -3,8 +3,12 @@
 import SimpleWebRTC from 'simplewebrtc'
 import SocketIoConnection from 'simplewebrtc/socketioconnection'
 
+import MessageCollection from '../../DataModel/MessageCollection'
 import Util from '../../Util'
 import Views from '../Views'
+import ChatView from '../ChatView'
+import { ReactApp } from '../../GlobalUI'
+import JIT from '../JIT'
 
 import {
   JUNTO_UPDATED,
@@ -25,7 +29,6 @@ import {
 } from './events'
 
 import {
-  juntoUpdated,
   invitedToCall,
   invitedToJoin,
   callAccepted,
@@ -59,49 +62,63 @@ import {
 } from './sendable'
 
 const Realtime = (map) => {
-const toExport = {
+  const toExport = {
     videoId: 'video-wrapper',
-  socket: null,
     webrtc: null,
     readyToCall: false,
     mappersOnMap: {},
-  disconnected: false,
     chatOpen: false,
     soundId: null,
     broadcastingStatus: false,
     inConversation: false,
     localVideo: null,
-  'junto_spinner_darkgrey.gif': '',
+    onSocketConnect: () => {},
-  init: function(serverData) {
+    startActiveMap: function() {
       var self = toExport
-
+        if (map.Active.Map.authorizeToEdit(map.Active.Mapper)) {
           self.addJuntoListeners()
-
+          if (Realtime.socket && !Realtime.socket.disconnected) self.onSocketConnect = self._onSocketConnect
-    self.socket = new SocketIoConnection({
+          else self._onSocketConnect()
-      url: serverData['REALTIME_SERVER'],
-      socketio: {
-        // don't poll forever if in development
-        reconnectionAttempts: serverData.RAILS_ENV === 'development' ? 5 : Infinity
         }
-    })
-    self['junto_spinner_darkgrey.gif'] = serverData['junto_spinner_darkgrey.gif']
-
-    self.socket.on('connect', function() {
-      console.log('connected')
-      if (map.Active.Map && map.Active.Mapper && map.Active.Map.authorizeToEdit(map.Active.Mapper)) {
-        self.checkForCall()
-        self.joinMap()
-      }
-      subscribeToEvents(self, self.socket)
-      self.disconnected = false
-    })
-    self.socket.on('disconnect', function() {
-      self.disconnected = true
-    })
-
         if (map.Active.Mapper) {
+          self.setupChat() // chat can happen on public maps too
+          map.Cable.subscribeToMap(map.Active.Map.id) // people with viewing rights can still see live updates
+        }
+    },
+    endActiveMap: function() {
+      var self = toExport
+      $(document).off('.map')
+      // leave the appropriate rooms to leave
+      if (self.inConversation) self.leaveCall()
+      self.leaveMap()
+      $('.collabCompass').remove()
+      if (self.room) self.room.leave()
+      if (!Realtime.socket.disconnected) self.unsubscribeFromEvents()
+      map.Cable.unsubscribeFromMap()
+    },
+    _onSocketConnect: function() {
+      console.log('testing')
+      const self = toExport
+      const sendables = [
+        ['joinMap', joinMap],
+        ['leaveMap', leaveMap],
+        ['checkForCall', checkForCall],
+        ['acceptCall', acceptCall],
+        ['denyCall', denyCall],
+        ['denyInvite', denyInvite],
+        ['inviteToJoin', inviteToJoin],
+        ['inviteACall', inviteACall],
+        ['joinCall', joinCall],
+        ['leaveCall', leaveCall],
+        ['sendMapperInfo', sendMapperInfo],
+        ['sendCoords', sendCoords],
+        ['dragTopic', dragTopic]
+      ]
+      sendables.forEach(sendable => {
+        toExport[sendable[0]] = sendable[1](Realtime.socket, toExport, map)
+      })
       self.webrtc = new SimpleWebRTC({
-        connection: self.socket,
+        connection: Realtime.socket,
         localVideoEl: self.videoId,
         remoteVideosEl: '',
         debug: true,
@@ -127,7 +144,6 @@ const toExport = {
         console.log('remote ice failure', peer)
         // remote ice failure
       })
-
       var $video = $('<video></video>').attr('id', self.videoId)
       self.localVideo = {
         $video: $video,
@@ -136,21 +152,21 @@ const toExport = {
           avatar: map.Active.Mapper ? map.Active.Mapper.get('image') : ''
         })
       }
-
       self.room = new Views.Room({
         webrtc: self.webrtc,
-        socket: self.socket,
+        room: 'map-' + map.Active.Map.id,
-        room: 'global',
         $video: self.localVideo.$video,
         myVideoView: self.localVideo.view,
         config: { DOUBLE_CLICK_TOLERANCE: 200 }
       })
       self.room.videoAdded(self.handleVideoAdded)
-    } // if map.Active.Mapper
+      self.subscribeToEvents()
+      self.turnOn()
+      self.checkForCall()
+      self.joinMap()
     },
     addJuntoListeners: function() {
       var self = toExport
-
       $(document).on(ChatView.events.openTray, function() {
         $('.main').addClass('compressed')
         self.chatOpen = true
@@ -174,32 +190,9 @@ const toExport = {
         $('#wrapper').addClass('hideCursors')
       })
     },
-  startActiveMap: function() {
-    var self = toExport
-    if (map.Active.Map && map.Active.Mapper) {
-      if (map.Active.Map.authorizeToEdit(map.Active.Mapper)) {
-        self.turnOn()
-        self.checkForCall()
-        self.joinMap()
-      }
-      self.setupChat() // chat can happen on public maps too
-      map.Cable.subscribeToMap(map.Active.Map.id) // people with edit rights can still see live updates
-    }
-  },
-  endActiveMap: function() {
-    var self = toExport
-    $(document).off('.map')
-    // leave the appropriate rooms to leave
-    if (self.inConversation) self.leaveCall()
-    self.leaveMap()
-    $('.collabCompass').remove()
-    if (self.room) self.room.leave()
-    map.Cable.unsubscribeFromMap()
-  },
     turnOn: function(notify) {
       var self = toExport
       $('.collabCompass').show()
-    self.room.room = 'map-' + map.Active.Map.id
       self.activeMapper = {
         id: map.Active.Mapper.id,
         name: map.Active.Mapper.get('name'),
@@ -217,13 +210,13 @@ const toExport = {
       const self = toExport
       map.ChatView.setNewMap()
       map.ChatView.addParticipant(self.activeMapper)
-    map.ChatView.addMessages(new DataModel.MessageCollection(map.DataModel.Messages), true)
+      map.ChatView.addMessages(new MessageCollection(map.DataModel.Messages), true)
     },
     setupLocalEvents: function() {
       var self = toExport
       // local event listeners that trigger events
-    $(document).on(map.JIT.events.zoom + '.map', self.positionPeerIcons)
+      $(document).on(JIT.events.zoom + '.map', self.positionPeerIcons)
-    $(document).on(map.JIT.events.pan + '.map', self.positionPeerIcons)
+      $(document).on(JIT.events.pan + '.map', self.positionPeerIcons)
       $(document).on('mousemove.map', function(event) {
         var pixels = {
           x: event.pageX,
@@ -232,10 +225,46 @@ const toExport = {
         var coords = Util.pixelsToCoords(map.Visualize.mGraph, pixels)
         self.sendCoords(coords)
       })
-    $(document).on(map.JIT.events.topicDrag + '.map', function(event, positions) {
+      $(document).on(JIT.events.topicDrag + '.map', function(event, positions) {
         self.dragTopic(positions)
       })
     },
+    subscribeToEvents: function() {
+      // todo scope these event listeners to map
+      const socket = Realtime.socket
+      socket.on(INVITED_TO_CALL, invitedToCall(toExport, map))
+      socket.on(INVITED_TO_JOIN, invitedToJoin(toExport, map))
+      socket.on(CALL_ACCEPTED, callAccepted(toExport, map))
+      socket.on(CALL_DENIED, callDenied(toExport, map))
+      socket.on(INVITE_DENIED, inviteDenied(toExport, map))
+      socket.on(CALL_IN_PROGRESS, callInProgress(toExport, map))
+      socket.on(CALL_STARTED, callStarted(toExport, map))
+      socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(toExport, map))
+      socket.on(MAPPER_JOINED_CALL, mapperJoinedCall(toExport, map))
+      socket.on(MAPPER_LEFT_CALL, mapperLeftCall(toExport, map))
+      socket.on(PEER_COORDS_UPDATED, peerCoordsUpdated(toExport, map))
+      socket.on(NEW_MAPPER, newMapper(toExport, map))
+      socket.on(LOST_MAPPER, lostMapper(toExport, map))
+      socket.on(TOPIC_DRAGGED, topicDragged(toExport, map))
+    },
+    unsubscribeFromEvents: function() {
+      // todo scope these event listeners to map
+      const socket = Realtime.socket
+      socket.off(INVITED_TO_JOIN)
+      socket.off(CALL_ACCEPTED)
+      socket.off(INVITED_TO_CALL)
+      socket.off(CALL_DENIED)
+      socket.off(INVITE_DENIED)
+      socket.off(CALL_IN_PROGRESS)
+      socket.off(CALL_STARTED)
+      socket.off(MAPPER_LIST_UPDATED)
+      socket.off(MAPPER_JOINED_CALL)
+      socket.off(MAPPER_LEFT_CALL)
+      socket.off(PEER_COORDS_UPDATED)
+      socket.off(NEW_MAPPER)
+      socket.off(LOST_MAPPER)
+      socket.off(TOPIC_DRAGGED)
+    },
     countOthersInConversation: function() {
       var self = toExport
       var count = 0
@@ -382,45 +411,32 @@ const toExport = {
 
       return {x: xLimit, y: yLimit}
     }
+  }
+  return toExport
 }
 
-const sendables = [
+Realtime.init = function(serverData) {
-  ['joinMap', joinMap],
+  var self = Realtime
-  ['leaveMap', leaveMap],
+  self.socket = new SocketIoConnection({
-  ['checkForCall', checkForCall],
+    url: serverData['REALTIME_SERVER'],
-  ['acceptCall', acceptCall],
+    socketio: {
-  ['denyCall', denyCall],
+      // don't poll forever if in development
-  ['denyInvite', denyInvite],
+      reconnectionAttempts: serverData.RAILS_ENV === 'development' ? 5 : Infinity
-  ['inviteToJoin', inviteToJoin],
+    }
-  ['inviteACall', inviteACall],
+  })
-  ['joinCall', joinCall],
+  self['junto_spinner_darkgrey.gif'] = serverData['junto_spinner_darkgrey.gif']
-  ['leaveCall', leaveCall],
+  self.socket.on('connect', function() {
-  ['sendMapperInfo', sendMapperInfo],
+    console.log('connected')
-  ['sendCoords', sendCoords],
+    self.socket.on(JUNTO_UPDATED, (state) => {
-  ['dragTopic', dragTopic]
+      ReactApp.juntoState = state
-]
+      ReactApp.render()
-sendables.forEach(sendable => {
+    })
-  toExport[sendable[0]] = sendable[1](toExport, map)
+    self.disconnected = false
-})
+    ReactApp.openMap && ReactApp.openMap.Realtime.onSocketConnect()
-
+  })
-const subscribeToEvents = (toExport, socket) => {
+  self.socket.on('disconnect', function() {
-  socket.on(JUNTO_UPDATED, juntoUpdated(toExport, map))
+    self.disconnected = true
-  socket.on(INVITED_TO_CALL, invitedToCall(toExport, map))
+  })
-  socket.on(INVITED_TO_JOIN, invitedToJoin(toExport, map))
-  socket.on(CALL_ACCEPTED, callAccepted(toExport, map))
-  socket.on(CALL_DENIED, callDenied(toExport, map))
-  socket.on(INVITE_DENIED, inviteDenied(toExport, map))
-  socket.on(CALL_IN_PROGRESS, callInProgress(toExport, map))
-  socket.on(CALL_STARTED, callStarted(toExport, map))
-  socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(toExport, map))
-  socket.on(MAPPER_JOINED_CALL, mapperJoinedCall(toExport, map))
-  socket.on(MAPPER_LEFT_CALL, mapperLeftCall(toExport, map))
-  socket.on(PEER_COORDS_UPDATED, peerCoordsUpdated(toExport, map))
-  socket.on(NEW_MAPPER, newMapper(toExport, map))
-  socket.on(LOST_MAPPER, lostMapper(toExport, map))
-  socket.on(TOPIC_DRAGGED, topicDragged(toExport, map))
-}
-return toExport
 }
 
 

frontend/src/Metamaps/Map/Realtime/receivable.js

@@ -4,16 +4,9 @@
 everthing in this file happens as a result of websocket events
 */
 
-import { JUNTO_UPDATED } from './events'
+import GlobalUI from '../../GlobalUI'
-
-import GlobalUI, { ReactApp } from '../../GlobalUI'
 import Util from '../../Util'
 
-export const juntoUpdated = (self, map) => state => {
-  ReactApp.juntoState = state
-  $(document).trigger(JUNTO_UPDATED)
-}
-
 /* All the following events are received through the nodejs realtime server
     and are done this way because they are transient data, not persisted to the server */
 export const topicDragged = (self, map) => positions => {

frontend/src/Metamaps/Map/Realtime/sendable.js

@@ -18,8 +18,8 @@ import {
   DRAG_TOPIC
 } from './events'
 
-export const joinMap = (self, map) => () => {
+export const joinMap = (socket, self, map) => () => {
-  self.socket.emit(JOIN_MAP, {
+  socket.emit(JOIN_MAP, {
     userid: map.Active.Mapper.id,
     username: map.Active.Mapper.get('name'),
     avatar: map.Active.Mapper.get('image'),
@@ -28,15 +28,15 @@ export const joinMap = (self, map) => () => {
   })
 }
 
-export const leaveMap = (self, map) => () => {
+export const leaveMap = (socket, self, map) => () => {
-  self.socket.emit(LEAVE_MAP)
+  socket.emit(LEAVE_MAP)
 }
 
-export const checkForCall = (self, map) => () => {
+export const checkForCall = (socket, self, map) => () => {
-  self.socket.emit(CHECK_FOR_CALL, { room: self.room.room, mapid: map.Active.Map.id })
+  socket.emit(CHECK_FOR_CALL, { room: self.room.room, mapid: map.Active.Map.id })
 }
 
-export const sendMapperInfo = (self, map) => userid => {
+export const sendMapperInfo = (socket, self, map) => userid => {
   // send this new mapper back your details, and the awareness that you've loaded the map
   var update = {
     userToNotify: userid,
@@ -46,10 +46,10 @@ export const sendMapperInfo = (self, map) => userid => {
     userinconversation: self.inConversation,
     mapid: map.Active.Map.id
   }
-  self.socket.emit(SEND_MAPPER_INFO, update)
+  socket.emit(SEND_MAPPER_INFO, update)
 }
 
-export const joinCall = (self, map) => () => {
+export const joinCall = (socket, self, map) => () => {
   self.webrtc.off('readyToCall')
   self.webrtc.once('readyToCall', function() {
     self.videoInitialized = true
@@ -64,7 +64,7 @@ export const joinCall = (self, map) => () => {
     map.ChatView.conversationInProgress(true)
   })
   self.inConversation = true
-  self.socket.emit(JOIN_CALL, {
+  socket.emit(JOIN_CALL, {
     mapid: map.Active.Map.id,
     id: map.Active.Mapper.id
   })
@@ -73,8 +73,8 @@ export const joinCall = (self, map) => () => {
   map.ChatView.mapperJoinedCall(map.Active.Mapper.id)
 }
 
-export const leaveCall = (self, map) => () => {
+export const leaveCall = (socket, self, map) => () => {
-  self.socket.emit(LEAVE_CALL, {
+  socket.emit(LEAVE_CALL, {
     mapid: map.Active.Map.id,
     id: map.Active.Mapper.id
   })
@@ -92,9 +92,9 @@ export const leaveCall = (self, map) => () => {
   }
 }
 
-export const acceptCall = (self, map) => userid => {
+export const acceptCall = (socket, self, map) => userid => {
   map.ChatView.sound.stop(self.soundId)
-  self.socket.emit(ACCEPT_CALL, {
+  socket.emit(ACCEPT_CALL, {
     mapid: map.Active.Map.id,
     invited: map.Active.Mapper.id,
     inviter: userid
@@ -104,9 +104,9 @@ export const acceptCall = (self, map) => userid => {
   GlobalUI.clearNotify()
 }
 
-export const denyCall = (self, map) => userid => {
+export const denyCall = (socket, self, map) => userid => {
   map.ChatView.sound.stop(self.soundId)
-  self.socket.emit(DENY_CALL, {
+  socket.emit(DENY_CALL, {
     mapid: map.Active.Map.id,
     invited: map.Active.Mapper.id,
     inviter: userid
@@ -114,9 +114,9 @@ export const denyCall = (self, map) => userid => {
   GlobalUI.clearNotify()
 }
 
-export const denyInvite = (self, map) => userid => {
+export const denyInvite = (socket, self, map) => userid => {
   map.ChatView.sound.stop(self.soundId)
-  self.socket.emit(DENY_INVITE, {
+  socket.emit(DENY_INVITE, {
     mapid: map.Active.Map.id,
     invited: map.Active.Mapper.id,
     inviter: userid
@@ -124,8 +124,8 @@ export const denyInvite = (self, map) => userid => {
   GlobalUI.clearNotify()
 }
 
-export const inviteACall = (self, map) => userid => {
+export const inviteACall = (socket, self, map) => userid => {
-  self.socket.emit(INVITE_A_CALL, {
+  socket.emit(INVITE_A_CALL, {
     mapid: map.Active.Map.id,
     inviter: map.Active.Mapper.id,
     invited: userid
@@ -134,8 +134,8 @@ export const inviteACall = (self, map) => userid => {
   GlobalUI.clearNotify()
 }
 
-export const inviteToJoin = (self, map) => userid => {
+export const inviteToJoin = (socket, self, map) => userid => {
-  self.socket.emit(INVITE_TO_JOIN, {
+  socket.emit(INVITE_TO_JOIN, {
     mapid: map.Active.Map.id,
     inviter: map.Active.Mapper.id,
     invited: userid
@@ -143,22 +143,22 @@ export const inviteToJoin = (self, map) => userid => {
   map.ChatView.invitationPending(userid)
 }
 
-export const sendCoords = (self, map) => coords => {
+export const sendCoords = (socket, self, map) => coords => {
-  var map = map.Active.Map
+  var m = map.Active.Map
   var mapper = map.Active.Mapper
-  if (map && map.authorizeToEdit(mapper)) {
+  if (m && m.authorizeToEdit(mapper)) {
     var update = {
       usercoords: coords,
       userid: map.Active.Mapper.id,
-      mapid: map.Active.Map.id
+      mapid: m.id
     }
-    self.socket.emit(SEND_COORDS, update)
+    socket.emit(SEND_COORDS, update)
   }
 }
 
-export const dragTopic = (self, map) => positions => {
+export const dragTopic = (socket, self, map) => positions => {
   if (map.Active.Map) {
     positions.mapid = map.Active.Map.id
-    self.socket.emit(DRAG_TOPIC, positions)
+    socket.emit(DRAG_TOPIC, positions)
   }
 }

frontend/src/Metamaps/Map/Views/Room.js

@@ -7,7 +7,6 @@ import VideoView from './VideoView'
 
 const Room = function(opts = {}) {
   this.isActiveRoom = false
-  this.socket = opts.socket
   this.webrtc = opts.webrtc
   this.room = opts.room
   this.config = opts.config

frontend/src/Metamaps/Map/Views/index.js

@@ -2,13 +2,8 @@
 
 import VideoView from './VideoView'
 import Room from './Room'
-import { JUNTO_UPDATED } from '../Realtime/events'
 
 const Views = {
-  init: (serverData) => {
-    $(document).on(JUNTO_UPDATED, () => ExploreMaps.render())
-    //map.ChatView.init([serverData['sounds/MM_sounds.mp3'], serverData['sounds/MM_sounds.ogg']])
-  },
   VideoView,
   Room
 }

frontend/src/Metamaps/Map/index.js

@@ -91,8 +91,8 @@ const mapControl = {
       newMap.Active.Mapper = ReactApp.currentUser
       newMap.DataModel.Mappers = new MapperCollection(data.mappers)
       newMap.DataModel.Collaborators = new MapperCollection(data.collaborators)
-      newMap.DataModel.Topics = new TopicCollection(data.topics)
+      //newMap.DataModel.Topics = new TopicCollection(data.topics)
-      newMap.DataModel.Synapses = new SynapseCollection(data.synapses)
+      //newMap.DataModel.Synapses = new SynapseCollection(data.synapses)
       newMap.DataModel.Mappings = new MappingCollection(data.mappings)
       newMap.DataModel.Messages = data.messages
       newMap.DataModel.Stars = data.stars
@@ -127,15 +127,15 @@ const mapControl = {
   end: function(map) {
     $('.main').removeClass('compressed')
     $('.rightclickmenu').remove()
-    map.AutoLayout.resetSpiral()
+    //map.AutoLayout.resetSpiral()
-    map.TopicCard.hideCard()
+    //map.TopicCard.hideCard()
-    map.map.SynapseCard.hideCard()
+    map.SynapseCard.hideCard()
     map.Create.newTopic.hide(true) // true means force (and override pinned)
     map.Create.newSynapse.hide()
     map.InfoBox.close()
+    //map.Map.requests = []
+    //map.Map.hasLearnedTopicCreation = true
     map.Realtime.endActiveMap()
-    map.Map.requests = []
-    map.Map.hasLearnedTopicCreation = true
   }
 }
 export { mapControl }
@@ -442,6 +442,9 @@ const Map = (map) => {
 Map.events = {
   editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
 }
+Map.init = (serverData) => {
+  ChatView.init([serverData['sounds/MM_sounds.mp3'], serverData['sounds/MM_sounds.ogg']])
+}
 
 export { CheatSheet }
 export default Map

frontend/src/Metamaps/index.js

@@ -58,7 +58,6 @@ Metamaps.Synapse = Synapse
 Metamaps.SynapseCard = SynapseCard
 Metamaps.Topic = Topic
 Metamaps.Util = Util
-Metamaps.Views = Views
 Metamaps.Visualize = Visualize
 
 Metamaps.GlobalUI = GlobalUI
@@ -76,7 +75,6 @@ document.addEventListener('DOMContentLoaded', function() {
       Metamaps[prop].hasOwnProperty('init') &&
       typeof (Metamaps[prop].init) === 'function'
     ) {
-      console.log(prop)
       Metamaps[prop].init(Metamaps.ServerData)
     }
   }

frontend/src/components/MapView/MapChat/index.js

@@ -59,7 +59,7 @@ class MapChat extends Component {
 
   scroll = () => {
     // hack: figure out how to do this right
-    this.messagesDiv.scrollTop = this.messagesDiv.scrollHeight + 100
+    if (this.messagesDiv) this.messagesDiv.scrollTop = this.messagesDiv.scrollHeight + 100
   }
 
   toggleDrawer = () => {

realtime/global.js

@@ -7,7 +7,7 @@ const {
   LEAVE_CALL,
   JOIN_MAP,
   LEAVE_MAP
-} = require('../frontend/src/Metamaps/Realtime/events')
+} = require('../frontend/src/Metamaps/Map/Realtime/events')
 
 module.exports = function(io, store) {
   store.subscribe(() => {

realtime/junto.js

@@ -17,7 +17,7 @@ const {
   INVITE_A_CALL,
   JOIN_CALL,
   LEAVE_CALL
-} = require('../frontend/src/Metamaps/Realtime/events')
+} = require('../frontend/src/Metamaps/Map/Realtime/events')
 
 const { mapRoom, userMapRoom } = require('./rooms')
 

realtime/map.js

@@ -10,7 +10,7 @@ const {
   SEND_COORDS,
   SEND_MAPPER_INFO,
   DRAG_TOPIC
-} = require('../frontend/src/Metamaps/Realtime/events')
+} = require('../frontend/src/Metamaps/Map/Realtime/events')
 
 const { mapRoom, userMapRoom } = require('./rooms')
 

realtime/reducer.js

@@ -4,7 +4,7 @@ const {
   LEAVE_MAP,
   JOIN_CALL,
   LEAVE_CALL
-} = require('../frontend/src/Metamaps/Realtime/events')
+} = require('../frontend/src/Metamaps/Map/Realtime/events')
 
 const NOT_IN_CONVERSATION = 0
 const IN_CONVERSATION = 1