ts-glitter 21.8.1 → 21.8.2

package/lowcode/Entry.js

@@ -146,7 +146,7 @@ export class Entry {
             }
             window.renderClock = (_b = window.renderClock) !== null && _b !== void 0 ? _b : createClock();
             console.log(`Entry-time:`, window.renderClock.stop());
-            glitter.share.editerVersion = 'V_21.8.1';
+            glitter.share.editerVersion = 'V_21.8.2';
             glitter.share.start = new Date();
             const vm = { appConfig: [] };
             window.saasConfig = {

package/lowcode/Entry.ts

@@ -150,7 +150,7 @@ export class Entry {
       }
       (window as any).renderClock = (window as any).renderClock ?? createClock();
       console.log(`Entry-time:`, (window as any).renderClock.stop());
-      glitter.share.editerVersion = 'V_21.8.1';
+      glitter.share.editerVersion = 'V_21.8.2';
       glitter.share.start = new Date();
       const vm = { appConfig: [] };
       (window as any).saasConfig = {

package/lowcode/editor/basic-component.js

@@ -9452,6 +9452,11 @@ BasicComponent.componentList = [
             "formData": {}
         },
         image: `https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/size1440_s*px$_scs0sfs1sasbs1sf_Screenshot2024-11-14at2.03.47 AM.jpg`
+    },
+    {
+        title: '社群按鈕',
+        config: { "id": "s6s7sbs4s5s5sasd", "js": "./official_view_component/official.js", "css": { "class": {}, "style": {} }, "data": { "tag": "social_popup", "_gap": "", "attr": [], "elem": "div", "list": [], "inner": "", "_other": {}, "_border": {}, "_margin": {}, "_radius": "", "_padding": {}, "_reverse": "false", "carryData": {}, "refer_app": "shop_template_black_style", "_max_width": "", "_background": "", "_style_refer": "global", "_hor_position": "center", "refer_form_data": { "social_list": [{ "icon": "https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg", "social_type": "fb" }, { "social_type": "ig" }, { "social_type": "line" }] }, "_background_setting": { "type": "none" } }, "list": [], "type": "component", "class": "w-100", "index": 2, "label": "社群彈窗", "style": "", "global": [], "mobile": { "id": "s6s7sbs4s5s5sasd", "js": "./official_view_component/official.js", "css": { "class": {}, "style": {} }, "data": { "refer_app": "shop_template_black_style" }, "list": [], "type": "component", "class": "w-100", "index": 2, "label": "社群彈窗", "style": "", "global": [], "toggle": true, "stylist": [], "version": "v2", "visible": true, "dataType": "static", "style_from": "code", "classDataType": "static", "editor_bridge": {}, "preloadEvenet": {}, "container_fonts": 0, "mobile_editable": [], "desktop_editable": [], "refreshAllParameter": {}, "refreshComponentParameter": {}, "refer": "custom" }, "toggle": true, "desktop": { "data": { "refer_app": "shop_template_black_style", "refer_form_data": {} }, "refer": "custom" }, "stylist": [], "version": "v2", "visible": true, "dataType": "static", "style_from": "code", "classDataType": "static", "editor_bridge": {}, "preloadEvenet": {}, "container_fonts": 0, "mobile_editable": [], "desktop_editable": [], "refreshAllParameter": {}, "refreshComponentParameter": {}, "formData": {} },
+        image: `https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/Screenshot 2025-05-21 at 6.22.03 PM.jpg`
     }
 ];
 BasicComponent.productList = [

package/lowcode/editor/basic-component.ts

@@ -9067,7 +9067,12 @@ export class BasicComponent {
                 "formData": {}
             },
             image: `https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/size1440_s*px$_scs0sfs1sasbs1sf_Screenshot2024-11-14at2.03.47 AM.jpg`
-        }
+        },
+      {
+        title: '社群按鈕',
+        config: {"id":"s6s7sbs4s5s5sasd","js":"./official_view_component/official.js","css":{"class":{},"style":{}},"data":{"tag":"social_popup","_gap":"","attr":[],"elem":"div","list":[],"inner":"","_other":{},"_border":{},"_margin":{},"_radius":"","_padding":{},"_reverse":"false","carryData":{},"refer_app":"shop_template_black_style","_max_width":"","_background":"","_style_refer":"global","_hor_position":"center","refer_form_data":{"social_list":[{"icon":"https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg","social_type":"fb"},{"social_type":"ig"},{"social_type":"line"}]},"_background_setting":{"type":"none"}},"list":[],"type":"component","class":"w-100","index":2,"label":"社群彈窗","style":"","global":[],"mobile":{"id":"s6s7sbs4s5s5sasd","js":"./official_view_component/official.js","css":{"class":{},"style":{}},"data":{"refer_app":"shop_template_black_style"},"list":[],"type":"component","class":"w-100","index":2,"label":"社群彈窗","style":"","global":[],"toggle":true,"stylist":[],"version":"v2","visible":true,"dataType":"static","style_from":"code","classDataType":"static","editor_bridge":{},"preloadEvenet":{},"container_fonts":0,"mobile_editable":[],"desktop_editable":[],"refreshAllParameter":{},"refreshComponentParameter":{},"refer":"custom"},"toggle":true,"desktop":{"data":{"refer_app":"shop_template_black_style","refer_form_data":{}},"refer":"custom"},"stylist":[],"version":"v2","visible":true,"dataType":"static","style_from":"code","classDataType":"static","editor_bridge":{},"preloadEvenet":{},"container_fonts":0,"mobile_editable":[],"desktop_editable":[],"refreshAllParameter":{},"refreshComponentParameter":{},"formData":{}},
+        image: `https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/Screenshot 2025-05-21 at 6.22.03 PM.jpg`
+      }
     ]
 
     public static productList = [

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

@@ -23,16 +23,32 @@ export class SocialLinks01 {
         };
         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;
+      @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;
+        }
       }
+     
 
       .social-links {
         display: flex;
@@ -59,22 +75,20 @@ 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-img {
+      .component-circle:hover {
         opacity: 0.8;
       }
 
       .up-to-top.hidden {
-        display: none;
+        display: none !important;
       }
     `);
         return gvc.bindView({
@@ -86,30 +100,37 @@ 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 `
-                <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>
+                <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>
               `;
                 })
                     .join('')}
         </div>
         <button
-          class="component-circle up-to-top hidden"
+          class="component-circle up-to-top hidden  rounded-circle  align-items-center justify-content-center"
+          style="overflow: hidden; background-color: white;display: flex; "
           onclick="${gvc.event(() => {
                     scrollToTop();
                 })}"
         >
-          <img src="${gotoTopImg}" alt="Go to top" class="component-img" />
+          <i class="fa-solid fa-angle-up fs-3"></i>
         </button>
       </div>
     `;
             }, divCreate: {},
             onInitial: () => {
-                window.onscroll = function () {
+                window.addEventListener('scroll', function () {
                     const scrollPosition = window.scrollY;
                     const threshold = window.innerHeight / 2;
                     const panel = document.querySelector('.up-to-top');
@@ -119,7 +140,7 @@ export class SocialLinks01 {
                     else {
                         panel.classList.add('hidden');
                     }
-                };
+                });
             }
         });
     }

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

@@ -33,16 +33,32 @@ export class SocialLinks01 {
     };
     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;
+      @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;
+        }
       }
+     
 
       .social-links {
         display: flex;
@@ -69,24 +85,23 @@ 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-img {
+      .component-circle:hover {
         opacity: 0.8;
       }
 
       .up-to-top.hidden {
-        display: none;
+        display: none !important;
       }
     `);
+
     return gvc.bindView({
       bind:vm.id,
       view:()=>{
@@ -95,30 +110,39 @@ export class SocialLinks01 {
         <div class="social-links">
           ${socialList
           .map(socialLink => {
+            if(socialLink.icon==='https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg'){
+              (socialLink.icon as any) = undefined; 
+            }
             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>
+                <div onclick="${
+              gvc.event(()=>{
+                gvc.glitter.href = socialLink.link;
+              })
+                }" class="component-circle" style="overflow: hidden;
+background-image: url('${socialLink.icon??imgSrc}');background-size: cover;background-position: center;"
+                >
+                </div>
               `;
           })
           .join('')}
         </div>
         <button
-          class="component-circle up-to-top hidden"
+          class="component-circle up-to-top hidden  rounded-circle  align-items-center justify-content-center"
+          style="overflow: hidden; background-color: white;display: flex; "
           onclick="${gvc.event(() => {
           scrollToTop();
         })}"
         >
-          <img src="${gotoTopImg}" alt="Go to top" class="component-img" />
+          <i class="fa-solid fa-angle-up fs-3"></i>
         </button>
       </div>
     `;
       },divCreate:{}
       ,onInitial:()=>{
-        (window as any).onscroll = function() {
+        window.addEventListener('scroll', function() {
           const scrollPosition = window.scrollY;
 
           const threshold = window.innerHeight / 2;
@@ -130,7 +154,8 @@ export class SocialLinks01 {
           } else {
             panel!.classList.add('hidden');
           }
-        };
+        });
+
       }
     })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-glitter",
-  "version": "21.8.1",
+  "version": "21.8.2",
   "description": "",
   "main": "index.js",
   "scripts": {