Accelerating Increment / Decrement Buttons

This example demonstrates a few different concepts:

• Tricky time-based operations like acceleration are simplified by the sequential style of task functions
• You can use (perform taskName) in place of anywhere you might want to use a classic Ember action.

Live Example

Num: 0

(Hold down the buttons to accelerate.)

--Decrease Increase++

JavaScript (task)

export default class IncrementButtonsController extends Controller {
  count = 0;

  @task *incrementBy(inc) {
    let speed = 400;
    while (true) {
      this.incrementProperty('count', inc);
      yield timeout(speed);
      speed = Math.max(50, speed * 0.8);
    }
  }
}

Template

<p>
  <PressAndHoldButton @press={{perform this.incrementBy -1}} @release={{cancel-all this.incrementBy}}>
    --Decrease
  </PressAndHoldButton>

  <PressAndHoldButton @press={{perform this.incrementBy 1}} @release={{cancel-all this.incrementBy}}>
    Increase++
  </PressAndHoldButton>
</p>

Template (button component)

<button
  {{! template-lint-disable no-down-event-binding }}
  {{on "touchstart" @press}}
  {{on "mousedown" @press}}
  {{on "touchend" @release}}
  {{on "mouseleave" @release}}
  {{on "mouseup" @release}}
  type="button">
  {{yield}}
</button>