diff --git a/assets/audio/KARATE KID - TOXIC (ILLFD022).wav b/assets/audio/KARATE KID - TOXIC (ILLFD022).wav new file mode 100644 index 0000000..df47081 Binary files /dev/null and b/assets/audio/KARATE KID - TOXIC (ILLFD022).wav differ diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..d6151f9 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,4 @@ +main { + margin: auto; + width: 50rem; +} diff --git a/assets/images/doge.jpg b/assets/images/doge.jpg new file mode 100644 index 0000000..7e8ab67 Binary files /dev/null and b/assets/images/doge.jpg differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..c9ad5a0 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1 @@ +import '../../components/audioPlayer/audioPlayer.js'; \ No newline at end of file diff --git a/components/audioPlayer/audioPlayer.js b/components/audioPlayer/audioPlayer.js new file mode 100644 index 0000000..ae88e5d --- /dev/null +++ b/components/audioPlayer/audioPlayer.js @@ -0,0 +1,73 @@ +const template = document.createElement('template'); + +template.innerHTML = ` + + +
+
+ +
+

Title

+

Description

+
+
+ +
+` + +class AudioPlayer extends HTMLElement { + constructor() { + super(); + + this._shadowRoot = this.attachShadow({ 'mode': 'open' }); + this._shadowRoot.appendChild(template.content.cloneNode(true)); + this.$audioPlayer = this._shadowRoot.querySelector('#audioPlayerContainer'); + } + + static get observedAttributes() { + return ['audio', 'cover', 'cover_alt', 'title', 'description']; + } + + attributeChangedCallback(name, oldVal, newVal) { + if (oldVal != newVal) { + this[name] = newVal; + this.render(); + } + } + + 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; + } +} + +window.customElements.define('audio-player', AudioPlayer); diff --git a/index.html b/index.html new file mode 100644 index 0000000..7a41451 --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + + +
+

Nathan's Web Components

+

A bunch of web components for my own convenience.

+

Audio Player

+ A handy audio player widget. Title is an H3. + +
+ +