Set up some basic web components and basically format a track card #25
|
@ -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"));
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue