ember-hammertime
ember-hammertime copied to clipboard
html-next
TouchAction (aka "fastclick") Support for Ember Applications
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 styles to DOM Elements that need them to work with the hammer-time touch-action polyfill. Hammer-time is a better fastclick through polyfill.
Support, Questions, Collaboration
Join the Ember community on Discord
Status
Changelog
Usage
Using Touch-action as a fastclick
ember-hammertime uses 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: <foo>;"
being present on an element.
For most things, you'll want the following style attribute to be present on the component or element.
<div style="touch-action: manipulation; -ms-touch-action: manipulation; cursor: pointer;">
cursor: pointer; is required because of bugs in Safari 9.3's
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, ortextarea. - The element's tagName is
inputand the element'stypeisbutton,submit,text, orfile. - The element has an action defined on it (e.g.
<div {{action "foo"}}>)
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
[data-ember-action], a, button, input, .link {
cursor: pointer;
}
Configuration
The AST Walker can be configured via config/environment.js:
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.
<type>/<short-description>) - Use Angular Style Commits
- PR against
develop(default branch).
Commmits
Angular Style commit messages have the full form:
<type>(<scope>): <title>
<body>
<footer>
But the abbreviated form (below) is acceptable and often preferred.
<type>(<scope>): <title>
Examples:
- chore(deps): bump deps in package.json and bower.json
- docs(component): document the
fast-actioncomponent
html-next