Hello @m-fuji,
Thanks for posting your question! We are looking into possible solutions, we’ll get to you asap.
Cheers,
Olga Stefaniuk
Developer Advocate
Hi @m-fuji!
There’s no built-in way to achieve this using existing props but you can add an event listener that listens to double click events on the bce-ItemGridThumbnail
class.
For example, you could have something like:
setTimeout(() => {
document.querySelector('.bce-content').addEventListener('dblclick', e => {
const itemGridThumbnailEl = e.target.closest('.bce-ItemGridThumbnail');
if (itemGridThumbnailEl) {
itemGridThumbnailEl.parentNode.querySelector('.be-item-label').click();
}
});
});
This adds an event listener to the bce-content
class since this element should always exist throughout the component’s lifecycle. It’s then checking for double click events of targets inside of bce-ItemGridThumbnail
. If e.target.closest('.bce-ItemGridThumbnail')
exists, then we know a descendent of the element was clicked so we can trigger the onClick
function that will preview a file.
The setTimeout
is a precautionary thing to ensure ContentExplorer has been added to the DOM but it might not be necessary depending on where you add it in your script.
Thank you for your response. I apologize for the delayed reply.
I did not come up with the idea of invoking the click event on the file name when double-clicking on the thumbnail.
Thanks to your suggestion, I was able to successfully implement the functionality to display the preview by double-clicking on the thumbnail.
I have another inquiry.
Is it possible to display the preview prominently in a popup window when it is being displayed?
While I am aware that it can be made fullscreen with a single click after the preview is displayed, I would like to explore the possibility of showing it in a larger size within a popup window prior to that.
I have considered the following approach, but I anticipate that the time required to display the preview might be prolonged due to the search process:
- Perform a search based on the file name to retrieve the file ID.
- Pass the obtained file ID and access token to the preview.show() function.
Thank you for considering my question. Take care of yourself and stay healthy.