Update date markers vith vue instead of jQuery.

This commit is contained in:
Richard Lewis 2018-09-12 20:14:45 +03:00 committed by Pavel Djundik
parent 7b15c53ed4
commit 7394e6b9f1
4 changed files with 58 additions and 32 deletions

View File

@ -93,6 +93,8 @@
</template>
<script>
const moment = require("moment");
import {throttle} from "lodash";
import NetworkList from "./NetworkList.vue";
@ -116,12 +118,26 @@ export default {
}, 100);
window.addEventListener("resize", this.debouncedResize, {passive: true});
// Emit a daychange event every time the day changes so date markers know when to update themselves
const emitDayChange = () => {
this.$root.$emit("daychange");
// This should always be 24h later but re-computing exact value just in case
this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
};
this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
},
beforeDestroy() {
window.removeEventListener("resize", this.debouncedResize);
clearTimeout(this.dayChangeTimeout);
},
methods: {
isPublic: () => document.body.classList.contains("public"),
msUntilNextDay() {
// Compute how many milliseconds are remaining until the next day starts
return moment().add(1, "day").startOf("day") - moment();
},
},
};
</script>

View File

@ -0,0 +1,38 @@
<template>
<div
:data-time="message.time"
:aria-label="message.time | localedate"
class="date-marker-container tooltipped tooltipped-s">
<div class="date-marker">
<span
:data-label="message.time | friendlydate"
class="date-marker-text" />
</div>
</div>
</template>
<script>
const moment = require("moment");
export default {
name: "DateMarker",
props: {
message: Object,
},
mounted() {
const hoursPassed = moment.duration(moment().diff(moment(this.message.time))).asHours();
if (hoursPassed < 48) {
this.$root.$on("daychange", this.dayChange);
}
},
beforeDestroy() {
this.$root.$off("daychange", this.dayChange);
},
methods: {
dayChange() {
this.$forceUpdate();
},
},
};
</script>

View File

@ -19,18 +19,10 @@
aria-relevant="additions"
@copy="onCopy">
<template v-for="(message, id) in condensedMessages">
<div
<DateMarker
v-if="shouldDisplayDateMarker(message, id)"
:key="message.id + '-date'"
:data-time="message.time"
:aria-label="message.time | localedate"
class="date-marker-container tooltipped tooltipped-s">
<div class="date-marker">
<span
:data-label="message.time | friendlydate"
class="date-marker-text" />
</div>
</div>
:message="message" />
<div
v-if="shouldDisplayUnreadMarker(id)"
:key="message.id + '-unread'"
@ -78,12 +70,14 @@ const clipboard = require("../js/clipboard");
import socket from "../js/socket";
import Message from "./Message.vue";
import MessageCondensed from "./MessageCondensed.vue";
import DateMarker from "./DateMarker.vue";
export default {
name: "MessageList",
components: {
Message,
MessageCondensed,
DateMarker,
},
props: {
settings: Object,

View File

@ -2,7 +2,6 @@
// vendor libraries
const $ = require("jquery");
const moment = require("moment");
// our libraries
const socket = require("./socket");
@ -12,7 +11,6 @@ const {vueApp, findChannel} = require("./vue");
window.vueMounted = () => {
require("./socket-events");
const slideoutMenu = require("./slideout");
const templates = require("../views");
const contextMenuFactory = require("./contextMenuFactory");
const storage = require("./localStorage");
const utils = require("./utils");
@ -211,26 +209,6 @@ window.vueMounted = () => {
utils.synchronizeNotifiedState();
});
// 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({time: $(this).data("time")}));
});
// This should always be 24h later but re-computing exact value just in case
setTimeout(updateDateMarkers, msUntilNextDay());
}
setTimeout(updateDateMarkers, msUntilNextDay());
window.addEventListener("popstate", (e) => {
const {state} = e;