Set up some basic web components and basically format a track card #25
|
@ -1,23 +1,107 @@
|
|||
import { TrackInfo } from "../client";
|
||||
|
||||
export class TrackCard extends HTMLElement {
|
||||
track_info: TrackInfo;
|
||||
export class TitleText extends HTMLElement {
|
||||
title: string;
|
||||
|
||||
constructor(info: TrackInfo) {
|
||||
constructor(title: string) {
|
||||
super();
|
||||
this.track_info = info;
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const container = document.createElement("div");
|
||||
container.classList.add("track-card");
|
||||
container.appendChild(document.createTextNode(this.title));
|
||||
this.appendChild(container);
|
||||
}
|
||||
}
|
||||
|
||||
this.track_info.name &&
|
||||
container.appendChild(document.createTextNode(this.track_info.name));
|
||||
export class TrackCard extends HTMLElement {
|
||||
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() {
|
||||
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"));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,9 +1,16 @@
|
|||
import * as _ from "lodash";
|
||||
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);
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"track-card": TrackCard;
|
||||
}
|
||||
}
|
||||
|
||||
const replaceTitle = () => {
|
||||
const title = document.querySelector(".js-title");
|
||||
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 track_list = document.querySelector(".track-list__tracks");
|
||||
if (track_list) {
|
||||
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) => {
|
||||
let listItem = document.createElement("li");
|
||||
|
|
|
@ -46,3 +46,16 @@ body {
|
|||
width: 300px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.track-card__name {
|
||||
}
|
||||
|
||||
.track-card__length {
|
||||
}
|
||||
|
||||
.track-card__album {
|
||||
}
|
||||
|
||||
.track-card__artist {
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue