Pure Javascript Context Menu
This is lightweight and zero dependencies pure javascript library for modern web browser.
in browser
<!-- using cdn -->
<link rel="stylesheet" href="https://unpkg.com/vanilla-context@1.0.13/dist/vanilla-context.min.css">
<script src="https://unpkg.com/vanilla-context@1.0.13/dist/vanilla-context.min.js"></script>
const table = document.getElementById('table');
const options = {...};
const context = new VanillaContext(table, options);
in node.js
import { VanillaContext } from 'vanilla-context';
import 'vanilla-context/dist/vanilla-context.min.css';
const table = document.getElementById('table');
const options = {...};
const context = new VanillaContext(table, options);
Option interface
interface VanillaContextOptions {
debug?: boolean;
autoClose?: boolean;
nodes: ContextNode[] | ((e: Event) => ContextNode[]);
}
ContextNode Interface
interface ContextNode {
renderer: Renderer;
onClick: (params: ContextNodeEventParams) => void;
children?: ContextNode[];
disabled?: boolean | ((params: ContextDisabledParams) => boolean);
height?: number | ((params: ContextHeightParams) => number);
}
ContextNode callback parameter interfaces
click event callback function parameters interface
export interface ContextNodeEventParams {
api: VanillaContext;
event: Event;
originEvent: Event;
}
disabled callback function parameters interface
export interface ContextDisabledParams {
api: VanillaContext;
originEvent: Event;
}
height callback function parameters interface
export interface ContextHeightParams {
api: VanillaContext;
originEvent: Event;
}
Renderer
you can use any type of renderer. string, function and class will works well
Renderer Interface
interface RendererInterface {
init: (params: RendererParams) => void;
getLayout: () => Node;
destroy: () => void;
}