adding topics to map from search results happens in a spiral

app/assets/javascripts/src/Metamaps.GlobalUI.js

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

app/assets/javascripts/src/Metamaps.Router.js

@@ -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();

app/assets/javascripts/src/Metamaps.js

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

app/assets/stylesheets/clean.css

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

app/views/layouts/_templates.html.erb

@@ -84,12 +84,9 @@
         <p class="resultDesc">{{description}}</p>
       </div>
       <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>
         </button>
-        <% end %>
         <div class="mapCount">
           {{mapCount}}
         </div>

app/views/layouts/application.html.erb

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