fetch siblings & center topic keyboard shortcuts - fixes #466 (#588)

* fetch siblings & center topic keyboard shortcuts - fixes #466

* add keyboard shortcut labels

* update keyboard shortcuts to Ctrl+E, Ctrl+R, and Ctrl+T, and update docs

* zoom extents back to Ctrl+E and use e.preventDefault

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

@@ -1335,7 +1335,7 @@ Metamaps.JIT = {
     if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-delete ' + disabled + '"><div class="rc-icon"></div>Delete<div class="rc-keyboard">Ctrl+D</div></li>'
 
     if (Metamaps.Active.Topic) {
-      menustring += '<li class="rc-center"><div class="rc-icon"></div>Center this topic</li>'
+      menustring += '<li class="rc-center"><div class="rc-icon"></div>Center this topic<div class="rc-keyboard">Ctrl+E</div></li>'
     }
     menustring += '<li class="rc-popout"><div class="rc-icon"></div>Open in new tab</li>'
     if (Metamaps.Active.Mapper) {
@@ -1360,10 +1360,10 @@ Metamaps.JIT = {
       // set up the get sibling menu as a "lazy load"
       // only fill in the submenu when they hover over the get siblings list item
       var siblingMenu = '<ul id="fetchSiblingList"> \
-                                <li class="fetchAll">All</li> \
+                                <li class="fetchAll">All<div class="rc-keyboard">Ctrl+R</div></li> \
                                 <li id="loadingSiblings"></li> \
                             </ul>'
-      menustring += '<li class="rc-siblings"><div class="rc-icon"></div>Get siblings' + siblingMenu + '<div class="expandLi"></div></li>'
+      menustring += '<li class="rc-siblings"><div class="rc-icon"></div>Reveal siblings' + siblingMenu + '<div class="expandLi"></div></li>'
     }
 
     menustring += '</ul>'

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

@@ -11,6 +11,7 @@
  */
 Metamaps.Listeners = {
   init: function () {
+    var self = this
     $(document).on('keydown', function (e) {
       if (!(Metamaps.Active.Map || Metamaps.Active.Topic)) return
 
@@ -35,21 +36,6 @@ Metamaps.Listeners = {
             Metamaps.Visualize.mGraph.plot()
           }
 
-          break
-        case 69: // if e or E is pressed
-          if (e.ctrlKey) {
-            e.preventDefault()
-            if (Metamaps.Active.Map) {
-              Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas)
-            }
-          }
-          break
-        case 77: // if m or M is pressed
-          if (e.ctrlKey) {
-            e.preventDefault()
-            Metamaps.Control.removeSelectedNodes()
-            Metamaps.Control.removeSelectedEdges()
-          }
           break
         case 68: // if d or D is pressed
           if (e.ctrlKey) {
@@ -57,6 +43,19 @@ Metamaps.Listeners = {
             Metamaps.Control.deleteSelected()
           }
           break
+        case 69: // if e or E is pressed
+          if (e.ctrlKey) {
+            e.preventDefault()
+            if (Metamaps.Active.Topic) {
+              self.centerAndReveal(Metamaps.Selected.Nodes, {
+                center: true,
+                reveal: false
+              })
+            } else if (Metamaps.Active.Map) {
+              Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas)
+            }
+          }
+          break
         case 72: // if h or H is pressed
           if (e.ctrlKey) {
             e.preventDefault()
@@ -64,8 +63,34 @@ Metamaps.Listeners = {
             Metamaps.Control.hideSelectedEdges()
           }
           break
+        case 77: // if m or M is pressed
+          if (e.ctrlKey) {
+            e.preventDefault()
+            Metamaps.Control.removeSelectedNodes()
+            Metamaps.Control.removeSelectedEdges()
+          }
+          break
+        case 82: // if r or R is pressed
+          if (e.ctrlKey && Metamaps.Active.Topic) {
+            e.preventDefault()
+            self.centerAndReveal(Metamaps.Selected.Nodes, {
+              center: false,
+              reveal: true
+            })
+          }
+          break
+        case 84: // if t or T is pressed
+          if (e.ctrlKey && Metamaps.Active.Topic) {
+            e.preventDefault()
+            self.centerAndReveal(Metamaps.Selected.Nodes, {
+              center: true,
+              reveal: true
+            })
+          }
+          break
         default:
-          break; // alert(e.which)
+          // console.log(e.which)
+          break
       }
     })
 
@@ -74,5 +99,15 @@ Metamaps.Listeners = {
       if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition()
       if (Metamaps.Active.Map && Metamaps.Realtime.inConversation) Metamaps.Realtime.positionVideos()
     })
+  },
+  centerAndReveal: function(nodes, opts) {
+    if (nodes.length < 1) return
+    var node = nodes[nodes.length - 1]
+    if (opts.center) {
+      Metamaps.Topic.centerOn(node.id)
+    }
+    if (opts.reveal) {
+      Metamaps.Topic.fetchRelatives(node)
+    }
   }
 }; // end Metamaps.Listeners

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

@@ -673,6 +673,8 @@ Metamaps.Map.InfoBox = {
     return string
   },
   updateNumbers: function () {
+    if (!Metamaps.Active.Map) return
+
     var self = Metamaps.Map.InfoBox
     var mapper = Metamaps.Active.Mapper
     var relevantPeople = Metamaps.Active.Map.get('permission') === 'commons' ? Metamaps.Mappers : Metamaps.Collaborators

app/assets/stylesheets/application.css.erb

@@ -1249,8 +1249,9 @@ h3.filterBox {
 .rightclickmenu .rc-metacode > ul > li,
 .rightclickmenu .rc-siblings > ul > li {
     padding: 6px 24px 6px 8px;
-    width: auto;
     white-space: nowrap;
+    width: auto;
+    min-width: 5em;
 }
 .rightclickmenu .rc-metacode ul ul,
 .rightclickmenu .rc-siblings ul ul {

app/views/shared/_cheatsheet.html.erb

@@ -26,8 +26,9 @@
   </ul>
 
   <div id="csTopicView">    
-    <div class="csItem"><span class="csTitle">Recenter Topics around chosen Topic:</span> Alt + click on the topic OR Right-click + 'center this topic'</div>
-
+    <div class="csItem"><span class="csTitle">Recenter Topics around chosen Topic:</span> Alt + click on the topic OR Ctrl + E</div>
+    <div class="csItem"><span class="csTitle">Reveal the siblings for a Topic:</span> Right-click and choose 'Reveal siblings' OR Ctrl + R</div>
+    <div class="csItem"><span class="csTitle">Center topic and reveal siblings:</span> Ctrl + T</div>
   </div>
   
   <div id="csCreatingTopics">