n_u/Web_Components
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

audio player title and description changed to slot

Browse Source
This commit is contained in:
Nathan Upchurch 2024-01-20 14:42:08 -06:00
parent abe4a52de4
commit 1675646179
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/audioPlayer/audioPlayer.js
View File

@ -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;
}
}

28
index.html
View File

@ -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>