Merge pull request #129 from github/title

Update title attribute when datetime attribute is changed

Author: muan

src/extended-time-element.js

@@ -23,6 +23,7 @@ export default class ExtendedTimeElement extends HTMLElement {
 
   // Internal: Refresh the time element's formatted date when an attribute changes.
   attributeChangedCallback(attrName: string, oldValue: string, newValue: string) {
+    const oldTitle = this.getFormattedTitle()
     if (attrName === 'datetime') {
       const millis = Date.parse(newValue)
       if (isNaN(millis)) {
@@ -31,8 +32,10 @@ export default class ExtendedTimeElement extends HTMLElement {
         datetimes.set(this, new Date(millis))
       }
     }
+
     const title = this.getFormattedTitle()
-    if (title && !this.hasAttribute('title')) {
+    const currentTitle = this.getAttribute('title')
+    if (title && (!currentTitle || currentTitle === oldTitle)) {
       this.setAttribute('title', title)
     }
 

test/title-format.js

@@ -28,6 +28,17 @@ suite('title-format', function() {
     assert.match(time.getAttribute('title'), /\d{4}/)
   })
 
+  test('update the title attribute after a datetime value change', function() {
+    const time = document.createElement('local-time')
+    time.setAttribute('datetime', '1970-05-01T00:00:00.000Z')
+    assert.match(time.getAttribute('title'), /1970/)
+    time.setAttribute('datetime', '1979-05-01T00:00:00.000Z')
+    assert.match(time.getAttribute('title'), /1979/)
+    time.setAttribute('title', 'custom title')
+    time.setAttribute('datetime', '1989-05-01T00:00:00.000Z')
+    assert.match(time.getAttribute('title'), /custom title/)
+  })
+
   test('set the title attribute when parsed element is upgraded', function() {
     const root = document.createElement('div')
     root.innerHTML = '<local-time datetime="1970-01-01T00:00:00.000Z"></local-time>'