Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds flag to optionally hide title attribute #283

Merged
merged 10 commits into from
May 30, 2024
Merged

Adds flag to optionally hide title attribute #283

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ce767cc
Adds flag to optionally hide title attribute
lindseywild May 29, 2024
fe78512
Update readme
lindseywild May 29, 2024
abc079e
Updates based on PR feedback to noTitle instead of hideTitle
lindseywild May 29, 2024
48c1c8e
Update README.md
lindseywild May 29, 2024
e281a47
Updates examples
lindseywild May 29, 2024
519d915
Updates to hasAttribute
lindseywild May 29, 2024
409d456
Updates docs
lindseywild May 29, 2024
f7a01aa
Uses toggleAttribute
lindseywild May 29, 2024
4f8eefb
Update src/relative-time-element.ts
lindseywild May 30, 2024
942896a
Update relative-time.js
lindseywild May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@ <h3>Format DateTime</h3>
</relative-time>
</p>

<p>
Hide title attribute:
<relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit" hide-title="true">
Jan 1 1970
</relative-time>
</p>

<p>
Customised options:
<relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" weekday="narrow" year="2-digit" month="narrow" day="numeric" hour="numeric" minute="2-digit" second="2-digit">
Expand Down Expand Up @@ -185,8 +192,8 @@ <h2>Localised Dates</h2>
</relative-time>
</p>

<!-- <script type="module" src="../dist/index.js"></script> -->
<script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
<script type="module" src="../dist/index.js"></script>
<!-- <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script> -->
<script>
document.body.addEventListener('relative-time-updated', event => {
console.log('event from', event.target, event)
Expand Down
7 changes: 6 additions & 1 deletion src/relative-time-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
'precision',
'format',
'format-style',
'hide-title',
lindseywild marked this conversation as resolved.
Show resolved Hide resolved
'datetime',
'lang',
'title',
Expand Down Expand Up @@ -382,6 +383,10 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
this.setAttribute('format-style', value)
}

get hideTitle(): boolean {
return this.getAttribute('hide-title') === 'true'
lindseywild marked this conversation as resolved.
Show resolved Hide resolved
}

get datetime() {
return this.getAttribute('datetime') || ''
}
Expand Down Expand Up @@ -431,7 +436,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
return
}
const now = Date.now()
if (!this.#customTitle) {
if (!this.#customTitle && !this.hideTitle) {
newTitle = this.#getFormattedTitle(date) || ''
if (newTitle) this.setAttribute('title', newTitle)
}
Expand Down
16 changes: 16 additions & 0 deletions test/relative-time.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,22 @@ suite('relative-time', function () {
assert.equal(el.getAttribute('title'), text)
})

test('does not set title if hide-title=true', async () => {
const el = document.createElement('relative-time')
el.setAttribute('datetime', new Date().toISOString())
el.setAttribute('hide-title', true)
await Promise.resolve()
assert.equal(el.getAttribute('title'), null)
})

test('sets title if hide-title=false', async () => {
const el = document.createElement('relative-time')
el.setAttribute('datetime', new Date().toISOString())
el.setAttribute('hide-title', false)
await Promise.resolve()
assert.ok(el.getAttribute('title'))
})

test('shadowDOM reflects textContent with invalid date', async () => {
const el = document.createElement('relative-time')
el.textContent = 'A date string'
Expand Down
Loading