Grapesjs: Is it possible to 'toggle' a button added within Panel from function outside of GJS?

[ned-kelly]

Hi Guys,

Firstly awesome project, have really enjoyed extending GJS to work with our use case - and am excited for what's in store looking at some of the issues/features in-progress...

So, I'm using GJS to with custom buttons added into the Panel via addButton (like so):

    editor.Panels.addButton('options', [
        {
            id: 'cropmarks',
            className: 'fa fa-crosshairs icon-blank',
            togglable: true,
            active: false,
            command: {
                run: function (e) {
                    toggleCropMarkers(true);
                },
                stop: function (e) {
                    toggleCropMarkers(false);
                }
            },
            attributes: {
                title: 'Toggle Crop Markers'
            }
        },
    ]);

Now all works as expected when you toggle/untoggle the button - however I want to run the toggleCropMarkers() function which is called when the button is toggled, outside of the editor - (in this case I'm calling the function when the document is loaded) - and I would like to manually set the state of the button to 'toggled'...

I've tried: editor.Panels.getButton('options', 'cropmarks').changed.active = true, as well as .attributes.active = true without any luck and was wondering if there is a suggested way to 'toggle' the state of a button from outside of editor.

Hope this makes sense, please let me know if I'm not clear and I'll upload a sample.

Cheers,

[pouyamiralayi]

Hi @ned-kelly try this:

 const cropBtn = editor.Panels.getButton('options', 'cropmarks');
 cropBtn.set('active', 1)

cheers!

[ned-kelly]

@pouyamiralayi, you're amazing - sorry for asking what's seemingly a simple question - couldn't find any previous GitHub issues or comments about this in the documentation!