refactor example

ProjectEvergreen · May 26, 2024 · d6a8343 · d6a8343
1 parent 31b7dfc
commit d6a8343
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 17 deletions.
diff --git a/src/components/player.js b/src/components/player.js
@@ -1,21 +1,44 @@
 export default class Player extends HTMLElement {
+  constructor() {
+    super();
+
+    this.title = "";
+    this.playlist = [];
+  }
+
   async connectedCallback() {
-    console.log("conntected!");
-    const playlist = JSON.parse(this.getAttribute("playlist") || "[]");
-    const title = this.getAttribute("title") || "";
-    const list = playlist
-      .map((item) => {
-        return `<li>${item.title}</li>`;
-      })
-      .join("\n");
-    console.log({ playlist, title, list });
-
-    this.innerHTML = `
-      <h1>${title}</h1>
-      <ul style="text-align: left; width: 30%; margin:0 auto;">
-        ${list}
-      </ul>
-    `;
+    this.playlist = JSON.parse(this.getAttribute("playlist") || "[]");
+    this.title = this.getAttribute("name") || "";
+
+    if (!this.shadowRoot) {
+      this.playlist = JSON.parse(this.getAttribute("playlist") || "[]");
+      this.title = this.getAttribute("name") || "";
+      const list = this.playlist.map((item) => `<li>${item.title}</li>`).join("\n");
+      const template = document.createElement("template");
+
+      template.innerHTML = `
+        <div style="text-align: left; width: 30%; margin:0 auto;">
+          <h1>${this.title}</h1>
+          <ul>
+            ${list}
+          </ul>
+          <button>Start Playlist</button>
+        </div>
+      `;
+
+      this.attachShadow({ mode: "open" });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+
+    this.shadowRoot
+      .querySelector("button")
+      ?.addEventListener("click", this.startPlaylist.bind(this));
+  }
+
+  startPlaylist() {
+    const { title, playlist } = this;
+    console.log("starting playlist =>", { title, playlist });
+    alert(`starting playlist => ${title}`);
   }
 }
 

diff --git a/src/pages/playlist.html b/src/pages/playlist.html
@@ -24,7 +24,7 @@
   <body>
     <app-header></app-header>
     <h1>Welcome to the Player!</h1>
-    <app-player title="${globalThis.page.name}" playlist='${globalThis.page.songs}'></app-player>
+    <app-player name="${globalThis.page.name}" playlist='${globalThis.page.songs}'></app-player>
     <app-footer></app-footer>
   </body>
 </html>