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 |   67 +++++++++++++++++++++++++++++----
 1 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 4e7cb28..72434b9 100644
--- a/index.html
+++ b/index.html
@@ -36,9 +36,16 @@
 						<ul>
 							<li>JavaScript</li>
 							<li>Responsive Design</li>
-							<li>NodeJS</li>
 							<li>WebComponents / lit</li>
+							<li>NodeJS</li>
 							<li>Datenbank</li>
+						</ul>
+					</section>
+					<section>
+						<h3>Betrieb</h3>
+						<ul>
+							<li>Server einrichten</li>
+							<li>SSL- / TLS-Zertifikate</li>
 						</ul>
 					</section>
 					<section>
@@ -66,13 +73,6 @@
 							<li>Progressive Web Application</li>
 							<li>CEF / Electron</li>
 							<li>WebAssembly</li>
-						</ul>
-					</section>
-					<section>
-						<h3>Betrieb</h3>
-						<ul>
-							<li>Server einrichten</li>
-							<li>SSL- / TLS-Zertifikate</li>
 						</ul>
 					</section>
 					<section>
@@ -3916,7 +3916,56 @@
 					</section>
 					<section>
 						<h3>Aufgabe</h3>
-						<p>Entwickle eine Tab-Komponente (Vorlage "tab-componenmt.html"), welche beim Click auf einen Registerreite / Tab ein Event feurt, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p>
+						<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>

--
Gitblit v1.9.3