Single install instant support for removing the click delay across all platforms.
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.
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.
Join the Ember community on Discord
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.
button
, a
, or textarea
.input
and the element's type
is button
, submit
, text
, or file
. <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
.
It is heavily recommended to add the following rule to your site's CSS
[data-ember-action], a, button, input, .link {
cursor: pointer;
}
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;'
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.
develop
(default branch)<type>/<short-description>
)develop
(default branch).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:
fast-action
component