Skip to content
TouchAction (aka "fastclick") Support for Ember Applications
Branch: master
Clone or download
Latest commit 7c50bdf Oct 16, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon typecheck on touchAction Mar 17, 2018
app Ember 3.0 beta Jan 22, 2018
config Fix lint Oct 16, 2018
htmlbars-plugins Fix lint Oct 16, 2018
tests Fix lint Oct 16, 2018
vendor Initial Commit from Ember CLI v1.13.13 Jan 6, 2016
.editorconfig Update ember (#35) May 4, 2017
.ember-cli Initial Commit from Ember CLI v1.13.13 Jan 6, 2016
.eslintignore Ember 3.4 Oct 13, 2018
.eslintrc.js Ember 3.4 Oct 13, 2018
.gitignore Ember 3.4 Oct 13, 2018
.npmignore
.template-lintrc.js
.travis.yml Ember 3.4 Oct 13, 2018
.watchmanconfig Initial Commit from Ember CLI v1.13.13 Jan 6, 2016
CHANGELOG.md Released v1.5.0 Apr 14, 2018
LICENSE.md Initial Commit from Ember CLI v1.13.13 Jan 6, 2016
README.md Update Slack to Discord Sep 12, 2018
ember-cli-build.js Ember 3.0 beta Jan 22, 2018
index.js
package.json 1.6.0 Oct 16, 2018
testem.js Ember 3.4 Oct 13, 2018
yarn.lock Bump broccoli related deps Oct 16, 2018

README.md

Ember-hammertime

Greenkeeper badge

npm version Ember Observer Score Build Status

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

dependencies devDependency Status

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, 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. <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-action component
You can’t perform that action at this time.