adding topics to map from search results happens in a spiral

This commit is contained in:
Connor Turland 2014-10-16 23:54:26 -04:00
parent 1cceaceb06
commit fbfe695998
6 changed files with 143 additions and 19 deletions

View file

@ -368,11 +368,11 @@ Metamaps.GlobalUI.Search = {
// open if the search is closed and user hits ctrl+/ // open if the search is closed and user hits ctrl+/
// close if they hit ESC // close if they hit ESC
$('body').bind('keydown', function (e) { $('body').bind('keyup', function (e) {
switch (e.which) { switch (e.which) {
case 191: case 191:
if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) { if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) {
self.open(); self.open(true); // true for focus
} }
break; break;
case 27: case 27:
@ -396,7 +396,7 @@ Metamaps.GlobalUI.Search = {
var self = Metamaps.GlobalUI.Search; var self = Metamaps.GlobalUI.Search;
self.locked = false; self.locked = false;
}, },
open: function () { open: function (focus) {
var self = Metamaps.GlobalUI.Search; var self = Metamaps.GlobalUI.Search;
clearTimeout(self.timeOut); clearTimeout(self.timeOut);
@ -405,6 +405,7 @@ Metamaps.GlobalUI.Search = {
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({ $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
width: '400px' width: '400px'
}, 300, function () { }, 300, function () {
if (focus) $('.sidebarSearchField').focus();
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({ $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
padding: '7px 10px 3px 10px', padding: '7px 10px 3px 10px',
width: '380px' width: '380px'
@ -413,7 +414,6 @@ Metamaps.GlobalUI.Search = {
self.isOpen = true; self.isOpen = true;
}); });
} }
//else if (self.locked) $('.sidebarSearchField').focus();
}, },
close: function (closeAfter, bypass) { close: function (closeAfter, bypass) {
var self = Metamaps.GlobalUI.Search; var self = Metamaps.GlobalUI.Search;
@ -567,6 +567,8 @@ Metamaps.GlobalUI.Search = {
handleResultClick: function (event, datum, dataset) { handleResultClick: function (event, datum, dataset) {
var self = Metamaps.GlobalUI.Search; var self = Metamaps.GlobalUI.Search;
self.hideLoader();
if (datum.rtype != "noresult") { if (datum.rtype != "noresult") {
self.close(0, true); self.close(0, true);
var win; var win;

View file

@ -114,6 +114,8 @@
$('.wrapper').removeClass('homePage explorePage topicPage'); $('.wrapper').removeClass('homePage explorePage topicPage');
$('.wrapper').addClass('mapPage'); $('.wrapper').addClass('mapPage');
// another class will be added to wrapper if you
// can edit this map '.canEditMap'
Metamaps.Famous.yield.hide(); Metamaps.Famous.yield.hide();
Metamaps.Famous.maps.hide(); Metamaps.Famous.maps.hide();

View file

@ -3309,6 +3309,8 @@ Metamaps.Topic = {
getTopicFromAutocomplete: function (id) { getTopicFromAutocomplete: function (id) {
var self = Metamaps.Topic; var self = Metamaps.Topic;
$(document).trigger(Metamaps.Map.events.editedByActiveMapper);
Metamaps.Create.newTopic.hide(); Metamaps.Create.newTopic.hide();
var topic = self.get(id); var topic = self.get(id);
@ -3322,6 +3324,30 @@ Metamaps.Topic = {
Metamaps.Mappings.add(mapping); Metamaps.Mappings.add(mapping);
self.renderTopic(mapping, topic, true, true); self.renderTopic(mapping, topic, true, true);
},
getTopicFromSearch: function (event, id) {
var self = Metamaps.Topic;
$(document).trigger(Metamaps.Map.events.editedByActiveMapper);
var topic = self.get(id);
var nextCoords = Metamaps.Map.getNextCoord();
var mapping = new Metamaps.Backbone.Mapping({
category: "Topic",
xloc: nextCoords.x,
yloc: nextCoords.y,
topic_id: topic.id
});
Metamaps.Mappings.add(mapping);
self.renderTopic(mapping, topic, true, true);
Metamaps.GlobalUI.notifyUser('Topic was added to your map!');
event.stopPropagation();
event.preventDefault();
return false;
} }
}; // end Metamaps.Topic }; // end Metamaps.Topic
@ -3492,6 +3518,13 @@ Metamaps.Map = {
events: { events: {
editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper" editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper"
}, },
nextX: 0,
nextY: 0,
sideLength: 1,
turnCount: 0,
nextXshift: 1,
nextYshift: 0,
timeToTurn: 0,
init: function () { init: function () {
var self = Metamaps.Map; var self = Metamaps.Map;
@ -3521,6 +3554,20 @@ Metamaps.Map = {
Metamaps.Mappings = new bb.MappingCollection(data.mappings); Metamaps.Mappings = new bb.MappingCollection(data.mappings);
Metamaps.Backbone.attachCollectionEvents(); Metamaps.Backbone.attachCollectionEvents();
var map = Metamaps.Active.Map;
var mapper = Metamaps.Active.Mapper;
// add class to .wrapper for specifying whether you can edit the map
if (map.authorizeToEdit(mapper)) {
$('.wrapper').addClass('canEditMap');
}
// add class to .wrapper for specifying if the map can
// be collaborated on
if (map.get('permission') === 'commons') {
$('.wrapper').addClass('commonsMap');
}
// build and render the visualization // build and render the visualization
Metamaps.Visualize.type = "ForceDirected"; Metamaps.Visualize.type = "ForceDirected";
Metamaps.JIT.prepareVizData(); Metamaps.JIT.prepareVizData();
@ -3550,6 +3597,10 @@ Metamaps.Map = {
}, },
end: function () { end: function () {
if (Metamaps.Active.Map) { if (Metamaps.Active.Map) {
$('.wrapper').removeClass('canEditMap commonsMap');
Metamaps.Map.resetSpiral();
$('.rightclickmenu').remove(); $('.rightclickmenu').remove();
Metamaps.TopicCard.hideCard(); Metamaps.TopicCard.hideCard();
Metamaps.SynapseCard.hideCard(); Metamaps.SynapseCard.hideCard();
@ -3600,6 +3651,63 @@ Metamaps.Map = {
if (Metamaps.Active.Mapper) { if (Metamaps.Active.Mapper) {
Metamaps.Mappers.add(Metamaps.Active.Mapper); Metamaps.Mappers.add(Metamaps.Active.Mapper);
} }
},
getNextCoord: function() {
var self = Metamaps.Map;
var nextX = self.nextX;
var nextY = self.nextY;
var DISTANCE_BETWEEN = 120;
self.nextX = self.nextX + DISTANCE_BETWEEN * self.nextXshift;
self.nextY = self.nextY + DISTANCE_BETWEEN * self.nextYshift;
self.timeToTurn += 1;
// if true, it's time to turn
if (self.timeToTurn === self.sideLength) {
self.turnCount += 1;
// if true, it's time to increase side length
if (self.turnCount % 2 === 0) {
self.sideLength += 1;
}
self.timeToTurn = 0;
// going right? turn down
if (self.nextXshift == 1 && self.nextYshift == 0) {
self.nextXshift = 0;
self.nextYshift = 1;
}
// going down? turn left
else if (self.nextXshift == 0 && self.nextYshift == 1) {
self.nextXshift = -1;
self.nextYshift = 0;
}
// going left? turn up
else if (self.nextXshift == -1 && self.nextYshift == 0) {
self.nextXshift = 0;
self.nextYshift = -1;
}
// going up? turn right
else if (self.nextXshift == 0 && self.nextYshift == -1) {
self.nextXshift = 1;
self.nextYshift = 0;
}
}
return {
x: nextX,
y: nextY
}
},
resetSpiral: function() {
Metamaps.Map.nextX = 0;
Metamaps.Map.nextY = 0;
Metamaps.Map.nextXshift = 1;
Metamaps.Map.nextYshift = 0;
Metamaps.Map.sideLength = 1;
Metamaps.Map.timeToTurn = 0;
Metamaps.Map.turnCount = 0;
} }
}; };

View file

@ -57,7 +57,7 @@
.mapElement { .mapElement {
display: none; display: none;
} }
.mapPage .mapElement { .mapPage .mapElement, .topicPage .mapElement {
display: block; display: block;
} }
.mapPage .mapElementHidden { .mapPage .mapElementHidden {
@ -405,6 +405,7 @@
outline: none; outline: none;
} }
.sidebarSearch button.addToMap { .sidebarSearch button.addToMap {
display:none;
width: 24px; width: 24px;
height: 24px; height: 24px;
background: url(addtopic_sprite.png); background: url(addtopic_sprite.png);
@ -414,6 +415,9 @@
left: 80px; left: 80px;
cursor: pointer; cursor: pointer;
} }
.canEditMap button.addToMap {
display: block;
}
.sidebarSearch button.addToMap:hover { .sidebarSearch button.addToMap:hover {
background-position: -24px; background-position: -24px;
} }
@ -569,10 +573,14 @@
position: relative; position: relative;
top: -42px; /* puts it just offscreen */ top: -42px; /* puts it just offscreen */
} }
.mapPage .upperRightMapButtons { .mapPage .upperRightMapButtons, .topicPage .upperRightMapButtons {
top: 0; top: 0;
} }
.topicPage .sidebarCollaborate, .topicPage .sidebarFilter {
display: none;
}
.upperRightIcon { .upperRightIcon {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -588,6 +596,11 @@
} }
.sidebarCollaborateIcon { .sidebarCollaborateIcon {
background-position-x: 0; background-position-x: 0;
display: none;
}
/* only show the collaborate icon on commons */
.commonsMap .sidebarCollaborateIcon {
display: block;
} }
.sidebarFilterIcon { .sidebarFilterIcon {
background-position-x: -64px; background-position-x: -64px;
@ -728,16 +741,9 @@
width:32px; width:32px;
z-index: 3; z-index: 3;
} }
.mapPage .mapControls { .mapPage .mapControls, .topicPage .mapControls {
right: 24px; right: 24px;
} }
/*.mapControls.animations {
-webkit-transition-property: right;
-moz-transition-property: right;
-o-transition-property: right;
-ms-transition-property: right;
transition-property: right;
}*/
.mapControl { .mapControl {
width:32px; width:32px;

View file

@ -84,12 +84,9 @@
<p class="resultDesc">{{description}}</p> <p class="resultDesc">{{description}}</p>
</div> </div>
<div class="autoOptions"> <div class="autoOptions">
<button class="addToMap hoverForTip" onclick="return Metamaps.Topic.getTopicFromSearch(event, {{id}})">
<% if controller_name == 'maps' && action_name == 'show' && authenticated? && @map.authorize_to_edit(@current) %>
<button class="addToMap hoverForTip" onclick="return keepFromCommons(event, {{id}})">
<span class="tip">add to map</span> <span class="tip">add to map</span>
</button> </button>
<% end %>
<div class="mapCount"> <div class="mapCount">
{{mapCount}} {{mapCount}}
</div> </div>

View file

@ -37,7 +37,16 @@
<% classes = action_name == "home" ? "homePage" : "" <% classes = action_name == "home" ? "homePage" : ""
classes += action_name == "home" && authenticated? ? " explorePage" : "" classes += action_name == "home" && authenticated? ? " explorePage" : ""
classes += controller_name == "maps" && action_name == "index" ? " explorePage" : "" classes += controller_name == "maps" && action_name == "index" ? " explorePage" : ""
classes += controller_name == "maps" && action_name == "show" ? " mapPage" : "" if controller_name == "maps" && action_name == "show"
classes += " mapPage"
if @map.authorize_to_edit(current_user)
classes += " canEditMap"
end
if @map.permission == "commons"
classes += " commonsMap"
end
end
classes += controller_name == "topics" && action_name == "show" ? " topicPage" : ""
%> %>
<div class="wrapper <%= classes %>" id="wrapper"> <div class="wrapper <%= classes %>" id="wrapper">