Skip to content

Commit 16d9dad

Browse files
authored
chore: setup component
1 parent eff3fda commit 16d9dad

File tree

5 files changed

+58
-16
lines changed

5 files changed

+58
-16
lines changed

.eslintrc.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
22
"root": true,
3-
"extends": ["plugin:github/browser", "plugin:github/recommended", "plugin:github/typescript"],
3+
"extends": [
4+
"plugin:github/browser",
5+
"plugin:github/recommended",
6+
"plugin:github/typescript"
7+
],
48
"globals": {
59
"ExampleElement": "readonly"
610
},

.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"editor.codeActionsOnSave": {
3-
"source.fixAll": "explicit"
3+
"source.fixAll": "explicit"
44
}
55
}

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
# Template Custom Element
1+
# HTMX Toasts Element
22

3-
[![Node CI](https://github.com/ZEISS/template-element/actions/workflows/main.yml/badge.svg)](https://github.com/ZEISS/template-element/actions/workflows/main.yml)
3+
[![Node CI](https://github.com/ZEISS/htmx-toasts/actions/workflows/main.yml/badge.svg)](https://github.com/ZEISS/htmx-toasts/actions/workflows/main.yml)
44
[![Taylor Swift](https://img.shields.io/badge/secured%20by-taylor%20swift-brightgreen.svg)](https://twitter.com/SwiftOnSecurity)
55
[![Volkswagen](https://auchenberg.github.io/volkswagen/volkswargen_ci.svg?v=1)](https://github.com/auchenberg/volkswagen)
6-
[![GitHub License](https://img.shields.io/github/license/zeiss/template-element)]
6+
[![GitHub License](https://img.shields.io/github/license/zeiss/htmx-toasts)]
77

8-
This is a template for creating a custom element using the [Web Component API](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
8+
This is a simple HTMX element that can be used to display toasts in your web application.
99

1010
## License
1111

src/index.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {fixture, html} from '@open-wc/testing-helpers'
2-
import {ExampleElement} from './index'
2+
import {HTMXToastsElement} from './index'
33
import {describe, it, expect, beforeEach} from 'vitest'
44

55
describe('example-element', () => {
6-
let element: ExampleElement
6+
let element: HTMXToastsElement
77

88
beforeEach(async () => {
9-
element = await fixture(html`<example-element></example-element>`)
9+
element = await fixture(html`<htmx-toasts></htmx-toasts>`)
1010
})
1111

1212
it('should render the element', () => {

src/index.ts

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,63 @@ export {}
22

33
declare global {
44
interface Window {
5-
ExampleElement: typeof ExampleElement
5+
HTMXToastsElement: typeof HTMXToastsElement
66
}
77
interface HTMLElementTagNameMap {
8-
'example-element': ExampleElement
8+
'htmx-toasts': HTMXToastsElement
99
}
1010
}
1111

12-
export class ExampleElement extends HTMLElement {
12+
type Level = 'info' | 'warn' | 'error'
13+
type Code = number
14+
type Message = string
15+
16+
type Notify = {
17+
message: Message
18+
level: Level
19+
code: Code
20+
}
21+
22+
type Notification = {
23+
id: number
24+
message: Message
25+
level: Level
26+
code: Code
27+
}
28+
29+
export class HTMXToastsElement extends HTMLElement {
1330
constructor() {
1431
super()
1532
}
1633

17-
connectedCallback() {
18-
this.textContent = 'Hello, World!'
34+
notifications = new Array<Notification>()
35+
36+
connectedCallback(): void {
37+
window.addEventListener('htmx-toasts:notify', ((e: CustomEvent<Notify>) => this._handleNotify(e)) as EventListener)
38+
}
39+
40+
private _handleNotify(e: CustomEvent<Notify>): void {
41+
const notifcation = {id: e.timeStamp, ...e.detail}
42+
this.notifications.push(notifcation)
43+
setTimeout(() => this._remove(notifcation), 3000)
44+
// this.requestUpdate();
45+
}
46+
47+
private _remove(n: Notification): void {
48+
this.notifications = this.notifications.filter(i => i.id !== n.id)
49+
}
50+
51+
disconnectedCallback(): void {
52+
window.removeEventListener('htmx-toasts:notify', ((e: CustomEvent<Notify>) =>
53+
this._handleNotify(e)) as EventListener)
1954
}
2055
}
2156

22-
customElements.define('example-element', ExampleElement)
57+
if (!window.customElements.get('htmx-toasts')) {
58+
window.HTMXToastsElement = HTMXToastsElement
59+
window.customElements.define('htmx-toats', HTMXToastsElement)
60+
}
2361

2462
export const defineExampleElement = () => {
25-
customElements.define('example-element', ExampleElement)
63+
customElements.define('htmx-toasts', HTMXToastsElement)
2664
}

0 commit comments

Comments
 (0)