rvera / image-picker

Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.
http://rvera.github.com/image-picker
Other
907 stars 216 forks source link

Directory support #123

Open robertsLando opened 6 years ago

robertsLando commented 6 years ago

What about the possibility to group images in directories?

robertsLando commented 6 years ago

I have made an easy implementation of this by using optgroup as directories and by hide/collapse elements on click on group_title element. It can be improoved but I don't know if anyone else is interested in this feature. This is how I have modified the for loop of recursively_parse_option_groups.

for (j = 0, len = ref.length; j < len; j++) {
        option_group = ref[j];
        option_group = jQuery(option_group);
        container = jQuery("<ul></ul>");
        var group_title = jQuery("<li class='group_title close'>" + option_group.attr("label") + "</li>");
        group_title.click(this.toggleGroupVisibility);
        container.append(group_title);
        target_container.append(jQuery("<li class='group'>").append(container));
        this.recursively_parse_option_groups(option_group, container)
      }

//toggleGroupVisibility

ImagePicker.prototype.toggleGroupVisibility = function() {
      $(this).parent().children('li').each(function () {
        if(!$(this).hasClass('group_title'))
          $(this).toggle();
      });
      $(this).toggleClass('close');
      $(this).toggleClass('open');
    };

EDIT: Improoved with some CSS

ul.thumbnails.image_picker_selector li.group_title {
    float: none;
    cursor: pointer;
  }
  ul.thumbnails.image_picker_selector li.group_title:after {
    content: '';
    position: relative;
    left: 10px;
    top: 13px;
    cursor: pointer;
    width: 0;
    height: 0;
    clear: both;
  }
  ul.thumbnails.image_picker_selector li.group_title.open:after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #000;
  }
  ul.thumbnails.image_picker_selector li.group_title.close:after {
    top: -13px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #000;
  }
Humni commented 5 years ago

Is this issue the same as the one addressed by #123?

robertsLando commented 5 years ago

Yes it is solved by my PR but it should be done in coffeee script...