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:

Event details

stackend

Stackend Client side API

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.

Event details

stackend

Stackend Client side API

modules

The modules added

document.addEventListener(&stackend-modules-added&, function(e) {
  console.log(&stackend-modules-added event&, e);
  let modles = e.detail.modules;
}

stackend-navigate-to-page

Event fired when a new page is loaded into the site module.

Event details

stackend

Stackend Client side API

page

Current Page

subSite

Current Site

href

Link to current page

previousPage

Previous Page

document.addEventListener('stackend-navigate-to-page', function(e) {
  console.log("stackend-navigate-to-page event", e.detail);
}

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 ]);

__stackend.loadScripts(document: Document, scripts: Array<string>, onScriptsLoaded?: () => void)

Utility method to load a number of scripts and run the suplied function when loaded. Will not load the same script twice.

__stackend.loadScripts(document, [ "my-script.js", "my-other-script.js" ], function() {
  // The loaded scripts are available for use
});