Merge pull request #246 from github/add-onrelativetimeupdated-getter

keithamus · web-flow · commit cce31944efd4 · 2023-02-02T16:19:19.000Z
Add onrelativetimeupdated getter
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
@@ -1,4 +1,4 @@
-import {Duration, unitNames, Unit, isDuration, elapsedTime, roundToSingleUnit, getRelativeTimeUnit} from './duration.js'
+import {Duration, elapsedTime, getRelativeTimeUnit, isDuration, roundToSingleUnit, Unit, unitNames} from './duration.js'
 const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
 const HTMLElement = root.HTMLElement || (null as unknown as typeof window['HTMLElement'])
 
@@ -160,17 +160,24 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
       duration = empty
     }
     const display = `${this.precision}sDisplay`
-    if (duration.blank) return empty.toLocaleString(locale, {style, [display]: 'always'})
+    if (duration.blank) {
+      return empty.toLocaleString(locale, {style, [display]: 'always'})
+    }
     return duration.abs().toLocaleString(locale, {style})
   }
 
   #getRelativeFormat(duration: Duration): string {
-    const relativeFormat = new Intl.RelativeTimeFormat(this.#lang, {numeric: 'auto', style: this.formatStyle})
+    const relativeFormat = new Intl.RelativeTimeFormat(this.#lang, {
+      numeric: 'auto',
+      style: this.formatStyle,
+    })
     const tense = this.tense
     if (tense === 'future' && duration.sign !== 1) duration = emptyDuration
     if (tense === 'past' && duration.sign !== -1) duration = emptyDuration
     const [int, unit] = getRelativeTimeUnit(duration)
-    if (unit === 'second' && int < 10) return relativeFormat.format(0, 'second')
+    if (unit === 'second' && int < 10) {
+      return relativeFormat.format(0, 'second')
+    }
     return relativeFormat.format(int, unit)
   }
 
@@ -188,6 +195,24 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
     return `${this.prefix} ${formatter.format(date)}`.trim()
   }
 
+  #onRelativeTimeUpdated: ((event: RelativeTimeUpdatedEvent) => void) | null = null
+  get onRelativeTimeUpdated() {
+    return this.#onRelativeTimeUpdated
+  }
+
+  set onRelativeTimeUpdated(listener: ((event: RelativeTimeUpdatedEvent) => void) | null) {
+    if (this.#onRelativeTimeUpdated) {
+      this.removeEventListener(
+        'relative-time-updated',
+        this.#onRelativeTimeUpdated as unknown as EventListenerOrEventListenerObject,
+      )
+    }
+    this.#onRelativeTimeUpdated = typeof listener === 'object' || typeof listener === 'function' ? listener : null
+    if (typeof listener === 'function') {
+      this.addEventListener('relative-time-updated', listener as unknown as EventListenerOrEventListenerObject)
+    }
+  }
+
   get second() {
     const second = this.getAttribute('second')
     if (second === 'numeric' || second === '2-digit') return second
@@ -217,7 +242,9 @@ export default class RelativeTimeElement extends HTMLElement implements Intl.Dat
 
   get weekday() {
     const weekday = this.getAttribute('weekday')
-    if (weekday === 'long' || weekday === 'short' || weekday === 'narrow') return weekday
+    if (weekday === 'long' || weekday === 'short' || weekday === 'narrow') {
+      return weekday
+    }
     if (this.format === 'datetime' && weekday !== '') return this.formatStyle
   }
 
diff --git a/test/relative-time.js b/test/relative-time.js
@@ -1,5 +1,5 @@
 import {assert} from '@open-wc/testing'
-import {RelativeTimeElement} from '../src/index.ts'
+import {RelativeTimeElement, RelativeTimeUpdatedEvent} from '../src/index.ts'
 
 suite('relative-time', function () {
   let dateNow
@@ -733,6 +733,86 @@ suite('relative-time', function () {
     })
   })
 
+  suite('relative-time-updated event', () => {
+    test('dispatches a bubbling+composed relative-time-updated event on each update', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '1970-01-01T00:00:00.000-08:00')
+      let event
+      el.addEventListener('relative-time-updated', e => (event = e))
+      await Promise.resolve()
+      assert.instanceOf(event, RelativeTimeUpdatedEvent)
+      assert.propertyVal(event, 'composed', true)
+      assert.propertyVal(event, 'bubbles', true)
+    })
+
+    test('event contains oldText, newText, oldTitle, newTitle properties', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '1970-01-01T00:00:00.000-08:00')
+      let event
+      el.addEventListener('relative-time-updated', e => (event = e))
+      await Promise.resolve()
+      assert.propertyVal(event, 'oldText', '')
+      assert.propertyVal(event, 'newText', 'on Jan 1, 1970')
+      assert.propertyVal(event, 'oldTitle', '')
+      assert.propertyVal(event, 'newTitle', 'Jan 1, 1970, 12:00 PM GMT+4')
+      el.setAttribute('datetime', '1970-01-01T01:00:00.000-08:00')
+      await Promise.resolve()
+      assert.propertyVal(event, 'oldText', 'on Jan 1, 1970')
+      assert.propertyVal(event, 'newText', 'on Jan 1, 1970')
+      assert.propertyVal(event, 'oldTitle', 'Jan 1, 1970, 12:00 PM GMT+4')
+      assert.propertyVal(event, 'newTitle', 'Jan 1, 1970, 1:00 PM GMT+4')
+    })
+
+    test('allows binding of `onrelativetimeupdated` property', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '1970-01-01T00:00:00.000-08:00')
+      let event
+      el.onRelativeTimeUpdated = e => (event = e)
+      await Promise.resolve()
+      assert.instanceOf(event, RelativeTimeUpdatedEvent)
+    })
+
+    test('unbinds old `onRelativeTimeUpdated` property values', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '1970-01-01T00:00:00.000-08:00')
+      let called = false
+      const fn = () => (called = true)
+      el.onRelativeTimeUpdated = fn
+      assert.equal(el.onRelativeTimeUpdated, fn)
+      el.onRelativeTimeUpdated = null
+      assert.equal(el.onRelativeTimeUpdated, null)
+      await Promise.resolve()
+      assert.equal(called, false, 'onRelativeTimeUpdated was called but should not have been')
+    })
+
+    test('only binds function event listeners on `onRelativeTimeUpdated`', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '1970-01-01T00:00:00.000-08:00')
+      let called = false
+      const listenerObject = {
+        handleEvent() {
+          called = true
+        },
+      }
+      el.onRelativeTimeUpdated = listenerObject
+      assert.equal(el.onRelativeTimeUpdated, listenerObject)
+      await Promise.resolve()
+      assert.equal(called, false, 'onRelativeTimeUpdated was called but should not have been')
+    })
+
+    test('calling stopImmediatePropagation() effects onRelativeTimeUpdated property', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '1970-01-01T00:00:00.000-08:00')
+      let called = false
+      el.addEventListener('relative-time-updated', e => {
+        e.stopImmediatePropagation()
+      })
+      el.onRelativeTimeUpdated = () => (called = true)
+      await Promise.resolve()
+      assert.equal(called, false, 'onRelativeTimeUpdated was called but should not have been')
+    })
+  })
+
   suite('table tests', function () {
     const referenceDate = '2022-10-24T14:46:00.000Z'
     const tests = new Set([
