From 2c684af29f61555fce48e67993a865e4ba091698 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 18 Mär 2024 16:20:00 +0100
Subject: [PATCH] add examples for event handling in web components
---
templates/009-web-components/event-handling.js | 47 +++++++++++++++++++++++
templates/009-web-components/tab-component.html | 16 ++++++++
templates/009-web-components/tab-component.js | 21 ++++++++++
templates/009-web-components/event-handling.html | 20 ++++++++++
4 files changed, 104 insertions(+), 0 deletions(-)
diff --git a/templates/009-web-components/event-handling.html b/templates/009-web-components/event-handling.html
new file mode 100644
index 0000000..14d5b8c
--- /dev/null
+++ b/templates/009-web-components/event-handling.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Event Handling</title>
+ <script defer src="event-handling.js"></script>
+ </head>
+ <body>
+ <custom-a></custom-a>
+ <custom-b></custom-b>
+ <script>
+ document.querySelector("custom-a").addEventListener("customevent", (event) => {
+ alert("custom event a!");
+ });
+ document.querySelector("custom-b").addEventListener("customevent", (event) => {
+ alert("custom event b!");
+ });
+ </script>
+ </body>
+</html>
diff --git a/templates/009-web-components/event-handling.js b/templates/009-web-components/event-handling.js
new file mode 100644
index 0000000..9fc3d51
--- /dev/null
+++ b/templates/009-web-components/event-handling.js
@@ -0,0 +1,47 @@
+class CustomA extends HTMLElement {
+ constructor() {
+ super();
+
+ this.root = this.attachShadow({mode: "open"});
+
+ this.root.innerHTML = `
+ <button>Click Me!</button>
+ `;
+ }
+
+ connectedCallback() {
+ const button = this.root.querySelector("button");
+
+ button.addEventListener("click", () =>{
+ const event = new CustomEvent("customevent", { bubbles: true, composed: true});
+
+ button.dispatchEvent(event);
+ });
+ }
+}
+
+window.customElements.define("custom-a", CustomA);
+
+class CustomB extends HTMLElement {
+ constructor() {
+ super();
+
+ this.root = this.attachShadow({mode: "open"});
+
+ this.root.innerHTML = `
+ <button>Click Me!</button>
+ `;
+ }
+
+ connectedCallback() {
+ const button = this.root.querySelector("button");
+
+ button.addEventListener("click", () =>{
+ const event = new CustomEvent("customevent", { bubbles: true});
+
+ button.dispatchEvent(event);
+ });
+ }
+}
+
+window.customElements.define("custom-b", CustomB);
diff --git a/templates/009-web-components/tab-component.html b/templates/009-web-components/tab-component.html
new file mode 100644
index 0000000..ceb7a92
--- /dev/null
+++ b/templates/009-web-components/tab-component.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Tab Component</title>
+ <script defer src="tab-component.js"></script>
+ </head>
+ <body>
+ <tab-component>
+ <span slot="tab" tab-id="tab-a">Tab A</span>
+ <span slot="tab" tab-id="tab-b">Tab B</span>
+ <div slot="content" tab-id="tab-a">Passender Text zu Tab A!</div>
+ <div slot="content" tab-id="tab-b">Ein anderer Text zu Tab B!</div>
+ </tab-component>
+ </body>
+</html>
diff --git a/templates/009-web-components/tab-component.js b/templates/009-web-components/tab-component.js
new file mode 100644
index 0000000..e4cba54
--- /dev/null
+++ b/templates/009-web-components/tab-component.js
@@ -0,0 +1,21 @@
+class TabComponent extends HTMLElement {
+ constructor() {
+ super();
+
+ this.root = this.attachShadow({mode: "open"});
+
+ this.root.innerHTML = `
+ <style>
+ /* CSS here */
+ </style>
+
+ <!-- HTML here -->
+ `;
+ }
+
+ connectedCallback() {
+ /* Code here */
+ }
+}
+
+window.customElements.define("tab-component", CustomA);
--
Gitblit v1.9.3