Skip to main content
Solved

Questions about Preview and Event Handling in Content Explorer

M

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.

Best answer by tjuanitas Box

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.

View original
Did this topic help you find an answer to your question?

3 replies

ostefaniuk Box

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

T
  • tjuanitas Box
  • Participating Frequently
  • 6 replies
  • Answer
  • June 16, 2023

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.

M
rbarbosa Box
2 people like this
  • M
    m-fuji
  • rbarbosa Box
    rbarbosa Box
M
  • m-fuji
  • Author
  • New Participant
  • 1 reply
  • July 4, 2023

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


Most helpful members this week

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings