Optional notification badge

client/index.html

@@ -193,7 +193,13 @@
 								</label>
 							</div>
 							<div class="col-sm-12">
-								<h2>Sound</h2>
+								<h2>Notifications</h2>
+							</div>
+							<div class="col-sm-12">
+								<label class="opt">
+								<input id="badge" type="checkbox" name="badge">
+								Enable badge
+								</label>
 							</div>
 							<div class="col-sm-12">
 								<label class="opt">

client/js/shout.js

@@ -40,10 +40,6 @@ $(function() {
 		};
 	}
 
-	if (Notification.permission !== "granted") {
-		Notification.requestPermission();
-	}
-
 	$("#play").on("click", function() { pop.play(); });
 	$("#footer .icon").tooltip();
 
@@ -100,6 +96,7 @@ $(function() {
 		if (data.networks.length === 0) {
 			$("#footer").find(".connect").trigger("click");
 		} else {
+			sidebar.find(".empty").hide();
 			sidebar.find(".networks").html(
 				render("network", {
 					networks: data.networks
@@ -115,7 +112,6 @@ $(function() {
 			);
 		}
 
-		sidebar.find(".empty").hide();
 		$("body").removeClass("signed-out");
 		$("#sign-in").detach();
 
@@ -237,6 +233,7 @@ $(function() {
 
 	var settings = $("#settings");
 	var options = $.extend({
+		badge: false,
 		join: true,
 		mode: true,
 		motd: false,
@@ -270,6 +267,15 @@ $(function() {
 	}).find("input")
 		.trigger("change");
 
+	$("#badge").on("change", function() {
+		var self = $(this);
+		if (self.prop("checked")) {
+			if (Notification.permission !== "granted") {
+				Notification.requestPermission();
+			}
+		}
+	});
+
 	var viewport = $("#viewport");
 
 	viewport.on("click", ".lt, .rt", function(e) {
@@ -401,8 +407,8 @@ $(function() {
 		var type = msg.type;
 		var highlight = type.contains("highlight");
 		if (highlight || isQuery) {
-			pop.play();
 			if (!document.hasFocus() || !$(target).hasClass("active")) {
+				pop.play();
 				favico.badge("!");
 				if (Notification.permission === "granted") {
 					var n = new Notification(msg.from + " says:", {