Panel container - remove is-disabled for inactive panels

Question

Hello

I am creating a custom Carousel component based on the core Carousel. In my implementation, multiple slides are visible on the desktop simultaneously.

In authoring mode, even though the content of the slides is visible I can't click the slide to edit it. This is because there is a class "is-disabled" on the cq:Overlay. I suppose it is present because the original carousel is based on Panel Container. That is switching between active slides for authoring using the PANEL_SELECT button in the editable toolbar.

For my solution in author mode, I am displaying all the slides so I don't need this extra is-disabled functionality in this component.

How to adjust my component to turn this off?

I tried hacky solution manipulating with the cq:Overlay in the component Javascript but it seems like document.querySelector can't target cq:Overlay components.

Is there a hacky way to reach it?

MichaelNeu007 · Accepted Answer

Looks like this works. I just need to make it into a editor only clientlib:
I tried in the console something like this and it worked:
Granite.author.editables[25].overlay.dom.removeClass("is-disabled")

Also it seems my exact problem was resolved even better here
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-remove-is-disabled-class-in-component-in-author-or-add/m-p/558659

h_kataria · Answer

Try using Granite.author.editables.find('<editable-path>')
Further API details https://developer.adobe.com/experience-manager/reference-materials/6-5/jsdoc/ui-touch/editor-core/Granite.author.editables.html

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded