Events and reactions

Every important, concurrent action in SWAC fires events when it changes it's state. Those events can be used to execute custom code at the right time.

SWAC core lifecycle events

The SWAC core fires events that signal the state of SWACs core functionallity.
The following table contains the core lifecycle events in typically occuring order.

Component lifecycle events

Each component has it's own lifecycle and informs on state chances over events.
The following table contains all component lifecycle events in a typically occuring order.

Data lifecycle events

Data has it's own lifecycle. During this data lifecycle events are send.

Other general events

Language file handling and message generating also create events.

Component events

Components have own events. See the components documentation for component events.

// Register event handler
document.addEventListener('swac_' + requestor.id + '_reloaded', function (evt) {
    // Do something here
});
        

Online events

SWAC brings support for actions performed when a client loses his internet connection, the server is not reachable or the client goes online again.
Online / offline functions either work together with the progressive functionality and / or without it.

Offline / Online informations

The user becomes an information if his client goes offline or the connection to the backend is lost, so no user must wonder why something is not working. You can deactiate this by changeing the configuration:

                offlineNotify: false,

Extend your site with online / offline functions

Even without useing a component you can extend your site with online / offline functions by extending a simple class and adding a configuration.

var MyReactFactory = {};
MyReactFactory.create = function (config) {
    return new MyReact(config);
};

class MyReact extends OnlineReaction {
    constructor(config) {
        super(config);
    }

    onOnline(evt) {
        console.log('Upload onOnline reaction');
    }

    onOffline(evt) {
        console.log('Upload onOffline reaction');
    }

    onUnreachable(evt) {
        console.log('Upload onUnreachable action');
    }
}
        

SWAC_config.onlinereactions[0] = {
    path: 'path/to/MyReact.js',
    config: {
       someopts: 'Specify some opts here for your config'
    }
};
        

Components with online / offline functionality

All swac components can be easily extended with functions that will be executed if client goes online / offline. It's done the same way like defining a OnlineReaction without component except that the script is located within the plugins directory.

Reactions

With Reactions you can register functions that will be executed when a requestors component is completely loaded.
Furthermore you can register functions that are executed when all requestors from a list are completely loaded. You just have to list the names of the requestors as second and so on parameter.

Combining components

Reactions allow it to combine components functunalities. So you can create a reaction that executes when the search and the present component are loaded and register code to update the presents data if a search was performed.

Example 1: Register Reaction to single requestor

The simplest useage is to wait for a component to be ready and than execute a function.

// Wait for swac reaction system to be ready
document.addEventListener('swac_core_loaded', function () {
    // Register reaction to the component with id "head_navigation"
    window.swac.reactions.addReaction(function () {
        alert("This is a reaction: head_navigation is loaded.");
    }, "head_navigation");
});
            

Example 2: Register Reaction to multiple requestors

A bit more advanced you can wait for two (or more) components and execute a function when they all are ready.

// Wait for swac reaction system to be ready
document.addEventListener('swac_core_loaded', function () {
    // Register reaction to the compoenents "selectobject" and "chart"
    window.swac.reactions.addReaction(function (requestors) {
        // Accessing the requestors
        let selectobjectreq = requestors['selectobject'];
        let chartreq = requestors['chart'];
        // Here you can do anything on those booth components
    }, "selectobject", "chart");
});