Foundry/.dungeon
0
0
Fork 0
Code Issues 57 Pull requests Projects Releases 7 Packages Wiki Activity Actions

Get the icon component coded and being used in the incrementer component

Browse source
This commit is contained in:
Oliver-Akins 2024-04-11 22:32:04 -06:00
parent 3ace1df5a2
commit f15f3a4456
5 changed files with 141 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

79
module/components/icon.mjs
View file

@ -7,32 +7,37 @@ export class DotDungeonIcon extends HTMLElement {
static elementName = `dd-icon`;
static formAssociated = false;
static #styles = ``;
_internals;
_shadow;
#shadow;
_min;
_max;
_smallStep;
_largeStep;
static #styles = ``;
static _cache = new Map();
#style;
#container;
_name;
_path;
constructor() {
super();
this._shadow = this.attachShadow({ mode: `open`, delegatesFocus: true });
this.#shadow = this.attachShadow({ mode: `open`, delegatesFocus: true });
if (DotDungeonIcon.#styles) this.#embedStyles();
this.#container = document.createElement(`div`);
this.#shadow.appendChild(this.#container);
};
async connectedCallback() {
connectedCallback() {
this.replaceChildren();
this._name = this.getAttribute(`name`);
this._path = this.getAttribute(`path`);
/*
This converts all of the double-dash prefixed properties on the element to
CSS variables so that they don't all need to be provided by doing style=""
*/
for (const attrVar of this.attributes) {
if (attrVar.name?.startsWith(`--`)) {
this.style.setProperty(attrVar.name, attrVar.value);
if (attrVar.name?.startsWith(`var:`)) {
const prop = attrVar.name.replace(`var:`, ``);
this.style.setProperty(`--` + prop, attrVar.value);
};
};
@ -40,7 +45,7 @@ export class DotDungeonIcon extends HTMLElement {
Style fetching if we haven't gotten them yet
*/
if (!DotDungeonIcon.#styles) {
fetch(`./systems/dotdungeon/.styles/v3/components/incrementer.css`)
fetch(`./systems/dotdungeon/.styles/v3/components/icon.css`)
.then(r => r.text())
.then(t => {
DotDungeonIcon.#styles = t;
@ -53,16 +58,50 @@ export class DotDungeonIcon extends HTMLElement {
the slot content, as then we can have a default per-icon usage
*/
let content;
// TODO: Make name request
if (this._name) {
content = await this.#getIcon(`./systems/dotdungeon/assets/${this._name}.svg`);
};
if (!content) {
let slot = document.createElement(`slot`);
content ??= slot;
}
// TODO: make path request
if (this._path && !content) {
content = await this.#getIcon(this._path);
};
// TODO: insert content into DOM
if (content) {
this.#container.appendChild(content);
};
};
#embedStyles() {
const style = document.createElement(`style`);
style.innerHTML = DotDungeonIcon.#styles;
this._shadow.appendChild(style);
this.#style = document.createElement(`style`);
this.#style.innerHTML = DotDungeonIcon.#styles;
this.#shadow.appendChild(this.#style);
};
async #getIcon(path) {
// Cache hit!
if (DotDungeonIcon._cache.has(path)) {
console.debug(`.dungeon | Icon ${path} cache hit`);
return DotDungeonIcon._cache.get(path);
};
const r = await fetch(path);
switch (r.status) {
case 200:
case 201:
break;
default:
console.error(`.dungeon | Failed to fetch icon: ${path}`);
return;
};
console.debug(`.dungeon | Adding icon ${path} to the cache`);
const temp = document.createElement(`div`);
temp.innerHTML = await r.text();
const svg = temp.querySelector(`svg`);
DotDungeonIcon._cache.set(path, svg);
return svg;
};
};