vielle.dev
this repo has no description
use popover
i havent tested this outside of firefox its prolly fine tho lmfao
+23
-18
src/components/astral/Powers.astro
+23
-18
src/components/astral/Powers.astro
···
38
type powerId,
39
powers,
40
} from "../../consts/astral";
41
-
import Powers, { type powerObj } from "../../lib/powers";
42
43
class HTMLPowerElement extends HTMLElement {
44
#internals = this.attachInternals();
···
51
Powers.subscribe(this.handleState.bind(this));
52
}
53
54
-
handleState(value: Readonly<powerObj>) {
55
let button: Element | null | undefined =
56
-
this.shadowRoot?.querySelector("dialog button");
57
if (!(button instanceof HTMLButtonElement)) button = undefined;
58
59
this.#internals.states.clear();
···
104
}
105
106
connectedCallback() {
107
-
const button = this.shadowRoot?.querySelector("dialog button");
108
if (!(button instanceof HTMLButtonElement))
109
-
throw "`dialog button` could not be selected";
110
111
button.addEventListener("click", () => {
112
if (
···
166
disabled={immutable}
167
>
168
<template shadowrootmode="open">
169
-
<button commandfor="info" command="show-modal">
170
<slot is:inline name="img" />
171
</button>
172
173
-
<dialog id="info" closedby="any">
174
<h2><slot is:inline name="title" /></h2>
175
<button
176
id="mode"
···
191
<span data-val="dependency">Dependency</span>
192
</button>
193
<slot is:inline name="body" />
194
-
</dialog>
195
196
<section>
197
<slot is:inline />
···
232
}
233
234
/* dialog popup styles */
235
-
dialog {
236
width: min(60ch, calc(100vw - 10ch));
237
-
margin: auto;
238
239
background-color: color-mix(
240
in oklab,
···
244
border: var(--outline-size) solid var(--outline);
245
border-radius: 10px;
246
247
-
&:open {
248
display: grid;
249
}
250
grid-template: auto auto auto / 1fr auto;
···
280
}
281
}
282
283
-
:host(:state(selected)) dialog button [data-val="unselect"] {
284
opacity: 1;
285
}
286
-
:host(:state(locked)) dialog button [data-val="locked"] {
287
opacity: 1;
288
}
289
-
:host(:state(avaliable)) dialog button [data-val="select"] {
290
opacity: 1;
291
}
292
-
:host(:state(no-parent)) dialog button [data-val="no-parent"] {
293
opacity: 1;
294
}
295
-
:host(:state(no-points)) dialog button [data-val="no-points"] {
296
opacity: 1;
297
}
298
-
:host(:state(dependency)) dialog button {
299
[data-val="unselect"] {
300
opacity: 0;
301
}
···
387
}
388
}
389
390
-
section {
391
container-type: size;
392
display: flex;
393
flex-direction: row;
···
38
type powerId,
39
powers,
40
} from "../../consts/astral";
41
+
import Powers, { type powerObject } from "../../lib/powers";
42
43
class HTMLPowerElement extends HTMLElement {
44
#internals = this.attachInternals();
···
51
Powers.subscribe(this.handleState.bind(this));
52
}
53
54
+
handleState(value: Readonly<powerObject>) {
55
let button: Element | null | undefined =
56
+
this.shadowRoot?.querySelector("#info button");
57
if (!(button instanceof HTMLButtonElement)) button = undefined;
58
59
this.#internals.states.clear();
···
104
}
105
106
connectedCallback() {
107
+
const button = this.shadowRoot?.querySelector("#info button");
108
if (!(button instanceof HTMLButtonElement))
109
+
throw "`#info button` could not be selected";
110
111
button.addEventListener("click", () => {
112
if (
···
166
disabled={immutable}
167
>
168
<template shadowrootmode="open">
169
+
<button commandfor="info" command="toggle-popover">
170
<slot is:inline name="img" />
171
</button>
172
173
+
<section id="info" popover>
174
<h2><slot is:inline name="title" /></h2>
175
<button
176
id="mode"
···
191
<span data-val="dependency">Dependency</span>
192
</button>
193
<slot is:inline name="body" />
194
+
</section>
195
196
<section>
197
<slot is:inline />
···
232
}
233
234
/* dialog popup styles */
235
+
#info {
236
width: min(60ch, calc(100vw - 10ch));
237
+
/* position-anchor: --tree-node; */
238
+
position-area: bottom span-right;
239
+
position-try:
240
+
bottom span-left,
241
+
top span-right,
242
+
top span-left;
243
244
background-color: color-mix(
245
in oklab,
···
249
border: var(--outline-size) solid var(--outline);
250
border-radius: 10px;
251
252
+
&:popover-open {
253
display: grid;
254
}
255
grid-template: auto auto auto / 1fr auto;
···
285
}
286
}
287
288
+
:host(:state(selected)) #info button [data-val="unselect"] {
289
opacity: 1;
290
}
291
+
:host(:state(locked)) #info button [data-val="locked"] {
292
opacity: 1;
293
}
294
+
:host(:state(avaliable)) #info button [data-val="select"] {
295
opacity: 1;
296
}
297
+
:host(:state(no-parent)) #info button [data-val="no-parent"] {
298
opacity: 1;
299
}
300
+
:host(:state(no-points)) #info button [data-val="no-points"] {
301
opacity: 1;
302
}
303
+
:host(:state(dependency)) #info button {
304
[data-val="unselect"] {
305
opacity: 0;
306
}
···
392
}
393
}
394
395
+
section:not([popover]) {
396
container-type: size;
397
display: flex;
398
flex-direction: row;