Skip to content
Marking Menu implementation in JavaScript
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build-config
demo
src
.babelrc
.commitlintrc.json
.editorconfig
.eslintignore
.eslintrc.yml
.gitignore
.nvmrc
.prettierrc.json
.pug-lintrc.yml
.sass-lint.yml
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
renovate.json
yarn.lock

README.md

Marking Menu

NPM Build Status codecov dependencies Status devDependencies Status

This library is an implementation of Gordon Kurtenbach's infamous Marking Menus in JavaScript [1, 2, 3].

Have a look at the demo.

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

Install

Browser with CDN

You can use unpkg to fetch both rxjs and marking-menu:

<!DOCTYPE html>
<html>
<head>
  <link href="https://unpkg.com/marking-menu/marking-menu.css" rel="stylesheet">
  <script src="https://unpkg.com/rxjs@6.0.0/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 of string or { name, children }. The list of the menu's items. If children is provided, the item will be considered as a sub-menu (children has the same form as items). 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);
You can’t perform that action at this time.