Update date markers vith vue instead of jQuery.
This commit is contained in:
parent
7b15c53ed4
commit
7394e6b9f1
@ -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>
|
||||
|
38
client/components/DateMarker.vue
Normal file
38
client/components/DateMarker.vue
Normal 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>
|
@ -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,
|
||||
|
@ -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;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user