Add basic unread markers

client/css/style.css

@@ -519,6 +519,16 @@ button {
 	display: table;
 	width: 100%;
 }
+#chat .unread-marker {
+ 	display: table-row;
+}
+#chat hr {
+	height: 1px;
+	border: 0; border-top: 1px dotted #ccc;
+	padding: 10px;
+	margin: 1em 0; padding: 0;
+	display: table-cell;
+}
 #chat .msg {
 	display: table-row;
 	word-wrap: break-word;

client/js/libs/handlebars/unreadmarker.js

@@ -0,0 +1,10 @@
+Handlebars.registerHelper(
+	"unread-messages-marker", function(index, length, unread) {
+		if (unread == length - index - 1) {
+			return new Handlebars.SafeString(
+				Handlebars.templates["unreadmarker"]());
+		} else {
+			return null;
+		}
+	}
+);

client/js/shout.js

@@ -190,7 +190,12 @@ $(function() {
 		var chan = chat.find(target);
 		var from = data.msg.from;
 
-		chan.find(".messages")
+		var messages = chan.find(".messages");
+		if (!chan.hasClass("unread")) {
+			chan.addClass("unread")
+			messages.append(render("unreadmarker"));
+		}
+		messages
 			.append(render("msg", {messages: [data.msg]}))
 			.trigger("msg", [
 				target,
@@ -471,11 +476,13 @@ $(function() {
 
 		var chan = $(target)
 			.addClass("active")
+			.removeClass("unread")
 			.trigger("show")
 			.css("z-index", top++)
 			.find(".chat")
 			.sticky()
 			.end();
+		chan.find(".unread-marker").slice(0, -1).remove()
 
 		var title = "Shout";
 		if (chan.data("title")) {

client/js/shout.templates.js

@@ -74,23 +74,25 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) {
   if (stack1 != null) { buffer += stack1; }
   return buffer;
 },"useData":true});
-templates['msg'] = template({"1":function(depth0,helpers,partials,data) {
+templates['msg'] = template({"1":function(depth0,helpers,partials,data,depths) {
   var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "<div class=\"msg "
     + 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)))
     + " ";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.self : depth0), {"name":"if","hash":{},"fn":this.program(2, data),"inverse":this.noop,"data":data});
+  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.self : depth0), {"name":"if","hash":{},"fn":this.program(2, data, depths),"inverse":this.noop,"data":data});
   if (stack1 != null) { buffer += stack1; }
   buffer += "\">\n	<span class=\"time\">\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";
-  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.from : depth0), {"name":"if","hash":{},"fn":this.program(4, data),"inverse":this.noop,"data":data});
+  stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.from : depth0), {"name":"if","hash":{},"fn":this.program(4, data, depths),"inverse":this.noop,"data":data});
   if (stack1 != null) { buffer += stack1; }
   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), "toggle", {"name":"equal","hash":{},"fn":this.program(6, data),"inverse":this.program(9, 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, depths),"inverse":this.program(9, data, depths),"data":data}));
   if (stack1 != null) { buffer += stack1; }
-  return buffer + "	</span>\n</div>\n";
+  return buffer + "	</span>\n</div>\n"
+    + escapeExpression(((helpers['unread-messages-marker'] || (depth0 && depth0['unread-messages-marker']) || helperMissing).call(depth0, (data && data.index), ((stack1 = (depths[1] != null ? depths[1].messages : depths[1])) != null ? stack1.length : stack1), (depths[1] != null ? depths[1].unread : depths[1]), {"name":"unread-messages-marker","hash":{},"data":data})))
+    + "\n";
 },"2":function(depth0,helpers,partials,data) {
   return "self";
   },"4":function(depth0,helpers,partials,data) {
@@ -118,12 +120,12 @@ templates['msg'] = template({"1":function(depth0,helpers,partials,data) {
   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";
-},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data,depths) {
   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});
+  stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.messages : depth0), {"name":"each","hash":{},"fn":this.program(1, data, depths),"inverse":this.noop,"data":data});
   if (stack1 != null) { buffer += stack1; }
   return buffer;
-},"useData":true});
+},"useData":true,"useDepths":true});
 templates['network'] = template({"1":function(depth0,helpers,partials,data) {
   var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
   return "<section id=\"network-"
@@ -177,6 +179,9 @@ templates['toggle'] = template({"1":function(depth0,helpers,partials,data) {
   if (stack1 != null) { buffer += stack1; }
   return buffer;
 },"useData":true});
+templates['unreadmarker'] = template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+  return "<div class=\"unread-marker\">\n	<hr/>\n	<hr/>\n	<hr/>\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/views/msg.tpl

@@ -22,4 +22,5 @@
 		{{/equal}}
 	</span>
 </div>
+{{unread-messages-marker @index ../messages.length ../unread}}
 {{/each}}

client/views/unreadmarker.tpl

@@ -0,0 +1,5 @@
+<div class="unread-marker">
+	<hr/>
+	<hr/>
+	<hr/>
+</div>