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