underpost 2.8.878 → 2.8.882

package/src/client/components/core/windowGetDimensions.js

@@ -0,0 +1,202 @@
+/*
+ * windowGetDimensions.js
+ * ES6 vanilla utilities: windowGetH and windowGetW
+ * Returns the most reliable viewport height/width available, with fallbacks
+ * from modern to old browsers.
+ *
+ * Usage:
+ *   import { windowGetH, windowGetW } from './windowGetDimensions.js';
+ *   const h = windowGetH();
+ *   const w = windowGetW();
+ *
+ * Notes:
+ * - visualViewport (when present) reflects the *visible* viewport (changes when
+ *   the on-screen keyboard opens, or when mobile address/toolbars show/hide).
+ * - documentElement.clientHeight/Width reflect the layout viewport.
+ * - window.innerHeight/innerWidth include scrollbars and are widely supported.
+ * - screen.* values are last-resort and reflect the physical screen, not the
+ *   browser chrome.
+ */
+
+// Helper: coerce a candidate to a finite integer (or null if not usable)
+const toInt = (v) => {
+  const n = Number(v);
+  return Number.isFinite(n) && n > 0 ? Math.round(n) : null;
+};
+
+/**
+ * Try visualViewport values (most accurate for "what's actually visible").
+ * @returns {{height: number|null, width: number|null}}
+ */
+const getFromVisualViewport = () => {
+  if (typeof window !== 'undefined' && window.visualViewport) {
+    const { height, width } = window.visualViewport;
+    return { height: toInt(height), width: toInt(width) };
+  }
+  return { height: null, width: null };
+};
+
+/**
+ * Try layout viewport (doctype-root) measurements.
+ * document.documentElement.clientHeight/clientWidth are stable and widely used.
+ * @returns {{height: number|null, width: number|null}}
+ */
+const getFromDocumentElement = () => {
+  if (typeof document !== 'undefined' && document.documentElement) {
+    const { clientHeight, clientWidth } = document.documentElement;
+    return { height: toInt(clientHeight), width: toInt(clientWidth) };
+  }
+  return { height: null, width: null };
+};
+
+/**
+ * Try window.* measurements (innerHeight/innerWidth are widely supported).
+ * @returns {{height: number|null, width: number|null}}
+ */
+const getFromWindowInner = () => {
+  if (typeof window !== 'undefined') {
+    return { height: toInt(window.innerHeight), width: toInt(window.innerWidth) };
+  }
+  return { height: null, width: null };
+};
+
+/**
+ * Try body measurements.
+ * @returns {{height: number|null, width: number|null}}
+ */
+const getFromBody = () => {
+  if (typeof document !== 'undefined' && document.body) {
+    return { height: toInt(document.body.clientHeight), width: toInt(document.body.clientWidth) };
+  }
+  return { height: null, width: null };
+};
+
+/**
+ * Try screen measurements (physical screen/fallback).
+ * screen.availHeight/availWidth are often available; outer* might also exist.
+ * @returns {{height: number|null, width: number|null}}
+ */
+const getFromScreen = () => {
+  if (typeof window !== 'undefined' && window.screen) {
+    const { availHeight, availWidth, height, width } = window.screen;
+    return {
+      height: toInt(availHeight) || toInt(height) || null,
+      width: toInt(availWidth) || toInt(width) || null,
+    };
+  }
+  return { height: null, width: null };
+};
+
+/**
+ * Try outer dimensions (less reliable, but sometimes available).
+ * @returns {{height: number|null, width: number|null}}
+ */
+const getFromOuter = () => {
+  if (typeof window !== 'undefined') {
+    return { height: toInt(window.outerHeight), width: toInt(window.outerWidth) };
+  }
+  return { height: null, width: null };
+};
+
+/**
+ * Merge candidates in priority order and return first valid value.
+ * @param {...(number|null)[]} candidates
+ * @returns {number|null}
+ */
+const pickFirst = (...candidates) => {
+  for (const c of candidates) {
+    if (Number.isFinite(c) && c > 0) return Math.round(c);
+  }
+  return null;
+};
+
+/**
+ * Get the best-available viewport height in pixels.
+ * Priority (from most reliable for "visible" to least):
+ *  1. window.visualViewport.height
+ *  2. document.documentElement.clientHeight
+ *  3. window.innerHeight
+ *  4. document.body.clientHeight
+ *  5. window.screen.availHeight / window.screen.height
+ *  6. window.outerHeight
+ *
+ * @param {Object} [options]
+ * @param {boolean} [options.preferVisualViewport=true] - when true, prefer visualViewport if present
+ * @returns {number|null} height in px (rounded integer) or null if none found
+ */
+export const windowGetH = (options = {}) => {
+  const { preferVisualViewport = true } = options;
+
+  const vv = getFromVisualViewport();
+  const de = getFromDocumentElement();
+  const wi = getFromWindowInner();
+  const bd = getFromBody();
+  const sc = getFromScreen();
+  const ot = getFromOuter();
+
+  if (preferVisualViewport) {
+    return pickFirst(vv.height, de.height, wi.height, bd.height, sc.height, ot.height) || null;
+  }
+
+  // if not preferring visualViewport, still include it but later
+  return pickFirst(de.height, wi.height, bd.height, vv.height, sc.height, ot.height) || null;
+};
+
+/**
+ * Get the best-available viewport width in pixels.
+ * Priority (from most reliable for "visible" to least):
+ *  1. window.visualViewport.width
+ *  2. document.documentElement.clientWidth
+ *  3. window.innerWidth
+ *  4. document.body.clientWidth
+ *  5. window.screen.availWidth / window.screen.width
+ *  6. window.outerWidth
+ *
+ * @param {Object} [options]
+ * @param {boolean} [options.preferVisualViewport=true] - when true, prefer visualViewport if present
+ * @returns {number|null} width in px (rounded integer) or null if none found
+ */
+export const windowGetW = (options = {}) => {
+  const { preferVisualViewport = true } = options;
+
+  const vv = getFromVisualViewport();
+  const de = getFromDocumentElement();
+  const wi = getFromWindowInner();
+  const bd = getFromBody();
+  const sc = getFromScreen();
+  const ot = getFromOuter();
+
+  if (preferVisualViewport) {
+    return pickFirst(vv.width, de.width, wi.width, bd.width, sc.width, ot.width) || null;
+  }
+
+  return pickFirst(de.width, wi.width, bd.width, vv.width, sc.width, ot.width) || null;
+};
+
+// Convenience default export (optional)
+export default {
+  windowGetH,
+  windowGetW,
+};
+
+/* --------------------------------------------------------------------------
+ * Example usage:
+ *
+ * import { windowGetH, windowGetW } from './windowGetDimensions.js';
+ *
+ * // Get values now
+ * const currentH = windowGetH();
+ * const currentW = windowGetW();
+ *
+ * // React to changes (recommended on mobile)
+ * if (window.visualViewport) {
+ *   window.visualViewport.addEventListener('resize', () => {
+ *     console.log('visualViewport resize ->', windowGetH(), windowGetW());
+ *   });
+ * } else {
+ *   window.addEventListener('resize', () => {
+ *     console.log('window resize ->', windowGetH(), windowGetW());
+ *   });
+ * }
+ *
+ * --------------------------------------------------------------------------*/

package/src/client/components/default/MenuDefault.js

@@ -29,6 +29,8 @@ import { Recover } from '../core/Recover.js';
 import { DefaultManagement } from '../../services/default/default.management.js';
 import { Page500 } from '../core/500.js';
 import { Page404 } from '../core/404.js';
+import { PanelForm } from '../core/PanelForm.js';
+import { Chat } from '../core/Chat.js';
 
 const MenuDefault = {
   Data: {},
@@ -49,6 +51,7 @@ const MenuDefault = {
         <div class="fl menu-btn-container">
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-home main-btn-menu-active',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-home"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('home')}</span>`,
@@ -61,6 +64,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-log-in',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-sign-in-alt"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('log-in')}</span>`,
@@ -72,6 +76,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-sign-up',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-user-plus"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('sign-up')}</span>`,
@@ -83,6 +88,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-log-out',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-sign-out-alt"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('log-out')}</span>`,
@@ -95,6 +101,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-account',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-user-circle"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('account')}</span>`,
@@ -107,6 +114,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-settings',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fas fa-sliders-h"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('settings')}</span>`,
@@ -118,6 +126,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-recover hide',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('recover')}</span>`,
@@ -129,6 +138,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-default-management',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-rectangle-list"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('default-management')}</span>`,
@@ -140,6 +150,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-404 hide',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-triangle-exclamation"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('404')}</span>`,
@@ -151,6 +162,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-500 hide',
+            useMenuBtn: true,
             label: renderMenuLabel({
               icon: html`<i class="fa-solid fa-circle-exclamation"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('500')}</span>`,
@@ -160,6 +172,35 @@ const MenuDefault = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('500')),
           })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-blog',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-file-invoice"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('blog')}</span>`,
+            }),
+            attrs: `data-id="blog"`,
+            tabHref: `${getProxyPath()}blog`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('blog')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-chat',
+            label: html`${renderMenuLabel({
+              icon: html`<i class="far fa-comments"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('chat')}</span>`,
+            })}
+            ${await Badge.Render({
+              id: 'main-btn-chat',
+              type: 'circle-red',
+              style: badgeNotificationMenuStyle,
+              classList: 'hide',
+            })}`,
+            attrs: `data-id="chat"`,
+            tabHref: `${getProxyPath()}chat`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('chat')),
+          })}
         </div>
       `,
       barConfig: newInstance(barConfig),
@@ -181,47 +222,7 @@ const MenuDefault = {
       RouterInstance,
       heightTopBar,
       heightBottomBar,
-      htmlMainBody: async () => {
-        setTimeout(() => {
-          EventsUI.onClick('.get-started-button', (e) => {
-            e.preventDefault();
-            location.href = `https://www.nexodev.org/docs/?cid=src`;
-          });
-        });
-        return html`
-          <div class="landing-container">
-            <div class="content-wrapper">
-              <h1 class="animated-text">
-                <span class="greeting">Hello, World!</span>
-                <span class="subtitle">Welcome to Our Platform</span>
-              </h1>
-
-              <div class="features">
-                <div class="feature-card">
-                  <i class="icon">🚀</i>
-                  <h3>Fast & Reliable</h3>
-                  <p>Lightning-fast performance with 99.9% uptime</p>
-                </div>
-                <div class="feature-card">
-                  <i class="icon">🎨</i>
-                  <h3>Beautiful UI</h3>
-                  <p>Modern and intuitive user interface</p>
-                </div>
-                <div class="feature-card">
-                  <i class="icon">⚡</i>
-                  <h3>Powerful Features</h3>
-                  <p>Everything you need in one place</p>
-                </div>
-              </div>
-
-              <button class="cta-button get-started-button">
-                Get Started
-                <span class="button-icon">→</span>
-              </button>
-            </div>
-          </div>
-        `;
-      },
+      htmlMainBody: options.htmlMainBody,
     });
 
     ThemeEvents['main-theme-handler'] = () => {
@@ -626,6 +627,7 @@ const MenuDefault = {
         RouterInstance,
         heightTopBar,
         heightBottomBar,
+        observer: true,
       });
     });
 
@@ -672,6 +674,68 @@ const MenuDefault = {
         observer: true,
       });
     });
+
+    EventsUI.onClick(`.main-btn-blog`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      const idModal = 'modal-blog';
+      const routeModal = 'blog';
+      const idEvent = `form-panel-${idModal}`;
+      await Modal.Render({
+        id: idModal,
+        route: routeModal,
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-file-invoice"></i>`,
+          text: Translate.Render('blog'),
+        }),
+        observer: true,
+        html: async () => {
+          setTimeout(async () => {
+            await PanelForm.instance({
+              idPanel: 'default-blog',
+              heightTopBar,
+              heightBottomBar,
+              defaultUrlImage: `${getProxyPath()}android-chrome-96x96.png`,
+              Elements: ElementsDefault,
+              parentIdModal: idModal,
+              scrollClassContainer: `html-${idModal}`,
+              route: routeModal,
+            });
+          });
+        },
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-chat`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-chat',
+        route: 'chat',
+        barConfig,
+        title: renderViewTitle({
+          icon: html` <i class="far fa-comments"></i>`,
+          text: Translate.Render('chat'),
+        }),
+        html: async () => await Chat.Render({ idModal: 'modal-chat' }),
+        handleType: 'bar',
+        maximize: true,
+        observer: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
   },
 };
 

package/src/client/components/default/RoutesDefault.js

@@ -27,6 +27,8 @@ const RoutesDefault = () => {
       render: () => s(`.main-btn-account`).click(),
     },
     '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
+    '/chat': { title: 'docs', render: () => s(`.main-btn-chat`).click() },
+    '/blog': { title: 'docs', render: () => s(`.main-btn-blog`).click() },
     '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click() },
     '/default-management': {
       title: 'default-management',

package/src/client/services/default/default.management.js

@@ -344,6 +344,7 @@ const DefaultManagement = {
       <div class="in section-mp">
         ${await AgGrid.Render({
           id: gridId,
+          parentModal: options.idModal,
           usePagination: true,
           darkTheme,
           gridOptions: {

package/src/client/services/document/document.service.js

@@ -0,0 +1,97 @@
+import { Auth } from '../../components/core/Auth.js';
+import { loggerFactory } from '../../components/core/Logger.js';
+import { getApiBaseUrl, headersFactory, payloadFactory } from '../core/core.service.js';
+
+const logger = loggerFactory(import.meta);
+
+logger.info('Load service');
+
+const endpoint = 'document';
+
+const DocumentService = {
+  post: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'POST',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  get: (options = { id: '' }) =>
+    new Promise((resolve, reject) => {
+      const url = new URL(getApiBaseUrl({ id: options.id, endpoint }));
+      if (options.params) {
+        Object.keys(options.params).forEach((key) => url.searchParams.append(key, options.params[key]));
+      }
+      fetch(url, {
+        method: 'GET',
+        headers: headersFactory(),
+        credentials: 'include',
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        });
+    }),
+  delete: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'DELETE',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  put: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'PUT',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+};
+
+export { DocumentService };

package/src/client/services/file/file.service.js

@@ -33,6 +33,7 @@ const FileService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'GET',
         headers: headersFactory(),
+        credentials: 'include',
       })
         .then(async (res) => {
           return await res.json();
@@ -51,6 +52,7 @@ const FileService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'DELETE',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {

package/src/client/ssr/Render.js

@@ -5,7 +5,7 @@ SrrComponent = ({ title, ssrPath, buildId, ssrHeadComponents, ssrBodyComponents,
       <title>${title}</title>
       <link rel="icon" type="image/x-icon" href="${ssrPath}favicon.ico" />
       <meta charset="UTF-8" />
-      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
       <script>
         window.renderPayload = ${renderApi.JSONweb(renderPayload)};
       </script>

package/src/client/ssr/head/DefaultScripts.js

@@ -1,4 +1,6 @@
 SrrComponent = ({ ssrPath }) => html`
   <script type="text/javascript" src="${ssrPath}dist/validator/validator.min.js"></script>
   <script type="text/javascript" src="${ssrPath}dist/ag-grid-community/ag-grid-community.min.js"></script>
+  <script type="text/javascript" src="${ssrPath}dist/easymde/easymde.min.js"></script>
+  <link rel="stylesheet" href="${ssrPath}dist/easymde/easymde.min.css" />
 `;

package/src/client/ssr/head/Seo.js

@@ -7,6 +7,7 @@ SrrComponent = ({ title, author, keywords, description, themeColor, ssrPath, can
   <meta name="theme-color" content="${themeColor}" />
 
   <meta property="og:title" content="${title}" />
+  <meta property="og:type" content="website" />
   <meta property="og:description" content="${description}" />
   <meta property="og:image" content="${thumbnail}" />
   <meta property="og:url" content="${canonicalURL}" />

package/src/index.js

@@ -35,7 +35,7 @@ class Underpost {
    * @type {String}
    * @memberof Underpost
    */
-  static version = 'v2.8.878';
+  static version = 'v2.8.882';
   /**
    * Repository cli API
    * @static

package/src/mailer/EmailRender.js

@@ -1,4 +1,4 @@
-import { ssrFactory } from '../server/client-formatted.js';
+import { ssrFactory } from '../server/ssr.js';
 
 const EmailRender = {
   style: {