adding topics to map from search results happens in a spiral
This commit is contained in:
Connor Turland
parent
1cceaceb06
commit
fbfe695998
6 changed files with 143 additions and 19 deletions
|
|
@ -368,11 +368,11 @@ Metamaps.GlobalUI.Search = {
|
|||
|
||||
// open if the search is closed and user hits ctrl+/
|
||||
// close if they hit ESC
|
||||
$('body').bind('keydown', function (e) {
|
||||
$('body').bind('keyup', function (e) {
|
||||
switch (e.which) {
|
||||
case 191:
|
||||
if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) {
|
||||
self.open();
|
||||
self.open(true); // true for focus
|
||||
}
|
||||
break;
|
||||
case 27:
|
||||
|
|
@ -396,7 +396,7 @@ Metamaps.GlobalUI.Search = {
|
|||
var self = Metamaps.GlobalUI.Search;
|
||||
self.locked = false;
|
||||
},
|
||||
open: function () {
|
||||
open: function (focus) {
|
||||
var self = Metamaps.GlobalUI.Search;
|
||||
|
||||
clearTimeout(self.timeOut);
|
||||
|
|
@ -405,6 +405,7 @@ Metamaps.GlobalUI.Search = {
|
|||
$('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
|
||||
width: '400px'
|
||||
}, 300, function () {
|
||||
if (focus) $('.sidebarSearchField').focus();
|
||||
$('.sidebarSearchField, .sidebarSearch .tt-hint').css({
|
||||
padding: '7px 10px 3px 10px',
|
||||
width: '380px'
|
||||
|
|
@ -413,7 +414,6 @@ Metamaps.GlobalUI.Search = {
|
|||
self.isOpen = true;
|
||||
});
|
||||
}
|
||||
//else if (self.locked) $('.sidebarSearchField').focus();
|
||||
},
|
||||
close: function (closeAfter, bypass) {
|
||||
var self = Metamaps.GlobalUI.Search;
|
||||
|
|
@ -567,6 +567,8 @@ Metamaps.GlobalUI.Search = {
|
|||
handleResultClick: function (event, datum, dataset) {
|
||||
var self = Metamaps.GlobalUI.Search;
|
||||
|
||||
self.hideLoader();
|
||||
|
||||
if (datum.rtype != "noresult") {
|
||||
self.close(0, true);
|
||||
var win;
|
||||
|
|
|
|||
|
|
@ -114,6 +114,8 @@
|
|||
|
||||
$('.wrapper').removeClass('homePage explorePage topicPage');
|
||||
$('.wrapper').addClass('mapPage');
|
||||
// another class will be added to wrapper if you
|
||||
// can edit this map '.canEditMap'
|
||||
|
||||
Metamaps.Famous.yield.hide();
|
||||
Metamaps.Famous.maps.hide();
|
||||
|
|
|
|||
|
|
@ -3309,6 +3309,8 @@ Metamaps.Topic = {
|
|||
getTopicFromAutocomplete: function (id) {
|
||||
var self = Metamaps.Topic;
|
||||
|
||||
$(document).trigger(Metamaps.Map.events.editedByActiveMapper);
|
||||
|
||||
Metamaps.Create.newTopic.hide();
|
||||
|
||||
var topic = self.get(id);
|
||||
|
|
@ -3322,6 +3324,30 @@ Metamaps.Topic = {
|
|||
Metamaps.Mappings.add(mapping);
|
||||
|
||||
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
|
||||
|
||||
|
|
@ -3492,6 +3518,13 @@ Metamaps.Map = {
|
|||
events: {
|
||||
editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper"
|
||||
},
|
||||
nextX: 0,
|
||||
nextY: 0,
|
||||
sideLength: 1,
|
||||
turnCount: 0,
|
||||
nextXshift: 1,
|
||||
nextYshift: 0,
|
||||
timeToTurn: 0,
|
||||
init: function () {
|
||||
var self = Metamaps.Map;
|
||||
|
||||
|
|
@ -3521,6 +3554,20 @@ Metamaps.Map = {
|
|||
Metamaps.Mappings = new bb.MappingCollection(data.mappings);
|
||||
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
|
||||
Metamaps.Visualize.type = "ForceDirected";
|
||||
Metamaps.JIT.prepareVizData();
|
||||
|
|
@ -3550,6 +3597,10 @@ Metamaps.Map = {
|
|||
},
|
||||
end: function () {
|
||||
if (Metamaps.Active.Map) {
|
||||
|
||||
$('.wrapper').removeClass('canEditMap commonsMap');
|
||||
Metamaps.Map.resetSpiral();
|
||||
|
||||
$('.rightclickmenu').remove();
|
||||
Metamaps.TopicCard.hideCard();
|
||||
Metamaps.SynapseCard.hideCard();
|
||||
|
|
@ -3600,6 +3651,63 @@ Metamaps.Map = {
|
|||
if (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;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
.mapElement {
|
||||
display: none;
|
||||
}
|
||||
.mapPage .mapElement {
|
||||
.mapPage .mapElement, .topicPage .mapElement {
|
||||
display: block;
|
||||
}
|
||||
.mapPage .mapElementHidden {
|
||||
|
|
@ -405,6 +405,7 @@
|
|||
outline: none;
|
||||
}
|
||||
.sidebarSearch button.addToMap {
|
||||
display:none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url(addtopic_sprite.png);
|
||||
|
|
@ -414,6 +415,9 @@
|
|||
left: 80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.canEditMap button.addToMap {
|
||||
display: block;
|
||||
}
|
||||
.sidebarSearch button.addToMap:hover {
|
||||
background-position: -24px;
|
||||
}
|
||||
|
|
@ -569,10 +573,14 @@
|
|||
position: relative;
|
||||
top: -42px; /* puts it just offscreen */
|
||||
}
|
||||
.mapPage .upperRightMapButtons {
|
||||
.mapPage .upperRightMapButtons, .topicPage .upperRightMapButtons {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.topicPage .sidebarCollaborate, .topicPage .sidebarFilter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upperRightIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -588,6 +596,11 @@
|
|||
}
|
||||
.sidebarCollaborateIcon {
|
||||
background-position-x: 0;
|
||||
display: none;
|
||||
}
|
||||
/* only show the collaborate icon on commons */
|
||||
.commonsMap .sidebarCollaborateIcon {
|
||||
display: block;
|
||||
}
|
||||
.sidebarFilterIcon {
|
||||
background-position-x: -64px;
|
||||
|
|
@ -728,16 +741,9 @@
|
|||
width:32px;
|
||||
z-index: 3;
|
||||
}
|
||||
.mapPage .mapControls {
|
||||
.mapPage .mapControls, .topicPage .mapControls {
|
||||
right: 24px;
|
||||
}
|
||||
/*.mapControls.animations {
|
||||
-webkit-transition-property: right;
|
||||
-moz-transition-property: right;
|
||||
-o-transition-property: right;
|
||||
-ms-transition-property: right;
|
||||
transition-property: right;
|
||||
}*/
|
||||
|
||||
.mapControl {
|
||||
width:32px;
|
||||
|
|
|
|||
|
|
@ -84,12 +84,9 @@
|
|||
<p class="resultDesc">{{description}}</p>
|
||||
</div>
|
||||
<div class="autoOptions">
|
||||
|
||||
<% if controller_name == 'maps' && action_name == 'show' && authenticated? && @map.authorize_to_edit(@current) %>
|
||||
<button class="addToMap hoverForTip" onclick="return keepFromCommons(event, {{id}})">
|
||||
<button class="addToMap hoverForTip" onclick="return Metamaps.Topic.getTopicFromSearch(event, {{id}})">
|
||||
<span class="tip">add to map</span>
|
||||
</button>
|
||||
<% end %>
|
||||
<div class="mapCount">
|
||||
{{mapCount}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,16 @@
|
|||
<% classes = action_name == "home" ? "homePage" : ""
|
||||
classes += action_name == "home" && authenticated? ? " 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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue