How to remove is-disabled class in component in author or add class for the component?

[bhoang]

Hi All,

I am using the components in another component. In the first load create a page and add components A, A1, A2 into the B. I can click config components A1, A2. When I reload the page and click on components A1 or A2 it does not show the menu to click to configure them. I can configure for only component A. I check the HTML code, and the components A1, A2 contain the class is-disabled thus I can not configure them. You can see this in the below image.

Please help me.

How to remove the class "is-disabled"?

If can not remove it, How to add a class or id in the same HTML with the class is-disabled? So I will check the class or id to remove is-disabled class.

I wrote the js to check the component containing the is-disabled class to remove it. The inputCardCarousel always returns length = 0. However, When the page loaded I tried to run the code on the console, The inputCardCarousel has length = 10 and the code is work. Please help me how to fix it for work on the author page.

(function ($, $document) {
    "use strict";

    function removeIsDisabledClass() {
		var inputCardCarousel = $(document).find('.cq-Overlay--component-name');

        console.log('Test', inputCardCarousel);
        
        for(var i=0;i<inputCardCarousel.length;i++){
            if(inputCardCarousel[i].innerText == 'Card For Carousel'){
                $(inputCardCarousel[i]).parent('.cq-Overlay--placeholder').removeClass('is-disabled');
            }
        }
    }


   $(function() {
        if (Granite && Granite.author && Granite.author.edit && Granite.author.Component &&
            Granite.author.ui && Granite.author.ui.dropController) {
            removeIsDisabledClass();
        }
    });
}(jQuery, jQuery(document)));

Thanks & Best regards,

BienHV

[bhoang · Accepted solution]

I found the solution to fix this issue.

Copy the js file from core-extensions into my project. 

ui.apps/src/main/content/jcr_root/apps/core-extensions/wcm/components/tabs/v1/tabs/clientlibs/editorhook/js/panelcontainer.js

Writing the code to remove the is-disabled class when it in our components.

(function($, ns, channel, window, undefined) {

        channel.on("cq-editor-loaded", function(event) {
            setTimeout(function() {
                var editables = ns.editables;
                for (var i = 0; i < editables.length; i++) {
                    var editable = editables[i];
                    if (editable.type === 'test/components/content/test-card-carousel' && CQ.CoreComponents.panelcontainer.v1.utils.isPanelContainer(editable))
                        updatePanelContainerOverlayStateTestCardCarousel(editable)
                }
            }, 500);
        });

        function updatePanelContainerOverlayStateTestCardCarousel(editable) {
            var items = CQ.CoreComponents.panelcontainer.v1.utils.getPanelContainerItems(editable);
            for (var i = 0; i < items.length; i++)
                if (items[i].overlay)
                    items[i].overlay.setDisabled(false)
        }
    }
)(jQuery, Granite.author, jQuery(document), this);