arthur5005/ember-stopwatch

Ember addon providing a stopwatch and timer utility

ember-stopwatch

This addon provides some utilities and services that make it easier to control timing in your Ember applications.

Installation

ember install ember-stopwatch

Demo

Demo

Usage

• Stopwatch
• Timer
• Clock

Stopwatch

A Stopwatch is a utility that allows you to be notified when ticks occur, making it easy for you to asynchronously take action on time-based boundaries.

The Stopwatch uses @tracked properties so your application can react to changes in time, based on the tick interval.

The stop and reset methods allow you to either stop on the next tick interval, or forcefully (i.e. immediately).

As a utility

This is the primary use-case, and allows you to create multiple stopwatches anywhere in your application.

import Stopwatch from "ember-stopwatch/utils/stopwatch";

// ...
let stopwatch = new Stopwatch();
stopwatch.start();
stopwatch.stop();
stopwatch.reset();
stopwatch.on("tick", someHandler);
// ...

    {{this.stopwatch.elapsedMillis}}
    {{this.stopwatch.numTicks}}

As a Service

A stopwatch service can be used that is shared globally in your application.

export default class extends Component {
    @service stopwatch;
    @action
    start() {
        this.stopwatch.start();
    }
    @action
    stop() {
        this.stopwatch.stop();
    }
}

Timer

A Timer is a utility that extends the Stopwatch behavior described above, except that the use-case is to handle "countdown" eventing. This enables your application to react to a timeout event.

Additionally, the Timer can be paused and restarted and contains reactful state properties (e.g. remainingMillis and isExpired).

import Timer from "ember-stopwatch/utils/timer";

// ...
let timer = new Timer(60000);
timer.on("expired", this, expirationHandler);
timer.start();
// ...

expirationHandler(){
    console.log('Time is up!');
}

    {{this.timer.remainingMillis}}
    {{this.timer.isExpired}}

Clock

As a utility

A Clock is a utility that tracks time ticks for the current system time.

A Clock triggers events on time ticks, including second, minute, hour, day, and also provides reactful time and date properties.

import Clock from "ember-stopwatch/utils/clock";

// ...
let clock = new Clock();
clock.on("second", myHandler.bind(this, "second"));
clock.on("minute", myHandler.bind(this, "minute"));
clock.start();
// ...

myHandler(type){
    console.log(`${type} ticked`);
}

    {{this.clock.time}}

As a Service

A clock service can be used that is shared globally in your application.

export default class extends Component {
    @service clock;
}

    {{moment-format this.clock.time}}

Compatibility

• Ember.js v3.12 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.