feat: allow web component to work on multiple time elements (good for…

… ranges made up of multiple time elements)
chrisburnell · Apr 12, 2024 · fa700f3 · fa700f3
1 parent b2ec0c0
commit fa700f3
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# `relative-time`
+# `<relative-time>`
 
 A Web Component to display an event countdown.
 
@@ -11,31 +11,7 @@ A Web Component to display an event countdown.
 ```html
 <script type="module" src="relative-time.js"></script>
 
-<relative-time name="My event" start="2024-04-09T00:00:00+14:00"></relative-time>
-```
-
-### With end point
-
-```html
-<script type="module" src="relative-time.js"></script>
-
-<relative-time name="My event" end="2024-04-09T23:59:59-12:00"></relative-time>
-```
-
-### Both start and end points
-
-```html
-<script type="module" src="relative-time.js"></script>
-
-<relative-time name="My event" start="2024-04-09T00:00:00+14:00" end="2024-04-09T23:59:59-12:00"></relative-time>
-```
-
-### Annual events
-
-```html
-<script type="module" src="relative-time.js"></script>
-
-<relative-time name="My event" start="2024-04-09T00:00:00+14:00"annual="true"></relative-time>
+<relative-time><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
 ```
 
 ### Update frequency
@@ -44,26 +20,26 @@ A Web Component to display an event countdown.
 <script type="module" src="relative-time.js"></script>
 
 <!-- Updates every 1 second -->
-<relative-time name="My event" start="2024-04-09T00:00:00+14:00" update="1"></relative-time>
+<relative-time update="1"><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
 
 <!-- Disable updates -->
-<relative-time name="My event" start="2024-04-09T00:00:00+14:00" update="false"></relative-time>
+<relative-time update="false"><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
 ```
 
 ### Specific division
 
 ```html
 <script type="module" src="relative-time.js"></script>
 
-<relative-time name="My event" start="2024-04-09T00:00:00+14:00" division="second"></relative-time>
+<relative-time division="second"><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
 ```
 
 ### Maximum division
 
 ```html
 <script type="module" src="relative-time.js"></script>
 
-<relative-time name="My event" start="2024-04-09T00:00:00+14:00" max-division="minute"></relative-time>
+<relative-time max-divions="minute"><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
 ```
 
 ## Installation

diff --git a/demo.html b/demo.html
@@ -18,17 +18,22 @@ <h2 id="annual">Update frequency</h2>
 		<p>
 			<relative-time update="1"><time datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time>
 		</p>
+		<p>
+			<relative-time update="1"><time id="past-further" datetime="2024-04-09T12:00:00+0800">9 April 2024</time> until <time datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time>
+		</p>
 		<p>
 			<relative-time update="false"><time datetime="2024-04-11T12:00:00+0800">11 April 2024</time></relative-time>
 		</p>
 		<script>
 			const nowEpoch = Date.now()
-			const past = new Date(nowEpoch - 1000).toISOString()
-			const timeElements = document.querySelectorAll("[datetime]")
+			const past = new Date(nowEpoch - (1 * 1000)).toISOString()
+			const pastFurther = new Date(nowEpoch - (10 * 1000)).toISOString()
+			const timeElements = document.querySelectorAll("[datetime]:not(#past-further)")
 			const timeElementsArray = [...timeElements]
 			timeElementsArray.forEach((element) => {
 				element.setAttribute("datetime", past)
 			})
+			document.getElementById("past-further").setAttribute("datetime", pastFurther)
 		</script>
 		<script type="module" src="relative-time.js" defer></script>
 	</body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chrisburnell/relative-time",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A Web Component to display a relative time.",
   "author": "Chris Burnell <me@chrisburnell.com>",
   "contributors": [

diff --git a/relative-time.js b/relative-time.js
@@ -45,8 +45,9 @@ class RelativeTime extends HTMLElement {
 	]
 
 	connectedCallback() {
-		if (!this.querySelector("time").hasAttribute("datetime")) {
-			console.error(`Missing \`datetime\` attribute on <time> element!`, this)
+		this.timeElements = [...this.querySelectorAll("time[datetime]")]
+
+		if (this.timeElements.length === 0) {
 			return
 		}
 
@@ -60,8 +61,6 @@ class RelativeTime extends HTMLElement {
 	init() {
 		this.initialized = true
 
-		this.timeElement = this.querySelector("time")
-		this.datetime = this.timeElement.hasAttribute("datetime") ? new Date(this.timeElement.getAttribute("datetime")) : null
 		this.update = this.hasAttribute("update") ? Number(this.getAttribute("update")) : 600 // 600 * 1000 = 10 minutes
 		this.enableUpdates = this.getAttribute("update") !== "false"
 		this.division = this.getAttribute("division")
@@ -99,8 +98,11 @@ class RelativeTime extends HTMLElement {
 	}
 
 	setString() {
-		this.timeElement.innerHTML = this.getRelativeTime(this.datetime, this.division)
-		this.timeElement.title = `${this.datetime.toLocaleString()} (local time)`
+		this.timeElements.forEach((element) => {
+			const datetime = new Date(element.getAttribute("datetime"))
+			element.innerHTML = this.getRelativeTime(datetime, this.division)
+			element.title = `${datetime.toLocaleString()} (local time)`
+		})
 	}
 
 	beginInterval() {