enable shared private and public maps (#530)

* enable shared private and public maps

* change the list

* yeehaw add collaborators

* I believe this fixes the error connor brought up

* when topic or synapse is no longer on a map, don't defer

* needs to be before?

* just do it in the controller

* make recommendation they sign in and retry

* better email

* config for mailer previews

* improve wording

* shouldn't have included that

* switch to green

* don't execute if there's no map

* wasn't including the right people in some circumstances

* Finish breaking out JS files (#551)

* metamaps.Realtime refactor

* Metamaps.Util

* Metamaps.Visualize

* Metamaps.SynapseCard

* Metamaps.TopicCard

* Metamaps.Create.js

* Remove erb extension from Metamaps.Map.js

* Metmaps.Account and Metamaps.GlobalUI remove extension

* Metamaps.JIT no more erb extension

* move Backbone.init; standard-format on Metamaps.js.erb

* factor out canvas support check function

* some llittle template bugs

* remove featured from signed in explore maps bar

* don't let it overflow off the page

Gemfile.lock

@@ -306,6 +306,3 @@ DEPENDENCIES
   tunemygc
   uglifier
   uservoice-ruby
-
-BUNDLED WITH
-   1.11.2

app/assets/javascripts/application.js

@@ -24,7 +24,14 @@
 //= require ./src/views/videoView
 //= require ./src/views/room
 //= require ./src/JIT
+//= require ./src/check-canvas-support
 //= require ./src/Metamaps
+//= require ./src/Metamaps.Create
+//= require ./src/Metamaps.TopicCard
+//= require ./src/Metamaps.SynapseCard
+//= require ./src/Metamaps.Visualize
+//= require ./src/Metamaps.Util
+//= require ./src/Metamaps.Realtime
 //= require ./src/Metamaps.Control
 //= require ./src/Metamaps.Filter
 //= require ./src/Metamaps.Listeners

app/assets/javascripts/src/Metamaps.Account.js

@@ -3,7 +3,8 @@
 /*
  * Metamaps.Account.js.erb
  *
- * Dependencies: none!
+ * Dependencies:
+ *  - Metamaps.Erb
  */
 
 Metamaps.Account = {
@@ -95,7 +96,7 @@ Metamaps.Account = {
     var self = Metamaps.Account
 
     $('.userImageDiv canvas').remove()
-    $('.userImageDiv img').attr('src', '<%= asset_path('user.png') %>').show()
+    $('.userImageDiv img').attr('src', Metamaps.Erb['user.png']).show()
     $('.userImageMenu').hide()
 
     var input = $('#user_image')

app/assets/javascripts/src/Metamaps.Backbone.js

@@ -5,10 +5,24 @@
  *
  * Dependencies:
  *  - Metamaps.Active
+ *  - Metamaps.Collaborators 
+ *  - Metamaps.Creators
+ *  - Metamaps.Filter
+ *  - Metamaps.JIT
  *  - Metamaps.Loading
  *  - Metamaps.Map
  *  - Metamaps.Mapper
+ *  - Metamaps.Mappers 
+ *  - Metamaps.Mappings 
+ *  - Metamaps.Metacodes 
  *  - Metamaps.Realtime
+ *  - Metamaps.Synapse
+ *  - Metamaps.SynapseCard
+ *  - Metamaps.Synapses
+ *  - Metamaps.Topic
+ *  - Metamaps.TopicCard
+ *  - Metamaps.Topics 
+ *  - Metamaps.Visualize
  */
 
 Metamaps.Backbone = {}
@@ -47,12 +61,21 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
     Metamaps.Realtime.sendMapChange(this)
   },
   authorizeToEdit: function (mapper) {
-    if (mapper && (this.get('permission') === 'commons' || this.get('user_id') === mapper.get('id'))) return true
+    if (mapper && (
-    else return false
+      this.get('permission') === 'commons' ||
+      this.get('collaborator_ids').includes(mapper.get('id')) ||
+      this.get('user_id') === mapper.get('id'))) {
+      return true
+    } else {
+      return false
+    }
   },
   authorizePermissionChange: function (mapper) {
-    if (mapper && this.get('user_id') === mapper.get('id')) return true
+    if (mapper && this.get('user_id') === mapper.get('id')) {
-    else return false
+      return true
+    } else {
+      return false
+    }
   },
   getUser: function () {
     return Metamaps.Mapper.get(this.get('user_id'))
@@ -70,6 +93,7 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
     $.ajax({
       url: '/maps/' + this.id + '/contains.json',
       success: start,
+      error: errorFunc,
       async: false
     })
   },
@@ -254,3 +278,446 @@ Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({
   model: Metamaps.Backbone.Mapper,
   url: '/users'
 })
+
+Metamaps.Backbone.init = function () {
+  var self = Metamaps.Backbone
+
+  self.Metacode = Backbone.Model.extend({
+    initialize: function () {
+      var image = new Image()
+      image.crossOrigin = 'Anonymous'
+      image.src = this.get('icon')
+      this.set('image', image)
+    },
+    prepareLiForFilter: function () {
+      var li = ''
+      li += '<li data-id="' + this.id.toString() + '">'
+      li += '<img src="' + this.get('icon') + '" data-id="' + this.id.toString() + '"'
+      li += ' alt="' + this.get('name') + '" />'
+      li += '<p>' + this.get('name').toLowerCase() + '</p></li>'
+      return li
+    }
+
+  })
+  self.MetacodeCollection = Backbone.Collection.extend({
+    model: this.Metacode,
+    url: '/metacodes',
+    comparator: function (a, b) {
+      a = a.get('name').toLowerCase()
+      b = b.get('name').toLowerCase()
+      return a > b ? 1 : a < b ? -1 : 0
+    }
+  })
+
+  self.Topic = Backbone.Model.extend({
+    urlRoot: '/topics',
+    blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
+    toJSON: function (options) {
+      return _.omit(this.attributes, this.blacklist)
+    },
+    save: function (key, val, options) {
+      var attrs
+
+      // Handle both `"key", value` and `{key: value}` -style arguments.
+      if (key == null || typeof key === 'object') {
+        attrs = key
+        options = val
+      } else {
+        (attrs = {})[key] = val
+      }
+
+      var newOptions = options || {}
+      var s = newOptions.success
+
+      var permBefore = this.get('permission')
+
+      newOptions.success = function (model, response, opt) {
+        if (s) s(model, response, opt)
+        model.trigger('saved')
+
+        if (permBefore === 'private' && model.get('permission') !== 'private') {
+          model.trigger('noLongerPrivate')
+        }
+        else if (permBefore !== 'private' && model.get('permission') === 'private') {
+          model.trigger('nowPrivate')
+        }
+      }
+      return Backbone.Model.prototype.save.call(this, attrs, newOptions)
+    },
+    initialize: function () {
+      if (this.isNew()) {
+        this.set({
+          'user_id': Metamaps.Active.Mapper.id,
+          'desc': '',
+          'link': '',
+          'permission': Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons'
+        })
+      }
+
+      this.on('changeByOther', this.updateCardView)
+      this.on('change', this.updateNodeView)
+      this.on('saved', this.savedEvent)
+      this.on('nowPrivate', function () {
+        var removeTopicData = {
+          mappableid: this.id
+        }
+
+        $(document).trigger(Metamaps.JIT.events.removeTopic, [removeTopicData])
+      })
+      this.on('noLongerPrivate', function () {
+        var newTopicData = {
+          mappingid: this.getMapping().id,
+          mappableid: this.id
+        }
+
+        $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData])
+      })
+
+      this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this)
+    },
+    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
+      } else {
+        return false
+      }
+    },
+    authorizePermissionChange: function (mapper) {
+      if (mapper && this.get('user_id') === mapper.get('id')) return true
+      else return false
+    },
+    getDate: function () {},
+    getMetacode: function () {
+      return Metamaps.Metacodes.get(this.get('metacode_id'))
+    },
+    getMapping: function () {
+      if (!Metamaps.Active.Map) return false
+
+      return Metamaps.Mappings.findWhere({
+        map_id: Metamaps.Active.Map.id,
+        mappable_type: 'Topic',
+        mappable_id: this.isNew() ? this.cid : this.id
+      })
+    },
+    createNode: function () {
+      var mapping
+      var node = {
+        adjacencies: [],
+        id: this.isNew() ? this.cid : this.id,
+        name: this.get('name')
+      }
+
+      if (Metamaps.Active.Map) {
+        mapping = this.getMapping()
+        node.data = {
+          $mapping: null,
+          $mappingID: mapping.id
+        }
+      }
+
+      return node
+    },
+    updateNode: function () {
+      var mapping
+      var node = this.get('node')
+      node.setData('topic', this)
+
+      if (Metamaps.Active.Map) {
+        mapping = this.getMapping()
+        node.setData('mapping', mapping)
+      }
+
+      return node
+    },
+    savedEvent: function () {
+      Metamaps.Realtime.sendTopicChange(this)
+    },
+    updateViews: function () {
+      var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic
+      var node = this.get('node')
+      // update topic card, if this topic is the one open there
+      if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
+        Metamaps.TopicCard.showCard(node)
+      }
+
+      // update the node on the map
+      if (onPageWithTopicCard && node) {
+        node.name = this.get('name')
+        Metamaps.Visualize.mGraph.plot()
+      }
+    },
+    updateCardView: function () {
+      var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic
+      var node = this.get('node')
+      // update topic card, if this topic is the one open there
+      if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
+        Metamaps.TopicCard.showCard(node)
+      }
+    },
+    updateNodeView: function () {
+      var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic
+      var node = this.get('node')
+
+      // update the node on the map
+      if (onPageWithTopicCard && node) {
+        node.name = this.get('name')
+        Metamaps.Visualize.mGraph.plot()
+      }
+    }
+  })
+
+  self.TopicCollection = Backbone.Collection.extend({
+    model: self.Topic,
+    url: '/topics'
+  })
+
+  self.Synapse = Backbone.Model.extend({
+    urlRoot: '/synapses',
+    blacklist: ['edge', 'created_at', 'updated_at'],
+    toJSON: function (options) {
+      return _.omit(this.attributes, this.blacklist)
+    },
+    save: function (key, val, options) {
+      var attrs
+
+      // Handle both `"key", value` and `{key: value}` -style arguments.
+      if (key == null || typeof key === 'object') {
+        attrs = key
+        options = val
+      } else {
+        (attrs = {})[key] = val
+      }
+
+      var newOptions = options || {}
+      var s = newOptions.success
+
+      var permBefore = this.get('permission')
+
+      newOptions.success = function (model, response, opt) {
+        if (s) s(model, response, opt)
+        model.trigger('saved')
+
+        if (permBefore === 'private' && model.get('permission') !== 'private') {
+          model.trigger('noLongerPrivate')
+        }
+        else if (permBefore !== 'private' && model.get('permission') === 'private') {
+          model.trigger('nowPrivate')
+        }
+      }
+      return Backbone.Model.prototype.save.call(this, attrs, newOptions)
+    },
+    initialize: function () {
+      if (this.isNew()) {
+        this.set({
+          'user_id': Metamaps.Active.Mapper.id,
+          'permission': Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons',
+          'category': 'from-to'
+        })
+      }
+
+      this.on('changeByOther', this.updateCardView)
+      this.on('change', this.updateEdgeView)
+      this.on('saved', this.savedEvent)
+      this.on('noLongerPrivate', function () {
+        var newSynapseData = {
+          mappingid: this.getMapping().id,
+          mappableid: this.id
+        }
+
+        $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData])
+      })
+      this.on('nowPrivate', function () {
+        $(document).trigger(Metamaps.JIT.events.removeSynapse, [{
+          mappableid: this.id
+        }])
+      })
+
+      this.on('change:desc', Metamaps.Filter.checkSynapses, this)
+    },
+    prepareLiForFilter: function () {
+      var li = ''
+      li += '<li data-id="' + this.get('desc') + '">'
+      li += '<img src="' + Metamaps.Erb['synapse16.png'] + '"'
+      li += ' alt="synapse icon" />'
+      li += '<p>' + this.get('desc') + '</p></li>'
+      return li
+    },
+    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
+      else return false
+    },
+    authorizePermissionChange: function (mapper) {
+      if (mapper && this.get('user_id') === mapper.get('id')) return true
+      else return false
+    },
+    getTopic1: function () {
+      return Metamaps.Topics.get(this.get('node1_id'))
+    },
+    getTopic2: function () {
+      return Metamaps.Topics.get(this.get('node2_id'))
+    },
+    getDirection: function () {
+      var t1 = this.getTopic1(),
+        t2 = this.getTopic2()
+
+      return t1 && t2 ? [
+        t1.get('node').id,
+        t2.get('node').id
+      ] : false
+    },
+    getMapping: function () {
+      if (!Metamaps.Active.Map) return false
+
+      return Metamaps.Mappings.findWhere({
+        map_id: Metamaps.Active.Map.id,
+        mappable_type: 'Synapse',
+        mappable_id: this.isNew() ? this.cid : this.id
+      })
+    },
+    createEdge: function (providedMapping) {
+      var mapping, mappingID
+      var synapseID = this.isNew() ? this.cid : this.id
+
+      var edge = {
+        nodeFrom: this.get('node1_id'),
+        nodeTo: this.get('node2_id'),
+        data: {
+          $synapses: [],
+          $synapseIDs: [synapseID],
+        }
+      }
+
+      if (Metamaps.Active.Map) {
+        mapping = providedMapping || this.getMapping()
+        mappingID = mapping.isNew() ? mapping.cid : mapping.id
+        edge.data.$mappings = []
+        edge.data.$mappingIDs = [mappingID]
+      }
+
+      return edge
+    },
+    updateEdge: function () {
+      var mapping
+      var edge = this.get('edge')
+      edge.getData('synapses').push(this)
+
+      if (Metamaps.Active.Map) {
+        mapping = this.getMapping()
+        edge.getData('mappings').push(mapping)
+      }
+
+      return edge
+    },
+    savedEvent: function () {
+      Metamaps.Realtime.sendSynapseChange(this)
+    },
+    updateViews: function () {
+      this.updateCardView()
+      this.updateEdgeView()
+    },
+    updateCardView: function () {
+      var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic
+      var edge = this.get('edge')
+
+      // update synapse card, if this synapse is the one open there
+      if (onPageWithSynapseCard && edge == Metamaps.SynapseCard.openSynapseCard) {
+        Metamaps.SynapseCard.showCard(edge)
+      }
+    },
+    updateEdgeView: function () {
+      var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic
+      var edge = this.get('edge')
+
+      // update the edge on the map
+      if (onPageWithSynapseCard && edge) {
+        Metamaps.Visualize.mGraph.plot()
+      }
+    }
+  })
+
+  self.SynapseCollection = Backbone.Collection.extend({
+    model: self.Synapse,
+    url: '/synapses'
+  })
+
+  self.Mapping = Backbone.Model.extend({
+    urlRoot: '/mappings',
+    blacklist: ['created_at', 'updated_at'],
+    toJSON: function (options) {
+      return _.omit(this.attributes, this.blacklist)
+    },
+    initialize: function () {
+      if (this.isNew()) {
+        this.set({
+          'user_id': Metamaps.Active.Mapper.id,
+          'map_id': Metamaps.Active.Map ? Metamaps.Active.Map.id : null
+        })
+      }
+    },
+    getMap: function () {
+      return Metamaps.Map.get(this.get('map_id'))
+    },
+    getTopic: function () {
+      if (this.get('mappable_type') === 'Topic') return Metamaps.Topic.get(this.get('mappable_id'))
+      else return false
+    },
+    getSynapse: function () {
+      if (this.get('mappable_type') === 'Synapse') return Metamaps.Synapse.get(this.get('mappable_id'))
+      else return false
+    }
+  })
+
+  self.MappingCollection = Backbone.Collection.extend({
+    model: self.Mapping,
+    url: '/mappings'
+  })
+
+  Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection()
+
+  Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection()
+
+  Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection()
+
+  Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection()
+
+  Metamaps.Collaborators = Metamaps.Collaborators ? new self.MapperCollection(Metamaps.Collaborators) : new self.MapperCollection()
+
+  // this is for topic view
+  Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection()
+
+  if (Metamaps.Active.Map) {
+    Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection()
+
+    Metamaps.Active.Map = new self.Map(Metamaps.Active.Map)
+  }
+
+  if (Metamaps.Active.Topic) Metamaps.Active.Topic = new self.Topic(Metamaps.Active.Topic)
+
+  // attach collection event listeners
+  self.attachCollectionEvents = function () {
+    Metamaps.Topics.on('add remove', function (topic) {
+      Metamaps.Map.InfoBox.updateNumbers()
+      Metamaps.Filter.checkMetacodes()
+      Metamaps.Filter.checkMappers()
+    })
+
+    Metamaps.Synapses.on('add remove', function (synapse) {
+      Metamaps.Map.InfoBox.updateNumbers()
+      Metamaps.Filter.checkSynapses()
+      Metamaps.Filter.checkMappers()
+    })
+
+    if (Metamaps.Active.Map) {
+      Metamaps.Mappings.on('add remove', function (mapping) {
+        Metamaps.Map.InfoBox.updateNumbers()
+        Metamaps.Filter.checkSynapses()
+        Metamaps.Filter.checkMetacodes()
+        Metamaps.Filter.checkMappers()
+      })
+    }
+  }
+  self.attachCollectionEvents()
+}; // end Metamaps.Backbone.init

app/assets/javascripts/src/Metamaps.Create.js

@@ -0,0 +1,326 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.Create.js
+ *
+ * Dependencies:
+ *  - Metamaps.Backbone
+ *  - Metamaps.GlobalUI
+ *  - Metamaps.Metacodes
+ *  - Metamaps.Mouse
+ *  - Metamaps.Selected
+ *  - Metamaps.Synapse
+ *  - Metamaps.Topic
+ *  - Metamaps.Visualize
+ */
+
+Metamaps.Create = {
+  isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
+  selectedMetacodeSet: null,
+  selectedMetacodeSetIndex: null,
+  selectedMetacodeNames: [],
+  newSelectedMetacodeNames: [],
+  selectedMetacodes: [],
+  newSelectedMetacodes: [],
+  init: function () {
+    var self = Metamaps.Create
+    self.newTopic.init()
+    self.newSynapse.init()
+
+    // // SWITCHING METACODE SETS
+
+    $('#metacodeSwitchTabs').tabs({
+      selected: self.selectedMetacodeSetIndex
+    }).addClass('ui-tabs-vertical ui-helper-clearfix')
+    $('#metacodeSwitchTabs .ui-tabs-nav li').removeClass('ui-corner-top').addClass('ui-corner-left')
+    $('.customMetacodeList li').click(self.toggleMetacodeSelected) // within the custom metacode set tab
+  },
+  toggleMetacodeSelected: function () {
+    var self = Metamaps.Create
+
+    if ($(this).attr('class') != 'toggledOff') {
+      $(this).addClass('toggledOff')
+      var value_to_remove = $(this).attr('id')
+      var name_to_remove = $(this).attr('data-name')
+      self.newSelectedMetacodes.splice(self.newSelectedMetacodes.indexOf(value_to_remove), 1)
+      self.newSelectedMetacodeNames.splice(self.newSelectedMetacodeNames.indexOf(name_to_remove), 1)
+    } else if ($(this).attr('class') == 'toggledOff') {
+      $(this).removeClass('toggledOff')
+      self.newSelectedMetacodes.push($(this).attr('id'))
+      self.newSelectedMetacodeNames.push($(this).attr('data-name'))
+    }
+  },
+  updateMetacodeSet: function (set, index, custom) {
+    if (custom && Metamaps.Create.newSelectedMetacodes.length == 0) {
+      alert('Please select at least one metacode to use!')
+      return false
+    }
+
+    var codesToSwitchToIds
+    var metacodeModels = new Metamaps.Backbone.MetacodeCollection()
+    Metamaps.Create.selectedMetacodeSetIndex = index
+    Metamaps.Create.selectedMetacodeSet = 'metacodeset-' + set
+
+    if (!custom) {
+      codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',')
+      $('.customMetacodeList li').addClass('toggledOff')
+      Metamaps.Create.selectedMetacodes = []
+      Metamaps.Create.selectedMetacodeNames = []
+      Metamaps.Create.newSelectedMetacodes = []
+      Metamaps.Create.newSelectedMetacodeNames = []
+    }
+    else if (custom) {
+      // uses .slice to avoid setting the two arrays to the same actual array
+      Metamaps.Create.selectedMetacodes = Metamaps.Create.newSelectedMetacodes.slice(0)
+      Metamaps.Create.selectedMetacodeNames = Metamaps.Create.newSelectedMetacodeNames.slice(0)
+      codesToSwitchToIds = Metamaps.Create.selectedMetacodes.slice(0)
+    }
+
+    // sort by name
+    for (var i = 0; i < codesToSwitchToIds.length; i++) {
+      metacodeModels.add(Metamaps.Metacodes.get(codesToSwitchToIds[i]))
+    }
+    metacodeModels.sort()
+
+    $('#metacodeImg, #metacodeImgTitle').empty()
+    $('#metacodeImg').removeData('cloudcarousel')
+    var newMetacodes = ''
+    metacodeModels.each(function (metacode) {
+      newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + metacode.get('icon') + '" data-id="' + metacode.id + '" title="' + metacode.get('name') + '" alt="' + metacode.get('name') + '"/>'
+    })
+
+    $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
+      titleBox: $('#metacodeImgTitle'),
+      yRadius: 40,
+      xRadius: 190,
+      xPos: 170,
+      yPos: 40,
+      speed: 0.3,
+      mouseWheel: true,
+      bringToFront: true
+    })
+
+    Metamaps.GlobalUI.closeLightbox()
+    $('#topic_name').focus()
+
+    var mdata = {
+      'metacodes': {
+        'value': custom ? Metamaps.Create.selectedMetacodes.toString() : Metamaps.Create.selectedMetacodeSet
+      }
+    }
+    $.ajax({
+      type: 'POST',
+      dataType: 'json',
+      url: '/user/updatemetacodes',
+      data: mdata,
+      success: function (data) {
+        console.log('selected metacodes saved')
+      },
+      error: function () {
+        console.log('failed to save selected metacodes')
+      }
+    })
+  },
+
+  cancelMetacodeSetSwitch: function () {
+    var self = Metamaps.Create
+    self.isSwitchingSet = false
+
+    if (self.selectedMetacodeSet != 'metacodeset-custom') {
+      $('.customMetacodeList li').addClass('toggledOff')
+      self.selectedMetacodes = []
+      self.selectedMetacodeNames = []
+      self.newSelectedMetacodes = []
+      self.newSelectedMetacodeNames = []
+    } else { // custom set is selected
+      // reset it to the current actual selection
+      $('.customMetacodeList li').addClass('toggledOff')
+      for (var i = 0; i < self.selectedMetacodes.length; i++) {
+        $('#' + self.selectedMetacodes[i]).removeClass('toggledOff')
+      }
+      // uses .slice to avoid setting the two arrays to the same actual array
+      self.newSelectedMetacodeNames = self.selectedMetacodeNames.slice(0)
+      self.newSelectedMetacodes = self.selectedMetacodes.slice(0)
+    }
+    $('#metacodeSwitchTabs').tabs('option', 'active', self.selectedMetacodeSetIndex)
+    $('#topic_name').focus()
+  },
+  newTopic: {
+    init: function () {
+      $('#topic_name').keyup(function () {
+        Metamaps.Create.newTopic.name = $(this).val()
+      })
+
+      var topicBloodhound = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        remote: {
+          url: '/topics/autocomplete_topic?term=%QUERY',
+          wildcard: '%QUERY',
+        },
+      })
+
+      // initialize the autocomplete results for the metacode spinner
+      $('#topic_name').typeahead(
+        {
+          highlight: true,
+          minLength: 2,
+        },
+        [{
+          name: 'topic_autocomplete',
+          limit: 8,
+          display: function (s) { return s.label; },
+          templates: {
+            suggestion: function (s) {
+              return Hogan.compile($('#topicAutocompleteTemplate').html()).render(s)
+            },
+          },
+          source: topicBloodhound,
+        }]
+      )
+
+      // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
+      $('#topic_name').bind('typeahead:select', function (event, datum, dataset) {
+        Metamaps.Topic.getTopicFromAutocomplete(datum.id)
+      })
+
+      // initialize metacode spinner and then hide it
+      $('#metacodeImg').CloudCarousel({
+        titleBox: $('#metacodeImgTitle'),
+        yRadius: 40,
+        xRadius: 190,
+        xPos: 170,
+        yPos: 40,
+        speed: 0.3,
+        mouseWheel: true,
+        bringToFront: true
+      })
+      $('.new_topic').hide()
+    },
+    name: null,
+    newId: 1,
+    beingCreated: false,
+    metacode: null,
+    x: null,
+    y: null,
+    addSynapse: false,
+    open: function () {
+      $('#new_topic').fadeIn('fast', function () {
+        $('#topic_name').focus()
+      })
+      Metamaps.Create.newTopic.beingCreated = true
+      Metamaps.Create.newTopic.name = ''
+    },
+    hide: function () {
+      $('#new_topic').fadeOut('fast')
+      $('#topic_name').typeahead('val', '')
+      Metamaps.Create.newTopic.beingCreated = false
+    }
+  },
+  newSynapse: {
+    init: function () {
+      var self = Metamaps.Create.newSynapse
+
+      var synapseBloodhound = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        remote: {
+          url: '/search/synapses?term=%QUERY',
+          wildcard: '%QUERY',
+        },
+      })
+      var existingSynapseBloodhound = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        remote: {
+          url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2',
+          prepare: function (query, settings) {
+            var self = Metamaps.Create.newSynapse
+            if (Metamaps.Selected.Nodes.length < 2) {
+              settings.url = settings.url.replace('%TOPIC1', self.topic1id).replace('%TOPIC2', self.topic2id)
+              return settings
+            } else {
+              return null
+            }
+          },
+        },
+      })
+
+      // initialize the autocomplete results for synapse creation
+      $('#synapse_desc').typeahead(
+        {
+          highlight: true,
+          minLength: 2,
+        },
+        [{
+          name: 'synapse_autocomplete',
+          display: function (s) { return s.label; },
+          templates: {
+            suggestion: function (s) {
+              return Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>").render(s)
+            },
+          },
+          source: synapseBloodhound,
+        },
+          {
+            name: 'existing_synapses',
+            limit: 50,
+            display: function (s) { return s.label; },
+            templates: {
+              suggestion: function (s) {
+                return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s)
+              },
+              header: '<h3>Existing synapses</h3>'
+            },
+            source: existingSynapseBloodhound,
+          }]
+      )
+
+      $('#synapse_desc').keyup(function (e) {
+        var ESC = 27, BACKSPACE = 8, DELETE = 46
+        if (e.keyCode === BACKSPACE && $(this).val() === '' ||
+          e.keyCode === DELETE && $(this).val() === '' ||
+          e.keyCode === ESC) {
+          Metamaps.Create.newSynapse.hide()
+        } // if
+        Metamaps.Create.newSynapse.description = $(this).val()
+      })
+
+      $('#synapse_desc').focusout(function () {
+        if (Metamaps.Create.newSynapse.beingCreated) {
+          Metamaps.Synapse.createSynapseLocally()
+        }
+      })
+
+      $('#synapse_desc').bind('typeahead:select', function (event, datum, dataset) {
+        if (datum.id) { // if they clicked on an existing synapse get it
+          Metamaps.Synapse.getSynapseFromAutocomplete(datum.id)
+        } else {
+          Metamaps.Create.newSynapse.description = datum.value
+          Metamaps.Synapse.createSynapseLocally()
+        }
+      })
+    },
+    beingCreated: false,
+    description: null,
+    topic1id: null,
+    topic2id: null,
+    newSynapseId: null,
+    open: function () {
+      $('#new_synapse').fadeIn(100, function () {
+        $('#synapse_desc').focus()
+      })
+      Metamaps.Create.newSynapse.beingCreated = true
+    },
+    hide: function () {
+      $('#new_synapse').fadeOut('fast')
+      $('#synapse_desc').typeahead('val', '')
+      Metamaps.Create.newSynapse.beingCreated = false
+      Metamaps.Create.newTopic.addSynapse = false
+      Metamaps.Create.newSynapse.topic1id = 0
+      Metamaps.Create.newSynapse.topic2id = 0
+      Metamaps.Mouse.synapseStartCoordinates = []
+      Metamaps.Visualize.mGraph.plot()
+    },
+  }
+}; // end Metamaps.Create

app/assets/javascripts/src/Metamaps.GlobalUI.js

@@ -93,6 +93,7 @@ Metamaps.GlobalUI = {
         if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);
 
         var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
+        var sharedCollection = Metamaps.Maps.Shared ? Metamaps.Maps.Shared : [];
         var mapperCollection = [];
         var mapperOptionsObj = {id: 'mapper', sortBy: 'updated_at' };
         if (Metamaps.Maps.Mapper) {
@@ -102,6 +103,7 @@ Metamaps.GlobalUI = {
         var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
         var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
         Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'updated_at' });
+        Metamaps.Maps.Shared = new Metamaps.Backbone.MapsCollection(sharedCollection, {id: 'shared', sortBy: 'updated_at' });
         // 'Mapper' refers to another mapper
         Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj);
         Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'updated_at' });
@@ -501,7 +503,7 @@ Metamaps.GlobalUI.Search = {
                     return Hogan.compile(topicheader + $('#topicSearchTemplate').html()).render({
                         value: "No results",
                         label: "No results",
-                        typeImageURL: "<%= asset_path('icons/wildcard.png') %>",
+                        typeImageURL: Metamaps.Erb['icons/wildcard.png'],
                         rtype: "noresult"
                     });
                 },
@@ -569,7 +571,7 @@ Metamaps.GlobalUI.Search = {
                         value: "No results",
                         label: "No results",
                         rtype: "noresult",
-                        profile: "<%= asset_path('user.png') %>",
+                        profile: Metamaps.Erb['user.png']
                     });
                 },
                 header: mapperheader,

app/assets/javascripts/src/Metamaps.JIT.js

@@ -29,10 +29,10 @@ Metamaps.JIT = {
     $('.takeScreenshot').click(Metamaps.Map.exportImage)
 
     self.topicDescImage = new Image()
-    self.topicDescImage.src = '<%= asset_path('topic_description_signifier.png') %>'
+    self.topicDescImage.src = Metamaps.Erb['topic_description_signifier.png']
 
     self.topicLinkImage = new Image()
-    self.topicLinkImage.src = '<%= asset_path('topic_link_signifier.png') %>'
+    self.topicLinkImage.src = Metamaps.Erb['topic_link_signifier.png']
   },
   /**
    * convert our topic JSON into something JIT can use

app/assets/javascripts/src/Metamaps.Map.js

@@ -4,17 +4,18 @@
  * Metamaps.Map.js.erb
  *
  * Dependencies:
- *    Metamaps.Create
+ *  - Metamaps.Create
- *    Metamaps.Filter
+ *  - Metamaps.Erb
- *    Metamaps.JIT
+ *  - Metamaps.Filter
- *    Metamaps.Loading
+ *  - Metamaps.JIT
- *    Metamaps.Maps
+ *  - Metamaps.Loading
- *    Metamaps.Realtime
+ *  - Metamaps.Maps
- *    Metamaps.Router
+ *  - Metamaps.Realtime
- *    Metamaps.Selected
+ *  - Metamaps.Router
- *    Metamaps.SynapseCard
+ *  - Metamaps.Selected
- *    Metamaps.TopicCard
+ *  - Metamaps.SynapseCard
- *    Metamaps.Visualize
+ *  - Metamaps.TopicCard
+ *  - Metamaps.Visualize
  *  - Metamaps.Active
  *  - Metamaps.Backbone
  *  - Metamaps.GlobalUI
@@ -64,6 +65,7 @@ Metamaps.Map = {
     var start = function (data) {
       Metamaps.Active.Map = new bb.Map(data.map)
       Metamaps.Mappers = new bb.MapperCollection(data.mappers)
+      Metamaps.Collaborators = new bb.MapperCollection(data.collaborators)
       Metamaps.Topics = new bb.TopicCollection(data.topics)
       Metamaps.Synapses = new bb.SynapseCollection(data.synapses)
       Metamaps.Mappings = new bb.MappingCollection(data.mappings)
@@ -180,13 +182,13 @@ Metamaps.Map = {
     Metamaps.Router.home()
     Metamaps.GlobalUI.notifyUser('Sorry! That map has been changed to Private.')
   },
-  commonsToPublic: function () {
+  cantEditNow: function () {
     Metamaps.Realtime.turnOff(true); // true is for 'silence'
     Metamaps.GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.')
     Metamaps.Active.Map.trigger('changeByOther')
   },
-  publicToCommons: function () {
+  canEditNow: function () {
-    var confirmString = 'This map permission has been changed to Commons! '
+    var confirmString = "You've been granted permission to edit this map. "
     confirmString += 'Do you want to reload and enable realtime collaboration?'
     var c = confirm(confirmString)
     if (c) {
@@ -419,7 +421,7 @@ Metamaps.Map.InfoBox = {
   isOpen: false,
   changing: false,
   selectingPermission: false,
-  changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>",
+  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>",
   nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="textarea" data-activator="#mapInfoName">{{name}}</span>',
   descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description..." data-type="textarea" data-activator="#mapInfoDesc">{{desc}}</span>',
   init: function () {
@@ -433,6 +435,8 @@ Metamaps.Map.InfoBox = {
 
     self.attachEventListeners()
 
+    
+
     self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
   },
   toggleBox: function (event) {
@@ -473,19 +477,23 @@ Metamaps.Map.InfoBox = {
 
     var map = Metamaps.Active.Map
 
-    var obj = map.pick('permission', 'contributor_count', 'topic_count', 'synapse_count')
+    var obj = map.pick('permission', 'topic_count', 'synapse_count')
 
     var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper)
     var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper)
+    var relevantPeople = map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
     var shareable = map.get('permission') !== 'private'
 
     obj['name'] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get('name')}) : map.get('name')
     obj['desc'] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get('desc')}) : map.get('desc')
     obj['map_creator_tip'] = isCreator ? self.changePermissionText : ''
-    obj['contributors_class'] = Metamaps.Mappers.length > 1 ? 'multiple' : ''
+
-    obj['contributors_class'] += Metamaps.Mappers.length === 2 ? ' mTwo' : ''
+    obj['contributor_count'] = relevantPeople.length
-    obj['contributor_image'] = Metamaps.Mappers.length > 0 ? Metamaps.Mappers.models[0].get('image') : "<%= asset_path('user.png') %>"
+    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.Erb['user.png']
     obj['contributor_list'] = self.createContributorList()
+
     obj['user_name'] = isCreator ? 'You' : map.get('user_name')
     obj['created_at'] = map.get('created_at_clean')
     obj['updated_at'] = map.get('updated_at_clean')
@@ -554,6 +562,87 @@ Metamaps.Map.InfoBox = {
     $('.mapInfoBox').unbind('.hideTip').bind('click.hideTip', function () {
       $('.mapContributors .tip').hide()
     })
+
+    self.addTypeahead() 
+  },
+  addTypeahead: function () {
+    var self = Metamaps.Map.InfoBox
+
+    if (!Metamaps.Active.Map) return
+
+    // for autocomplete
+    var collaborators = {
+        name: 'collaborators',
+        limit: 9999,
+        display: function(s) { return s.label; },
+        templates: {
+            notFound: function(s) {
+                return Hogan.compile($('#collaboratorSearchTemplate').html()).render({
+                    value: "No results",
+                    label: "No results",
+                    rtype: "noresult",
+                    profile: Metamaps.Erb['user.png'],
+                });
+            },
+            suggestion: function(s) {
+                return Hogan.compile($('#collaboratorSearchTemplate').html()).render(s);
+            },
+        },
+        source: new Bloodhound({
+            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+            queryTokenizer: Bloodhound.tokenizers.whitespace,
+            remote: {
+                url: '/search/mappers?term=%QUERY',
+                wildcard: '%QUERY',
+            },
+        })
+    }
+
+    // for adding map collaborators, who will have edit rights
+    if (Metamaps.Active.Mapper && Metamaps.Active.Mapper.id === Metamaps.Active.Map.get('user_id')) {
+      $('.collaboratorSearchField').typeahead(
+        {
+          highlight: false,
+        },
+        [collaborators]
+      )
+      $('.collaboratorSearchField').bind('typeahead:select', self.handleResultClick)
+      $('.mapContributors .removeCollaborator').click(function () {
+        self.removeCollaborator(parseInt($(this).data('id')))
+      })
+    } 
+  },
+  removeCollaborator: function (collaboratorId) {
+    var self = Metamaps.Map.InfoBox
+    Metamaps.Collaborators.remove(Metamaps.Collaborators.get(collaboratorId))
+    var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
+    $.post('/maps/' + Metamaps.Active.Map.id + '/access', { access: mapperIds })
+    self.updateNumbers()
+  },
+  addCollaborator: function (newCollaboratorId) {
+    var self = Metamaps.Map.InfoBox
+
+    if (Metamaps.Collaborators.get(newCollaboratorId)) {
+      Metamaps.GlobalUI.notifyUser('That user already has access')
+      return
+    }
+
+    function callback(mapper) {
+      Metamaps.Collaborators.add(mapper)
+      var mapperIds = Metamaps.Collaborators.models.map(function (mapper) { return mapper.id })
+      $.post('/maps/' + Metamaps.Active.Map.id + '/access', { access: mapperIds })
+      var name =  Metamaps.Collaborators.get(newCollaboratorId).get('name')
+      Metamaps.GlobalUI.notifyUser(name + ' will be notified by email')
+      self.updateNumbers()
+    }
+
+    $.getJSON('/users/' + newCollaboratorId + '.json', callback)
+  },
+  handleResultClick: function (event, item) {
+    var self = Metamaps.Map.InfoBox
+
+   self.addCollaborator(item.id)
+   $('.collaboratorSearchField').typeahead('val', '')
   },
   updateNameDescPerm: function (name, desc, perm) {
     $('.mapInfoName .best_in_place_name').html(name)
@@ -562,33 +651,48 @@ Metamaps.Map.InfoBox = {
   },
   createContributorList: function () {
     var self = Metamaps.Map.InfoBox
-
+    var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
+    var activeMapperIsCreator = Metamaps.Active.Mapper && Metamaps.Active.Mapper.id === Metamaps.Active.Map.get('user_id')
     var string = ''
     string += '<ul>'
 
-    Metamaps.Mappers.each(function (m) {
+    relevantPeople.each(function (m) {
-      string += '<li><a href="/explore/mapper/' + m.get('id') + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get('image') + '" />' + m.get('name') + '</a></li>'
+      var isCreator = Metamaps.Active.Map.get('user_id') === m.get('id')
+      string += '<li><a href="/explore/mapper/' + m.get('id') + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get('image') + '" />' + m.get('name')
+      if (isCreator) string += ' (creator)' 
+      string += '</a>'
+      if (activeMapperIsCreator && !isCreator) string += '<span class="removeCollaborator" data-id="' + m.get('id') + '"></span>'
+      string += '</li>'
     })
 
     string += '</ul>'
+
+    if (activeMapperIsCreator) {
+      string += '<div class="collabSearchField"><span class="addCollab"></span><input class="collaboratorSearchField" placeholder="Add a collaborator!"></input></div>'
+    }
     return string
   },
   updateNumbers: function () {
     var self = Metamaps.Map.InfoBox
     var mapper = Metamaps.Active.Mapper
+    var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators
 
     var contributors_class = ''
-    if (Metamaps.Mappers.length === 2) contributors_class = 'multiple mTwo'
+    if (relevantPeople.length === 2) contributors_class = 'multiple mTwo'
-    else if (Metamaps.Mappers.length > 2) contributors_class = 'multiple'
+    else if (relevantPeople.length > 2) contributors_class = 'multiple'
 
-    var contributors_image = "<%= asset_path('user.png') %>"
+    var contributors_image = Metamaps.Erb['user.png']
-    if (Metamaps.Mappers.length > 0) {
+    if (relevantPeople.length > 0) {
       // get the first contributor and use their image
-      contributors_image = Metamaps.Mappers.models[0].get('image')
+      contributors_image = relevantPeople.models[0].get('image')
     }
     $('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class)
-    $('.mapContributors span').text(Metamaps.Mappers.length)
+    $('.mapContributors span').text(relevantPeople.length)
     $('.mapContributors .tip').html(self.createContributorList())
+    self.addTypeahead()
+    $('.mapContributors .tip').unbind().click(function (event) {
+      event.stopPropagation()
+    })
     $('.mapTopics').text(Metamaps.Topics.length)
     $('.mapSynapses').text(Metamaps.Synapses.length)
 
@@ -623,19 +727,10 @@ Metamaps.Map.InfoBox = {
 
     self.selectingPermission = false
     var permission = $(this).attr('class')
-    var permBefore = Metamaps.Active.Map.get('permission')
     Metamaps.Active.Map.save({
       permission: permission
     })
     Metamaps.Active.Map.updateMapWrapper()
-    if (permBefore !== 'commons' && permission === 'commons') {
-      Metamaps.Realtime.setupSocket()
-      Metamaps.Realtime.turnOn()
-    }
-    else if (permBefore === 'commons' && permission === 'public') {
-      Metamaps.Realtime.turnOff(true); // true is to 'silence'
-    // the notification that would otherwise be sent
-    }
     shareable = permission === 'private' ? '' : 'shareable'
     $('.mapPermission').removeClass('commons public private minimize').addClass(permission)
     $('.mapPermission .permissionSelect').remove()
@@ -656,6 +751,7 @@ Metamaps.Map.InfoBox = {
       Metamaps.Maps.Active.remove(map)
       Metamaps.Maps.Featured.remove(map)
       Metamaps.Maps.Mine.remove(map)
+      Metamaps.Maps.Shared.remove(map)
       map.destroy()
       Metamaps.Router.home()
       Metamaps.GlobalUI.notifyUser('Map eliminated!')

app/assets/javascripts/src/Metamaps.Router.js

@@ -87,7 +87,7 @@
       // either 'featured', 'mapper', or 'active'
       var capitalize = section.charAt(0).toUpperCase() + section.slice(1)
 
-      if (section === 'featured' || section === 'active') {
+      if (section === 'shared' || section === 'featured' || section === 'active') {
         document.title = 'Explore ' + capitalize + ' Maps | Metamaps'
       } else if (section === 'mapper') {
         $.ajax({

app/assets/javascripts/src/Metamaps.SynapseCard.js

@@ -0,0 +1,288 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.SynapseCard.js
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.Control
+ *  - Metamaps.Mapper
+ *  - Metamaps.Visualize
+ */
+Metamaps.SynapseCard = {
+  openSynapseCard: null,
+  showCard: function (edge, e) {
+    var self = Metamaps.SynapseCard
+
+    // reset so we don't interfere with other edges, but first, save its x and y
+    var myX = $('#edit_synapse').css('left')
+    var myY = $('#edit_synapse').css('top')
+    $('#edit_synapse').remove()
+
+    // so label is missing while editing
+    Metamaps.Control.deselectEdge(edge)
+
+    var index = edge.getData('displayIndex') ? edge.getData('displayIndex') : 0
+    var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse
+
+    // create the wrapper around the form elements, including permissions
+    // classes to make best_in_place happy
+    var edit_div = document.createElement('div')
+    edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>'
+    edit_div.setAttribute('id', 'edit_synapse')
+    if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
+      edit_div.className = 'permission canEdit'
+      edit_div.className += synapse.authorizePermissionChange(Metamaps.Active.Mapper) ? ' yourEdge' : ''
+    } else {
+      edit_div.className = 'permission cannotEdit'
+    }
+    $('#wrapper').append(edit_div)
+
+    self.populateShowCard(edge, synapse)
+
+    // drop it in the right spot, activate it
+    $('#edit_synapse').css('position', 'absolute')
+    if (e) {
+      $('#edit_synapse').css('left', e.clientX)
+      $('#edit_synapse').css('top', e.clientY)
+    } else {
+      $('#edit_synapse').css('left', myX)
+      $('#edit_synapse').css('top', myY)
+    }
+    // $('#edit_synapse_name').click() //required in case name is empty
+    // $('#edit_synapse_name input').focus()
+    $('#edit_synapse').show()
+
+    self.openSynapseCard = edge
+  },
+
+  hideCard: function () {
+    $('#edit_synapse').remove()
+    Metamaps.SynapseCard.openSynapseCard = null
+  },
+
+  populateShowCard: function (edge, synapse) {
+    var self = Metamaps.SynapseCard
+
+    self.add_synapse_count(edge)
+    self.add_desc_form(synapse)
+    self.add_drop_down(edge, synapse)
+    self.add_user_info(synapse)
+    self.add_perms_form(synapse)
+    self.add_direction_form(synapse)
+  },
+  add_synapse_count: function (edge) {
+    var count = edge.getData('synapses').length
+
+    $('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
+  },
+  add_desc_form: function (synapse) {
+    var data_nil = 'Click to add description.'
+
+    // TODO make it so that this would work even in sandbox mode,
+    // currently with Best_in_place it won't
+
+    // desc editing form
+    $('#editSynUpperBar').append('<div id="edit_synapse_desc"></div>')
+    $('#edit_synapse_desc').attr('class', 'best_in_place best_in_place_desc')
+    $('#edit_synapse_desc').attr('data-object', 'synapse')
+    $('#edit_synapse_desc').attr('data-attribute', 'desc')
+    $('#edit_synapse_desc').attr('data-type', 'textarea')
+    $('#edit_synapse_desc').attr('data-nil', data_nil)
+    $('#edit_synapse_desc').attr('data-url', '/synapses/' + synapse.id)
+    $('#edit_synapse_desc').html(synapse.get('desc'))
+
+    // if edge data is blank or just whitespace, populate it with data_nil
+    if ($('#edit_synapse_desc').html().trim() == '') {
+      if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
+        $('#edit_synapse_desc').html(data_nil)
+      } else {
+        $('#edit_synapse_desc').html('(no description)')
+      }
+    }
+
+    $('#edit_synapse_desc').bind('ajax:success', function () {
+      var desc = $(this).html()
+      if (desc == data_nil) {
+        synapse.set('desc', '')
+      } else {
+        synapse.set('desc', desc)
+      }
+      synapse.trigger('saved')
+      Metamaps.Control.selectEdge(synapse.get('edge'))
+      Metamaps.Visualize.mGraph.plot()
+    })
+  },
+  add_drop_down: function (edge, synapse) {
+    var list, i, synapses, l, desc
+
+    synapses = edge.getData('synapses')
+    l = synapses.length
+
+    if (l > 1) {
+      // append the element that you click to show dropdown select
+      $('#editSynUpperBar').append('<div id="dropdownSynapses"></div>')
+      $('#dropdownSynapses').click(function (e) {
+        e.preventDefault()
+        e.stopPropagation() // stop it from immediately closing it again
+        $('#switchSynapseList').toggle()
+      })
+      // hide the dropdown again if you click anywhere else on the synapse card
+      $('#edit_synapse').click(function () {
+        $('#switchSynapseList').hide()
+      })
+
+      // generate the list of other synapses
+      list = '<ul id="switchSynapseList">'
+      for (i = 0; i < l; i++) {
+        if (synapses[i] !== synapse) { // don't add the current one to the list
+          desc = synapses[i].get('desc')
+          desc = desc === '' || desc === null ? '(no description)' : desc
+          list += '<li data-synapse-index="' + i + '">' + desc + '</li>'
+        }
+      }
+      list += '</ul>'
+      // add the list of the other synapses
+      $('#editSynLowerBar').append(list)
+
+      // attach click listeners to list items that
+      // will cause it to switch the displayed synapse
+      // when you click it
+      $('#switchSynapseList li').click(function (e) {
+        e.stopPropagation()
+        var index = parseInt($(this).attr('data-synapse-index'))
+        edge.setData('displayIndex', index)
+        Metamaps.Visualize.mGraph.plot()
+        Metamaps.SynapseCard.showCard(edge, false)
+      })
+    }
+  },
+  add_user_info: function (synapse) {
+    var u = '<div id="edgeUser" class="hoverForTip">'
+    u += '<a href="/explore/mapper/' + synapse.get('user_id') + '"> <img src="" width="24" height="24" /></a>'
+    u += '<div class="tip">' + synapse.get('user_name') + '</div></div>'
+    $('#editSynLowerBar').append(u)
+
+    // get mapper image
+    var setMapperImage = function (mapper) {
+      $('#edgeUser img').attr('src', mapper.get('image'))
+    }
+    Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage)
+  },
+
+  add_perms_form: function (synapse) {
+    // permissions - if owner, also allow permission editing
+    $('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get('calculated_permission').substring(0, 2) + '"></div>')
+
+    // ability to change permission
+    var selectingPermission = false
+    var permissionLiClick = function (event) {
+      selectingPermission = false
+      var permission = $(this).attr('class')
+      synapse.save({
+        permission: permission,
+        defer_to_map_id: null
+      })
+      $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2))
+      $('#edit_synapse .permissionSelect').remove()
+      event.stopPropagation()
+    }
+
+    var openPermissionSelect = function (event) {
+      if (!selectingPermission) {
+        selectingPermission = true
+        $(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
+        if ($(this).hasClass('co')) {
+          $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>')
+        } else if ($(this).hasClass('pu')) {
+          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>')
+        } else if ($(this).hasClass('pr')) {
+          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>')
+        }
+        $('#edit_synapse .permissionSelect li').click(permissionLiClick)
+        event.stopPropagation()
+      }
+    }
+
+    var hidePermissionSelect = function () {
+      selectingPermission = false
+      $('#edit_synapse.yourEdge .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
+      $('#edit_synapse .permissionSelect').remove()
+    }
+
+    if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
+      $('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect)
+      $('#edit_synapse').click(hidePermissionSelect)
+    }
+  }, // add_perms_form
+
+  add_direction_form: function (synapse) {
+    // directionality checkboxes
+    $('#editSynLowerBar').append('<div id="edit_synapse_left"></div>')
+    $('#editSynLowerBar').append('<div id="edit_synapse_right"></div>')
+
+    var edge = synapse.get('edge')
+
+    // determine which node is to the left and the right
+    // if directly in a line, top is left
+    if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
+      edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
+      edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
+      var left = edge.nodeTo.getData('topic')
+      var right = edge.nodeFrom.getData('topic')
+    } else {
+      var left = edge.nodeFrom.getData('topic')
+      var right = edge.nodeTo.getData('topic')
+    }
+
+    /*
+     * One node is actually on the left onscreen. Call it left, & the other right.
+     * If category is from-to, and that node is first, check the 'right' checkbox.
+     * Else check the 'left' checkbox since the arrow is incoming.
+     */
+
+    var directionCat = synapse.get('category'); // both, none, from-to
+    if (directionCat == 'from-to') {
+      var from_to = [synapse.get('node1_id'), synapse.get('node2_id')]
+      if (from_to[0] == left.id) {
+        // check left checkbox
+        $('#edit_synapse_left').addClass('checked')
+      } else {
+        // check right checkbox
+        $('#edit_synapse_right').addClass('checked')
+      }
+    } else if (directionCat == 'both') {
+      // check both checkboxes
+      $('#edit_synapse_left').addClass('checked')
+      $('#edit_synapse_right').addClass('checked')
+    }
+
+    if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
+      $('#edit_synapse_left, #edit_synapse_right').click(function () {
+        $(this).toggleClass('checked')
+
+        var leftChecked = $('#edit_synapse_left').is('.checked')
+        var rightChecked = $('#edit_synapse_right').is('.checked')
+
+        var dir = synapse.getDirection()
+        var dirCat = 'none'
+        if (leftChecked && rightChecked) {
+          dirCat = 'both'
+        } else if (!leftChecked && rightChecked) {
+          dirCat = 'from-to'
+          dir = [right.id, left.id]
+        } else if (leftChecked && !rightChecked) {
+          dirCat = 'from-to'
+          dir = [left.id, right.id]
+        }
+
+        synapse.save({
+          category: dirCat,
+          node1_id: dir[0],
+          node2_id: dir[1]
+        })
+        Metamaps.Visualize.mGraph.plot()
+      })
+    } // if
+  } // add_direction_form
+}; // end Metamaps.SynapseCard

app/assets/javascripts/src/Metamaps.Topic.js

@@ -299,7 +299,8 @@ Metamaps.Topic = {
 
     var topic = new Metamaps.Backbone.Topic({
       name: Metamaps.Create.newTopic.name,
-      metacode_id: metacode.id
+      metacode_id: metacode.id,
+      defer_to_map_id: Metamaps.Active.Map.id
     })
     Metamaps.Topics.add(topic)
 

app/assets/javascripts/src/Metamaps.TopicCard.js

@@ -0,0 +1,451 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.TopicCard.js
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.GlobalUI
+ *  - Metamaps.Mapper
+ *  - Metamaps.Metacodes
+ *  - Metamaps.Router
+ *  - Metamaps.Util
+ *  - Metamaps.Visualize
+ */
+Metamaps.TopicCard = {
+  openTopicCard: null, // stores the topic that's currently open
+  authorizedToEdit: false, // stores boolean for edit permission for open topic card
+  init: function () {
+    var self = Metamaps.TopicCard
+
+    // initialize best_in_place editing
+    $('.authenticated div.permission.canEdit .best_in_place').best_in_place()
+
+    Metamaps.TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html())
+
+    // initialize topic card draggability and resizability
+    $('.showcard').draggable({
+      handle: '.metacodeImage'
+    })
+
+    embedly('on', 'card.rendered', self.embedlyCardRendered)
+  },
+  /**
+   * Will open the Topic Card for the node that it's passed
+   * @param {$jit.Graph.Node} node
+   */
+  showCard: function (node) {
+    var self = Metamaps.TopicCard
+
+    var topic = node.getData('topic')
+
+    self.openTopicCard = topic
+    self.authorizedToEdit = topic.authorizeToEdit(Metamaps.Active.Mapper)
+    // populate the card that's about to show with the right topics data
+    self.populateShowCard(topic)
+    $('.showcard').fadeIn('fast')
+  },
+  hideCard: function () {
+    var self = Metamaps.TopicCard
+
+    $('.showcard').fadeOut('fast')
+    self.openTopicCard = null
+    self.authorizedToEdit = false
+  },
+  embedlyCardRendered: function (iframe) {
+    var self = Metamaps.TopicCard
+
+    $('#embedlyLinkLoader').hide()
+
+    // means that the embedly call returned 404 not found
+    if ($('#embedlyLink')[0]) {
+      $('#embedlyLink').css('display', 'block').fadeIn('fast')
+      $('.embeds').addClass('nonEmbedlyLink')
+    }
+
+    $('.CardOnGraph').addClass('hasAttachment')
+    if (self.authorizedToEdit) {
+      $('.embeds').append('<div id="linkremove"></div>')
+      $('#linkremove').click(self.removeLink)
+    }
+  },
+  removeLink: function () {
+    var self = Metamaps.TopicCard
+    self.openTopicCard.save({
+      link: null
+    })
+    $('.embeds').empty().removeClass('nonEmbedlyLink')
+    $('#addLinkInput input').val('')
+    $('.attachments').removeClass('hidden')
+    $('.CardOnGraph').removeClass('hasAttachment')
+  },
+  bindShowCardListeners: function (topic) {
+    var self = Metamaps.TopicCard
+    var showCard = document.getElementById('showcard')
+
+    var authorized = self.authorizedToEdit
+
+    // get mapper image
+    var setMapperImage = function (mapper) {
+      $('.contributorIcon').attr('src', mapper.get('image'))
+    }
+    Metamaps.Mapper.get(topic.get('user_id'), setMapperImage)
+
+    // starting embed.ly
+    var resetFunc = function () {
+      $('#addLinkInput input').val('')
+      $('#addLinkInput input').focus()
+    }
+    var inputEmbedFunc = function (event) {
+      var element = this
+      setTimeout(function () {
+        var text = $(element).val()
+        if (event.type == 'paste' || (event.type == 'keyup' && event.which == 13)) {
+          // TODO evaluate converting this to '//' no matter what (infer protocol)
+          if (text.slice(0, 7) !== 'http://' &&
+            text.slice(0, 8) !== 'https://' &&
+            text.slice(0, 2) !== '//') {
+            text = '//' + text
+          }
+          topic.save({
+            link: text
+          })
+          var embedlyEl = $('<a/>', {
+            id: 'embedlyLink',
+            'data-card-description': '0',
+            href: text
+          }).html(text)
+          $('.attachments').addClass('hidden')
+          $('.embeds').append(embedlyEl)
+          $('.embeds').append('<div id="embedlyLinkLoader"></div>')
+          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) {
+            self.handleInvalidLink()
+          }
+        }
+      }, 100)
+    }
+    $('#addLinkReset').click(resetFunc)
+    $('#addLinkInput input').bind('paste keyup', inputEmbedFunc)
+
+    // 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'))
+      if (!e) {
+        self.handleInvalidLink()
+      }
+    }
+
+    var selectingMetacode = false
+    // attach the listener that shows the metacode title when you hover over the image
+    $('.showcard .metacodeImage').mouseenter(function () {
+      $('.showcard .icon').css('z-index', '4')
+      $('.showcard .metacodeTitle').show()
+    })
+    $('.showcard .linkItem.icon').mouseleave(function () {
+      if (!selectingMetacode) {
+        $('.showcard .metacodeTitle').hide()
+        $('.showcard .icon').css('z-index', '1')
+      }
+    })
+
+    var metacodeLiClick = function () {
+      selectingMetacode = false
+      var metacodeId = parseInt($(this).attr('data-id'))
+      var metacode = Metamaps.Metacodes.get(metacodeId)
+      $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
+        .append('<div class="expandMetacodeSelect"></div>')
+        .attr('class', 'metacodeTitle mbg' + metacode.id)
+      $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')')
+      topic.save({
+        metacode_id: metacode.id
+      })
+      Metamaps.Visualize.mGraph.plot()
+      $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
+      $('.metacodeTitle').hide()
+      $('.showcard .icon').css('z-index', '1')
+    }
+
+    var openMetacodeSelect = function (event) {
+      var windowWidth
+      var showcardLeft
+      var TOPICCARD_WIDTH = 300
+      var METACODESELECT_WIDTH = 404
+      var distanceFromEdge
+
+      var MAX_METACODELIST_HEIGHT = 270
+      var windowHeight
+      var showcardTop
+      var topicTitleHeight
+      var distanceFromBottom
+
+      if (!selectingMetacode) {
+        selectingMetacode = true
+
+        // this is to make sure the metacode
+        // select is accessible onscreen, when opened
+        // while topic card is close to the right
+        // edge of the screen
+        windowWidth = $(window).width()
+        showcardLeft = parseInt($('.showcard').css('left'))
+        distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH)
+        if (distanceFromEdge < METACODESELECT_WIDTH) {
+          $('.metacodeSelect').addClass('onRightEdge')
+        }
+
+        // this is to make sure the metacode
+        // select is accessible onscreen, when opened
+        // while topic card is close to the bottom
+        // edge of the screen
+        windowHeight = $(window).height()
+        showcardTop = parseInt($('.showcard').css('top'))
+        topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'))
+        heightOfSetList = $('.showcard .metacodeSelect').height()
+        distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight)
+        if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
+          $('.metacodeSelect').addClass('onBottomEdge')
+        }
+
+        $('.metacodeSelect').show()
+        event.stopPropagation()
+      }
+    }
+
+    var hideMetacodeSelect = function () {
+      selectingMetacode = false
+      $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
+      $('.metacodeTitle').hide()
+      $('.showcard .icon').css('z-index', '1')
+    }
+
+    if (authorized) {
+      $('.showcard .metacodeTitle').click(openMetacodeSelect)
+      $('.showcard').click(hideMetacodeSelect)
+      $('.metacodeSelect > ul > li').click(function (event) {
+        event.stopPropagation()
+      })
+      $('.metacodeSelect li li').click(metacodeLiClick)
+
+      var bipName = $(showCard).find('.best_in_place_name')
+      bipName.bind('best_in_place:activate', function () {
+        var $el = bipName.find('textarea')
+        var el = $el[0]
+
+        $el.attr('maxlength', '140')
+
+        $('.showcard .title').append('<div class="nameCounter forTopic"></div>')
+
+        var callback = function (data) {
+          $('.nameCounter.forTopic').html(data.all + '/140')
+        }
+        Countable.live(el, callback)
+      })
+      bipName.bind('best_in_place:deactivate', function () {
+        $('.nameCounter.forTopic').remove()
+      })
+
+      // bind best_in_place ajax callbacks
+      bipName.bind('ajax:success', function () {
+        var name = Metamaps.Util.decodeEntities($(this).html())
+        topic.set('name', name)
+        topic.trigger('saved')
+      })
+
+      $(showCard).find('.best_in_place_desc').bind('ajax:success', function () {
+        this.innerHTML = this.innerHTML.replace(/\r/g, '')
+        var desc = $(this).html() === $(this).data('nil') ? '' : $(this).html()
+        topic.set('desc', desc)
+        topic.trigger('saved')
+      })
+    }
+
+    var permissionLiClick = function (event) {
+      selectingPermission = false
+      var permission = $(this).attr('class')
+      topic.save({
+        permission: permission,
+        defer_to_map_id: null
+      })
+      $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2))
+      $('.showcard .permissionSelect').remove()
+      event.stopPropagation()
+    }
+
+    var openPermissionSelect = function (event) {
+      if (!selectingPermission) {
+        selectingPermission = true
+        $(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
+        if ($(this).hasClass('co')) {
+          $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>')
+        } else if ($(this).hasClass('pu')) {
+          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>')
+        } else if ($(this).hasClass('pr')) {
+          $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>')
+        }
+        $('.showcard .permissionSelect li').click(permissionLiClick)
+        event.stopPropagation()
+      }
+    }
+
+    var hidePermissionSelect = function () {
+      selectingPermission = false
+      $('.showcard .yourTopic .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
+      $('.showcard .permissionSelect').remove()
+    }
+    // ability to change permission
+    var selectingPermission = false
+    if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
+      $('.showcard .yourTopic .mapPerm').click(openPermissionSelect)
+      $('.showcard').click(hidePermissionSelect)
+    }
+
+    $('.links .mapCount').unbind().click(function (event) {
+      $('.mapCount .tip').toggle()
+      $('.showcard .hoverTip').toggleClass('hide')
+      event.stopPropagation()
+    })
+    $('.mapCount .tip').unbind().click(function (event) {
+      event.stopPropagation()
+    })
+    $('.showcard').unbind('.hideTip').bind('click.hideTip', function () {
+      $('.mapCount .tip').hide()
+      $('.showcard .hoverTip').removeClass('hide')
+    })
+
+    $('.mapCount .tip li a').click(Metamaps.Router.intercept)
+
+    var originalText = $('.showMore').html()
+    $('.mapCount .tip .showMore').unbind().toggle(
+      function (event) {
+        $('.extraText').toggleClass('hideExtra')
+        $('.showMore').html('Show less...')
+      },
+      function (event) {
+        $('.extraText').toggleClass('hideExtra')
+        $('.showMore').html(originalText)
+      })
+
+    $('.mapCount .tip showMore').unbind().click(function (event) {
+      event.stopPropagation()
+    })
+  },
+  handleInvalidLink: function () {
+    var self = Metamaps.TopicCard
+
+    self.removeLink()
+    Metamaps.GlobalUI.notifyUser('Invalid link')
+  },
+  populateShowCard: function (topic) {
+    var self = Metamaps.TopicCard
+
+    var showCard = document.getElementById('showcard')
+
+    $(showCard).find('.permission').remove()
+
+    var topicForTemplate = self.buildObject(topic)
+    var html = self.generateShowcardHTML.render(topicForTemplate)
+
+    if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
+      var perm = document.createElement('div')
+
+      var string = 'permission canEdit'
+      if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) string += ' yourTopic'
+      perm.className = string
+      perm.innerHTML = html
+      showCard.appendChild(perm)
+    } else {
+      var perm = document.createElement('div')
+      perm.className = 'permission cannotEdit'
+      perm.innerHTML = html
+      showCard.appendChild(perm)
+    }
+
+    Metamaps.TopicCard.bindShowCardListeners(topic)
+  },
+  generateShowcardHTML: null, // will be initialized into a Hogan template within init function
+  // generateShowcardHTML
+  buildObject: function (topic) {
+    var self = Metamaps.TopicCard
+
+    var nodeValues = {}
+
+    var authorized = topic.authorizeToEdit(Metamaps.Active.Mapper)
+
+    if (!authorized) {
+    } else {
+    }
+
+    var desc_nil = 'Click to add description...'
+
+    nodeValues.attachmentsHidden = ''
+    if (topic.get('link') && topic.get('link') !== '') {
+      nodeValues.embeds = '<a href="' + topic.get('link') + '" id="embedlyLink" target="_blank" data-card-description="0">'
+      nodeValues.embeds += topic.get('link')
+      nodeValues.embeds += '</a><div id="embedlyLinkLoader"></div>'
+      nodeValues.attachmentsHidden = 'hidden'
+      nodeValues.hasAttachment = 'hasAttachment'
+    } else {
+      nodeValues.embeds = ''
+      nodeValues.hasAttachment = ''
+    }
+
+    if (authorized) {
+      nodeValues.attachments = '<div class="addLink"><div id="addLinkIcon"></div>'
+      nodeValues.attachments += '<div id="addLinkInput"><input placeholder="Enter or paste a link"></input>'
+      nodeValues.attachments += '<div id="addLinkReset"></div></div></div>'
+    } else {
+      nodeValues.attachmentsHidden = 'hidden'
+      nodeValues.attachments = ''
+    }
+
+    var inmapsAr = topic.get('inmaps')
+    var inmapsLinks = topic.get('inmapsLinks')
+    nodeValues.inmaps = ''
+    if (inmapsAr.length < 6) {
+      for (i = 0; i < inmapsAr.length; i++) {
+        var url = '/maps/' + inmapsLinks[i]
+        nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>'
+      }
+    } else {
+      for (i = 0; i < 5; i++) {
+        var url = '/maps/' + inmapsLinks[i]
+        nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>'
+      }
+      extra = inmapsAr.length - 5
+      nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>'
+      for (i = 5; i < inmapsAr.length; i++) {
+        var url = '/maps/' + inmapsLinks[i]
+        nodeValues.inmaps += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsAr[i] + '</a></li>'
+      }
+    }
+    nodeValues.permission = topic.get('calculated_permission')
+    nodeValues.mk_permission = topic.get('calculated_permission').substring(0, 2)
+    nodeValues.map_count = topic.get('map_count').toString()
+    nodeValues.synapse_count = topic.get('synapse_count').toString()
+    nodeValues.id = topic.isNew() ? topic.cid : topic.id
+    nodeValues.metacode = topic.getMetacode().get('name')
+    nodeValues.metacode_class = 'mbg' + topic.get('metacode_id')
+    nodeValues.imgsrc = topic.getMetacode().get('icon')
+    nodeValues.name = topic.get('name')
+    nodeValues.userid = topic.get('user_id')
+    nodeValues.username = topic.get('user_name')
+    nodeValues.date = topic.getDate()
+    // the code for this is stored in /views/main/_metacodeOptions.html.erb
+    nodeValues.metacode_select = $('#metacodeOptions').html()
+    nodeValues.desc_nil = desc_nil
+    nodeValues.desc = (topic.get('desc') == '' && authorized) ? desc_nil : topic.get('desc')
+    return nodeValues
+  }
+}; // end Metamaps.TopicCard

app/assets/javascripts/src/Metamaps.Util.js

@@ -0,0 +1,130 @@
+/* global Metamaps */
+
+/*
+ * Metamaps.Util.js
+ *
+ * Dependencies:
+ *  - Metamaps.Visualize
+ */
+
+Metamaps.Util = {
+  // helper function to determine how many lines are needed
+  // Line Splitter Function
+  // copyright Stephen Chapman, 19th April 2006
+  // you may copy this code but please keep the copyright notice as well
+  splitLine: function (st, n) {
+    var b = ''
+    var s = st ? st : ''
+    while (s.length > n) {
+      var c = s.substring(0, n)
+      var d = c.lastIndexOf(' ')
+      var e = c.lastIndexOf('\n')
+      if (e != -1) d = e
+      if (d == -1) d = n
+      b += c.substring(0, d) + '\n'
+      s = s.substring(d + 1)
+    }
+    return b + s
+  },
+  nowDateFormatted: function () {
+    var date = new Date(Date.now())
+    var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
+    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+    var year = date.getFullYear()
+
+    return month + '/' + day + '/' + year
+  },
+  decodeEntities: function (desc) {
+    var str, temp = document.createElement('p')
+    temp.innerHTML = desc // browser handles the topics
+    str = temp.textContent || temp.innerText
+    temp = null // delete the element
+    return str
+  }, // decodeEntities
+  getDistance: function (p1, p2) {
+    return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2))
+  },
+  coordsToPixels: function (coords) {
+    if (Metamaps.Visualize.mGraph) {
+      var canvas = Metamaps.Visualize.mGraph.canvas,
+        s = canvas.getSize(),
+        p = canvas.getPos(),
+        ox = canvas.translateOffsetX,
+        oy = canvas.translateOffsetY,
+        sx = canvas.scaleOffsetX,
+        sy = canvas.scaleOffsetY
+      var pixels = {
+        x: (coords.x / (1 / sx)) + p.x + s.width / 2 + ox,
+        y: (coords.y / (1 / sy)) + p.y + s.height / 2 + oy
+      }
+      return pixels
+    } else {
+      return {
+        x: 0,
+        y: 0
+      }
+    }
+  },
+  pixelsToCoords: function (pixels) {
+    var coords
+    if (Metamaps.Visualize.mGraph) {
+      var canvas = Metamaps.Visualize.mGraph.canvas,
+        s = canvas.getSize(),
+        p = canvas.getPos(),
+        ox = canvas.translateOffsetX,
+        oy = canvas.translateOffsetY,
+        sx = canvas.scaleOffsetX,
+        sy = canvas.scaleOffsetY
+      coords = {
+        x: (pixels.x - p.x - s.width / 2 - ox) * (1 / sx),
+        y: (pixels.y - p.y - s.height / 2 - oy) * (1 / sy),
+      }
+    } else {
+      coords = {
+        x: 0,
+        y: 0
+      }
+    }
+    return coords
+  },
+  getPastelColor: function () {
+    var r = (Math.round(Math.random() * 127) + 127).toString(16)
+    var g = (Math.round(Math.random() * 127) + 127).toString(16)
+    var b = (Math.round(Math.random() * 127) + 127).toString(16)
+    return Metamaps.Util.colorLuminance('#' + r + g + b, -0.4)
+  },
+  // darkens a hex value by 'lum' percentage
+  colorLuminance: function (hex, lum) {
+    // validate hex string
+    hex = String(hex).replace(/[^0-9a-f]/gi, '')
+    if (hex.length < 6) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+    }
+    lum = lum || 0
+
+    // convert to decimal and change luminosity
+    var rgb = '#', c, i
+    for (i = 0; i < 3; i++) {
+      c = parseInt(hex.substr(i * 2, 2), 16)
+      c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16)
+      rgb += ('00' + c).substr(c.length)
+    }
+
+    return rgb
+  },
+  generateOptionsList: function (data) {
+    var newlist = ''
+    for (var i = 0; i < data.length; i++) {
+      newlist = newlist + '<option value="' + data[i]['id'] + '">' + data[i]['1'][1] + '</option>'
+    }
+    return newlist
+  },
+  checkURLisImage: function (url) {
+    // when the page reloads the following regular expression will be screwed up
+    // please replace it with this one before you save: /*backslashhere*.(jpeg|jpg|gif|png)$/
+    return (url.match(/\.(jpeg|jpg|gif|png)$/) != null)
+  },
+  checkURLisYoutubeVideo: function (url) {
+    return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null)
+  }
+}; // end Metamaps.Util

app/assets/javascripts/src/Metamaps.Visualize.js

@@ -0,0 +1,207 @@
+/* global Metamaps, $ */
+/*
+ * Metamaps.Visualize
+ *
+ * Dependencies:
+ *  - Metamaps.Active
+ *  - Metamaps.JIT
+ *  - Metamaps.Loading
+ *  - Metamaps.Metacodes
+ *  - Metamaps.Router
+ *  - Metamaps.Synapses
+ *  - Metamaps.TopicCard
+ *  - Metamaps.Topics
+ *  - Metamaps.Touch
+ *  - Metamaps.Visualize
+ */
+
+Metamaps.Visualize = {
+  mGraph: null, // a reference to the graph object.
+  cameraPosition: null, // stores the camera position when using a 3D visualization
+  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
+  init: function () {
+    var self = Metamaps.Visualize
+    // disable awkward dragging of the canvas element that would sometimes happen
+    $('#infovis-canvas').on('dragstart', function (event) {
+      event.preventDefault()
+    })
+
+    // prevent touch events on the canvas from default behaviour
+    $('#infovis-canvas').bind('touchstart', function (event) {
+      event.preventDefault()
+      self.mGraph.events.touched = true
+    })
+
+    // prevent touch events on the canvas from default behaviour
+    $('#infovis-canvas').bind('touchmove', function (event) {
+      // Metamaps.JIT.touchPanZoomHandler(event)
+    })
+
+    // prevent touch events on the canvas from default behaviour
+    $('#infovis-canvas').bind('touchend touchcancel', function (event) {
+      lastDist = 0
+      if (!self.mGraph.events.touchMoved && !Metamaps.Touch.touchDragNode) Metamaps.TopicCard.hideCurrentCard()
+      self.mGraph.events.touched = self.mGraph.events.touchMoved = false
+      Metamaps.Touch.touchDragNode = false
+    })
+  },
+  computePositions: function () {
+    var self = Metamaps.Visualize,
+      mapping
+
+    if (self.type == 'RGraph') {
+      var i, l, startPos, endPos, topic, synapse
+
+      self.mGraph.graph.eachNode(function (n) {
+        topic = Metamaps.Topics.get(n.id)
+        topic.set({ node: n }, { silent: true })
+        topic.updateNode()
+
+        n.eachAdjacency(function (edge) {
+          if (!edge.getData('init')) {
+            edge.setData('init', true)
+
+            l = edge.getData('synapseIDs').length
+            for (i = 0; i < l; i++) {
+              synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i])
+              synapse.set({ edge: edge }, { silent: true })
+              synapse.updateEdge()
+            }
+          }
+        })
+
+        var pos = n.getPos()
+        pos.setc(-200, -200)
+      })
+      self.mGraph.compute('end')
+    } else if (self.type == 'ForceDirected') {
+      var i, l, startPos, endPos, topic, synapse
+
+      self.mGraph.graph.eachNode(function (n) {
+        topic = Metamaps.Topics.get(n.id)
+        topic.set({ node: n }, { silent: true })
+        topic.updateNode()
+        mapping = topic.getMapping()
+
+        n.eachAdjacency(function (edge) {
+          if (!edge.getData('init')) {
+            edge.setData('init', true)
+
+            l = edge.getData('synapseIDs').length
+            for (i = 0; i < l; i++) {
+              synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i])
+              synapse.set({ edge: edge }, { silent: true })
+              synapse.updateEdge()
+            }
+          }
+        })
+
+        startPos = new $jit.Complex(0, 0)
+        endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'))
+        n.setPos(startPos, 'start')
+        n.setPos(endPos, 'end')
+      })
+    } else if (self.type == 'ForceDirected3D') {
+      self.mGraph.compute()
+    }
+  },
+  /**
+   * render does the heavy lifting of creating the engine that renders the graph with the properties we desire
+   *
+   */
+  render: function () {
+    var self = Metamaps.Visualize, RGraphSettings, FDSettings
+
+    if (self.type == 'RGraph' && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) {
+      RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings)
+
+      $jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings)
+      $jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings)
+
+      RGraphSettings.width = $(document).width()
+      RGraphSettings.height = $(document).height()
+      RGraphSettings.background = Metamaps.JIT.RGraph.background
+      RGraphSettings.levelDistance = Metamaps.JIT.RGraph.levelDistance
+
+      self.mGraph = new $jit.RGraph(RGraphSettings)
+    } else if (self.type == 'ForceDirected' && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) {
+      FDSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings)
+
+      $jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings)
+      $jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings)
+
+      FDSettings.width = $('body').width()
+      FDSettings.height = $('body').height()
+
+      self.mGraph = new $jit.ForceDirected(FDSettings)
+    } else if (self.type == 'ForceDirected3D' && !self.mGraph) {
+      // init ForceDirected3D
+      self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings)
+      self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position
+    } else {
+      self.mGraph.graph.empty()
+    }
+
+    function runAnimation () {
+      Metamaps.Loading.hide()
+      // load JSON data, if it's not empty
+      if (!self.loadLater) {
+        // load JSON data.
+        var rootIndex = 0
+        if (Metamaps.Active.Topic) {
+          var node = _.find(Metamaps.JIT.vizData, function (node) {
+            return node.id === Metamaps.Active.Topic.id
+          })
+          rootIndex = _.indexOf(Metamaps.JIT.vizData, node)
+        }
+        self.mGraph.loadJSON(Metamaps.JIT.vizData, rootIndex)
+        // compute positions and plot.
+        self.computePositions()
+        self.mGraph.busy = true
+        if (self.type == 'RGraph') {
+          self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate)
+        } else if (self.type == 'ForceDirected') {
+          self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout)
+        } else if (self.type == 'ForceDirected3D') {
+          self.mGraph.animate(Metamaps.JIT.ForceDirected.animateFDLayout)
+        }
+      }
+    }
+    // hold until all the needed metacode images are loaded
+    // hold for a maximum of 80 passes, or 4 seconds of waiting time
+    var tries = 0
+    function hold () {
+      var unique = _.uniq(Metamaps.Topics.models, function (metacode) { return metacode.get('metacode_id'); }),
+        requiredMetacodes = _.map(unique, function (metacode) { return metacode.get('metacode_id'); }),
+        loadedCount = 0
+
+      _.each(requiredMetacodes, function (metacode_id) {
+        var metacode = Metamaps.Metacodes.get(metacode_id),
+          img = metacode ? metacode.get('image') : false
+
+        if (img && (img.complete || (typeof img.naturalWidth !== 'undefined' && img.naturalWidth !== 0))) {
+          loadedCount += 1
+        }
+      })
+
+      if (loadedCount === requiredMetacodes.length || tries > 80) runAnimation()
+      else setTimeout(function () { tries++; hold() }, 50)
+    }
+    hold()
+
+    // update the url now that the map is ready
+    clearTimeout(Metamaps.Router.timeoutId)
+    Metamaps.Router.timeoutId = setTimeout(function () {
+      var m = Metamaps.Active.Map
+      var t = Metamaps.Active.Topic
+
+      if (m && window.location.pathname !== '/maps/' + m.id) {
+        Metamaps.Router.navigate('/maps/' + m.id)
+      }
+      else if (t && window.location.pathname !== '/topics/' + t.id) {
+        Metamaps.Router.navigate('/topics/' + t.id)
+      }
+    }, 800)
+  }
+}; // end Metamaps.Visualize

app/assets/javascripts/src/check-canvas-support.js

@@ -0,0 +1,15 @@
+// TODO document this user agent function
+var labelType, useGradients, nativeTextSupport, animate
+;(function () {
+  var ua = navigator.userAgent,
+    iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
+    typeOfCanvas = typeof HTMLCanvasElement,
+    nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
+    textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function')
+  // I'm setting this based on the fact that ExCanvas provides text support for IE
+  // and that as of today iPhone/iPad current text support is lame
+  labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML'
+  nativeTextSupport = labelType == 'Native'
+  useGradients = nativeCanvasSupport
+  animate = !(iStuff || !nativeCanvasSupport)
+})()

app/assets/stylesheets/application.css.erb

@@ -1569,6 +1569,11 @@ h3.filterBox {
     background-repeat: no-repeat;
     text-align: left;
 }
+
+.commonsMap .mapContributors {
+    visibility: hidden;
+}
+
 .mapContributors {
     position: relative;
     height: 30px;
@@ -1576,6 +1581,7 @@ h3.filterBox {
     padding: 0;
     width: 64px;
 }
+
 #mapContribs {
     float: left;
     border: 2px solid #424242;
@@ -1591,7 +1597,7 @@ h3.filterBox {
 #mapContribs.multiple {
     box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242,4px 3px 0 0 #B5B5B5,5px 4px 0 0 #424242;
 }
-.mapContributors span {
+.mapContributors span.count {
     height: 20px;
     padding-top: 5px;
     padding-left: 8px;
@@ -1626,10 +1632,11 @@ h3.filterBox {
 .mapContributors .tip {
     top: 45px;
     left: -10px;
+    min-width: 200px;
 }
 
 .mapContributors .tip ul {
-    max-height: 188px;
+    max-height: 144px;
     overflow-y: auto;
 }
 
@@ -1652,7 +1659,7 @@ h3.filterBox {
 .mapContributors .tip li a {
     color: white;
 }
-.mapContributors div:after {
+.mapContributors div.tip:after {
     content: '';
     position: absolute;
     top: -4px;
@@ -1672,6 +1679,90 @@ h3.filterBox {
     border-radius: 14px;
 }
 
+.mapContributors span.twitter-typeahead {
+    padding: 0;
+}
+
+.collabSearchField {
+    text-align: left;
+}
+
+.collabNameWrapper {
+    float: left;
+}
+
+.collabIconWrapper img.icon {
+    position: relative;
+    top: 0;
+    left: 0;
+}
+
+.collabIconWrapper {
+    position: relative;
+    float: left;
+    padding: 0 4px;
+}
+
+.mapContributors .collabName {
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 28px;
+    color: #424242;
+    padding: 0 4px;
+}
+
+span.removeCollaborator {
+    position: absolute;
+    top: 11px;
+    right: 8px;
+    height: 16px;
+    width: 16px;
+    background-image: url(<%= asset_data_uri('removecollab_sprite.png') %>);
+    cursor: pointer;
+}
+
+span.removeCollaborator:hover {
+    background-position: -16px 0;
+}
+
+span.addCollab {
+    width: 16px;
+    height: 16px;
+    background-image: url(<%= asset_data_uri('addcollab_sprite.png') %>);
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 12px 0 10px;
+}
+
+input.collaboratorSearchField {
+    background: #FFFFFF;
+    height: 14px;
+    margin: 0;
+    padding: 10px 6px;
+    border: none;
+    border-radius: 2px;
+    outline: none;
+    font-size: 14px;
+    line-height: 14px;
+    color: #424242;
+    font-family: 'din-medium', helvetica, sans-serif;
+}
+
+.tt-dataset.tt-dataset-collaborators {
+    padding: 2px;
+    background: #E0E0E0;
+    min-width: 156px;
+    border-radius: 2px;
+}
+
+.tt-dataset.tt-dataset  .collabResult {
+    padding: 4px;
+}
+
+.collabResult.tt-suggestion.tt-cursor, .collabResult.tt-suggestion:hover {
+    background-color: #CCCCCC;
+}
+
 .mapInfoBox .mapPermission .tooltips {
     top: -20px;
     right: 36px;

app/assets/stylesheets/clean.css.erb

@@ -681,6 +681,10 @@
     background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
     background-position: 0 0;
 }
+.exploreMapsCenter .sharedMaps .exploreMapsIcon {
+    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
+    background-position: -96px 0;
+}
 .exploreMapsCenter .activeMaps .exploreMapsIcon {
     background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
     background-position: -32px 0;
@@ -698,6 +702,9 @@
 .featuredMaps:hover .exploreMapsIcon, .featuredMaps.active .exploreMapsIcon {
     background-position: -64px -32px;
 }
+.sharedMaps:hover .exploreMapsIcon, .sharedMaps.active .exploreMapsIcon {
+    background-position: -96px -32px;
+}
 
 .mapsWrapper {
 	/*overflow-y: auto; */

app/controllers/application_controller.rb

@@ -32,7 +32,11 @@ class ApplicationController < ActionController::Base
   end
 
   def handle_unauthorized
-    head :forbidden # TODO make this better
+    if authenticated?
+      head :forbidden # TODO make this better
+    else
+     redirect_to new_user_session_path, notice: "Try signing in to do that." 
+    end
   end
 
 private

app/controllers/main_controller.rb

@@ -4,7 +4,7 @@ class MainController < ApplicationController
   include UsersHelper
   include SynapsesHelper
 
-  after_action :verify_policy_scoped, except: :requestinvite
+  after_action :verify_policy_scoped, except: [:requestinvite, :searchmappers]
    
   respond_to :html, :json
   
@@ -133,9 +133,9 @@ class MainController < ApplicationController
       #remove "mapper:" if appended at beginning
       term = term[7..-1] if term.downcase[0..6] == "mapper:"
       search = term.downcase + '%'
+
       skip_policy_scope # TODO builder = policy_scope(User)
-      builder = User
+      builder = User.where('LOWER("name") like ?', search)
-      builder = builder.where('LOWER("name") like ?', search)
       @mappers = builder.order(:name)
     else
       @mappers = []

app/controllers/mappings_controller.rb

@@ -45,6 +45,13 @@ class MappingsController < ApplicationController
     @mapping = Mapping.find(params[:id])
     authorize @mapping
 
+    mappable = @mapping.mappable
+    if mappable.defer_to_map
+      mappable.permission = mappable.defer_to_map.permission
+      mappable.defer_to_map_id = nil
+      mappable.save
+    end
+
     @mapping.destroy
 
     head :no_content 

app/controllers/maps_controller.rb

@@ -1,8 +1,7 @@
 class MapsController < ApplicationController
-
+    before_action :require_user, only: [:create, :update, :access, :screenshot, :events, :destroy]
-    before_action :require_user, only: [:create, :update, :screenshot, :events, :destroy]
+    after_action :verify_authorized, except: [:activemaps, :featuredmaps, :mymaps, :sharedmaps, :usermaps, :events]
-    after_action :verify_authorized, except: [:activemaps, :featuredmaps, :mymaps, :usermaps, :events]
+    after_action :verify_policy_scoped, only: [:activemaps, :featuredmaps, :mymaps, :sharedmaps, :usermaps]
-    after_action :verify_policy_scoped, only: [:activemaps, :featuredmaps, :mymaps, :usermaps]
 
     respond_to :html, :json, :csv
 
@@ -53,6 +52,21 @@ class MapsController < ApplicationController
         end
     end
 
+    # GET /explore/shared
+    def sharedmaps
+        return redirect_to activemaps_url if !authenticated?
+
+        page = params[:page].present? ? params[:page] : 1
+        @maps = policy_scope(
+          Map.where("maps.id IN (?)", current_user.shared_maps.map(&:id))
+        ).order("updated_at DESC").page(page).per(20)
+
+        respond_to do |format|
+            format.html { respond_with(@maps, @user) }
+            format.json { render json: @maps }
+        end
+    end
+
     # GET /explore/mapper/:id
     def usermaps
         page = params[:page].present? ? params[:page] : 1
@@ -74,15 +88,13 @@ class MapsController < ApplicationController
         respond_to do |format|
             format.html {
                 @allmappers = @map.contributors
-                @alltopics = @map.topics.to_a.delete_if {|t| t.permission == "private" && (!authenticated? || (authenticated? && current_user.id != t.user_id)) }
+                @allcollaborators = @map.editors
-                @allsynapses = @map.synapses.to_a.delete_if {|s| s.permission == "private" && (!authenticated? || (authenticated? && current_user.id != s.user_id)) }
+                @alltopics = @map.topics.to_a.delete_if {|t| not policy(t).show? }
-                @allmappings = @map.mappings.to_a.delete_if {|m| 
+                @allsynapses = @map.synapses.to_a.delete_if {|s| not policy(s).show? }
-                    object = m.mappable
+                @allmappings = @map.mappings.to_a.delete_if {|m| not policy(m).show? }
-                    !object || (object.permission == "private" && (!authenticated? || (authenticated? && current_user.id != object.user_id)))
-                }
                 @allmessages = @map.messages.sort_by(&:created_at)
 
-                respond_with(@allmappers, @allmappings, @allsynapses, @alltopics, @allmessages, @map)
+                respond_with(@allmappers, @allcollaborators, @allmappings, @allsynapses, @alltopics, @allmessages, @map)
             }
             format.json { render json: @map }
             format.csv { redirect_to action: :export, format: :csv }
@@ -127,12 +139,11 @@ class MapsController < ApplicationController
         authorize @map
 
         @allmappers = @map.contributors
-        @alltopics = @map.topics.to_a.delete_if {|t| t.permission == "private" && (!authenticated? || (authenticated? && current_user.id != t.user_id)) }
+        @allcollaborators = @map.editors
-        @allsynapses = @map.synapses.to_a.delete_if {|s| s.permission == "private" && (!authenticated? || (authenticated? && current_user.id != s.user_id)) }
+        @alltopics = @map.topics.to_a.delete_if {|t| not policy(t).show? }
-        @allmappings = @map.mappings.to_a.delete_if {|m| 
+        @allsynapses = @map.synapses.to_a.delete_if {|s| not policy(s).show? }
-            object = m.mappable
+        @allmappings = @map.mappings.to_a.delete_if {|m| not policy(m).show? }
-            !object || (object.permission == "private" && (!authenticated? || (authenticated? && current_user.id != object.user_id)))
+
-        }
 
         @json = Hash.new()
         @json['map'] = @map
@@ -140,6 +151,7 @@ class MapsController < ApplicationController
         @json['synapses'] = @allsynapses
         @json['mappings'] = @allmappings
         @json['mappers'] = @allmappers
+        @json['collaborators'] = @allcollaborators
         @json['messages'] = @map.messages.sort_by(&:created_at)
 
         respond_to do |format|
@@ -215,6 +227,36 @@ class MapsController < ApplicationController
         end
     end
 
+    # POST maps/:id/access
+    def access
+        @map = Map.find(params[:id])
+        authorize @map
+        userIds = params[:access] || []
+        added = userIds.select { |uid|
+          user = User.find(uid)
+          if user.nil? || (current_user && user == current_user)
+            false
+          else 
+            not @map.collaborators.include?(user)
+          end
+        }
+        removed = @map.collaborators.select { |user| not userIds.include?(user.id.to_s) }.map(&:id)
+        added.each { |uid|
+          um = UserMap.create({ user_id: uid.to_i, map_id: @map.id })
+          user = User.find(uid.to_i)
+          MapMailer.invite_to_edit_email(@map, current_user, user).deliver_later
+        }
+        removed.each { |uid|
+          @map.user_maps.select{ |um| um.user_id == uid }.each{ |um| um.destroy }
+        }
+
+      respond_to do |format|
+        format.json do
+          render :json => { :message => "Successfully altered edit permissions" }
+        end
+      end
+    end
+    
     # POST maps/:id/upload_screenshot
     def screenshot
       @map = Map.find(params[:id])

app/controllers/synapses_controller.rb

@@ -51,7 +51,7 @@ class SynapsesController < ApplicationController
   def destroy
     @synapse = Synapse.find(params[:id])
     authorize @synapse
-    @synapse.delete
+    @synapse.destroy
       
     respond_to do |format|
       format.json { head :no_content }

app/controllers/topics_controller.rb

@@ -150,7 +150,7 @@ puts @allsynapses.length
     @topic = Topic.find(params[:id])
     authorize @topic
 
-    @topic.delete
+    @topic.destroy
     respond_to do |format|
       format.json { head :no_content }
     end
@@ -159,6 +159,6 @@ puts @allsynapses.length
   private
 
   def topic_params
-    params.require(:topic).permit(:id, :name, :desc, :link, :permission, :user_id, :metacode_id)
+    params.require(:topic).permit(:id, :name, :desc, :link, :permission, :user_id, :metacode_id, :defer_to_map_id)
   end
 end

app/mailers/application_mailer.rb

@@ -0,0 +1,4 @@
+class ApplicationMailer < ActionMailer::Base
+  default from: "team@metamaps.cc"
+  layout 'mailer'
+end

app/mailers/map_mailer.rb

@@ -0,0 +1,10 @@
+class MapMailer < ApplicationMailer
+  default from: "team@metamaps.cc"
+
+  def invite_to_edit_email(map, inviter, invitee)
+    @inviter = inviter
+    @map = map
+    subject = @map.name + ' - Invitation to edit'
+    mail(to: invitee.email, subject: subject)
+  end
+end

app/models/map.rb

@@ -8,6 +8,9 @@ class Map < ActiveRecord::Base
   has_many :synapses, through: :synapsemappings, source: :mappable, source_type: "Synapse"
   has_many :messages, as: :resource, dependent: :destroy
 
+  has_many :user_maps, dependent: :destroy
+  has_many :collaborators, through: :user_maps, source: :user
+
   has_many :webhooks, as: :hookable
   has_many :events, -> { includes :user }, as: :eventable, dependent: :destroy
 
@@ -45,6 +48,10 @@ class Map < ActiveRecord::Base
     return contributors
   end
 
+  def editors
+    collaborators + [self.user]
+  end
+
   def topic_count
     topics.length
   end
@@ -65,6 +72,10 @@ class Map < ActiveRecord::Base
     contributors.length
   end
 
+  def collaborator_ids
+    collaborators.map(&:id)
+  end
+
   def screenshot_url
     screenshot.url(:thumb)
   end
@@ -78,7 +89,7 @@ class Map < ActiveRecord::Base
   end
 
   def as_json(options={})
-    json = super(:methods =>[:user_name, :user_image, :topic_count, :synapse_count, :contributor_count, :screenshot_url], :except => [:screenshot_content_type, :screenshot_file_size, :screenshot_file_name, :screenshot_updated_at])
+    json = super(:methods =>[:user_name, :user_image, :topic_count, :synapse_count, :contributor_count, :collaborator_ids, :screenshot_url], :except => [:screenshot_content_type, :screenshot_file_size, :screenshot_file_name, :screenshot_updated_at])
     json[:created_at_clean] = created_at_str
     json[:updated_at_clean] = updated_at_str
     json

app/models/synapse.rb

@@ -1,5 +1,6 @@
 class Synapse < ActiveRecord::Base
   belongs_to :user
+  belongs_to :defer_to_map, :class_name => 'Map',  :foreign_key => 'defer_to_map_id'
 
   belongs_to :topic1, :class_name => "Topic", :foreign_key => "node1_id"
   belongs_to :topic2, :class_name => "Topic", :foreign_key => "node2_id"
@@ -32,9 +33,29 @@ class Synapse < ActiveRecord::Base
   end
   # :nocov:
 
+  # :nocov:
+  def collaborator_ids
+    if defer_to_map
+      defer_to_map.editors.select{|mapper| not mapper == self.user }.map(&:id)
+    else
+      []
+    end
+  end
+  # :nocov:
+ 
+   # :nocov:
+  def calculated_permission
+    if defer_to_map
+      defer_to_map.permission
+    else
+      permission
+    end
+  end
+  # :nocov:
+  
   # :nocov:
   def as_json(options={})
-    super(:methods =>[:user_name, :user_image])
+    super(:methods =>[:user_name, :user_image, :calculated_permission, :collaborator_ids])
   end
   # :nocov:
   

app/models/topic.rb

@@ -2,6 +2,7 @@ class Topic < ActiveRecord::Base
   include TopicsHelper
 
   belongs_to :user
+  belongs_to :defer_to_map, :class_name => 'Map',  :foreign_key => 'defer_to_map_id'
 
   has_many :synapses1, :class_name => 'Synapse', :foreign_key => 'node1_id', dependent: :destroy
   has_many :synapses2, :class_name => 'Synapse', :foreign_key => 'node2_id', dependent: :destroy
@@ -11,6 +12,8 @@ class Topic < ActiveRecord::Base
   has_many :mappings, as: :mappable, dependent: :destroy
   has_many :maps, :through => :mappings
 
+  belongs_to :metacode
+
   validates :permission, presence: true
   validates :permission, inclusion: { in: Perm::ISSIONS.map(&:to_s) }
     
@@ -39,8 +42,6 @@ class Topic < ActiveRecord::Base
      topics1 + topics2
   end
 
-  belongs_to :metacode
-
   scope :relatives1, ->(topic_id = nil) { 
     includes(:topics1)
     .where('synapses.node1_id = ?', topic_id)
@@ -77,8 +78,24 @@ class Topic < ActiveRecord::Base
     maps.map(&:id)
   end
 
+  def calculated_permission
+    if defer_to_map
+      defer_to_map.permission
+    else
+      permission
+    end
+  end
+
   def as_json(options={})
-    super(:methods =>[:user_name, :user_image, :map_count, :synapse_count, :inmaps, :inmapsLinks])
+    super(:methods =>[:user_name, :user_image, :map_count, :synapse_count, :inmaps, :inmapsLinks, :calculated_permission, :collaborator_ids])
+  end
+
+  def collaborator_ids
+    if defer_to_map
+      defer_to_map.editors.select{|mapper| not mapper == self.user }.map(&:id)
+    else
+      []
+    end
   end
 
   # TODO move to a decorator?

app/models/user.rb

@@ -7,7 +7,9 @@ class User < ActiveRecord::Base
   has_many :maps
   has_many :mappings
   has_many :tokens
-
+  has_many :user_maps, dependent: :destroy
+  has_many :shared_maps, through: :user_maps, source: :map
+  
   after_create :generate_code
 
   devise :database_authenticatable, :recoverable, :rememberable, :trackable, :registerable

app/models/user_map.rb

@@ -0,0 +1,4 @@
+class UserMap < ActiveRecord::Base
+  belongs_to :map
+  belongs_to :user
+end

app/policies/map_policy.rb

@@ -4,7 +4,8 @@ class MapPolicy < ApplicationPolicy
       visible = ['public', 'commons']
       permission = 'maps.permission IN (?)'
       if user
-        scope.where(permission + ' OR maps.user_id = ?', visible, user.id)
+        shared_maps = user.shared_maps.map(&:id)
+        scope.where(permission + ' OR maps.id IN (?) OR maps.user_id = ?', visible, shared_maps, user.id)
       else
         scope.where(permission, visible)
       end
@@ -28,7 +29,7 @@ class MapPolicy < ApplicationPolicy
   end
 
   def show?
-    record.permission == 'commons' || record.permission == 'public' || record.user == user
+    record.permission == 'commons' || record.permission == 'public' || record.collaborators.include?(user) || record.user == user
   end
 
   def export?
@@ -48,7 +49,12 @@ class MapPolicy < ApplicationPolicy
   end
 
   def update?
-    user.present? && (record.permission == 'commons' || record.user == user)
+    user.present? && (record.permission == 'commons' || record.collaborators.include?(user) || record.user == user)
+  end
+
+  def access?
+    # note that this is to edit access
+    user.present? && record.user == user
   end
 
   def screenshot?

app/policies/synapse_policy.rb

@@ -4,7 +4,7 @@ class SynapsePolicy < ApplicationPolicy
       visible = ['public', 'commons']
       permission = 'synapses.permission IN (?)'
       if user
-        scope.where(permission + ' OR synapses.user_id = ?', visible, user.id)
+        scope.where(permission + ' OR synapses.defer_to_map_id IN (?) OR synapses.user_id = ?', visible, user.shared_maps.map(&:id), user.id)
       else
         scope.where(permission, visible)
       end
@@ -17,14 +17,29 @@ class SynapsePolicy < ApplicationPolicy
   end
 
   def show?
-    record.permission == 'commons' || record.permission == 'public' || record.user == user
+    if record.defer_to_map.present?
+      map_policy.show?
+    else
+      record.permission == 'commons' || record.permission == 'public' || record.user == user
+    end
   end
 
   def update?
-    user.present? && (record.permission == 'commons' || record.user == user)
+    if not user.present?
+      false
+    elsif record.defer_to_map.present?
+      map_policy.update? 
+    else 
+      record.permission == 'commons' || record.user == user
+    end
   end
 
   def destroy?
     record.user == user || admin_override
   end
+
+  # Helpers
+  def map_policy
+    @map_policy ||= Pundit.policy(user, record.defer_to_map)
+  end
 end

app/policies/topic_policy.rb

@@ -4,7 +4,7 @@ class TopicPolicy < ApplicationPolicy
       visible = ['public', 'commons']
       permission = 'topics.permission IN (?)'
       if user
-        scope.where(permission + ' OR topics.user_id = ?', visible, user.id)
+        scope.where(permission + ' OR topics.defer_to_map_id IN (?) OR topics.user_id = ?', visible, user.shared_maps.map(&:id), user.id)
       else
         scope.where(permission, visible)
       end
@@ -16,11 +16,21 @@ class TopicPolicy < ApplicationPolicy
   end
 
   def show?
-    record.permission == 'commons' || record.permission == 'public' || record.user == user
+    if record.defer_to_map.present?
+      map_policy.show?
+    else
+      record.permission == 'commons' || record.permission == 'public' || record.user == user
+    end
   end
 
   def update?
-    user.present? && (record.permission == 'commons' || record.user == user)
+    if not user.present?
+      false
+    elsif record.defer_to_map.present?
+      map_policy.update? 
+    else 
+      record.permission == 'commons' || record.user == user
+    end
   end
 
   def destroy?
@@ -42,4 +52,9 @@ class TopicPolicy < ApplicationPolicy
   def relatives?
     show?
   end
+
+  # Helpers
+  def map_policy
+    @map_policy ||= Pundit.policy(user, record.defer_to_map)
+  end
 end

app/serializers/new_map_serializer.rb

@@ -12,5 +12,6 @@ class NewMapSerializer < ActiveModel::Serializer
   has_many :synapses, serializer: NewSynapseSerializer
   has_many :mappings, serializer: NewMappingSerializer
   has_many :contributors, root: :users, serializer: NewUserSerializer
+  has_many :collaborators, root: :users, serializer: NewUserSerializer
 
 end

app/views/layouts/_templates.html.erb

@@ -12,7 +12,7 @@
     <div class="infoStatIcon mapContributors hoverForTip">
       <img id="mapContribs" class="{{contributors_class}}"
         width="25" height="25" src="{{contributor_image}}" />
-      <span>{{contributor_count}}</span>
+      <span class="count">{{contributor_count}}</span>
       <div class="tip">{{{contributor_list}}}</div>
     </div>
     <div class="infoStatIcon mapTopics">
@@ -181,6 +181,18 @@
     </div>
     </script>
 
+    <script type="text/template" id="collaboratorSearchTemplate">
+    <div class="collabResult">
+      <div class="collabIconWrapper">
+        <img class="icon" width="25" height="25" src="{{profile}}">
+      </div>
+      <div class="collabNameWrapper">
+        <p class="collabName">{{label}}</p>
+      </div>
+      <div class="clearfloat"></div>
+    </div>
+    </script>
+
     <script type="text/template" id="synapseAutocompleteTemplate">
       <div class="result{{rtype}}">
         <p class="autocompleteSection synapseDesc">{{label}}</p>

app/views/layouts/mailer.html.erb

@@ -0,0 +1,5 @@
+<html>
+  <body>
+    <%= yield %>
+  </body>
+</html>

app/views/layouts/mailer.text.erb

@@ -0,0 +1 @@
+<%= yield %>

app/views/map_mailer/invite_to_edit_email.html.erb

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
+  </head>
+  <body style="font-family: sans-serif; width: 100%; padding: 24px 16px 16px 16px; background-color: #f5f5f5; text-align: center;">
+
+  <div style="padding: 16px; background: white; text-align: left;">
+    <% button_style = "background-color:#4fc059;border-radius:2px;color:white;display:inline-block;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;min-height:29px;line-height:29px;min-width:54px;outline:0px;padding:0 8px;text-align:center;text-decoration:none" %>
+
+    <p><span style="font-weight: bold;"><%= @inviter.name %></span> has invited you to <span style="font-weight: bold">collaboratively edit</span> the following metamap:</p>
+    <p><%= link_to @map.name, map_url(@map), target: "_blank", style: "font-size: 18px; text-decoration: none; color: #4fc059;" %></p>
+    <% if @map.desc %>
+      <p style="font-size: 12px;"><%= @map.desc %></p>
+    <% end %>
+
+    <%= link_to 'Open in Metamaps', map_url(@map), target: "_blank", style: button_style %>    
+
+    <p style="font-size: 12px;">Make sense with Metamaps</p>
+  </div>
+  </body>
+</html>

app/views/map_mailer/invite_to_edit_email.text.erb

@@ -0,0 +1,7 @@
+<%= @inviter.name %> has invited you to collaboratively edit the following metamap:
+
+<%= @map.name %> [<%= map_url(@map) %>]
+
+Make sense with Metamaps
+
+

app/views/maps/_mapinfobox.html.erb

@@ -12,21 +12,34 @@
   
   <div class="mapInfoStat">
     <div class="infoStatIcon mapContributors hoverForTip">
-      <% if @map.contributors.count == 0 %>
+      <% relevantPeople = @map.permission == "commons" ? @map.contributors : @map.editors %>
+      <% if relevantPeople.count == 0 %>
         <img id="mapContribs" width="25" height="25" src="<%= asset_path('user.png'); %>" />
-      <% elsif @map.contributors.count == 1 %>
+      <% elsif relevantPeople.count == 1 %>
-        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:thirtytwo) %>" />
+        <img id="mapContribs" width="25" height="25" src="<%= relevantPeople[0].image.url(:thirtytwo) %>" />
-      <% elsif @map.contributors.count == 2 %>
+      <% elsif relevantPeople.count == 2 %>
-        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:thirtytwo) %>" class="multiple mTwo" />
+        <img id="mapContribs" width="25" height="25" src="<%= relevantPeople[0].image.url(:thirtytwo) %>" class="multiple mTwo" />
-      <% elsif @map.contributors.count > 2 %>
+      <% elsif relevantPeople.count > 2 %>
-        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:thirtytwo) %>" class="multiple" />
+        <img id="mapContribs" width="25" height="25" src="<%= relevantPeople[0].image.url(:thirtytwo) %>" class="multiple" />
       <% end %>
-      <span><%= @map.contributors.count %></span>
+      <span class="count"><%= relevantPeople.count %></span>
-      <div class="tip"> <ul><% @map.contributors.each_with_index do |c, index| %>
+      <div class="tip">
-           <li ><a href="/explore/mapper/<%= c.id %>" > <img class="rtUserImage" width="25" height="25" src="<%= asset_path c.image.url(:thirtytwo) %>"  />
+        <ul><% relevantPeople.each_with_index do |c, index| %>
-            <%= c.name %></a> 
+            <li>
+             <a href="/explore/mapper/<%= c.id %>" > <img class="rtUserImage" width="25" height="25" src="<%= asset_path c.image.url(:thirtytwo) %>"  />
+               <%= c.name %>
+               <% if @map.user == c %> (creator)<% end %>
+              </a>
+              <% if @map.user != c && @map.user == current_user %>
+                <span class="removeCollaborator" data-id=" + m.get('id') + "></span> 
+              <% end %>
             </li>         
-        <% end %></ul></div>
+          <% end %>
+        </ul>
+        <% if @map.user == current_user %>
+          <div class="collabSearchField"><span class="addCollab"></span><input class="collaboratorSearchField" placeholder="Add a collaborator!"></input></div>
+        <% end %>
+      </div>
     </div>
     <div class="infoStatIcon mapTopics">
       <%= @map.topics.count %>
@@ -35,7 +48,7 @@
       <%= @map.synapses.count %>
     </div>
     <div class="infoStatIcon mapPermission <%= @map.permission %> hoverForTip">
-        <div class="tooltips">As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>
+        <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>
     </div>
     <div class="clearfloat"></div>
   </div>

app/views/maps/sharedmaps.html.erb

@@ -0,0 +1,15 @@
+<% #
+   # @file
+   # Shows a list of current user's maps
+   # GET /explore/mine(.:format)
+   # %>
+
+<script>
+  Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>;
+  Metamaps.currentPage = "shared";
+  <% content_for :title, "Explore Shared Maps | Metamaps" %>
+
+  Metamaps.currentSection = "explore";
+  Metamaps.GlobalUI.Search.open();
+  Metamaps.GlobalUI.Search.lock();
+</script>

app/views/maps/show.html.erb

@@ -10,6 +10,7 @@
 	Metamaps.currentPage = <%= @map.id.to_s %>;
     Metamaps.Active.Map = <%= @map.to_json.html_safe %>;
     Metamaps.Mappers = <%= @allmappers.to_json.html_safe %>;
+    Metamaps.Collaborators = <%= @allcollaborators.to_json.html_safe %>;
     Metamaps.Topics = <%= @alltopics.to_json.html_safe %>;
     Metamaps.Synapses = <%= @allsynapses.to_json.html_safe %>;
     Metamaps.Mappings = <%= @allmappings.to_json.html_safe %>;

config/environments/development.rb

@@ -30,7 +30,7 @@ Metamaps::Application.configure do
     port:          ENV['SMTP_PORT'],
     user_name:     ENV['SMTP_USERNAME'],
     password:      ENV['SMTP_PASSWORD'],
-    #domain:        ENV['SMTP_DOMAIN']
+    domain:        ENV['SMTP_DOMAIN'],
     authentication:       'plain',
     enable_starttls_auto: true,
     openssl_verify_mode: 'none'    }
@@ -41,6 +41,8 @@ Metamaps::Application.configure do
   # Print deprecation notices to the Rails logger
   config.active_support.deprecation = :log
 
+  config.action_mailer.preview_path = '/vagrant/spec/mailers/previews'
+
   # Expands the lines which load the assets
   config.assets.debug = true
 end

config/routes.rb

@@ -40,12 +40,13 @@ Metamaps::Application.routes.draw do
   post 'maps/:id/events/:event', to: 'maps#events'
   get 'maps/:id/contains', to: 'maps#contains', as: :contains
   post 'maps/:id/upload_screenshot', to: 'maps#screenshot', as: :screenshot
+  post 'maps/:id/access', to: 'maps#access', as: :access, defaults: {format: :json} 
 
   get 'explore/active', to: 'maps#activemaps'
   get 'explore/featured', to: 'maps#featuredmaps'
   get 'explore/mine', to: 'maps#mymaps'
+  get 'explore/shared', to: 'maps#sharedmaps'
   get 'explore/mapper/:id', to: 'maps#usermaps'
-
   
   devise_for :users, controllers: { registrations: 'users/registrations', passwords: 'users/passwords', sessions: 'devise/sessions' }, :skip => :sessions
 

db/migrate/20160331181959_create_user_maps.rb

@@ -0,0 +1,10 @@
+class CreateUserMaps < ActiveRecord::Migration
+  def change
+    create_table :user_maps do |t|
+      t.references :user, index: true
+      t.references :map,  index: true
+
+      t.timestamps
+    end
+  end
+end

db/migrate/20160401133937_add_defers_to_map_to_topics_and_synapses.rb

@@ -0,0 +1,6 @@
+class AddDefersToMapToTopicsAndSynapses < ActiveRecord::Migration
+  def change
+    add_column :topics, :defer_to_map_id, :integer
+    add_column :synapses, :defer_to_map_id, :integer
+  end
+end

db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20160318141618) do
+ActiveRecord::Schema.define(version: 20160401133937) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -180,8 +180,9 @@ ActiveRecord::Schema.define(version: 20160318141618) do
     t.integer  "node1_id"
     t.integer  "node2_id"
     t.integer  "user_id"
-    t.datetime "created_at", null: false
+    t.datetime "created_at",      null: false
-    t.datetime "updated_at", null: false
+    t.datetime "updated_at",      null: false
+    t.integer  "defer_to_map_id"
   end
 
   add_index "synapses", ["node1_id", "node1_id"], name: "index_synapses_on_node1_id_and_node1_id", using: :btree
@@ -217,11 +218,22 @@ ActiveRecord::Schema.define(version: 20160318141618) do
     t.string   "audio_content_type"
     t.integer  "audio_file_size"
     t.datetime "audio_updated_at"
+    t.integer  "defer_to_map_id"
   end
 
   add_index "topics", ["metacode_id"], name: "index_topics_on_metacode_id", using: :btree
   add_index "topics", ["user_id"], name: "index_topics_on_user_id", using: :btree
 
+  create_table "user_maps", force: :cascade do |t|
+    t.integer  "user_id"
+    t.integer  "map_id"
+    t.datetime "created_at"
+    t.datetime "updated_at"
+  end
+
+  add_index "user_maps", ["map_id"], name: "index_user_maps_on_map_id", using: :btree
+  add_index "user_maps", ["user_id"], name: "index_user_maps_on_user_id", using: :btree
+
   create_table "users", force: :cascade do |t|
     t.string   "name"
     t.string   "email"

public/famous/main.js

@@ -303,7 +303,7 @@ Metamaps.Famous.build = function () {
         var loggedIn = Metamaps.Active.Mapper ? 'Auth' : '';
         
 
-        if (section === "mine" || section === "active" || section === "featured") {
+        if (section === "mine" || section === "shared" || section === "active" || section === "featured") {
             f.explore.surf.setContent(templates[section + loggedIn + 'Content']);
         }
         else if (section === "mapper") {

public/famous/templates.js

@@ -19,16 +19,17 @@ t.logoContent += '</ul>';
 
 /* logged in explore maps bars */
   t.mineAuthContent = '<a href="/explore/mine" class="active myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
+  t.mineAuthContent += '<a href="/explore/shared" class="sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
   t.mineAuthContent += '<a href="/" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
-  t.mineAuthContent += '<a href="/explore/featured" class="featuredMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Featured</a>';
+
+  t.sharedAuthContent = '<a href="/explore/mine" class="myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
+  t.sharedAuthContent += '<a href="/explore/shared" class="active sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
+  t.sharedAuthContent += '<a href="/" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
 
   t.activeAuthContent = '<a href="/explore/mine" class="myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
+  t.activeAuthContent += '<a href="/explore/shared" class="sharedMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Shared With Me</a>';
   t.activeAuthContent += '<a href="/" class="active activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
-  t.activeAuthContent += '<a href="/explore/featured" class="featuredMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Featured</a>';
 
-  t.featuredAuthContent = '<a href="/explore/mine" class="myMaps exploreMapsButton"><div class="exploreMapsIcon"></div>My Maps</a>';
-  t.featuredAuthContent += '<a href="/" class="activeMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Recently Active</a>';
-  t.featuredAuthContent += '<a href="/explore/featured" class="active featuredMaps exploreMapsButton"><div class="exploreMapsIcon"></div>Featured</a>';
 
 /* apps bars */
   t.registeredAppsContent = '<a href="/oauth/applications" class="active activeMaps exploreMapsButton" data-bypass="true"><div class="exploreMapsIcon"></div>Registered Apps</a>';

spec/mailers/map_mailer_spec.rb

@@ -0,0 +1,5 @@
+require "rails_helper"
+
+RSpec.describe MapMailer, type: :mailer do
+  pending "add some examples to (or delete) #{__FILE__}"
+end

spec/mailers/previews/map_mailer_preview.rb

@@ -0,0 +1,6 @@
+# Preview all emails at http://localhost:3000/rails/mailers/map_mailer
+class MapMailerPreview < ActionMailer::Preview
+  def invite_to_edit_email
+    MapMailer.invite_to_edit_email(Map.first, User.first, User.second)
+  end
+end