Ember-hold-button NPM

ember-hold-button

Hold to confirm buttons, easily customisable, for ember-cli. After holding on the button for a specified amount of time, the given action is performed (e.g. hold to delete).

Rectangle Button Circle Button Border Circle Button Modified Rectangle Button

Installation

ember install ember-hold-button

Usage

There are a few types of buttons out of the box; rectangle, circle, and border-circle.

### Rectangle

{{#hold-button type="rectangle" action="delete"}}
  Hold to Delete
{{/hold-button}}

Rectangle Button

Circle

{{hold-button type="circle" action="finished"}}

Circle Button

Border Circle

{{hold-button delay=800 type='border-circle' action='finished'}}

Border Circle Button

Options

Option	Description	Default
delay	Time the button should be held for, in milliseconds.	`500`.
action	The action to perform on completion.	`null`
type	Style of the button. `circle`, `border-circle` or `rectangle`.	`rectangle`

You can also pass arguments to the component which will then be passed to the action.

{{hold-button model action="save" type="rectangle"}}

Styling

The following are a few examples of how to style the button. The component is just a button tag containing a yield and a span. The span is the part that animates.

{{yield}}
<span></span>

When you specify a type for the hold-button, that type becomes a class for the component. So you could specify a custom type (e.g. type='my-cool-button') to customise from scratch.

The button always has the CSS class ember-hold-button, and also has is-holding while it is being held and is-complete upon completion. These are bound to the isHolding and isComplete attributes respectively, if you want to take control of this.

Full progress bar

Full Progress Bar

Template

{{#hold-button type="rectangle" action="finished"}}
  Hold to Delete
{{/hold-button}}

CSS

.ember-hold-button.rectangle {
  background: transparent;
  color: #aaa;
}

.ember-hold-button.rectangle span {
  z-index: -1;
  height: 100%;
  background-color: black;
}

Reverse circle animation

Reverse Circle Animation

Template

{{hold-button type="circle" action="finished"}}

CSS

.ember-hold-button.circle {
  border-color: orange;
}

.ember-hold-button.circle span {
  background-color: orange;
  transform: scale(1);
}

.ember-hold-button.circle.is-holding span {
  transform: scale(0);
}

Completion styling

Rectangle Button with Completion Style

This one modifies the rectangle style to animate the progress bar height instead of width and places text in pseudoelements.

Template

{{hold-button action="finished"}}

CSS

.ember-hold-button.rectangle {
  width: 160px;
}

.ember-hold-button.rectangle span {
  height: 0;
  transition-property: height;
  width: 100%;
  z-index: 0;
}

.ember-hold-button.rectangle.is-holding span {
  height: 100%;
}

.ember-hold-button.rectangle:before {
  content: 'Hold to delete';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.ember-hold-button.rectangle:after {
  content: 'Deleted ✓';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2ECC71;
  transition: 0.4s;
}

.ember-hold-button.rectangle.is-complete:after {
  opacity: 1;
}

.ember-hold-button.rectangle.is-complete:before {
  content: '';
}