From 0d08e25c6b0c56bd6a063eb16a31980af7fead4f Mon Sep 17 00:00:00 2001 From: Mu-An Chiou Date: Thu, 7 Nov 2019 17:44:51 -0500 Subject: [PATCH 1/4] Add test for title getting updated on attribute change --- test/title-format.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/test/title-format.js b/test/title-format.js index 46165d8..0398369 100644 --- a/test/title-format.js +++ b/test/title-format.js @@ -28,6 +28,14 @@ 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/) + }) + test('set the title attribute when parsed element is upgraded', function() { const root = document.createElement('div') root.innerHTML = '' From e763503ce57465f7f469f1a6642ea9dd581cb53e Mon Sep 17 00:00:00 2001 From: Mu-An Chiou Date: Thu, 7 Nov 2019 17:45:23 -0500 Subject: [PATCH 2/4] Remember title state for updates If title has ever been set, update the title as datetime changes --- src/extended-time-element.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/extended-time-element.js b/src/extended-time-element.js index 5cd4da7..8699ef9 100644 --- a/src/extended-time-element.js +++ b/src/extended-time-element.js @@ -3,6 +3,7 @@ import {makeFormatter} from './utils' const datetimes = new WeakMap() +const titles = new WeakMap() export default class ExtendedTimeElement extends HTMLElement { static get observedAttributes() { @@ -11,8 +12,9 @@ export default class ExtendedTimeElement extends HTMLElement { connectedCallback() { const title = this.getFormattedTitle() - if (title && !this.hasAttribute('title')) { + if (title && (!this.hasAttribute('title') || titles.get(this))) { this.setAttribute('title', title) + titles.set(this, true) } const text = this.getFormattedDate() @@ -32,8 +34,9 @@ export default class ExtendedTimeElement extends HTMLElement { } } const title = this.getFormattedTitle() - if (title && !this.hasAttribute('title')) { + if (title && (!this.hasAttribute('title') || titles.get(this))) { this.setAttribute('title', title) + titles.set(this, true) } const text = this.getFormattedDate() From 7e1ebdd1618e274e04be576dd254ae16a82d62ad Mon Sep 17 00:00:00 2001 From: Mu-An Chiou Date: Fri, 8 Nov 2019 12:54:11 -0500 Subject: [PATCH 3/4] Add a test to ensure custom title does not get modified --- test/title-format.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/title-format.js b/test/title-format.js index 0398369..08d6fe8 100644 --- a/test/title-format.js +++ b/test/title-format.js @@ -34,6 +34,9 @@ suite('title-format', function() { 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() { From 6fd2336eb99e068ab6f1850bded6944dffd146d6 Mon Sep 17 00:00:00 2001 From: Mu-An Chiou Date: Fri, 8 Nov 2019 12:59:54 -0500 Subject: [PATCH 4/4] Fix title getting updated when custom title was set after initialization --- src/extended-time-element.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/extended-time-element.js b/src/extended-time-element.js index 8699ef9..7086015 100644 --- a/src/extended-time-element.js +++ b/src/extended-time-element.js @@ -3,7 +3,6 @@ import {makeFormatter} from './utils' const datetimes = new WeakMap() -const titles = new WeakMap() export default class ExtendedTimeElement extends HTMLElement { static get observedAttributes() { @@ -12,9 +11,8 @@ export default class ExtendedTimeElement extends HTMLElement { connectedCallback() { const title = this.getFormattedTitle() - if (title && (!this.hasAttribute('title') || titles.get(this))) { + if (title && !this.hasAttribute('title')) { this.setAttribute('title', title) - titles.set(this, true) } const text = this.getFormattedDate() @@ -25,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)) { @@ -33,10 +32,11 @@ export default class ExtendedTimeElement extends HTMLElement { datetimes.set(this, new Date(millis)) } } + const title = this.getFormattedTitle() - if (title && (!this.hasAttribute('title') || titles.get(this))) { + const currentTitle = this.getAttribute('title') + if (title && (!currentTitle || currentTitle === oldTitle)) { this.setAttribute('title', title) - titles.set(this, true) } const text = this.getFormattedDate()