templates/js/initialJS.html.twig line 1

Open in your IDE?
  1. <script type="text/javascript">
  2.     const ROOT_PATH = window.location.origin; // always match current host to avoid CORS
  3.     const CADDY_PATH = `${ROOT_PATH}/hub`;
  4.     window.Application = {};
  5.     const APP_CONTEXT = window.Application;
  6.     window.APP_CONTEXT = APP_CONTEXT; // keep a single shared reference for controllers
  7.     APP_CONTEXT.toast = {}; // Toast dans ToasPageLoading
  9.     try {
  10.         const storedThemeVersion = window.localStorage?.getItem('themeVersion');
  11.         APP_CONTEXT.themeVersion = storedThemeVersion || document.documentElement.getAttribute('data-theme') || 'v2';
  12.         document.documentElement.setAttribute('data-theme', APP_CONTEXT.themeVersion);
  13.     } catch (e) {
  14.         APP_CONTEXT.themeVersion = document.documentElement.getAttribute('data-theme') || 'v2';
  15.     }
  16. </script>
  18. {% if app.user %}
  19. <script type="text/javascript">
  20.     APP_CONTEXT.APP_USER = {
  21.         'id': '{{app.user.id}}',
  22.         'email': '{{app.user.email}}',
  23.         'username': '{{app.user.username}}',
  24.         'image': '{{app.user.image}}',
  25.         'isPremium': {{ app.user.isPremium ? 'true' : 'false' }},
  26.         'locationOptIn': {{ app.user.locationOptIn ? 'true' : 'false' }},
  27.         'roles': {{ app.user.roles|json_encode|raw }},
  28.         'var' : {},
  29.         'function' : {},
  30.         'history' : [],
  31.     }
  32.     APP_CONTEXT.pendingMessages = [];
  33.     APP_CONTEXT.function = {};
  34.     APP_CONTEXT.var = {};
  35.     APP_CONTEXT.toast = {}; // Toast dans ToasPageLoading
  37.     /**
  38.     * JSON command utils
  39.     */
  40.     APP_CONTEXT.scrollToBottom = (element = document.querySelector('.messageContainer')) => {
  41.         if (!element) {
  42.             return;
  43.         }
  44.         /** Temps de traitement du .dispatch(), setState(), etc... */
  45.         setTimeout(() => {
  46.             element.scrollTop = element.scrollHeight ?? 99999;
  47.         }, 10);
  48.     }
  50.     APP_CONTEXT.executeCommands = function(commands){
  51.         const list = Array.isArray(commands) ? commands : (commands && typeof commands === 'object' ? [commands] : []);
  52.         for (const command of list) {
  53.             if (!command) {
  54.                 continue;
  55.             }
  56.             if (!command.command) {
  57.                 if (command.notification || command.id) {
  58.                     if (APP_CONTEXT.Notification?.Global?.toast) {
  59.                         APP_CONTEXT.Notification.Global.toast(command);
  60.                     }
  61.                 }
  62.                 continue;
  63.             }
  64.             const context = {...APP_CONTEXT};
  65.             APP_CONTEXT.executeFunctionByName(command.command, context, command); // Passer toute la commande envoyer par le serveur
  66.         }
  67.     }
  69.     APP_CONTEXT.executeFunctionByName = function(functionName, context, args) {
  70.         // console.log('executeFunctionByName', functionName, context, args);
  71.         var namespaces = functionName.split(".");
  72.         var func = namespaces.pop();
  73.         for(var i = 0; i < namespaces.length; i++) {
  74.             if (!context || typeof context !== 'object') {
  75.                 break;
  76.             }
  77.             context = context[namespaces[i]]; // context est remplacer par le premier context trouvé, puis cherche dans celui-ci pour tout les namespace (Post.article.page)
  78.         }
  80.         if (!context || typeof context[func] !== 'function') {
  81.             if (functionName.startsWith('Notification.') && APP_CONTEXT.Notification?.Global?.toast) {
  82.                 return APP_CONTEXT.Notification.Global.toast(args);
  83.             }
  84.             return APP_CONTEXT.deferCommand(functionName, args);
  85.         }
  87.         return context[func].apply(context, [args]); // /!\ [args] != args : apply() attent un tableau à décomposer
  88.     }
  90.     APP_CONTEXT.deferCommand = function(functionName, args) {
  91.         // Queue messages until the SSE controller is ready
  92.         if (functionName === 'Message.add') {
  93.             APP_CONTEXT.pendingMessages = APP_CONTEXT.pendingMessages || [];
  94.             APP_CONTEXT.pendingMessages.push(args);
  95.         } else {
  96.             APP_CONTEXT.pendingCommands = APP_CONTEXT.pendingCommands || [];
  97.             APP_CONTEXT.pendingCommands.push({ functionName, args });
  98.         }
  99.         console.warn('[SSE] Command deferred', functionName, args);
  100.     }
  102.     /**
  103.     * SSE Subscribe to the topic and set commands listener.
  104.     * Only started once the Stimulus SSE controller marks itself ready to avoid early command defers.
  105.     */
  106.     APP_CONTEXT.SSE = APP_CONTEXT.SSE || {};
  107.     APP_CONTEXT.SSE.start = function setApplicationSSELitener() {
  108.         if (APP_CONTEXT.SSE.eventSource) {
  109.             return; // already started
  110.         }
  111.         const uri = ROOT_PATH + '/hub'
  112.         const url = new URL(uri); // generate URL
  113.         // url.searchParams.append('topic', 'GLOBALTOPIC') // add topic params
  114.         url.searchParams.append('topic', '{{ app.user.flux.topicLabel }}') // add topic params
  115.         const eventSource = new EventSource(url, { withCredentials: true }) // set event source
  116.         APP_CONTEXT.SSE.eventSource = eventSource;
  117.         eventSource.addEventListener('message', event => { // set callback
  118.             console.log('SSE Event: ', JSON.parse(event.data));
  119.             APP_CONTEXT.executeCommands(JSON.parse(event.data));
  120.         })
  121.     }
  123.     /**
  124.     * Récupère les notifications en attente (file backend).
  125.     */
  126.     APP_CONTEXT.fetchPendingNotifications = async function(attempt = 0) {
  127.         const toastReady = APP_CONTEXT.toast && typeof APP_CONTEXT.toast.setShow === 'function';
  128.         if (!toastReady && attempt < 10) {
  129.             // Attendre que le composant ToastPageLoading enregistre ses setters
  130.             setTimeout(() => APP_CONTEXT.fetchPendingNotifications(attempt + 1), 300);
  131.             return;
  132.         }
  133.         try {
  134.             const resp = await fetch('/api/notifications/pending', { credentials: 'include' });
  135.             if (!resp.ok) return;
  136.             const data = await resp.json();
  137.             let toastScheduled = false;
  138.             if (data.total && data.total > 0) {
  139.                 const latest = data.items?.[data.items.length - 1];
  140.                 const unreadByConversation = {};
  141.                 (data.items || []).forEach((item) => {
  142.                     if (!item?.conversationId) return;
  143.                     const convKey = String(item.conversationId).match(/(\d+)(?!.*\d)/);
  144.                     const key = convKey ? convKey[1] : String(item.conversationId);
  145.                     unreadByConversation[key] = (unreadByConversation[key] || 0) + 1;
  146.                 });
  147.                 const preview = latest?.content || '';
  148.                 const sender = latest?.sender || 'Nouveau message';
  149.                 const msg = preview
  150.                     ? `${preview}`.substring(0, 140)
  151.                     : (data.total === 1
  152.                         ? '1 nouveau message reçu pendant votre absence.'
  153.                         : `${data.total} nouveaux messages reçus pendant votre absence.`);
  154.                 if (APP_CONTEXT.toast?.setContent) {
  155.                     APP_CONTEXT.toast.setTitle(sender);
  156.                     APP_CONTEXT.toast.setContent(msg);
  157.                     APP_CONTEXT.toast.setRedirectUrl('/conversation');
  158.                     APP_CONTEXT.toast.setShow(true);
  159.                     toastScheduled = true;
  160.                 }
  161.                 APP_CONTEXT.APP_USER = APP_CONTEXT.APP_USER || {};
  162.                 APP_CONTEXT.APP_USER.pendingNotifications = data.total;
  163.                 const unreadList = data.items?.map(i => ({
  164.                     conversationId: i.conversationId,
  165.                     messageId: i.messageId,
  166.                     content: i.content,
  167.                     sender: i.sender,
  168.                     date: i.createdAt * 1000
  169.                 })) || [];
  170.                 const messageNotifications = (data.items || []).map((item) => {
  171.                     const sender = item.sender || 'Quelqu’un';
  172.                     const content = item.content || '';
  173.                     const createdAt = item.createdAt ? new Date(item.createdAt * 1000).toISOString() : new Date().toISOString();
  174.                     return {
  175.                         id: item.messageId ? `msg-${item.messageId}` : `msg-${item.conversationId || 'unknown'}-${item.createdAt || Date.now()}`,
  176.                         type: 'Message.offline',
  177.                         message: content ? `${sender}: ${content}` : `${sender} vous a envoyé un message`,
  178.                         redirectUrl: item.conversationId ? `/conversation/${item.conversationId}` : '/conversation',
  179.                         dateCreation: createdAt,
  180.                         sourceUser: item.sender ? { username: item.sender } : null,
  181.                         conversationId: item.conversationId,
  182.                         messageId: item.messageId,
  183.                         isPendingMessage: true,
  184.                     };
  185.                 });
  186.                 if (window.NotificationBus?.setUnreadMap) {
  187.                     window.NotificationBus.setUnreadMap(unreadByConversation);
  188.                     window.NotificationBus.setUnreadTotal(data.total);
  189.                     window.NotificationBus.emitNewMessages({
  190.                         unreadCount: data.total,
  191.                         unread: unreadList,
  192.                         unreadByConversation,
  193.                     });
  194.                     if (messageNotifications.length > 0 && window.NotificationBus.appendNotifications) {
  195.                         window.NotificationBus.appendNotifications(messageNotifications);
  196.                         window.NotificationBus.emitNotifications(messageNotifications);
  197.                     }
  198.                 } else {
  199.                     try {
  200.                         window.localStorage.setItem('app_unread_conversations', data.total);
  201.                         window.localStorage.setItem('app_unread_by_conv', JSON.stringify(unreadByConversation));
  202.                         window.localStorage.setItem('app_unread_conversations_map', JSON.stringify(unreadByConversation)); // legacy compat
  203.                     } catch (e) {}
  204.                     window.dispatchEvent(new CustomEvent('app:newMessages', {
  205.                         detail: {
  206.                             unreadCount: data.total,
  207.                             unread: unreadList,
  208.                             unreadByConversation,
  209.                         }
  210.                     }));
  211.                     if (messageNotifications.length > 0) {
  212.                         APP_CONTEXT.notificationsList = [
  213.                             ...messageNotifications,
  214.                             ...(APP_CONTEXT.notificationsList || []),
  215.                         ];
  216.                         window.dispatchEvent(new CustomEvent('app:notifications', {
  217.                             detail: { notifications: messageNotifications },
  218.                         }));
  219.                     }
  220.                 }
  221.             }
  223.             const notifTotal = Number(data.notifications_total || 0);
  224.             if (window.NotificationBus?.setPendingCount) {
  225.                 window.NotificationBus.setPendingCount(notifTotal);
  226.             } else {
  227.                 try {
  228.                     window.localStorage.setItem('app_pending_notifications', String(notifTotal));
  229.                 } catch (e) {}
  230.             }
  231.             if (window.NotificationBus?.emitPendingCount) {
  232.                 window.NotificationBus.emitPendingCount(notifTotal);
  233.             } else {
  234.                 window.dispatchEvent(new CustomEvent('app:pendingNotifications', {
  235.                     detail: { count: notifTotal },
  236.                 }));
  237.             }
  238.             if (Array.isArray(data.notifications) && data.notifications.length > 0) {
  239.                 if (window.NotificationBus?.setPendingList) {
  240.                     window.NotificationBus.setPendingList(data.notifications);
  241.                 } else {
  242.                     APP_CONTEXT.pendingNotificationsList = data.notifications;
  243.                 }
  244.                 if (window.NotificationBus?.emitPendingList) {
  245.                     window.NotificationBus.emitPendingList(data.notifications);
  246.                 } else {
  247.                     window.dispatchEvent(new CustomEvent('app:pendingNotificationsList', {
  248.                         detail: { notifications: data.notifications },
  249.                     }));
  250.                 }
  251.             }
  252.             if (notifTotal > 0) {
  253.                 const lastNotif = data.notifications?.[data.notifications.length - 1];
  254.                 const notifFallback = "{{ 'header.notifications.fallback'|trans }}";
  255.                 const title = lastNotif?.sourceUser?.username || notifFallback;
  256.                 const content = lastNotif?.message || notifFallback;
  257.                 const redirectUrl = lastNotif?.redirectUrl || '/conversation';
  258.                 const showToast = () => {
  259.                     if (APP_CONTEXT.toast?.setContent) {
  260.                         APP_CONTEXT.toast.setTitle(title);
  261.                         APP_CONTEXT.toast.setContent(content);
  262.                         APP_CONTEXT.toast.setRedirectUrl(redirectUrl);
  263.                         APP_CONTEXT.toast.setShow(true);
  264.                     }
  265.                 };
  266.                 if (toastScheduled) {
  267.                     setTimeout(showToast, 1200);
  268.                 } else {
  269.                     showToast();
  270.                 }
  271.             }
  272.         } catch (e) {
  273.             console.warn('Unable to fetch pending notifications', e);
  274.         }
  275.     }
  277.     /**
  278.     * Presence heartbeat (online/offline) via SSE.
  279.     */
  280.     APP_CONTEXT.presence = APP_CONTEXT.presence || {};
  281.     APP_CONTEXT.presence.intervalMs = 30000;
  282.     APP_CONTEXT.location = APP_CONTEXT.location || {};
  283.     APP_CONTEXT.location.optIn = !!APP_CONTEXT.APP_USER?.locationOptIn;
  284.     APP_CONTEXT.location.getCurrent = function() {
  285.         return new Promise((resolve) => {
  286.             if (!APP_CONTEXT.location.optIn || !navigator.geolocation) {
  287.                 return resolve(null);
  288.             }
  289.             navigator.geolocation.getCurrentPosition(
  290.                 (pos) => resolve({
  291.                     latitude: pos.coords.latitude,
  292.                     longitude: pos.coords.longitude,
  293.                     accuracy: pos.coords.accuracy,
  294.                 }),
  295.                 () => resolve(null),
  296.                 {
  297.                     enableHighAccuracy: false,
  298.                     timeout: 2000,
  299.                     maximumAge: 60000,
  300.                 }
  301.             );
  302.         });
  303.     };
  304.     APP_CONTEXT.presence.send = async function(isOnline) {
  305.         const url = isOnline ? '/user/heart-beat/actif' : '/user/heart-beat/inactif';
  306.         if (!isOnline) {
  307.             fetch(url, { credentials: 'include', keepalive: true, priority: 'low' }).catch(() => {});
  308.             return;
  309.         }
  310.         const coords = await APP_CONTEXT.location.getCurrent();
  311.         const payload = coords ? JSON.stringify(coords) : '';
  312.         fetch(url, {
  313.             method: 'POST',
  314.             credentials: 'include',
  315.             keepalive: true,
  316.             priority: 'low',
  317.             headers: payload ? { 'Content-Type': 'application/json' } : undefined,
  318.             body: payload || undefined,
  319.         }).catch(() => {});
  320.     };
  321.     APP_CONTEXT.presence.ping = function() {
  322.         APP_CONTEXT.presence.send(true);
  323.     };
  324.     APP_CONTEXT.presence.start = function() {
  325.         const boot = () => {
  326.             APP_CONTEXT.presence.send(true);
  327.             if (!APP_CONTEXT.presence._interval) {
  328.                 APP_CONTEXT.presence._interval = setInterval(APP_CONTEXT.presence.ping, APP_CONTEXT.presence.intervalMs);
  329.             }
  330.             document.addEventListener('visibilitychange', () => {
  331.                 if (document.visibilityState === 'visible') {
  332.                     APP_CONTEXT.presence.send(true);
  333.                 }
  334.             });
  335.             window.addEventListener('pagehide', () => {
  336.                 APP_CONTEXT.presence.send(false, true);
  337.             });
  338.         };
  339.         if (window.requestIdleCallback) {
  340.             window.requestIdleCallback(boot, { timeout: 1500 });
  341.         } else {
  342.             setTimeout(boot, 300);
  343.         }
  344.     };
  345.     APP_CONTEXT.presence.start();
  347.     // déclenchement immédiat
  348.     APP_CONTEXT.fetchPendingNotifications();
  349. </script>
  350. {% endif %}