glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improvements to map info card, as well as small changes to the permission changers in the topic and synapse cards

Browse source
This commit is contained in:
Connor Turland 2014-10-13 19:27:30 -04:00
parent e17cfb4f12
commit 51221ee3f7
10 changed files with 171 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/assets/javascripts/lib/bip.js
View file

@ -332,12 +332,18 @@ BestInPlaceEditor.forms = {
this.element.html(output); this.element.html(output);
this.setHtmlAttributes(); this.setHtmlAttributes();
this.element.find("input[type='text']")[0].select(); // START METAMAPS CODE
//this.element.find("input[type='text']")[0].select();
this.element.find("input[type='text']")[0].focus();
// END METAMAPS CODE
this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler); this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
if (this.cancelButton) { if (this.cancelButton) {
this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.input.cancelButtonHandler); this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.input.cancelButtonHandler);
} }
this.element.find("input[type='text']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler); this.element.find("input[type='text']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler);
// START METAMAPS CODE
this.element.find("input[type='text']").bind('keydown', {editor: this}, BestInPlaceEditor.forms.input.keydownHandler);
// END METAMAPS CODE
this.element.find("input[type='text']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler); this.element.find("input[type='text']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
this.blurTimer = null; this.blurTimer = null;
this.userClicked = false; this.userClicked = false;
@ -385,6 +391,11 @@ BestInPlaceEditor.forms = {
if (event.keyCode == 27) { if (event.keyCode == 27) {
event.data.editor.abort(); event.data.editor.abort();
} }
// START METAMAPS CODE
else if (event.keyCode == 13 && !event.shiftKey) {
event.data.editor.update();
}
// END METAMAPS CODE
} }
}, },
@ -427,6 +438,16 @@ BestInPlaceEditor.forms = {
event.data.editor.update(); event.data.editor.update();
}, },
// START METAMAPS CODE
keydownHandler : function(event) {
if (event.keyCode == 13 && !event.shiftKey) {
event.preventDefault();
event.stopPropagation();
return false;
}
},
// END METAMAPS CODE
keyupHandler : function(event) { keyupHandler : function(event) {
if (event.keyCode == 27) { if (event.keyCode == 27) {
event.data.editor.abort(); event.data.editor.abort();

150
app/assets/javascripts/src/Metamaps.js
View file

@ -808,7 +808,7 @@ Metamaps.TopicCard = {
if (authorized) { if (authorized) {
$('.showcard .metacodeTitle').click(openMetacodeSelect); $('.showcard .metacodeTitle').click(openMetacodeSelect);
$('.showcard').click(hideMetacodeSelect); $('.showcard').click(hideMetacodeSelect);
$('.metacodeSelect > ul li').click(function (event){ $('.metacodeSelect > ul > li').click(function (event){
event.stopPropagation(); event.stopPropagation();
}); });
$('.metacodeSelect li li').click(metacodeLiClick); $('.metacodeSelect li li').click(metacodeLiClick);
@ -845,36 +845,44 @@ Metamaps.TopicCard = {
}); });
} }
var permissionLiClick = function (event) {
selectingPermission = false;
var permission = $(this).attr('class');
topic.save({
permission: permission
});
$('.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 // ability to change permission
var selectingPermission = false; var selectingPermission = false;
if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) { if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
$('.showcard .yourTopic .mapPerm').click(function () { $('.showcard .yourTopic .mapPerm').click(openPermissionSelect);
if (!selectingPermission) { $('.showcard').click(hidePermissionSelect);
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>');
}
$('.permissionSelect li').click(function (event) {
selectingPermission = false;
var permission = $(this).attr('class');
topic.save({
permission: permission
});
$('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
$('.permissionSelect').remove();
event.stopPropagation();
});
} else {
selectingPermission = false;
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
$('.permissionSelect').remove();
}
});
} }
}, },
populateShowCard: function (topic) { populateShowCard: function (topic) {
@ -1129,34 +1137,42 @@ Metamaps.SynapseCard = {
// ability to change permission // ability to change permission
var selectingPermission = false; var selectingPermission = false;
if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) { var permissionLiClick = function (event) {
$('#edit_synapse.yourEdge .mapPerm').click(function () { selectingPermission = false;
if (!selectingPermission) { var permission = $(this).attr('class');
selectingPermission = true; synapse.save({
$(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow permission: permission
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(function (event) {
selectingPermission = false;
var permission = $(this).attr('class');
synapse.save({
permission: permission,
});
$('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
$('#edit_synapse .permissionSelect').remove();
event.stopPropagation();
});
} else {
selectingPermission = false;
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
$('#edit_synapse .permissionSelect').remove();
}
}); });
$('#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_perms_form
@ -2887,7 +2903,7 @@ Metamaps.Listeners = {
$(window).resize(function () { $(window).resize(function () {
if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height()); if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height());
if (Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.hide(); if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition();
}); });
} }
}; // end Metamaps.Listeners }; // end Metamaps.Listeners
@ -3643,7 +3659,7 @@ Metamaps.Map.InfoBox = {
obj["map_creator_tip"] = isCreator ? self.changePermissionText : ""; obj["map_creator_tip"] = isCreator ? self.changePermissionText : "";
obj["delete"] = isCreator ? Hogan.compile(self.deleteHTML).render({id: map.id}) : ""; obj["delete"] = isCreator ? Hogan.compile(self.deleteHTML).render({id: map.id}) : "";
obj["contributor_list"] = self.createContributorList(); obj["contributor_list"] = self.createContributorList();
obj["user_name"] = isCreator ? "you" : map.get("user_name"); obj["user_name"] = isCreator ? "You" : map.get("user_name");
var classes = isCreator ? "yourMap" : ""; var classes = isCreator ? "yourMap" : "";
classes += canEdit ? " canEdit" : ""; classes += canEdit ? " canEdit" : "";
@ -3656,7 +3672,7 @@ Metamaps.Map.InfoBox = {
attachEventListeners: function () { attachEventListeners: function () {
var self = Metamaps.Map.InfoBox; var self = Metamaps.Map.InfoBox;
$('.mapInfoBox .best_in_place').best_in_place(); $('.mapInfoBox.canEdit .best_in_place').best_in_place();
// because anyone who can edit the map can change the map title // because anyone who can edit the map can change the map title
$('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () { $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () {
@ -3666,7 +3682,7 @@ Metamaps.Map.InfoBox = {
}); });
$('.yourMap .mapPermission').unbind().click(self.onPermissionClick); $('.yourMap .mapPermission').unbind().click(self.onPermissionClick);
$('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect);
}, },
createContributorList: function () { createContributorList: function () {
var self = Metamaps.Map.InfoBox; var self = Metamaps.Map.InfoBox;
@ -3689,7 +3705,7 @@ Metamaps.Map.InfoBox = {
$('.mapEditedAt').html('Last edited ' + Metamaps.Util.nowDateFormatted()); $('.mapEditedAt').html('Last edited ' + Metamaps.Util.nowDateFormatted());
}, },
onPermissionClick: function () { onPermissionClick: function (event) {
var self = Metamaps.Map.InfoBox; var self = Metamaps.Map.InfoBox;
if (!self.selectingPermission) { if (!self.selectingPermission) {
@ -3703,13 +3719,17 @@ Metamaps.Map.InfoBox = {
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>'); $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
} }
$('.mapPermission .permissionSelect li').click(self.selectPermission); $('.mapPermission .permissionSelect li').click(self.selectPermission);
} else { event.stopPropagation();
self.selectingPermission = false;
$(this).removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
$('.mapPermission .permissionSelect').remove();
} }
}, },
selectPermission: function () { hidePermissionSelect: function () {
var self = Metamaps.Map.InfoBox;
self.selectingPermission = false;
$('.mapPermission').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
$('.mapPermission .permissionSelect').remove();
},
selectPermission: function (event) {
var self = Metamaps.Map.InfoBox; var self = Metamaps.Map.InfoBox;
self.selectingPermission = false; self.selectingPermission = false;

42
app/assets/stylesheets/application.css
View file

@ -1415,7 +1415,19 @@ float: left;
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
padding: 26px 0; padding: 26px 16px;
}
.mapInfoName input {
width: 328px;
font-size: 18px;
line-height: 20px;
height: 20px;
color: #F5F5F5;
font-family: 'din-medium', helvetica, sans-serif;
border: 0;
outline: none;
background: none;
text-align: center;
} }
.mapInfoStat { .mapInfoStat {
background-color: #E0E0E0; background-color: #E0E0E0;
@ -1539,15 +1551,33 @@ float: left;
font-family: helvetica, sans-serif; font-family: helvetica, sans-serif;
color: #E0E0E0; color: #E0E0E0;
margin: 8px; margin: 8px;
padding-right: 16px;
height: 106px; height: 106px;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
font-style: italic;
text-align: left;
}
.mapInfoBox .mapInfoDesc textarea {
font-family: helvetica, sans-serif;
text-align: left;
color: #E0E0E0;
font-size: 14px;
line-height: 16px;
font-style: italic;
border: 0;
outline: 0;
background: none;
resize: none;
width: 340px;
} }
.mapInfoBox .mapInfoMeta { .mapInfoBox .mapInfoMeta {
height: 35px; height: 35px;
border-top: 1px solid #F5F5F5; border-top: 1px solid #F5F5F5;
padding: 6px 0 7px; padding: 6px 0 7px 16px;
text-align: left;
} }
.mapInfoBox .mapInfoMeta p { .mapInfoBox .mapInfoMeta p {
margin: 4px 0; margin: 4px 0;
@ -1555,6 +1585,14 @@ float: left;
color: #F5F5F5; color: #F5F5F5;
} }
.mapCreatedAt span {
color: #4fc059;
}
.mapEditedAt span {
color: #dab539;
}
/* lightboxes */ /* lightboxes */
#lightbox_overlay { #lightbox_overlay {

3
app/assets/stylesheets/base.css
View file

@ -70,7 +70,7 @@
cursor: text; cursor: text;
} }
.best_in_place_name textarea, .best_in_place_name input { .showcard .best_in_place_name textarea, .showcard .best_in_place_name input {
font-family: 'din-regular', sans-serif; font-family: 'din-regular', sans-serif;
color: #424242; color: #424242;
font-size: 18px; font-size: 18px;
@ -120,6 +120,7 @@ outline: none;
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
background: none; background: none;
resize: none;
} }
.CardOnGraph .desc h3 { .CardOnGraph .desc h3 {

6
app/assets/stylesheets/uservoice.css
View file

@ -13,4 +13,10 @@ div.uv-icon.uv-bottom-left {
top:25%; top:25%;
width:25px; width:25px;
z-index:100000; z-index:100000;
opacity: 1;
}
div.uv-icon.uv-bottom-left:hover {
background-position: 0 -110px;
} }

10
app/models/map.rb
View file

@ -87,8 +87,8 @@ class Map < ActiveRecord::Base
##### PERMISSIONS ###### ##### PERMISSIONS ######
# returns false if user not allowed to 'show' Topic, Synapse, or Map # returns false if user not allowed to 'show' Topic, Synapse, or Map
def authorize_to_show(user) def authorize_to_show(user)
if (self.permission == "private" && self.user != user) if (self.permission == "private" && self.user != user)
return false return false
end end
return self return self
@ -96,7 +96,9 @@ class Map < ActiveRecord::Base
# returns false if user not allowed to 'edit' Topic, Synapse, or Map # returns false if user not allowed to 'edit' Topic, Synapse, or Map
def authorize_to_edit(user) def authorize_to_edit(user)
if (self.permission == "private" && self.user != user) if !user
return false
elsif (self.permission == "private" && self.user != user)
return false return false
elsif (self.permission == "public" && self.user != user) elsif (self.permission == "public" && self.user != user)
return false return false
@ -132,7 +134,7 @@ class Map < ActiveRecord::Base
end end
data.content_type = "image/png" data.content_type = "image/png"
data.original_filename = File.basename(self.id.to_s + '-' + 'screenshot.png') data.original_filename = File.basename('map-' + self.id.to_s + '-screenshot.png')
self.screenshot = data self.screenshot = data
self.save self.save

4
app/views/layouts/_templates.html.erb
View file

@ -29,8 +29,8 @@
</div> </div>
<div class="mapInfoMeta"> <div class="mapInfoMeta">
<p class="mapCreatedAt">Created by {{user_name}} on {{created_at}}</p> <p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
<p class="mapEditedAt">Last edited {{updated_at}}</p> <p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
</div> </div>
<div class="mapInfoDelete"> <div class="mapInfoDelete">

52
app/views/maps/_mapinfobox.html (copy).erb
View file

@ -1,52 +0,0 @@
<%#
# 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
#%>
<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="mapInfoStat">
<div class="infoStatIcon mapContributors hoverForTip">
<%= @map.contributors.count %>
<% contributorList = ''
@map.contributors.each_with_index do |c, index|
comma = (index+1) == @map.contributors.count ? '' : ', '
contributorList += c.name + comma
end
if @map.contributors.count == 0
contributorList = 'No one has added anything yet.'
end %>
<div class="tip"><%= contributorList %></div>
</div>
<div class="infoStatIcon mapTopics">
<%= @map.topics.count %>
</div>
<div class="infoStatIcon mapSynapses">
<%= @map.synapses.count %>
</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>
<% if (authenticated? && @map.authorize_to_edit(user)) || (!authenticated? && @map.desc != "" && @map.desc != nil )%>
<div class="mapInfoDesc">
<%= best_in_place @map, :desc, :type => :textarea, :nil => "Click to add description.", :classes => 'best_in_place_desc' %>
</div>
<% end %>
<div class="mapInfoMeta">
<p>Created by <%= @map.user == user ? "you" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p>
<p>Last edited <%= @map.updated_at.strftime("%m/%d/%Y") %></p>
</div>
<div class="mapInfoDelete">
<% if @map.user == user %>
<%= link_to 'Delete', map_path(@map), :class => 'delete', :confirm => 'Delete this map (nodes and synapses will remain)?', :method => :delete %>
<% end %>
</div>
</div>

10
app/views/maps/_mapinfobox.html.erb
View file

@ -34,15 +34,15 @@
<div class="clearfloat"></div> <div class="clearfloat"></div>
</div> </div>
<% if (authenticated? && @map.authorize_to_edit(user)) || (!authenticated? && @map.desc != "" && @map.desc != nil )%>
<div class="mapInfoDesc"> <div class="mapInfoDesc">
<%= best_in_place @map, :desc, :type => :textarea, :nil => "Click to add description.", :classes => 'best_in_place_desc' %> <% if (authenticated? && @map.authorize_to_edit(user)) || (!authenticated? && @map.desc != "" && @map.desc != nil )%>
<%= best_in_place @map, :desc, :type => :textarea, :nil => "Click to add description.", :classes => 'best_in_place_desc' %>
<% end %>
</div> </div>
<% end %>
<div class="mapInfoMeta"> <div class="mapInfoMeta">
<p class="mapCreatedAt">Created by <%= @map.user == user ? "you" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p> <p class="mapCreatedAt"><span>Created by:</span> <%= @map.user == user ? "You" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p>
<p class="mapEditedAt">Last edited <%= @map.updated_at.strftime("%m/%d/%Y") %></p> <p class="mapEditedAt"><span>Last edited:</span> <%= @map.updated_at.strftime("%m/%d/%Y") %></p>
</div> </div>
<div class="mapInfoDelete"> <div class="mapInfoDelete">

3
public/famous/main.js
View file

@ -165,6 +165,9 @@ define(function(require, exports, module) {
} }
); );
}; };
f.maps.reposition = function () {
f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0));
};
var mapsScroll = new Scrollview(); var mapsScroll = new Scrollview();
mapsScroll._scroller.on('edgeHit', function(data){ mapsScroll._scroller.on('edgeHit', function(data){
if (data.position > 0 && if (data.position > 0 &&