ts-glitter 20.8.6 → 20.8.9

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

@@ -13,25 +13,30 @@ import { HeaderMobile } from './header-mobile.js';
 const html = String.raw;
 
 export class Sy03 {
-    public static main(gvc: GVC, widget: any, subData: any) {
-      return HeadInitial.initial({
-        browser:()=>{
-          let changePage = (index: string, type: 'page' | 'home', subData: any) => {};
-          gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
-            changePage = cl.changePage;
-          });
-          const colors = Color.getTheme(gvc, widget.formData);
+  public static main(gvc: GVC, widget: any, subData: any) {
+    return HeadInitial.initial({
+      browser: () => {
+        let changePage = (index: string, type: 'page' | 'home', subData: any) => {};
+        gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, cl => {
+          changePage = cl.changePage;
+        });
+        const colors = Color.getTheme(gvc, widget.formData);
 
-          return html` <div class="d-sm-none" style="height: 76px;"></div>
+        return html` <div class="d-sm-none" style="height: 76px;"></div>
           <nav
             class="navbar navbar-expand-lg vw-100 header header-place shadow   top-0 left-0  py-0 position-fixed position-sm-relative"
             style="background:  ${widget.formData.theme_color['background'] ?? '#000'} !important;z-index:9999;
 "
           >
-            <div class="container header-place  h-100 align-items-center justify-content-center d-flex" style="${document.body.clientWidth < 800 ? `height:76px !important;` : ``}">
+            <div
+              class="container header-place  h-100 align-items-center justify-content-center d-flex"
+              style="${document.body.clientWidth < 800 ? `height:76px !important;` : ``}"
+            >
               <div class="d-flex flex-column align-items-center justify-content-center pb-md-3 pt-md-3 flex-fill">
                 <!--LOGO顯示區塊-->
-                <div class="d-flex align-items-center justify-content-start justify-content-md-center h-100 w-100 gap-2">
+                <div
+                  class="d-flex align-items-center justify-content-start justify-content-md-center h-100 w-100 gap-2"
+                >
                   <!--手機版選單-->
                   <div
                     class="d-flex align-items-center justify-content-center d-md-none"
@@ -44,140 +49,145 @@ export class Sy03 {
                             bind: id,
                             view: () => {
                               return html` <div
-                                                            class="div d-flex align-items-center flex-column w-100 p-3"
-                                                            style="border-bottom:1px solid ${widget.formData.theme_color['title']};"
-                                                        >
-                                                            <div class="d-flex align-items-center ">
-                                                                <div>
-                                                                    <div
-                                                                        class="h-100"
-                                                                        onclick="${gvc.event(() => {
-                                changePage('index', 'home', {});
-                              })}"
-                                                                    >
-                                                                        <img
-                                                                            style="width: 150px;
+                                  class="div d-flex align-items-center flex-column w-100 p-3"
+                                  style="border-bottom:1px solid ${widget.formData.theme_color['title']};"
+                                >
+                                  <div class="d-flex align-items-center ">
+                                    <div>
+                                      <div
+                                        class="h-100"
+                                        onclick="${gvc.event(() => {
+                                          changePage('index', 'home', {});
+                                        })}"
+                                      >
+                                        <img
+                                          style="width: 150px;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     border-radius: 10px;
     margin-bottom: 20px;"
-                                                                            src="${widget.formData.logo}"
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                            <div class="mb-3">${LanguageView.selectLanguage(gvc, colors)}</div>
-                                                            <div class="position-relative ${HeaderClass.hideShopperBtn() ? `d-none` : ``}">
-                                                                <input
-                                                                    class="form-control fw-500 "
-                                                                    placeholder="${Language.text('find_product')}"
-                                                                    autocomplete="off"
-                                                                    value=""
-                                                                    onchange="${gvc.event((e, event) => {
-                                gvc.glitter.href = `/all-product?search=${e.value}`;
-                              })}"
-                                                                />
+                                          src="${widget.formData.logo}"
+                                        />
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div class="mb-3">${LanguageView.selectLanguage(gvc, colors)}</div>
+                                  <div class="position-relative ${HeaderClass.hideShopperBtn() ? `d-none` : ``}">
+                                    <input
+                                      class="form-control fw-500 "
+                                      placeholder="${Language.text('find_product')}"
+                                      autocomplete="off"
+                                      value=""
+                                      onchange="${gvc.event((e, event) => {
+                                        gvc.glitter.href = `/all-product?search=${e.value}`;
+                                      })}"
+                                    />
 
-                                                                <div
-                                                                    style=" position: absolute;
+                                    <div
+                                      style=" position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     color: rgb(107, 114, 128);"
-                                                                >
-                                                                    <i class="fa-solid fa-magnifying-glass"></i>
-                                                                </div>
-                                                            </div>
-                                                        </div>
+                                    >
+                                      <i class="fa-solid fa-magnifying-glass"></i>
+                                    </div>
+                                  </div>
+                                </div>
 
-                                                        <div class="offcanvas-body p-0 ">
-                                                            ${gvc.bindView(() => {
-                                const id = gvc.glitter.getUUID();
-                                const vm = {
-                                  data: [],
-                                };
-                                ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then((res) => {
-                                  vm.data = res.response.value[Language.getLanguage()];
-                                  gvc.notifyDataChange(id);
-                                });
-                                return {
-                                  bind: id,
-                                  view: () => {
-                                    function resetToggle() {
-                                      function loop(data: any) {
-                                        data.map((dd: any) => {
-                                          (dd as any).open = false;
-                                          loop((dd as any).items ?? []);
-                                        });
+                                <div class="offcanvas-body p-0 ">
+                                  ${gvc.bindView(() => {
+                                    const id = gvc.glitter.getUUID();
+                                    const vm = {
+                                      data: [],
+                                    };
+                                    ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then(
+                                      res => {
+                                        vm.data = res.response.value[Language.getLanguage()];
+                                        gvc.notifyDataChange(id);
                                       }
+                                    );
+                                    return {
+                                      bind: id,
+                                      view: () => {
+                                        function resetToggle() {
+                                          function loop(data: any) {
+                                            data.map((dd: any) => {
+                                              (dd as any).open = false;
+                                              loop((dd as any).items ?? []);
+                                            });
+                                          }
 
-                                      loop(vm.data);
-                                    }
+                                          loop(vm.data);
+                                        }
 
-                                    function loopItems(data: any, show_border: boolean) {
-                                      return data
-                                        .map((dd: any) => {
-                                          return html`
-                                                                                        <li
-                                                                                            style="${show_border
-                                            ? `border-bottom: 1px solid ${widget.formData.theme_color['title'] ?? '#000'} !important;`
-                                            : ``}"
-                                                                                        >
-                                                                                            <div
-                                                                                                class="nav-link d-flex justify-content-between"
-                                                                                                style="padding: 16px;"
-                                                                                                onclick="${gvc.event(() => {
-                                            if (((dd as any).items ?? []).length === 0) {
-                                              if (dd.link) {
-                                                gvc.glitter.href = dd.link;
-                                                gvc.glitter.closeDrawer();
-                                              }
-                                            } else {
-                                              let og = dd.open;
-                                              resetToggle();
-                                              if (!og) {
-                                                dd.open = true;
-                                              }
-                                              gvc.notifyDataChange(id);
-                                            }
-                                          })}"
-                                                                                            >
-                                                                                                <div
-                                                                                                    style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;"
-                                                                                                    onclick="${gvc.event((e, event) => {
-                                            if (dd.link) {
-                                              gvc.glitter.href = dd.link;
-                                              gvc.glitter.closeDrawer();
-                                            }
-                                            event.stopPropagation();
-                                            event.preventDefault();
-                                          })}"
-                                                                                                >
-                                                                                                    ${dd.title}
-                                                                                                </div>
-                                                                                                ${(dd.items ?? []).length
-                                            ? `<i class="fa-solid ${dd.open ? `fa-angle-up` : `fa-angle-down`}"
+                                        function loopItems(data: any, show_border: boolean) {
+                                          return data
+                                            .map((dd: any) => {
+                                              return html`
+                                                <li
+                                                  style="${show_border
+                                                    ? `border-bottom: 1px solid ${widget.formData.theme_color['title'] ?? '#000'} !important;`
+                                                    : ``}"
+                                                >
+                                                  <div
+                                                    class="nav-link d-flex justify-content-between"
+                                                    style="padding: 16px;"
+                                                    onclick="${gvc.event(() => {
+                                                      if (((dd as any).items ?? []).length === 0) {
+                                                        if (dd.link) {
+                                                          gvc.glitter.href = dd.link;
+                                                          gvc.glitter.closeDrawer();
+                                                        }
+                                                      } else {
+                                                        let og = dd.open;
+                                                        resetToggle();
+                                                        if (!og) {
+                                                          dd.open = true;
+                                                        }
+                                                        gvc.notifyDataChange(id);
+                                                      }
+                                                    })}"
+                                                  >
+                                                    <div
+                                                      style="color: ${widget.formData.theme_color['title'] ??
+                                                      '#000'} !important;"
+                                                      onclick="${gvc.event((e, event) => {
+                                                        if (dd.link) {
+                                                          gvc.glitter.href = dd.link;
+                                                          gvc.glitter.closeDrawer();
+                                                        }
+                                                        event.stopPropagation();
+                                                        event.preventDefault();
+                                                      })}"
+                                                    >
+                                                      ${dd.title}
+                                                    </div>
+                                                    ${(dd.items ?? []).length
+                                                      ? `<i class="fa-solid ${dd.open ? `fa-angle-up` : `fa-angle-down`}"
                                                                                    style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;"></i>`
-                                            : ``}
-                                                                                            </div>
-                                                                                            ${dd.open ? `<ul class="ps-3  pb-2">${loopItems(dd.items ?? [], false)}</ul>` : ``}
-                                                                                        </li>
-                                                                                    `;
-                                        })
-                                        .join('');
-                                    }
+                                                      : ``}
+                                                  </div>
+                                                  ${dd.open
+                                                    ? `<ul class="ps-3  pb-2">${loopItems(dd.items ?? [], false)}</ul>`
+                                                    : ``}
+                                                </li>
+                                              `;
+                                            })
+                                            .join('');
+                                        }
 
-                                    return loopItems(vm.data, true);
-                                  },
-                                  divCreate: {
-                                    class: `navbar-nav me-auto mb-2 mb-lg-0`,
-                                    style: ``,
-                                    elem: `ul`,
-                                  },
-                                };
-                              })}
-                                                        </div>`;
+                                        return loopItems(vm.data, true);
+                                      },
+                                      divCreate: {
+                                        class: `navbar-nav me-auto mb-2 mb-lg-0`,
+                                        style: ``,
+                                        elem: `ul`,
+                                      },
+                                    };
+                                  })}
+                                </div>`;
                             },
                             divCreate: {
                               class: `w-100 h-100`,
@@ -206,19 +216,19 @@ background: ${colors.bgr ?? '#000'};overflow-x: hidden;`,
                   >
                     <img
                       src="${widget.formData.logo}"
-                      style="${(document.body.clientWidth < 800  || (gvc.glitter.getUrlParameter('page')==='checkout'))
+                      style="${document.body.clientWidth < 800 || gvc.glitter.getUrlParameter('page') === 'checkout'
                         ? `max-height: 100%;max-width:200px;max-height:60px;`
                         : `height: ${(() => {
-                          try {
-                            const h = widget.formData.height;
-                            if (h && !isNaN(parseInt(`${h}`, 10))) {
-                              return parseInt(`${h}`, 10);
+                            try {
+                              const h = widget.formData.height;
+                              if (h && !isNaN(parseInt(`${h}`, 10))) {
+                                return parseInt(`${h}`, 10);
+                              }
+                              return 150;
+                            } catch (error) {
+                              return 150;
                             }
-                            return 150;
-                          } catch (error) {
-                            return 150;
-                          }
-                        })()}px;`}"
+                          })()}px;`}"
                     />
                   </div>
                 </div>
@@ -229,7 +239,7 @@ background: ${colors.bgr ?? '#000'};overflow-x: hidden;`,
                     const vm = {
                       data: [],
                     };
-                    ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then((res) => {
+                    ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then(res => {
                       vm.data = res.response.value[Language.getLanguage()];
                       gvc.notifyDataChange(id);
                     });
@@ -240,22 +250,24 @@ background: ${colors.bgr ?? '#000'};overflow-x: hidden;`,
                           return data
                             .map((dd: any) => {
                               return html` <li class="nav-item dropdown">
-                                                        <a
-                                                            class="nav-link header-link "
-                                                            style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;cursor: pointer;"
-                                                            onclick="${gvc.event(() => {
-                                if (dd.link) {
-                                  gvc.glitter.href = dd.link;
-                                }
-                              })}"
-                                                            >${dd.title} ${dd.items.length > 0 ? `<i class="fa-solid fa-angle-down ms-2"></i>` : ``}</a
-                                                        >
-                                                        ${dd.items.length > 0
-                                ? `<ul class="dropdown-menu" style="background:${widget.formData.theme_color['background'] ?? '#000'} !important;
+                                <a
+                                  class="nav-link header-link "
+                                  style="color: ${widget.formData.theme_color['title'] ??
+                                  '#000'} !important;cursor: pointer;"
+                                  onclick="${gvc.event(() => {
+                                    if (dd.link) {
+                                      gvc.glitter.href = dd.link;
+                                    }
+                                  })}"
+                                  >${dd.title}
+                                  ${dd.items.length > 0 ? `<i class="fa-solid fa-angle-down ms-2"></i>` : ``}</a
+                                >
+                                ${dd.items.length > 0
+                                  ? `<ul class="dropdown-menu" style="background:${widget.formData.theme_color['background'] ?? '#000'} !important;
     cursor: pointer;
     z-index: 99999;">${loopItems(dd.items)}</ul>`
-                                : ``}
-                                                    </li>`;
+                                  : ``}
+                              </li>`;
                             })
                             .join('');
                         }
@@ -272,7 +284,9 @@ background: ${colors.bgr ?? '#000'};overflow-x: hidden;`,
                 </ul>
               </div>
               <div
-                class="d-flex align-items-center ${document.body.clientWidth >= 800 ? `position-lg-absolute` : `position-relative`} "
+                class="d-flex align-items-center ${document.body.clientWidth >= 800
+                  ? `position-lg-absolute`
+                  : `position-relative`} "
                 style="${document.body.clientWidth > 800 ? `top:10px;right:30px;` : ``}"
               >
                 <!--固定按鈕顯示區塊-->
@@ -282,7 +296,7 @@ background: ${colors.bgr ?? '#000'};overflow-x: hidden;`,
                     const vm = {
                       visible: false,
                     };
-                    ApiUser.getPublicConfig('store-information', 'manager').then((res) => {
+                    ApiUser.getPublicConfig('store-information', 'manager').then(res => {
                       if (res.response.value.ai_search) {
                         vm.visible = true;
                         gvc.notifyDataChange(id);
@@ -320,54 +334,61 @@ padding-bottom: 2px;
                     ? ``
                     : `<li class="nav-item d-none d-sm-flex align-items-center justify-content-center" style="min-width:45px !important;">
                                 ${gvc.bindView(() => {
-                      const vm = {
-                        id: gvc.glitter.getUUID(),
-                        toggle: false,
-                      };
-                      return {
-                        bind: vm.id,
-                        view: () => {
-                          if (!vm.toggle) {
-                            return html`<i
-                                                    class="fa-regular fa-magnifying-glass"
-                                                    style="color: ${widget.formData.theme_color['title'] ?? '#000'};cursor: pointer;font-size:20px;"
-                                                    onclick="${gvc.event(() => {
-                              vm.toggle = !vm.toggle;
-                              gvc.notifyDataChange(vm.id);
-                            })}"
-                                                ></i>`;
-                          } else {
-                            return html`<a class="search-container d-flex align-items-center"
-                            ><i
-                              class="fa-regular fa-circle-xmark"
-                              style="color: ${widget.formData.theme_color['title'] ?? '#000'};cursor: pointer;font-size:20px;"
-                              onclick="${gvc.event(() => {
-                                vm.toggle = !vm.toggle;
-                                gvc.notifyDataChange(vm.id);
-                              })}"
-                            ></i
-                            ><input
-                              class="ms-3 form-control"
-                              style="height:40px;"
-                              placeholder="${Language.text('input_product_keyword')}"
-                              autocomplete="off"
-                              onchange="${gvc.event((e, event) => {
-                                gvc.glitter.href = `/all-product?search=${e.value}`;
-                                vm.toggle = !vm.toggle;
-                                gvc.notifyDataChange(vm.id);
-                              })}"
-                            />
-                            </a>`;
-                          }
-                        },
-                        divCreate: {
-                          class: `nav-link search-container`,
-                          elem: `a`,
-                        },
-                      };
-                    })}
+                                  const vm = {
+                                    id: gvc.glitter.getUUID(),
+                                    toggle: false,
+                                  };
+                                  return {
+                                    bind: vm.id,
+                                    view: () => {
+                                      if (!vm.toggle) {
+                                        return html`<i
+                                          class="fa-regular fa-magnifying-glass"
+                                          style="color: ${widget.formData.theme_color['title'] ??
+                                          '#000'};cursor: pointer;font-size:20px;"
+                                          onclick="${gvc.event(() => {
+                                            vm.toggle = !vm.toggle;
+                                            gvc.notifyDataChange(vm.id);
+                                          })}"
+                                        ></i>`;
+                                      } else {
+                                        return html`<a class="search-container d-flex align-items-center"
+                                          ><i
+                                            class="fa-regular fa-circle-xmark"
+                                            style="color: ${widget.formData.theme_color['title'] ??
+                                            '#000'};cursor: pointer;font-size:20px;"
+                                            onclick="${gvc.event(() => {
+                                              vm.toggle = !vm.toggle;
+                                              gvc.notifyDataChange(vm.id);
+                                            })}"
+                                          ></i
+                                          ><input
+                                            class="ms-3 form-control"
+                                            style="height:40px;"
+                                            placeholder="${Language.text('input_product_keyword')}"
+                                            autocomplete="off"
+                                            onchange="${gvc.event((e, event) => {
+                                              gvc.glitter.href = `/all-product?search=${`${e.value}`.trim()}`;
+                                              vm.toggle = !vm.toggle;
+                                              gvc.notifyDataChange(vm.id);
+                                            })}"
+                                          />
+                                        </a>`;
+                                      }
+                                    },
+                                    divCreate: {
+                                      class: `nav-link search-container`,
+                                      elem: `a`,
+                                    },
+                                  };
+                                })}
                             </li>`}
-                  <li class="nav-item  ${HeaderClass.hideShopperBtn() ? `d-none` : `d-flex`} align-items-center justify-content-center" style="width:45px !important;">
+                  <li
+                    class="nav-item  ${HeaderClass.hideShopperBtn()
+                      ? `d-none`
+                      : `d-flex`} align-items-center justify-content-center"
+                    style="width:45px !important;"
+                  >
                     ${gvc.bindView(() => {
                       const vm = {
                         id: gvc.glitter.getUUID(),
@@ -377,37 +398,44 @@ padding-bottom: 2px;
                         bind: vm.id,
                         view: () => {
                           return html`<span
-                                                class="position-relative"
-                                                onclick="${gvc.event(() => {
-                            HeaderClass.rightCartMenu(gvc, widget);
-                          })}"
+                            class="position-relative"
+                            onclick="${gvc.event(() => {
+                              HeaderClass.rightCartMenu(gvc, widget);
+                            })}"
+                          >
+                            <i
+                              class="fa-duotone fa-cart-shopping"
+                              style="color: ${widget.formData.theme_color['title'] ??
+                              '#000'} !important;cursor: pointer;font-size:20px;"
+                            ></i>
+                            ${gvc.bindView(() => {
+                              return {
+                                bind: gvc.glitter.getUUID(),
+                                view: () => {
+                                  return new Promise((resolve, reject) => {
+                                    getCheckoutCount(count => {
+                                      vm.count = count;
+                                      resolve(
+                                        vm.count
+                                          ? html`<div
+                                              class="position-absolute"
+                                              style="font-size: 10px;right: -10px;top: -6px;"
                                             >
-                                                <i class="fa-duotone fa-cart-shopping" style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;cursor: pointer;font-size:20px;"></i>
-                                                ${gvc.bindView(() => {
-                            return {
-                              bind: gvc.glitter.getUUID(),
-                              view: () => {
-                                return new Promise((resolve, reject) => {
-                                  getCheckoutCount((count) => {
-                                    vm.count = count;
-                                    resolve(
-                                      vm.count
-                                        ? html`<div class="position-absolute" style="font-size: 10px;right: -10px;top: -6px;">
-                                                                                  <div
-                                                                                      class="rounded-circle bg-danger text-white  align-items-center justify-content-center fw-500 d-flex"
-                                                                                      style="width:18px;height: 18px;color: white !important;background:#fe5541;"
-                                                                                  >
-                                                                                      ${vm.count}
-                                                                                  </div>
-                                                                              </div>`
-                                        : ``
-                                    );
+                                              <div
+                                                class="rounded-circle bg-danger text-white  align-items-center justify-content-center fw-500 d-flex"
+                                                style="width:18px;height: 18px;color: white !important;background:#fe5541;"
+                                              >
+                                                ${vm.count}
+                                              </div>
+                                            </div>`
+                                          : ``
+                                      );
+                                    });
                                   });
-                                });
-                              },
-                            };
-                          })}
-                                            </span>`;
+                                },
+                              };
+                            })}
+                          </span>`;
                         },
                         divCreate: {
                           class: `nav-link js-cart-count `,
@@ -415,7 +443,12 @@ padding-bottom: 2px;
                       };
                     })}
                   </li>
-                  <li class="nav-item d-flex align-items-center justify-content-center ${HeaderClass.hideShopperBtn() ? `d-none` : `d-flex`}" style="width:45px !important;">
+                  <li
+                    class="nav-item d-flex align-items-center justify-content-center ${HeaderClass.hideShopperBtn()
+                      ? `d-none`
+                      : `d-flex`}"
+                    style="width:45px !important;"
+                  >
                     <a class="nav-link search-container">
                       <i
                         class="fw-500  fa-regular fa-user "
@@ -437,17 +470,16 @@ padding-bottom: 2px;
               </div>
             </div>
           </nav>`;
-        },
-        mobile:()=>{
-          return HeaderMobile.mian({
-            gvc:gvc,
-            widget:widget
-          })
-        },
-        gvc:gvc
-      })
-
-    }
+      },
+      mobile: () => {
+        return HeaderMobile.mian({
+          gvc: gvc,
+          widget: widget,
+        });
+      },
+      gvc: gvc,
+    });
+  }
 }
 
 (window as any).glitter.setModule(import.meta.url, Sy03);