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