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