steveatsilver One further question regarding implementation using a listener, your javascript targets the container which has an id of files, however this click would then bind to all child elements inside this, which includes folders. However we would still want the user to be able to browse around by clicking to navigate inside folders before then clicking the file/image they want which then triggers our custom code to pass back to file path and close the popup window
We've had a quick look and there doesn't seem to be any obvious attributes within the HTML markup to identify a folder vs a file so we can only bind the click listener to files and not folders. I suppose we could look for all .files-a and then try to identify if it has an svg child element with a class of svg-folder and then only target the parent a element if it doesn't have this, but feels a bit clunky and might break if you ever decide to change the markup a bit? Or I suppose we could look at the filepath and check it ends with a forward slash? Is it worth perhaps adding another attribute or class we can swing off i.e. data-file-type="file" or data-file-type="folder". Any suggestions on this on how to reliably target just files and not folders?
True that. It's definitely possible to identify the clicked type, but yes it does get a bit clumsy at this point. The most solid way to check if the clicked item is a folder, would be to identify if firstChild contains svg-folder.
if(!a || !a.firstElementChild.classList.contains('svg-folder')) return; // in case clicked outside or clicked is folder
Definitely a good argument for a native function where you have item.is_dir at your disposal for the clicked item. In fact, there might be a few other minor issues related to clickable items within each element, like checkbox and context menu. I think I will add a custom click function for next release, which should be useful. It can always be modified if new ideas come up. I think it would work something like this:
_c.custom = {
// don't have a name for it yet
clickOverride: (item) => {
if(!item.is_dir) return; // return falsy value to continue with native click functionality
myCustomFunction(item.path); // do your thing
return true; // return truthy value to prevent native click functionality
}
}
