{"id":17379997,"url":"https://github.com/baroquon/ember-keyboard-navigable-list","last_synced_at":"2025-04-15T09:28:36.663Z","repository":{"id":57223961,"uuid":"88693837","full_name":"baroquon/ember-keyboard-navigable-list","owner":"baroquon","description":"Just a simple addon that takes an array and adds the ability to navigate the items with keyboard keys","archived":false,"fork":false,"pushed_at":"2017-10-20T18:07:12.000Z","size":277,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T18:51:47.809Z","etag":null,"topics":["addon","ember","keyboard-navigation"],"latest_commit_sha":null,"homepage":null,"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/baroquon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-19T02:57:24.000Z","updated_at":"2017-11-12T21:29:00.000Z","dependencies_parsed_at":"2022-08-30T02:40:31.305Z","dependency_job_id":null,"html_url":"https://github.com/baroquon/ember-keyboard-navigable-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baroquon%2Fember-keyboard-navigable-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baroquon%2Fember-keyboard-navigable-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baroquon%2Fember-keyboard-navigable-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baroquon%2Fember-keyboard-navigable-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baroquon","download_url":"https://codeload.github.com/baroquon/ember-keyboard-navigable-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249042489,"owners_count":21203296,"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":["addon","ember","keyboard-navigation"],"created_at":"2024-10-16T06:03:27.734Z","updated_at":"2025-04-15T09:28:36.639Z","avatar_url":"https://github.com/baroquon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/baroquon/ember-keyboard-navigable-list.svg?branch=master)](https://travis-ci.org/baroquon/ember-keyboard-navigable-list)\n\n# ember-keyboard-navigable-list\n\nThis is an Ember addon that takes a list and adds keyboard shortcuts to all ow you to navigate the list. `j` and `Down Arrow` move the active item down, `k` \u0026 `Up Array` move the active item up. This component can take an array of objects with a key for display or an array of strings. If given an array of objects with IDs you can add a link-to to each item in the array by passing in a `linkDirection` attribute.\n\nThanks to [ember-keyboard](http://null-null-null.github.io/ember-keyboard/#/) addon for making the key events part of this super easy.\n\n[Here is the demo page!](https://baroquon.github.io/ember-keyboard-navigable-list/)\n\n## Installation\n\n`ember install ember-keyboard-navigable-list`\n\n## Usage\n\nIn your template add the component:\n\n### An inline component will look like this:\n\n```hbs\n  {{keyboard-navigable-list contentArray=someArray}}\n```\n\n#### A list of available attributes:\n\n* contentArray - (required) It is the array containing the items we will display.\n* objectKey - (optional) If you give the component an array of objects this value tells the component which of the object's properties to display:\n* linkDirection - (optional) If you want your items to contain links this is where you would pass the link path. This string should correspond to the path you would pass the `link-to` helper. This will pass the object's id as a param to the link-to.\n* activeItem - (optional) This allows you to manually set what item in the array is active. It is based on the items location in the array and it is zero indexed. The default value is -1 (so when you first push down, the active item becomes the first item in the array and the activeItem property's value becomes 0).\n* sendItem - (optional) This is the function that will be called when you push the up/down/j/k keys. Example usage would be: `sendItem=(action parentMethodForChange)`\n* afterLastItem - (optional) This is the function that gets called the last item in the list is selected and you push down. This could be used to tie into a load more type function on the parent. An example of usage would be `afterLastItem=(action parentMethodForBottomOfList)`\n\n### You can also use it as a block level component:\n\n```hbs\n{{#keyboard-navigable-list contentArray=objContentArray\n                           afterLastItem=(action parentMethodForBottomOfList)\n                           sendItem=(action parentMethodForChange)\n                           as |person|}}\n  {{person.name}}\n{{/keyboard-navigable-list}}\n```\nWhen you use it as a block level component you should include `as |someReference|`. `someReference` will give you access to the individual item in the array.\n\n## Contributing\n\n* Fork this this repository\n* `git clone \u003clocal-repository-url\u003e`\n* `cd ember-keyboard-navigable-list`\n* `npm install`\n* make changes and commit with a good commit message\n* open a PR\n\n## Running\n\n* `cd ember-keyboard-navigable-list/tests/dummy`\n* `ember s`\n\n\n## Running Tests\n\n* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)\n* `ember test`\n* `ember test --server`\n\n## Building\n\n* `ember build`\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaroquon%2Fember-keyboard-navigable-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaroquon%2Fember-keyboard-navigable-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaroquon%2Fember-keyboard-navigable-list/lists"}