Marking-Menu

KO | EN

gitlite — search

#react #typescript #golang #machine-learning #rust #macos #nodejs #awesome #cli #awesome-list #vue #security #openai #open-source

(★ 16)

Marking Menu implementation in JavaScript

Marking-Menu 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Marking Menu

[![NPM](https://img.shields.io/npm/v/marking-menu.svg)](https://www.npmjs.com/package/marking-menu)
[![CI](https://github.com/QuentinRoy/Marking-Menu/actions/workflows/ci.yml/badge.svg)](https://github.com/QuentinRoy/Marking-Menu/actions/workflows/ci.yml)
[![Deploy](https://github.com/QuentinRoy/Marking-Menu/actions/workflows/deploy.yml/badge.svg)](https://github.com/QuentinRoy/Marking-Menu/actions/workflows/deploy.yml)

This library is an implementation of Gordon Kurtenbach's infamous Marking Menus in JavaScript [[1](https://doi.org/10.1145/120782.120797), [2](http://doi.acm.org/10.1145/169059.169426), [3](http://doi.acm.org/10.1145/191666.191759)].

[Have a look at the **demo**](https://quentinroy.github.io/Marking-Menu/).

## License

This _codebase_ is licensed under the MIT license.
**However**, Marking Menus are concerned by several patents, none of which are owned by the author of this library.
Make sure you have the rights to include this library in your application before doing so.
The authors and contributors of this library may not be held responsible for any patent infringement following the use of this codebase.

## Dependencies

- [`rxjs`](http://reactivex.io/rxjs/).

## Install

### Browser with CDN

Use a native ES module with an import map to resolve `marking-menu` and its
bare `rxjs` imports:

```html
<!DOCTYPE html>
<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "marking-menu": "https://esm.sh/marking-menu@1?raw",
          "rxjs": "https://esm.sh/rxjs@7.8.2"
        }
      }
    </script>
    <script type="module">
      import { createMarkingMenu } from 'marking-menu';

// Your stuff.
    </script>
  </head>
  <body></body>
</html>
```

### ES modules

```sh
npm install -S marking-menu
```

Then:

```js
import { createMarkingMenu } from 'marking-menu';
```

## API

### `createMarkingMenu({ items, parent, ...options }): Observable`

`createMarkingMenu` returns a 'hot' [`Observable`](https://github.com/tc39/proposal-observable) that emits the selected menu items. The menu is activated upon subscription of this observable, and disabled upon un-subscription.

Activation uses the primary button of a mouse, the primary touch contact, or a
primary pen contact. While the menu is active, it temporarily sets the
parent's inline `touch-action` to `none !important` so pointer gestures remain
reliable. The previous inline value and priority are restored when the last
subscription ends, unless the application changed the property in the
meantime.

- `items`: `Array` of `{ label, items? }`. The list of the menu's items. If `items` is provided, the item will be considered as a sub-menu (nested `items` has the same form as the top-level list). Currently, `createMarkingMenu` supports up to 8 items per level. The first item is on the right and the followings are layed out clockwise.

- `parent`: `HTMLElement`. The container of the menu.

#### Example

```js
// Create the menu with a sub-menu at the bottom.
const items = [
  { label: 'Item Right' },
  {
    label: 'Others...',
    items: [
      { label: 'Sub Right' },
      { label: 'Sub Down' },
      { label: 'Sub Left' },
      { label: 'Sub Top' },
    ],
  },
  { label: 'Item Left' },
  { label: 'Item Up' },
];
const menu$ = createMarkingMenu({
  items,
  parent: document.getElementById('main'),
});

// Subscribe (and activates) the menu.
const subscription = menu$.subscribe((selection) => {
  // Do something.
  console.log(selection.label);
});

setTimeout(() => {
  // Later, disable the menu.
  subscription.unsubscribe();
}, 60 * 1000);
```

Marking-Menu

Marking-Menu 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Marking-Menu

Marking-Menu 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README