Client: improved URL + channel regex matching; Inline media

diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index cb67ad081d716ea75aff42640439a53a8f32ff5a..df83a45d2697838b0d76b5650d2b9836937989f2 100644 (file)
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -249,6 +249,7 @@ _kiwi.view.Panel = Backbone.View.extend({
     className: "messages",\r
     events: {\r
         "click .chan": "chanClick",\r
+        'click .media .open': 'mediaClick',\r
         'mouseenter .msg .nick': 'msgEnter',\r
         'mouseleave .msg .nick': 'msgLeave'\r
     },\r
@@ -297,27 +298,32 @@ _kiwi.view.Panel = Backbone.View.extend({
         msg.msg =  $('<div />').text(msg.msg).html();\r
 \r
         // Make the channels clickable\r
-        re = new RegExp('\\B([' + _kiwi.gateway.get('channel_prefix') + '][^ ,.\\007]+)', 'g');\r
+        re = new RegExp('(?:^|\\s)([' + _kiwi.gateway.get('channel_prefix') + '][^ ,.\\007]+)', 'g');\r
         msg.msg = msg.msg.replace(re, function (match) {\r
-            return '<a class="chan">' + match + '</a>';\r
+            return '<a class="chan" data-channel="' + match.trim() + '">' + match + '</a>';\r
         });\r
 \r
 \r
-        // Make links clickable\r
-        msg.msg = msg.msg.replace(/((https?\:\/\/|ftp\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]*))?/gi, function (url) {\r
-            var nice;\r
+        // Parse any links found\r
+        msg.msg = msg.msg.replace(/(([A-Za-z0-9\-]+\:\/\/)|(www\.))([\w.]+)([a-zA-Z]{2,6})(:[0-9]+)?(\/[\w#!:.?$'()[\]*,;~+=&%@!\-\/]*)?/gi, function (url) {\r
+            var nice, extra_html = '';\r
 \r
-            // Add the http is no protoocol was found\r
+            // Add the http if no protoocol was found\r
             if (url.match(/^www\./)) {\r
                 url = 'http://' + url;\r
             }\r
 \r
+            // Shorten the displayed URL if it's going to be too long\r
             nice = url;\r
             if (nice.length > 100) {\r
                 nice = nice.substr(0, 100) + '...';\r
             }\r
 \r
-            return '<a class="link_ext" target="_blank" rel="nofollow" href="' + url + '">' + nice + '</a>';\r
+            // Get any media HTML if supported\r
+            extra_html = _kiwi.view.MediaMessage.buildHtml(url);\r
+\r
+            // Make the link clickable\r
+            return '<a class="link_ext" target="_blank" rel="nofollow" href="' + url + '">' + nice + '</a> ' + extra_html;\r
         });\r
 \r
 \r
@@ -377,13 +383,29 @@ _kiwi.view.Panel = Backbone.View.extend({
     },\r
     chanClick: function (event) {\r
         if (event.target) {\r
-            _kiwi.gateway.join($(event.target).text());\r
+            _kiwi.gateway.join($(event.target).data('channel'));\r
         } else {\r
             // IE...\r
-            _kiwi.gateway.join($(event.srcElement).text());\r
+            _kiwi.gateway.join($(event.srcElement).data('channel'));\r
         }\r
     },\r
 \r
+    mediaClick: function (event) {\r
+        var $media = $(event.target).parents('.media');\r
+        var media_message;\r
+\r
+        if ($media.data('media')) {\r
+            media_message = $media.data('media');\r
+        } else {\r
+            media_message = new _kiwi.view.MediaMessage({el: $media[0]});\r
+            $media.data('media', media_message);\r
+        }\r
+\r
+        $media.data('media', media_message);\r
+\r
+        media_message.open();\r
+    },\r
+\r
     msgEnter: function (event) {\r
         var nick_class;\r
 \r
@@ -1166,4 +1188,48 @@ _kiwi.view.Application = Backbone.View.extend({
             this.doLayout();\r
         }\r
     }\r
-});
\ No newline at end of file
+});\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+_kiwi.view.MediaMessage = Backbone.View.extend({\r
+    events: {\r
+        'click .media_close': 'close'\r
+    },\r
+\r
+    initialize: function () {\r
+        this.url = this.$el.data('url');\r
+    },\r
+\r
+    close: function () {\r
+        this.$el.find('.media_content').remove();\r
+    },\r
+\r
+    open: function () {\r
+        var $content = $('<div class="media_content"><a class="media_close">[x]</a></div>');\r
+        $content.append('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');\r
+\r
+        this.$el.append($content);\r
+    }\r
+\r
+}, {\r
+\r
+    // Build the HTML from a URL\r
+    buildHtml: function (url) {\r
+        var html = '';\r
+\r
+        // Is it an image?\r
+        if (url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {\r
+            html += '<span class="media" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-play"></i></a></span>';\r
+        }\r
+\r
+        return html;\r
+    }\r
+}\r
+);
\ No newline at end of file