{"id":19206862,"url":"https://github.com/html-next/ember-hammertime","last_synced_at":"2025-08-20T08:33:21.814Z","repository":{"id":57223857,"uuid":"49100869","full_name":"html-next/ember-hammertime","owner":"html-next","description":"TouchAction (aka \"fastclick\") Support for Ember Applications","archived":false,"fork":false,"pushed_at":"2020-06-02T16:05:21.000Z","size":1403,"stargazers_count":56,"open_issues_count":35,"forks_count":23,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-06T16:48:01.043Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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}},"created_at":"2016-01-06T00:18:15.000Z","updated_at":"2021-10-21T20:13:07.000Z","dependencies_parsed_at":"2022-09-04T07:40:51.234Z","dependency_job_id":null,"html_url":"https://github.com/html-next/ember-hammertime","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fember-hammertime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fember-hammertime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fember-hammertime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/html-next%2Fember-hammertime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/html-next","download_url":"https://codeload.github.com/html-next/ember-hammertime/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230021178,"owners_count":18160823,"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:14.235Z","updated_at":"2024-12-19T09:08:00.219Z","avatar_url":"https://github.com/html-next.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember-hammertime\n\n[](https://greenkeeper.io/)\n\n[](http://badge.fury.io/js/ember-hammertime)\n[](http://emberobserver.com/addons/ember-hammertime)\n[](https://travis-ci.org/html-next/ember-hammertime)\n\nSingle install instant support for removing the click delay across all platforms.\n\n## Usage\n\n`ember install ember-hammertime`\n\nThis will run the default blueprint which additionally installs `hammer-time`.\n\nOnce this is complete, you're done! If you really want to know what this does and how, read on below.\n\n## About\n\nEmber-hammertime uses an AST Walker to add [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)\n styles to DOM Elements that need them to work with the [hammer-time](https://github.com/hammerjs/hammer-time)\n touch-action polyfill. Hammer-time is a *better* fastclick through polyfill.\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/html-next/ember-hammertime)\n[](https://david-dm.org/html-next/ember-hammertime#info=devDependencies)\n\n## Usage\n\n### Using Touch-action as a fastclick\n\n`ember-hammertime` uses [hammer-time](https://github.com/hammerjs/hammer-time) as a polyfill for `touch-action` CSS\nto enable cross-platform `fastclick`. This polyfill works based on the presence of `style=\"touch-action: \u003cfoo\u003e;\"`\nbeing present on an element.\n\nFor most things, you'll want the following `style` attribute to be present on the component or element.\n\n```html\n\u003cdiv style=\"touch-action: manipulation; -ms-touch-action: manipulation; cursor: pointer;\"\u003e\n```\n\n`cursor: pointer;` is required because of [bugs in Safari 9.3's](https://github.com/emberjs/ember.js/issues/13171#issuecomment-200521638) \npartial handling of touch-action, but is also recommended CSS for all mobile browsers.\n\nThe AST Walker automatically adds this style to elements when any of the following rules is matched.\n\n- The element's tagName is `button`, `a`, or `textarea`.\n- The element's tagName is `input` and the element's `type` is `button`, `submit`, `text`, or `file`. \n- The element has an action defined on it (e.g. `\u003cdiv {{action \"foo\"}}\u003e`)\n\nAll `link-components` (e.g. `{{link-to}}` as well as components with attributes matching the rules utilized\nby the AST walker have a bound `style` attribute set to the above as well.\n\nThis is done via the touchAction Mixin available in `ember-hammertime/mixins/touch-action`.\n\n### pointer CSS\n\nIt is heavily recommended to add the following rule to your site's CSS\n\n```css\n[data-ember-action], a, button, input, .link {\n cursor: pointer;\n}\n```\n\n### Configuration\n\nThe AST Walker can be configured via config/environment.js:\n\n```javascript\nvar ENV = {\n // ...\n EmberHammertime: {\n touchActionOnAction: true,\n touchActionAttributes: ['onclick'],\n touchActionSelectors: ['button', 'input', 'a', 'textarea'],\n touchActionProperties: 'touch-action: manipulation; -ms-touch-action: manipulation; cursor: pointer;'\n }\n}\n```\n\nThe same properties can be overridden on the touchAction Mixin or on your components directly.\n\n##### `touchActionOnAction`\n\nDefines whether or not to automatically apply the touch-action styles to elements that have an `action`.\nDefaults to `true`\n\n##### `touchActionAttributes`\n\nDefines the attributes to look for on elements to automatically apply the touch-action styles to.\nDefaults to `['onclick']`\n\n##### `touchActionSelectors`\n\nDefines which elements touch-action is applied to.\nDefaults to `['button', 'input', 'a', 'textarea']`\n\n##### `touchActionProperties`\n\nDefines the touch-action CSS style to be applied to the above selectors and `link-components`.\nDefaults to `'touch-action: manipulation; -ms-touch-action: manipulation; cursor: pointer;'`\n\n### Disabling hammertime for specific components\n\nTo disable the adding of `touchActionProperties` on a specific component, set `ignoreTouchAction=true` by passing it in or setting it on the component's root.\n\n## Contributing\n\n - Open an Issue for discussion first if you're unsure a feature/fix is wanted.\n - Branch off of `develop` (default branch)\n - Use descriptive branch names (e.g. `\u003ctype\u003e/\u003cshort-description\u003e`)\n - Use [Angular Style Commits](https://github.com/angular/angular.js/blob/v1.4.8/CONTRIBUTING.md#commit)\n - PR against `develop` (default branch).\n\n\n### Commmits \n\nAngular Style commit messages have the full form:\n \n ```\n \u003ctype\u003e(\u003cscope\u003e): \u003ctitle\u003e\n \n \u003cbody\u003e\n \n \u003cfooter\u003e\n ```\n \n But the abbreviated form (below) is acceptable and often preferred.\n \n ```\n \u003ctype\u003e(\u003cscope\u003e): \u003ctitle\u003e\n ```\n \n Examples:\n \n - chore(deps): bump deps in package.json and bower.json\n - docs(component): document the `fast-action` component\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtml-next%2Fember-hammertime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtml-next%2Fember-hammertime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtml-next%2Fember-hammertime/lists"}