menu
Product expand_more

Comments

Get the conversation started & increase engagement

Code-Bin (CMS)

DIY CMS with support for HTML, CSS and JS

Community feed

Invite your user to engage in your very own community

Sites

Single page applications in minutes

Forums

Soon to be...

Questions & answers

Soon to be...

Login & profile

User profiles that attach to posts and provide

Reviews

Increase sales and engagement

Admin

To keep you sleeping well at night

DocsNewsAboutPrice
Sign in
  • GETTING STARTED
  • Installing Stackend
  • Try it on CodePen
  • STYLING
  • Custom CSS
  • Style settings in admin
  • ADVANCED
  • Javascript events
  • Client side API
  • MODULES
  • Comments
  • Code Bin
  • Feed
  • Login
  • Page
  • Profile
  • Site
  • Slideshow
  • Throbber
  • 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
    });