{"id":21167746,"url":"https://github.com/fabriquartz/ember-right-click-menu","last_synced_at":"2025-07-09T17:33:36.491Z","repository":{"id":41746589,"uuid":"238901148","full_name":"Fabriquartz/ember-right-click-menu","owner":"Fabriquartz","description":"An easy and flexible addon to add context menus anywhere in your application","archived":false,"fork":false,"pushed_at":"2023-10-17T07:21:12.000Z","size":1833,"stargazers_count":17,"open_issues_count":6,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-16T22:56:13.811Z","etag":null,"topics":["addon","context","context-menu","ember","ember-addon","hacktoberfest","menu","right-click"],"latest_commit_sha":null,"homepage":"https://fabriquartz.github.io/ember-right-click-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/Fabriquartz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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}},"created_at":"2020-02-07T10:54:35.000Z","updated_at":"2024-05-30T02:59:49.000Z","dependencies_parsed_at":"2024-11-09T22:03:37.537Z","dependency_job_id":"1225cb3f-5081-4467-a844-c2e0e4f00c2e","html_url":"https://github.com/Fabriquartz/ember-right-click-menu","commit_stats":{"total_commits":65,"total_committers":7,"mean_commits":9.285714285714286,"dds":0.7076923076923076,"last_synced_commit":"540f0c20c0325cfbd871ebe2d9c2a6b970961540"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fabriquartz%2Fember-right-click-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fabriquartz%2Fember-right-click-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fabriquartz%2Fember-right-click-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fabriquartz%2Fember-right-click-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Fabriquartz","download_url":"https://codeload.github.com/Fabriquartz/ember-right-click-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225578938,"owners_count":17491282,"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":["addon","context","context-menu","ember","ember-addon","hacktoberfest","menu","right-click"],"created_at":"2024-11-20T15:01:26.503Z","updated_at":"2024-11-20T15:01:34.966Z","avatar_url":"https://github.com/Fabriquartz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Ember Observer Score](https://emberobserver.com/badges/ember-right-click-menu.svg)](https://emberobserver.com/addons/ember-right-click-menu)\n\nEmber Right Click Menu\n==============================================================================\n\nAn easy and flexible addon to add context menus anywhere in your application\n\nCompatibility\n------------------------------------------------------------------------------\n\nThis addon is made for Ember Octane, with glimmer components\n\n* Ember.js v3.20 or above\n* Ember CLI v3.20 or above\n* Node.js v12 or above\n\n\nInstallation\n------------------------------------------------------------------------------\n\n```sh\nember install ember-right-click-menu\n```\n\nSetup\n------------------------------------------------------------------------------\nThe right click menu needs some styling, which must be included manually. Add one of the following imports to your application. If you don't want any custom styling and style the right click menu on your own, you can just import the default.\n\n```css\n@import 'ember-right-click-menu';\n@import 'ember-right-click-menu-default'; /* without any additional styling */\n```\n\nIf you don't want to include material icons, you can add the following lines to your styling instead\n\n```css\n.ember-right-click-menu {\n  display: none;\n}\n\n.ember-right-click-menu[data-show] {\n  display: block;\n}\n```\n\nIn oder to make the context-menu work, you need to include the following line in your application. For example in the index.html or application.hbs.\n\n```hbs\n\u003cdiv id=\"ember-right-click-menu-wormhole\"\u003e\u003c/div\u003e\n```\n\nPreview\n------------------------------------------------------------------------------\n![Ember Right Click Menu](screenshot-1.png)\n\nLive demo: https://fabriquartz.github.io/ember-right-click-menu/\n\nUsage\n------------------------------------------------------------------------------\n\nThe right click menu will be applied to its parent element. Options for the right click menu are added via a simple list of objects that contain a name, an action and a property to make it disabled. You can nest options to create a multi level context menu.\n```js\nitems = [\n  { title: \"Link\", action: this.saveHyrule },\n  { title: \"Zelda\", action: this.petEpona, disabled: true },\n  { title: \"Navi\", items: [\n    { title: \"Annoy the gamer\", action: this.sayHeyListen },\n    { title: \"Help Link out\", action: this.sayHeyListen },\n    { title: \"Yell for attention\", action: this.sayHeyListen },\n  ]}\n]\n\n```\n```hbs\n\u003cspan\u003e\n  Element with context menu\n  \u003cRightClickMenu @items={{this.items}} /\u003e\n\u003c/span\u003e\n```\n\n\n\nThe following attributes can be used to add your items:\n- `action` (function to trigger on click)\n- `class` (string to add classnames to the list item)\n- `disabled` (boolean to enable/disable a list item)\n- `divider` (boolean to add a visual divider after the list item it's on)\n- `title` (string to show in the list item)\n\n\nCustomize\n------------------------------------------------------------------------------\nYou can render your own template or component in the menu item by passing as shown in the example below. Add anything you like to your list of objects (as shown before) to be able to use it in your template.\n\n```hbs\n\u003cspan\u003e\n  Element with context menu\n  \u003cRightClickMenu @items={{this.items}} as |item|\u003e\n    \u003cdiv\u003e\n      \u003cPaperIcon @icon={{@item.iconName}}\u003e\n      \u003clabel\u003e\n        {{@item.title}}\n      \u003c/label\u003e\n      \u003cspan class=\"subtitle\"\u003e\n        {{@item.subtitle}}\n      \u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/RightClickMenu\u003e\n\u003c/span\u003e\n```\n\n\nContributing\n------------------------------------------------------------------------------\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabriquartz%2Fember-right-click-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabriquartz%2Fember-right-click-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabriquartz%2Fember-right-click-menu/lists"}