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, 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

isabella232 / ember-hammertime Goto Github PK