From 20d1e1b212165aa0df80d2d6f49e840d16c81372 Mon Sep 17 00:00:00 2001 From: XeonCore Date: Sun, 12 Oct 2014 12:42:30 +1100 Subject: [PATCH] Add thumbnail to toggles when sites have them Displays a small thumbnail above each toggle that comes from either og:image or twitter:image meta tags. --- client/css/style.css | 4 ++ client/js/shout.templates.js | 88 ++++++++++++++++++---------------- client/views/toggle.tpl | 3 ++ src/plugins/irc-events/link.js | 3 ++ 4 files changed, 58 insertions(+), 40 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index db7de067..64a0afa7 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -640,6 +640,10 @@ button { display: block; margin: 2px 0; } +#chat .toggle-content .thumb { + max-height: 110px; + max-width: 210px; +} #chat .toggle-content .head { font-weight: bold; } diff --git a/client/js/shout.templates.js b/client/js/shout.templates.js index d68bff93..0c585cc2 100644 --- a/client/js/shout.templates.js +++ b/client/js/shout.templates.js @@ -9,14 +9,14 @@ templates['chan'] = template({"1":function(depth0,helpers,partials,data) { + escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper))) + "\" class=\"chan " + escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper))) - + "\">\n \r\n "; stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.unread : depth0), {"name":"if","hash":{},"fn":this.program(2, data),"inverse":this.noop,"data":data}); if (stack1 != null) { buffer += stack1; } - return buffer + "\n \n " + return buffer + "\r\n \r\n " + escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper))) - + "\n\n"; + + "\r\n\r\n"; },"2":function(depth0,helpers,partials,data) { var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; return escapeExpression(((helper = (helper = helpers.unread || (depth0 != null ? depth0.unread : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"unread","hash":{},"data":data}) : helper))); @@ -35,28 +35,28 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) { + escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper))) + "\" class=\"chan " + escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper))) - + "\">\n
\n \n \n
\n \r\n \r\n
\r\n \n
\n " + buffer += " \r\n
\r\n " + escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper))) - + "\n "; + + "\r\n "; stack1 = ((helpers.parse || (depth0 && depth0.parse) || helperMissing).call(depth0, (depth0 != null ? depth0.topic : depth0), {"name":"parse","hash":{},"data":data})); if (stack1 != null) { buffer += stack1; } - buffer += "\n
\n
\n
\r\n
\n \n
\n
\n " + + "\">\r\n Show more\r\n \r\n
\r\n
\r\n " + escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "msg", {"name":"partial","hash":{},"data":data}))) - + "\n
\n
\n
\r\n \n\n"; + + "\r\n \r\n \r\n\r\n"; },"2":function(depth0,helpers,partials,data) { - return " Disconnect\n"; + return " Disconnect\r\n"; },"4":function(depth0,helpers,partials,data) { - return " Leave\n"; + return " Leave\r\n"; },"6":function(depth0,helpers,partials,data) { return "show"; },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) { @@ -71,17 +71,17 @@ templates['msg'] = template({"1":function(depth0,helpers,partials,data) { + " "; stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.self : depth0), {"name":"if","hash":{},"fn":this.program(2, data),"inverse":this.noop,"data":data}); if (stack1 != null) { buffer += stack1; } - buffer += "\">\n \n " + buffer += "\">\r\n \r\n " + escapeExpression(((helpers.tz || (depth0 && depth0.tz) || helperMissing).call(depth0, (depth0 != null ? depth0.time : depth0), {"name":"tz","hash":{},"data":data}))) - + "\n \n \n"; + + "\r\n \r\n \r\n"; stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.from : depth0), {"name":"if","hash":{},"fn":this.program(4, data),"inverse":this.noop,"data":data}); if (stack1 != null) { buffer += stack1; } - buffer += " \n \n " + buffer += " \r\n \r\n " + escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper))) - + "\n"; + + "\r\n"; stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, (depth0 != null ? depth0.type : depth0), "toggle", {"name":"equal","hash":{},"fn":this.program(6, data),"inverse":this.program(9, data),"data":data})); if (stack1 != null) { buffer += stack1; } - return buffer + " \n\n"; + return buffer + " \r\n\r\n"; },"2":function(depth0,helpers,partials,data) { return "self"; },"4":function(depth0,helpers,partials,data) { @@ -91,11 +91,11 @@ templates['msg'] = template({"1":function(depth0,helpers,partials,data) { + "\">" + escapeExpression(((helper = (helper = helpers.mode || (depth0 != null ? depth0.mode : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"mode","hash":{},"data":data}) : helper))) + escapeExpression(((helper = (helper = helpers.from || (depth0 != null ? depth0.from : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"from","hash":{},"data":data}) : helper))) - + "\n"; + + "\r\n"; },"6":function(depth0,helpers,partials,data) { - var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "
\n \n
\n"; + + "\" class=\"toggle-button\">···\r\n \r\n"; stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.toggle : depth0), {"name":"if","hash":{},"fn":this.program(7, data),"inverse":this.noop,"data":data}); if (stack1 != null) { buffer += stack1; } return buffer; @@ -103,12 +103,12 @@ templates['msg'] = template({"1":function(depth0,helpers,partials,data) { var helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; return " " + escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "toggle", {"name":"partial","hash":{},"data":data}))) - + "\n"; + + "\r\n"; },"9":function(depth0,helpers,partials,data) { var stack1, helperMissing=helpers.helperMissing, buffer = " "; stack1 = ((helpers.parse || (depth0 && depth0.parse) || helperMissing).call(depth0, (depth0 != null ? depth0.text : depth0), {"name":"parse","hash":{},"data":data})); if (stack1 != null) { buffer += stack1; } - return buffer + "\n"; + return buffer + "\r\n"; },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) { var stack1, buffer = ""; stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.messages : depth0), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data}); @@ -123,9 +123,9 @@ templates['network'] = template({"1":function(depth0,helpers,partials,data) { + escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper))) + "\" data-nick=\"" + escapeExpression(((helper = (helper = helpers.nick || (depth0 != null ? depth0.nick : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"nick","hash":{},"data":data}) : helper))) - + "\">\n " + + "\">\r\n " + escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "chan", {"name":"partial","hash":{},"data":data}))) - + "\n\n"; + + "\r\n\r\n"; },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) { var stack1, buffer = ""; stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.networks : depth0), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data}); @@ -133,26 +133,34 @@ templates['network'] = template({"1":function(depth0,helpers,partials,data) { return buffer; },"useData":true}); templates['toggle'] = template({"1":function(depth0,helpers,partials,data) { - var stack1, helperMissing=helpers.helperMissing, buffer = "
\n"; + var stack1, helperMissing=helpers.helperMissing, buffer = "
\r\n"; stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, (depth0 != null ? depth0.type : depth0), "image", {"name":"equal","hash":{},"fn":this.program(2, data),"inverse":this.program(4, data),"data":data})); if (stack1 != null) { buffer += stack1; } - return buffer + "
\n"; + return buffer + "
\r\n"; },"2":function(depth0,helpers,partials,data) { var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; return " \n \r\n \n \n"; + + "\">\r\n \r\n"; },"4":function(depth0,helpers,partials,data) { var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = " \n
"; + + "\" target=\"_blank\">\r\n"; + stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.thumb : depth0), {"name":"if","hash":{},"fn":this.program(5, data),"inverse":this.noop,"data":data}); + if (stack1 != null) { buffer += stack1; } + buffer += "
"; stack1 = ((helper = (helper = helpers.head || (depth0 != null ? depth0.head : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"head","hash":{},"data":data}) : helper)); if (stack1 != null) { buffer += stack1; } - return buffer + "
\n
\n " + return buffer + "
\r\n
\r\n " + escapeExpression(((helper = (helper = helpers.body || (depth0 != null ? depth0.body : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"body","hash":{},"data":data}) : helper))) - + "\n
\n \n"; + + "\r\n
\r\n \r\n"; +},"5":function(depth0,helpers,partials,data) { + var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; + return " \r\n"; },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) { var stack1, helper, options, functionType="function", helperMissing=helpers.helperMissing, blockHelperMissing=helpers.blockHelperMissing, buffer = ""; stack1 = ((helper = (helper = helpers.toggle || (depth0 != null ? depth0.toggle : depth0)) != null ? helper : helperMissing),(options={"name":"toggle","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data}),(typeof helper === functionType ? helper.call(depth0, options) : helper)); @@ -162,9 +170,9 @@ templates['toggle'] = template({"1":function(depth0,helpers,partials,data) { },"useData":true}); templates['user'] = template({"1":function(depth0,helpers,partials,data) { var stack1, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; - return "
\n \r\n \n
\n"; + + "\">\r\n\r\n"; },"3":function(depth0,helpers,partials,data) { return ""; },"5":function(depth0,helpers,partials,data) { @@ -176,26 +184,26 @@ templates['user'] = template({"1":function(depth0,helpers,partials,data) { + "\">" + escapeExpression(((helper = (helper = helpers.mode || (depth0 != null ? depth0.mode : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"mode","hash":{},"data":data}) : helper))) + escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper))) - + "\n"; + + "\r\n"; },"6":function(depth0,helpers,partials,data) { var stack1, helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = ""; stack1 = helpers.unless.call(depth0, (data && data.first), {"name":"unless","hash":{},"fn":this.program(7, data),"inverse":this.noop,"data":data}); if (stack1 != null) { buffer += stack1; } return buffer + "
\n"; + + "\">\r\n"; },"7":function(depth0,helpers,partials,data) { - return "
\n"; + return " \r\n"; },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) { var stack1, helperMissing=helpers.helperMissing, buffer = ""; stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 != null ? depth0.users : depth0)) != null ? stack1.length : stack1), {"name":"if","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data}); if (stack1 != null) { buffer += stack1; } - buffer += "
\n
\n "; + buffer += "
\r\n
\r\n "; stack1 = ((helpers.diff || (depth0 && depth0.diff) || helperMissing).call(depth0, "reset", {"name":"diff","hash":{},"fn":this.program(3, data),"inverse":this.noop,"data":data})); if (stack1 != null) { buffer += stack1; } - buffer += "\n"; + buffer += "\r\n"; stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.users : depth0), {"name":"each","hash":{},"fn":this.program(5, data),"inverse":this.noop,"data":data}); if (stack1 != null) { buffer += stack1; } - return buffer + "
\n
\n
\n"; + return buffer + "
\r\n \r\n\r\n"; },"useData":true}); })(); \ No newline at end of file diff --git a/client/views/toggle.tpl b/client/views/toggle.tpl index 2e665d5b..08de2b5d 100644 --- a/client/views/toggle.tpl +++ b/client/views/toggle.tpl @@ -6,6 +6,9 @@ {{else}} + {{#if thumb}} + + {{/if}}
{{{head}}}
{{body}} diff --git a/src/plugins/irc-events/link.js b/src/plugins/irc-events/link.js index 8ee4b933..9daad0e4 100644 --- a/src/plugins/irc-events/link.js +++ b/src/plugins/irc-events/link.js @@ -55,6 +55,7 @@ function parse(msg, url, res, client) { type: "", head: "", body: "", + thumb: "", link: url }; @@ -65,6 +66,8 @@ function parse(msg, url, res, client) { toggle.head = $("title").text(); toggle.body = $('meta[name=description]').attr('content') || $('meta[property="og:description"]').attr('content') || ""; + toggle.thumb = $('meta[property="og:image"]').attr('content') || + $('meta[name="twitter:image:src"]').attr('content') || ""; break; case "image/png":