added the ability to change the map permission from the map info box

This commit is contained in:
Connor Turland 2014-03-02 18:53:19 -08:00
parent 5fe3eb8f00
commit 7f5269bb84
5 changed files with 115 additions and 9 deletions

View file

@ -736,6 +736,23 @@ function updateSynapsePermission(edge, permission) {
}); });
} }
function updateMapPermission(mapid, permission) {
var mdata = { "map": { "permission": permission } };
$.ajax({
type: "PUT",
dataType: 'json',
url: "/maps/" + mapid,
data: mdata,
success: function(data) {
$('.mapPermission').removeClass('commons public private minimize').addClass( permission );
$('.mapPermission .permissionSelect').remove();
},
error: function(){
alert('failed to update permission');
}
});
}
function MconsoleReset() { function MconsoleReset() {
var tX = Mconsole.canvas.translateOffsetX; var tX = Mconsole.canvas.translateOffsetX;

View file

@ -1569,24 +1569,29 @@ background-position: 16px 6px;
background-size: 27px 27px; background-size: 27px 27px;
position:relative; position:relative;
} }
.mapContributors .tip { .infoStatIcon .tip {
display: none; display: none;
position: absolute; position: absolute;
background: white; background: white;
min-width: 180px; min-width: 180px;
max-width:250px; max-width:250px;
text-align:center; text-align:center;
top: 38px;
left: 6px;
color: black; color: black;
border-radius: 4px; border-radius: 4px;
font-size: 15px !important; font-size: 15px !important;
font-family: 'LatoLight'; font-family: 'LatoRegular';
line-height: 17px; line-height: 17px;
padding: 3px 5px 2px; padding: 3px 5px 2px;
border: 1px solid black;
z-index: 100; z-index: 100;
} }
.mapContributors .tip {
top: 38px;
left: 6px;
}
.mapPermission .tip {
top: 0;
right: 32px;
}
.mapInfoBox .hoverForTip:hover .tip { .mapInfoBox .hoverForTip:hover .tip {
display:block; display:block;
} }
@ -1602,8 +1607,13 @@ background-position: 18px 6px;
background-size: 27px 27px; background-size: 27px 27px;
} }
.mapPermission { .mapPermission {
background-position: 10px center; background-position: 0 center;
background-size: 30px 30px; background-size: 30px 30px;
width: 30px;
height: 30px;
padding: 0;
margin: 5px 30px 5px 10px;
position: relative;
} }
.mapPermission.commons { .mapPermission.commons {
background-image:url(MMCCicon_commons.png); background-image:url(MMCCicon_commons.png);
@ -1615,6 +1625,47 @@ background-size: 30px 30px;
background-image:url(MMCCicon_private.png); background-image:url(MMCCicon_private.png);
} }
.yourMap .mapPermission:hover {
background-image: url(/assets/MMCCicon_maximize_arrow.png);
cursor:pointer;
}
.yourMap .mapPermission.minimize {
background-image: url(MMCCicon_minimize_arrow.png) !important;
cursor: pointer;
}
.mapPermission .permissionSelect {
list-style: none;
width: 30px;
height: 60px;
position: relative;
top: 30px;
}
.mapPermission .permissionSelect li {
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-position: center center;
background-size: 30px 30px;
}
.mapPermission .permissionSelect .commons {
background-image: url(MMCCicon_commons.png);
}
.mapPermission .permissionSelect .public {
background-image: url(MMCCicon_public.png);
}
.mapPermission .permissionSelect .private {
background-image: url(MMCCicon_private.png);
}
.mapPermission .permissionSelect .commons:hover {
background-image: url(MMCCicon_commons_black.png);
}
.mapPermission .permissionSelect .public:hover {
background-image: url(MMCCicon_public_black.png);
}
.mapPermission .permissionSelect .private:hover {
background-image: url(MMCCicon_private_black.png);
}
.mapInfoBox .mapInfoDesc { .mapInfoBox .mapInfoDesc {
font-style: italic; font-style: italic;
color: #BBB; color: #BBB;

View file

@ -8,7 +8,7 @@
<div class="permission <%= map.authorize_to_edit(user) ? "canEdit" : "cannotEdit" %>"> <div class="permission <%= map.authorize_to_edit(user) ? "canEdit" : "cannotEdit" %>">
<div class="mapCard"> <div class="mapCard">
<div class="mapPerm <%= map.mk_permission %>"> help build this map </div> <div class="mapPerm <%= map.mk_permission %>"></div>
<span class="title"> <span class="title">
<%= best_in_place map, :name, :type => :input, :classes => 'best_in_place_name' %> <%= best_in_place map, :name, :type => :input, :classes => 'best_in_place_name' %>
</span> </span>

View file

@ -2,7 +2,7 @@
# Partial rendering form for a new topic on a map # Partial rendering form for a new topic on a map
# This code is called when viewing a metamap in show.html.erb in the views/maps folder # This code is called when viewing a metamap in show.html.erb in the views/maps folder
#%> #%>
<div class="mapInfoBox permission <%= @map.user == user ? "canEdit" : "cannotEdit" %>"> <div class="mapInfoBox permission <%= @map.user == user ? " yourMap" : "" %><%= @map.authorize_to_edit(user) ? " canEdit" : "" %>">
<div class="mapInfoName"><%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %></div> <div class="mapInfoName"><%= best_in_place @map, :name, :type => :input, :classes => 'best_in_place_name' %></div>
@ -25,7 +25,11 @@
<div class="infoStatIcon mapSynapses"> <div class="infoStatIcon mapSynapses">
<%= @map.synapses.count %> <%= @map.synapses.count %>
</div> </div>
<div class="infoStatIcon mapPermission <%= @map.permission %>"></div> <div class="infoStatIcon mapPermission <%= @map.permission %> hoverForTip">
<% if @map.user == user %>
<div class="tip">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>
<% end %>
</div>
<div class="clearfloat"></div> <div class="clearfloat"></div>
</div> </div>

View file

@ -175,6 +175,40 @@
// initialize best_in_place editing // initialize best_in_place editing
$('.authenticated div.permission.canEdit .best_in_place').best_in_place(); $('.authenticated div.permission.canEdit .best_in_place').best_in_place();
<% if @map.user == user %>
// ability to change permission
var selectingPermission = false;
$('.yourMap .mapPermission').click(function() {
if (!selectingPermission) {
selectingPermission = true;
$(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
if ( $(this).hasClass('commons') ) {
$(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
} else if ( $(this).hasClass('public') ) {
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
} else if ( $(this).hasClass('private') ) {
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
}
$('.mapPermission .permissionSelect li').click(function(event) {
selectingPermission = false;
var permission = $(this).attr('class');
updateMapPermission(mapid, permission);
event.stopPropagation();
});
} else {
selectingPermission = false;
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
$('.mapPermission .permissionSelect').remove();
}
});
<% end %>
//bind best_in_place ajax callbacks
$('.mapInfoName .best_in_place_name').bind("ajax:success", function() {
var name = $(this).html();
$('.mapName').html(name);
});
$('.showcard').draggable({ handle: ".metacodeImage" }); $('.showcard').draggable({ handle: ".metacodeImage" });
$('#showcard').resizable({ $('#showcard').resizable({
maxHeight: 500, maxHeight: 500,