{"id":13403357,"url":"https://github.com/elwayman02/ember-user-activity","last_synced_at":"2025-05-16T03:02:58.323Z","repository":{"id":6337395,"uuid":"55293058","full_name":"elwayman02/ember-user-activity","owner":"elwayman02","description":"Ember Addon for tracking user activity \u0026 idling","archived":false,"fork":false,"pushed_at":"2025-05-05T13:42:14.000Z","size":35726,"stargazers_count":111,"open_issues_count":42,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-11T03:35:35.666Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ember-user-activity.jhawk.co/","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/elwayman02.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,"zenodo":null}},"created_at":"2016-04-02T12:21:51.000Z","updated_at":"2025-03-24T15:21:56.000Z","dependencies_parsed_at":"2024-01-09T05:02:00.542Z","dependency_job_id":"3d8368a1-65dd-41c6-bf24-6fa0f7c9c16b","html_url":"https://github.com/elwayman02/ember-user-activity","commit_stats":{"total_commits":838,"total_committers":20,"mean_commits":41.9,"dds":"0.48687350835322196","last_synced_commit":"9a9c4e787fbae94638e9e5644bdb76709682f7a1"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elwayman02%2Fember-user-activity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elwayman02%2Fember-user-activity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elwayman02%2Fember-user-activity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elwayman02%2Fember-user-activity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elwayman02","download_url":"https://codeload.github.com/elwayman02/ember-user-activity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459083,"owners_count":22074604,"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":[],"created_at":"2024-07-30T19:01:28.925Z","updated_at":"2025-05-16T03:02:53.288Z","avatar_url":"https://github.com/elwayman02.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Packages"],"sub_categories":["Metrics"],"readme":"# ![Ember User Activity](docs/hero-logo.png)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/8164e535-80cb-4efc-a347-998065f6b9e0/deploy-status)](https://app.netlify.com/sites/competent-heyrovsky-4758aa/deploys)\n[![Build Status](https://github.com/elwayman02/ember-user-activity/workflows/CI/badge.svg)](https://github.com/elwayman02/ember-user-activity/actions?query=workflow%3ACI)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-user-activity.svg)](https://emberobserver.com/addons/ember-user-activity)\n[![Code Climate](https://codeclimate.com/github/elwayman02/ember-user-activity/badges/gpa.svg)](https://codeclimate.com/github/elwayman02/ember-user-activity)\n\nThis addon provides services for detecting user activity \u0026 idling across the entire application.\n\nCheck out the [Demo](https://ember-user-activity.jhawk.co/)!\n\nWe adhere to the [Ember Community Guidelines](https://emberjs.com/guidelines/) for our Code of Conduct.\n\n\n## Compatibility\n\n* Ember.js v4.8 or above\n* Ember CLI v4.8 or above\n* Node.js v18 or above\n\n\n## Installation\n\n```bash\nember install ember-user-activity\n```\n\n\n## Usage\n\n### User Activity Service\n\nThis service fires events from global window listeners.\nThese listeners trigger on capture, meaning they are not affected by event cancellation.\n\nThese `window` events are enabled by default:\n\n* `keydown` - Fires when a key is pressed\n* `mousedown` - Fires when a mouse is clicked\n* `scroll` - Fires when the user scrolls\n* `touchstart` - Fires when a touch point is placed on the touch surface [Mobile-Friendly]\n* `storage` - Fires when any activity event is triggered on another tab of the same website. This avoids problems when a user opens up serveral tabs to the same application.\n* ~~`mousemove` - Fires when the user moves the mouse~~ [Removed as of v0.2.0](https://github.com/elwayman02/ember-user-activity/issues/16)\n\nA custom event, `userActive` is fired for ALL enabled events.\n\nTo catch these events, simply inject the service and subscribe to the events you care about:\n\n```javascript\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\n// any file where services can be injected\nexport default class MyComponent extends Component {\n  @service userActivity;\n\n  setupListeners() {\n    this.userActivity.on('userActive', this, this.activeHandler);\n  }\n\n  activeHandler(event) {\n    // do stuff\n  }\n}\n```\n\nEach event handler will receive the standard DOM `event` object\n(ex: [mousemove](https://developer.mozilla.org/en-US/docs/Web/Events/mousemove)).\n\nUnsubscribe from any event by calling `off`:\n\n```javascript\nthis.userActivity.off('userActive', this, this.activeHandler);\n```\n\nNote: While our event dispatch system mirrors Ember.Evented, it does not include the `one` method. \nOnly `on`, `off`, and `trigger` have been implemented. If you feel `one` is necessary for you, \nwe're happy to accept PRs!\n\n#### Event Configuration\n\nIf you would like to listen to a different set of events, extend the service in your app:\n\n```javascript\n// app/services/user-activity.js\nimport UserActivityService from 'ember-user-activity/services/user-activity';\n\nexport default class UserActivity extends UserActivityService {\n  defaultEvents = ['keypress', 'mouseenter', 'mousemove'];\n}\n```\n\nAdditionally, you can enable/disable events after the service has been initialized.\n\n```javascript\nthis.userActivity.enableEvent('keyup');\nthis.userActivity.disableEvent('mousedown');\n```\n\nEvent names must be from the [DOM Event](https://developer.mozilla.org/en-US/docs/Web/Events) list.\nCustom events are not currently supported. If you enable an event name\nthat was not set up by default, a new listener will be created automatically.\n\nYou can find out if an event is currently enabled:\n\n```javascript\nthis.userActivity.isEnabled('foo'); // false\nthis.userActivity.isEnabled('keydown'); // true\n```\n\n#### Performance Configuration\n\nEach individual event is throttled by 100ms for performance reasons,\nto avoid clogging apps with a firehose of activity events. The length of\nthe throttling can be configured by setting `EVENT_THROTTLE` on the activity service.\n\n```javascript\n// app/services/user-activity.js\nimport UserActivityService from 'ember-user-activity/services/user-activity';\n\nexport default class UserActivity extends UserActivityService {\n  EVENT_THROTTLE = 200; // 200 ms\n}\n\n```\n\nSetting `EVENT_THROTTLE` to 0 will enable the full firehose of events.\nThis may cause performance issues in your application if non-trivial\namounts of code are being executed for each event being fired.\n\n### User Idle Service\n\nThis service tracks user activity to decide when a user has gone idle by\nnot interacting with the page for a set amount of time.\n\n```javascript\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\nimport { readOnly } from '@ember/object/computed'\n\nexport default class MyComponent extends Component {\n  @service userIdle;\n\n  @readOnly('userIdle.isIdle')\n  isIdle;\n}\n```\n\nThe default timeout is set for 10 minutes but can be overridden by extending the service:\n\n```javascript\n// app/services/user-idle.js\nimport UserIdleService from 'ember-user-activity/services/user-idle';\n\nexport default class UserIdle extends UserIdleService {\n  IDLE_TIMEOUT = 300000 // 5 minutes\n}\n```\n\nBy default, the idle service listens to the `userActive` event, but it can be\nconfigured to listen to a custom set of events from the `user-activity` service:\n\n```javascript\n// app/services/user-idle.js\nimport UserIdleService from 'ember-user-activity/services/user-idle';\n\nexport default class UserIdle extends UserIdleService {\n  activeEvents = ['mousedown', 'keydown'];\n}\n```\n\nNote that the `userActive` event is a superset of all events fired from `user-activity`,\nso in most cases you won't need to change this.\n\nThe idle service has a `idleChanged` event when `isIdle` gets changed.\n\n```javascript\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class MyComponent extends Component {\n  @service userIdle;\n\n  constructor() {\n    this.userIdle.on('idleChanged', (isIdle) =\u003e {\n      // isIdle is true if idle. False otherwise.\n    });\n  }\n}\n```\n\n### Scroll Activity Service\n\nThis service tracks scrolling within the application by periodically checking\n(via [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame))\nfor changes in scroll position for the various scrollable elements in the page. By default, it only\nchecks `document`, but the [Scroll Activity Mixin](#scroll-activity-mixin) provides an easy\nway to register your components as well. The [User Activity Service](#user-activity-service) subscribes to these scrolling events by default, so you do not need to do anything to use this service for global scroll events if you are already injecting the user-activity service.\n\nAny elements can be subscribed to this service:\n\n```javascript\nthis.scrollActivity.subscribe(this, element);\n```\n\n`subscribe` requires at least two parameters:\n\n* `target` - Usually `this`, target just needs to be a unique identifier/object\nthat can be used to unsubscribe from the service\n* `element` - The scrollable element (can be a DOM or jQuery element - jQuery not required!)\n\nTwo optional parameters may follow:\n\n* `callback` - A callback to execute when scrolling has been detected in the element\n* `highPriority` - A boolean (default `true`) specifying this subscriber should eagerly check\n  scroll positions on each animation frame. When `false`, it will instead\n  use an approximation of idle checking on the UI thread to avoid performing\n  measurements at sensitive times for other work (like rendering).\n\nConversely, elements can also be unsubscribed:\n\n```javascript\nthis.scrollActivity.unsubscribe(this);\n```\n\n`unsubscribe` only requires the `target` parameter that was initially used to `subscribe`.\n\n### Cleanup\n\nPlease remember that subscribing to events can cause memory leaks if they are not properly cleaned up.\nMake sure to remove any listeners before destroying their parent objects.\n\n```javascript\n// app/components/foo-bar.js\nexport default class FooBar extends Component {\n  willDestroy() {\n    this.userActivity.off('keydown', this, this.keydownHandler);\n  }\n}\n```\n\n### Using in an Addon\n\nBuilding your own addon to extend Ember User Activity? No problem!\n\n```javascript\n// my-addon/addon/services/user-idle.js\nimport UserIdleService from 'ember-user-activity/services/user-idle';\n\nexport default class UserIdle extends UserIdleService {\n  IDLE_TIMEOUT = 3000; // 3 minutes\n}\n```\n\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felwayman02%2Fember-user-activity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felwayman02%2Fember-user-activity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felwayman02%2Fember-user-activity/lists"}