Merge pull request #1054 from thelounge/astorije/friendly-date-marker
Use moment on the client to display friendly dates
This commit is contained in:
commit
98e3bd0ca2
@ -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;
|
||||
}
|
||||
|
||||
|
13
client/js/libs/handlebars/friendlydate.js
Normal file
13
client/js/libs/handlebars/friendlydate.js
Normal file
@ -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"
|
||||
});
|
||||
};
|
@ -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();
|
||||
|
||||
|
@ -155,11 +155,6 @@ body {
|
||||
border-color: #333c4a;
|
||||
}
|
||||
|
||||
#chat .unread-marker,
|
||||
#chat .date-marker {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#chat .unread-marker-text:before {
|
||||
background-color: #333c4a;
|
||||
}
|
||||
|
@ -181,11 +181,6 @@ body {
|
||||
border-color: #3f3f3f;
|
||||
}
|
||||
|
||||
#chat .unread-marker,
|
||||
.date-marker {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#chat .unread-marker-text:before {
|
||||
background-color: #3f3f3f;
|
||||
}
|
||||
|
@ -1,3 +1,5 @@
|
||||
<div class="date-marker">
|
||||
<span class="date-marker-text" data-date="{{localedate msgDate}}"></span>
|
||||
<div class="date-marker-container tooltipped tooltipped-s" data-timestamp="{{msgDate}}" aria-label="{{localedate msgDate}}">
|
||||
<div class="date-marker">
|
||||
<span class="date-marker-text" data-label="{{friendlydate msgDate}}"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
24
test/client/js/libs/handlebars/friendlydateTest.js
Normal file
24
test/client/js/libs/handlebars/friendlydateTest.js
Normal file
@ -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"));
|
||||
});
|
||||
});
|
||||
});
|
@ -14,6 +14,7 @@ let config = {
|
||||
"handlebars/runtime",
|
||||
"jquery",
|
||||
"jquery-ui/ui/widgets/sortable",
|
||||
"moment",
|
||||
"mousetrap",
|
||||
"socket.io-client",
|
||||
"urijs",
|
||||
|
Loading…
Reference in New Issue
Block a user