Skip to content

Latest commit

 

History

History
146 lines (93 loc) · 5.04 KB

README.md

File metadata and controls

146 lines (93 loc) · 5.04 KB
Raw

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