{"id":22006379,"url":"https://github.com/tom-wolfe/selectable-ts","last_synced_at":"2025-06-21T17:03:55.898Z","repository":{"id":57356534,"uuid":"157847206","full_name":"tom-wolfe/selectable-ts","owner":"tom-wolfe","description":"A TypeScript library for adding drag select functionality.","archived":false,"fork":false,"pushed_at":"2019-02-11T09:34:32.000Z","size":212,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-21T17:03:27.161Z","etag":null,"topics":["click","drag","list","mouse","select","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/tom-wolfe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-16T09:51:13.000Z","updated_at":"2020-03-11T01:08:32.000Z","dependencies_parsed_at":"2022-09-05T04:20:55.563Z","dependency_job_id":null,"html_url":"https://github.com/tom-wolfe/selectable-ts","commit_stats":null,"previous_names":["trwolfe13/selectable-ts"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/tom-wolfe/selectable-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tom-wolfe%2Fselectable-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tom-wolfe%2Fselectable-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tom-wolfe%2Fselectable-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tom-wolfe%2Fselectable-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tom-wolfe","download_url":"https://codeload.github.com/tom-wolfe/selectable-ts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tom-wolfe%2Fselectable-ts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261162060,"owners_count":23118219,"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":["click","drag","list","mouse","select","typescript"],"created_at":"2024-11-30T01:12:01.234Z","updated_at":"2025-06-21T17:03:50.851Z","avatar_url":"https://github.com/tom-wolfe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SelectableTS [![NPM version](https://badge.fury.io/js/selectable-ts.svg)](http://badge.fury.io/js/selectable-ts)\n\nA TypeScript library for adding drag select functionality. Based on [p34eu/selectables](https://github.com/p34eu/selectables).\n\n## Usage\n\n``` typescript\n  const selectable = new Selectable({\n    zone: '#select-list', // The boundary element of the selectable functionality.\n    selectedClass: 'active', // The CSS class to add to selected items.\n    elements: '.list-group-item', // A query selector for the selectable elements.\n    behavior: 'single' // The way the selection behavior works.\n  });\n\n  selectable.start.subscribe(_ =\u003e console.log('Selection started...'));\n  selectable.select.subscribe(e =\u003e console.log('Element selected...', e.innerText));\n  selectable.deselect.subscribe(e =\u003e console.log('Element deselected...', e.innerText));\n  selectable.stop.subscribe(_ =\u003e console.log('Selection stopped...'));\n  selectable.change.subscribe((e: ChangeEvent) =\u003e {\n    console.log('Selection changed...', e.index, e.element.innerText, e.selected);\n  });\n```\n### Options\n\n#### zone (optional, default='#wrapper')\nThis is a query selector or an element that defines the operable area/boundary in which the functionality is enabled. For example, if you're creating a selectable list of `li` elements, the zone would be the `ul` tag that encloses them.\n\n#### selectedClass (optional, default='active')\nThis is the CSS class that's added to any selected items for styling.\n\n#### elements (optional, default='a')\nThis is the query selector that will be used to determine which elements inside the zone element are selectable.\n\n#### behavior (optional, default='list')\nThis defines the type of behavior the selectable list will have. There are three provided options:\n\n* `list`: Similar to something like Windows Explorer. Multiple items can be chosen. Ctrl and Shift can be used as selection modifiers.\n* `checked-list`: Each selection rectangle toggles the items contained within it.\n* `single`: Only one element at a time can be selected.\n\nAs well as these built-in behaviors, custom behaviors can be provided through a factory function, for example:\n\n```typescript\n  export class CustomBehavior implements SelectableBehavior {\n    constructor(private _controller: SelectableController) { }\n    onMouseDown(e: MouseEvent) {\n      const itemUnderCursor = this._controller.getItemAtPosition(e.pageX, e.pageY);\n      this._controller.items.forEach(i =\u003e {\n        this._controller.setItemSelected(i, i === itemUnderCursor);\n      });\n    }\n    onMouseMove(e: MouseEvent) { }\n    onMouseUp(e: MouseEvent) { }\n  }\n\n  const selectable = new Selectable({\n    behavior: controller =\u003e new CustomBehavior(controller)\n  });\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftom-wolfe%2Fselectable-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftom-wolfe%2Fselectable-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftom-wolfe%2Fselectable-ts/lists"}