How can I work with grapesjs components using JS methods?

Working with grapesjs components (jd-dotlogics/laravel-grapesjs 3 plugin) in
laravel 8 app I want to make all components closed by default.

For that I made custom js plugin in which I try to toggle all elements with “gjs-block-category” class:

window.grapesjs.plugins.add('gjs-custom-plugin', function(editor, opts){
    let COMMAND_ID = 'custom-comand';

    console.log('public/js/gjs-custom-plugin.js::::')


  function addClass(ele,cls) {
    if (!hasClass(ele,cls)) ele.className += " "+cls;
  }

  function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
      var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
      ele.className=ele.className.replace(reg,' ');
    }
  }

  setTimeout(() => {
    console.log("Delayed for 2 second document");
    console.log(document)

    var els = document.getElementsByClassName('gjs-block-category');
    console.log('els.length::')
    console.log(els.length)    // But I see 0 value here - so no element toggled

    for (var i = 0; i < els.length; i++) {
      removeClass(els[i], 'gjs-open')
    }

  }, 2000)

What I see in browser : https://prnt.sc/wtemLtm7AavF
and js tab of the browser’s console : https://prnt.sc/BzuymrGuuU_5

That is code from browser’s Elements tab:


<div class="gjs-block-category gjs-open">
      <div class="gjs-title">
        <i class="gjs-caret-icon fa fa-caret-down"></i>
        Basic
      </div>
      <div class="gjs-blocks-c"><div class="gjs-fonts gjs-f-b1 gjs-block gjs-one-bg gjs-four-color-h" title="1 Column" draggable="true">

      <div class="gjs-block-label">1 Column</div>
    </div><div class="gjs-fonts gjs-f-b2 gjs-block gjs-one-bg gjs-four-color-h" title="2 Columns" draggable="true">

      <div class="gjs-block-label">2 Columns</div>
    </div><div class="gjs-fonts gjs-f-b3 gjs-block gjs-one-bg gjs-four-color-h" title="3 Columns" draggable="true">

      <div class="gjs-block-label">3 Columns</div>
    </div><div class="gjs-fonts gjs-f-b37 gjs-block gjs-one-bg gjs-four-color-h" title="2 Columns 3/7" draggable="true">

      <div class="gjs-block-label">2 Columns 3/7</div>
    </div><div class="gjs-fonts gjs-f-text gjs-block gjs-one-bg gjs-four-color-h" title="Text" draggable="true">

      <div class="gjs-block-label">Text</div>
    </div><div class="fa fa-link gjs-block gjs-one-bg gjs-four-color-h" title="Link" draggable="true">

      <div class="gjs-block-label">Link</div>
    </div><div class="gjs-fonts gjs-f-image gjs-block gjs-one-bg gjs-four-color-h" title="Image" draggable="true">

      <div class="gjs-block-label">Image</div>
    </div><div class="fa fa-youtube-play gjs-block gjs-one-bg gjs-four-color-h" title="Video" draggable="true">

      <div class="gjs-block-label">Video</div>
    </div><div class="fa fa-map-o gjs-block gjs-one-bg gjs-four-color-h" title="Map" draggable="true">

      <div class="gjs-block-label">Map</div>
    </div><div class="fa fa-file gjs-block gjs-one-bg gjs-four-color-h" title="iframe" draggable="true">

      <div class="gjs-block-label">iframe</div>
    </div></div>
    </div>

I suspect as grapesjs library creates elements “on fly” these elements are not in DOM and I can not work with them in JS.

Is it so? Are there some decision to get access to these elements ?

Thanks!

Well, you can do, but only when they exist. Are you sure that the elements exist 2 seconds after the page loads? (Your console log of the document says they don’t.) Does it need to wait longer? Is there a trigger you can use that isn’t time based?

1 Like

I tried to set delay in 10 seconds - but result was the same els var has 0 length. Any other odeas ?

You can use an

Alert("Stop");

to check the DOM at different positions in javascript. So you can check when the grapes elements are added.

Could you please to detalize in which place if the code I have to write

Alert("Stop");

and which info this alert message can give ?

Nothing but javascript stops execution at that point and you can then check the developer tools if the elements are added to the DOM. o maybe you can find the point/time when its added. Its a try and error but I also have no better idea