feat: add function callback support to AdtJsComponents.init()

src/ComponentLoader.js

@@ -10,6 +10,30 @@ const init = (selector, path) => {
 		componentsConfig = JSON.parse(bodyDataset);
 	}
 
+	const runPath = (path, selector) => {
+		if (path.startsWith('~')) {
+			import('~/src/' + path.slice(1) + '/index.js').then(component => {
+				component.default.run(componentsConfig[selector] || {});
+			});
+		} else if (path.includes('/')) {
+			import('JsComponents/' + path + '/index.js').then(component => {
+				component.default.run(componentsConfig[selector] || {});
+			});
+		} else {
+			import('adt-js-components/src/' + path + '/index.js').then(component => {
+				component.default.run(componentsConfig[selector] || {});
+			});
+		}
+	};
+
+	const existingTarget = document.querySelector(`[data-adt-${selector}]`);
+	if (existingTarget && !loadedComponents.includes(path)) {
+		loadedComponents.push(path);
+		typeof path === 'function'
+			? path(componentsConfig[selector] || {})
+			: runPath(path, selector);
+	}
+
 	const observer = new MutationObserver((mutationsList) => {
 		// component is already loaded
 		if (loadedComponents.includes(path)) return;
@@ -21,20 +45,10 @@ const init = (selector, path) => {
 				if (target) {
 					loadedComponents.push(path);
 
-					if (path.startsWith('~')) {
-						import('~/src/' + path.slice(1) + '/index.js').then(component => {
-							component.default.run(componentsConfig[selector] || {});
-						});
-
-					} else if (path.includes('/')) {
-						import('JsComponents/' + path + '/index.js').then(component => {
-							component.default.run(componentsConfig[selector] || {});
-						});
-
+					if (typeof path === 'function') {
+						path(componentsConfig[selector] || {});
 					} else {
-						import('adt-js-components/src/' + path + '/index.js').then(component => {
-							component.default.run(componentsConfig[selector] || {});
-						});
+						runPath(path, selector);
 					}
 					break;
 				}

src/Messaging/index.js

@@ -0,0 +1,21 @@
+import { initializeApp } from "firebase/app";
+import { getMessaging, isSupported } from "firebase/messaging";
+
+const run = async (config) => {
+    const app = initializeApp(config.initializeConfig);
+
+    const supported = await isSupported();
+    const messaging = supported ? getMessaging(app) : null;
+
+    navigator.serviceWorker.addEventListener('message', (event) => {
+        const payload = event.data;
+        $(document).trigger(`messaging.${payload.data.action}`, {
+            action: payload.data.action,
+            body: payload.data.body
+        });
+    });
+
+    window.messaging = messaging;
+}
+
+export default {run};

src/Notifications/index.js

@@ -0,0 +1,33 @@
+import { getToken } from "firebase/messaging";
+
+const run = (config) => {
+    $('[data-adt-notifications]').on('click', function () {
+        if (window.messaging) {
+            Notification.requestPermission().then(function (permission) {
+                if (permission !== 'granted') {
+                    alert(_('appJs.firebase.error.notificationsPermissionError'));
+                    return;
+                }
+
+                getToken(window.messaging, { vapidKey: config.vapidKey })
+                    .then(function (currentToken) {
+                        if (currentToken) {
+                            $.nette.ajax({
+                                url: config.setFirebaseTokenLink.replace('__firebaseToken__', currentToken)
+                            });
+                        } else {
+                            alert(_('appJs.firebase.error.notificationsPermissionError'));
+                        }
+                    })
+                    .catch(function (err) {
+                        console.error(err);
+                        alert(_('appJs.firebase.error.notificationsPermissionError'));
+                    });
+            });
+        } else {
+            alert(_('appJs.firebase.error.notificationsNotSupported'));
+        }
+    });
+}
+
+export default { run };

src/Translate/index.js

@@ -0,0 +1,33 @@
+const run = (config) => {
+
+	const _ = (message, number, params) => {
+		let s = config.all[message];
+
+		if (s === undefined) {
+			return null;
+		}
+
+		if (params) {
+			for (const key in params) {
+				s = s.replaceAll(`%${key}%`, params[key]);
+			}
+		}
+
+		if (s.includes("|")) {
+			const options = s.split("|");
+			if (Math.abs(number) === 1) {
+				s = options[0];
+			} else if (Math.abs(number) >= 2 && Math.abs(number) <= 4) {
+				s = options[1];
+			} else {
+				s = options[2];
+			}
+		}
+
+		return s;
+	}
+
+	window._ = _;
+}
+
+export default {run};