ts-glitter 21.8.2 → 21.8.4

package/lowcode/modules/image-library.ts

@@ -77,7 +77,6 @@ export class imageLibrary {
       selectBarID: gvc.glitter.getUUID(),
     };
 
-
     if (cf.key == 'folderEdit') {
       vm.tag = cf.tag;
       vm.type = 'folderEdit';
@@ -118,8 +117,23 @@ export class imageLibrary {
     function getPublicConfig(callback: () => void) {
       ApiUser.getPublicConfig('image-manager', 'manager').then((data: any) => {
         if (data.response.value) {
-          vm.link = data.response.value;
+          const tagDiv = window.parent.document.querySelector('.tag-title');
 
+          vm.link = data.response.value;
+          if (tagDiv) {
+            const tag = tagDiv.getAttribute('data-tag');
+            if (tag) {
+              console.log(
+                'vm.link.filter(item => item.tag.includes(tag)) -- ',
+                vm.link.filter(item => item.tag.includes(tag))
+              );
+              vm.link
+                .filter(item => item.tag.includes(tag))
+                .forEach(item => {
+                  item.selected = true;
+                });
+            }
+          }
           function loop(array: FileItem[]) {
             array.map(dd => {
               if (dd.type === 'folder') {
@@ -315,7 +329,7 @@ export class imageLibrary {
                                     });
                                   }
                                   (fileItem as any).selected = !defaultSelect;
-                                  gvc.notifyDataChange(vm.id);
+                                  gvc.notifyDataChange([viewID, ids.selectBarID]);
                                   event.stopPropagation();
                                 })}"
                                 ${!gvc.glitter.isTouchDevice()
@@ -491,6 +505,7 @@ export class imageLibrary {
         }
 
         getPublicConfig(() => {
+          const tagDiv = document.querySelector('.tag-title');
           gvc.notifyDataChange(vm.id);
         });
 
@@ -510,6 +525,7 @@ export class imageLibrary {
                         onclick="${gvc.event(() => {
                           closeFolderView();
                           vm.type = 'file';
+                          cf.key = 'file';
                           gvc.notifyDataChange(vm.id);
                         })}"
                       >
@@ -572,83 +588,44 @@ export class imageLibrary {
                   })
                   .join('');
               }
-
-              function drawSelectBar(selectCount: number) {
-                return gvc.bindView({
-                  bind: ids.selectBarID,
-                  view: () => {
-                    return html`
-                      <div
-                        class="${selectCount ? `` : `d-none`} ${gClass('select-bar-text')}"
-                      >
-                        已選取${selectCount}項
-                      </div>
-                      <div class="ms-auto ${gClass('search-raw')}">上傳時間舊>新</div>
-                    `;
-                  },
-                  divCreate: {
-                    class: `w-100 ${gClass('select-bar')} `,
-                  },
+              function pushFolder(folder: FileItem, imageArray: FileItem[]) {
+                imageArray.forEach(image => {
+                  image.selected = false;
                 });
+                folder.data.push(
+                  ...imageArray.filter(
+                    image => !folder.data.some((existingImage: any) => existingImage.id === image.id)
+                  )
+                );
+                return folder.data;
               }
+              function pushDataToFolder(selectData: FileItem[]) {
+                selectData.map(data => {
+                  let matchingElement = vm.link.find(item2 => item2.id === data.id);
+                  if (matchingElement) {
+                    if (!matchingElement.tag) {
+                      matchingElement.tag = [];
+                    }
 
-              // if (vm.type == 'folderViewToEdit') {
-              //   vm.type = 'folderView';
-              //   await that.selectImageLibrary(
-              //     gvc,
-              //     selectData => {
-              //       vm.link = selectData;
-              //       gvc.notifyDataChange(vm.id);
-              //     },
-              //     `<div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">${vm.tag}</div>`,
-              //     {
-              //       key: 'folderEdit',
-              //       mul: true,
-              //       tag: vm.tag,
-              //     }
-              //   );
-              // }
-              // 空白資料夾新增的頁面
-              if (vm.type == 'folderADD') {
-                function pushFolder(folder: FileItem, imageArray: FileItem[]) {
-                  imageArray.forEach(image => {
-                    image.selected = false;
-                  });
-                  return folder.data.push(...imageArray);
-                }
-
-                vm.newFolder = {
-                  selected: false,
-                  title: '',
-                  data: [],
-                  items: [],
-                  type: 'folder',
-                  tag: [],
-                  id: gvc.glitter.getUUID(),
-                };
+                    if (!matchingElement.tag.includes(vm.tag as string)) {
+                      matchingElement!.tag.push(vm.tag as string);
+                    }
+                  }
+                  (data as any).selected = false;
+                });
+              }
+              function drawAlbumInsertImage(callback: (selectData: FileItem[]) => void) {
                 return html`
-                  <div class="d-flex flex-column ${gClass('new-album-title-bar')}">
-                    相簿名稱
-                    <input
-                      class="w-100"
-                      value="${vm.tag ?? ''}"
-                      placeholder="請輸入相簿名稱"
-                      onchange="${gvc.event(e => {
-                        vm.tag = e.value;
-                      })}"
-                    />
-                  </div>
                   <div class="w-100 ${gClass('new-album-add-block')}">
                     <div
                       class="btn1"
                       onclick="${gvc.event(() => {
-                        this.selectImageLibrary(
+                        that.selectImageLibrary(
                           gvc,
                           selectData => {
-                            pushFolder(vm.newFolder, selectData);
-                            gvc.notifyDataChange('folderItemGroup');
+                            callback(selectData);
                           },
-                          `<div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">${vm.tag}</div>`,
+                          `<div class="d-flex flex-column tag-title" data-tag="${vm.tag}"  style="border-radius: 10px 10px 0 0;background: #F2F2F2;">${vm.tag}</div>`,
                           {
                             key: 'album',
                             mul: true,
@@ -664,9 +641,10 @@ export class imageLibrary {
                         cf.plus(
                           gvc,
                           fileArray => {
-                            pushFolder(vm.newFolder, fileArray);
+                            vm.link.push(...fileArray);
+                            callback(fileArray);
                             save(() => {
-                              gvc.notifyDataChange('folderItemGroup');
+                              gvc.notifyDataChange(vm.id);
                             });
                           },
                           'file'
@@ -676,6 +654,48 @@ export class imageLibrary {
                       上傳新圖片
                     </div>
                   </div>
+                `;
+              }
+
+              function drawSelectBar(data: FileItem[]) {
+                return gvc.bindView({
+                  bind: ids.selectBarID,
+                  view: () => {
+                    const selectCount = getSelectCount(data);
+                    return html`
+                      <div class="${selectCount ? `` : `d-none`} ${gClass('select-bar-text')}">
+                        已選取${selectCount}項
+                      </div>
+                      <div class="ms-auto ${gClass('search-raw')}">上傳時間舊>新</div>
+                    `;
+                  },
+                  divCreate: {
+                    class: `w-100 ${gClass('select-bar')} `,
+                  },
+                });
+              }
+              // 空白資料夾新增的頁面
+              if (vm.type == 'folderADD') {
+                const copyLink = structuredClone(vm.link);
+                return html`
+                  <div class="d-flex flex-column ${gClass('new-album-title-bar')}">
+                    相簿名稱
+                    <input
+                      class="w-100"
+                      value="${vm.tag ?? ''}"
+                      placeholder="請輸入相簿名稱"
+                      onchange="${gvc.event(e => {
+                        vm.tag = e.value;
+                      })}"
+                    />
+                  </div>
+                  ${drawAlbumInsertImage((selectData: FileItem[]) => {
+                    pushFolder(vm.newFolder, selectData);
+                    // vm.newFolder.data = [];
+                    vm.link.push(vm.newFolder);
+
+                    gvc.notifyDataChange('folderItemGroup');
+                  })}
                   ${gvc.bindView({
                     bind: `folderItemGroup`,
                     view: () => {
@@ -713,7 +733,7 @@ export class imageLibrary {
                       options: FilterOptions.imageLibraryOrderBy,
                     })}
                   </div>
-                  ${drawSelectBar(getSelectCount(group))}
+                  ${drawSelectBar(group)}
                   ${gvc.bindView({
                     bind: `folderItemGroup`,
                     view: () => {
@@ -741,119 +761,14 @@ export class imageLibrary {
                       })}"
                     />
                   </div>
-                  <div class="d-flex w-100" style="gap:14px;margin-top: 12px;">
-                    ${BgWidget.searchFilter(
-                      gvc.event(e => {
-                        vm.query = e.value;
-                        gvc.notifyDataChange(vm.id);
-                      }),
-                      vm.query || '',
-                      '搜尋圖片'
-                    )}
-                    ${BgWidget.updownFilter({
-                      gvc,
-                      callback: (value: any) => {
-                        vm.orderString = value;
-                        gvc.notifyDataChange(vm.id);
-                      },
-                      default: vm.orderString || 'default',
-                      options: FilterOptions.imageLibraryOrderBy,
-                    })}
-                  </div>
+                  ${drawAlbumInsertImage((selectData: FileItem[]) => {
+                    pushDataToFolder(selectData);
+                    save(() => {
+                      gvc.notifyDataChange('folderItemGroup');
+                    });
+                  })}
                   <div class="d-flex w-100 justify-content-end" style="gap:12px;margin-top: 18px;">
-                    ${drawSelectBar(getSelectCount(vm.link))}
-                    
-                    ${BgWidget.grayButton(
-                      '新增圖片',
-                      gvc.event(() => {
-                        const thatGVC = gvc;
-                        gvc.glitter.innerDialog((gvc: GVC) => {
-                          return html`
-                            <div style="width: 445px;height: 255px;border-radius: 10px;background: #FFF;">
-                              <div
-                                class="d-flex"
-                                style="color:#393939;display: flex;padding: 12px 20px;align-items: center;gap: 10px;"
-                              >
-                                新增圖片
-                                <span
-                                  class="d-flex align-items-center justify-content-center"
-                                  style="margin-left: auto;cursor: pointer;"
-                                  onclick="${gvc.event(() => {
-                                    gvc.glitter.closeDiaLog('add');
-                                  })}"
-                                >
-                                  <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    width="14"
-                                    height="14"
-                                    viewBox="0 0 14 14"
-                                    fill="none"
-                                  >
-                                    <path d="M1 1L13 13" stroke="#393939" stroke-linecap="round" />
-                                    <path d="M13 1L1 13" stroke="#393939" stroke-linecap="round" />
-                                  </svg>
-                                </span>
-                              </div>
-                              <div class="d-flex justify-content-center" style="padding-top:61px;gap:14px;">
-                                <div
-                                  style="padding: 10px 18px;border-radius: 10px;border: 1px solid #DDD;background: #FFF;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);cursor: pointer;"
-                                  onclick="${gvc.event(() => {
-                                    this.selectImageLibrary(
-                                      gvc,
-                                      selectData => {
-                                        selectData.map(data => {
-                                          let matchingElement = vm.link.find(item2 => item2.id === data.id);
-                                          if (matchingElement) {
-                                            if (!matchingElement.tag) {
-                                              matchingElement.tag = [];
-                                            }
-
-                                            if (!matchingElement.tag.includes(vm.tag as string)) {
-                                              matchingElement!.tag.push(vm.tag as string);
-                                            }
-                                          }
-                                          (data as any).selected = false;
-                                        });
-
-                                        gvc.glitter.closeDiaLog('add');
-                                        thatGVC.notifyDataChange(vm.id);
-                                      },
-                                      `<div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">${vm.tag}</div>`,
-                                      {
-                                        key: 'album',
-                                        mul: true,
-                                      }
-                                    );
-                                  })}"
-                                >
-                                  從圖庫中選擇
-                                </div>
-                                <div
-                                  style="padding: 10px 18px;border-radius: 10px;border: 1px solid #DDD;background: #FFF;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);cursor: pointer;"
-                                  onclick="${gvc.event(() => {
-                                    cf.plus(
-                                      gvc,
-                                      fileArray => {
-                                        fileArray.forEach(item => {
-                                          item.tag = [];
-                                          item.tag.push(vm.tag as string);
-                                          vm.link.push(item);
-                                        });
-                                        gvc.glitter.closeDiaLog('add');
-                                        thatGVC.notifyDataChange(vm.id);
-                                      },
-                                      'file'
-                                    );
-                                  })}"
-                                >
-                                  上傳新圖片
-                                </div>
-                              </div>
-                            </div>
-                          `;
-                        }, 'add');
-                      })
-                    )}
+                    ${drawSelectBar(vm.link)}
                   </div>
                   <div>
                     ${gvc.bindView({
@@ -914,19 +829,19 @@ export class imageLibrary {
                     margin-top: 18px;
                     margin-bottom: 8px;
                   }
-                  .${ids.classPrefix}-select-bar-text{
+                  .${ids.classPrefix}-select-bar-text {
                     flex: 1 1 0;
                     color: #393939;
                     font-size: 14px;
                     font-weight: 700;
-                    word-wrap: break-word
+                    word-wrap: break-word;
                   }
 
                   .${ids.classPrefix}-new-album-title-bar {
                     font-size: 16px;
                     font-style: normal;
                     font-weight: 400;
-                    gap: 8px;
+                    gap: 12px;
                   }
 
                   .${ids.classPrefix}-new-album-title-bar input {
@@ -937,7 +852,7 @@ export class imageLibrary {
                   }
 
                   .${ids.classPrefix}-new-album-add-block {
-                    margin-top: 18px;
+                    margin-top: 12px;
                     padding: 39px 0;
                     display: flex;
                     justify-content: center;
@@ -945,7 +860,7 @@ export class imageLibrary {
                     border-radius: 10px;
                     border: 1px solid #ddd;
                     background: #fff;
-                    gap: 14px;
+                    gap: 12px;
                   }
 
                   .${ids.classPrefix}-new-album-add-block .btn1 {
@@ -983,7 +898,7 @@ export class imageLibrary {
                     class="w-100 d-inline-flex flex-column justify-content-start align-items-start ${gClass('content')}"
                   >
                     <div class="fixed-top-section">
-                      <div class=" ${cf.key == 'album' ? `d-none` : `d-flex`}" style="gap:14px;">${pageBTN()}</div>
+                      <div class=" ${cf.key != 'album' ? `d-flex` : `d-none`}" style="gap:14px;">${pageBTN()}</div>
                       <div class="d-flex w-100" style="gap:14px;">
                         ${BgWidget.searchFilter(
                           gvc.event(e => {
@@ -1003,9 +918,9 @@ export class imageLibrary {
                           options: FilterOptions.imageLibraryOrderBy,
                         })}
                       </div>
+                      ${drawSelectBar(vm.link)}
                     </div>
                     <div class="scrollable-bottom-section d-flex flex-column">
-                      ${drawSelectBar(getSelectCount(vm.link))}
                       <div
                         style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; display: flex"
                       >
@@ -1066,6 +981,15 @@ export class imageLibrary {
                                     } else {
                                       vm.tag = '';
                                       vm.type = 'folderADD';
+                                      vm.newFolder = {
+                                        selected: false,
+                                        title: '',
+                                        data: [],
+                                        items: [],
+                                        type: 'folder',
+                                        tag: [],
+                                        id: gvc.glitter.getUUID(),
+                                      };
                                       gvc.notifyDataChange(vm.id);
                                     }
                                   })}"
@@ -1077,9 +1001,9 @@ export class imageLibrary {
                           }
                           return html`
                             <div
-                              class="w-100 ${cf.key == 'album'
-                                ? `d-none`
-                                : `d-flex`} align-items-center justify-content-center"
+                              class="w-100 ${vm.type == 'file' || vm.type == 'folder'
+                                ? `d-flex`
+                                : `d-none`} align-items-center justify-content-center"
                               style="padding: 39px 0;border-radius: 10px;border: 1px solid #DDD;background: #FFF;"
                             >
                               <div
@@ -1099,6 +1023,15 @@ export class imageLibrary {
                                   } else {
                                     vm.tag = '';
                                     vm.type = 'folderADD';
+                                    vm.newFolder = {
+                                      selected: false,
+                                      title: '',
+                                      data: [],
+                                      items: [],
+                                      type: 'folder',
+                                      tag: [],
+                                      id: gvc.glitter.getUUID(),
+                                    };
                                     gvc.notifyDataChange(vm.id);
                                   }
                                 })}"
@@ -1233,6 +1166,7 @@ export class imageLibrary {
               type: 'cancel',
               label: cancelLabel,
               onClick: () => {
+                cf.key = 'file';
                 if (cf.cancelEvent) cf.cancelEvent();
                 if (vm.type === 'folderView' || vm.type === 'folderADD') {
                   closeFolderView();
@@ -1242,7 +1176,7 @@ export class imageLibrary {
                   closeFolderView();
                   vm.type = 'folderView';
                   gvc.notifyDataChange(vm.id);
-                }else {
+                } else {
                   gvc.closeDialog();
                 }
               },
@@ -1252,7 +1186,7 @@ export class imageLibrary {
               label: '編輯',
               onClick: () => {
                 vm.type = 'folderEdit';
-                cf.key = "album";
+                cf.key = 'album';
                 gvc.notifyDataChange(vm.id);
               },
             },
@@ -1670,7 +1604,10 @@ export class imageLibrary {
                   const dialog = new ShareDialog(gvc.glitter);
 
                   function deleteImage() {
-                    const text = (item.type == 'folder')?`此操作不可復原。確定要刪除相簿${item.title}嗎？`:'刪除此圖片後，所有使用它的頁面與商品將無法顯示。<br>是否確定？' ;
+                    const text =
+                      item.type == 'folder'
+                        ? `此操作不可復原。確定要刪除相簿${item.title}嗎？`
+                        : '刪除此圖片後，所有使用它的頁面與商品將無法顯示。<br>是否確定？';
                     dialog.checkYesOrNotWithCustomWidth({
                       width: '432',
                       text: text,

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

@@ -23,32 +23,16 @@ export class SocialLinks01 {
         };
         const gotoTopImg = 'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/arrow-up-to-line-light.svg';
         gvc.addStyle(css `
-      @media (max-width: 768px) {
-        .floating-action-panel {
-          position: fixed;
-          bottom: 20px;
-          right: 10px;
-          display: flex;
-          flex-direction: column; /* 垂直排列 */
-          align-items: center;
-          gap: 10px; /* 按鈕間距 */
-          z-index: 1000;
-        }
-      }
-
-      @media (min-width: 769px) {
-        .floating-action-panel {
-          position: fixed;
-          bottom: 30px;
-          right: 30px;
-          display: flex;
-          flex-direction: column; /* 垂直排列 */
-          align-items: center;
-          gap: 10px; /* 按鈕間距 */
-          z-index: 1000;
-        }
+      .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;
@@ -75,20 +59,22 @@ export class SocialLinks01 {
         border: none;
         padding: 2px;
         cursor: pointer;
-        width: 40px;
-        height: 40px;
         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-circle:hover .component-img {
         opacity: 0.8;
       }
 
       .up-to-top.hidden {
-        display: none !important;
+        display: none;
       }
     `);
         return gvc.bindView({
@@ -100,37 +86,30 @@ export class SocialLinks01 {
           ${socialList
                     .map(socialLink => {
                     var _a;
-                    if (socialLink.icon === 'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg') {
-                        socialLink.icon = undefined;
-                    }
                     const imgSrc = supportSocial.includes(socialLink.social_type)
                         ? socialIMG[socialLink.social_type]
                         : socialIMG.other;
                     return html `
-                <div onclick="${gvc.event(() => {
-                        gvc.glitter.href = socialLink.link;
-                    })}" class="component-circle" style="overflow: hidden;
-background-image: url('${(_a = socialLink.icon) !== null && _a !== void 0 ? _a : imgSrc}');background-size: cover;background-position: center;"
-                >
-                </div>
+                <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  rounded-circle  align-items-center justify-content-center"
-          style="overflow: hidden; background-color: white;display: flex; "
+          class="component-circle up-to-top hidden"
           onclick="${gvc.event(() => {
                     scrollToTop();
                 })}"
         >
-          <i class="fa-solid fa-angle-up fs-3"></i>
+          <img src="${gotoTopImg}" alt="Go to top" class="component-img" />
         </button>
       </div>
     `;
             }, divCreate: {},
             onInitial: () => {
-                window.addEventListener('scroll', function () {
+                window.onscroll = function () {
                     const scrollPosition = window.scrollY;
                     const threshold = window.innerHeight / 2;
                     const panel = document.querySelector('.up-to-top');
@@ -140,7 +119,7 @@ background-image: url('${(_a = socialLink.icon) !== null && _a !== void 0 ? _a :
                     else {
                         panel.classList.add('hidden');
                     }
-                });
+                };
             }
         });
     }