mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(context-menu): add target prop to selectively trigger context menu

Browse source
This commit is contained in:
metonym 2021-11-18 13:07:09 -08:00
commit f603106b18
4 changed files with 82 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

13
COMPONENT_INDEX.md
View file

@ -780,12 +780,13 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the unordered list HTML element |
| y | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the vertical offset of the menu position |
| x | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the horizontal offset of the menu position |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :-------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the unordered list HTML element |
| y | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the vertical offset of the menu position |
| x | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the horizontal offset of the menu position |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
| target | <code>let</code> | No | <code>null &#124; HTMLElement &#124; HTMLElement[]</code> | <code>null</code> | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window |
### Slots

11
docs/src/COMPONENT_API.json
View file

@ -1809,6 +1809,17 @@
"moduleName": "ContextMenu",
"filePath": "src/ContextMenu/ContextMenu.svelte",
"props": [
{
"name": "target",
"kind": "let",
"description": "Specify an element or list of elements to trigger the context menu.\nIf no element is specified, the context menu applies to the entire window",
"type": "null | HTMLElement | HTMLElement[]",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "open",
"kind": "let",

79
src/ContextMenu/ContextMenu.svelte
View file

@ -1,4 +1,11 @@
<script>
/**
* Specify an element or list of elements to trigger the context menu.
* If no element is specified, the context menu applies to the entire window
* @type {null | HTMLElement | HTMLElement[]}
*/
export let target = null;
/**
* Set to `true` to open the menu
* Either `x` and `y` must be greater than zero
@ -15,6 +22,7 @@
export let ref = null;
import {
onMount,
setContext,
getContext,
afterUpdate,
@ -44,6 +52,53 @@
focusIndex = -1;
}
/** @type {(e: MouseEvent) => void} */
function openMenu(e) {
const { height, width } = ref.getBoundingClientRect();
if (open || x === 0) {
if (window.innerWidth - width < e.x) {
x = e.x - width;
} else {
x = e.x;
}
}
if (open || y === 0) {
menuOffsetX.set(e.x);
if (window.innerHeight - height < e.y) {
y = e.y - height;
} else {
y = e.y;
}
}
position.set([x, y]);
open = true;
}
$: if (target != null) {
if (Array.isArray(target)) {
target.forEach((node) => node?.addEventListener("contextmenu", openMenu));
} else {
target.addEventListener("contextmenu", openMenu);
}
}
onMount(() => {
return () => {
if (target != null) {
if (Array.isArray(target)) {
target.forEach((node) =>
node?.removeEventListener("contextmenu", openMenu)
);
} else {
target.removeEventListener("contextmenu", openMenu);
}
}
};
});
setContext("ContextMenu", {
menuOffsetX,
currentIndex,
@ -78,30 +133,10 @@
<svelte:window
on:contextmenu|preventDefault="{(e) => {
if (target != null) return;
if (level > 1) return;
if (!ref) return;
const { height, width } = ref.getBoundingClientRect();
if (open || x === 0) {
if (window.innerWidth - width < e.x) {
x = e.x - width;
} else {
x = e.x;
}
}
if (open || y === 0) {
menuOffsetX.set(e.x);
if (window.innerHeight - height < e.y) {
y = e.y - height;
} else {
y = e.y;
}
}
position.set([x, y]);
open = true;
openMenu(e);
}}"
on:click="{(e) => {
if (!open) return;

7
types/ContextMenu/ContextMenu.svelte.d.ts vendored
View file

@ -3,6 +3,13 @@ import { SvelteComponentTyped } from "svelte";
export interface ContextMenuProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
/**
* Specify an element or list of elements to trigger the context menu.
* If no element is specified, the context menu applies to the entire window
* @default null
*/
target?: null | HTMLElement | HTMLElement[];
/**
* Set to `true` to open the menu
* Either `x` and `y` must be greater than zero