github / check-all Goto Github PK

View Code? Open in Web Editor NEW

77.0 257.0 17.0 675 KB

Multiple checkbox selection helper.

Home Page: http://github.github.io/check-all/examples

License: MIT License

JavaScript 48.31% TypeScript 41.30% Dockerfile 10.39%

decorator

check-all's Introduction

Check All

Check/uncheck [data-check-all] to check/uncheck all checkboxes in a container.
Shift click on [data-check-all-item] to select all checkboxes between the last checked checkbox and the target checkbox.
Auto-update [data-check-all-count] to count of checked items.

Installation

$ npm install @github/check-all

Usage

JS

import checkAll from '@github/check-all'
checkAll(document.querySelector('[data-check-all-container]'))

Using a library like selector-observer, the behavior can automatically be applied to any container matching a selector.

import {observe} from 'selector-observer'
import checkAll from '@github/check-all'

observe('[data-check-all-container]', { subscribe: checkAll })

HTML

<div data-check-all-container>
  Count: <span data-check-all-count>0</span>
  <label><input type="checkbox" data-check-all> Check All</label>
  <label><input type="checkbox" data-check-all-item> github/fetch</label>
  <label><input type="checkbox" data-check-all-item> github/textarea-autosize</label>
  <label><input type="checkbox" data-check-all-item> github/eventlistener-polyfill</label>
  <label><input type="checkbox" data-check-all-item> github/quote-selection</label>
</div>

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

check-all's People

Contributors

Stargazers

Watchers

Forkers

mallickhruday filmblackeye an785 silvrwolfboy vador425 nangal mdlglobal-atlassian-net snawar92 isabella232 6-ram husseinghussein songyuqing-cloud ali-salman29 chriss-0x01 ymzemre

check-all's Issues

Compatibility with `delegated-events`

When I try to use this lib with delegated-events (https://github.com/dgraham/delegated-events), I get this error:

TypeError
undefined is not an object (evaluating 'matched.observers[j].data.call')

Demo: https://codesandbox.io/s/awesome-leftpad-9gtgo?file=/src/index.js

Disabled checkboxes should not be checked

Not sure if it is a bug or feature and what is the recommended behavior for a check-all action when the list of checkboxes includes disabled inputs.

Lets imaging a list of checkboxes some of them are disabled (features locked for a user as an example).

Currently check-all checks all inputs including disabled ones.

I think the expected behavior should be to keep disabled inputs unchanged.

Rename repo

Most (all?) other github web components contains the term „element“ in the repo name, so its easy to find them via the repo filter inside the big github.com github-organisation.

Would be great if you could rename this repo to improve discoverability

Shift click with custom checkboxes

I just set up this library with bootstrap custom checkboxes, and everything works fine except the shift click functionality.
After investigating this is probably because onMouseDown checks that the event target has the data-check-all-item attribute, which is not the case as bootstrap hides the input and displays the checkbox in the label's :before and :after pseude-elements, causing the event.target to be the label, which does not have the attribute.

It might happen the same with other CSS libraries that use a similiar approach to change the checkbox design like Semantic UI or iCheck.

I don't know if there is an easy fix or of it is worth it, but in that case it might be required to explain it in the README.

Here is a simple example so you can see the behaviour I'm describing: https://codesandbox.io/s/githubcheck-all-bootstrap-custom-checkboxes-76jv5

the URL in about gives 404

http://github.github.io/check-all/examples

unsubscribe()

what does the unsubscribe function do?
should the check-all functionality stop when it's called?
I mean when I click check all button it shouldn't work when I unsubscribe!

Thanks for opening this pull request! A GitHub docs team member should be by to give feedback soon. In the meantime, please check out the [contributing guidelines](https://github.com/github/docs/blob/main/CONTRIBUTING.md).

Thanks for opening this pull request! A GitHub docs team member should be by to give feedback soon. In the meantime, please check out the contributing guidelines.

Originally posted by @WELCOME[bot] in github/docs#16098 (comment)
Exit