{"id":19206871,"url":"https://github.com/html-next/ember-hammerjs","last_synced_at":"2025-05-12T17:27:58.373Z","repository":{"id":66281343,"uuid":"54203132","full_name":"html-next/ember-hammerjs","owner":"html-next","description":"Hammer.js primitives for Ember Applications.","archived":false,"fork":false,"pushed_at":"2018-09-12T22:42:49.000Z","size":136,"stargazers_count":2,"open_issues_count":5,"forks_count":2,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2025-05-11T00:34:40.117Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/html-next.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-03-18T13:29:36.000Z","updated_at":"2019-09-25T15:09:22.000Z","dependencies_parsed_at":"2023-09-26T14:12:47.829Z","dependency_job_id":null,"html_url":"https://github.com/html-next/ember-hammerjs","commit_stats":{"total_commits":126,"total_committers":11,"mean_commits":"11.454545454545455","dds":"0.25396825396825395","last_synced_commit":"3f2b9524c03eab7c4b4c7463642d8444d79e222d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fember-hammerjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fember-hammerjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fember-hammerjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fember-hammerjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/html-next","download_url":"https://codeload.github.com/html-next/ember-hammerjs/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253506834,"owners_count":21919115,"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-09T13:17:15.760Z","updated_at":"2025-05-12T17:27:58.354Z","avatar_url":"https://github.com/html-next.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Ember HammerJS \n==============\n\n[](http://badge.fury.io/js/ember-hammerjs)\n[](https://travis-ci.org/runspired/ember-hammerjs)\n[](http://emberobserver.com/addons/ember-hammerjs)\n\nEmber HammerJS provides an easy way to use hammer.js by making it simple\nto define and use [HammerJS](https://github.com/hammerjs/hammer.js) managers\n and recognizers throughout your app.\n\nThis library provides the base primitives which [ember-gestures](https://github.com/runspired/ember-gestures)\nuses to give you hammer.js based event methods on your components.\n\nIf you are looking for a complete box solution, or \"fast click\" support\nyou will want to check out ember-gestures and [ember-hammertime](https://github.com/runspired/ember-hammertime).\nYou should use this library directly when you need isolated, targeted\nuse of managers and recognizers.\n\n## Installation\n\nMake sure you stop and restart your `ember-cli` asset server after installation.\n\n**via `ember install`**\n\n```cli\nember install ember-hammerjs\n```\n\nThis will run the default blueprint which additionally installs `hammer.js`.\n\n**via `npm install`**\n\nIf you installed this via `npm`, you will need to run the default blueprint.\n\n```cli\nnpm install --save-dev ember-hammerjs \u0026\u0026 ember g ember-hammerjs\n```\n\n\n## Support, Questions, Collaboration\n\nJoin the [Ember community on Discord](https://discord.gg/zT3asNS)\n\n### Status\n\n[Changelog](./CHANGELOG.md)\n\n[](https://david-dm.org/runspired/ember-hammerjs)\n[](https://david-dm.org/runspired/ember-hammerjs#info=devDependencies)\n\n\n#### Recognizers and Managers\n\nA `Recognizer` detects a gesture on a target element by listening to \nreceived touch, mouse, and pointer events and passing through a series\nof rules to determine whether it's gesture is occurring.\n\n`Recognizer`s are registered with a `Manager`, which emits the recognized\ngestures for consumption by your app. This addon does the grunt work of\ncreating Managers and wiring up Recognizers for you.\n\nAll you need to do to use gestures is tell your app where you want a\nManager to be created and what Recognizers it should have.\n\nExample\n```js\nimport RecognizerMixin from 'ember-hammerjs/mixins/recognizers';\nimport Ember from 'ember';\n\nconst {\n Component\n} = Ember;\n\nexport default Component.extend(RecognizerMixin, {\n recognizers: 'pan tap press'\n});\n```\n\nThe component would create a new Manager and add the recognizers for [pan](./addon/recognizers/pan.js),\n[tap](./addon/recognizers/tap.js), and [press](./addon/recognizers/press.js).\n\nThe component would recognize gestures based on events originating on it\nor it's child elements.\n\nYou should be strategic about where you put your components with Managers.\nYou don't need a lot of Managers, you just need them placed strategically.\nYou could even put one at the base of your app, but be warned `pinch`\n`rotate` `pan` and `swipe` can break scrolling behavior if not placed correctly.\n\n##### Note\n\n`pan` and `swipe` are horizontal only (configured this way to avoid \nbreaking vertical scroll). `vertical-pan` and `vertical-swipe` are\nvertical only (configured this way to avoid breaking horizontal scroll).\n\n`vertical-` variants will still trigger the usual `pan` and `swipe` events,\nand can be used together with `pan` and `swipe` to capture gestures both\nhorizontally and vertically at the same time.\n\n#### Using Gestures\n\nUsing gestures emitted by Hammer recognizers with Ember is almost like using any other event with Ember.\nYour recognizers will be configured to emit `Events`, so to consume a gesture, you just need to add an\nevent handler to your component. The handler's name just needs to match the camelCase version of a gesture\nevent.\n\nExample\n```js\nimport Ember from 'ember';\n\nconst {\n Component\n} = Ember;\n\nexport default Component.extend({\n panStart(e) {\n // do something with the event\n }\n});\n```\n\nGesture events bubble through the DOM, so you can use them with actions as well.\n\n```hbs\n\u003cdiv {{action \"foo\" on=\"swipeRight\"}}\u003e\n```\n\n#### Create A Recognizer\n\n`ember g recognizer \u003cname\u003e`\n\nThis will generate the file `ember-gestures/recognizers/name.js`.\nOnce you've filled out the recognizer (see [./addon/recognizers/](./addon/recognizers/) for examples),\nit will be available to use in your app just like the default recognizers.\n\n#### Increase the size of touchable areas to improve user experience on small controls\n\nSometimes smaller buttons or critical buttons need a larger capture area than their visible area.\nYou can increase the area that recognizes touch events for a specific button with a little bit of CSS.\n\n[Example Gist](https://gist.github.com/runspired/506f39a4abb2be48d63f)\n\n### Testing\n\n\nThe jQuery events you need to trigger are the Hammer variant, meaning it\nis entirely lowercase `swiperight`, `panup`.\n\njQuery events come with baggage, and using the `trigger` helper executes\nhandlers in a different order than they would otherwise execute, and in\nsome situations will cause a handler to execute twice. If you are experiencing\nissues with testing gesture events, try creating your own `trigger` helper\nthat uses native APIs instead of jQuery to trigger the event.\n\n## Tips and Tricks\n\nDon't add recognizers to components created within an `{{#each}}` loop.\nUse a recognizer at the base of the `each` instead.\n\n## Contributing\n\nContributions are very welcome.\n\nWhen making a PR try to use the following conventions:\n\n**Commit Messages:**\n\n`type(shortname): action based description`\n\nExamples:\n\n- chore(deps): bump deps in package.json and bower.json\n- docs(component): document the `fast-action` component\n\n**Branch Naming:**\n\n`type/short-description`\n\nExamples:\n\n- chore/bump-deps\n- docs/fast-action-component\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtml-next%2Fember-hammerjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtml-next%2Fember-hammerjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtml-next%2Fember-hammerjs/lists"}