underpost 2.8.881 → 2.8.882

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

@@ -1,12 +1,9 @@
 import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
 import { Css, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
-import { DropDown } from './DropDown.js';
-import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
+import { buildBadgeToolTipMenuOption, Modal, renderViewTitle } from './Modal.js';
 import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
-import { Translate } from './Translate.js';
 import { htmls, s } from './VanillaJs.js';
-import Sortable from 'sortablejs';
 
 // https://mintlify.com/docs/quickstart
 
@@ -159,7 +156,13 @@ const Docs = {
         id: options.idModal,
         routeId: 'docs',
         event: (path) => {
+          Modal.subMenuBtnClass['docs'].open = !Modal.subMenuBtnClass['docs'].open;
           if (s(`.btn-docs-${path}`)) s(`.btn-docs-${path}`).click();
+          if (Modal.mobileModal()) {
+            setTimeout(() => {
+              s(`.btn-close-modal-menu`).click();
+            });
+          }
         },
       });
     });
@@ -183,98 +186,199 @@ const Docs = {
       tabHref = docData.url();
       docMenuRender += html`
         ${await BtnIcon.Render({
-          class: `in wfa main-btn-menu btn-docs-${docData.type}`,
-          label: html`<span class="menu-btn-icon">${docData.icon}</span
-            ><span class="menu-label-text"> ${docData.text} </span>`,
+          class: `in wfa main-btn-menu submenu-btn btn-docs btn-docs-${docData.type}`,
+          label: html`<span class="inl menu-btn-icon">${docData.icon}</span
+            ><span class="menu-label-text menu-label-text-docs"> ${docData.text} </span>`,
           tabHref,
-          handleContainerClass: 'handle-btn-container',
           tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
-          attrs: `data-id="${docData.type}"`,
-          handleContainerClass: 'handle-btn-container',
+          useMenuBtn: true,
         })}
       `;
     }
+    // s(`.menu-btn-container-children`).classList.remove('hide');
+    // htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
 
-    htmls('.menu-btn-container-children', html` <div class="fl menu-btn-container-docs">${docMenuRender}</div>`);
-    if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.add('hide');
-    htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
+    htmls('.menu-btn-container-children-docs', docMenuRender);
 
-    this.Tokens[idModal] = new Sortable(s(`.menu-btn-container-docs`), {
-      animation: 150,
-      group: `docs-sortable`,
-      forceFallback: true,
-      fallbackOnBody: true,
-      handle: '.handle-btn-container',
-      store: {
-        /**
-         * Get the order of elements. Called once during initialization.
-         * @param   {Sortable}  sortable
-         * @returns {Array}
-         */
-        get: function (sortable) {
-          const order = localStorage.getItem(sortable.options.group.name);
-          return order ? order.split('|') : [];
+    {
+      const docsData = [
+        {
+          id: 'getting-started',
+          icon: 'rocket',
+          title: 'Getting Started',
+          description: 'Learn the basics and get started with our platform',
         },
-
-        /**
-         * Save the order of elements. Called onEnd (when the item is dropped).
-         * @param {Sortable}  sortable
-         */
-        set: function (sortable) {
-          const order = sortable.toArray();
-          localStorage.setItem(sortable.options.group.name, order.join('|'));
+        {
+          id: 'api-docs',
+          icon: 'code',
+          title: 'API Reference',
+          description: 'Detailed documentation of our API endpoints',
         },
-      },
-      // chosenClass: 'css-class',
-      // ghostClass: 'css-class',
-      // Element dragging ended
-      onEnd: function (/**Event*/ evt) {
-        // console.log('Sortable onEnd', evt);
-        // console.log('evt.oldIndex', evt.oldIndex);
-        // console.log('evt.newIndex', evt.newIndex);
-        const slotId = Array.from(evt.item.classList).pop();
-        // console.log('slotId', slotId);
-        if (evt.oldIndex === evt.newIndex) s(`.${slotId}`).click();
+        {
+          id: 'guides',
+          icon: 'book',
+          title: 'Guides',
+          description: 'Step-by-step tutorials and how-to guides',
+        },
+        {
+          id: 'demo',
+          icon: 'laptop-code',
+          title: 'Demo',
+          description: 'Practical examples and code snippets',
+        },
+        {
+          id: 'faq',
+          icon: 'question-circle',
+          title: 'FAQ',
+          description: 'Frequently asked questions',
+        },
+        {
+          id: 'community',
+          icon: 'users',
+          title: 'Community',
+          description: 'Join our developer community',
+        },
+      ];
 
-        // var itemEl = evt.item; // dragged HTMLElement
-        // evt.to; // target list
-        // evt.from; // previous list
-        // evt.oldIndex; // element's old index within old parent
-        // evt.newIndex; // element's new index within new parent
-        // evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
-        // evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
-        // evt.clone; // the clone element
-        // evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
-      },
-    });
+      return html`
+        <style>
+          .docs-landing {
+            padding: 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+            height: 100%;
+            box-sizing: border-box;
+          }
+          .docs-header {
+            text-align: center;
+            margin-bottom: 3rem;
+            opacity: 0;
+            animation: fadeInUp 0.6s ease-out forwards;
+          }
+          .docs-header h1 {
+            font-size: 2.5rem;
+            margin: 0 0 1rem;
+            line-height: 1.2;
+          }
+          .docs-header p {
+            font-size: 1.2rem;
+            max-width: 700px;
+            margin: 0 auto 2rem;
+            line-height: 1.6;
+          }
+          .docs-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1.5rem;
+            margin: 0;
+            padding: 0;
+            list-style: none;
+          }
+          .docs-card-container {
+            cursor: pointer;
+            opacity: 0;
+            margin-bottom: 3rem;
+            animation: fadeInUp 0.6s ease-out forwards;
+          }
+          .docs-card {
+            border-radius: 8px;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            position: relative;
+            transition: all 0.3s ease-in-out;
+          }
+
+          .card-icon {
+            font-size: 1.75rem;
+            width: 56px;
+            height: 56px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 0 1.25rem;
+            transition: transform 0.2s ease;
+          }
+
+          .card-content {
+            flex: 1;
+          }
+          .card-content h3 {
+            margin: 0 0 0.5rem;
+            font-size: 1.25rem;
+            font-weight: 600;
+          }
+          .card-content p {
+            margin: 0;
+            font-size: 0.95rem;
+            transition: color 0.3s ease;
+          }
+        </style>
+
+        <style>
+          ${docsData
+            .map(
+              (_, index) => css`
+                .docs-card-container:nth-child(${index + 1}) {
+                  animation-delay: ${0.1 * (index + 1)}s;
+                }
+              `,
+            )
+            .join('')}
+        </style>
 
-    return '';
-    return html` <div class="in section-mp">${docMenuRender}</div>`;
-    return html` <div class="in section-mp">
-      ${await DropDown.Render({
-        id: 'dropdown-docs',
-        disableClose: true,
-        disableSelectLabel: true,
-        disableSelectOptionsLabel: true,
-        disableSearchBox: true,
-        open: true,
-        lastSelectClass: 'hover-active',
-        label: renderMenuLabel({
-          icon: html`<i class="fas fa-book"></i>`,
-          text: html`${Translate.Render('docs')}`,
-        }),
-        containerClass: '',
-        data: this.Data.map((docTypeData) => {
-          return {
-            display: docTypeData.label,
-            value: docTypeData.type,
-            onClick: async () => {
-              console.warn(this.viewUrl[docTypeData.type]());
-            },
-          };
-        }),
-      })}
-    </div>`;
+        <div class="docs-landing">
+          <div class="docs-header">
+            <h1>Documentation</h1>
+            <p>
+              Find everything you need to build amazing applications with our platform. Get started with our guides, API
+              reference, and examples.
+            </p>
+            <!--
+                    <div class="search-bar">
+                      <i class="fas fa-search"></i>
+                      <input type="text" placeholder="Search documentation..." id="docs-search">
+                    </div>
+                    -->
+          </div>
+
+          <ul class="docs-grid">
+            ${docsData
+              .map((item) => {
+                setTimeout(() => {
+                  if (s(`.docs-card-container-${item.id}`)) {
+                    s(`.docs-card-container-${item.id}`).onclick = () => {
+                      if (item.id.match('demo')) {
+                        location.href = 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
+                      } else if (item.id.match('api')) {
+                        if (s(`.btn-docs-api`)) s(`.btn-docs-api`).click();
+                      } else {
+                        if (s(`.btn-docs-src`)) s(`.btn-docs-src`).click();
+                      }
+                    };
+                  }
+                });
+                return html`
+                  <div class="in docs-card-container docs-card-container-${item.id}">
+                    <li class="docs-card">
+                      <div class="card-icon">
+                        <i class="fas fa-${item.icon}"></i>
+                      </div>
+                      <div class="card-content">
+                        <h3>${item.title}</h3>
+                        <p>${item.description}</p>
+                      </div>
+                    </li>
+                  </div>
+                `;
+              })
+              .join('')}
+          </ul>
+        </div>
+      `;
+    }
   },
 };
 

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

@@ -129,16 +129,11 @@ const LoadingAnimation = {
   removeSplashScreen: function (backgroundContainer, callBack) {
     if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
     if (!backgroundContainer) backgroundContainer = '.ssr-background';
-    if (s(backgroundContainer))
-      setTimeout(() => {
-        s(backgroundContainer).style.opacity = 0;
-        setTimeout(async () => {
-          s(backgroundContainer).style.display = 'none';
-          if (s(`.modal-menu`)) s(`.modal-menu`).classList.remove('hide');
-          if (s(`.main-body-btn-container`)) s(`.main-body-btn-container`).classList.remove('hide');
-          if (callBack) callBack();
-        }, 300);
-      });
+    if (s(backgroundContainer)) {
+      s(backgroundContainer).style.display = 'none';
+      if (s(`.main-body-btn-container`)) s(`.main-body-btn-container`).classList.remove('hide');
+      if (callBack) callBack();
+    }
   },
 
   RenderCurrentSrcLoad: function (event) {