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.
This commit is contained in:
XeonCore 2014-10-12 12:42:30 +11:00
parent 81d49c8e69
commit 20d1e1b212
4 changed files with 58 additions and 40 deletions

View file

@ -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;
}

View file

@ -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 <span class=\"badge\" data-count=\""
+ "\">\r\n <span class=\"badge\" data-count=\""
+ 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)))
+ "\">";
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 + "</span>\n <span class=\"close\"></span>\n <span class=\"name\">"
return buffer + "</span>\r\n <span class=\"close\"></span>\r\n <span class=\"name\">"
+ 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)))
+ "</span>\n</div>\n";
+ "</span>\r\n</div>\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 <div class=\"header\">\n <button class=\"lt\"></button>\n <button class=\"rt\"></button>\n <div class=\"right\">\n <button class=\"button close\">\n";
+ "\">\r\n <div class=\"header\">\r\n <button class=\"lt\"></button>\r\n <button class=\"rt\"></button>\r\n <div class=\"right\">\r\n <button class=\"button close\">\r\n";
stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, (depth0 != null ? depth0.type : depth0), "lobby", {"name":"equal","hash":{},"fn":this.program(2, data),"inverse":this.program(4, data),"data":data}));
if (stack1 != null) { buffer += stack1; }
buffer += " </button>\n </div>\n <span class=\"title\">"
buffer += " </button>\r\n </div>\r\n <span class=\"title\">"
+ 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)))
+ "</span>\n <span class=\"topic\">";
+ "</span>\r\n <span class=\"topic\">";
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 += "</span>\n </div>\n <div class=\"chat\">\n <div class=\"show-more ";
buffer += "</span>\r\n </div>\r\n <div class=\"chat\">\r\n <div class=\"show-more ";
stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, ((stack1 = (depth0 != null ? depth0.messages : depth0)) != null ? stack1.length : stack1), 100, {"name":"equal","hash":{},"fn":this.program(6, data),"inverse":this.noop,"data":data}));
if (stack1 != null) { buffer += stack1; }
return buffer + "\">\n <button class=\"show-more-button\" data-id=\""
return buffer + "\">\r\n <button class=\"show-more-button\" data-id=\""
+ 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)))
+ "\">\n Show more\n </button>\n </div>\n <div class=\"messages\">\n "
+ "\">\r\n Show more\r\n </button>\r\n </div>\r\n <div class=\"messages\">\r\n "
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "msg", {"name":"partial","hash":{},"data":data})))
+ "\n </div>\n </div>\n <aside class=\"sidebar\">\n <div class=\"users\">\n "
+ "\r\n </div>\r\n </div>\r\n <aside class=\"sidebar\">\r\n <div class=\"users\">\r\n "
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "user", {"name":"partial","hash":{},"data":data})))
+ "\n </div>\n </aside>\n</div>\n";
+ "\r\n </div>\r\n </aside>\r\n</div>\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 <span class=\"time\">\n "
buffer += "\">\r\n <span class=\"time\">\r\n "
+ escapeExpression(((helpers.tz || (depth0 && depth0.tz) || helperMissing).call(depth0, (depth0 != null ? depth0.time : depth0), {"name":"tz","hash":{},"data":data})))
+ "\n </span>\n <span class=\"from\">\n";
+ "\r\n </span>\r\n <span class=\"from\">\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 += " </span>\n <span class=\"text\">\n <em class=\"type\">"
buffer += " </span>\r\n <span class=\"text\">\r\n <em class=\"type\">"
+ 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)))
+ "</em>\n";
+ "</em>\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 + " </span>\n</div>\n";
return buffer + " </span>\r\n</div>\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)))
+ "</button>\n";
+ "</button>\r\n";
},"6":function(depth0,helpers,partials,data) {
var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = " <div class=\"force-newline\">\n <button id=\"toggle-"
var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = " <div class=\"force-newline\">\r\n <button id=\"toggle-"
+ 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)))
+ "\" class=\"toggle-button\">···</button>\n </div>\n";
+ "\" class=\"toggle-button\">···</button>\r\n </div>\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</section>\n";
+ "\r\n</section>\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 = "<div class=\"toggle-content\">\n";
var stack1, helperMissing=helpers.helperMissing, buffer = "<div class=\"toggle-content\">\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 + "</div>\n";
return buffer + "</div>\r\n";
},"2":function(depth0,helpers,partials,data) {
var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
return " <a href=\""
+ escapeExpression(((helper = (helper = helpers.link || (depth0 != null ? depth0.link : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"link","hash":{},"data":data}) : helper)))
+ "\" target=\"_blank\">\n <img src=\""
+ "\" target=\"_blank\">\r\n <img src=\""
+ escapeExpression(((helper = (helper = helpers.link || (depth0 != null ? depth0.link : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"link","hash":{},"data":data}) : helper)))
+ "\">\n </a>\n";
+ "\">\r\n </a>\r\n";
},"4":function(depth0,helpers,partials,data) {
var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = " <a href=\""
+ escapeExpression(((helper = (helper = helpers.link || (depth0 != null ? depth0.link : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"link","hash":{},"data":data}) : helper)))
+ "\" target=\"_blank\">\n <div class=\"head\">";
+ "\" 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 += " <div class=\"head\">";
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 + "</div>\n <div class=\"body\">\n "
return buffer + "</div>\r\n <div class=\"body\">\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 </div>\n </a>\n";
+ "\r\n </div>\r\n </a>\r\n";
},"5":function(depth0,helpers,partials,data) {
var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
return " <img src=\""
+ escapeExpression(((helper = (helper = helpers.thumb || (depth0 != null ? depth0.thumb : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"thumb","hash":{},"data":data}) : helper)))
+ "\" class=\"thumb\">\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 "<div class=\"count\">\n <input class=\"search\" placeholder=\""
return "<div class=\"count\">\r\n <input class=\"search\" placeholder=\""
+ escapeExpression(((helpers.users || (depth0 && depth0.users) || helperMissing).call(depth0, ((stack1 = (depth0 != null ? depth0.users : depth0)) != null ? stack1.length : stack1), {"name":"users","hash":{},"data":data})))
+ "\">\n</div>\n";
+ "\">\r\n</div>\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)))
+ "</button>\n";
+ "</button>\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 + " <div class=\"user-mode "
+ escapeExpression(((helpers.modes || (depth0 && depth0.modes) || helperMissing).call(depth0, (depth0 != null ? depth0.mode : depth0), {"name":"modes","hash":{},"data":data})))
+ "\">\n";
+ "\">\r\n";
},"7":function(depth0,helpers,partials,data) {
return " </div>\n";
return " </div>\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 += "<div class=\"names\">\n <div class=\"inner\">\n ";
buffer += "<div class=\"names\">\r\n <div class=\"inner\">\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 + " </div>\n </div>\n</div>\n";
return buffer + " </div>\r\n </div>\r\n</div>\r\n";
},"useData":true});
})();

View file

@ -6,6 +6,9 @@
</a>
{{else}}
<a href="{{link}}" target="_blank">
{{#if thumb}}
<img src="{{thumb}}" class="thumb">
{{/if}}
<div class="head">{{{head}}}</div>
<div class="body">
{{body}}

View file

@ -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":