Skip to content

Commit e2b5c26

Browse files
ArchitrixsArchitrixs
committed
add format attributes
1 parent e41bef0 commit e2b5c26

File tree

5 files changed

+127
-54
lines changed

5 files changed

+127
-54
lines changed

‎.eslintrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"custom-elements/tag-name-matches-class": ["error", {"suffix": "Element"}]
1313
},
1414
"globals": {
15-
"CustomElementElement": "readonly"
15+
"DateTimeElement": "readonly"
1616
}
1717
}

‎custom-elements.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44
"modules": [
55
{
66
"kind": "javascript-module",
7-
"path": "src/custom-element.ts",
7+
"path": "src/date-time.ts",
88
"declarations": [
99
{
1010
"kind": "class",
11-
"description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<custom-element></custom-element>\n```",
12-
"name": "CustomElementElement",
11+
"description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<date-time></date-time>\n```",
12+
"name": "DateTimeElement",
1313
"superclass": {
1414
"name": "HTMLElement"
1515
},
16-
"tagName": "custom-element",
16+
"tagName": "date-time",
1717
"customElement": true
1818
}
1919
],
@@ -22,16 +22,16 @@
2222
"kind": "js",
2323
"name": "default",
2424
"declaration": {
25-
"name": "CustomElementElement",
26-
"module": "src/custom-element.ts"
25+
"name": "DateTimeElement",
26+
"module": "src/date-time.ts"
2727
}
2828
},
2929
{
30-
"kind": "custom-element-definition",
31-
"name": "custom-element",
30+
"kind": "date-time-definition",
31+
"name": "date-time",
3232
"declaration": {
33-
"name": "CustomElementElement",
34-
"module": "src/custom-element.ts"
33+
"name": "DateTimeElement",
34+
"module": "src/date-time.ts"
3535
}
3636
}
3737
]

‎examples/index.html‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>date-time demo</title>
6-
</head>
7-
<body>
8-
<date-time></date-time>
9-
<hr />
10-
<date-time></date-time>
11-
<script type="module">
12-
// import 'https://unpkg.com/@github/date-time-boilerplate@latest/dist/date-time.js'
13-
import '../src/date-time.ts'
14-
</script>
15-
</body>
16-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>date-time demo</title>
7+
</head>
8+
9+
<body>
10+
<!-- description -->
11+
<h3>date-time custom element</h3>
12+
13+
<pre>
14+
&lt;date-time time-format="hm" date-format="dmy" culture='en-US'&gt;&lt;/date-time&gt;
15+
<date-time time-format="hm" date-format="dmy" culture='en-US'></date-time>
16+
</pre>
17+
<pre>
18+
&lt;date-time time-format="hm12" date-format="dmy" culture='hi-IN'&gt;&lt;/date-time&gt;
19+
<date-time time-format="hm12" date-format="dm" culture='hi-IN'></date-time>
20+
</pre>
21+
<pre>
22+
&lt;date-time&gt;&lt;/date-time&gt;
23+
<date-time ></date-time>
24+
</pre>
25+
<script type="module">
26+
// import 'https://unpkg.com/@github/date-time-boilerplate@latest/dist/date-time.js'
27+
import '../src/date-time.ts'
28+
</script>
29+
</body>
30+
31+
</html>

‎src/date-time.ts‎

Lines changed: 80 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,17 @@
1212
//customElements.define('current-time', DateTime);
1313

1414
// The class for the custom element
15-
export class DateTime extends HTMLElement {
15+
export class DateTimeElement extends HTMLElement {
1616
public shadowRoot: ShadowRoot;
1717
private dateElement: HTMLElement;
1818
private timeElement: HTMLElement;
19-
19+
private culture: string = 'en-US';
20+
private dateFormat: string = '';
21+
private timeFormat: string = '';
22+
// Observe the format attribute for changes
23+
static get observedAttributes(): string[] {
24+
return ['date-format', 'time-format', 'culture'];
25+
}
2026
constructor() {
2127
super();
2228

@@ -27,7 +33,15 @@ export class DateTime extends HTMLElement {
2733
const template = document.createElement('template');
2834
template.innerHTML = `
2935
<style>
30-
/* Style for the custom element */
36+
#time-container {
37+
display: flex;
38+
align-items: center;
39+
font-size: 1em;
40+
font-family: system-ui;
41+
}
42+
#date {
43+
margin-right: 1em;
44+
}
3145
</style>
3246
<div id="time-container">
3347
<!-- Display the current date and time -->
@@ -42,10 +56,65 @@ export class DateTime extends HTMLElement {
4256
this.timeElement = this.shadowRoot.querySelector('#time')!;
4357
}
4458

59+
// Update the element when the format attribute changes
60+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
61+
if ((name === 'date-format' || name === 'time-format') && newValue !== oldValue) {
62+
// Get the current values of the date-format and time-format attributes
63+
this.dateFormat = this.getAttribute('date-format') || '';
64+
this.timeFormat = this.getAttribute('time-format') || '';
65+
this.culture = this.getAttribute('culture') || 'en-US';
66+
// Update the formatted date and time values using the new formats
67+
this.updateFormattedDate(this.dateFormat);
68+
this.updateFormattedTime(this.timeFormat);
69+
70+
// Update the element every second
71+
setInterval(() => {
72+
this.updateFormattedDate(this.dateFormat);
73+
this.updateFormattedTime(this.timeFormat);
74+
}, 1000);
75+
}
76+
}
77+
78+
private updateFormattedTime(format: string): void {
79+
// Get the current time
80+
const now = new Date();
81+
82+
// Use the Intl.DateTimeFormat API to format the time
83+
const timeOptions = {
84+
hour: format.includes('h') ? 'numeric' : undefined,
85+
minute: format.includes('m') ? 'numeric' : undefined,
86+
second: format.includes('s') ? 'numeric' : undefined,
87+
hour12: format.includes('12') ? undefined : false
88+
} as const;
89+
const formattedTime = new Intl.DateTimeFormat(this.culture, timeOptions).format(now);
90+
91+
// Update the formatted time element with the formatted time
92+
this.timeElement.textContent = formattedTime;
93+
}
94+
95+
96+
private updateFormattedDate(format: string): void {
97+
// Get the current date
98+
const now = new Date();
99+
100+
// Use the Intl.DateTimeFormat API to format the date
101+
const dateOptions = {
102+
year: format.includes('y') ? 'numeric' : undefined,
103+
month: format.includes('m') ? 'numeric' : undefined,
104+
day: format.includes('d') ? 'numeric' : undefined,
105+
} as const;
106+
const formattedDate = new Intl.DateTimeFormat(this.culture, dateOptions).format(now);
107+
108+
// Update the formatted date element with the formatted date
109+
this.dateElement.textContent = formattedDate;
110+
}
111+
45112
// Lifecycle callback that is called when the element is inserted into the DOM
46113
connectedCallback() {
47-
this.updateTime();
48-
setInterval(() => this.updateTime(), 1000);
114+
if (this.dateFormat === '' && this.timeFormat === '') {
115+
this.updateTime();
116+
setInterval(() => this.updateTime(), 1000);
117+
}
49118
}
50119

51120
updateTime() {
@@ -54,5 +123,10 @@ export class DateTime extends HTMLElement {
54123
this.timeElement.textContent = now.toTimeString();
55124
}
56125
}
126+
declare global {
127+
interface Window {
128+
DateTimeElement: typeof DateTimeElement
129+
}
130+
}
57131
// Define the custom element
58-
customElements.define('date-time', DateTime);
132+
customElements.define('date-time', DateTimeElement);

‎test/test.ts‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,11 @@
11
import {assert, fixture, html} from '@open-wc/testing'
2-
import '../src/date-time'
2+
import { DateTimeElement } from '../src/date-time'
33

4-
describe('date-time', function () {
5-
describe('element creation', function () {
6-
it('creates from document.createElement', function () {
7-
const el = document.createElement('date-time')
8-
assert.equal('date-time', el.nodeName)
9-
})
10-
11-
it('creates from constructor', function () {
12-
const el = new window.CustomElementElement()
13-
assert.equal('date-time', el.nodeName)
14-
})
4+
// TODO: Add tests for your element
5+
describe('date-time', () => {
6+
describe('is defined', () => {
7+
const el = document.createElement('date-time')
8+
assert.instanceOf(el, DateTimeElement)
159
})
1610

17-
describe('after tree insertion', function () {
18-
beforeEach(async function () {
19-
await fixture(html` <date-time></date-time>`)
20-
})
21-
22-
it('initiates', function () {
23-
const ce = document.querySelector('date-time')
24-
assert.equal(ce?.textContent, ':wave:')
25-
})
26-
})
27-
})
11+
})

0 commit comments

Comments
 (0)