Add a date seperator

This commit is contained in:
stepie22 2016-10-03 20:03:19 +02:00
parent c954d9c9a3
commit 93f0f6942e
9 changed files with 146 additions and 5 deletions

View File

@ -839,6 +839,33 @@ button {
display: none; display: none;
} }
#chat .date-marker {
position: relative;
text-align: center;
opacity: .5;
margin: 0 10px;
z-index: 0;
font-weight: bold;
font-size: 12px;
}
#chat .date-marker:before {
position: absolute;
z-index: -1;
content: "";
left: 0;
right: 0;
top: 50%;
border-top: 1px solid #006b3b;
}
#chat .date-marker-text:before {
content: attr(data-date);
background-color: white;
color: #006b3b;
padding: 0 10px;
}
.inline-channel { .inline-channel {
cursor: pointer; cursor: pointer;
} }

View File

@ -0,0 +1,5 @@
"use strict";
Handlebars.registerHelper("localedate", function(time) {
return new Date(time).toLocaleDateString();
});

View File

@ -307,6 +307,27 @@ $(function() {
} else { } else {
channel.append(render("unread_marker")); channel.append(render("unread_marker"));
} }
if (data.type !== "lobby") {
var lastDate;
$(chat.find("#chan-" + data.id + " .messages .msg[data-time]")).each(function() {
var msg = $(this);
var msgDate = new Date(msg.attr("data-time"));
// Top-most message in a channel
if (!lastDate) {
lastDate = msgDate;
msg.before(render("date-marker", {msgDate: msgDate}));
}
if (lastDate.toDateString() !== msgDate.toDateString()) {
msg.before(render("date-marker", {msgDate: msgDate}));
}
lastDate = msgDate;
});
}
} }
function renderChannelUsers(data) { function renderChannelUsers(data) {
@ -362,6 +383,21 @@ $(function() {
var target = "#chan-" + data.chan; var target = "#chan-" + data.chan;
var container = chat.find(target + " .messages"); var container = chat.find(target + " .messages");
// Check if date changed
var prevMsg = $(container.find(".msg")).last();
var prevMsgTime = new Date(prevMsg.attr("data-time"));
var msgTime = new Date(msg.attr("data-time"));
// It's the first message in a channel/query
if (prevMsg.length === 0) {
container.append(render("date-marker", {msgDate: msgTime}));
}
if (prevMsgTime.toDateString() !== msgTime.toDateString()) {
prevMsg.append(render("date-marker", {msgDate: msgTime}));
}
// Add message to the container
container container
.append(msg) .append(msg)
.trigger("msg", [ .trigger("msg", [
@ -382,6 +418,13 @@ $(function() {
.find("#chan-" + data.chan) .find("#chan-" + data.chan)
.find(".messages"); .find(".messages");
// Remove the date-change marker we put at the top, because it may
// not actually be a date change now
var firstChild = $(chan).children().eq(0);
if (firstChild.attr("class") === "date-marker") {
firstChild.remove();
}
// get the scrollable wrapper around messages // get the scrollable wrapper around messages
var scrollable = chan.closest(".chat"); var scrollable = chan.closest(".chat");
var heightOld = chan.height(); var heightOld = chan.height();
@ -394,6 +437,28 @@ $(function() {
if (data.messages.length !== 100) { if (data.messages.length !== 100) {
scrollable.find(".show-more").removeClass("show"); scrollable.find(".show-more").removeClass("show");
} }
// Date change detect
// Have to use data instaid of the documentFragment because it's being weird
var lastDate;
$(data.messages).each(function() {
var msgData = this;
var msgDate = new Date(msgData.time);
var msg = $(chat.find("#chan-" + data.chan + " .messages #msg-" + msgData.id));
// Top-most message in a channel
if (!lastDate) {
lastDate = msgDate;
msg.before(render("date-marker", {msgDate: msgDate}));
}
if (lastDate.toDateString() !== msgDate.toDateString()) {
msg.before(render("date-marker", {msgDate: msgDate}));
}
lastDate = msgDate;
});
}); });
socket.on("network", function(data) { socket.on("network", function(data) {
@ -1210,6 +1275,26 @@ $(function() {
var chan = $(this); var chan = $(this);
if (chan.find(".messages .msg:not(.unread-marker)").slice(0, -100).remove().length) { if (chan.find(".messages .msg:not(.unread-marker)").slice(0, -100).remove().length) {
chan.find(".show-more").addClass("show"); chan.find(".show-more").addClass("show");
// Remove date-seperators that would otherwise be "stuck" at the top
// of the channel
var prev;
$(chan.find(".messages").children()).each(function() {
if (!prev) {
// Should always be a date-seperator, because it's always added
prev = $(this);
} else {
var current = $(this);
if (current.attr("class") === "date-marker") {
prev.remove();
} else {
return false;
}
prev = current;
}
});
} }
}); });
}, 1000 * 10); }, 1000 * 10);
@ -1217,6 +1302,7 @@ $(function() {
function clear() { function clear() {
chat.find(".active .messages .msg:not(.unread-marker)").remove(); chat.find(".active .messages .msg:not(.unread-marker)").remove();
chat.find(".active .show-more").addClass("show"); chat.find(".active .show-more").addClass("show");
chat.find(".active .date-marker").remove();
} }
function complete(word) { function complete(word) {

View File

@ -155,7 +155,8 @@ body {
border-color: #333c4a; border-color: #333c4a;
} }
#chat .unread-marker { #chat .unread-marker,
#chat .date-marker {
opacity: 1; opacity: 1;
} }
@ -163,6 +164,15 @@ body {
background-color: #333c4a; background-color: #333c4a;
} }
#chat .date-marker:before {
border-color: #97ea70;
}
#chat .date-marker-text:before {
background-color: #333c4a;
color: #97ea70;
}
/* Setup text colors */ /* Setup text colors */
#chat .msg { #chat .msg {
color: #f3f3f3; color: #f3f3f3;

View File

@ -181,7 +181,8 @@ body {
border-color: #3f3f3f; border-color: #3f3f3f;
} }
#chat .unread-marker { #chat .unread-marker,
.date-marker {
opacity: 1; opacity: 1;
} }
@ -189,6 +190,15 @@ body {
background-color: #3f3f3f; background-color: #3f3f3f;
} }
#chat .date-marker:before {
border-color: #97ea70;
}
#chat .date-marker-text:before {
background-color: #3f3f3f;
color: #97ea70;
}
/* Setup text colors */ /* Setup text colors */
#chat .msg { #chat .msg {
color: #ffcfaf; color: #ffcfaf;

View File

@ -0,0 +1,3 @@
<div class="date-marker">
<span class="date-marker-text" data-date="{{localedate msgDate}}"></span>
</div>

View File

@ -1,4 +1,4 @@
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}"> <div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}" data-time="{{time}}">
<span class="time" title="{{localetime time}}"> <span class="time" title="{{localetime time}}">
{{tz time}} {{tz time}}
</span> </span>

View File

@ -1,4 +1,4 @@
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}"> <div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" id="msg-{{id}}" data-time="{{time}}">
<span class="time" title="{{localetime time}}"> <span class="time" title="{{localetime time}}">
{{tz time}} {{tz time}}
</span> </span>

View File

@ -1,4 +1,4 @@
<div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}"> <div class="msg {{type}}{{#if self}} self{{/if}}{{#if highlight}} highlight{{/if}}" data-time="{{time}}">
<span class="time" title="{{localetime time}}"> <span class="time" title="{{localetime time}}">
{{tz time}} {{tz time}}
</span> </span>