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"; import { TrackInfo } from "../client";
export class TitleText extends HTMLElement { export class TrackName extends HTMLElement {
title: string; container: HTMLElement;
constructor(title: string) { static get observedAttributes() {
return ["name"];
}
constructor() {
super(); 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() { connectedCallback() {
const container = document.createElement("div"); this.appendChild(this.container);
container.appendChild(document.createTextNode(this.title));
this.appendChild(container);
} }
} }
@ -97,7 +115,15 @@ export class TrackCard extends HTMLElement {
this.appendChild(container); 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["length"] && container.appendChild(document.createTextNode("1:23"));
this["album"] && this["album"] &&
container.appendChild(document.createTextNode("Shatter Me")); container.appendChild(document.createTextNode("Shatter Me"));

View File

@ -1,12 +1,13 @@
import * as _ from "lodash"; import * as _ from "lodash";
import { TrackInfo, getTracks } from "./client"; 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); window.customElements.define("track-card", TrackCard);
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"track-name": TrackName;
"track-card": TrackCard; "track-card": TrackCard;
} }
} }