fixed user images, set up map updates for realtime

This commit is contained in:
Connor Turland 2014-11-04 12:37:17 -05:00
parent 28fb9a8bae
commit c5907914e3
9 changed files with 130 additions and 40 deletions

View file

@ -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({

View file

@ -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);
if (map) {
var node = topic.get('node');
topic.fetch({
success: function (model) {
// must be set using silent:true otherwise
// will trigger a change event and an infinite
// loop with other clients of change events
model.set({ node: node });
var map = Metamaps.Active.Map;
var isActiveMap = map && data.mapId === map.id;
if (isActiveMap) {
var permBefore = map.get('permission');
var idBefore = map.id;
map.fetch({
success: function (model, response) {
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();

View file

@ -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"

View file

@ -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 => ['200x200#', :png],
:round => ['200x200#', :png]
:square => ['84x84#', :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

View file

@ -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">

View file

@ -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>

View file

@ -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 = ''

View file

@ -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

View file

@ -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">