generated from daviddarnes/component-template
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
103 lines (103 loc) · 4.87 KB
/
demo.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A Web Component to display a relative time." />
<title><relative-time> Web Component Demo</title>
<meta name="color-scheme" content="light dark">
</head>
<body>
<h1><code><relative-time></code></h1>
<p>These times will update every 10 minutes and every time you refocus this window/tab.</p>
<h2 id="general">General usage example</h2>
<p>
<relative-time update="false"><time class="yesterday" datetime="2024-05-08T17:40:26+0800">11 April 2024</time></relative-time>
</p>
<p>
<relative-time><time class="past" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time>
</p>
<p>
<relative-time><time class="future" datetime="2024-05-08T17:40:26+0800">11 April 2024</time></relative-time>
</p>
<p>
<relative-time update="false"><time class="tomorrow" datetime="2024-05-08T17:40:26+0800">11 April 2024</time></relative-time>
</p>
<h2 id="explicit-locale">Explicit locale</h2>
<p>
<relative-time lang="fr"><time class="past" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(Français / French)</em>
</p>
<h2 id="inherited-locale">Inherited locale</h2>
<p lang="de">
<relative-time><time class="past" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(Deutsch / German)</em>
</p>
<h2 id="update">Update frequency</h2>
<p>
<relative-time update="3"><time class="past" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(updates every 3 seconds)</em>
</p>
<p>
<relative-time update="1">from <time class="past-further" datetime="2024-04-09T12:00:00+0800">9 April 2024</time> until <time class="future" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(updates every second)</em>
</p>
<p>
<relative-time update="false"><time class="past" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(never updates)</em>
</p>
<h2 id="division">Specific division</h2>
<p>
<relative-time division="seconds"><time class="tomorrow" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(seconds)</em>
</p>
<h2 id="max-division">Maximum division</h2>
<p>
<relative-time max-division="minutes"><time class="tomorrow" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(minutes)</em>
</p>
<h2 id="numeric-format">Numeric format</h2>
<p>
<relative-time format-numeric="always"><time class="tomorrow" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(always)</em>
</p>
<p>
<relative-time update="false" format-numeric="auto"><time class="tomorrow" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(auto)</em>
</p>
<h2 id="style-format">Style format</h2>
<p>
<relative-time format-style="long"><time class="future" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(long)</em>
</p>
<p>
<relative-time format-style="short"><time class="future" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(short)</em>
</p>
<p>
<relative-time format-style="narrow"><time class="future" datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time> <em>(narrow)</em>
</p>
<h2 id="invalid">Invalid DateTimes</h2>
<p>
<relative-time><time id="inv" datetime="invalid">This text should not be replaced!</time></relative-time>
</p>
<script>
const nowEpoch = Date.now()
const past = new Date(nowEpoch - (10 * 1000)).toISOString()
const timePastElements = document.querySelectorAll(".past")
timePastElements.forEach((element) => {
element.setAttribute("datetime", past)
})
const pastFurther = new Date(nowEpoch - (60 * 1000)).toISOString()
const timePastFurtherElements = document.querySelectorAll(".past-further")
timePastFurtherElements.forEach((element) => {
element.setAttribute("datetime", pastFurther)
})
const future = new Date(nowEpoch + (10 * 1000)).toISOString()
const timeFutureElements = document.querySelectorAll(".future")
timeFutureElements.forEach((element) => {
element.setAttribute("datetime", future)
})
const yesterday = new Date(nowEpoch - (60 * 60 * 24 * 1000)).toISOString()
const timeYesterdayElements = document.querySelectorAll(".yesterday")
timeYesterdayElements.forEach((element) => {
element.setAttribute("datetime", yesterday)
})
const tomorrow = new Date(nowEpoch + (60 * 60 * 24 * 1000) + (10 * 1000)).toISOString()
const timeTomorrowElements = document.querySelectorAll(".tomorrow")
timeTomorrowElements.forEach((element) => {
element.setAttribute("datetime", tomorrow)
})
</script>
<script type="module" src="relative-time.js" defer></script>
</body>
</html>