ember-hammertime
Advanced tools
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.
touchActionOnActionDefines whether or not to automatically apply the touch-action styles to elements that have an action.
Defaults to true
touchActionAttributesDefines the attributes to look for on elements to automatically apply the touch-action styles to.
Defaults to ['onclick']
touchActionSelectorsDefines which elements touch-action is applied to.
Defaults to ['button', 'input', 'a', 'textarea']
touchActionPropertiesDefines 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 componentFAQs
TouchAction Support for Ember Applications.
The npm package ember-hammertime receives a total of 1,362 weekly downloads. As such, ember-hammertime popularity was classified as popular.
We found that ember-hammertime demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.