@shaendro/marking-menu
v0.9.9
Published
Marking Menu Implementation in JavaScript.
Downloads
6
Maintainers
Readme
Marking Menu
This library is an implementation of Gordon Kurtenbach's infamous Marking Menus in JavaScript [1, 2, 3].
License
This codebase is licensed under the MIT license. However, Marking Menus are concerned by several patents (none of them owned by the author of this library). Make sure you have the rights to include this library in a commercial application before doing so. The authors of this library may not be held responsible for any patent infringement following the use of this codebase.
Dependencies
rxjs
.
Install
Browser with CDN
You can use unpkg to fetch both rxjs
and marking-menu
:
- https://unpkg.com/[email protected]/bundles/rxjs.umd.js,
- https://unpkg.com/marking-menu (latest script),
- https://unpkg.com/marking-menu/marking-menu.css (latest stylesheet)
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/marking-menu/marking-menu.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/bundles/rxjs.umd.js" defer></script>
<script src="https://unpkg.com/marking-menu" defer></script>
<script defer>
// Your stuff.
</script>
</head>
<body>
</body>
</html>
ES modules or CommonJS with NPM (webpack
and others)
npm install -S marking-menu
Then (ES modules)
import MarkingMenu from 'marking-menu';
or (CommonJS)
var MarkingMenu = require('marking-menu');
Don't forget to include the CSS.
For example, if you are using webpack
and style-loader
, import 'marking-menu/marking-menu.css'
should be enough.
API
MarkingMenu(items, parentDOM): Observable
MarkingMenu
returns a 'hot' Observable
that emits notification of the form { name, angle }
. The menu is activated upon subscription of this observable, and disabled upon un-subscription.
items
:Array
ofstring
or{ name, children }
. The list of the menu's items. Ifchildren
is provided, the item will be considered as a sub-menu (children
has the same form asitems
). Currently,MarkingMenu
supports up to 8 items per level. The first item is on the right and the followings are layed out clockwise.parentDOM
:HTMLElement
. The container of the menu.
Example
// Create the menu with a sub-menu at the bottom.
const items = [
'Item Right',
{
name: 'Others...',
children: [
'Sub Right',
'Sub Down',
'Sub Left',
'Sub Top'
]
},
'Item Left',
'Item Up'
];
const mm = MarkingMenu(items, document.getElementById('main'));
// Subscribe (and activates) the menu.
const subscription = mm.subscribe((selection) => {
// Do something.
console.log(selection.name);
})
setTimeout(() => {
// Later, disable the menu.
subscription.unsubscribe();
}, 60*1000);