Where to get the file:

Inpsect this page and copy the script tag, found in head tag, that ends in "main.js"

Where to inject the script:

At the beginning of the head tag.

AP-Frontend-Observer

How to use:

Where to get the file:

Inpsect this page and copy the script tag, found in head tag, that ends in "main.js"

Where to inject the script:

At the beginning of the head tag.

Description:

The main purpose of this library is to mediate communication between different apps. The Library is nothing more than a messenger.

How it works:

Where to inject the script:

At the beginning of the head tag.

App example:

Considering the following app example. The methods ObserverReady and DetachingApp should be part of the app instance or else the app will not know when it's attached or detached from the observer mechanism.

  function MyApp() {
    var self = this;
    self.doSomething = function () {
      console.log(arguments);
    }
    self.ObserverReady = function(appReference, observerReference) {
      appReference.attachListener('myevent', self.doSomething.bind(self));
    }
    self.DetachingApp = function (appReference, observerReference) {
      appReference.detachListener('myevent');
    }
  }
  var appInstance = new MyApp();

Attaching app before the script loads:

We can use a predefined object to initialize:

    window.Observables = window.Observables || {apps: [{
      instance: appInstance,
      name: 'test'
    }]};

Attaching app after the script loads:

We can push the app in order to subscribe it:

  window.Observables.apps.push({
    instance: appInstance,
    name: 'test'
  });
  // we can even subscribe various apps in the observer at once
  window.Observables.apps.push({
    instance: appInstance,
    name: 'test'
  }, {
    instance: myOtherApp,
    name: 'test2'
  });

Or we can subscribe it to the instance directly:

  window.Observables.observerInstance.subscribe('test', appInstance);

App reference functions:

  //the callback could be async if wanted.
  const callbackFunction = async (data) => {
    //do something with the event
    return null; //something if you want
  }
  appReference.attachListener('myevent', callbackFunction);
  appReference.detachListener('myevent');

Observer reference functions:

  const myData = {test: true}// could be anything you want to pass as param
  observerReference.subscribe('appName', appInstance);
  observerReference.triggerCallback('eventName', myData, (returns) => {
    // returns is an array of return values provided by all
    // the listeners of this event, or the first one if we
    // enable stop at first
  }, {
    stopAtFirst: false //by default
  });
  const returns = await observerReference.trigger('eventName', myData)
  //same like the triggerCallback but with promise
  observerReference.isAppReady('appName')
  // returns a boolean stating whether a specific app is
  // ready or not (useful if our app initializes after,
  // we can easily check if that app is ready)