From 5767d6274807f5c3b295d47af022e0fb46bfaf8a Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Wed, 1 Mar 2023 00:51:23 -0500 Subject: [PATCH] Properly set up the track card as an element --- music-player/client/src/blocks/track.ts | 100 ++++++++++++++++++++++-- music-player/client/src/main.ts | 54 +++---------- music-player/client/styles.css | 13 +++ 3 files changed, 116 insertions(+), 51 deletions(-) diff --git a/music-player/client/src/blocks/track.ts b/music-player/client/src/blocks/track.ts index 0f65d15..af66447 100644 --- a/music-player/client/src/blocks/track.ts +++ b/music-player/client/src/blocks/track.ts @@ -1,23 +1,107 @@ import { TrackInfo } from "../client"; -export class TrackCard extends HTMLElement { - track_info: TrackInfo; +export class TitleText extends HTMLElement { + title: string; - constructor(info: TrackInfo) { + constructor(title: string) { super(); - this.track_info = info; + this.title = title; } connectedCallback() { const container = document.createElement("div"); - container.classList.add("track-card"); + container.appendChild(document.createTextNode(this.title)); this.appendChild(container); + } +} - this.track_info.name && - container.appendChild(document.createTextNode(this.track_info.name)); +export class TrackCard extends HTMLElement { + static get observedAttributes() { + return ["id", "trackNumber", "name", "album", "artist"]; + } + + constructor() { + super(); + } + + attributeChangeCallback( + attrName: string, + oldValue: string, + newValue: string + ): void { + if (newValue !== oldValue) { + this.updateContent(); + } + } + + get name(): string | null { + return this.getAttribute("name"); + } + + set name(name: string | null) { + if (name) { + this.setAttribute("name", name); + } else { + this.removeAttribute("open"); + } + this.updateContent(); + } + + get artist(): string | null { + return this.getAttribute("artist"); + } + + set artist(artist: string | null) { + if (artist) { + this.setAttribute("artist", artist); + } else { + this.removeAttribute("open"); + } + this.updateContent(); + } + + get album(): string | null { + return this.getAttribute("album"); + } + + set album(album: string | null) { + if (album) { + this.setAttribute("album", album); + } else { + this.removeAttribute("open"); + } + this.updateContent(); + } + + get length(): string | null { + return this.getAttribute("length"); + } + + set length(length: string | null) { + if (length) { + this.setAttribute("length", length); + } else { + this.removeAttribute("open"); + } + this.updateContent(); + } + + connectedCallback() { + this.updateContent(); } updateContent() { - console.log("updateContent"); + const container = document.createElement("div"); + container.classList.add("track-card"); + this.innerHTML = ""; + + this.appendChild(container); + + this["name"] && container.appendChild(new TitleText(this.name)); + this["length"] && container.appendChild(document.createTextNode("1:23")); + this["album"] && + container.appendChild(document.createTextNode("Shatter Me")); + this["artist"] && + container.appendChild(document.createTextNode("Lindsey Stirling")); } } diff --git a/music-player/client/src/main.ts b/music-player/client/src/main.ts index a118ba7..e0be140 100644 --- a/music-player/client/src/main.ts +++ b/music-player/client/src/main.ts @@ -1,9 +1,16 @@ import * as _ from "lodash"; import { TrackInfo, getTracks } from "./client"; -import { TrackCard } from "./blocks/track"; +import { TitleText, TrackCard } from "./blocks/track"; +window.customElements.define("title-text", TitleText); window.customElements.define("track-card", TrackCard); +declare global { + interface HTMLElementTagNameMap { + "track-card": TrackCard; + } +} + const replaceTitle = () => { const title = document.querySelector(".js-title"); if (title && title.innerHTML) { @@ -11,52 +18,13 @@ const replaceTitle = () => { } }; -/* -const formatTrack = (track: TrackInfo) => { - let row = document.createElement("tr"); - row.classList.add("track-list__row"); - - let track_id = document.createElement("td"); - track_id.appendChild(document.createTextNode(track.id)); - track_id.classList.add("track-list__cell"); - - let track_number = document.createElement("td"); - track_number.appendChild( - document.createTextNode(track.track_number?.toString() || "") - ); - track_number.classList.add("track-list__cell"); - - let name = document.createElement("td"); - name.appendChild(document.createTextNode(track.name || "")); - name.classList.add("track-list__cell"); - - let album = document.createElement("td"); - album.appendChild(document.createTextNode(track.album || "")); - album.classList.add("track-list__cell"); - - let artist = document.createElement("td"); - artist.appendChild(document.createTextNode(track.artist || "")); - artist.classList.add("track-list__cell"); - - let length = document.createElement("td"); - artist.appendChild(document.createTextNode("")); - length.classList.add("track-list__cell"); - - row.appendChild(track_id); - row.appendChild(track_number); - row.appendChild(name); - row.appendChild(artist); - row.appendChild(album); - row.appendChild(length); - return row; -}; -*/ - const updateTrackList = (tracks: TrackInfo[]) => { const track_list = document.querySelector(".track-list__tracks"); if (track_list) { let track_formats = _.map(tracks, (info) => { - return new TrackCard(info); + let card: TrackCard = document.createElement("track-card"); + card.name = info.name || null; + return card; }); _.map(track_formats, (trackCard) => { let listItem = document.createElement("li"); diff --git a/music-player/client/styles.css b/music-player/client/styles.css index 0837335..d953d3d 100644 --- a/music-player/client/styles.css +++ b/music-player/client/styles.css @@ -46,3 +46,16 @@ body { width: 300px; height: 100px; } + +.track-card__name { +} + +.track-card__length { +} + +.track-card__album { +} + +.track-card__artist { +} +