cyberia 3.1.3 → 3.2.9

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

@@ -1,23 +1,18 @@
-import { Badge } from './Badge.js';
-import { BtnIcon } from './BtnIcon.js';
-import { Css, darkTheme, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
-import { buildBadgeToolTipMenuOption, Modal, renderViewTitle } from './Modal.js';
+import { Css, darkTheme, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
+import { Modal, renderViewTitle } from './Modal.js';
 import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
-import { htmls, s, sIframe } from './VanillaJs.js';
-
+import { s, sIframe } from './VanillaJs.js';
 // https://mintlify.com/docs/quickstart
-
-const Docs = {
-  RenderModal: async function (type) {
-    const docData = this.Data.find((d) => d.type === type);
+class Docs {
+  static async RenderModal(type) {
+    const docData = Docs.Data.find((d) => d.type === type);
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
     const parentBarMode =
       Modal.Data['modal-docs'] && Modal.Data['modal-docs'].options.barMode
         ? Modal.Data['modal-docs'].options.barMode
         : undefined;
-
-    await Modal.Render({
+    await Modal.instance({
       barConfig,
       title: renderViewTitle(docData),
       id: ModalId,
@@ -51,7 +46,15 @@ const Docs = {
     });
     const iframeEl = s(`.iframe-${ModalId}`);
     let swaggerThemeEventKey = null;
+    let unbindIframeLayoutSync = null;
     if (iframeEl) {
+      const scheduleViewLayoutSync = () => {
+        const sync = () => Modal.syncViewLayout();
+        sync();
+        setTimeout(sync, 0);
+        setTimeout(sync, 120);
+        setTimeout(sync, 400);
+      };
       iframeEl.addEventListener('load', () => {
         try {
           const iframeWin = iframeEl.contentWindow;
@@ -62,11 +65,34 @@ const Docs = {
         } catch (e) {
           // cross-origin or security restriction — safe to ignore
         }
-        window.scrollTo(0, 0);
+        // Keep the parent window scroll untouched.
+        // These modals are fixed-position; scrolling the parent on iframe navigation
+        // shifts Chrome layout calculations and leaves view modals offset by 50px.
         // Bind Shift+K inside the iframe to focus the parent SearchBox (mirrors app-wide shortcut)
         try {
+          const iframeWin = iframeEl.contentWindow;
           const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
           if (iframeDoc) {
+            if (unbindIframeLayoutSync) unbindIframeLayoutSync();
+            const onIframeAnchorClick = (e) => {
+              if (e.target && e.target.closest && e.target.closest('a')) {
+                scheduleViewLayoutSync();
+              }
+            };
+            const onIframeHashChange = () => scheduleViewLayoutSync();
+            const onIframePopState = () => scheduleViewLayoutSync();
+            iframeDoc.addEventListener('click', onIframeAnchorClick, true);
+            if (iframeWin) {
+              iframeWin.addEventListener('hashchange', onIframeHashChange);
+              iframeWin.addEventListener('popstate', onIframePopState);
+            }
+            unbindIframeLayoutSync = () => {
+              iframeDoc.removeEventListener('click', onIframeAnchorClick, true);
+              if (iframeWin) {
+                iframeWin.removeEventListener('hashchange', onIframeHashChange);
+                iframeWin.removeEventListener('popstate', onIframePopState);
+              }
+            };
             iframeDoc.addEventListener('keydown', (e) => {
               if (e.shiftKey && e.key.toLowerCase() === 'k') {
                 e.preventDefault();
@@ -85,48 +111,30 @@ const Docs = {
         } catch (e) {
           // cross-origin or security restriction — safe to ignore
         }
+        scheduleViewLayoutSync();
       });
-
       if (type === 'src') {
         swaggerThemeEventKey = `jsdocs-iframe-${ModalId}`;
-
         const applyJsDocsTheme = (isDark) => {
           try {
-            const iframeWin = iframeEl.contentWindow;
-            if (!iframeWin) return;
-            const theme = isDark ? 'dark' : 'light';
-            if (typeof iframeWin.updateTheme === 'function') {
-              // clean-jsdoc-theme exposes updateTheme() globally
-              iframeWin.updateTheme(theme);
-            } else {
-              // Fallback: replicate localUpdateTheme manually
-              const iframeDoc = iframeEl.contentDocument || iframeWin.document;
-              if (!iframeDoc || !iframeDoc.body) return;
-              iframeDoc.body.setAttribute('data-theme', theme);
-              iframeDoc.body.classList.remove('dark', 'light');
-              iframeDoc.body.classList.add(theme);
-              const iconID = isDark ? '#light-theme-icon' : '#dark-theme-icon';
-              const svgUses = sIframe(iframeEl, '.theme-svg-use') ? iframeDoc.querySelectorAll('.theme-svg-use') : [];
-              svgUses.forEach((svg) => svg.setAttribute('xlink:href', iconID));
-              iframeWin.localStorage?.setItem('theme', theme);
-            }
+            const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
+            if (!iframeDoc || !iframeDoc.documentElement) return;
+            // TypeDoc built-in theme: data-theme on <html>, stored as 'tsd-theme' in localStorage
+            iframeDoc.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+            iframeEl.contentWindow?.localStorage?.setItem('tsd-theme', isDark ? 'dark' : 'light');
           } catch (e) {
             // cross-origin or security restriction — safe to ignore
           }
         };
-
         // Apply current theme as soon as the iframe content is ready
         iframeEl.addEventListener('load', () => applyJsDocsTheme(darkTheme));
-
         // Keep in sync whenever the parent page theme changes
         ThemeEvents[swaggerThemeEventKey] = () => {
           if (s(`.iframe-${ModalId}`)) applyJsDocsTheme(darkTheme);
         };
       }
-
       if (type === 'api') {
         swaggerThemeEventKey = `swagger-iframe-${ModalId}`;
-
         const applySwaggerTheme = (isDark) => {
           try {
             const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
@@ -143,10 +151,8 @@ const Docs = {
             // cross-origin or security restriction — safe to ignore
           }
         };
-
         // Apply current theme as soon as the iframe content is ready
         iframeEl.addEventListener('load', () => applySwaggerTheme(darkTheme));
-
         // Keep in sync whenever the parent page theme changes
         ThemeEvents[swaggerThemeEventKey] = () => {
           if (s(`.iframe-${ModalId}`)) applySwaggerTheme(darkTheme);
@@ -159,7 +165,6 @@ const Docs = {
         const barHeight = barEl ? barEl.offsetHeight : Modal.headerTitleHeight;
         s(`.iframe-${ModalId}`).style.height = `${s(`.${ModalId}`).offsetHeight - barHeight}px`;
       }
-
       if (type.match('coverage')) {
         simpleIconsRender(`.doc-icon-coverage`);
         simpleIconsRender(`.doc-icon-coverage-link`);
@@ -167,11 +172,12 @@ const Docs = {
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
     Modal.Data[ModalId].onCloseListener[ModalId] = () => {
+      if (unbindIframeLayoutSync) unbindIframeLayoutSync();
       if (swaggerThemeEventKey) delete ThemeEvents[swaggerThemeEventKey];
       closeModalRouteChangeEvent({ closedId: ModalId });
     };
-  },
-  Data: [
+  }
+  static Data = [
     {
       type: 'repo',
       icon: html`<i class="fab fa-github"></i>`,
@@ -238,38 +244,36 @@ const Docs = {
         if (s(`.doc-icon-coverage-link`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage-link`));
       },
     },
-  ],
-  Tokens: {},
-  Init: async function (options = {}) {
+  ];
+  static Tokens = {};
+  static async instance(options = {}) {
     const { idModal } = options;
-    this.Tokens[idModal] = options;
+    Docs.Tokens[idModal] = options;
     setTimeout(() => {
       s(`.btn-docs-src`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'src' });
-        await this.RenderModal('src');
+        await Docs.RenderModal('src');
       };
       s(`.btn-docs-api`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'api' });
-        await this.RenderModal('api');
+        await Docs.RenderModal('api');
       };
       s(`.btn-docs-coverage`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'coverage' });
-        await this.RenderModal('coverage');
+        await Docs.RenderModal('coverage');
       };
-
       s(`.btn-docs-coverage-link`).onclick = () => {
-        const docData = this.Data.find((d) => d.type === 'coverage-link');
+        const docData = Docs.Data.find((d) => d.type === 'coverage-link');
         location.href = docData.url();
       };
       s(`.btn-docs-repo`).onclick = () => {
-        const docData = this.Data.find((d) => d.type === 'repo');
+        const docData = Docs.Data.find((d) => d.type === 'repo');
         location.href = docData.url();
       };
       s(`.btn-docs-demo`).onclick = () => {
-        const docData = this.Data.find((d) => d.type === 'demo');
+        const docData = Docs.Data.find((d) => d.type === 'demo');
         location.href = docData.url();
       };
-
       listenQueryPathInstance({
         id: options.idModal,
         routeId: 'docs',
@@ -283,44 +287,15 @@ const Docs = {
         },
       });
     });
-    let docMenuRender = '';
-    for (const docData of this.Data) {
+    // Register theme events for items that have them (Docs-specific concern)
+    for (const docData of Docs.Data) {
       if (docData.themeEvent) {
         ThemeEvents[`doc-icon-${docData.type}`] = docData.themeEvent;
         setTimeout(ThemeEvents[`doc-icon-${docData.type}`]);
       }
-      let tabHref, style, labelStyle;
-      switch (docData.type) {
-        case 'repo':
-        case 'coverage-link':
-          style = renderCssAttr({ style: { height: '45px' } });
-          labelStyle = renderCssAttr({ style: { top: '8px', left: '9px' } });
-          break;
-
-        default:
-          break;
-      }
-      tabHref = docData.url();
-      const subMenuIcon =
-        options.subMenuIcon && typeof options.subMenuIcon === 'function'
-          ? options.subMenuIcon(docData.type)
-          : docData.icon;
-      docMenuRender += html`
-        ${await BtnIcon.Render({
-          class: `in wfa main-btn-menu submenu-btn btn-docs btn-docs-${docData.type}`,
-          label: html`<span class="inl menu-btn-icon">${subMenuIcon}</span
-            ><span class="menu-label-text menu-label-text-docs"> ${docData.text} </span>`,
-          tabHref,
-          tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
-          useMenuBtn: true,
-        })}
-      `;
     }
-    // s(`.menu-btn-container-children`).classList.remove('hide');
-    // htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
-
-    htmls('.menu-btn-container-children-docs', docMenuRender);
-
+    // Build submenu items and populate — submenu system is owned by Modal
+    Modal.subMenuPopulate('docs', await Modal.buildSubMenuItemsHtml('docs', Docs.Data, options));
     {
       const docsData = [
         {
@@ -360,7 +335,6 @@ const Docs = {
           description: 'Join our developer community',
         },
       ];
-
       return html`
         <style>
           .docs-landing {
@@ -499,7 +473,6 @@ const Docs = {
         </div>
       `;
     }
-  },
-};
-
+  }
+}
 export { Docs };