{"id":19387441,"url":"https://github.com/quentinroy/marking-menu","last_synced_at":"2025-07-04T00:34:24.177Z","repository":{"id":22929645,"uuid":"97705598","full_name":"QuentinRoy/Marking-Menu","owner":"QuentinRoy","description":"Marking Menu  implementation in JavaScript","archived":false,"fork":false,"pushed_at":"2025-06-03T22:26:58.000Z","size":2530,"stargazers_count":14,"open_issues_count":22,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-04T06:41:47.828Z","etag":null,"topics":["interaction","marking-menu","menu","technique"],"latest_commit_sha":null,"homepage":"https://quentinroy.github.io/Marking-Menu/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QuentinRoy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-07-19T10:48:16.000Z","updated_at":"2024-12-03T05:29:50.000Z","dependencies_parsed_at":"2024-06-10T21:32:24.376Z","dependency_job_id":"5199fbb4-7856-4987-9d93-2f5584f32e95","html_url":"https://github.com/QuentinRoy/Marking-Menu","commit_stats":{"total_commits":303,"total_committers":6,"mean_commits":50.5,"dds":0.4191419141914191,"last_synced_commit":"4b98a58502d297676b27bbc7e51ee1358954e001"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/QuentinRoy/Marking-Menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuentinRoy%2FMarking-Menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuentinRoy%2FMarking-Menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuentinRoy%2FMarking-Menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuentinRoy%2FMarking-Menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QuentinRoy","download_url":"https://codeload.github.com/QuentinRoy/Marking-Menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuentinRoy%2FMarking-Menu/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263426394,"owners_count":23464795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["interaction","marking-menu","menu","technique"],"created_at":"2024-11-10T10:09:15.399Z","updated_at":"2025-07-04T00:34:24.134Z","avatar_url":"https://github.com/QuentinRoy.png","language":"JavaScript","readme":"# Marking Menu\n\n[![NPM](https://img.shields.io/npm/v/marking-menu.svg)](https://www.npmjs.com/package/marking-menu)\n[![Build Status](https://travis-ci.org/QuentinRoy/Marking-Menu.svg?branch=master)](https://travis-ci.org/QuentinRoy/Marking-Menu)\n[![codecov](https://img.shields.io/codecov/c/github/QuentinRoy/Marking-Menu.svg)](https://codecov.io/gh/QuentinRoy/Marking-Menu)\n\nThis 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)].\n\n[Have a look at the **demo**](https://quentinroy.github.io/Marking-Menu/).\n\n## License\n\nThis _codebase_ is licensed under the MIT license.\n**However**, Marking Menus are concerned by several patents, none of which are owned by the author of this library.\nMake sure you have the rights to include this library in your application before doing so.\nThe authors and contributors of this library may not be held responsible for any patent infringement following the use of this codebase.\n\n## Dependencies\n\n- [`rxjs`](http://reactivex.io/rxjs/).\n\n## Install\n\n### Browser with CDN\n\nYou can use [unpkg](https://unpkg.com) to fetch both [`rxjs`](http://reactivex.io/rxjs/) and `marking-menu`:\n\n- https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.js,\n- https://unpkg.com/marking-menu,\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript\n      src=\"https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.js\"\n      defer\n    \u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/marking-menu\" defer\u003e\u003c/script\u003e\n    \u003cscript defer\u003e\n      // Your stuff.\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### ES modules or CommonJS\n\n```sh\nnpm install -S marking-menu\n```\n\nThen (ES modules)\n\n```js\nimport MarkingMenu from 'marking-menu';\n```\n\nor (CommonJS)\n\n```js\nvar MarkingMenu = require('marking-menu');\n```\n\n## API\n\n### `MarkingMenu(items, parentDOM): Observable`\n\n`MarkingMenu` returns a 'hot' [`Observable`](https://github.com/tc39/proposal-observable) that emits notification of the form `{ name, angle }`. The menu is activated upon subscription of this observable, and disabled upon un-subscription.\n\n- `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.\n\n- `parentDOM`: `HTMLElement`. The container of the menu.\n\n#### Example\n\n```js\n// Create the menu with a sub-menu at the bottom.\nconst items = [\n  'Item Right',\n  {\n    name: 'Others...',\n    children: ['Sub Right', 'Sub Down', 'Sub Left', 'Sub Top'],\n  },\n  'Item Left',\n  'Item Up',\n];\nconst mm = MarkingMenu(items, document.getElementById('main'));\n\n// Subscribe (and activates) the menu.\nconst subscription = mm.subscribe((selection) =\u003e {\n  // Do something.\n  console.log(selection.name);\n});\n\nsetTimeout(() =\u003e {\n  // Later, disable the menu.\n  subscription.unsubscribe();\n}, 60 * 1000);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquentinroy%2Fmarking-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquentinroy%2Fmarking-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquentinroy%2Fmarking-menu/lists"}