1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<template>
<time
:datetime="time"
:title="localeDateString"
>
{{ relativeOrAbsoluteTimeString }}
</time>
</template>
<script>
import * as DateUtils from 'src/services/date_utils/date_utils.js'
import localeService from 'src/services/locale/locale.service.js'
export default {
name: 'Timeago',
props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
data () {
return {
relativeTimeMs: 0,
relativeTime: { key: 'time.now', num: 0 },
interval: null
}
},
computed: {
shouldUseAbsoluteTimeFormat () {
if (!this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
return false
}
return DateUtils.durationStrToMs(this.$store.getters.mergedConfig.absoluteTimeFormatMinAge) <= this.relativeTimeMs
},
browserLocale () {
return localeService.internalToBrowserLocale(this.$i18n.locale)
},
timeAsDate () {
return typeof this.time === 'string'
? new Date(Date.parse(this.time))
: this.time
},
localeDateString () {
return this.timeAsDate.toLocaleString(this.browserLocale)
},
relativeTimeString () {
const timeString = this.$i18n.tc(this.relativeTime.key, this.relativeTime.num, [this.relativeTime.num])
if (typeof this.templateKey === 'string' && this.relativeTime.key !== 'time.now') {
return this.$i18n.t(this.templateKey, [timeString])
}
return timeString
},
absoluteTimeString () {
if (this.longFormat) {
return this.localeDateString
}
const now = new Date()
const formatter = (() => {
if (DateUtils.isSameDay(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
minute: 'numeric',
hour: 'numeric'
})
} else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
hour: 'numeric',
day: 'numeric'
})
} else if (DateUtils.isSameYear(this.timeAsDate, now)) {
return new Intl.DateTimeFormat(this.browserLocale, {
month: 'short',
day: 'numeric'
})
} else {
return new Intl.DateTimeFormat(this.browserLocale, {
year: 'numeric',
month: 'short'
})
}
})()
return formatter.format(this.timeAsDate)
},
relativeOrAbsoluteTimeString () {
return this.shouldUseAbsoluteTimeFormat ? this.absoluteTimeString : this.relativeTimeString
}
},
watch: {
time (newVal, oldVal) {
if (oldVal !== newVal) {
clearTimeout(this.interval)
this.refreshRelativeTimeObject()
}
}
},
created () {
this.refreshRelativeTimeObject()
},
unmounted () {
clearTimeout(this.interval)
},
methods: {
refreshRelativeTimeObject () {
const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
this.relativeTime = this.longFormat
? DateUtils.relativeTime(this.time, nowThreshold)
: DateUtils.relativeTimeShort(this.time, nowThreshold)
if (this.autoUpdate) {
this.interval = setTimeout(
this.refreshRelativeTimeObject,
1000 * this.autoUpdate
)
}
}
}
}
</script>
|
