Fix #53 add per-day separator

cli/lang/en.js

@@ -39,6 +39,25 @@ lang["en"] = {
         return dateObj.toLocaleString();
     },
 
+    formatDay: function(ts) {
+        var today = new Date(),
+            yesterday = new Date(),
+            dateObj = new Date(ts);
+
+        today.setHours(0, 0, 0, 0);
+        yesterday.setTime(today.getTime());
+        yesterday.setDate(yesterday.getDate() -1);
+
+        if (dateObj.getTime() > today.getTime()) {
+            // Today time
+            return "today";
+        }
+        if (dateObj.getTime() > yesterday.getTime()) {
+            return "yesterday";
+        }
+        return dateObj.toLocaleDateString();
+    },
+
     chanName: function(serviceName, chanName) {
         return serviceName +'/' +chanName;
     },

cli/lang/fr.js

@@ -39,6 +39,25 @@ lang["fr"] = {
         return dateObj.toLocaleString();
     },
 
+    formatDay: function(ts) {
+        var today = new Date(),
+            yesterday = new Date(),
+            dateObj = new Date(ts);
+
+        today.setHours(0, 0, 0, 0);
+        yesterday.setTime(today.getTime());
+        yesterday.setDate(yesterday.getDate() -1);
+
+        if (dateObj.getTime() > today.getTime()) {
+            // Today time
+            return "aujourd'hui";
+        }
+        if (dateObj.getTime() > yesterday.getTime()) {
+            return "hier";
+        }
+        return dateObj.toLocaleDateString();
+    },
+
     chanName: function(serviceName, chanName) {
         return serviceName +'/' +chanName;
     },

cli/resources.js

@@ -142,6 +142,7 @@ var R = {
             pending: "chatmsg-pending",
             notice: "chatmsg-notice",
             firstUnread: "chatmsg-first-unread",
+            firstOfDay: "chatmsg-first-daily",
             content: "chatmsg-content",
             meMessage: "chatmsg-me_message",
             ts: "chatmsg-ts",

cli/ui.js

@@ -324,8 +324,10 @@ function onRoomUpdated() {
         DATA.history[currentRoomId].messages.forEach(function(msg) {
             if (!msg.removed) {
                 var dom = msg.getDom(),
-                    newGroupDom = false;
-                if (prevMsg && prevMsg.userId === msg.userId && msg.userId) {
+                    newGroupDom = false,
+                    sameDayThanPrevious = prevMsg && isSameDay(msg.ts, prevMsg.ts);
+
+                if (prevMsg && prevMsg.userId === msg.userId && msg.userId && sameDayThanPrevious) {
                     if (Math.abs(firstTsCombo -msg.ts) < 30 && !(msg instanceof MeMessage))
                         prevMsgDom.classList.add(R.klass.msg.sameTs);
                     else
@@ -357,6 +359,12 @@ function onRoomUpdated() {
                     prevMsgDom = dom;
                     currentMsgGroupDom.content.appendChild(dom);
                 }
+                if (sameDayThanPrevious) {
+                    (currentMsgGroupDom || dom).classList.remove(R.klass.msg.firstOfDay);
+                } else {
+                    (currentMsgGroupDom || dom).classList.add(R.klass.msg.firstOfDay);
+                    (currentMsgGroupDom || dom).dataset["date"] = locale.formatDay(msg.ts);
+                }
             } else {
                 msg.removeDom();
             }

cli/utils.js

@@ -12,3 +12,17 @@ function isObjectEmpty(o) {
     return true;
 }
 
+/**
+ * Check if these to ts are on the same day
+ * @param {number} ts1
+ * @param {number} ts2
+ * @return {boolean}
+**/
+function isSameDay(ts1, ts2) {
+    var d1 = new Date(ts1),
+        d2 = new Date(ts2);
+    return d1.getDay() == d2.getDay() &&
+        d1.getMonth() == d2.getMonth() &&
+        d1.getYear() == d2.getYear();
+}
+

srv/public/style.css

@@ -97,6 +97,8 @@ button, .button { border: 1px solid black; border-radius: 3px; background: rgb(2
 .chatmsg-authorGroup > .chatmsg-author-messages { padding: 18px 0 0 36px; }
 .chatmsg-authorGroup, .chatmsg-me_message { padding: 10px; }
 .chatmsg-authorGroup .chatmsg-item { padding: 4px 10px; }
+.chatmsg-authorGroup.chatmsg-first-daily,.chatmsg-me_message.chatmsg-first-daily { margin-top: 1em; }
+.chatmsg-authorGroup.chatmsg-first-daily::before,.chatmsg-me_message.chatmsg-first-daily::before { position: absolute; top: -1em; width: calc(100% - 20px); content: attr(data-date); border-bottom: 1px solid rgb(156, 156, 156); }
 .chatmsg-item { display: flex; position: relative; }
 .chatmsg-item:hover { background: #F9F9F9; }
 .chat-context-roominfo .chatmsg-item:hover { background: inherit; }