A lightweight contextmenu for the web.
$ npm install lightcm
or
LightCM.init();
LightCM.create('mymenu', [
{
label: 'Open',
attributes: {
href: '{{url}}',
target: '_blank'
}
},
{
label: 'Make red',
handler: function (data, { target }) {
target.style.background = 'red';
}
}
]);
<div class="btn" data-contextmenu="mymenu" data-contextmenu-data='{ "url": "/hello "}'></div>
OR
<div class="btn" onclick="LightCM.open('mymenu', event, { url: '/hello' })"></div>
Initializes LightCM.
-
enableDataAttributes
: <Boolean> Whether or not LightCM should detect data-contextmenu attributes and add an eventlistener
-
id
: <String> -
items
: <Array>
An item can have 3 properties:
-
label
: <String> -
attributes
: <Object> -
handler
: <Function>
The attributes
parameter is a single-depth object. The object can contain any string, or function that returns a string. The key value pair is then applied as an attribute to the item.
let items = [
{
label: 'Button1',
attributes: {
href: '{{url}}',
target: () => '_blank' // arrow function returning '_blank'.
}
},
{
label: 'Button2',
handler: function (data, { target }) {
console.log(data, target);
}
}
];
LightCM.create('mymenu', event, items);
Resulting contextmenu code:
<div class="context-menu" id="mymenu">
<a class="btn" href="{{url}}" target="_blank">Button1</a>
<a class="btn">Button2</a>
</div>
-
id
: <String> -
event
: <ContextMenuEvent> -
data
: <Object>
Opens the contextmenu corresponding to the id.
let items = [
{
label: 'Button1',
attributes: {
href: '{{url}}' // "mustache style" template
}
}
];
LightCM.open('mymenu', event, { url: '/hello' });
-
data
: <Object> -
event
: <ContextMenuEvent> -
clickEvent
: <ClickEvent>
event
is the contextmenu event.
clickEvent
is the event from when you click a button in the contextmenu.
The data
parameter is a single-depth object. The data
object can contain any string, or function that returns a string. These strings are then rendered in the context menu.
let items = [
{
label: '{{name}}',
attributes: {
href: '{{url}}?test=true'
}
}
];
let data = {
url: '/kokiri/forest',
name: 'Link'
};
Result:
items[0]
>{
> label: 'Link',
> attributes: {
> href: '/kokiri/forest?test=true'
> }
>}