Shuo/client/js/chat.js

$(function() {
	var chat = $("#chat");
	var sidebar = $("#sidebar");

	var commands = [
		"/ame",
		"/amsg",
		"/close",
		"/connect",
		"/deop",
		"/devoice",
		"/disconnect",
		"/invite",
		"/join",
		"/kick",
		"/leave",
		"/mode",
		"/msg",
		"/nick",
		"/notice",
		"/op",
		"/part",
		"/partall",
		"/query",
		"/quit",
		"/raw",
		"/say",
		"/send",
		"/server",
		"/slap",
		"/topic",
		"/voice",
		"/whoami",
		"/whois",
	];
	
	var socket = io.connect("");
	var events = [
		"auth",
		"debug",
		"join",
		"messages",
		"msg",
		"networks",
		"nick",
		"part",
		"users",
	].forEach(function(e) {
		socket.on(e, function(data) {
			event(e, data);
		});
	});
	
	var tpl = [];
	function render(name, data) {
		tpl[name] = tpl[name] || Handlebars.compile($("#templates ." + name).html());
		return tpl[name](data);
	}
	
	function event(e, data) {
		switch (e) {
		case "auth":
			$("#networks").add(chat).empty();
			$("#login").trigger("click");
			break;
		
		case "debug":
			console.log(data);
			break;
		
		case "join":
			chat.append(render("windows", {windows: [data.chan]}))
				.find(".window")
				.last()
				.find(".input")
				.tabcomplete(complete, {hint: false})
				.history({submit: true})
				.end()
				.find(".chat")
				.sticky();
			
			$("#network-" + data.id)
				.append(render("channels", {channels: [data.chan]}))
				.find("a")
				.last()
				.trigger("click");
			break;
		
		case "messages":
		case "msg":
			var target = (data.id ? $("#window-" + data.id) : $("#chat .active"))
				.find(".messages");
			var html = render(
				"messages",
				{messages: toArray(data.msg)}
			);
			switch (e) {
			case "messages":
				target.prepend(html);
				break;
			
			case "msg":
				target.append(html);
				break;
			}
			break;
		
		case "networks":
			var channels = $.map(data.networks, function(n) { return n.channels; });
			chat.html(render("windows", {windows: channels}))
				.find(".input")
				.tabcomplete(complete, {hint: false})
				.history({submit: true})
				.end()
				.find(".chat")
				.sticky();
			
			$("#login").hide();
			$("#logout").show().on("click", function(e) {
				e.stopPropagation();
			});
			
			var networks = render("networks", {networks: data.networks});
			var current = $("#networks")
				.html(networks)
				.find("a[href='" + $.cookie("current") + "']")
				.trigger("click");
			if (!current.length) {
				$("#networks")
					.find("a")
					.last()
					.trigger("click");
			}
			break;
		
		case "part":
			var chan = $("#channel-" + data.id).add("#window-" + data.id).remove();
			if (!chan.hasClass("active")) {
				break;
			}
			
			var next = null;
			var z = 0;
			$("#main .window").each(function() {
				var index = parseInt($(this).css("zIndex"));
				if (index > z) {
					z = index;
					next = this;
				}
			});
			if (typeof next !== "undefined") {
				$("#channel-" + $(next).data("id")).trigger("click");
			}
			break;
		
		case "users":
			var target = $("#window-" + data.id);
			var json = {name: target.find("h1").html(), users: data.users};
			target.find(".meta")
				.replaceWith(render("meta", json))
				.end();
			target.find(".users")
				.html(render("users", json))
				.end();
			break;
		}
	}
	
	setTimeout(function() {
		// Enable transitions.
		$("body").removeClass("preload");
	}, 500);
	
	var pop = new Audio();
	pop.src = "/audio/pop.ogg";
	
	var favicon = new Favico({
		animation: "none"
	});
	
	document.addEventListener("visibilitychange", function() {
		if (sidebar.find(".highlight").length == 0) {
			favicon.badge("");
		}
	});
	
	var viewport = $("#viewport");
	var touchDevice = (window.screen.width <= 768);
	
	var z = 1;
	sidebar.on("click", "a", function(e) {
		e.preventDefault();
		var link = $(this);
		var target = link.attr("href");
		if (!target) {
			return;
		}
		
		viewport.removeClass();
		sidebar.find(".active").removeClass("active");
		link.addClass("active")
			.find(".badge")
			.removeClass("highlight")
			.empty();
		
		$.cookie("current", target);
		document.title = link.data("name") + " — Shout";
		
		if (sidebar.find(".highlight").length == 0) {
			favicon.badge("");
		}
		
		$("#main .active").removeClass("active");
		var window = $(target)
			.css("z-index", z++)
			.addClass("active")
			.find(".chat")
			.scrollToBottom()
			.end();
		
		if (!touchDevice) {
			window.find("input").focus();
		}
	});
	
	sidebar.on("click", ".close", function() {
		var channel = $(this).closest("a");
		var id = parseInt(channel.attr("id").split("-")[1]);
		var cmd = "/close";
		if (channel.hasClass("lobby")) {
			cmd = "/quit";
			var server = channel
				.clone()
				.remove("span")
				.text()
				.trim();
			if (!confirm("Disconnect from " + server + "?")) {
				return false;
			}
		}
		socket.emit("input", {
			id: id,
			text: cmd,
		});
		channel.css({
			transition: "none",
			opacity: .4
		});
		return false;
	});
	
	chat.on("append", ".messages", function() {
		var messages = $(this);
		var id = messages.closest(".window").find(".form").data("target");
		var last = messages.find(".row:last-child");
		if (last.hasClass("highlight")) {
			pop.play();
			if (document.hidden) {
				favicon.badge("!");
			}
		}
		
		var link = $("#channel-" + id + ":not(.active)");
		if (link.length == 0) {
			return;
		}
		
		link.addClass("pulse");
		setTimeout(function() {
			link.removeClass("pulse");
		}, 500);
		
		var type = last.attr("class");
		var ignore = [
			"join",
			"part",
			"quit",
			"nick",
		];
		for (var i = 0; i < ignore.length; i++) {
			if (type.indexOf(ignore[i]) !== -1) {
				return;
			}
		}
		
		var badge = link.find(".badge");
		if (badge.length != 0) {
			var i = (parseInt(badge.html()) || 0) + 1;
			badge.html(i);
			if (last.hasClass("highlight")) {
				badge.addClass("highlight");
			}
		}
	});
	
	chat.on("click", ".show-more", function() {
		var btn = $(this);
		var messages = btn.closest(".chat").find(".messages").children();
		socket.emit("fetch", {
			id: btn.data("id"),
			count: messages.length,
		});
		btn.attr("disabled", true);
	});
	
	chat.on("click", ".user", function(e) {
		e.preventDefault();
		var user = $(this);
		var id = user
			.closest(".window")
			.data("id");
		
		// Strip modes.
		var name = user.html().trim().replace(/[+%@~]/, "");
		if (name.match(/[#.]|-!-/) != null) {
			return;
		}
		
		socket.emit("input", {
			id: id,
			text: "/whois " + name,
		});
	});
	
	chat.on("focus", ".input", function() {
		$(this).closest(".window").find(".chat").scrollToBottom();
	});
	
	chat.on("submit", "form", function(e) {
		e.preventDefault();
		var form = $(this);
		var input = form.find(".input:not(.hint)");
		var text = input.val();
		if (text == "") {
			return;
		}
		input.val("");
		input.prev(".hint").val("");
		socket.emit("input", {
			id: form.data("target"),
			text: text,
		});
	});
	
	chat.on("click", ".toggle", function() {
		var chat = $(this)
			.toggleClass("open")
			.closest(".chat")
			.toggleClass($(this).data("type"))
			.end();
	});
	
	var toggle = "click";
	if (touchDevice) {
		toggle = "touchstart";
	}
	
	chat.on(toggle, ".lt, .rt", function(e) {
		var btn = $(this);
		viewport.toggleClass(btn.attr("class"));
		if (viewport.hasClass("lt")) {
			e.stopPropagation();
			viewport.find("#main").one(toggle, function(e) {
				viewport.removeClass("lt");
			});
		}
	});
	
	$("#sign-in-form").on("submit", function(e) {
		e.preventDefault();
		socket.emit("auth", $("#sign-in-input").val());
	});
	
	function complete(word) {
		var words = commands.slice();
		var users = $(this).closest(".window")
			.find(".users .user")
			.each(function() {
				words.push(this.getAttribute("href").slice(1));
			});
		return $.grep(
			words,
			function(w) {
				return !w.toLowerCase().indexOf(word.toLowerCase());
			}
		);
	}
	
	function toArray(val) {
		return Array.isArray(val) ? val : [val];
	}

	function escape(text) {
		var e = {
			"<": "&lt;",
			">": "&gt;"
		};
		return text.replace(/[<>]/g, function (c) {
			return e[c];
		});
	}

	Handlebars.registerHelper(
		"uri", function(text) {
			var urls = [];
			text = URI.withinString(text, function(url) {
				urls.push(url);
				return "{" + (urls.length - 1) + "}";
			});
			text = escape(text);
			for (var i in urls) {
				var url = escape(urls[i]);
				text = text.replace(
					"{" + i + "}",
					"<a href='" + url.replace(/^www/, "//www") + "' target='_blank'>" + url + "</a>"
				);
			}
			return text;
		}
	);
	
	Handlebars.registerHelper(
		"partial", function(id) {
			return new Handlebars.SafeString(render(id, this));
		}
	);
	
	Handlebars.registerHelper(
		"equal", function(a, b, opt) {
			a = a.toString();
			b = b.toString();
			if (a == b) {
				return opt.fn(this);
			}
		}
	);
	
	Handlebars.registerHelper(
		"contains", function(a, b, opt) {
			if (a.indexOf(b) !== -1) {
				return opt.fn(this);
			}
		}
	);
});