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
2 changed files with 37 additions and 10 deletions
Showing only changes of commit 02257db921 - Show all commits

View File

@ -1,17 +1,35 @@
import { TrackInfo } from "../client";
export class TitleText extends HTMLElement {
title: string;
export class TrackName extends HTMLElement {
container: HTMLElement;
constructor(title: string) {
static get observedAttributes() {
return ["name"];
}
constructor() {
super();
this.title = title;
this.container = document.createElement("div");
}
get name(): string | null {
return this.getAttribute("name");
}
set name(name: string | null) {
while (this.container.lastChild) {
this.container.removeChild(this.container.lastChild);
}
if (name) {
this.setAttribute("name", name);
this.container.appendChild(document.createTextNode(name));
} else {
this.removeAttribute("name");
}
}
connectedCallback() {
const container = document.createElement("div");
container.appendChild(document.createTextNode(this.title));
this.appendChild(container);
this.appendChild(this.container);
}
}
@ -97,7 +115,15 @@ export class TrackCard extends HTMLElement {
this.appendChild(container);
this["name"] && container.appendChild(new TitleText(this.name));
while (container.lastChild) {
container.removeChild(container.lastChild);
}
if (this["name"]) {
const trackName = document.createElement("track-name");
trackName.name = this["name"];
container.appendChild(trackName);
}
this["length"] && container.appendChild(document.createTextNode("1:23"));
this["album"] &&
container.appendChild(document.createTextNode("Shatter Me"));

View File

@ -1,12 +1,13 @@
import * as _ from "lodash";
import { TrackInfo, getTracks } from "./client";
import { TitleText, TrackCard } from "./blocks/track";
import { TrackName, TrackCard } from "./blocks/track";
window.customElements.define("title-text", TitleText);
window.customElements.define("track-name", TrackName);
window.customElements.define("track-card", TrackCard);
declare global {
interface HTMLElementTagNameMap {
"track-name": TrackName;
"track-card": TrackCard;
}
}