Set up some basic web components and basically format a track card #25

Merged
savanni merged 4 commits from track-formatting into main 2023-03-01 14:20:59 +00:00
3 changed files with 116 additions and 51 deletions
Showing only changes of commit 5767d62748 - Show all commits

View File

@ -1,23 +1,107 @@
import { TrackInfo } from "../client"; import { TrackInfo } from "../client";
export class TrackCard extends HTMLElement { export class TitleText extends HTMLElement {
track_info: TrackInfo; title: string;
constructor(info: TrackInfo) { constructor(title: string) {
super(); super();
this.track_info = info; this.title = title;
} }
connectedCallback() { connectedCallback() {
const container = document.createElement("div"); const container = document.createElement("div");
container.classList.add("track-card"); container.appendChild(document.createTextNode(this.title));
this.appendChild(container); this.appendChild(container);
}
}
this.track_info.name && export class TrackCard extends HTMLElement {
container.appendChild(document.createTextNode(this.track_info.name)); 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() { 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"));
} }
} }

View File

@ -1,9 +1,16 @@
import * as _ from "lodash"; import * as _ from "lodash";
import { TrackInfo, getTracks } from "./client"; 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); window.customElements.define("track-card", TrackCard);
declare global {
interface HTMLElementTagNameMap {
"track-card": TrackCard;
}
}
const replaceTitle = () => { const replaceTitle = () => {
const title = document.querySelector(".js-title"); const title = document.querySelector(".js-title");
if (title && title.innerHTML) { 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 updateTrackList = (tracks: TrackInfo[]) => {
const track_list = document.querySelector(".track-list__tracks"); const track_list = document.querySelector(".track-list__tracks");
if (track_list) { if (track_list) {
let track_formats = _.map(tracks, (info) => { 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) => { _.map(track_formats, (trackCard) => {
let listItem = document.createElement("li"); let listItem = document.createElement("li");

View File

@ -46,3 +46,16 @@ body {
width: 300px; width: 300px;
height: 100px; height: 100px;
} }
.track-card__name {
}
.track-card__length {
}
.track-card__album {
}
.track-card__artist {
}