Move date formatting to DateMarker and stop listening to daychange when no longer necessary.

This commit is contained in:
Richard Lewis 2018-09-12 21:00:03 +03:00 committed by Pavel Djundik
parent 7394e6b9f1
commit cc895e67ee
4 changed files with 24 additions and 30 deletions

View File

@ -1,11 +1,10 @@
<template>
<div
:data-time="message.time"
:aria-label="message.time | localedate"
:aria-label="localeDate"
class="date-marker-container tooltipped tooltipped-s">
<div class="date-marker">
<span
:data-label="message.time | friendlydate"
:data-label="friendlyDate()"
class="date-marker-text" />
</div>
</div>
@ -20,18 +19,37 @@ export default {
message: Object,
},
mounted() {
const hoursPassed = moment.duration(moment().diff(moment(this.message.time))).asHours();
if (hoursPassed < 48) {
if (this.hoursPassed() < 48) {
this.$root.$on("daychange", this.dayChange);
}
},
beforeDestroy() {
this.$root.$off("daychange", this.dayChange);
},
computed: {
localeDate() {
return moment(this.message.time).format("D MMMM YYYY");
},
},
methods: {
hoursPassed() {
return moment.duration(moment().diff(moment(this.message.time))).asHours()
},
dayChange() {
this.$forceUpdate();
if (this.hoursPassed() >= 48) {
this.$root.$off("daychange", this.dayChange);
}
},
friendlyDate() {
// See http://momentjs.com/docs/#/displaying/calendar-time/
return moment(this.message.time).calendar(null, {
sameDay: "[Today]",
lastDay: "[Yesterday]",
lastWeek: "D MMMM YYYY",
sameElse: "D MMMM YYYY",
});
},
},
};

View File

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

View File

@ -1,7 +0,0 @@
"use strict";
const moment = require("moment");
module.exports = function(time) {
return moment(time).format("D MMMM YYYY");
};

View File

@ -5,15 +5,11 @@ const App = require("../components/App.vue").default;
const roundBadgeNumber = require("./libs/handlebars/roundBadgeNumber");
const tz = require("./libs/handlebars/tz");
const localetime = require("./libs/handlebars/localetime");
const localedate = require("./libs/handlebars/localedate");
const friendlydate = require("./libs/handlebars/friendlydate");
const friendlysize = require("./libs/handlebars/friendlysize");
const colorClass = require("./libs/handlebars/colorClass");
Vue.filter("tz", tz);
Vue.filter("localetime", localetime);
Vue.filter("localedate", localedate);
Vue.filter("friendlydate", friendlydate);
Vue.filter("friendlysize", friendlysize);
Vue.filter("colorClass", colorClass);
Vue.filter("roundBadgeNumber", roundBadgeNumber);