Javascript events

stackend-initialized

To integrate with your code, Stackend provides a javascript event called stackend-initialized that let you know when Stackend has loaded and scanned the page. The event is fired before modules are created. At this point, the redux store is not available. The Client Side API is supplied using the event details:

document.addEventListener('stackend-initialized', function(e) {
  console.log("stackend-initialized event", e);
  // Stackend client side API:
  let stackend = e.detail.stackend;
}

stackend-modules-added

This event is fired after modules has been added. It could be right after stackend is loaded, or after a call to stackend.handleModulesAdded(). Some modules however, may still be waiting for data to load before they are rendered.

document.addEventListener('stackend-modules-added', function(e) {
  console.log("stackend-modules-added event", e);
  // Stackend client side API:
  let stackend = e.detail.stackend;
  // Added modules:
  let modles = e.detail.modules;

}

Client side API

The Client Side API is passed to your code using the stackend-initialized event (see above). It's also available as the global variable __stackend.

__stackend.handleModulesAdded()

If you programmatically add module elements to the DOM, use the method _stackend.handleModulesAdded() to tell Stackend that these new modules should be rendered. Here is an example:

function addModule()
{
  let p = document.createElement("div");
  p.setAttribute("class", "new-module");
  p.setAttribute("data-stackend-type", "stackend-cms");
  p.setAttribute("data-stackend-id", "3:2");
  document.body.appendChild(p);
  __stackend.handleModulesAdded();
}

You could also supply the changed elements to avoid scanning the DOM:

let p1 = = document.createElement("div");
  let p2 = = document.createElement("div");
  ...
  __stackend.handleModulesAdded([ p1, p2 ]);