basketStorage

serikshaikamalov · Jul 3, 2024 · 46bee7a · 46bee7a
1 parent cea049d
commit 46bee7a
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 0 deletions.
diff --git a/examples/basket/basketStorage.js 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
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WYSIWYG Editor</title>    
+</head>
+<body>
+    <script type="module" src="./main.js"></script>
+    <app-basket></app-basket>
+</body>
+</html>
diff --git a/examples/basket/main.js 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`
+            <form @submit=${this.submit}>
+                <div>
+                    <input type="text" id="search"/>
+                    <button type="submit">Submit</button>
+                </div>
+                <div>
+                    ${this.items ? html`${this.items.map(i => {
+            return html`<div>${i}</div>`
+        })}` : html`<h2>No items</h2>`}
+                </div>
+            </form>
+        `;
+    }
+}
+customElements.define('app-basket', Basket);