underpost 2.8.881 → 2.8.883

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

@@ -1,25 +1,89 @@
-import { append } from './VanillaJs.js';
+import { renderCssAttr } from './Css.js';
+import { append, s } from './VanillaJs.js';
+import { Modal } from './Modal.js';
 
 const ToolTip = {
   Tokens: {},
-  Render: async function (options = { container: '', htmlRender: '', id: '', classList: '' }) {
-    const { container, htmlRender, id } = options;
-    const tooltipId = 'tooltip-' + id;
-    append(
-      container,
-      html`
-        <style>
-          ${container}:hover .${tooltipId} {
-            visibility: visible;
-          }
-          .${tooltipId} {
-            visibility: hidden;
-          }
-        </style>
-        <div class="tooltip ${options?.classList ? `${options.classList} ` : ' '}${tooltipId}">${htmlRender}</div>
-      `,
-    );
-    return '';
+  Render: async function (
+    options = { container: '', htmlRender: '', id: '', classList: '', useVisibilityHover: false, useMenuBtn: false },
+  ) {
+    const { container, htmlRender, id, useVisibilityHover } = options;
+
+    if (useVisibilityHover) {
+      const tooltipId = 'tooltip-' + id;
+      append(
+        container,
+        html`
+          <style>
+            ${container}:hover .${tooltipId} {
+              visibility: visible;
+            }
+            .${tooltipId} {
+              visibility: hidden;
+            }
+          </style>
+          <div class="tooltip ${options?.classList ? `${options.classList} ` : ' '}${tooltipId}">${htmlRender}</div>
+        `,
+      );
+      return;
+    }
+
+    const containerEl = s(container);
+    if (!containerEl) return;
+
+    const tooltipId = `tooltip-${id}`;
+    const tooltip = html`
+      <div
+        class="fix fix-tooltip ${tooltipId}"
+        style="${renderCssAttr({
+          style: {
+            'z-index': 10,
+            position: 'absolute',
+            opacity: 0,
+            transition: 'opacity 0.2s ease-in-out',
+            'pointer-events': 'none',
+          },
+        })}"
+      >
+        ${htmlRender}
+      </div>
+    `;
+    append('body', tooltip);
+
+    const tooltipEl = s(`.${tooltipId}`);
+
+    containerEl.addEventListener('mouseenter', () => {
+      if (
+        options.useMenuBtn &&
+        s(
+          `.btn-icon-menu-mode-${Modal.Data['modal-menu'].options.mode === 'slide-menu-right' ? 'left' : 'right'}`,
+        ).classList.contains('hide')
+      )
+        return;
+
+      const containerRect = containerEl.getBoundingClientRect();
+      const tooltipRect = tooltipEl.getBoundingClientRect();
+
+      let top = containerRect.bottom + window.scrollY + 5;
+      let left = containerRect.left + window.scrollX + containerRect.width / 2 - tooltipRect.width / 2;
+
+      // Adjust if it goes off-screen
+      if (left < 0) left = 5;
+      if (left + tooltipRect.width > window.innerWidth) {
+        left = window.innerWidth - tooltipRect.width - 5;
+      }
+      if (top + tooltipRect.height > window.innerHeight) {
+        top = containerRect.top + window.scrollY - tooltipRect.height - 5;
+      }
+
+      tooltipEl.style.top = `${top}px`;
+      tooltipEl.style.left = `${left}px`;
+      tooltipEl.style.opacity = '1';
+    });
+
+    containerEl.addEventListener('mouseleave', () => {
+      tooltipEl.style.opacity = '0';
+    });
   },
 };
 

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

@@ -34,7 +34,7 @@ const Translate = {
   Render: function (keyLang, placeholder, options = { disableTextFormat: false }) {
     if (!(keyLang in this.Data)) {
       // TODO: add translate package or library for this case
-      logger.warn('translate key lang does not exist: ', keyLang);
+      // logger.warn('translate key lang does not exist: ', keyLang);
       return options.disableTextFormat ? keyLang : textFormatted(keyLang);
     }
     if (placeholder) this.Data[keyLang].placeholder = placeholder;

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

@@ -5,6 +5,7 @@
  */
 
 import { s4 } from './CommonJs.js';
+import { windowGetH, windowGetW } from './windowGetDimensions.js';
 
 /*
 
@@ -232,10 +233,10 @@ const fullScreenIn = () => {
  * @memberof VanillaJS
  */
 const getResponsiveData = () => {
-  const inner = { width: window.innerWidth, height: window.innerHeight };
+  const inner = { width: windowGetW(), height: windowGetH() };
   return inner.width > inner.height
-    ? { ...inner, minValue: window.innerHeight, maxValue: window.innerWidth, minType: 'height', maxType: 'width' }
-    : { ...inner, minValue: window.innerWidth, maxValue: window.innerHeight, minType: 'width', maxType: 'height' };
+    ? { ...inner, minValue: windowGetH(), maxValue: windowGetW(), minType: 'height', maxType: 'width' }
+    : { ...inner, minValue: windowGetW(), maxValue: windowGetH(), minType: 'width', maxType: 'height' };
 };
 
 /**

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

@@ -51,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>`,
@@ -63,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>`,
@@ -74,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>`,
@@ -85,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>`,
@@ -97,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>`,
@@ -109,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>`,
@@ -120,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>`,
@@ -131,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>`,
@@ -142,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>`,
@@ -153,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>`,
@@ -164,6 +174,7 @@ const MenuDefault = {
           })}
           ${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>`,

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="width=device-width, initial-scale=1.0" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
       <script>
         window.renderPayload = ${renderApi.JSONweb(renderPayload)};
       </script>

package/src/index.js

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