79 lines
1.9 KiB
Text
79 lines
1.9 KiB
Text
|
---
|
||
|
|
Title: Context Menu
|
||
|
|
Type: Document
|
||
|
|
---
|
||
|
|
|
||
|
|
import {Code} from "astro:components"
|
||
|
|
import {Zorn} from "@minpluto/zorn"
|
||
|
|
|
||
|
|
<Zorn
|
||
|
|
PlayerName="ennie_and_yoyki"
|
||
|
|
Poster="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Poster.png"
|
||
|
|
Video="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki:%20Non-Girly%20Games.mp4"
|
||
|
|
ContextItems={
|
||
|
|
[
|
||
|
|
{
|
||
|
|
"Type": "Button",
|
||
|
|
"Name": "Copy URL",
|
||
|
|
"Action": "null",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"Type": "Link",
|
||
|
|
"Name": "Copy URL with Timestamp",
|
||
|
|
"Action": "#",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"Type": "Link",
|
||
|
|
"Name": "Copy Embed Code",
|
||
|
|
"Action": "#",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"Type": "Link",
|
||
|
|
"Name": "Troubleshoot Player",
|
||
|
|
"Action": "#",
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
|
||
|
|
> Right-click in the demo above to see it action.
|
||
|
|
|
||
|
|
You can override the browser's default context menu by adding your own, this is done with the `ContextItems` variable being added with an array.
|
||
|
|
|
||
|
|
Example:
|
||
|
|
|
||
|
|
<Code lang="jsx" code={`
|
||
|
|
<Zorn
|
||
|
|
ContextItems={
|
||
|
|
[
|
||
|
|
{
|
||
|
|
"Type": "Button",
|
||
|
|
"Name": "Copy URL",
|
||
|
|
"Action": "null",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"Type": "Link",
|
||
|
|
"Name": "Copy Embed Code",
|
||
|
|
"Action": "#",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"Type": "Separator"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"Type": "Link",
|
||
|
|
"Name": "Troubleshoot Player",
|
||
|
|
"Action": "#",
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
`}/>
|
||
|
|
|
||
|
|
If the `ContextItems` variable is not applied, Zorn will default to the browser's default context menu.
|
||
|
|
|
||
|
|
| Variable | Option |
|
||
|
|
|--------------------|---------------------------------------------------------------|
|
||
|
|
| Type | `Button`, `Link`, or `Separator` |
|
||
|
|
| Name | string |
|
||
|
|
| Action (Button) | `onclick` - Use JavaScript |
|
||
|
|
| Action (Link) | `href` - Use a link |
|