Foundry/taf
1
0
Fork 0
Code Issues 12 Pull requests Releases 6 Wiki Activity Actions

Item Support #69

Merged
Oliver merged 50 commits from feature/item-support into main 2026-04-15 02:42:54 +00:00
Conversation 1 Commits 50 Files changed 50 +23 -13
2 changed files with 23 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit b20240699b - Show all commits

28
module/apps/elements/Toggle.mjs
View file

@ -1,5 +1,7 @@
import { StyledShadowElement } from "./StyledShadowElement.mjs"; import { StyledShadowElement } from "./StyledShadowElement.mjs";
const { debounce } = foundry.utils;
export class TafToggle extends StyledShadowElement(HTMLElement) { export class TafToggle extends StyledShadowElement(HTMLElement) {
static elementName = `taf-toggle`; static elementName = `taf-toggle`;
static formAssociated = true; static formAssociated = true;
@ -72,8 +74,9 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
}; };
}; };
const label = document.createElement(`label`); const container = document.createElement(`div`);
label.dataset.type = `round`; container.classList = `toggle`;
container.dataset.type = `round`;
const input = this._input = document.createElement(`input`); const input = this._input = document.createElement(`input`);
input.type = `checkbox`; input.type = `checkbox`;
@ -83,13 +86,17 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
this.#emitEvents(); this.#emitEvents();
}); });
label.appendChild(input); this.addEventListener(`click`, () => {
input.click();
});
container.appendChild(input);
const slider = document.createElement(`div`); const slider = document.createElement(`div`);
slider.classList = `slider`; slider.classList = `slider`;
label.appendChild(slider); container.appendChild(slider);
this._shadow.appendChild(label); this._shadow.appendChild(container);
this._mounted = true; this._mounted = true;
}; };
@ -100,8 +107,11 @@ export class TafToggle extends StyledShadowElement(HTMLElement) {
this._mounted = false; this._mounted = false;
}; };
#emitEvents() { #emitEvents = debounce(
this.dispatchEvent(new Event(`input`, {bubbles: true, cancelable: false})); () => {
this.dispatchEvent(new Event(`change`, {bubbles: true, cancelable: false})); this.dispatchEvent(new Event(`input`, {bubbles: true, cancelable: false}));
}; this.dispatchEvent(new Event(`change`, {bubbles: true, cancelable: false}));
},
150,
);
}; };

8
styles/components/toggle.css
View file

@ -16,11 +16,11 @@ input {
--slider-colour, --slider-colour,
var(--toggle-slider-unchecked-colour) var(--toggle-slider-unchecked-colour)
); );
transition: all var(--speed, 150ms) ease-in-out; transition: all 150ms ease-in-out;
border-radius: 9999px; border-radius: 9999px;
} }
label { .toggle {
display: flex; display: flex;
padding: var(--padding, 4px); padding: var(--padding, 4px);
height: calc(var(--size, 16px) + (var(--padding, 4px) * 2)); height: calc(var(--size, 16px) + (var(--padding, 4px) * 2));
@ -34,7 +34,7 @@ label {
cursor: pointer; cursor: pointer;
/* Non-checked, clicking */ /* Non-checked, clicking */
&:active .slider { &:is(&:active, &.active) .slider {
width: calc(var(--size, 16px) * 1.5); width: calc(var(--size, 16px) * 1.5);
} }
@ -48,7 +48,7 @@ label {
} }
/* checked, clicking */ /* checked, clicking */
&:active > :checked + .slider { &:is(&:active, &.active) > :checked + .slider {
width: calc(var(--size, 16px) * 1.5); width: calc(var(--size, 16px) * 1.5);
transform: translateX(calc(var(--size, 16px) * 0.5)); transform: translateX(calc(var(--size, 16px) * 0.5));
} }