diff --git a/examples/basket/basketStorage.js b/examples/basket/basketStorage.js new file mode 100644 index 0000000..d6a44fe --- /dev/null +++ b/examples/basket/basketStorage.js @@ -0,0 +1,27 @@ +/** + * This singleton EventEmitter can be used throughout your application to handle custom events. + */ +export class BasketStorage extends EventTarget { + items = [] + static instance + + static getInstance() { + if (!BasketStorage.instance) { + BasketStorage.instance = new BasketStorage(); + } + return BasketStorage.instance; + } + + addItem(item) { + this.items = [...this.items, item] + this.dispatchEvent(new CustomEvent("updated", { detail: { item } })) + } + getItems() { + return this.items + } +} + +const basketStorage = BasketStorage.getInstance(); +export default basketStorage + + diff --git a/examples/basket/index.html b/examples/basket/index.html new file mode 100644 index 0000000..85b15cc --- /dev/null +++ b/examples/basket/index.html @@ -0,0 +1,12 @@ + + + + + + WYSIWYG Editor + + + + + + diff --git a/examples/basket/main.js b/examples/basket/main.js new file mode 100644 index 0000000..25f7104 --- /dev/null +++ b/examples/basket/main.js @@ -0,0 +1,49 @@ +import { html, css, LitElement } from "https://cdn.jsdelivr.net/npm/lit@2/+esm"; +import basketStorage from './basketStorage.js' + +export class Basket extends LitElement { + static get properties() { + return { + items: { type: Array }, + }; + } + + constructor() { + super() + } + + connectedCallback() { + super.connectedCallback(); + basketStorage.addEventListener("updated", (i) => { + this.items = basketStorage.getItems() + }) + } + + submit(e) { + e.preventDefault() + + const searchNode = this.renderRoot.querySelector('#search') + if (searchNode) { + const v = searchNode.value + basketStorage.addItem(v) + } + searchNode.value = "" + } + + render() { + return html` +
+
+ + +
+
+ ${this.items ? html`${this.items.map(i => { + return html`
${i}
` + })}` : html`

No items

`} +
+
+ `; + } +} +customElements.define('app-basket', Basket);