Global EventBus events: Difference between revisions

From 3B Knowledge
Jump to navigation Jump to search
(Created page with "== Intro == You can now use the event bus events below in order to manage page navigation, sessions and loading states outside of the portals app (e.g. in custom components: * elementHover - now you can invoke the element over to turbo-load into memory from external applications * elementClick - now you can invoke the element click to turbo-load into memory from external applications and navigate to the page * sessionUpdate - you can set the session externally * refres...")
(No difference)

Revision as of 05:06, 9 October 2024

Intro

You can now use the event bus events below in order to manage page navigation, sessions and loading states outside of the portals app (e.g. in custom components:

  • elementHover - now you can invoke the element over to turbo-load into memory from external applications
  • elementClick - now you can invoke the element click to turbo-load into memory from external applications and navigate to the page
  • sessionUpdate - you can set the session externally
  • refreshPage - you can cause a page refresh
  • isLoading - you can set the portal loading status externally


You can create your own event bus implementation like so:

//Facilitates communication between sibling components
export default class EventBus {
    static fireEvent(eventName, payload) {
        if (!window?.eventListeners) {
            window["eventListeners"] = {};
        }
        if (!window?.eventsPayload) {
            window["eventsPayload"] = {};
        }

        window.eventsPayload[eventName] = payload;

        if (window.eventListeners[eventName]) {
            window.eventListeners[eventName].forEach((listener) => {
                try {
                    listener(payload);
                } catch (error) {
                    console.error(error);
                }
            });
        }
    }

    static getEvent(eventName) {
        if (!window?.eventsPayload) {
            window["eventsPayload"] = {};
        }

        return window.eventsPayload[eventName] ?? null;
    }

    static addEventListener(eventName, listener) {
        if (!window?.eventListeners) {
            window["eventListeners"] = {};
        }

        if (!window?.eventListeners[eventName]) {
            window.eventListeners[eventName] = [];
        }
        window?.eventListeners[eventName].push(listener);
    }

    static removeEventListener(eventName, listener) {
        if (!window?.eventListeners) {
            window["eventListeners"] = {};
        }

        if (window?.eventListeners[eventName]) {
            const index = window?.eventListeners[eventName].indexOf(listener);
            if (index !== -1) {
                window.eventListeners[eventName].splice(index, 1);
            }
        }
    }
}