Feature: select/deselect all options when selecting a group title

[ArmindoMaurits]

I would like to suggest a new feature to the library. It is working great so far.

For my own project I wanted the group titles to be able to be clicked, which then selects/deselects all of the thumbnails from that group. I've already created the method as generic as possible, but was unable to just add it to your JS-file. I am using this in my $( document ).ready(), so you might have to make minor adjustments to make it work from within the library itself.

I would suggest making a new option: label_selectable: false

Could you merge these to the main branch @rvera ?

HTML: I've added a data-attribute to all optgroup objects data-selected='false'

CSS: .group_title { text-decoration: underline; color: blue; cursor: pointer; }

JS:

/** Binds a click event on a group title/label of a group. And then selects/deselects all the thumbnails of that group. */
$('.group_title').click(function () {
    var optGroupLabel = $(this).html();
    var optGroup = $('*[label="' + optGroupLabel + '"]')
    var optGroupOptions = optGroup.find($('option'));
    var optGroupSelected = optGroup.data('selected');

    //Check if the optgroup is selected. 
    if (optGroupSelected) {
        //If true, then set the data-attribute selected to false and select all images under that option.
        optGroup.data('selected', false);
        optGroupOptions.prop("selected", false);
    } else {
        //if false, then set the data-attribute selected to true and deselect all images under that option.
        optGroup.data('selected', true);
        optGroupOptions.prop("selected", true);
    }

    //This triggers the image picker to check for changes and update the images accordingly
    $('.image-picker').data('picker').sync_picker_with_select();
});

[sadgamer]

Hi ArmindoMaurits ,were you able to make it work ?

[ArmindoMaurits]

I did not add this code to the library iteself yet, my current project is on hold. Will try later in some weeks to merge this to a fork of the project for @rvera . The above code works if you just use the parts which I describe (JS, CSS and HTML) in your own code, no need to add anything to the library.

[rvera]

I think this is a good idea.

I'm wary of adding a lot of functionality into a lightweight plugin but if you make a small PR I'm all in for merging it.

[rvera]

Will close this one for now, feel free to reopen if you make a PR.