{"id":19832311,"url":"https://github.com/link2twenty/l2t-context-menu","last_synced_at":"2025-02-28T17:45:33.107Z","repository":{"id":58234800,"uuid":"46055236","full_name":"Link2Twenty/l2t-context-menu","owner":"Link2Twenty","description":"Polymer element to replace right click functionality","archived":false,"fork":false,"pushed_at":"2018-01-29T14:34:13.000Z","size":13792,"stargazers_count":6,"open_issues_count":1,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-11T10:22:00.989Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://link2twenty.github.io/l2t-context-menu/","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Link2Twenty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-12T13:39:04.000Z","updated_at":"2022-06-25T04:47:43.000Z","dependencies_parsed_at":"2022-08-31T09:42:13.223Z","dependency_job_id":null,"html_url":"https://github.com/Link2Twenty/l2t-context-menu","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-context-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-context-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-context-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-context-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Link2Twenty","download_url":"https://codeload.github.com/Link2Twenty/l2t-context-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241191629,"owners_count":19925302,"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":[],"created_at":"2024-11-12T11:37:22.045Z","updated_at":"2025-02-28T17:45:33.086Z","avatar_url":"https://github.com/Link2Twenty.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"⚠️ DEPRECATED: This project is no longer actively developed ⚠️\n\nPlease use [vaadin-context-menu](https://github.com/vaadin/vaadin-context-menu)\n\n# \u003c l2t-context-menu \u003e\nHave a quick look at the [Component page](http://link2twenty.github.io/l2t-context-menu/components/l2t-context-menu/)\n\nHere is a demo where l2t-context-menu is used with the [Polymer Starter Kit](http://link2twenty.github.io/l2t-context-menu/starter/app) to use right hand click anywhere within the purple/blue header.\n\n## What is it?\n\"l2t-context-menu\" is a polymer element to replace the standard right click 'context menu'.\n\nHere's a sneak peak of the demo page\n\n![Screenshot](https://media.giphy.com/media/3ornjY6GrfvyQFAWxG/giphy.gif)\n\n## Getting started\n\n### Install with bower\n\nFirst you need bower, [see their site](http://bower.io/) for details \n\n```\nbower install --save l2t-context-menu\n```\n\n### Attributes\n\n| Attribute Name | Functionality | Default |\n|----------------|-------------|-------------|\n| parentclass* | Sting for storing class name of which classes should be listened too | \"default\" |\n\nrequired*\n\n### Styling\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--context-background-color` | Background color of the menu. | `#fff`\n`--context-text-color` | Text color within the menu. | `#333`\n`--context-link-text-color` | Text color and on hover background color for links\u003cbr\u003eFor text within 'A' tags. | `#0066aa`\n`--context-horizontal-rule-color` | Color of 'HR' tags. | `#bcbcbc`\n\n### How to use\n\nIf you are looking at useing other peoples custom polymer elements I am going to guess you have some idea what's going on already. If not have a look at the [polymer site](http://polymer-project.org).\n\nPut a link to l2t-context-menu in your header, it should look something like.\n```html\n\u003clink rel=\"import\" href=\"bower_components/l2t-context-menu/l2t-context-menu.html\"\u003e\n```\n\nNow that you have imported it you can get to using it on your page\n```html\n\u003cbody\u003e\n\u003cdiv class=\"specialcase\"\u003e\nText with a special context menu\n\u003c/div\u003e\nText with a standard context menu\n\u003cl2t-context-menu parentclass=\"specialcase\" class=\"orange\"\u003e\n  \u003cli\u003e\u003cb\u003eFirst List Items:\u003c/b\u003e\u003c/li\u003e\n  \u003cpaper-item\u003e\u003ca href=\"#\"\u003eItem 1\u003c/a\u003e\u003c/paper-item\u003e\n  \u003cpaper-item\u003e\u003ca href=\"#\"\u003eItem 2\u003c/a\u003e\u003c/paper-item\u003e\n  \u003chr\u003e\n  \u003cli\u003e\u003cb\u003eMore Items:\u003c/b\u003e\u003c/li\u003e\n  \u003cpaper-item\u003e\u003ca href=\"#\"\u003eItem 3\u003c/a\u003e\u003c/paper-item\u003e\n\u003c/l2t-context-menu\u003e\n\u003c/body\u003e\n```\n\nAnd just like that you have a custom menu, right click within the div and the custom menu opens right click anywhere else and you get the standard one.\n\nTo theme the menu from above we would have added a little something into our head tags\n\n```html\n\u003cstyle is=\"custom-style\"\u003e\n  .orange {\n    --context-background-color: #F57C00;\n    --context-text-color: #FFF;\n    --context-link-text-color: #FFE0B2;\n  }\n\u003c/style\u003e\n```\nLet's have a little look at what we just made:\n![Screenshot](https://media.giphy.com/media/3oEduLDQYvcl6cSM2Q/giphy.gif)\n\nThese are, of course, optional extras to make the menu match your own app a little better.\n\n### Long press\n\nOn mobile you can simulate a right click by long pressing, which is great and means this menu is inherently compatible.\nUnfortunately if you long press text the select box takes president over the right click functionality, meaning the menu does not appear.\n\nThe easy way around this is to have some CSS to dissable text select such as\n```css\n  .nonselectable{\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink2twenty%2Fl2t-context-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flink2twenty%2Fl2t-context-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink2twenty%2Fl2t-context-menu/lists"}