Skip to main content

Hi everyone,



I’m new here and would appreciate your help with some questions I have about the Content Explorer.







  1. I’m trying to set it up so that the preview opens when I double-click an image in thumbnail view.


    Is there any way to achieve this?


    Currently, the preview only opens when I click on the filename or a button.







  2. I set ‘select’ for the event in addListener, but it’s triggering when I hit other buttons like the ‘share’ button.


    Is there a way to limit the ‘select’ event to only when a file is selected?


    Also, what would be the way to make the preview open again when clicking on the same file?







Thanks for taking the time to read this


Apologies in advance if I’ve posted this in the wrong topic, as this is my first time here.

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:







  1. Perform a search based on the file name to retrieve the file ID.


  2. 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.

Reply


Terms & ConditionsCookie settings