Open robertsLando opened 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;
}
Is this issue the same as the one addressed by #123?
Yes it is solved by my PR but it should be done in coffeee script...
What about the possibility to group images in directories?