{"id":15539181,"url":"https://github.com/tzellman/ember-stopwatch","last_synced_at":"2025-04-19T13:49:43.209Z","repository":{"id":40308513,"uuid":"251307198","full_name":"tzellman/ember-stopwatch","owner":"tzellman","description":"Ember addon providing a stopwatch and timer utility","archived":false,"fork":false,"pushed_at":"2025-04-12T10:57:05.000Z","size":7833,"stargazers_count":5,"open_issues_count":8,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T11:42:28.616Z","etag":null,"topics":["ember","ember-addon","ember-modifier","emberjs","hacktoberfest","modifier","stopwatch","time","timer"],"latest_commit_sha":null,"homepage":"https://tzellman.github.io/ember-stopwatch/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tzellman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-30T13:06:01.000Z","updated_at":"2022-10-03T13:36:10.000Z","dependencies_parsed_at":"2024-02-06T08:27:47.904Z","dependency_job_id":"ded9f4d5-543f-4546-9647-7b35fc586aed","html_url":"https://github.com/tzellman/ember-stopwatch","commit_stats":{"total_commits":196,"total_committers":4,"mean_commits":49.0,"dds":"0.34693877551020413","last_synced_commit":"5cba9562da60083c2a16aedeaa316b1ec11ce9bb"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzellman%2Fember-stopwatch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzellman%2Fember-stopwatch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzellman%2Fember-stopwatch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzellman%2Fember-stopwatch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tzellman","download_url":"https://codeload.github.com/tzellman/ember-stopwatch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248564981,"owners_count":21125412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon","ember-modifier","emberjs","hacktoberfest","modifier","stopwatch","time","timer"],"created_at":"2024-10-02T12:09:32.904Z","updated_at":"2025-04-19T13:49:43.148Z","avatar_url":"https://github.com/tzellman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-stopwatch\n\n[![NPM][npm-badge-img]][npm-badge-link]\n[![Build Status][build-status-img]][build-status-link]\n[![Ember Observer Score][ember-observer-badge]][ember-observer-url]\n[![Ember Version][ember-version]][ember-version-url]\n[![Download count][npm-downloads-img]][npm-badge-link]\n[![Code Climate][climate-badge]][climate-badge-url]\n[![Test Coverage][coverage-badge]][coverage-badge-url]\n\nThis addon provides some utilities and services that make it easier to control timing in your Ember\napplications.\n\n## Installation\n\n```\nember install ember-stopwatch\n```\n\n## Demo\n\n[Demo](https://tzellman.github.io/ember-stopwatch/)\n\n## Usage\n\n-   [Stopwatch](#stopwatch)\n-   [Timer](#timer)\n-   [Clock](#clock)\n\n### Stopwatch\n\nA `Stopwatch` is a utility that allows you to be notified when `ticks` occur, making it easy for you\nto asynchronously take action on time-based boundaries.\n\nThe `Stopwatch` uses `@tracked` properties so your application can react to changes in time, based\non the tick interval.\n\nThe `stop` and `reset` methods allow you to either stop on the next tick interval, or forcefully (\ni.e. immediately).\n\n#### As an element modifier\n\nThe easiest and quickest way to start adding time utilities to your app is by using the\n`stopwatch-tick` modifier.\n\nYour action handler will be passed the elapsed time and number of durations (ticks).\n\nNote that the stopwatch will start as soon as your element is inserted and the modifier is\ninstrumented.\n\n```handlebars\n\u003cdiv {{stopwatch-tick 1000 (fn (mut this.finishedLoading) true)}}\u003e\n    {{#if this.finishedLoading}}\n        Waited 1 second, loaded!\n    {{/if}}\n\u003c/div\u003e\n```\n\nYou can also provide a number of ticks as an optional named parameter.\n\n```handlebars\n\u003cdiv {{stopwatch-tick 1000 (fn (mut this.finishedLoading) true) ticks=10}}\u003e\n    {{#if this.finishedLoading}}\n        Waited 10 seconds, loaded!\n    {{/if}}\n\u003c/div\u003e\n```\n\nThere also exists an alias for `stopwatch-tick` named `call-after` which may be more intuitive for\nyour use-case.\n\n```handlebars\n\u003cdiv {{call-after 1000 (fn (mut this.finishedLoading) true)}}\u003e\n    ...\n\u003c/div\u003e\n```\n\n#### As a utility\n\nThis allows you to create multiple stopwatches anywhere in your application.\n\n```javascript\nimport Stopwatch from \"ember-stopwatch/utils/stopwatch\";\n\n// ...\nlet stopwatch = new Stopwatch();\nstopwatch.start();\nstopwatch.stop();\nstopwatch.reset();\nstopwatch.on(\"tick\", someHandler);\n// ...\n```\n\n```handlebars\n{{this.stopwatch.elapsedMillis}}\n{{this.stopwatch.numTicks}}\n```\n\n#### As a Service\n\nA `stopwatch` service can be used that is shared globally in your application.\n\n```javascript\nexport default class extends Component {\n    @service stopwatch;\n\n    @action\n    start() {\n        this.stopwatch.start();\n    }\n\n    @action\n    stop() {\n        this.stopwatch.stop();\n    }\n}\n```\n\n### Timer\n\nA `Timer` is a utility that extends the `Stopwatch` behavior described above, except that the\nuse-case is to handle \"countdown\" eventing. This enables your application to react to a `timeout`\nevent.\n\nAdditionally, the `Timer` can be paused and restarted and contains reactful state properties (\ne.g. `remainingMillis` and `isExpired`).\n\n```javascript\nimport Timer from \"ember-stopwatch/utils/timer\";\n\n// ...\nlet timer = new Timer(60000);\ntimer.on(\"expired\", this, expirationHandler);\ntimer.start();\n// ...\n\nexpirationHandler(){\n    console.log('Time is up!');\n}\n```\n\n```handlebars\n{{this.timer.remainingMillis}}\n{{this.timer.isExpired}}\n```\n\n### Clock\n\n#### As an element modifier\n\nThe `clock-tick` modifier can be used to react to various time tick types, which includes `second`,\n`minute`, `hour`, and `day`.\n\nYour action handler will be passed the current time (from the clock service), when triggered.\n\nNote that the ticks will be triggered on clock time thresholds, not elapsed time / durations (e.g.\nwhen the actual clock rolls over to a new second, minute, hour, etc.).\n\n```javascript\nexport default class extends Component {\n    @tracked time;\n}\n```\n\n```handlebars\n\u003cdiv {{clock-tick \"second\" (fn (mut this.time))}}\u003e\n    {{moment-format this.time}}\n\u003c/div\u003e\n```\n\n#### As a utility\n\nA `Clock` is a utility that tracks time ticks for the current system time.\n\nA `Clock` triggers events on time ticks, including `second`, `minute`, `hour`, and `day`. A `Clock`\nalso provides reactful `time`, `date`, `second`, `minute`, `hour`, and `day` properties.\n\n```javascript\nimport Clock from \"ember-stopwatch/utils/clock\";\n\n// ...\nlet clock = new Clock();\nclock.on(\"second\", myHandler.bind(this, \"second\"));\nclock.on(\"minute\", myHandler.bind(this, \"minute\"));\nclock.start();\n// ...\n\nmyHandler(type) {\n    console.log(`${type} ticked`);\n}\n```\n\n```handlebars\n{{this.clock.time}}\n```\n\n#### As a Service\n\nA `clock` service automatically creates and starts a single instance of the `Clock` utility and is a\nproxy for properties and methods of a clock instance. A `clock` service also has `@tracked` versions\nof the clock properties `second`, `minute`, `hour`, and `day` that can be used by the other\nreactive getters in your application, including the `@computed` macros.\n\n```javascript\nexport default class extends Component {\n    @service clock;\n}\n```\n\n```handlebars\n{{moment-format this.clock.time}}\n```\n\n```javascript\nexport default class extends Component {\n    @service clock;\n\n    @computed(\"clock.minute\")\n    get timeByTheMinute() {\n        return new Date().getTime();\n    }\n\n    @computed(\"clock.hour\")\n    get timeByTheHour() {\n        return new Date().getTime();\n    }\n\n    @computed(\"clock.day\")\n    get timeByTheDay() {\n        return new Date().getTime();\n    }\n}\n```\n\n```handlebars\n\nRefreshes every second:\n{{moment-format this.clock.time}}\nRefreshes every minute:\n{{moment-format this.timeByTheMinute}}\nRefreshes every hour:\n{{moment-format this.timeByTheHour}}\nRefreshes every day:\n{{moment-format this.timeByTheDay}}\n```\n\n## Compatibility\n\n-   Ember.js v3.28 or above\n-   Ember CLI v3.28 or above\n-   Node.js v14 or above\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n\n[npm-badge-img]: https://badge.fury.io/js/ember-stopwatch.svg\n[npm-badge-link]: http://badge.fury.io/js/ember-stopwatch\n[build-status-img]: https://github.com/tzellman/ember-stopwatch/workflows/CI/badge.svg?branch=master\u0026event=push\n[build-status-link]: https://github.com/tzellman/ember-stopwatch/actions?query=workflow%3A%22CI%22\n[npm-downloads-img]: https://img.shields.io/npm/dt/ember-stopwatch.svg\n[ember-observer-badge]: http://emberobserver.com/badges/ember-stopwatch.svg\n[ember-observer-url]: http://emberobserver.com/addons/ember-stopwatch\n[ember-version]: https://img.shields.io/badge/Ember-3.12%2B-brightgreen.svg\n[ember-version-url]: https://blog.emberjs.com/2019/08/16/ember-3-12-released.html\n[coverage-badge]: https://codeclimate.com/github/tzellman/ember-stopwatch/badges/coverage.svg\n[coverage-badge-url]: https://codeclimate.com/github/tzellman/ember-stopwatch/test_coverage\n[climate-badge]: https://codeclimate.com/github/tzellman/ember-stopwatch/badges/gpa.svg\n[climate-badge-url]: https://codeclimate.com/github/tzellman/ember-stopwatch\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzellman%2Fember-stopwatch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftzellman%2Fember-stopwatch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzellman%2Fember-stopwatch/lists"}