https://github.com/scssyworks/context-builder
Build context menus with ease
https://github.com/scssyworks/context-builder
context-builder context-menu context-menus events javascript listeners right-click typescript
Last synced: 3 months ago
JSON representation
Build context menus with ease
- Host: GitHub
- URL: https://github.com/scssyworks/context-builder
- Owner: scssyworks
- Created: 2020-08-05T11:55:19.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-05T08:26:19.000Z (over 3 years ago)
- Last Synced: 2025-02-11T17:19:05.364Z (3 months ago)
- Topics: context-builder, context-menu, context-menus, events, javascript, listeners, right-click, typescript
- Language: TypeScript
- Homepage:
- Size: 1.41 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Context Builder
A powerful and easy to use library for building custom context menus.
```sh
npm i @scssyworks/context-builder
```
# How does it work?
## Create a context menu instance for a given target.
```js
import { ContextMenu } from '@scssyworks/context-builder';
const contextMenu = new ContextMenu('div');
// ...
const contextMenu = new ContextMenu(); // For body element
```
If you don't specify a target selector, context menu is enabled for ``body`` element.
## Add context menu items
```js
import { ContextMenu, ContextItem } from '@scssyworks/context-builder';
const contextMenu = new ContextMenu('div');
contextMenu.add(
new ContextItem('Option 1'),
new ContextItem('Option 2'),
// ...
);
```
## Add nested menu items
```js
import { ContextMenu, ContextItem, ContextList } from '@scssyworks/context-builder';
const contextMenu = new ContextMenu('div');
contextMenu.add(
new ContextItem('Option 1'),
new ContextItem('Option 2'),
(new ContextList('Option 3')).add(
new ContextItem('Child Option 1')
)
// ...
);
```
Context builder supports nesting of elements up to ``nth`` level.
## Listen to click events
```js
import { ContextMenu, ContextItem, ContextList } from '@scssyworks/context-builder';
const contextMenu = new ContextMenu('div', {
onClick(event) {
// Use event.target to get the target element
// ...
return true; // Return true to automatically close the menu
}
});
// ...
```
## Listen to activate and deactivate events
Activate and Deactivate listeners are great for adding entry and exit transitions
```js
import { ContextMenu, ContextItem, ContextList } from '@scssyworks/context-builder';
const contextMenu = new ContextMenu('div', {
onActivate(elements) {
elements.map(el => {
el.classList.add('show'); // Adding "show" class adds an entry transition
});
},
onDeactivate(elements, callback) {
elements.once('transitionend', callback); // Callback function is "required" to complete the exit transition
elements.map(el => {
el.classList.remove('show'); // Removing "show" class triggers an exit transition
});
}
});
// ...
```
## Listen to "contextmenu" event
You can listen to original contextmenu event if you want to capture text selection or do more stuff.
```js
import { ContextMenu, ContextItem, ContextList } from '@scssyworks/context-builder';
const contextMenu = new ContextMenu('div', {
onContextMenu(event) {
console.log(event);
}
});
// ...
```
## Destroy context menu
```js
contextMenu.cleanup();
```
# Customize
Context Builder is fully customizable. You can use your own elements to build context menu. Use the following guide to customize your context menus:
https://github.com/scssyworks/context-builder/blob/master/CUSTOMIZE.md