Enable embeds in muc

clientapp/templates.js

@@ -233,7 +233,56 @@ exports.includes.mucBareMessage = function anonymous(locals) {
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p></div>");
+        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        var urls = message.urls;
+        buf.push('<section class="embeds">');
+        (function() {
+            var $$obj = urls;
+            if ("number" == typeof $$obj.length) {
+                for (var $index = 0, $$l = $$obj.length; $index < $$l; $index++) {
+                    var item = $$obj[$index];
+                    if (item.source == "body") {
+                        buf.push('<section class="embed hidden"><a' + jade.attrs({
+                            href: item.href,
+                            "class": "source"
+                        }, {
+                            href: true
+                        }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                    } else {
+                        buf.push('<section class="embed"><a' + jade.attrs({
+                            href: item.href,
+                            "class": "source"
+                        }, {
+                            href: true
+                        }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                    }
+                }
+            } else {
+                var $$l = 0;
+                for (var $index in $$obj) {
+                    $$l++;
+                    if ($$obj.hasOwnProperty($index)) {
+                        var item = $$obj[$index];
+                        if (item.source == "body") {
+                            buf.push('<section class="embed hidden"><a' + jade.attrs({
+                                href: item.href,
+                                "class": "source"
+                            }, {
+                                href: true
+                            }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                        } else {
+                            buf.push('<section class="embed"><a' + jade.attrs({
+                                href: item.href,
+                                "class": "source"
+                            }, {
+                                href: true
+                            }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                        }
+                    }
+                }
+            }
+        }).call(this);
+        buf.push("</section></div>");
     }
     return buf.join("");
 };
@@ -266,7 +315,56 @@ exports.includes.mucWrappedMessage = function anonymous(locals) {
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p></div></div></li>");
+        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        var urls = message.urls;
+        buf.push('<section class="embeds">');
+        (function() {
+            var $$obj = urls;
+            if ("number" == typeof $$obj.length) {
+                for (var $index = 0, $$l = $$obj.length; $index < $$l; $index++) {
+                    var item = $$obj[$index];
+                    if (item.source == "body") {
+                        buf.push('<section class="embed hidden"><a' + jade.attrs({
+                            href: item.href,
+                            "class": "source"
+                        }, {
+                            href: true
+                        }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                    } else {
+                        buf.push('<section class="embed"><a' + jade.attrs({
+                            href: item.href,
+                            "class": "source"
+                        }, {
+                            href: true
+                        }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                    }
+                }
+            } else {
+                var $$l = 0;
+                for (var $index in $$obj) {
+                    $$l++;
+                    if ($$obj.hasOwnProperty($index)) {
+                        var item = $$obj[$index];
+                        if (item.source == "body") {
+                            buf.push('<section class="embed hidden"><a' + jade.attrs({
+                                href: item.href,
+                                "class": "source"
+                            }, {
+                                href: true
+                            }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                        } else {
+                            buf.push('<section class="embed"><a' + jade.attrs({
+                                href: item.href,
+                                "class": "source"
+                            }, {
+                                href: true
+                            }) + ">" + jade.escape(null == (jade.interp = item.desc) ? "" : jade.interp) + "</a></section>");
+                        }
+                    }
+                }
+            }
+        }).call(this);
+        buf.push("</section></div></div></li>");
     }
     return buf.join("");
 };

clientapp/templates/includes/mucBareMessage.jade

@@ -1,3 +1,12 @@
 .message(id='chat'+message.cid, class=message.classList)
   span.timestamp=message.formattedTime
   p.body !{message.processedBody}
+  - var urls = message.urls
+  section.embeds
+    each item in urls
+      if item.source == 'body'
+        section.embed.hidden
+          a.source(href=item.href)= item.desc
+      else
+        section.embed
+          a.source(href=item.href)= item.desc

public/css/otalk.css

@@ -1331,11 +1331,13 @@ button.secondary:hover:not(:disabled) {
   background-color: #f7f7f7;
   text-align: center;
 }
+.embed.active img {
+  margin-bottom: 5px;
+}
 .embed.active .description {
   border: 1px solid #eee;
   background-color: #fff;
   margin: 0px;
-  margin-top: 5px;
   padding: 10px;
   text-align: left;
   font-size: 11px;
@@ -1343,7 +1345,7 @@ button.secondary:hover:not(:disabled) {
 }
 .embed.active .description h3 {
   font-size: 12px;
-  margin: 3px;
+  margin: 0px;
   padding: 2px;
   border-bottom: 1px solid #eee;
 }

public/css/pages/chat.styl

@@ -432,11 +432,13 @@
     background-color: lighten($gray-lighter, 50%)
     text-align: center
 
+    img
+      margin-bottom: 5px
+
     .description
       border: 1px solid #eee
       background-color: #fff
       margin: 0px
-      margin-top: 5px
       padding: 10px
       text-align: left
       font-size: 11px
@@ -444,7 +446,7 @@
 
       h3
         font-size: 12px
-        margin: 3px
+        margin: 0px
         padding: 2px
         border-bottom: 1px solid #eee
 

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1388652517251
+# 0.0.1 1388653959496
 
 CACHE:
 /app.js