ts-glitter 21.5.2 → 21.5.4

package/lowcode/public-components/headers/header-class.js

@@ -96,20 +96,25 @@ export class HeaderClass {
               outline: 0;
             }
 
-            .${classPrefix}-cart-container {
+            .${classPrefix}-cart-header {
               display: flex;
+              flex-direction: column;
               width: 100%;
-              align-items: center;
+              margin-bottom: 12px;
               padding: 0;
-              margin-bottom: 18px;
               padding: 12px;
               border-bottom: 1px solid #dddddd;
+              position: sticky;
+              top: 0;
+              background-color: #fff;
+              z-index: 2;
             }
 
-            .${classPrefix}-cart-title {
-              letter-spacing: 4px;
-              font-size: 22px;
-              font-weight: 700;
+            .${classPrefix}-cart-div {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              width: 100%;
             }
 
             .${classPrefix}-shipping-title {
@@ -175,20 +180,30 @@ export class HeaderClass {
                         if (vm.loading) {
                             return html ` <div class="w-100 vh-100 bg-white">${this.spinner()}</div>`;
                         }
-                        return html ` <div class="position-relative">
-                  <div class="${classPrefix}-cart-container align-items-center">
-                    <div
-                      class="d-flex align-items-center justify-content-center fs-5 py-3 px-2"
-                      style="cursor:pointer;"
-                      onclick="${gvc.event(() => {
+                        return html ` <div class="position-relative" style="padding-bottom: 120px;">
+                  <div class="${classPrefix}-cart-header">
+                    <div class="${classPrefix}-cart-div">
+                      <div
+                        class="d-flex align-items-center justify-content-center fs-5 py-3 px-2"
+                        style="cursor:pointer;"
+                        onclick="${gvc.event(() => {
                             gvc.glitter.closeDrawer();
                         })}"
-                    >
-                      <i class="fa-sharp fa-solid fa-angle-left"></i>
+                      >
+                        <i class="fa-sharp fa-solid fa-angle-left"></i>
+                      </div>
+                      <div class="flex-fill"></div>
+                      ${goToCheckoutButton(ApiCart.globalCart)}
                     </div>
-                    <div class="${classPrefix}-cart-title">${Language.text('cart')}</div>
-                    <div class="flex-fill"></div>
-                    ${goToCheckoutButton(ApiCart.globalCart)}
+                    ${(() => {
+                            if (vm.dataList.length === 0) {
+                                return '';
+                            }
+                            const num = vm.dataList.reduce((sum, item) => sum + item.count * item.price, 0);
+                            return html `<div class="text-end px-2 py-1 fw-bold">
+                        ${Language.text('cart_subtotal')} $ ${num.toLocaleString()}
+                      </div>`;
+                        })()}
                   </div>
                   ${(() => {
                             if (vm.dataList.length === 0) {
@@ -235,31 +250,28 @@ export class HeaderClass {
                             </div>
                             <div class="d-flex flex-column gap-1 flex-fill">
                               <div class="${classPrefix}-title pe-3">${item.title}</div>
-                              <div class="${classPrefix}-spec ">
+                              <div class="${classPrefix}-spec">
                                 ${(() => {
                                         const spec = (() => {
-                                            if (item.spec) {
-                                                return item.spec.map((dd, index) => {
-                                                    try {
-                                                        return (item.specs[index].option.find((d1) => {
-                                                            return d1.title === dd;
-                                                        }).language_title[Language.getLanguage()] || dd);
-                                                    }
-                                                    catch (e) {
-                                                        return dd;
-                                                    }
-                                                });
-                                            }
-                                            else {
+                                            if (!item.spec)
                                                 return [];
-                                            }
+                                            return item.spec.map((dd, index) => {
+                                                try {
+                                                    return (item.specs[index].option.find((d1) => {
+                                                        return d1.title === dd;
+                                                    }).language_title[Language.getLanguage()] || dd);
+                                                }
+                                                catch (e) {
+                                                    return dd;
+                                                }
+                                            });
                                         })();
                                         return spec.join(' / ');
                                     })()}
                               </div>
                               <div class="d-flex align-items-center justify-content-between">
-                                <div class="d-flex align-items-center gap-1" style="font-size:14px;">
-                                  ${Language.text('quantity')} ：<select
+                                <div class="d-flex align-items-center gap-2" style="font-size: 14px;">
+                                  ${Language.text('quantity')}<select
                                     class="${classPrefix}-select"
                                     style="width: 100px;"
                                     onchange="${gvc.event(e => {

package/lowcode/public-components/headers/header-class.ts

@@ -121,20 +121,25 @@ export class HeaderClass {
               outline: 0;
             }
 
-            .${classPrefix}-cart-container {
+            .${classPrefix}-cart-header {
               display: flex;
+              flex-direction: column;
               width: 100%;
-              align-items: center;
+              margin-bottom: 12px;
               padding: 0;
-              margin-bottom: 18px;
               padding: 12px;
               border-bottom: 1px solid #dddddd;
+              position: sticky;
+              top: 0;
+              background-color: #fff;
+              z-index: 2;
             }
 
-            .${classPrefix}-cart-title {
-              letter-spacing: 4px;
-              font-size: 22px;
-              font-weight: 700;
+            .${classPrefix}-cart-div {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              width: 100%;
             }
 
             .${classPrefix}-shipping-title {
@@ -203,20 +208,32 @@ export class HeaderClass {
                 if (vm.loading) {
                   return html` <div class="w-100 vh-100 bg-white">${this.spinner()}</div>`;
                 }
-                return html` <div class="position-relative">
-                  <div class="${classPrefix}-cart-container align-items-center">
-                    <div
-                      class="d-flex align-items-center justify-content-center fs-5 py-3 px-2"
-                      style="cursor:pointer;"
-                      onclick="${gvc.event(() => {
-                        gvc.glitter.closeDrawer();
-                      })}"
-                    >
-                      <i class="fa-sharp fa-solid fa-angle-left"></i>
+                return html` <div class="position-relative" style="padding-bottom: 120px;">
+                  <div class="${classPrefix}-cart-header">
+                    <div class="${classPrefix}-cart-div">
+                      <div
+                        class="d-flex align-items-center justify-content-center fs-5 py-3 px-2"
+                        style="cursor:pointer;"
+                        onclick="${gvc.event(() => {
+                          gvc.glitter.closeDrawer();
+                        })}"
+                      >
+                        <i class="fa-sharp fa-solid fa-angle-left"></i>
+                      </div>
+                      <div class="flex-fill"></div>
+                      ${goToCheckoutButton(ApiCart.globalCart)}
                     </div>
-                    <div class="${classPrefix}-cart-title">${Language.text('cart')}</div>
-                    <div class="flex-fill"></div>
-                    ${goToCheckoutButton(ApiCart.globalCart)}
+                    ${(() => {
+                      if (vm.dataList.length === 0) {
+                        return '';
+                      }
+
+                      const num = vm.dataList.reduce((sum, item) => sum + item.count * item.price, 0);
+
+                      return html`<div class="text-end px-2 py-1 fw-bold">
+                        ${Language.text('cart_subtotal')} $ ${num.toLocaleString()}
+                      </div>`;
+                    })()}
                   </div>
                   ${(() => {
                     if (vm.dataList.length === 0) {
@@ -263,31 +280,30 @@ export class HeaderClass {
                             </div>
                             <div class="d-flex flex-column gap-1 flex-fill">
                               <div class="${classPrefix}-title pe-3">${item.title}</div>
-                              <div class="${classPrefix}-spec ">
+                              <div class="${classPrefix}-spec">
                                 ${(() => {
                                   const spec: any = (() => {
-                                    if (item.spec) {
-                                      return item.spec.map((dd: string, index: number) => {
-                                        try {
-                                          return (
-                                            (item.specs[index] as any).option.find((d1: any) => {
-                                              return d1.title === dd;
-                                            }).language_title[Language.getLanguage()] || dd
-                                          );
-                                        } catch (e) {
-                                          return dd;
-                                        }
-                                      });
-                                    } else {
-                                      return [];
-                                    }
+                                    if (!item.spec) return [];
+
+                                    return item.spec.map((dd, index) => {
+                                      try {
+                                        return (
+                                          (item.specs[index] as any).option.find((d1: any) => {
+                                            return d1.title === dd;
+                                          }).language_title[Language.getLanguage()] || dd
+                                        );
+                                      } catch (e) {
+                                        return dd;
+                                      }
+                                    });
                                   })();
+
                                   return spec.join(' / ');
                                 })()}
                               </div>
                               <div class="d-flex align-items-center justify-content-between">
-                                <div class="d-flex align-items-center gap-1" style="font-size:14px;">
-                                  ${Language.text('quantity')} ：<select
+                                <div class="d-flex align-items-center gap-2" style="font-size: 14px;">
+                                  ${Language.text('quantity')}<select
                                     class="${classPrefix}-select"
                                     style="width: 100px;"
                                     onchange="${gvc.event(e => {

package/lowcode/public-components/headers/sy-02.js

@@ -38,7 +38,7 @@ export class Sy02 {
                     <div class="d-flex align-items-center justify-content-center h-100 w-100 gap-2">
                         <!--手機版選單-->
                         <div
-                            class="${PdClass.isShoppingPage() ? `d-none` : `d-flex d-lg-none`} align-items-center justify-content-center"
+                            class="d-flex d-lg-none align-items-center justify-content-center"
                             style="width:40px !important;height:40px !important;"
                             onclick="${gvc.event(() => {
                     gvc.glitter.setDrawer(gvc.bindView(() => {

package/lowcode/public-components/headers/sy-02.ts

@@ -42,7 +42,7 @@ export class Sy02 {
                     <div class="d-flex align-items-center justify-content-center h-100 w-100 gap-2">
                         <!--手機版選單-->
                         <div
-                            class="${PdClass.isShoppingPage() ? `d-none`:`d-flex d-lg-none`} align-items-center justify-content-center"
+                            class="d-flex d-lg-none align-items-center justify-content-center"
                             style="width:40px !important;height:40px !important;"
                             onclick="${gvc.event(() => {
                               gvc.glitter.setDrawer(

package/lowcode/public-components/headers/sy-03.js

@@ -38,7 +38,7 @@ export class Sy03 {
                 >
                   <!--手機版選單-->
                   <div
-                    class=" align-items-center justify-content-center ${PdClass.isShoppingPage() ? `d-none` : `d-flex d-lg-none`} "
+                    class=" align-items-center justify-content-center d-flex d-lg-none "
                     style="width:45px !important;height:40px !important;"
                     onclick="${gvc.event(() => {
                     gvc.glitter.setDrawer(gvc.bindView(() => {

package/lowcode/public-components/headers/sy-03.ts

@@ -41,7 +41,7 @@ export class Sy03 {
                 >
                   <!--手機版選單-->
                   <div
-                    class=" align-items-center justify-content-center ${PdClass.isShoppingPage() ? `d-none`:`d-flex d-lg-none`} "
+                    class=" align-items-center justify-content-center d-flex d-lg-none "
                     style="width:45px !important;height:40px !important;"
                     onclick="${gvc.event(() => {
                       gvc.glitter.setDrawer(

package/lowcode/public-components/headers/sy-04.js

@@ -31,7 +31,7 @@ export class Sy04 {
               <div class="d-flex align-items-center justify-content-center h-100 gap-2">
                 <!--手機版選單-->
                 <div
-                  class="${PdClass.isShoppingPage() ? `d-none` : `d-flex d-lg-none`} align-items-center justify-content-center"
+                  class="d-flex d-lg-none align-items-center justify-content-center"
                   style="width:40px !important;height:40px !important;"
                   onclick="${gvc.event(() => {
                     gvc.glitter.setDrawer(gvc.bindView(() => {

package/lowcode/public-components/headers/sy-04.ts

@@ -34,7 +34,7 @@ export class Sy04 {
               <div class="d-flex align-items-center justify-content-center h-100 gap-2">
                 <!--手機版選單-->
                 <div
-                  class="${PdClass.isShoppingPage() ? `d-none`:`d-flex d-lg-none`} align-items-center justify-content-center"
+                  class="d-flex d-lg-none align-items-center justify-content-center"
                   style="width:40px !important;height:40px !important;"
                   onclick="${gvc.event(() => {
                     gvc.glitter.setDrawer(

package/lowcode/public-components/headers/sy-05.js

@@ -4,7 +4,6 @@ import { LanguageView } from "../public/language-view.js";
 import { Color } from "../public/color.js";
 import { HeadInitial } from './head-initial.js';
 import { HeaderMobile } from './header-mobile.js';
-import { PdClass } from '../product/pd-class.js';
 const html = String.raw;
 export class Sy05 {
     static main(gvc, widget, subData) {
@@ -28,7 +27,7 @@ export class Sy05 {
                 <div class="d-flex align-items-center justify-content-center h-100 w-100 gap-2">
                   <!--手機版選單-->
                   <div
-                    class="${PdClass.isShoppingPage() ? `d-none` : `d-flex d-lg-none`} align-items-center justify-content-center"
+                    class="d-flex d-lg-none align-items-center justify-content-center"
                     style="width:40px !important;height:40px !important;"
                     onclick="${gvc.event(() => {
                     gvc.glitter.setDrawer(gvc.bindView(() => {

package/lowcode/public-components/headers/sy-05.ts

@@ -35,7 +35,7 @@ export class Sy05 {
                 <div class="d-flex align-items-center justify-content-center h-100 w-100 gap-2">
                   <!--手機版選單-->
                   <div
-                    class="${PdClass.isShoppingPage() ? `d-none`:`d-flex d-lg-none`} align-items-center justify-content-center"
+                    class="d-flex d-lg-none align-items-center justify-content-center"
                     style="width:40px !important;height:40px !important;"
                     onclick="${gvc.event(() => {
                       gvc.glitter.setDrawer(

package/lowcode/public-components/layout-plugin/social-links-01.js

@@ -1,8 +1,127 @@
+const html = String.raw;
+const css = String.raw;
 export class SocialLinks01 {
     static main(obj) {
-        console.log(obj);
-        console.log(`formData=>`, obj.widget.formData);
-        return `<div>hello</div>`;
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+            });
+        }
+        const gvc = obj.gvc;
+        const vm = {
+            id: gvc.glitter.getUUID(),
+        };
+        const pageData = obj.widget.formData;
+        const socialList = pageData.social_list;
+        const supportSocial = ['fb', 'ig', 'line'];
+        const socialIMG = {
+            fb: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/5968764.png',
+            ig: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/Instagram_logo_2022.png',
+            line: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/LINE_Brand_icon.png',
+            other: 'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/link-solid.svg',
+        };
+        const gotoTopImg = 'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/arrow-up-to-line-light.svg';
+        gvc.addStyle(css `
+      .floating-action-panel {
+        position: fixed;
+        bottom: 30px;
+        right: 30px;
+        display: flex;
+        flex-direction: column; /* 垂直排列 */
+        align-items: center;
+        gap: 10px; /* 按鈕間距 */
+        z-index: 1000;
+      }
+
+      .social-links {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .social-link {
+        color: #007bff;
+        text-decoration: none;
+        font-size: 14px;
+      }
+
+      .social-link:hover {
+        text-decoration: underline;
+      }
+
+      .social-link:hover {
+        text-decoration: underline;
+      }
+
+      .component-circle {
+        background-color: transparent;
+        border: none;
+        padding: 2px;
+        cursor: pointer;
+        border-radius: 50%;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .component-img {
+        width: 40px;
+        height: 40px;
+        object-fit: contain;
+      }
+
+      .component-circle:hover .component-img {
+        opacity: 0.8;
+      }
+
+      .up-to-top.hidden {
+        display: none;
+      }
+    `);
+        return gvc.bindView({
+            bind: vm.id,
+            view: () => {
+                return html `
+      <div class="floating-action-panel">
+        <div class="social-links">
+          ${socialList
+                    .map(socialLink => {
+                    var _a;
+                    const imgSrc = supportSocial.includes(socialLink.social_type)
+                        ? socialIMG[socialLink.social_type]
+                        : socialIMG.other;
+                    return html `
+                <a href="${socialLink.link}" class="component-circle">
+                  <img src="${(_a = socialLink.icon) !== null && _a !== void 0 ? _a : imgSrc}" alt="Go to top" class="component-img" />
+                </a>
+              `;
+                })
+                    .join('')}
+        </div>
+        <button
+          class="component-circle up-to-top hidden"
+          onclick="${gvc.event(() => {
+                    scrollToTop();
+                })}"
+        >
+          <img src="${gotoTopImg}" alt="Go to top" class="component-img" />
+        </button>
+      </div>
+    `;
+            }, divCreate: {},
+            onInitial: () => {
+                window.onscroll = function () {
+                    const scrollPosition = window.scrollY;
+                    const threshold = window.innerHeight / 2;
+                    const panel = document.querySelector('.up-to-top');
+                    if (scrollPosition >= threshold) {
+                        panel.classList.remove('hidden');
+                    }
+                    else {
+                        panel.classList.add('hidden');
+                    }
+                };
+            }
+        });
     }
 }
 window.glitter.setModule(import.meta.url, SocialLinks01);

package/lowcode/public-components/layout-plugin/social-links-01.ts

@@ -1,15 +1,140 @@
 import { GVC } from '../../glitterBundle/GVController.js';
 
-export class SocialLinks01{
-  public static main(obj:{
-    gvc:GVC,
-    widget:any,
-    subData:any
-  }){
-    console.log(obj)
-    console.log(`formData=>`,obj.widget.formData)
-    return `<div>hello</div>`
+interface SocialLink {
+  social_type: string;
+  link: string;
+  icon: string
+}
+
+const html = String.raw;
+const css = String.raw;
+
+export class SocialLinks01 {
+  public static main(obj: { gvc: GVC; widget: any; subData: any }) {
+    function scrollToTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+    const gvc = obj.gvc;
+    const vm = {
+      id:gvc.glitter.getUUID(),
+    };
+
+    const pageData = obj.widget.formData;
+    const socialList: SocialLink[] = pageData.social_list;
+    const supportSocial = ['fb', 'ig', 'line'];
+    const socialIMG: Record<string, string> = {
+      fb: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/5968764.png',
+      ig: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/Instagram_logo_2022.png',
+      line: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/LINE_Brand_icon.png',
+      other: 'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/link-solid.svg',
+    };
+    const gotoTopImg = 'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/arrow-up-to-line-light.svg';
+    gvc.addStyle(css`
+      .floating-action-panel {
+        position: fixed;
+        bottom: 30px;
+        right: 30px;
+        display: flex;
+        flex-direction: column; /* 垂直排列 */
+        align-items: center;
+        gap: 10px; /* 按鈕間距 */
+        z-index: 1000;
+      }
+
+      .social-links {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .social-link {
+        color: #007bff;
+        text-decoration: none;
+        font-size: 14px;
+      }
+
+      .social-link:hover {
+        text-decoration: underline;
+      }
+
+      .social-link:hover {
+        text-decoration: underline;
+      }
+
+      .component-circle {
+        background-color: transparent;
+        border: none;
+        padding: 2px;
+        cursor: pointer;
+        border-radius: 50%;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .component-img {
+        width: 40px;
+        height: 40px;
+        object-fit: contain;
+      }
+
+      .component-circle:hover .component-img {
+        opacity: 0.8;
+      }
+
+      .up-to-top.hidden {
+        display: none;
+      }
+    `);
+    return gvc.bindView({
+      bind:vm.id,
+      view:()=>{
+        return html`
+      <div class="floating-action-panel">
+        <div class="social-links">
+          ${socialList
+          .map(socialLink => {
+            const imgSrc = supportSocial.includes(socialLink.social_type)
+              ? socialIMG[socialLink.social_type]
+              : socialIMG.other;
+            return html`
+                <a href="${socialLink.link}" class="component-circle">
+                  <img src="${socialLink.icon??imgSrc}" alt="Go to top" class="component-img" />
+                </a>
+              `;
+          })
+          .join('')}
+        </div>
+        <button
+          class="component-circle up-to-top hidden"
+          onclick="${gvc.event(() => {
+          scrollToTop();
+        })}"
+        >
+          <img src="${gotoTopImg}" alt="Go to top" class="component-img" />
+        </button>
+      </div>
+    `;
+      },divCreate:{}
+      ,onInitial:()=>{
+        (window as any).onscroll = function() {
+          const scrollPosition = window.scrollY;
+
+          const threshold = window.innerHeight / 2;
+
+          const panel = document.querySelector('.up-to-top');
+
+          if (scrollPosition >= threshold) {
+            panel!.classList.remove('hidden');
+          } else {
+            panel!.classList.add('hidden');
+          }
+        };
+      }
+    })
+
   }
 }
 
-(window as any).glitter.setModule(import.meta.url,SocialLinks01)
+(window as any).glitter.setModule(import.meta.url, SocialLinks01);