allow topic carousel to be pinned open (#643)

* so that rapid topic creation can happen in succession

* close when map closes

app/assets/javascripts/lib/cloudcarousel.js

@@ -179,7 +179,9 @@ jQuery.browser = browser;
 		{
 			// START METAMAPS CODE
 			$('body').bind('mousewheel',this,function(event, delta) {					 
-					 if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.isSwitchingSet) {
+					 if (Metamaps.Create.newTopic.beingCreated && 
+					     !Metamaps.Create.isSwitchingSet &&
+					     !Metamaps.Create.newTopic.pinned) {
 					 	event.data.rotate(delta);
 					 	return false;
 					 }

app/assets/javascripts/src/JIT.js.erb

@@ -2454,7 +2454,7 @@ Extras.Classes.Navigation = new Class({
     // START METAMAPS CODE
     e.preventDefault();
 	  if (e.target.id != 'infovis-canvas') return;
-    if (Metamaps.Create.newTopic.beingCreated) return;
+    if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.newTopic.pinned) return;
 	  // END METAMAPS CODE
   
     //$.event.stop($.event.get(e, win));

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

@@ -150,6 +150,17 @@ Metamaps.Create = {
       $('#topic_name').keyup(function () {
         Metamaps.Create.newTopic.name = $(this).val()
       })
+      
+      $('.pinCarousel').click(function() {
+        if (Metamaps.Create.newTopic.pinned) {
+          $('.pinCarousel').removeClass('isPinned')
+          Metamaps.Create.newTopic.pinned = false
+        }
+        else {
+          $('.pinCarousel').addClass('isPinned')
+          Metamaps.Create.newTopic.pinned = true
+        }
+      })
 
       var topicBloodhound = new Bloodhound({
         datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
@@ -204,6 +215,7 @@ Metamaps.Create = {
     x: null,
     y: null,
     addSynapse: false,
+    pinned: false,
     open: function () {
       $('#new_topic').fadeIn('fast', function () {
         $('#topic_name').focus()
@@ -211,10 +223,16 @@ Metamaps.Create = {
       Metamaps.Create.newTopic.beingCreated = true
       Metamaps.Create.newTopic.name = ''
     },
-    hide: function () {
-      $('#new_topic').fadeOut('fast')
+    hide: function (force) {
+      if (force || !Metamaps.Create.newTopic.pinned) {
+        $('#new_topic').fadeOut('fast')
+        Metamaps.Create.newTopic.beingCreated = false
+      }
+      if (force) {
+        $('.pinCarousel').removeClass('isPinned')
+        Metamaps.Create.newTopic.pinned = false
+      }
       $('#topic_name').typeahead('val', '')
-      Metamaps.Create.newTopic.beingCreated = false
     }
   },
   newSynapse: {

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

@@ -136,7 +136,7 @@ Metamaps.Map = {
       $('.rightclickmenu').remove()
       Metamaps.TopicCard.hideCard()
       Metamaps.SynapseCard.hideCard()
-      Metamaps.Create.newTopic.hide()
+      Metamaps.Create.newTopic.hide(true) // true means force (and override pinned)
       Metamaps.Create.newSynapse.hide()
       Metamaps.Filter.close()
       Metamaps.Map.InfoBox.close()
@@ -284,7 +284,13 @@ Metamaps.Map = {
       }
     }
 
-    return {
+    // this is so that if someone has relied on the auto-placement feature on this map,
+    // it will at least start placing nodes at the first empty spot
+    // this will only work up to the point in the spiral at which someone manually moved a node
+    if (Metamaps.Mappings.findWhere({ xloc: nextX, yloc: nextY })) {
+      return self.getNextCoord()
+    }
+    else return {
       x: nextX,
       y: nextY
     }

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

@@ -325,9 +325,12 @@ Metamaps.Topic = {
     })
     Metamaps.Topics.add(topic)
 
+    if (Metamaps.Create.newTopic.pinned) {
+      var nextCoords = Metamaps.Map.getNextCoord()
+    }
     var mapping = new Metamaps.Backbone.Mapping({
-      xloc: Metamaps.Create.newTopic.x,
-      yloc: Metamaps.Create.newTopic.y,
+      xloc: nextCoords ? nextCoords.x : Metamaps.Create.newTopic.x,
+      yloc: nextCoords ? nextCoords.y : Metamaps.Create.newTopic.y,
       mappable_id: topic.cid,
       mappable_type: 'Topic',
     })
@@ -347,9 +350,12 @@ Metamaps.Topic = {
 
     var topic = self.get(id)
 
+    if (Metamaps.Create.newTopic.pinned) {
+      var nextCoords = Metamaps.Map.getNextCoord()
+    }
     var mapping = new Metamaps.Backbone.Mapping({
-      xloc: Metamaps.Create.newTopic.x,
-      yloc: Metamaps.Create.newTopic.y,
+      xloc: nextCoords ? nextCoords.x : Metamaps.Create.newTopic.x,
+      yloc: nextCoords ? nextCoords.y : Metamaps.Create.newTopic.y,
       mappable_type: 'Topic',
       mappable_id: topic.id,
     })

app/assets/stylesheets/application.css.erb

@@ -567,6 +567,26 @@ button.button.btn-no:hover {
 .openMetacodeSwitcher:hover {
     background-position: -16px 0;
 }
+.pinCarousel {
+    cursor: pointer;
+    display: block;
+    height: 16px;
+    width: 16px;
+    background-image: url(<%= asset_data_uri('pincarousel_sprite.png') %>);
+    position: absolute;
+    z-index: 2;
+    top: 20px;
+    right: 16px;
+}
+.pinCarousel:hover {
+    background-position: 0 -16px;
+}
+.pinCarousel.isPinned {
+    background-position: -16px 0;
+}
+.pinCarousel.isPinned:hover {
+    background-position: -16px -16px;
+}
 #metacodeImg {
     height: 120px;
 }

app/assets/stylesheets/clean.css.erb

@@ -458,7 +458,7 @@
 }
 
 .zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
- .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, .starMap:hover .tooltipsAbove {
+ .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, .starMap:hover .tooltipsAbove, .openMetacodeSwitcher:hover .tooltipsAbove, .pinCarousel:not(.isPinned):hover .tooltipsAbove.helpPin, .pinCarousel.isPinned:hover .tooltipsAbove.helpUnpin  {
     display: block;
 }
 
@@ -522,6 +522,29 @@
     margin-left: -34px;
 }
 
+.openMetacodeSwitcher .tooltipsAbove {
+    left: -50px;
+    top: -5px;
+}
+.pinCarousel .tooltipsAbove {
+    top: -5px;
+}
+.pinCarousel .tooltipsAbove.helpPin {
+    left: -24px;
+}
+.pinCarousel .tooltipsAbove.helpUnpin {
+    left: -14px;
+}
+.openMetacodeSwitcher .tooltipsAbove:after {
+    left: 50%;
+}
+.pinCarousel .tooltipsAbove.helpPin:after {
+    left: 46%;
+}
+.pinCarousel .tooltipsAbove.helpUnpin:after {
+    left: 42%;
+}
+
 .sidebarForkIcon div:after{
     left: 45%;
 }
@@ -586,7 +609,7 @@
     right: 37% !important;
 }
 
-.mapInfoIcon div:after, .openCheatsheet div:after, .starMap div:after {
+.mapInfoIcon div:after, .openCheatsheet div:after, .starMap div:after, .openMetacodeSwitcher div:after, .pinCarousel div:after {
    content: '';
     position: absolute;
     top: 76%;

app/views/maps/_newtopic.html.erb

@@ -1,5 +1,11 @@
 <%= form_for Topic.new, url: topics_url, remote: true do |form| %>
-  <div class="openMetacodeSwitcher openLightbox" data-open="switchMetacodes"></div>
+  <div class="openMetacodeSwitcher openLightbox" data-open="switchMetacodes">
+    <div class="tooltipsAbove">Switch Metacodes</div>
+  </div>
+  <div class="pinCarousel">
+    <div class="tooltipsAbove helpPin">Pin Open</div>
+    <div class="tooltipsAbove helpUnpin">Unpin</div>
+  </div>
   <div id="metacodeImg">
     <% @metacodes = user_metacodes() %>
     <% set = get_metacodeset() %>

app/views/topics/_new.html.erb

@@ -6,7 +6,12 @@
 
 <div class="anypage">
 <%= form_for Topic.new, url: topics_url, remote: true do |form| %>
-  <div class="openMetacodeSwitcher openLightbox" data-open="switchMetacodes"></div>
+  <div class="openMetacodeSwitcher openLightbox" data-open="switchMetacodes">
+    <div class="tooltipsAbove">Switch Metacodes</div>
+  </div>
+  <div class="pinCarousel">
+    <div class="tooltipsAbove">Keep Open</div>
+  </div>
   <div id="metacodeImg">
     <% @m = user.settings.metacodes %>
     <% set = @m[0].include?("metacodeset") ? MetacodeSet.find(@m[0].sub("metacodeset-","").to_i) : false %>