Merge branch 'master' of https://github.com/IgorAntun/node-chat

idenjoe · Aug 15, 2015 · 6dcf8f7 · 6dcf8f7
2 parents 5d9acd0 + 4647e40
commit 6dcf8f7
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/public/css/chat.css b/public/css/chat.css
@@ -4,7 +4,7 @@
     max-height: 300px;
 }
 
-#emoji, #sound, #desktop, #greentext, #synthesis, #recognition {
+#emoji, #sound, #desktop, #greentext, #synthesis, #recognition, #inline {
     margin-left: 10px;
 }
 
@@ -59,6 +59,10 @@
     padding-left: 20px;
 }
 
+.msg a img {
+    max-width: 350px;
+}
+
 .timestamp {
     float: right;
     font-size: 8pt;

diff --git a/public/js/chat.js b/public/js/chat.js
@@ -24,7 +24,8 @@ var settings = {
     'sound': true,
     'desktop': false,
     'synthesis': false,
-    'recognition': false
+    'recognition': false,
+    'inline': false
 };
 
 
@@ -293,14 +294,43 @@ function showChat(type, user, message, subtxt, mid) {
     if(!subtxt) {
         $('#panel').append('<div data-mid="' + mid + '" class="' + type + '""><span class="name ' + nameclass + '"><b><a class="namelink" href="javascript:void(0)">' + user + '</a></b></span><span class="delete"><a href="javascript:void(0)">DELETE</a></span><span class="timestamp">' + getTime() + '</span><span class="msg">' + message + '</span></div>');
     } else {
-        $('#panel').append('<div  data-mid="' + mid + '" class="' + type + '""><span class="name ' + nameclass + '"><b><a class="namelink" href="javascript:void(0)">' + user + '</a></b></span><span class="timestamp">(' + subtxt + ') ' + getTime() + '</span><span class="msg">' + message + '</span></div>');
+        $('#panel').append('<div data-mid="' + mid + '" class="' + type + '""><span class="name ' + nameclass + '"><b><a class="namelink" href="javascript:void(0)">' + user + '</a></b></span><span class="timestamp">(' + subtxt + ') ' + getTime() + '</span><span class="msg">' + message + '</span></div>');
     }
 
     $('#panel').animate({scrollTop: $('#panel').prop('scrollHeight')}, 500);
     updateStyle();
     nmr++;
+
+    //Inline imgs
+    if(settings.inline){
+        var m = message.match(/(https?|ftp):\/\/[^\s/$.?#].[^\s]*/gmi);
+        if(m) {
+            m.forEach(function(e, i, a){
+                //Gfycat support
+                if(e.indexOf('//gfycat') != -1){
+                    var oldUrl = e;
+                    e = e.replace('//gfycat.com', '//gfycat.com/cajax/get').replace('http://', 'https://');
+                    $.getJSON(e, function(data){
+                        testImage(data.gfyItem.gifUrl.replace('http://', 'https://'), mid, oldUrl);
+                    });
+                } else {
+                    testImage(e, mid, e);
+                }
+            });
+        }
+    }
 }
 
+function testImage(url, mid, oldUrl) {
+    var img = new Image();
+    img.onload = function() {
+        $('div[data-mid=' + mid + '] .msg a[href="' + oldUrl.replace('https://', 'http://') + '"]').html(img);
+        $('#panel').animate({scrollTop: $('#panel').prop('scrollHeight')}, 500);
+    };
+    img.src = url;
+}
+
+
 function handleInput() {
     var value = $('#message').val().replace(regex, ' ').trim();
 
@@ -556,7 +586,12 @@ $(document).ready(function() {
         settings.synthesis = document.getElementById('synthesis').checked;
         localStorage.settings = JSON.stringify(settings);
     });
-
+
+    $('#inline').bind('change', function() {
+        settings.inline = document.getElementById('inline').checked;
+        localStorage.settings = JSON.stringify(settings);
+    });
+
     $('#desktop').bind('change', function() {
         settings.desktop = document.getElementById('desktop').checked;
         localStorage.settings = JSON.stringify(settings);
@@ -662,6 +697,7 @@ if(typeof(Storage) !== 'undefined') {
         document.getElementById('desktop').checked = settings.desktop;
         document.getElementById('synthesis').checked = settings.synthesis;
         document.getElementById('recognition').checked = settings.recognition;
+        document.getElementById('inline').checked = settings.inline;
 
         if(settings.recognition)
             $('#audio').show();

diff --git a/views/index.ejs b/views/index.ejs
@@ -204,6 +204,9 @@
                     <div class="togglebutton" id="toggle-recognition" style="display:none">
                         <label>Speech Recognition [Experimental]<input id="recognition" type="checkbox"></label>
                     </div>
+                    <div class="togglebutton" id="toggle-inline">
+                        <label>In-line images<input id="inline" type="checkbox"></label>
+                    </div>
                 </div>
             </div>
         </div>