refactor import view:

-Paste Input wrapper class to abstract away getting input
-Add ability to drop files in PasteInput
-Add ability to drop .webloc files or paste a link to create a new topic with that link in the link and desc fields

app/assets/javascripts/application.js

@@ -43,5 +43,7 @@
 //= require ./src/Metamaps.Mobile
 //= require ./src/Metamaps.Admin
 //= require ./src/Metamaps.Import
+//= require ./src/Metamaps.AutoLayout
+//= require ./src/Metamaps.PasteInput
 //= require ./src/Metamaps.JIT
 //= require ./src/Metamaps.Debug

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

@@ -6,7 +6,6 @@
  * Dependencies:
  *  - Metamaps.Active
  *  - Metamaps.Backbone
- *  - Metamaps.Famous    // TODO remove dependency
  *  - Metamaps.Map
  *  - Metamaps.Mappings
  *  - Metamaps.Metacodes
@@ -24,38 +23,30 @@ Metamaps.Import = {
   ],
   cidMappings: {}, // to be filled by import_id => cid mappings
 
-  init: function () {
+  handleTSV: function (text) {
     var self = Metamaps.Import
+    results = self.parseTabbedString(text)
+    self.handle(results)
+  },
 
-    $('body').bind('paste', function (e) {
+  handleJSON: function (text) {
-      if (e.target.tagName === 'INPUT') return
+    var self = Metamaps.Import
-      if (e.target.tagName === 'TEXTAREA') return
+    results = JSON.parse(text)
+    self.handle(results)
+  },
 
-      var text = e.originalEvent.clipboardData.getData('text/plain')
+  handle: function(results) {
+    var self = Metamaps.Import
+    var topics = results.topics
+    var synapses = results.synapses
 
-      var results
+    if (topics.length > 0 || synapses.length > 0) {
-      if (text.trimLeft()[0] === '{') {
+      if (window.confirm('Are you sure you want to create ' + topics.length +
-        try {
+          ' new topics and ' + synapses.length + ' new synapses?')) {
-          results = JSON.parse(text)
+        self.importTopics(topics)
-        } catch (e) {
+        self.importSynapses(synapses)
-          results = false
-        }
-      } else {
-        results = self.parseTabbedString(text)
-      }
-      if (results === false) return
-
-      var topics = results.topics
-      var synapses = results.synapses
-
-      if (topics.length > 0 || synapses.length > 0) {
-        if (window.confirm('Are you sure you want to create ' + topics.length +
-            ' new topics and ' + synapses.length + ' new synapses?')) {
-          self.importTopics(topics)
-          self.importSynapses(synapses)
-        } // if
       } // if
-    })
+    } // if
   },
 
   abort: function (message) {
@@ -272,15 +263,22 @@ Metamaps.Import = {
       console.warn("Couldn't find metacode " + metacode_name + ' so used Wildcard instead.')
     }
 
+    var topic_permission = permission || Metamaps.Active.Map.get('permission')
+    var defer_to_map_id = permission === topic_permission ? Metamaps.Active.Map.get('id') : null
     var topic = new Metamaps.Backbone.Topic({
       name: name,
       metacode_id: metacode.id,
-      permission: permission || Metamaps.Active.Map.get('permission'),
+      permission: topic_permission,
-      desc: desc || "",
+      defer_to_map_id: defer_to_map_id,
-      link: link
+      desc: desc || ""
     })
+    topic.set('desc', desc || '') // TODO why is this necessary?
+    topic.set('link', link) // TODO why is this necessary?
     Metamaps.Topics.add(topic)
-    self.cidMappings[import_id] = topic.cid
+
+    if (import_id !== null && import_id !== undefined) {
+      self.cidMappings[import_id] = topic.cid
+    }
 
     var mapping = new Metamaps.Backbone.Mapping({
       xloc: xloc,
@@ -293,7 +291,7 @@ Metamaps.Import = {
     // this function also includes the creation of the topic in the database
     Metamaps.Topic.renderTopic(mapping, topic, true, true)
 
-    Metamaps.Famous.viz.hideInstructions()
+    Metamaps.GlobalUI.hideDiv('#instructions')
   },
 
   createSynapseWithParameters: function (desc, category, permission,

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

@@ -0,0 +1,120 @@
+/* global Metamaps, $ */
+
+/*
+ * Metamaps.PasteInput.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Import
+ *  - Metamaps.AutoLayout
+ */
+
+Metamaps.PasteInput = {
+  init: function () {
+    var self = Metamaps.PasteInput
+
+    // intercept dragged files
+    // see http://stackoverflow.com/questions/6756583
+    window.addEventListener("dragover", function(e){
+      e = e || event;
+      e.preventDefault();
+    }, false);
+    window.addEventListener("drop", function(e){
+      e = e || event;
+      e.preventDefault();
+      var coords = Metamaps.Util.pixelsToCoords({ x: e.clientX, y: e.clientY })
+      if (e.dataTransfer.files.length > 0) {
+        var fileReader = new FileReader()
+        var text = fileReader.readAsText(e.dataTransfer.files[0])
+        fileReader.onload = function(e) {
+          var text = e.currentTarget.result
+          if (text.substring(0,5) === '<?xml') {
+            // assume this is a macOS .webloc link
+            text = text.replace(/[\s\S]*<string>(.*)<\/string>[\s\S]*/m, '$1')
+          }
+          self.handle(text, coords)
+        }
+      }
+    }, false);
+
+    // allow pasting onto canvas (but don't break existing inputs/textareas)
+    $('body').bind('paste', function (e) {
+      if (e.target.tagName === 'INPUT') return
+      if (e.target.tagName === 'TEXTAREA') return
+
+      var text = e.originalEvent.clipboardData.getData('text/plain').trim()
+      self.handle(text)
+    })
+  },
+
+  handle: function(text, coords) {
+    var self = Metamaps.PasteInput
+    // thanks to https://github.com/kevva/url-regex
+    const URL_REGEX = new RegExp('^(?:(?:(?:[a-z]+:)?//)|www\.)(?:\S+(?::\S*)?@)?(?:localhost|(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])(?:\.(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])){3}|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#][^\s"]*)?$')
+
+    if (text.match(URL_REGEX)) {
+      self.handleURL(text, coords)
+    } else if (text[0] === '{') {
+      self.handleJSON(text)
+    } else if (text.match(/\t/)) {
+      self.handleTSV(text)
+    } else {
+      // fail silently
+    }
+  },
+
+  handleURL: function (text, coords) {
+    var title = 'Link'
+    if (!coords || !coords.x || !coords.y) {
+      coords = Metamaps.AutoLayout.getNextCoord()
+    }
+
+    var import_id = null  // don't store a cidMapping
+    var permission = null // use default
+
+    // try {
+    //   // fetch title in 150ms or less
+    //   Promise.race([
+    //     new Promise(function(resolve, reject) {
+    //       fetch(text).then(function(response) {
+    //         return response.text()
+    //       }).then(function(html) {
+    //         title = html.replace(/[\s\S]*<title>(.*)<\/title>[\s\S]*/m, '$1')
+    //         resolve()
+    //       })
+    //     }), new Promise(function(resolve, reject) {
+    //       window.setTimeout(function() {
+    //         resolve()
+    //       }, 150)
+    //     })
+    //   ]).then(function() {
+    //     finish()
+    //   }).catch(function(error) {
+    //     throw error
+    //   })
+    // } catch (err) {
+    //   console.warn("Your browser can't fetch the title") // TODO move to webpack to avoid this error
+    // }
+    finish()
+
+    function finish() {
+      Metamaps.Import.createTopicWithParameters(
+        title,
+        'Reference', // metacode - todo fix
+        permission,
+        text, // desc - todo load from url?
+        text, // link - todo fix because this isn't being POSTed
+        coords.x,
+        coords.y,
+        import_id
+      )
+    }
+  },
+
+  handleJSON: function (text) {
+    Metamaps.Import.handleJSON(text)
+  },
+
+  handleTSV: function (text) {
+    Metamaps.Import.handleTSV(text)
+  }
+}