fixed user images, set up map updates for realtime

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

@@ -5,6 +5,34 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
     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;
+
+        newOptions.success = function (model, response, opt) {
+            if (s) s(model, response, opt);
+            model.trigger('saved');
+        };
+        return Backbone.Model.prototype.save.call(this, attrs, newOptions);
+    },
+    initialize: function () {
+        this.on('changeByOther', this.updateView);
+        this.on('saved', this.savedEvent);
+    },
+    savedEvent: function() {
+        Metamaps.Realtime.sendMapChange(this);
+    },
     authorizeToEdit: function (mapper) {
         if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
         else return false;
@@ -24,11 +52,12 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
             that.set('topics', new bb.TopicCollection(data.topics));
             that.set('synapses', new bb.SynapseCollection(data.synapses));
             that.set('mappings', new bb.MappingCollection(data.mappings));
-        }
+        };
 
-        $.ajax({
+        var e = $.ajax({
             url: "/maps/" + this.id + "/contains.json",
             success: start,
+            error: errorFunc,
             async: false
         });
     },
@@ -75,6 +104,25 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
             screenshot: '<img src="' + this.get('screenshot_url') + '" />'
         };
         return obj;
+    },
+    updateView: function() {
+        var map = Metamaps.Active.Map;
+        var isActiveMap = this.id === map.id;
+        var authorized = map && map.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEditMap' : '';
+        var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : '';
+        if (isActiveMap) {
+            Metamaps.Map.InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'));
+            this.updateMapWrapper();
+        }
+    },
+    updateMapWrapper: function() {
+        var map = Metamaps.Active.Map;
+        var isActiveMap = this.id === map.id;
+        var authorized = map && map.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEditMap' : '';
+        var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : '';
+        if (isActiveMap) {
+            $('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap);
+        }
     }
 });
 Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({

app/assets/javascripts/src/Metamaps.js

@@ -1835,11 +1835,15 @@ Metamaps.Realtime = {
 
         if (Metamaps.Active.Map) {
             var commonsMap = Metamaps.Active.Map.get('permission') === 'commons';
+            var publicMap = Metamaps.Active.Map.get('permission') === 'public';
 
             if (commonsMap) {
                 self.turnOn();
                 self.setupSocket();
             }
+            else if (publicMap) {
+                self.attachMapListener();
+            }
         }
     },
     endActiveMap: function () {
@@ -1872,11 +1876,11 @@ Metamaps.Realtime = {
             $(".collabCompass").show();
         }
     },
-    turnOff: function () {
+    turnOff: function (silent) {
         var self = Metamaps.Realtime;
 
         if (self.status) {
-            self.sendRealtimeOff();
+            if (!silent) self.sendRealtimeOff();
             $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff');
             self.status = false;
             $(".sidebarCollaborateIcon").removeClass("blue");
@@ -1934,7 +1938,7 @@ Metamaps.Realtime = {
 
         socket.on('topicChangeFromServer', self.topicChange);
         socket.on('synapseChangeFromServer', self.synapseChange);
-        socket.on('mapChangeFromServer', self.mapChange);
+        self.attachMapListener();
     
         // local event listeners that trigger events
         var sendCoords = function (event, coords) {
@@ -1993,6 +1997,12 @@ Metamaps.Realtime = {
         $(document).on(Metamaps.JIT.events.removeSynapse, sendRemoveSynapse);
 
     },
+    attachMapListener: function(){
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        socket.on('mapChangeFromServer', self.mapChange);
+    },
     sendRealtimeOn: function () {
         var self = Metamaps.Realtime;
         var socket = Metamaps.Realtime.socket;
@@ -2334,18 +2344,32 @@ Metamaps.Realtime = {
         socket.emit('mapChangeFromClient', data);
     },
     mapChange: function (data) {
-        /*var map = Metamaps.Topics.get(data.topicId);
+        var map = Metamaps.Active.Map;
-        if (map) {
+        var isActiveMap = map && data.mapId === map.id;
-            var node = topic.get('node');
+        if (isActiveMap) {
-            topic.fetch({
+            var permBefore = map.get('permission');
-                success: function (model) {
+            var idBefore = map.id;
-                    // must be set using silent:true otherwise 
+            map.fetch({
-                    // will trigger a change event and an infinite 
+                success: function (model, response) {
-                    // loop with other clients of change events
+
-                    model.set({ node: node });
+                    var idNow = model.id;
+                    var permNow = model.get('permission');
+                    if (idNow !== idBefore) {
+                        Metamaps.Map.leavePrivateMap(); // this means the map has been changed to private
+                    }
+                    else if (permNow === 'public' && permBefore === 'commons') {
+                        Metamaps.Map.commonsToPublic();
+                    }
+                    else if (permNow === 'commons' && permBefore === 'public') {
+                        Metamaps.Map.publicToCommons();
+                    }
+                    else {
+                        model.fetchContained();
+                        model.trigger('changeByOther');
+                    }
                 }
             });
-        }*/
+        }
     },
     // newTopic
     sendNewTopic: function (data) {
@@ -4084,6 +4108,26 @@ Metamaps.Map = {
         Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data;
         Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data;
     },
+    leavePrivateMap: function(){
+        var map = Metamaps.Active.Map;
+        Metamaps.Maps.Active.remove(map);
+        Metamaps.Maps.Featured.remove(map);
+        Metamaps.Router.home();
+        Metamaps.GlobalUI.notifyUser('Sorry! That map has been changed to Private.');
+    },
+    commonsToPublic: 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(){
+        var confirmString = "This map permission has been changed to Commons! ";
+        confirmString += "Do you want to reload and enable realtime collaboration?";
+        var c = confirm(confirmString);
+        if (c) {
+            Metamaps.Router.maps(Metamaps.Active.Map.id);
+        }
+    },
     editedByActiveMapper: function () {
         if (Metamaps.Active.Mapper) {
             Metamaps.Mappers.add(Metamaps.Active.Mapper);
@@ -4292,11 +4336,16 @@ Metamaps.Map.InfoBox = {
 
         $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () {
             var name = $(this).html();
-            $('.mapName').html(name);
             Metamaps.Active.Map.set('name', name);
             Metamaps.Active.Map.trigger('saved');
         });
 
+        $('.mapInfoDesc .best_in_place_desc').unbind("ajax:success").bind("ajax:success", function () {
+            var desc = $(this).html();
+            Metamaps.Active.Map.set('desc', desc);
+            Metamaps.Active.Map.trigger('saved');
+        });
+
         $('.yourMap .mapPermission').unbind().click(self.onPermissionClick);
         // .yourMap in the unbind/bind is just a namespace for the events
         // not a reference to the class .yourMap on the .mapInfoBox
@@ -4304,6 +4353,11 @@ Metamaps.Map.InfoBox = {
 
         $('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap);
     },
+    updateNameDescPerm: function(name, desc, perm) {
+        $('.mapInfoName .best_in_place_name').html(name);
+        $('.mapInfoDesc .best_in_place_desc').html(desc);
+        $('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm);
+    },
     createContributorList: function () {
         var self = Metamaps.Map.InfoBox;
 
@@ -4364,6 +4418,7 @@ Metamaps.Map.InfoBox = {
         Metamaps.Active.Map.save({
             permission: permission
         });
+        Metamaps.Active.Map.updateMapWrapper();
         shareable = permission === 'private' ? '' : 'shareable';
         $('.mapPermission').removeClass('commons public private minimize').addClass(permission);
         $('.mapPermission .permissionSelect').remove();

app/helpers/users_helper.rb

@@ -8,7 +8,7 @@ module UsersHelper
       user['id'] = u.id
       user['label'] = u.name
       user['value'] = u.name
-      user['profile'] = u.image.url(:thumb)
+      user['profile'] = u.image.url(:square)
       user['mapCount'] = u.maps.count
       user['created_at'] = u.created_at.strftime("%m/%d/%Y")
       user['rtype'] = "mapper"

app/models/user.rb

@@ -37,30 +37,17 @@ class User < ActiveRecord::Base
     
   # This method associates the attribute ":image" with a file attachment
   has_attached_file :image, :styles => {
-   :thumb => ['100x100>', :png],
+   :square => ['84x84#', :png]
-   :square => ['200x200#', :png],
-   :round => ['200x200#', :png]
   },
   :default_url => "/assets/user.png"
     
-  #, :convert_options => {:round => Proc.new{self.convert_options}}
-
   # Validate the attached image is image/jpg, image/png, etc
   validates_attachment_content_type :image, :content_type => /\Aimage\/.*\Z/
-  
-  def self.convert_options
-    trans = ''
-    trans << ' ( +clone  -alpha extract '
-    trans << '-draw "fill black polygon 0,0 0,100 100,0 fill white circle 100,100 100,0" '
-    trans << '( +clone -flip ) -compose multiply -composite '
-    trans << '( +clone -flop ) -compose multiply -composite '
-    trans << ') -alpha off -compose copy_opacity -composite '
-  end
 
   def as_json(options={})
     { :id => self.id,
       :name => self.name,
-      :image => self.image.url
+      :image => self.image.url(:square)
     }
   end
   

app/views/layouts/_account.html.erb

@@ -5,7 +5,7 @@
 
 <% if authenticated? %>
   <% account = current_user %>
-  <%= image_tag user.image.url(:thumb), :size => "48x48", :class => "sidebarAccountImage" %>
+  <%= image_tag user.image.url(:square), :size => "48x48", :class => "sidebarAccountImage" %>
   <h3 class="accountHeader"><%= account.name.split[0...1][0] %></h3>
   <ul>
     <li class="accountListItem accountSettings">

app/views/layouts/_upperelements.html.erb

@@ -31,7 +31,7 @@
                     <div class="realtimeMapperList">
                         <ul>
                             <li class="rtMapper littleRtOn rtMapperSelf">
-                                <%= image_tag user.image.url(:thumb), :size => "24x24", :class => "rtUserImage" %>
+                                <%= image_tag user.image.url(:square), :size => "24x24", :class => "rtUserImage" %>
                                 <%= user.name %> (me)
                                 <div class="littleJuntoIcon"></div>
                             </li>
@@ -70,7 +70,7 @@
     <div class="sidebarAccount upperRightEl">
         <div class="sidebarAccountIcon">
             <% if user && user.image %>
-              <%= image_tag user.image.url(:thumb), :size => "32x32" %>
+              <%= image_tag user.image.url(:square), :size => "32x32" %>
             <% elsif !authenticated? %>
               SIGN IN
               <div class="accountInnerArrow"></div>

app/views/maps/_mapinfobox.html.erb

@@ -15,11 +15,11 @@
       <% if @map.contributors.count == 0 %>
         <img id="mapContribs" width="25" height="25" src="/assets/user.png" />
       <% elsif @map.contributors.count == 1 %>
-        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url %>" />
+        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:square) %>" />
       <% elsif @map.contributors.count == 2 %>
-        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url %>" class="multiple mTwo" />
+        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:square) %>" class="multiple mTwo" />
       <% elsif @map.contributors.count > 2 %>
-        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url %>" class="multiple" />
+        <img id="mapContribs" width="25" height="25" src="<%= @map.contributors[0].image.url(:square) %>" class="multiple" />
       <% end %>
       <span><%= @map.contributors.count %></span>
       <% contributorList = ''

app/views/shared/_filterBox.html.erb

@@ -62,7 +62,7 @@
     end 
     @mappers.each_with_index do |mapper, index| 
         @mapperlist += '<li data-id="' + mapper.id.to_s + '">'
-        @mapperlist += '<img src="' + mapper.image.url(:thumb) + '" data-id="' + mapper.id.to_s + '" alt="' + mapper.name + '" />'
+        @mapperlist += '<img src="' + mapper.image.url(:square) + '" data-id="' + mapper.id.to_s + '" alt="' + mapper.name + '" />'
         @mapperlist += '<p>' + mapper.name + '</p></li>'
     end
   end

app/views/users/edit.html.erb

@@ -10,7 +10,7 @@
   <h3>Edit Account</h3>
   <div class="userImage">
     <div class="userImageDiv" onclick="Metamaps.Account.toggleChangePicture()">
-      <%= image_tag @user.image.url(:round), :size => "84x84" %>
+      <%= image_tag @user.image.url(:square), :size => "84x84" %>
       <div class="editPhoto"></div>
     </div>
     <div class="userImageMenu">