ts-glitter 21.4.0 → 21.4.2

package/lowcode/glitterBundle/html-component/global-widget.ts

@@ -1,11 +1,18 @@
 import {GVC} from "../GVController.js";
 import {Storage} from "../helper/storage.js";
-
+import { ApiPageConfig } from '../../api/pageConfig.js';
+import { ToolSetting } from '../../jspage/function-page/tool-setting.js';
 enum ViewType {
     mobile = 'mobile',
     desktop = 'desktop',
     def = 'def'
 }
+export interface OptionsItem {
+  key: string;
+  value: string;
+  note?: string;
+  image?: string;
+}
 
 const html = String.raw
 
@@ -160,7 +167,40 @@ export class GlobalWidget {
         })
 
     }
-
+  static select(obj: {
+    gvc: GVC;
+    callback: (value: any) => void;
+    default: string;
+    options: OptionsItem[];
+    style?: string;
+    title?: string;
+    readonly?: boolean;
+    place_holder?: string;
+  }) {
+    return html` ${obj.title ? html` <div class="tx_normal fw-normal mb-2">${obj.title}</div>` : ``}
+      <select
+        class="c_select c_select_w_100"
+        style="${obj.style ?? ''}; ${obj.readonly ? 'background: #f7f7f7;' : ''}"
+        onchange="${obj.gvc.event(e => {
+      obj.callback(e.value);
+    })}"
+        ${obj.readonly ? 'disabled' : ''}
+      >
+        ${obj.gvc.map(
+      obj.options.map(
+        opt =>
+          html` <option class="c_select_option" value="${opt.key}" ${obj.default === opt.key ? 'selected' : ''}>
+                ${opt.value}
+              </option>`
+      )
+    )}
+        ${(obj.options as any).find((opt: any) => {
+      return obj.default === opt.key;
+    })
+      ? ``
+      : `<option class="d-none" selected>${obj.place_holder || `請選擇項目`}</option>`}
+      </select>`;
+  }
     public static switchButton(gvc: GVC, def: boolean, callback: (value: boolean) => void) {
         return html`
             <div class="form-check form-switch d-flex align-items-center my-0" style=" cursor: pointer;">
@@ -185,200 +225,265 @@ export class GlobalWidget {
         hide_selector?: boolean
         hide_ai?: boolean
     }) {
-        GlobalWidget.glitter_view_type = ViewType.desktop
-        if (Storage.view_type === 'mobile') {
-            GlobalWidget.glitter_view_type = ViewType.mobile
-        }
+      const outer_id=obj.gvc.glitter.getUUID()
 
-        if (['mobile', 'desktop'].includes(obj.gvc.glitter.getCookieByName('ViewType')) && GlobalWidget.glitter_view_type !== 'def') {
-            GlobalWidget.glitter_view_type = obj.gvc.glitter.getCookieByName('ViewType')
-        }
+      const glitter = obj.gvc.glitter;
+      const gvc = obj.gvc;
+      return gvc.bindView(()=>{
+        return {
+          bind:outer_id,
+          view:()=>{
+            return ``
+          },
+          divCreate:{
+            class:`${outer_id}`
+          },
+          onCreate:async ()=>{
+            let civ:string[]=[]
+            const is_sub_page = ['pages/','hidden/','shop/'].find((dd)=>{
+              return (obj.gvc.glitter.getUrlParameter('page') || '').startsWith(dd)
+            });
+            if(!glitter.share.c_header_list){
+              glitter.share.c_header_list=(await ApiPageConfig.getPageTemplate({
+                template_from: 'all',
+                page: '0',
+                limit: '3000',
+                type: 'module',
+                tag: '標頭元件',
+              })).response.result.data;
+            }
+            if(is_sub_page && glitter.share.c_header_list.find((d1:any)=>{
+              return d1.tag===obj.widget.data.tag && d1.appName===obj.widget.data.refer_app
+            })){
+              glitter.share.header_refer= glitter.share.header_refer || 'def'
+              civ.push(`<div class="mt-2 fs-6 mb-2" style="color: black;margin-bottom: 5px;" 
+>標頭樣式參照</div>`)
+              civ.push( GlobalWidget.select({
+                gvc: gvc,
+                callback: (text: any) => {
+                  glitter.share.header_refer = text;
+                  glitter.share.selectEditorItem();
+                },
+                default: glitter.share.header_refer,
+                options: [
+                  {
+                    key: 'custom',
+                    value: '自定義標頭樣式',
+                  },
+                  {
+                    key: 'def',
+                    value: '全站預設樣式',
+                  },
+                ],
+              }))
+              if(glitter.share.header_refer==='def'){
+                (window.parent as any).document.querySelector('.'+outer_id).outerHTML = civ.join('');
+                return
+              }
+            }
+            civ.push((()=>{
+              GlobalWidget.glitter_view_type = ViewType.desktop
+              if (Storage.view_type === 'mobile') {
+                GlobalWidget.glitter_view_type = ViewType.mobile
+              }
 
-        if ((GlobalWidget.glitter_view_type === 'def') || (obj.gvc.glitter.getUrlParameter('device') === 'mobile')) {
-            return obj.view(obj.widget, 'def')
-        } else {
-            const id = obj.gvc.glitter.getUUID()
-            const gvc = obj.gvc;
-            GlobalWidget.initialShowCaseData({widget: obj.widget, gvc: obj.gvc})
-            let select_bt = 'form_editor'
+              if (['mobile', 'desktop'].includes(obj.gvc.glitter.getCookieByName('ViewType')) && GlobalWidget.glitter_view_type !== 'def') {
+                GlobalWidget.glitter_view_type = obj.gvc.glitter.getCookieByName('ViewType')
+              }
 
-            function ai_switch() {
-                return `<div class="d-flex align-items-center  shadow border-bottom mt-n2"
+              if ((GlobalWidget.glitter_view_type === 'def') || (obj.gvc.glitter.getUrlParameter('device') === 'mobile')) {
+                return obj.view(obj.widget, 'def')
+              } else {
+                const id = obj.gvc.glitter.getUUID()
+                const gvc = obj.gvc;
+                GlobalWidget.initialShowCaseData({widget: obj.widget, gvc: obj.gvc})
+                let select_bt = 'form_editor'
+
+                function ai_switch() {
+                  if(is_sub_page){
+                    return  ``
+                  }
+                  return `<div class="d-flex align-items-center  shadow border-bottom mt-n2"
                                                      style="">
                                                     ${(() => {
                     const list = [
-                        {
-                            key: 'form_editor',
-                            label: `元件設計`,
-                            icon: `fa-regular fa-pencil`
-                        },
-                        {
-                            key: 'ai_editor',
-                            label: 'AI 設計',
-                            icon: `fa-regular fa-wand-magic-sparkles`
-                        }
+                      {
+                        key: 'form_editor',
+                        label: `元件設計`,
+                        icon: `fa-regular fa-pencil`
+                      },
+                      {
+                        key: 'ai_editor',
+                        label: 'AI 設計',
+                        icon: `fa-regular fa-wand-magic-sparkles`
+                      }
                     ];
                     return list
-                        .map((dd) => {
-                            if (select_bt === dd.key) {
-                                return html`
+                      .map((dd) => {
+                        if (select_bt === dd.key) {
+                          return html`
                                     <div class="d-flex align-items-center justify-content-center fw-bold px-2 py-2 fw-500 select-label-ai-message_ fs-6"
                                          style="gap:5px;">
                                         <i class="${dd.icon} "></i>${dd.label}
                                     </div>`;
-                            } else {
-                                return html`
+                        } else {
+                          return html`
                                     <div class="d-flex align-items-center justify-content-center fw-bold  px-2 py-2 fw-500 select-btn-ai-message_ fs-6"
                                          style="gap:5px;"
                                          onclick="${gvc.event(() => {
-                                             select_bt = dd.key
-                                             gvc.notifyDataChange(id)
-                                         })}"
+                            select_bt = dd.key
+                            gvc.notifyDataChange(id)
+                          })}"
                                     >
                                         <i class="${dd.icon}"></i>${dd.label}
                                     </div>`;
-                            }
-                        })
-                        .join(`<div class="border-end" style="width:1px;height:39px;"></div>`);
-                })()}
+                        }
+                      })
+                      .join(`<div class="border-end" style="width:1px;height:39px;"></div>`);
+                  })()}
                                                 </div>`
-            }
+                }
 
-            function selector(widget: any, key: string) {
-                if (obj.hide_selector) {
+                function selector(widget: any, key: string) {
+                  if (obj.hide_selector) {
                     return ``
-                }
-                return html`
+                  }
+                  return html`
                     <div class=" mx-n2"
                          style="">${
-                            [
-                                ...(() => {
-                                    if (obj.hide_ai) {
-                                        return []
-                                    } else {
-                                        return [ai_switch()]
-                                    }
-                                })(),
-                                obj.gvc.bindView(() => {
-                                    const id = gvc.glitter.getUUID()
-                                    return {
-                                        bind: id,
-                                        view: () => {
-                                            return html`
+                    [
+                      ...(() => {
+                        if (obj.hide_ai) {
+                          return []
+                        } else {
+                          return [ai_switch()]
+                        }
+                      })(),
+                      obj.gvc.bindView(() => {
+                        const id = gvc.glitter.getUUID()
+                        return {
+                          bind: id,
+                          view: () => {
+                            return html`
                                                 <div class="my-auto tx_title fw-normal d-flex align-items-center"
                                                      style="white-space: nowrap;font-size: 16px;">在${(() => {
-                                                    if (GlobalWidget.glitter_view_type === "mobile") {
-                                                        return `手機`
-                                                    } else {
-                                                        return `電腦`
-                                                    }
-                                                })()}版上${(obj.widget[key].refer === 'hide') ? `不` : ``}顯示
+                              if (GlobalWidget.glitter_view_type === "mobile") {
+                                return `手機`
+                              } else {
+                                return `電腦`
+                              }
+                            })()}版上${(obj.widget[key].refer === 'hide') ? `不` : ``}顯示
                                                 </div>
                                                 ${GlobalWidget.switchButton(obj.gvc, obj.widget[key].refer !== 'hide', (bool) => {
-                                                    // vm.data.main = bool;
-                                                    if (bool) {
-                                                        obj.widget[key].refer = 'def'
-                                                    } else {
-                                                        obj.widget[key].refer = 'hide'
-                                                    }
-                                                    obj.toggle_visible && obj.toggle_visible(bool);
-                                                    gvc.notifyDataChange(id)
-                                                    setTimeout(() => {
-                                                        obj.widget.refreshComponent()
-                                                    }, 250)
-                                                })}`
-                                        },
-                                        divCreate: {
-                                            class: `d-flex align-content-center px-3`,
-                                            style: `gap:10px;margin-bottom:18px;margin-top:13px;`
-                                        }
-                                    }
-                                })
-                            ].concat((() => {
-                                if (obj.widget[key].refer === 'hide') {
-                                    return []
-                                } else {
-                                    if (obj.custom_edit) {
-                                        return []
-                                    } else {
-                                        return [(obj.gvc.bindView(() => {
-                                            const id = gvc.glitter.getUUID()
-                                            return {
-                                                bind: id,
-                                                view: () => {
-                                                    return `<div class="my-auto tx_title fw-normal d-flex align-items-center" style="white-space: nowrap;font-size: 16px;">顯示獨立樣式</div>
+                              // vm.data.main = bool;
+                              if (bool) {
+                                obj.widget[key].refer = 'def'
+                              } else {
+                                obj.widget[key].refer = 'hide'
+                              }
+                              obj.toggle_visible && obj.toggle_visible(bool);
+                              gvc.notifyDataChange(id)
+                              setTimeout(() => {
+                                obj.widget.refreshComponent()
+                              }, 250)
+                            })}`
+                          },
+                          divCreate: {
+                            class: `d-flex align-content-center px-3`,
+                            style: `gap:10px;margin-bottom:18px;margin-top:13px;`
+                          }
+                        }
+                      })
+                    ].concat((() => {
+                      if (obj.widget[key].refer === 'hide') {
+                        return []
+                      } else {
+                        if (obj.custom_edit) {
+                          return []
+                        } else {
+                          return [(obj.gvc.bindView(() => {
+                            const id = gvc.glitter.getUUID()
+                            return {
+                              bind: id,
+                              view: () => {
+                                return `<div class="my-auto tx_title fw-normal d-flex align-items-center" style="white-space: nowrap;font-size: 16px;">顯示獨立樣式</div>
 ${GlobalWidget.switchButton(obj.gvc, obj.widget[key].refer === 'custom', (bool) => {
-                                                        obj.widget[key].refer = (bool) ? `custom` : `def`;
-                                                        if (obj.widget.refreshComponent) {
-                                                            obj.widget.refreshComponent()
-                                                        } else if (obj.widget.refreshAll) {
-                                                            obj.widget.refreshAll()
-                                                        }
-                                                    })}`
-                                                },
-                                                divCreate: {
-                                                    class: `d-flex align-content-center px-3`,
-                                                    style: `gap:10px;margin-top:13px;`
-                                                }
-                                            }
-                                        }) + `<div class="px-3 pt-2" style="white-space: normal;word-break: break-all;color: #8D8D8D; font-size: 14px; font-weight: 400; ">透過設定獨立樣式在${(() => {
-                                            if (GlobalWidget.glitter_view_type === "mobile") {
-                                                return `手機`
-                                            } else {
-                                                return `電腦`
-                                            }
-                                        })()}版上顯示特定設計效果</div>`), `<div class="mx-n3" style="background: #DDD;height: 1px;"></div>`].join(`<div style="height:18px;"></div>`)
-                                    }
+                                  obj.widget[key].refer = (bool) ? `custom` : `def`;
+                                  if (obj.widget.refreshComponent) {
+                                    obj.widget.refreshComponent()
+                                  } else if (obj.widget.refreshAll) {
+                                    obj.widget.refreshAll()
+                                  }
+                                })}`
+                              },
+                              divCreate: {
+                                class: `d-flex align-content-center px-3`,
+                                style: `gap:10px;margin-top:13px;`
+                              }
+                            }
+                          }) + `<div class="px-3 pt-2" style="white-space: normal;word-break: break-all;color: #8D8D8D; font-size: 14px; font-weight: 400; ">透過設定獨立樣式在${(() => {
+                            if (GlobalWidget.glitter_view_type === "mobile") {
+                              return `手機`
+                            } else {
+                              return `電腦`
+                            }
+                          })()}版上顯示特定設計效果</div>`), `<div class="mx-n3" style="background: #DDD;height: 1px;"></div>`].join(`<div style="height:18px;"></div>`)
+                        }
 
 
-                                }
-                            })()).join('<div class="my-3"></div>')
-                    }
+                      }
+                    })()).join('<div class="my-3"></div>')
+                  }
                     </div>`
-            }
+                }
 
-            return obj.gvc.bindView(() => {
-                return {
+                return obj.gvc.bindView(() => {
+                  return {
                     bind: id,
                     view: () => {
-                        if (select_bt === 'ai_editor') {
-                            return new Promise((resolve, reject) => {
-                                gvc.glitter.getModule(gvc.glitter.root_path+'cms-plugin/ai-generator/editor-ai.js', (EditorAi) => {
-                                    resolve([`<div class="mx-n2">${ai_switch()}</div>`, EditorAi.view(gvc)].join(''))
-                                })
-                            })
-                        }
-                        const view = (() => {
-                            try {
-                                if (GlobalWidget.glitter_view_type === 'mobile') {
-                                    const view = [selector(obj.widget.mobile, 'mobile')]
-                                    if (obj.widget.mobile.refer === 'custom') {
-                                        view.push(obj.view(obj.widget.mobile, 'mobile'))
-                                    } else {
-                                        view.push(obj.view(obj.widget, 'def'))
-                                    }
-                                    return view.join('')
-                                } else if (GlobalWidget.glitter_view_type === 'desktop') {
-                                    const view = [selector(obj.widget.desktop, 'desktop')]
-                                    if (obj.widget.desktop.refer === 'custom') {
-                                        view.push(obj.view(obj.widget.desktop, 'desktop'))
-                                    } else {
-                                        view.push(obj.view(obj.widget, 'def'))
-                                    }
-                                    return view.join('')
-                                } else {
-                                    return obj.view(obj.widget, 'def')
-                                }
-                            } catch (e) {
-                                console.log(e)
-                                return `${e}`
+                      if (select_bt === 'ai_editor') {
+                        return new Promise((resolve, reject) => {
+                          gvc.glitter.getModule(gvc.glitter.root_path+'cms-plugin/ai-generator/editor-ai.js', (EditorAi) => {
+                            resolve([`<div class="mx-n2">${ai_switch()}</div>`, EditorAi.view(gvc)].join(''))
+                          })
+                        })
+                      }
+                      const view = (() => {
+                        try {
+                          if (GlobalWidget.glitter_view_type === 'mobile') {
+                            const view = [selector(obj.widget.mobile, 'mobile')]
+                            if (obj.widget.mobile.refer === 'custom') {
+                              view.push(obj.view(obj.widget.mobile, 'mobile'))
+                            } else {
+                              view.push(obj.view(obj.widget, 'def'))
+                            }
+                            return view.join('')
+                          } else if (GlobalWidget.glitter_view_type === 'desktop') {
+                            const view = [selector(obj.widget.desktop, 'desktop')]
+                            if (obj.widget.desktop.refer === 'custom') {
+                              view.push(obj.view(obj.widget.desktop, 'desktop'))
+                            } else {
+                              view.push(obj.view(obj.widget, 'def'))
                             }
-                        })()
-                        return [view].join('')
+                            return view.join('')
+                          } else {
+                            return obj.view(obj.widget, 'def')
+                          }
+                        } catch (e) {
+                          console.log(e)
+                          return `${e}`
+                        }
+                      })()
+                      return [view].join('')
                     }
-                }
-            })
+                  }
+                })
+              }
+            })());
+            (window.parent as any).document.querySelector('.'+outer_id).outerHTML = civ.join('')
+          }
         }
+      })
     }
 
     public static showCaseData(obj: {

package/lowcode/index.html

@@ -2936,7 +2936,7 @@
         };
 
         function execute() {
-          fetch(window.glitterBackend + `/api/v1/template?appName=${appName}&tag=${encodeURIComponent((typeof cf === 'object') ? cf.tag : tag)}&preload=true`, requestOptions)
+          fetch(window.glitterBackend + `/api/v1/template?appName=${appName}&tag=${encodeURIComponent((typeof cf === 'object') ? cf.tag : tag)}&preload=true&page_refer=${encodeURIComponent(window.page_refer || '')}`, requestOptions)
             .then(response => response.json())
             .then(response => {
               for (const b of response.result) {

package/lowcode/jspage/function-page/tool-setting.js

@@ -219,7 +219,14 @@ export class ToolSetting {
                       <div
                         style="align-self: stretch; color: #393939; font-size: 15px;  font-weight: 400; word-wrap: break-word"
                       >
-                        ${refer_widget.template_config.name}
+                        ${(() => {
+                                if ((dd.tag === '標頭元件') && gvc.glitter.share.is_blog_editor()) {
+                                    return gvc.glitter.share.editorViewModel.selectItem.label;
+                                }
+                                else {
+                                    return refer_widget.template_config.name;
+                                }
+                            })()}
                       </div>
                     </div>
 
@@ -354,3 +361,4 @@ ToolSetting.tool_setting_list = [
         hint: `用戶於首頁時會彈跳出來的輪播廣告`,
     },
 ];
+window.glitter.setModule(import.meta.url, ToolSetting);

package/lowcode/jspage/function-page/tool-setting.ts

@@ -190,6 +190,7 @@ export class ToolSetting {
           //主元件
           const refer_widget = await (async () => {
             if (['標頭元件', '頁腳元件', '商品卡片', '廣告輪播'].includes(dd.tag)) {
+
               return (
                 await ApiPageConfig.getPage({
                   appName: widget.config[0].data.refer_app,
@@ -261,7 +262,13 @@ export class ToolSetting {
                       <div
                         style="align-self: stretch; color: #393939; font-size: 15px;  font-weight: 400; word-wrap: break-word"
                       >
-                        ${refer_widget.template_config.name}
+                        ${(()=>{
+                          if((dd.tag==='標頭元件') && gvc.glitter.share.is_blog_editor()){
+                            return gvc.glitter.share.editorViewModel.selectItem.label;
+                          }else{
+                            return  refer_widget.template_config.name;
+                          }
+                        })()}
                       </div>
                     </div>
 
@@ -371,3 +378,4 @@ export class ToolSetting {
     ].join('');
   }
 }
+(window as any).glitter.setModule(import.meta.url,ToolSetting)