Merge pull request #1054 from thelounge/astorije/friendly-date-marker

Use moment on the client to display friendly dates

client/css/style.css

@@ -841,7 +841,6 @@ kbd {
 #chat .unread-marker {
 	position: relative;
 	text-align: center;
-	opacity: .5;
 	margin: 0 10px;
 	z-index: 0;
 	font-weight: bold;
@@ -855,13 +854,13 @@ kbd {
 	left: 0;
 	right: 0;
 	top: 50%;
-	border-top: 1px solid #e74c3c;
+	border-top: 1px solid rgba(231, 76, 60, .5);
 }
 
 #chat .unread-marker-text:before {
 	content: "New messages";
 	background-color: white;
-	color: #e74c3c;
+	color: rgba(231, 76, 60, .5);
 	padding: 0 10px;
 }
 
@@ -872,7 +871,6 @@ kbd {
 #chat .date-marker {
 	position: relative;
 	text-align: center;
-	opacity: .5;
 	margin: 0 10px;
 	z-index: 0;
 	font-weight: bold;
@@ -886,13 +884,13 @@ kbd {
 	left: 0;
 	right: 0;
 	top: 50%;
-	border-top: 1px solid #006b3b;
+	border-top: 1px solid rgba(0, 107, 59, .5);
 }
 
 #chat .date-marker-text:before {
-	content: attr(data-date);
+	content: attr(data-label);
 	background-color: white;
-	color: #006b3b;
+	color: rgba(0, 107, 59, .5);
 	padding: 0 10px;
 }
 

client/js/libs/handlebars/friendlydate.js

@@ -0,0 +1,13 @@
+"use strict";
+
+const moment = require("moment");
+
+module.exports = function(time) {
+	// See http://momentjs.com/docs/#/displaying/calendar-time/
+	return moment(new Date(time)).calendar(null, {
+		sameDay: "[Today]",
+		lastDay: "[Yesterday]",
+		lastWeek: "L", // Locale
+		sameElse: "L"
+	});
+};

client/js/lounge.js

@@ -3,6 +3,7 @@
 // vendor libraries
 require("jquery-ui/ui/widgets/sortable");
 const $ = require("jquery");
+const moment = require("moment");
 const Mousetrap = require("mousetrap");
 const URI = require("urijs");
 
@@ -1564,6 +1565,25 @@ $(function() {
 		}
 	});
 
+	// Compute how many milliseconds are remaining until the next day starts
+	function msUntilNextDay() {
+		return moment().add(1, "day").startOf("day") - moment();
+	}
+
+	// Go through all Today/Yesterday date markers in the DOM and recompute their
+	// labels. When done, restart the timer for the next day.
+	function updateDateMarkers() {
+		$(".date-marker-text[data-label='Today'], .date-marker-text[data-label='Yesterday']")
+			.closest(".date-marker-container")
+			.each(function() {
+				$(this).replaceWith(templates.date_marker({msgDate: $(this).data("timestamp")}));
+			});
+
+		// This should always be 24h later but re-computing exact value just in case
+		setTimeout(updateDateMarkers, msUntilNextDay());
+	}
+	setTimeout(updateDateMarkers, msUntilNextDay());
+
 	// Only start opening socket.io connection after all events have been registered
 	socket.open();
 

client/themes/morning.css

@@ -155,11 +155,6 @@ body {
 	border-color: #333c4a;
 }
 
-#chat .unread-marker,
-#chat .date-marker {
-	opacity: 1;
-}
-
 #chat .unread-marker-text:before {
 	background-color: #333c4a;
 }

client/themes/zenburn.css

@@ -181,11 +181,6 @@ body {
 	border-color: #3f3f3f;
 }
 
-#chat .unread-marker,
-.date-marker {
-	opacity: 1;
-}
-
 #chat .unread-marker-text:before {
 	background-color: #3f3f3f;
 }

client/views/date-marker.tpl

@@ -1,3 +1,5 @@
-<div class="date-marker">
+<div class="date-marker-container tooltipped tooltipped-s" data-timestamp="{{msgDate}}" aria-label="{{localedate msgDate}}">
-	<span class="date-marker-text" data-date="{{localedate msgDate}}"></span>
+	<div class="date-marker">
+		<span class="date-marker-text" data-label="{{friendlydate msgDate}}"></span>
+	</div>
 </div>

test/client/js/libs/handlebars/friendlydateTest.js

@@ -0,0 +1,24 @@
+"use strict";
+
+const expect = require("chai").expect;
+const moment = require("moment");
+const friendlydate = require("../../../../../client/js/libs/handlebars/friendlydate");
+
+describe("friendlydate Handlebars helper", () => {
+	it("should render 'Today' as a human-friendly date", () => {
+		const time = new Date().getTime();
+		expect(friendlydate(time)).to.equal("Today");
+	});
+
+	it("should render 'Yesterday' as a human-friendly date", () => {
+		const time = new Date().getTime() - 24 * 3600 * 1000;
+		expect(friendlydate(time)).to.equal("Yesterday");
+	});
+
+	it("should not render any friendly dates prior to the day before", () => {
+		[2, 7, 30, 365, 1000].forEach(day => {
+			const time = new Date().getTime() - 24 * 3600 * 1000 * day;
+			expect(friendlydate(time)).to.equal(moment(time).format("L"));
+		});
+	});
+});

webpack.config.js

@@ -14,6 +14,7 @@ let config = {
 			"handlebars/runtime",
 			"jquery",
 			"jquery-ui/ui/widgets/sortable",
+			"moment",
 			"mousetrap",
 			"socket.io-client",
 			"urijs",