Set up a style provider

This commit is contained in:
Savanni D'Gerinel 2024-06-02 13:18:21 -04:00
parent 7c98e3c29b
commit cffadf9e36
4 changed files with 43 additions and 8 deletions

View File

@ -0,0 +1,13 @@
const colorGrey100 = "hsl(240 10% 95%)";
export class StyleProvider {
styles: Record<string, string> = {};
constructor() {
this.styles["backgroundColorLight"] = colorGrey100;
}
get(key: string) {
return this.styles[key]
}
}

View File

@ -1,4 +1,4 @@
import { TextField } from "./TextField"; import { TextField } from "../TextField/TextField";
export class NowPlaying extends HTMLElement { export class NowPlaying extends HTMLElement {
onStop: () => void; onStop: () => void;

View File

@ -1,4 +1,15 @@
import { TextField } from "./TextField"; import { TextField } from "../TextField/TextField";
import { StyleProvider } from "../../StyleProvider";
const style = `
.track-card {
display: grid;
gap: 4px 4px;
border: 1px solid $border-color;
background-color: $background-color-light;
box-shadow: $elevation-low;
}
`;
export class TrackCard extends HTMLElement { export class TrackCard extends HTMLElement {
trackNumberContainer: TextField; trackNumberContainer: TextField;
@ -6,14 +17,17 @@ export class TrackCard extends HTMLElement {
albumContainer: TextField; albumContainer: TextField;
artistContainer: TextField; artistContainer: TextField;
durationContainer: TextField; durationContainer: TextField;
styleProvider: StyleProvider;
static get observedAttributes() { static get observedAttributes() {
return ["trackId", "trackNumber", "name", "album", "artist", "duration"]; return ["trackId", "trackNumber", "name", "album", "artist", "duration"];
} }
constructor() { constructor(styleProvider: StyleProvider) {
super(); super();
this.styleProvider = styleProvider
this.trackNumberContainer = document.createElement("text-field"); this.trackNumberContainer = document.createElement("text-field");
this.nameContainer = document.createElement("text-field"); this.nameContainer = document.createElement("text-field");
@ -100,6 +114,11 @@ export class TrackCard extends HTMLElement {
connectedCallback() { connectedCallback() {
const container = document.createElement("data-card"); const container = document.createElement("data-card");
container.classList.add("track-card"); container.classList.add("track-card");
container.style.setProperty("display", "grid");
container.style.setProperty("gap", "4px 4px");
container.style.setProperty("border", "1px solid --border-color");
container.style.setProperty("background-color", this.styleProvider.get("backgroundColorLight"));
container.style.setProperty("box-shadow", "$elevation-low");
// this.appendChild(this.trackNumberContainer); // this.appendChild(this.trackNumberContainer);
container.appendChild(this.nameContainer); container.appendChild(this.nameContainer);

View File

@ -1,10 +1,11 @@
import * as _ from "lodash"; import * as _ from "lodash";
import { TrackInfo, getTracks, playTrack, stopPlayback } from "./client"; import { TrackInfo, getTracks, playTrack, stopPlayback } from "./client";
import { DataCard } from "./components/DataCard"; import { DataCard } from "./components/DataCard/DataCard";
import { NowPlaying } from "./components/NowPlaying"; import { NowPlaying } from "./components/NowPlaying/NowPlaying";
import { TextField } from "./components/TextField"; import { TextField } from "./components/TextField/TextField";
import { TrackCard } from "./components/TrackCard"; import { TrackCard } from "./components/TrackCard/TrackCard";
import { PlaylistRow } from "./components/PlaylistRow"; import { PlaylistRow } from "./components/PlaylistRow/PlaylistRow";
import { StyleProvider } from "./StyleProvider";
window.customElements.define("data-card", DataCard); window.customElements.define("data-card", DataCard);
window.customElements.define("now-playing", NowPlaying); window.customElements.define("now-playing", NowPlaying);
@ -24,9 +25,11 @@ declare global {
const updateTrackList = (tracks: TrackInfo[]) => { const updateTrackList = (tracks: TrackInfo[]) => {
const playlist = document.querySelector(".track-list__tracks"); const playlist = document.querySelector(".track-list__tracks");
const styleProvider = new StyleProvider();
if (playlist) { if (playlist) {
_.map(tracks, (info) => { _.map(tracks, (info) => {
let card: TrackCard = document.createElement("track-card"); let card: TrackCard = document.createElement("track-card");
card.styleProvider = styleProvider;
let listItem: PlaylistRow = document.createElement("playlist-row"); let listItem: PlaylistRow = document.createElement("playlist-row");
card.trackId = info.id; card.trackId = info.id;