From daf384f18be5ca83dd147e62f14c5ba05a47154b Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Thu, 10 Jul 2014 00:40:51 +0200
Subject: [PATCH] Added settings

---
 client/css/style.css | 74 ++++++++++++++++++++++++++++++++------------
 client/index.html    | 59 +++++++++++++++++++++++++++++++----
 client/js/chat.js    | 49 +++++++++++++++++++++++++++--
 3 files changed, 154 insertions(+), 28 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index d452c422..d9f5d525 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -278,6 +278,22 @@ button {
 	top: 0px;
 	width: 100%;
 }
+#windows .input {
+	border: 2px solid #e9ecef;
+	border-radius: 4px;
+	color: #222;
+	font-size: 14px;
+	margin: 2px 0;
+	outline: 0;
+	padding: 8px 10px;
+	transition: border-color .2s;
+	-webkit-appearance: none;
+	width: 100%;
+}
+#windows .input:hover,
+#windows .input:focus {
+	border-color: #bdc3c7;
+}
 #windows .chan,
 #windows .window {
 	background: #fff;
@@ -294,22 +310,6 @@ button {
 #windows .window h1 {
 	font: 36px Lato;
 }
-#windows .window input {
-	border: 2px solid #e9ecef;
-	border-radius: 4px;
-	color: #222;
-	font-size: 14px;
-	margin: 2px 0;
-	outline: 0;
-	padding: 8px 10px;
-	transition: border-color .2s;
-	-webkit-appearance: none;
-	width: 100%;
-}
-#windows .window input:hover,
-#windows .window input:focus {
-	border-color: #bdc3c7;
-}
 #windows .active {
 	display: block;
 }
@@ -402,18 +402,26 @@ button {
 #chat .kick .type,
 #chat .quit .type,
 #chat .quit .type,
-#chat .notice .type,
 #chat .topic .type {
 	display: inline;
 }
 #chat .error,
-#chat .error .user,
+#chat .error .from,
 #chat .highlight,
-#chat .highlight .user {
+#chat .highlight .from {
 	color: #f00;
 }
+#chat.hide-join .join,
+#chat.hide-nick .nick,
+#chat.hide-part .nick,
+#chat.hide-mode .mode,
+#chat.hide-quit .quit {
+	display: none !important;
+}
+#chat .notice .type {
+	display: none;
+}
 #chat .meta {
-	
 	height: 80px;
 	padding: 25px 0 0 20px;
 }
@@ -487,6 +495,32 @@ button {
 #connect .btn {
 	margin-top: 30px;
 }
+#settings h2 {
+	border-bottom: 1px solid #eee;
+	color: #7f8c8d;
+	font-size: 26px;
+	margin: 30px 0 10px;
+	padding-bottom: 7px;
+}
+#settings .opt {
+	display: block;
+	padding: 10px 0 10px 1px;
+}
+#settings .opt input {
+	float: left;
+	margin: 4px 10px 0 0;
+}
+#settings #play {
+	color: #7f8c8d;
+}
+#settings #play:hover {
+	opacity: .8;
+}
+#settings #play:before {
+	content: "\f0ba";
+	font: 16px Octicons;
+	margin-right: 9px;
+}
 #form {
 	bottom: 0;
 	height: 40px;
diff --git a/client/index.html b/client/index.html
index 6811d09c..f21dfc01 100644
--- a/client/index.html
+++ b/client/index.html
@@ -47,31 +47,31 @@
 							<div class="col-xs-8">
 								<label>
 								Server
-								<input name="host" placeholder="irc.freenode.org">
+								<input class="input" name="host" placeholder="irc.freenode.org">
 								</label>
 							</div>
 							<div class="col-xs-4">
 								<label class="port">
 								Port
-								<input name="port" placeholder="6667">
+								<input class="input" name="port" placeholder="6667">
 								</label>
 							</div>
 							<div class="col-xs-5">
 								<label>
 								Nick
-								<input name="nick" placeholder="shout">
+								<input class="input" name="nick" placeholder="shout">
 								</label>
 							</div>
 							<div class="col-xs-7">
 								<label>
 								Real Name
-								<input name="realname" class="input" placeholder="Shout User">
+								<input class="input" name="realname" class="input" placeholder="Shout User">
 								</label>
 							</div>
 							<div class="col-xs-12">
 								<label>
 								Channels
-								<input name="join" class="input" placeholder="#shout-irc">
+								<input class="input" name="join" class="input" placeholder="#shout-irc">
 								</label>
 							</div>
 							<div class="col-xs-12">
@@ -88,6 +88,53 @@
 							<div class="col-sm-12">
 								<h1 class="title">Settings</h1>
 							</div>
+							<div class="col-sm-12">
+								<h2>Messages</h2>
+							</div>
+							<div class="col-sm-6">
+								<label class="opt">
+									<input type="checkbox" name="join">
+									Show joins
+								</label>
+							</div>
+							<div class="col-sm-6">
+								<label class="opt">
+									<input type="checkbox" name="nick">
+									Show nick changes
+								</label>
+							</div>
+							<div class="col-sm-6">
+								<label class="opt">
+									<input type="checkbox" name="part">
+									Show parts
+								</label>
+							</div>
+							<div class="col-sm-6">
+								<label class="opt">
+									<input type="checkbox" name="mode">
+									Show mode
+								</label>
+							</div>
+							<div class="col-sm-6">
+								<label class="opt">
+									<input type="checkbox" name="quit">
+									Show quits
+								</label>
+							</div>
+							<div class="col-sm-12">
+								<h2>Sound</h2>
+							</div>
+							<div class="col-sm-12">
+								<label class="opt">
+									<input type="checkbox" name="notification">
+									Enable notification sound
+								</label>
+							</div>
+							<div class="col-sm-12">
+								<div class="opt">
+									<button id="play">Play sound</button>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -121,7 +168,7 @@
 		
 		<script type="text/html" class="chat">
 		{{#each channels}}
-		<div id="chan-{{id}}" data-type="{{type}}" class="chan">
+		<div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan">
 			<div class="chat">
 				<div class="messages">
 					{{partial "messages"}}
diff --git a/client/js/chat.js b/client/js/chat.js
index 3f823620..fbe074a8 100644
--- a/client/js/chat.js
+++ b/client/js/chat.js
@@ -34,6 +34,8 @@ $(function() {
 	var pop = new Audio();
 	pop.src = "/audio/pop.ogg";
 	
+	$("#play").on("click", function() { pop.play(); });
+	
 	var favico = new Favico({
 		animation: "none"
 	});
@@ -105,7 +107,11 @@ $(function() {
 	});
 	
 	socket.on("msg", function(data) {
-		var target = "#chan-" + data.chan;
+		var target = data.chan;
+		if (data.msg.type == "error") {
+			target = chat.find(".active").data("id");
+		}
+		target = "#chan-" + target;
 		chat.find(target)
 			.find(".messages")
 			.append(render("messages", {messages: [data.msg]}))
@@ -116,7 +122,6 @@ $(function() {
 	});
 	
 	socket.on("network", function(data) {
-		$("#connect").find(".btn").prop("disabled", false);
 		sidebar.find(".empty").hide();
 		sidebar.find(".networks").append(
 			render("networks", {
@@ -131,6 +136,11 @@ $(function() {
 		sidebar.find(".chan")
 			.last()
 			.trigger("click");
+		connect.find(".btn")
+			.prop("disabled", false)
+			.end()
+			.find("input")
+			.val("");
 	});
 	
 	socket.on("nick", function(data) {
@@ -163,6 +173,41 @@ $(function() {
 			.html(render("users", data));
 	});
 	
+	$.cookie.json = true;
+	var settings = $("#settings");
+	var options = $.extend({
+		join: true,
+		mode: true,
+		nick: true,
+		notification: true,
+		part: true,
+		quit: true,
+	}, $.cookie("settings"));
+	
+	for (var i in options) {
+		if (options[i]) {
+			settings.find("input[name=" + i + "]").prop("checked", true);
+		}
+	}
+	
+	settings.on("change", "input", function() {
+		var self = $(this);
+		var name = self.attr("name");
+		options[name] = self.prop("checked");
+		$.cookie("settings", options);
+		if ([
+			"join",
+			"nick",
+			"part",
+			"mode",
+			"quit",
+		].indexOf(name) !== -1) {
+			chat.toggleClass("hide-" + name, !self.prop("checked"));
+		}
+	}).find("input")
+		.eq(0)
+		.trigger("change");
+	
 	var viewport = $("#viewport");
 	$("#rt, #lt").on("click", function(e) {
 		var self = $(this);