From 1838ab5ce4d049d6c113124b1969dfebc90b4163 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 10 Jun 2024 12:21:30 +0200
Subject: [PATCH] add solution for tab component event exercise

---
 index.html |   49 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 49 insertions(+), 0 deletions(-)

diff --git a/index.html b/index.html
index 9c88b13..72434b9 100644
--- a/index.html
+++ b/index.html
@@ -3918,6 +3918,55 @@
 						<h3>Aufgabe</h3>
 						<p>Entwickle eine Tab-Komponente (Vorlage "tab-componenmt.html"), welche beim Click auf einen Registerreite / Tab ein Event feuert, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p>
 					</section>
+					<section>
+						<h3>Lösung</h3>
+						<pre>
+							<code class="js" data-trim data-line-numbers>
+								this.root.innerHTML = `
+									&lt;style>
+										::slotted(div) {
+											display: none;
+										}
+						
+										::slotted(div.active) {
+											display: block;
+										}
+									&lt;/style>
+									
+									&lt;div>&lt;slot name="tab">&lt;/slot>&lt;/div>
+									&lt;div>&lt;slot name="content">&lt;/slot>&lt;/div>
+								`;
+							</code>
+						</pre>
+					</section>
+					<section>
+						<pre>
+							<code class="js" data-trim data-line-numbers>
+								connectedCallback() {
+									const firstContent = this.querySelector("div");
+							
+									firstContent.classList.add("active");
+							
+									this.addEventListener("click", (e) => {
+										if (e.target.tagName === "SPAN" && e.target.hasAttribute("tab-id")) {
+											const oldContent = this.querySelector("div.active");
+											const newContent = this.querySelector(`[tab-id="${e.target.getAttribute("tab-id")}"]`);
+							
+											oldContent.classList.remove("active");
+											newContent.classList.add("active");
+							
+											this.dispatchEvent(new CustomEvent("tabclick", {composed: true, bubbles: true, detail: e.target.getAttribute("tab-id"), cancelable: true}));
+										}
+									});
+								}
+							</code>
+						</pre>
+					</section>
+				</section>
+				<section>
+					<section>
+					
+					</section>
 				</section>
 			</div>
 		</div>

--
Gitblit v1.9.3