Middle.mouse.click features (Open contained link & copy text to clipboard) (#792)

* changed the code to be based off of the current dev branch

* Update JIT.js

* Update Util.js

* Update JIT.js

A few logical operators were replaced with their stricter counterpart.

* Update JIT.js

* Update index.js

* Update Util.js

frontend/src/Metamaps/JIT.js

@@ -21,6 +21,7 @@ import Topic from './Topic'
 import TopicCard from './TopicCard'
 import Util from './Util'
 import Visualize from './Visualize'
+import clipboard from 'clipboard-js'
 
 /*
  * Metamaps.Erb
@@ -410,14 +411,13 @@ const JIT = {
                 Mouse.boxStartCoordinates = null
                 Mouse.boxEndCoordinates = null
               }
-            // console.log('called zoom to box')
             }
 
             if (e.shiftKey) {
               Visualize.mGraph.busy = false
               Mouse.boxEndCoordinates = eventInfo.getPos()
               JIT.selectWithBox(e)
-              // console.log('called select with box')
+              
               return
             }
           }
@@ -427,13 +427,10 @@ const JIT = {
           // clicking on a edge, node, or clicking on blank part of canvas?
           if (node.nodeFrom) {
             JIT.selectEdgeOnClickHandler(node, e)
-          // console.log('called selectEdgeOnClickHandler')
           } else if (node && !node.nodeFrom) {
             JIT.selectNodeOnClickHandler(node, e)
-          // console.log('called selectNodeOnClickHandler')
           } else {
             JIT.canvasClickHandler(eventInfo.getPos(), e)
-          // console.log('called canvasClickHandler')
           } // if
         },
         // Add also a click handler to nodes
@@ -1333,6 +1330,9 @@ const JIT = {
     if (Visualize.mGraph.busy) return
 
     const self = JIT
+        
+    //Copy topic title to clipboard
+    if(e.button===1 && e.ctrlKey) clipboard.copy(node.name);
 
     // catch right click on mac, which is often like ctrl+click
     if (navigator.platform.indexOf('Mac') !== -1 && e.ctrlKey) {
@@ -1354,25 +1354,45 @@ const JIT = {
       // wait a certain length of time, then check again, then run this code
       setTimeout(function () {
         if (!JIT.nodeWasDoubleClicked()) {
-          const nodeAlreadySelected = node.selected
+          var nodeAlreadySelected = node.selected
-
+          
-          if (!e.shiftKey) {
+          if(e.button!==1){
-            Control.deselectAllNodes()
+            if (!e.shiftKey) {
-            Control.deselectAllEdges()
+              Control.deselectAllNodes()
-          }
+              Control.deselectAllEdges()
-
+            }
-          if (nodeAlreadySelected) {
+  
-            Control.deselectNode(node)
+            if (nodeAlreadySelected) {
+              Control.deselectNode(node)
+            } else {
+              Control.selectNode(node, e)
+            }
+            
+            // trigger animation to final styles
+            Visualize.mGraph.fx.animate({
+              modes: ['edge-property:lineWidth:color:alpha'],
+              duration: 500
+            })
+            Visualize.mGraph.plot()
+            
           } else {
-            Control.selectNode(node, e)
+            if(!e.ctrlKey){
+              var len = Selected.Nodes.length;
+              
+              for (let i = 0; i < len; i += 1) {
+                let n = Selected.Nodes[i];
+                let result = Metamaps.Util.openLink(Metamaps.Topics.get(n.id).attributes.link);
+                
+                if (!result) { //if link failed to open
+                    break;
+                }
+              }
+              
+              if(!node.selected){
+                Metamaps.Util.openLink(Metamaps.Topics.get(node.id).attributes.link);
+              }
+            }
           }
-
-          // trigger animation to final styles
-          Visualize.mGraph.fx.animate({
-            modes: ['edge-property:lineWidth:color:alpha'],
-            duration: 500
-          })
-          Visualize.mGraph.plot()
         }
       }, Mouse.DOUBLE_CLICK_TOLERANCE)
     }
@@ -1598,6 +1618,9 @@ const JIT = {
     if (Visualize.mGraph.busy) return
 
     const self = JIT
+    var synapseText = adj.data.$synapses[0].attributes.desc;
+    //Copy synapse label to clipboard
+    if(e.button===1 && e.ctrlKey && synapseText !== "") clipboard.copy(synapseText);
 
     // catch right click on mac, which is often like ctrl+click
     if (navigator.platform.indexOf('Mac') !== -1 && e.ctrlKey) {

frontend/src/Metamaps/Map/index.js

@@ -44,6 +44,10 @@ const Map = {
     $('#wrapper').on('contextmenu', function (e) {
       return false
     })
+    
+    $('#wrapper').mousedown(function (e){
+      if(e.button === 1)return false;
+    });
 
     $('.starMap').click(function () {
       if ($(this).is('.starred')) self.unstar()

frontend/src/Metamaps/Util.js

@@ -124,6 +124,18 @@ const Util = {
   checkURLisYoutubeVideo: function (url) {
     return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null)
   },
+  openLink: function(url){
+    var win = (url !== "") ? window.open(url, '_blank') : "empty";
+    
+    if (win) {
+        //Browser has allowed it to be opened
+        return true;
+    } else {
+        //Browser has blocked it
+        alert('Please allow popups in order to open the link');
+        return false;
+    }
+  },
   mdToHTML: text => {
     // use safe: true to filter xss
     return new HtmlRenderer({ safe: true })