Support links and embeds in the chat

5 years ago · 380dad2b87
3 changed files with 244 additions and 1 deletions
--- a/webroot/index.html
+++ b/webroot/index.html
@ -11,6 +11,7 @@
				@@ -11,6 +11,7 @@

  <!-- Used for animating the scrolling of the chat div.  Can that be done other ways? -->
  <script src="vendor/jquery-2.1.4.min.js"></script>
+  <script src="vendor/autolink.js"></script>
 </head>

 <div>
@ -45,7 +46,7 @@
				@@ -45,7 +46,7 @@

              <div class="text-sm">
                <p class="text-700">{{ message.author }}</p>
-                <p class="text-gray-600">{{ message.body }}</p>
+                <p class="text-gray-600"v-html="message.linkedText()"></p>
              </div>
            </div>
          </div>
--- a/webroot/js/message.js
+++ b/webroot/js/message.js
@ -5,6 +5,10 @@ class Message {
				@@ -5,6 +5,10 @@ class Message {
 		this.image = "https://robohash.org/" + model.author
 	}

+	linkedText() {
+		return autoLink(this.body, { embed: true })
+	}
+	
 	toModel() {
 		return {
 			author: this.author(),
--- a/webroot/vendor/autolink.js
+++ b/webroot/vendor/autolink.js
@ -0,0 +1,238 @@
				@@ -0,0 +1,238 @@
+const re = {
+  http: /.*?:\/\//g,
+  url: /(\s|^)((https?|ftp):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\w-\/\?\=\#\.])*/gi,
+  image: /\.(jpe?g|png|gif)$/,
+  email: /(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/gi,
+  cloudmusic: /http:\/\/music\.163\.com\/#\/song\?id=(\d+)/i,
+  kickstarter: /(https?:\/\/www\.kickstarter\.com\/projects\/\d+\/[a-zA-Z0-9_-]+)(\?\w+\=\w+)?/i,
+  youtube: /https?:\/\/www\.youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)(\?\w+\=\w+)?/i,
+  vimeo: /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/[^\/]*\/videos\/|album\/\d+\/video\/|video\/|)(\d+)(?:$|\/|\?)/i,
+  youku: /https?:\/\/v\.youku\.com\/v_show\/id_([a-zA-Z0-9_\=-]+).html(\?\w+\=\w+)?(\#\w+)?/i
+}
+/**
+ * AutoLink constructor function
+ *
+ * @param {String} text
+ * @param {Object} options
+ * @constructor
+ */
+function AutoLink(string, options = {}) {
+  this.string = options.safe ? safe_tags_replace(string) : string
+  this.options = options
+  this.attrs = ''
+  this.linkAttr = ''
+  this.imageAttr = ''
+  if (this.options.sharedAttr) {
+    this.attrs = getAttr(this.options.sharedAttr)
+  }
+  if (this.options.linkAttr) {
+    this.linkAttr = getAttr(this.options.linkAttr)
+  }
+  if (this.options.imageAttr) {
+    this.imageAttr = getAttr(this.options.imageAttr)
+  }
+}
+
+AutoLink.prototype = {
+  constructor: AutoLink,
+  /**
+   * call relative functions to parse url/email/image
+   *
+   * @returns {String}
+   */
+  parse: function() {
+    var shouldReplaceImage = defaultTrue(this.options.image)
+    var shouldRelaceEmail = defaultTrue(this.options.email)
+    var shouldRelaceBr = defaultTrue(this.options.br)
+
+    var result = ''
+    if (!shouldReplaceImage) {
+      result = this.string.replace(re.url, this.formatURLMatch.bind(this))
+    } else {
+      result = this.string.replace(re.url, this.formatIMGMatch.bind(this))
+    }
+    if (shouldRelaceEmail) {
+      result = this.formatEmailMatch.call(this, result)
+    }
+    if (shouldRelaceBr) {
+      result = result.replace(/\r?\n/g, '<br />')
+    }
+    return result
+  },
+  /**
+   * @param {String} match
+   * @returns {String} Offset 1
+   */
+  formatURLMatch: function(match, p1) {
+    match = prepHTTP(match.trim())
+    if (this.options.cloudmusic || this.options.embed) {
+      if (match.indexOf('music.163.com/#/song?id=') > -1) {
+        return match.replace(
+          re.cloudmusic,
+          p1 +
+            '<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=$1&auto=1&height=66"></iframe>'
+        )
+      }
+    }
+    if (this.options.kickstarter || this.options.embed) {
+      if (re.kickstarter.test(match)) {
+        return match.replace(
+          re.kickstarter,
+          p1 +
+            '<iframe width="480" height="360" src="$1/widget/video.html" frameborder="0" scrolling="no"> </iframe>'
+        )
+      }
+    }
+    if (this.options.vimeo || this.options.embed) {
+      if (re.vimeo.test(match)) {
+        return match.replace(
+          re.vimeo,
+          p1 +
+            '<iframe width="500" height="281" src="https://player.vimeo.com/video/$1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
+        )
+      }
+    }
+    if (this.options.youtube || this.options.embed) {
+      if (re.youtube.test(match)) {
+        return match.replace(
+          re.youtube,
+          p1 +
+            '<iframe width="560" height="315" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>'
+        )
+      }
+    }
+    if (this.options.youku || this.options.embed) {
+      if (re.youku.test(match)) {
+        return match.replace(
+          re.youku,
+          p1 +
+            '<iframe height=498 width=510 src="http://player.youku.com/embed/$1" frameborder=0 allowfullscreen></iframe>'
+        )
+      }
+    }
+    var text = this.options.removeHTTP ? removeHTTP(match) : match
+    return (
+      p1 +
+      '<a href="' +
+      match +
+      '"' +
+      this.attrs +
+      this.linkAttr +
+      '>' +
+      text +
+      '</a>'
+    )
+  },
+  /**
+   * @param {String} match
+   * @param {String} Offset 1
+   */
+  formatIMGMatch: function(match, p1) {
+    match = match.trim()
+    var isIMG = re.image.test(match)
+    if (isIMG) {
+      return (
+        p1 +
+        '<img src="' +
+        prepHTTP(match.trim()) +
+        '"' +
+        this.attrs +
+        this.imageAttr +
+        '/>'
+      )
+    }
+    return this.formatURLMatch(match, p1)
+  },
+  /**
+   * @param {String} text
+   */
+  formatEmailMatch: function(text) {
+    return text.replace(
+      re.email,
+      '<a href="mailto:$&"' + this.attrs + this.linkAttr + '>$&</a>'
+    )
+  }
+}
+
+/**
+ * return true if undefined
+ * else return itself
+ *
+ * @param {Boolean} val
+ * @returns {Boolean}
+ */
+function defaultTrue(val) {
+  return typeof val === 'undefined' ? true : val
+}
+
+/**
+ * parse attrs from object
+ *
+ * @param {Object} obj
+ * @returns {Stirng}
+ */
+function getAttr(obj) {
+  var attr = ''
+  for (var key in obj) {
+    if (key) {
+      attr += ' ' + key + '="' + obj[key] + '"'
+    }
+  }
+  return attr
+}
+
+/**
+ * @param {String} url
+ * @returns {String}
+ */
+function prepHTTP(url) {
+  if (url.substring(0, 4) !== 'http' && url.substring(0, 2) !== '//') {
+    return 'http://' + url
+  }
+  return url
+}
+
+/**
+ * @param {String} url
+ * @returns {String}
+ */
+function removeHTTP(url) {
+  return url.replace(re.http, '')
+}
+
+var tagsToReplace = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;'
+}
+
+/**
+ * Replace tag if should be replace
+ *
+ * @param {String} tag
+ * @returns {String}
+ */
+function replaceTag(tag) {
+  return tagsToReplace[tag] || tag
+}
+
+/**
+ * Make string safe by replacing html tag
+ *
+ * @param {String} str
+ * @returns {String}
+ */
+function safe_tags_replace(str) {
+  return str.replace(/[&<>]/g, replaceTag)
+}
+
+/**
+ * return an instance of AutoLink
+ *
+ * @param {String} string
+ * @param {Object} options
+ * @returns {Object}
+ */
+function autoLink(string, options) {
+  return new AutoLink(string, options).parse()
+}