From 16756461795e83dbc56dfed3552279dedd98de9a Mon Sep 17 00:00:00 2001
From: Nathan Upchurch <nathan@upchur.ch>
Date: Sat, 20 Jan 2024 14:42:08 -0600
Subject: [PATCH] audio player title and description changed to slot

---
 components/audioPlayer/audioPlayer.js |  8 +++-----
 index.html                            | 28 ++++++++++++++++++++++++---
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/components/audioPlayer/audioPlayer.js b/components/audioPlayer/audioPlayer.js
index ae88e5d..254f48f 100644
--- a/components/audioPlayer/audioPlayer.js
+++ b/components/audioPlayer/audioPlayer.js
@@ -30,8 +30,8 @@ template.innerHTML = `
     <div id="audioDetailsContainer">
       <img src="" alt="">
       <div id="audioTextContainer">
-        <h3>Title</h3>
-        <p>Description</p>
+        <slot name="title"><h3>TITLE</h3></slot>
+        <slot name="description"><p>DESCRIPTION</p></slot>
       </div>
     </div>
     <audio controls>
@@ -51,7 +51,7 @@ class AudioPlayer extends HTMLElement {
   }
   
   static get observedAttributes() {
-    return ['audio', 'cover', 'cover_alt', 'title', 'description'];
+    return ['audio', 'cover', 'cover_alt'];
   }
   
   attributeChangedCallback(name, oldVal, newVal) {
@@ -64,8 +64,6 @@ class AudioPlayer extends HTMLElement {
   render() {
     this.cover ? this.$audioPlayer.querySelector('img').src = this.cover : null;
     this.cover_alt ? this.$audioPlayer.querySelector('img').alt = this.cover_alt : null;
-    this.title ? this.$audioPlayer.querySelector('div h3').innerHTML = this.title : null;
-    this.description ? this.$audioPlayer.querySelector('div p').innerHTML = this.description : null;
     this.audio ? this.$audioPlayer.querySelector('audio source').src = this.audio : null;
   }
 }
diff --git a/index.html b/index.html
index 7a41451..88d7ab6 100644
--- a/index.html
+++ b/index.html
@@ -9,13 +9,35 @@
             <h1>Nathan's Web Components</h1>
             <p>A bunch of web components for my own convenience.</p>
             <h2>Audio Player</h2>
-            A handy audio player widget. Title is an H3.
+            <p>A handy audio player widget.<br><br>Attributes:</p>
+            <ul>
+                <li>audio: a URI pointing to an audio file</li>
+                <li>cover: a URI pointing to a cover image</li>
+                <li>cover_alt: alt text for the cover image</li>
+            </ul>
+            <p>Slots:</p>
+            <ul>
+                <li>title: title for the audio file</li>
+                <li>description: a description of the audio file</li>
+            </ul>
+            <p>Example usage:</p>
+            <pre>
+                <code>
+&lt;audio-player
+cover=&quot;/assets/images/doge.jpg&quot;
+cover_alt=&quot;A snoozy doge!&quot;
+audio=&quot;assets/audio/KARATE KID - TOXIC (ILLFD022).wav&quot;&gt;
+    &lt;h3 slot=&quot;title&quot;&gt;Toxic - Britney Spears (Karate Kid Bootleg)&lt;/h3&gt;
+    &lt;p slot=&quot;description&quot;&gt;A massive DnB roller bootleg of a Britney Spears classic: &lt;em&gt;Toxic&lt;/em&gt;.&lt;/p&gt;
+&lt;/audio-player&gt;
+            </pre>
             <audio-player
-            title="Toxic - Britney Spears (Karate Kid Bootleg)"
-            description="A massive DnB roller bootleg of a Britney Spears classic: <em>Toxic</em>."
             cover="/assets/images/doge.jpg"
             cover_alt="A snoozy doge!"
             audio="assets/audio/KARATE KID - TOXIC (ILLFD022).wav">
+                <h3 slot="title">Toxic - Britney Spears (Karate Kid Bootleg)</h3>
+                <p slot="description">A massive DnB roller bootleg of a Britney Spears classic: <em>Toxic</em>.</p>
+            </audio-player>
         </main>
     </body>
 </html>