https://github.com/html-next/ember-hammertime
TouchAction (aka "fastclick") Support for Ember Applications
https://github.com/html-next/ember-hammertime
Last synced: 10 months ago
JSON representation
TouchAction (aka "fastclick") Support for Ember Applications
- Host: GitHub
- URL: https://github.com/html-next/ember-hammertime
- Owner: html-next
- License: mit
- Created: 2016-01-06T00:18:15.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-06-02T16:05:21.000Z (about 6 years ago)
- Last Synced: 2024-12-06T16:48:01.043Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1.34 MB
- Stars: 56
- Watchers: 3
- Forks: 23
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Ember-hammertime
[](https://greenkeeper.io/)
[](http://badge.fury.io/js/ember-hammertime)
[](http://emberobserver.com/addons/ember-hammertime)
[](https://travis-ci.org/html-next/ember-hammertime)
Single install instant support for removing the click delay across all platforms.
## Usage
`ember install ember-hammertime`
This will run the default blueprint which additionally installs `hammer-time`.
Once this is complete, you're done! If you really want to know what this does and how, read on below.
## About
Ember-hammertime uses an AST Walker to add [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)
styles to DOM Elements that need them to work with the [hammer-time](https://github.com/hammerjs/hammer-time)
touch-action polyfill. Hammer-time is a *better* fastclick through polyfill.
## Support, Questions, Collaboration
Join the [Ember community on Discord](https://discord.gg/zT3asNS)
### Status
[Changelog](./CHANGELOG.md)
[](https://david-dm.org/html-next/ember-hammertime)
[](https://david-dm.org/html-next/ember-hammertime#info=devDependencies)
## Usage
### Using Touch-action as a fastclick
`ember-hammertime` uses [hammer-time](https://github.com/hammerjs/hammer-time) as a polyfill for `touch-action` CSS
to enable cross-platform `fastclick`. This polyfill works based on the presence of `style="touch-action: ;"`
being present on an element.
For most things, you'll want the following `style` attribute to be present on the component or element.
```html
```
`cursor: pointer;` is required because of [bugs in Safari 9.3's](https://github.com/emberjs/ember.js/issues/13171#issuecomment-200521638)
partial handling of touch-action, but is also recommended CSS for all mobile browsers.
The AST Walker automatically adds this style to elements when any of the following rules is matched.
- The element's tagName is `button`, `a`, or `textarea`.
- The element's tagName is `input` and the element's `type` is `button`, `submit`, `text`, or `file`.
- The element has an action defined on it (e.g. `
`)
All `link-components` (e.g. `{{link-to}}` as well as components with attributes matching the rules utilized
by the AST walker have a bound `style` attribute set to the above as well.
This is done via the touchAction Mixin available in `ember-hammertime/mixins/touch-action`.
### pointer CSS
It is heavily recommended to add the following rule to your site's CSS
```css
[data-ember-action], a, button, input, .link {
cursor: pointer;
}
```
### Configuration
The AST Walker can be configured via config/environment.js:
```javascript
var ENV = {
// ...
EmberHammertime: {
touchActionOnAction: true,
touchActionAttributes: ['onclick'],
touchActionSelectors: ['button', 'input', 'a', 'textarea'],
touchActionProperties: 'touch-action: manipulation; -ms-touch-action: manipulation; cursor: pointer;'
}
}
```
The same properties can be overridden on the touchAction Mixin or on your components directly.
##### `touchActionOnAction`
Defines whether or not to automatically apply the touch-action styles to elements that have an `action`.
Defaults to `true`
##### `touchActionAttributes`
Defines the attributes to look for on elements to automatically apply the touch-action styles to.
Defaults to `['onclick']`
##### `touchActionSelectors`
Defines which elements touch-action is applied to.
Defaults to `['button', 'input', 'a', 'textarea']`
##### `touchActionProperties`
Defines the touch-action CSS style to be applied to the above selectors and `link-components`.
Defaults to `'touch-action: manipulation; -ms-touch-action: manipulation; cursor: pointer;'`
### Disabling hammertime for specific components
To disable the adding of `touchActionProperties` on a specific component, set `ignoreTouchAction=true` by passing it in or setting it on the component's root.
## Contributing
- Open an Issue for discussion first if you're unsure a feature/fix is wanted.
- Branch off of `develop` (default branch)
- Use descriptive branch names (e.g. `/`)
- Use [Angular Style Commits](https://github.com/angular/angular.js/blob/v1.4.8/CONTRIBUTING.md#commit)
- PR against `develop` (default branch).
### Commmits
Angular Style commit messages have the full form:
```
():
```
But the abbreviated form (below) is acceptable and often preferred.
```
():
```
Examples:
- chore(deps): bump deps in package.json and bower.json
- docs(component): document the `fast-action` component