gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 09:19:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Implement CSS for Chrome & Link to Context-Menu

Browse Source
This commit is contained in:
Youwes09
2026-04-29 18:18:21 -05:00
parent 170493aa71
commit dd0cf9372d
6 changed files with 206 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/ui/ContextMenu.svelte
+125 -31
View File
@@ -6,6 +6,7 @@
danger?: boolean;
disabled?: boolean;
separator?: never;
children?: MenuEntry[];
}
export interface MenuSeparator { separator: true }
export type MenuEntry = MenuItem | MenuSeparator;
@@ -19,8 +20,12 @@
let { x, y, items, onClose }: Props = $props();
let focused = $state(-1);
let el = $state<HTMLDivElement | undefined>(undefined);
let focused = $state(-1);
let el = $state<HTMLDivElement | undefined>(undefined);
let measured = $state(false);
let pos = $state({ left: x, top: y });
let subOpen = $state(-1);
let subEls = $state<(HTMLDivElement | null)[]>([]);
const actionable = $derived(
items
@@ -30,27 +35,61 @@
$effect(() => { if (actionable.length && focused === -1) focused = actionable[0]; });
const pos = $derived.by(() => {
const zoom = parseFloat(document.documentElement.style.zoom || "100") / 100 || 1;
const menuW = 200, menuH = items.length * 34;
const vw = window.innerWidth / zoom, vh = window.innerHeight / zoom;
const sx = x / zoom, sy = y / zoom;
return {
function getZoom(): number {
const raw = parseFloat(document.documentElement.style.zoom || "1") || 1;
return raw > 10 ? raw / 100 : raw;
}
$effect(() => {
if (!el) return;
const zoom = getZoom();
const style = getComputedStyle(document.documentElement);
const sidebarW = parseFloat(style.getPropertyValue('--sidebar-width')) || 52;
const titlebarH = parseFloat(style.getPropertyValue('--titlebar-height')) || 36;
const vw = window.innerWidth / zoom;
const vh = window.innerHeight / zoom;
const sx = x / zoom - sidebarW / zoom;
const sy = y / zoom - titlebarH / zoom;
const menuW = el.offsetWidth;
const menuH = el.offsetHeight;
pos = {
left: Math.max(4, sx + menuW > vw ? sx - menuW : sx),
top: Math.max(4, sy + menuH > vh ? sy - menuH : sy),
};
measured = true;
});
$effect(() => {
if (subOpen < 0) return;
const sub = subEls[subOpen];
if (!sub) return;
requestAnimationFrame(() => {
const zoom = getZoom();
const vw = window.innerWidth / zoom;
const rect = sub.getBoundingClientRect();
if (rect.right / zoom > vw) sub.classList.add("sub-flip");
else sub.classList.remove("sub-flip");
});
});
function onMouseDown(e: MouseEvent) {
if (el && !el.contains(e.target as Node)) onClose();
const inMain = el?.contains(e.target as Node);
const inSub = subOpen >= 0 && subEls[subOpen]?.contains(e.target as Node);
if (!inMain && !inSub) onClose();
}
function onTouchStartOutside(e: TouchEvent) {
if (el && !el.contains(e.target as Node)) onClose();
const inMain = el?.contains(e.target as Node);
const inSub = subOpen >= 0 && subEls[subOpen]?.contains(e.target as Node);
if (!inMain && !inSub) onClose();
}
function onKey(e: KeyboardEvent) {
if (e.key === "Escape") { e.stopPropagation(); onClose(); return; }
if (e.key === "Escape") {
e.stopPropagation();
if (subOpen >= 0) { subOpen = -1; } else { onClose(); }
return;
}
if (e.key === "ArrowDown") {
e.preventDefault();
const cur = actionable.indexOf(focused);
@@ -63,48 +102,87 @@
focused = actionable[(cur - 1 + actionable.length) % actionable.length] ?? actionable[0];
return;
}
if (e.key === "ArrowRight" && focused >= 0) {
const item = items[focused] as MenuItem;
if (item?.children?.length) { subOpen = focused; return; }
}
if (e.key === "ArrowLeft") { subOpen = -1; return; }
if (e.key === "Enter" && focused >= 0) {
e.preventDefault();
const item = items[focused] as MenuItem;
if (item?.children?.length) { subOpen = focused; return; }
if (item && !item.disabled) { item.onClick(); onClose(); }
}
}
$effect(() => {
document.addEventListener("mousedown", onMouseDown, true);
document.addEventListener("mousedown", onMouseDown, true);
document.addEventListener("touchstart", onTouchStartOutside, true);
document.addEventListener("keydown", onKey, true);
document.addEventListener("keydown", onKey, true);
return () => {
document.removeEventListener("mousedown", onMouseDown, true);
document.removeEventListener("mousedown", onMouseDown, true);
document.removeEventListener("touchstart", onTouchStartOutside, true);
document.removeEventListener("keydown", onKey, true);
document.removeEventListener("keydown", onKey, true);
};
});
</script>
<div bind:this={el} class="menu" role="menu" tabindex="-1"
style="left:{pos.left}px;top:{pos.top}px"
style="left:{pos.left}px;top:{pos.top}px;visibility:{measured ? 'visible' : 'hidden'}"
oncontextmenu={(e) => e.preventDefault()}>
{#each items as item, i}
{#if "separator" in item}
<div class="sep"></div>
{:else}
{@const mi = item as MenuItem}
<button
class="item"
class:danger={mi.danger}
class:disabled={mi.disabled}
class:focused={focused === i}
disabled={mi.disabled}
onclick={() => { if (!mi.disabled) { mi.onClick(); onClose(); } }}
onmouseenter={() => { if (!mi.disabled) focused = i; }}
onmouseleave={() => focused = -1}
>
<span class="icon" class:icon-danger={mi.danger}>
{#if mi.icon}<mi.icon size={13} weight="light" />{/if}
</span>
<span class="label">{mi.label}</span>
</button>
{@const hasSub = !!mi.children?.length}
<div class="item-wrap">
<button
class="item"
class:danger={mi.danger}
class:disabled={mi.disabled}
class:focused={focused === i}
class:has-sub={hasSub}
disabled={mi.disabled}
onclick={() => {
if (mi.disabled) return;
if (hasSub) { subOpen = subOpen === i ? -1 : i; return; }
mi.onClick(); onClose();
}}
onmouseenter={() => { if (!mi.disabled) { focused = i; subOpen = hasSub ? i : -1; } }}
onmouseleave={() => { focused = -1; }}
>
<span class="icon" class:icon-danger={mi.danger}>
{#if mi.icon}<mi.icon size={13} weight="light" />{/if}
</span>
<span class="label">{mi.label}</span>
{#if hasSub}<span class="sub-arrow">›</span>{/if}
</button>
{#if hasSub && subOpen === i}
<div bind:this={subEls[i]} class="menu submenu" role="menu"
onmouseenter={() => { subOpen = i; }}>
{#each mi.children as child}
{#if "separator" in child}
<div class="sep"></div>
{:else}
{@const sc = child as MenuItem}
<button
class="item"
class:danger={sc.danger}
class:disabled={sc.disabled}
disabled={sc.disabled}
onclick={() => { if (!sc.disabled) { sc.onClick(); onClose(); } }}
>
<span class="icon" class:icon-danger={sc.danger}>
{#if sc.icon}<sc.icon size={13} weight="light" />{/if}
</span>
<span class="label">{sc.label}</span>
</button>
{/if}
{/each}
</div>
{/if}
</div>
{/if}
{/each}
</div>
@@ -117,12 +195,27 @@
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.35), 0 16px 40px rgba(0,0,0,0.25);
animation: scaleIn 0.1s ease both; transform-origin: top left;
}
.item-wrap { position: relative; }
.submenu {
position: absolute;
left: 100%;
top: 0;
z-index: 201;
animation: scaleIn 0.08s ease both;
transform-origin: top left;
}
.submenu.sub-flip {
left: auto;
right: 100%;
transform-origin: top right;
}
.item {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%; padding: 5px var(--sp-2); border-radius: var(--radius-md);
font-size: var(--text-sm); color: var(--text-secondary);
text-align: left; cursor: pointer; background: none; border: none; outline: none;
transition: background var(--t-fast), color var(--t-fast);
position: relative;
}
.item:hover:not(.disabled), .item.focused:not(.disabled) { background: var(--bg-overlay); color: var(--text-primary); }
.item.danger { color: var(--color-error); }
@@ -131,6 +224,7 @@
.icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--text-faint); border-radius: var(--radius-sm); }
.icon-danger { color: var(--color-error); opacity: 0.7; }
.label { flex: 1; line-height: 1.3; }
.sub-arrow { font-size: 14px; color: var(--text-faint); line-height: 1; margin-left: auto; padding-left: var(--sp-1); }
.sep { height: 1px; background: var(--border-dim); margin: 3px var(--sp-1); }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }