image-picker icon indicating copy to clipboard operation
image-picker copied to clipboard

Directory support

Open robertsLando opened this issue 6 years ago • 3 comments

What about the possibility to group images in directories?

robertsLando avatar Jan 17 '18 10:01 robertsLando

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;
  }

robertsLando avatar Jan 17 '18 14:01 robertsLando

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

Humni avatar Jan 16 '19 00:01 Humni

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

robertsLando avatar Jan 16 '19 08:01 robertsLando