Move date formatting to DateMarker and stop listening to daychange when no longer necessary.
This commit is contained in:
parent
7394e6b9f1
commit
cc895e67ee
@ -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",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -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",
|
||||
});
|
||||
};
|
@ -1,7 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
const moment = require("moment");
|
||||
|
||||
module.exports = function(time) {
|
||||
return moment(time).format("D MMMM YYYY");
|
||||
};
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user