Added link plugin

client/css/style.css

@@ -573,9 +573,31 @@ button {
 #chat .action .user:before {
 	content: '* ';
 }
-#chat .image {
+#chat .toggle-button {
-	max-height: 120px;
+	background: #eee;
-	max-width: 240px;
+	border-radius: 2px;
+	display: inline-block;
+	color: #666;
+	height: 1em;
+	line-height: 0px;
+	padding: 0px 6px;
+}
+#chat .toggle-content {
+	background: #f5f5f5;
+	border-radius: 2px;
+	display: none;
+	color: #222;
+	font: 12px Lato;
+	max-width: 220px;
+	padding: 6px 8px;
+	margin-top: 2px;
+}
+#chat .toggle-content.show {
+	display: inline-block !important;
+}
+#chat .toggle-content img {
+	max-width: 100%;
+	max-height: 100%;
 }
 #chat .count {
 	background: #fafafa;

client/js/libs/handlebars/tz.js

@@ -1,6 +1,10 @@
 Handlebars.registerHelper(
 	"tz", function(time) {
-		var utc = moment.utc(time, "HH:mm:ss").toDate();
+		if (time) {
-		return moment(utc).format("HH:mm");
+			var utc = moment.utc(time, "HH:mm:ss").toDate();
+			return moment(utc).format("HH:mm");
+		} else {
+			return "";
+		}
 	}
 );

client/js/shout.js

@@ -276,6 +276,10 @@ $(function() {
 		}
 	});
 
+	socket.on("toggle", function(data) {
+		$("#toggle-" + data.id).parent().after(render("toggle", data));
+	});
+
 	socket.on("users", function(data) {
 		var users = chat.find("#chan-" + data.chan)
 			.find(".users")
@@ -559,6 +563,11 @@ $(function() {
 		});
 	});
 
+	chat.on("click", ".toggle-button", function() {
+		var self = $(this);
+		self.parent().next(".toggle-content").toggleClass("show");
+	});
+
 	var windows = $("#windows");
 	var forms = $("#sign-in, #connect");
 

client/js/shout.templates.js

@@ -84,7 +84,7 @@ templates['msg'] = template({"1":function(depth0,helpers,partials,data) {
   buffer += "	</span>\n	<span class=\"text\">\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";
-  stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, (depth0 != null ? depth0.type : depth0), "image", {"name":"equal","hash":{},"fn":this.program(6, data),"inverse":this.program(8, data),"data":data}));
+  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(8, data),"data":data}));
   if (stack1 != null) { buffer += stack1; }
   return buffer + "	</span>\n</div>\n";
 },"2":function(depth0,helpers,partials,data) {
@@ -96,9 +96,9 @@ templates['msg'] = template({"1":function(depth0,helpers,partials,data) {
     + "</button>\n";
 },"6":function(depth0,helpers,partials,data) {
   var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "		<img src=\""
+  return "		<div class=\"force-newline\">\n			<button id=\"toggle-"
-    + escapeExpression(((helper = (helper = helpers.text || (depth0 != null ? depth0.text : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"text","hash":{},"data":data}) : helper)))
+    + 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=\"image\">\n";
+    + "\" class=\"toggle-button\">···</button>\n		</div>\n";
 },"8":function(depth0,helpers,partials,data) {
   var stack1, helperMissing=helpers.helperMissing, buffer = "		";
   stack1 = ((helpers.uri || (depth0 && depth0.uri) || helperMissing).call(depth0, (depth0 != null ? depth0.text : depth0), {"name":"uri","hash":{},"data":data}));
@@ -127,6 +127,26 @@ templates['network'] = template({"1":function(depth0,helpers,partials,data) {
   if (stack1 != null) { buffer += stack1; }
   return buffer;
 },"useData":true});
+templates['toggle'] = template({"1":function(depth0,helpers,partials,data) {
+  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
+  return "		<a href=\""
+    + 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)))
+    + "\" target=\"_blank\">\n			<img src=\""
+    + 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		</a>\n";
+},"3":function(depth0,helpers,partials,data) {
+  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
+  return "		<div class=\"head\">"
+    + escapeExpression(((helper = (helper = helpers.head || (depth0 != null ? depth0.head : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"head","hash":{},"data":data}) : helper)))
+    + "</div>\n		<div class=\"body\">\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";
+},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+  var stack1, helperMissing=helpers.helperMissing, buffer = "<div class=\"toggle-content\">\n";
+  stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, (depth0 != null ? depth0.type : depth0), "image", {"name":"equal","hash":{},"fn":this.program(1, data),"inverse":this.program(3, data),"data":data}));
+  if (stack1 != null) { buffer += stack1; }
+  return buffer + "	</div>\n</div>\n";
+},"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=\""

client/templates/msg.tpl

@@ -10,8 +10,10 @@
 	</span>
 	<span class="text">
 		<em class="type">{{type}}</em>
-		{{#equal type "image"}}
+		{{#equal type "toggle"}}
-		<img src="{{text}}" class="image">
+		<div class="force-newline">
+			<button id="toggle-{{id}}" class="toggle-button">···</button>
+		</div>
 		{{else}}
 		{{{uri text}}}
 		{{/equal}}

client/templates/toggle.tpl

@@ -0,0 +1,13 @@
+<div class="toggle-content">
+	{{#equal type "image"}}
+		<a href="{{body}}" target="_blank">
+			<img src="{{body}}">
+		</a>
+	{{else}}
+		<div class="head">{{head}}</div>
+		<div class="body">
+			{{body}}
+		</div>
+	{{/equal}}
+	</div>
+</div>

package.json

@@ -33,8 +33,8 @@
   "license": "MIT",
   "dependencies": {
     "bcrypt": "^0.8.0",
+    "cheerio": "^0.17.0",
     "commander": "^2.3.0",
-    "connect": "~2.19.6",
     "express": "^4.9.5",
     "lodash": "~2.4.1",
     "mkdirp": "^0.5.0",

src/client.js

@@ -15,12 +15,12 @@ var id = 0;
 var events = [
 	"ctcp",
 	"error",
-	"image",
 	"join",
 	"kick",
 	"mode",
 	"motd",
 	"message",
+	"link",
 	"names",
 	"nick",
 	"notice",

src/models/msg.js

@@ -4,7 +4,6 @@ var moment = require("moment");
 Msg.Type = {
 	ACTION: "action",
 	ERROR: "error",
-	IMAGE: "image",
 	JOIN: "join",
 	KICK: "kick",
 	MESSAGE: "message",
@@ -14,15 +13,19 @@ Msg.Type = {
 	NOTICE: "notice",
 	PART: "part",
 	QUIT: "quit",
+	TOGGLE: "toggle",
 	TOPIC: "topic",
 	WHOIS: "whois"
 };
 
 module.exports = Msg;
 
+var id = 0;
+
 function Msg(attr) {
 	_.merge(this, _.extend({
 		from: "",
+		id: id++,
 		text: "",
 		time: moment().utc().format("HH:mm:ss"),
 		type: Msg.Type.MESSAGE,

src/plugins/irc-events/image.js

@@ -1,72 +0,0 @@
-var _ = require("lodash");
-var Msg = require("../../models/msg");
-var config = require("../../../config");
-var fs = require("fs");
-var mkdirp = require("mkdirp");
-var request = require("superagent");
-var Helper = require("../../helper");
-
-module.exports = function(irc, network) {
-	var client = this;
-	irc.on("message", function(data) {
-		var image = "";
-		var split = data.message.split(" ");
-		_.each(split, function(w) {
-			var match = w.match(/^(http|https).*\.(gif|png|jpg|jpeg)$/i);
-			if (match !== null) {
-				image = w;
-			}
-		});
-		if (image === "") {
-			return;
-		}
-		var target = data.to;
-		var chan = _.findWhere(network.channels, {name: target.charAt(0) == "#" ? target : data.from});
-		if (typeof chan === "undefined") {
-			return;
-		}
-		var self = false;
-		if (data.from.toLowerCase() == irc.me.toLowerCase()) {
-			self = true;
-		}
-		fetchImage(image, function(name) {
-			var msg = new Msg({
-				type: Msg.Type.IMAGE,
-				from: data.from,
-				text: "thumbs/" + name,
-				self: self
-			});
-			chan.messages.push(msg);
-			client.emit("msg", {
-				chan: chan.id,
-				msg: msg
-			});
-		});
-	});
-};
-
-function fetchImage(url, callback) {
-	var path = Helper.resolveHomePath("cache", "thumbs");
-	var name = new Date().getTime().toString();
-	mkdirp(path, function(e) {
-		if (e) {
-			console.log(e);
-			return;
-		}
-		var stream = fs.createWriteStream(
-			path + "/" + name,
-			{mode: "0777"}
-		);
-		var req = request.get(url);
-		req.pipe(stream);
-		req.on("error", function(e) {
-			console.log(e);
-		});
-		req.on("end", function() {
-			if (this.req.res.statusCode == 200) {
-				callback(name);
-			}
-		});
-
-	});
-}

src/plugins/irc-events/link.js

@@ -0,0 +1,80 @@
+var _ = require("lodash");
+var Msg = require("../../models/msg");
+var request = require("superagent");
+
+module.exports = function(irc, network) {
+	var client = this;
+	irc.on("message", function(data) {
+		var links = [];
+		var split = data.message.split(" ");
+		_.each(split, function(w) {
+			var match = w.indexOf("http://") === 0 || w.indexOf("https://") === 0;
+			if (match) {
+				links.push(w);
+			}
+		});
+
+		if (links.length === 0) {
+			return;
+		}
+
+		var self = data.to.toLowerCase() == irc.me.toLowerCase();
+		var chan = _.findWhere(network.channels, {name: self ? data.from : data.to});
+		if (typeof chan === "undefined") {
+			return;
+		}
+
+		var msg = new Msg({
+			type: Msg.Type.TOGGLE,
+			time: ""
+		});
+		chan.messages.push(msg);
+		client.emit("msg", {
+			chan: chan.id,
+			msg: msg
+		});
+
+		_.each(links, function(url) {
+			fetch(url, function(res) {
+				parse(msg.id, url, res, client);
+			});
+		});
+	});
+};
+
+function parse(id, url, res, client) {
+	var head = "";
+	var body = "";
+	var type = "";
+	switch (res.type) {
+	case "text/html":
+		type = "link";
+		break;
+
+	case "image/png":
+	case "image/gif":
+	case "image/jpg":
+	case "image/jpeg":
+		type = "image";
+		body = url;
+		break;
+
+	default:
+		return;
+	}
+	client.emit("toggle", {
+		id: id,
+		type: type,
+		head: type,
+		body: body
+	});
+}
+
+function fetch(url, cb) {
+	var req = request.get(url);
+	req.end(function(e, res) {
+		if (res) {
+			cb(res);
+		}
+	});
+}