checkboxes for groups to (de)select all layers at once

[Istador]

This will add an optional new feature, that can be activated with the groupCheckboxes option.

When activated it will add checkboxes to the groups. These checkboxes allow to select or unselect all layers in a group with one click.

If there are layers in a group that are selected and others that are not selected, then the new checkbox will be shown as indeterminate.

The action performed in the indeterminate state (select all or unselect all) will be determined by majority. Meaning that if there are more layers checked than unchecked it will unselect all, whereas if there are more layers unchecked than checked, it will select all.

---

I also updated all npm dependencies. Instead of 5 warnings and 68 vulnerabilities, npm install now outputs 0 warnings and 0 vulnerabilities (for now).

Before:

$ npm install
npm WARN deprecated coffee-script@1.3.3: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.4.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm notice created a lockfile as package-lock.json. You should commit this file.
added 74 packages from 134 contributors and audited 74 packages in 7.581s
found 68 vulnerabilities (9 low, 19 moderate, 32 high, 8 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

---

I originally developed this two years ago in my fork https://github.com/Istador/leaflet-panel-layers/commit/5477189e36679b603eaca137e72862dfe9c84b65 and used it since then at my Pine Interactive Map. I couldn't create a PR for it back then directly, because I also changed all the whitespace before implementing it. And now I want to get rid of my fork, so I reapplied the changes for this feature while sticking to the coding style. (I already mentioned it here: https://github.com/stefanocudini/leaflet-panel-layers/pull/52#issuecomment-568610720.)

I've took the base code from another fork https://github.com/syonfox/leaflet-panel-layers/commit/634e4ec0fec8e1cb37c703a7f27236918c00c280 and https://github.com/syonfox/leaflet-panel-layers/commit/b2ca82965b552593c2722dba1e291084e22e36eb and refined it a bit.

[stefanocudini]

@Istador merged in the next version but rename option in : selectorGroup: false, //select all layer of a group

here a demo: https://opengeo.tech/maps/leaflet-panel-layers/examples/group-layers-selector-group.html

[Istador]

Well you did a bit more than just renaming the option.

1. there is now a mouseEnter/Leave effect hiding the checkbox unless when the mouse is hovering over the label.
2. the group checkbox doesn't update its state according to the combined state of the sub-layers.

---

The first one I can easily solve with a custom CSS rule:

.leaflet-panel-layers-selectorgroup {
  visibility: visible;
}

---

The second one is I think a bug that was introduced by 7b3ec5edac0429b59ef9c23a68d670fe8e2b234e. It renames the group class from -selector to -selectorgroup. But because of that the _onInputClick handler that iterates over all -selector inputs, is missing the group checkboxes that it temporarily stores in groups to iterate over in a second step.

https://github.com/stefanocudini/leaflet-panel-layers/blob/275940f250a5d56daac8523a20ad8f4070b4b5c2/src/leaflet-panel-layers.js#L338-L340

https://github.com/stefanocudini/leaflet-panel-layers/blob/275940f250a5d56daac8523a20ad8f4070b4b5c2/src/leaflet-panel-layers.js#L384-L388

https://github.com/stefanocudini/leaflet-panel-layers/blob/275940f250a5d56daac8523a20ad8f4070b4b5c2/src/leaflet-panel-layers.js#L406-L410

https://github.com/stefanocudini/leaflet-panel-layers/blob/275940f250a5d56daac8523a20ad8f4070b4b5c2/src/leaflet-panel-layers.js#L436-L457

[stefanocudini]

1) it is a desired effect and I think it will remain the default behavior ... the checkbox always visible in the group is very anti-aesthetic, and is an easy behavior to modify in the case of specific use with two lines of css

2) I'm still not sure how to solve this, for the moment it doesn't seem completely blocking for use, if you have ideas or PR they are welcome

[Istador]

1. that's fine, as long as it stays possible to change it.
2. Likely a fix would be to add a second getElementsByClassName to _onInputClick to get the group checkboxes that have -selectorgroup. With that the following logic can be changed to iterate over them directly for the update all groups that have checkboxes step, instead of filtering them them out during the iteration over the layer inputs.

[stefanocudini]

It renames the group class from -selector to -selectorgroup. But because of that the _onInputClick handler that iterates over all -selector inputs, is missing the group checkboxes that it temporarily stores in groups to iterate over in a second step.

@Istador great! Just solved in last version

I'm also twitted your contribute: https://twitter.com/zakis/status/1593041006085431298