Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Directory support #123

Open
robertsLando opened this issue Jan 17, 2018 · 3 comments
Open

Directory support #123

robertsLando opened this issue Jan 17, 2018 · 3 comments

Comments

@robertsLando
Copy link

What about the possibility to group images in directories?

@robertsLando
Copy link
Author

robertsLando commented Jan 17, 2018

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
Copy link
Collaborator

Humni commented Jan 16, 2019

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

@robertsLando
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants