ts-glitter 20.6.8 → 20.7.0

package/lowcode/public-components/blogs/list.js

@@ -7,11 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Article } from "../../glitter-base/route/article.js";
-import { Language } from "../../glitter-base/global/language.js";
-import { ApiUser } from "../../glitter-base/route/user.js";
+import { Article } from '../../glitter-base/route/article.js';
+import { Language } from '../../glitter-base/global/language.js';
+import { ApiUser } from '../../glitter-base/route/user.js';
 const html = String.raw;
-const css = String.raw;
 export class BlogList {
     static getThemeColor(glitter) {
         var _a, _b, _c;
@@ -23,28 +22,27 @@ export class BlogList {
     }
     static main(obj) {
         const glitter = obj.gvc.glitter;
-        const font_theme = ((glitter).share.font_theme[0] && (glitter).share.font_theme[0].value) || "Noto Sans TC";
         const gvc = obj.gvc;
         const theme_color = BlogList.getThemeColor(obj.gvc.glitter);
-        glitter.addStyle(css `
-            .ellipsis_desc {
-                display: -webkit-box;
-                -webkit-line-clamp: 1;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: normal;
-            }
+        glitter.addStyle(`
+      .ellipsis_desc {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+      }
 
-            .card-image-fit-center {
-                display: block;
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                object-position: center;
-            }
-        `);
+      .card-image-fit-center {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+    `);
         return obj.gvc.bindView(() => {
             const id = obj.gvc.glitter.getUUID();
             const vm = {
@@ -54,7 +52,7 @@ export class BlogList {
                 pageIndex: 1,
                 pageSize: 0,
                 collection: [],
-                seo: {}
+                seo: {},
             };
             function loadData() {
                 return __awaiter(this, void 0, void 0, function* () {
@@ -69,10 +67,10 @@ export class BlogList {
                     Article.get({
                         limit: vm.limit,
                         page: vm.pageIndex - 1,
-                        for_index: "true",
+                        for_index: 'true',
                         label: gvc.glitter.getUrlParameter('collection'),
-                        search: gvc.glitter.getUrlParameter('search')
-                    }).then((res) => {
+                        search: gvc.glitter.getUrlParameter('search'),
+                    }).then(res => {
                         vm.data = res.response.data.map((dd) => {
                             var _a;
                             const created_time = dd.created_time;
@@ -80,10 +78,13 @@ export class BlogList {
                             return {
                                 title: (dd.language_data && dd.language_data[Language.getLanguage()].title) || dd.title,
                                 desc: (dd.language_data && dd.language_data[Language.getLanguage()].description) || dd.description,
-                                image: (dd.seo && dd.seo.image ? dd.seo.image : dd.preview_image || 'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg'),
+                                image: dd.seo && dd.seo.image
+                                    ? dd.seo.image
+                                    : dd.preview_image ||
+                                        'https://d3jnmi1tfjgtti.cloudfront.net/file/234285319/1722936949034-default_image.jpg',
                                 collection: (_a = dd.collection) !== null && _a !== void 0 ? _a : [],
                                 created_time: created_time,
-                                tag: dd.tag
+                                tag: dd.tag,
                             };
                         });
                         vm.loading = false;
@@ -99,38 +100,62 @@ export class BlogList {
             return {
                 bind: id,
                 view: () => {
-                    const collection_title = vm.collection.find((dd) => {
+                    const collection_title = vm.collection.find(dd => {
                         return dd.link === gvc.glitter.getUrlParameter('collection');
                     });
                     const map_v = [
-                        html `
-                            <div class="col-12 px-0">
-                                <div class="d-flex align-items-center flex-column justify-content-center py-4 pt-lg-5 px-2" style="">
-                                    <h1 class="m-0 w-100 text-center"
-                                        style="color:${theme_color.title};font-size:${document.body.clientWidth > 800 ? `32px` : `24px`};font-weight: 800;">
-                                        ${(collection_title && collection_title.title) || gvc.glitter.getUrlParameter('collection') || vm.seo.title || Language.text('blog_list')}</h1>
-                                    <div class="w-100 d-flex align-items-center rounded-2 mt-3 border" style="height: 50px;background: #fafafa;overflow: hidden;">
-                                        <input class="flex-fill  px-3" style="background: none;outline:none;border: 0;" placeholder="${Language.text('search_article')}" onchange="${gvc.event((e, event) => {
+                        html ` <div class="col-12 px-0">
+              <div class="d-flex align-items-center flex-column justify-content-center py-4 pt-lg-5 px-2" style="">
+                <h1
+                  class="m-0 w-100 text-center"
+                  style="color:${theme_color.title};font-size:${document.body.clientWidth > 800
+                            ? `32px`
+                            : `24px`};font-weight: 800;"
+                >
+                  ${(collection_title && collection_title.title) ||
+                            gvc.glitter.getUrlParameter('collection') ||
+                            vm.seo.title ||
+                            Language.text('blog_list')}
+                </h1>
+                <div
+                  class="w-100 d-flex align-items-center rounded-2 mt-3 border"
+                  style="height: 50px;background: #fafafa;overflow: hidden;"
+                >
+                  <input
+                    class="flex-fill  px-3"
+                    style="background: none;outline:none;border: 0;"
+                    placeholder="${Language.text('search_article')}"
+                    onchange="${gvc.event((e, event) => {
                             gvc.glitter.setUrlParameter('search', e.value);
                             loadData();
-                        })}" value="${gvc.glitter.getUrlParameter('search') || ''}">
-                                        <div  class="d-flex align-items-center justify-content-center" style="width: 48px;height: 48px;background:${theme_color.solid_bg};
-color:${theme_color.solid_text};">
-                                            <i class="fa-solid fa-magnifying-glass fs-5"></i>
-                                        </div>
-                                    </div>
-                                    <div class="${vm.collection.length ? `d-flex` : `d-none`} mt-3 flex-wrap  align-items-center w-100"
-                                         style="gap:10px;">
-                                        ${(((gvc.glitter.getUrlParameter('collection') || gvc.glitter.getUrlParameter('search')) ? [{
-                                link: '',
-                                title: Language.text('all_article')
-                            }] : []).concat(vm.collection)).map((dd) => {
-                            return `<div class="fs-sm  text-decoration-none d-flex align-items-center justify-content-center px-3 fw-bold" style="cursor: pointer; 
-background:${theme_color.solid_bg};
-color:${theme_color.solid_text};
-height: 30px;
-border-radius: 15px;
-" onclick="${gvc.event(() => {
+                        })}"
+                    value="${gvc.glitter.getUrlParameter('search') || ''}"
+                  />
+                  <div
+                    class="d-flex align-items-center justify-content-center"
+                    style="width: 48px;height: 48px;background:${theme_color.solid_bg}; color:${theme_color.solid_text};"
+                  >
+                    <i class="fa-solid fa-magnifying-glass fs-5"></i>
+                  </div>
+                </div>
+                <div
+                  class="${vm.collection.length ? `d-flex` : `d-none`} mt-3 flex-wrap  align-items-center w-100"
+                  style="gap:10px;"
+                >
+                  ${(gvc.glitter.getUrlParameter('collection') || gvc.glitter.getUrlParameter('search')
+                            ? [
+                                {
+                                    link: '',
+                                    title: Language.text('all_article'),
+                                },
+                            ]
+                            : [])
+                            .concat(vm.collection)
+                            .map((dd) => {
+                            return html `<div
+                        class="fs-sm  text-decoration-none d-flex align-items-center justify-content-center px-3 fw-bold"
+                        style="cursor: pointer; background:${theme_color.solid_bg}; color:${theme_color.solid_text}; height: 30px; border-radius: 15px;"
+                        onclick="${gvc.event(() => {
                                 if (dd.link) {
                                     gvc.glitter.setUrlParameter('collection', dd.link);
                                 }
@@ -139,102 +164,107 @@ border-radius: 15px;
                                     gvc.glitter.setUrlParameter('search', undefined);
                                 }
                                 loadData();
-                            })}">${dd.title}</div>`;
-                        }).join('')}
-                                    </div>
-                                </div>
-
-                            </div>`
+                            })}"
+                      >
+                        ${dd.title}
+                      </div>`;
+                        })
+                            .join('')}
+                </div>
+              </div>
+            </div>`,
                     ];
                     if (vm.data.length) {
-                        map_v.push(vm.data.map((dd) => {
-                            return html `<a class="col-12 col-md-6 col-lg-4 mb-4 mb-lg-5 px-lg-3"
-                                           style="cursor: pointer;color:${theme_color.title} !important;text-decoration:none !important;"
-                                           href="blogs/${dd.tag}" onclick="${gvc.event((e, event) => {
+                        map_v.push(vm.data
+                            .map(dd => {
+                            return html `<a
+                    class="col-12 col-md-6 col-lg-4 mb-4 mb-lg-5 px-lg-3"
+                    style="cursor: pointer;color:${theme_color.title} !important;text-decoration:none !important;"
+                    href="blogs/${dd.tag}"
+                    onclick="${gvc.event((e, event) => {
                                 event.preventDefault();
                                 gvc.glitter.href = `/blogs/${dd.tag}`;
-                            })}">
-
-                                <!-- Card -->
-                                <div class="card mb-7">
+                            })}"
+                  >
+                    <!-- Card -->
+                    <div class="card mb-7">
+                      <!-- Image -->
+                      <div class="w-100" style="padding-bottom: 56%;position: relative;">
+                        <img class="card-img-top card-image-fit-center" src="${dd.image}" style="  " />
+                      </div>
 
-                                    <!-- Image -->
-                                    <div class="w-100" style="padding-bottom: 56%;position: relative;">
-                                        <img class="card-img-top card-image-fit-center" src="${dd.image}" style="  ">
-                                    </div>
-
-                                    <!-- Body -->
-                                    <div class="card-body px-0">
-
-                                        <!-- Heading -->
-                                        <h5 class="fw-bolder mx-3 text-start mb-0 ellipsis_desc"
-                                            style="text-decoration: underline;">${dd.title}</h5>
-                                        <div class="d-flex align-items-center text-muted mx-3 my-3">
-                                            <div class="d-flex align-items-center" style="gap: 5px;">
-                                                <i class="fa-regular fa-clock"></i>
-                                                ${glitter.ut.dateFormat(new Date(dd.created_time), 'yyyy-MM-dd')}
-                                            </div>
-                                            <div class="d-flex align-items-center ms-2" style="gap: 5px;">
-                                                ${dd.collection.map((dd) => {
+                      <!-- Body -->
+                      <div class="card-body px-0">
+                        <!-- Heading -->
+                        <h5 class="fw-bolder mx-3 text-start mb-0 ellipsis_desc" style="text-decoration: underline;">
+                          ${dd.title}
+                        </h5>
+                        <div class="d-flex align-items-center text-muted mx-3 my-3">
+                          <div class="d-flex align-items-center" style="gap: 5px;">
+                            <i class="fa-regular fa-clock"></i>
+                            ${glitter.ut.dateFormat(new Date(dd.created_time), 'yyyy-MM-dd')}
+                          </div>
+                          <div class="d-flex align-items-center ms-2" style="gap: 5px;">
+                            ${dd.collection
+                                .map(dd => {
                                 return `<div class="badge fs-sm text-white text-decoration-none" style="cursor: pointer; 
 background:${theme_color.solid_bg};
 color:${theme_color.solid_text};" >${dd.title}</div>`;
-                            }).join('')}
-                                            </div>
-                                        </div>
-                                        <!-- Text -->
-                                        <p class="mb-0 fw-500 ellipsis_desc mx-3 text-start"
-                                           style="color: ${theme_color.title};">
-                                            ${dd.desc}
-                                        </p>
-
-
-                                    </div>
-
-                                </div>
-
-                            </a>`;
-                        }).join(''));
-                        map_v.push(this.pageSplitV2(gvc, vm.pageSize, vm.pageIndex, (p) => {
+                            })
+                                .join('')}
+                          </div>
+                        </div>
+                        <!-- Text -->
+                        <p class="mb-0 fw-500 ellipsis_desc mx-3 text-start" style="color: ${theme_color.title};">
+                          ${dd.desc}
+                        </p>
+                      </div>
+                    </div>
+                  </a>`;
+                        })
+                            .join(''));
+                        map_v.push(this.pageSplitV2(gvc, vm.pageSize, vm.pageIndex, p => {
                             vm.pageIndex = p;
                             loadData();
                             document.querySelector('html').scrollTo(0, 0);
                         }));
                     }
                     else if (vm.loading) {
-                        return (`<div class="col-12 d-flex align-items-center justify-content-center p-3">
-<div class="spinner-border"></div>
-</div>`);
+                        return html `<div class="col-12 d-flex align-items-center justify-content-center p-3">
+              <div class="spinner-border"></div>
+            </div>`;
                     }
                     else {
-                        map_v.push(`<div class="d-flex align-items-center justify-content-center flex-column w-100 mx-auto">
-                                                          <lottie-player
-                                                              style="max-width: 100%;width: 300px;"
-                                                              src="https://assets10.lottiefiles.com/packages/lf20_rc6CDU.json"
-                                                              speed="1"
-                                                              loop="true"
-                                                              background="transparent"
-                                                          ></lottie-player>
-                                                          <span class="mb-5 fs-5">${Language.text('no_related_blogs')}</span>
-                                                      </div>`);
+                        map_v.push(html `<div class="d-flex align-items-center justify-content-center flex-column w-100 mx-auto">
+                <lottie-player
+                  style="max-width: 100%;width: 300px;"
+                  src="https://assets10.lottiefiles.com/packages/lf20_rc6CDU.json"
+                  speed="1"
+                  loop="true"
+                  background="transparent"
+                ></lottie-player>
+                <span class="mb-5 fs-5">${Language.text('no_related_blogs')}</span>
+              </div>`);
                     }
                     return map_v.join('');
                 },
                 divCreate: {
-                    class: `row container mx-auto mb-5 px-0`,
-                    style: css `font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'STHeiti', 'WenQuanYi Micro Hei', SimSun, sans-serif;
-                        max-width: 1140px;`
-                }
+                    class: 'row container mx-auto mb-5 px-0',
+                    style: `
+            font-family: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB',
+              'Microsoft YaHei', '微软雅黑', 'STHeiti', 'WenQuanYi Micro Hei', SimSun, sans-serif;
+            max-width: 1140px;
+          `,
+                },
             };
         });
     }
 }
 BlogList.pageSplitV2 = (gvc, countPage, nowPage, callback) => {
     const generator = (n) => {
-        return html `
-                <li class="page-item my-0 mx-0">
-                    <div class="page-link-v2" onclick="${gvc.event(() => callback(n))}">${n}</div>
-                </li>`;
+        return html ` <li class="page-item my-0 mx-0">
+        <div class="page-link-v2" onclick="${gvc.event(() => callback(n))}">${n}</div>
+      </li>`;
     };
     const glitter = gvc.glitter;
     let vm = {
@@ -243,70 +273,69 @@ BlogList.pageSplitV2 = (gvc, countPage, nowPage, callback) => {
         dataList: [],
     };
     gvc.addStyle(`
-            .page-link-v2 {
-                display: inline-flex;
-                height: 32px;
-                padding: 10px;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                gap: 10px;
-                cursor: pointer;
-                background: #fff;
-                border:1px solid #393939;
-                color: #393939;
-            }
+      .page-link-v2 {
+        display: inline-flex;
+        height: 32px;
+        padding: 10px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        cursor: pointer;
+        background: #fff;
+        border: 1px solid #393939;
+        color: #393939;
+      }
 
-            .page-link-prev {
-                border-radius: 7px 0px 0px 7px;
-                border: 1px solid #d8d8d8;
-                background: #fff;
-                color: #393939;
-            }
+      .page-link-prev {
+        border-radius: 7px 0px 0px 7px;
+        border: 1px solid #393939;
+        background: #fff;
+        color: #393939;
+      }
 
-            .page-link-next {
-                border-radius: 0px 7px 7px 0px;
-                border: 1px solid #d8d8d8;
-                background: #fff;
-                color: #393939;
-            }
+      .page-link-next {
+        border-radius: 0px 7px 7px 0px;
+        border: 1px solid #393939;
+        background: #fff;
+        color: #393939;
+      }
 
-            .page-link-active {
-                background: #393939;
-                color: #fff;
-            }
+      .page-link-active {
+        background: #393939;
+        color: #fff;
+      }
 
-            .angle-style {
-                font-size: 12px;
-                color: #d8d8d8;
-            }
-        `);
+      .angle-style {
+        font-size: 12px;
+        color: #393939;
+      }
+    `);
     return gvc.bindView({
         bind: vm.id,
         view: () => {
             if (vm.loading) {
-                return html `
-                        <div class="w-100 d-flex align-items-center justify-content-center p-3">
-                            <div class="spinner-border"></div>
-                        </div>`;
+                return html ` <div class="w-100 d-flex align-items-center justify-content-center p-3">
+            <div class="spinner-border"></div>
+          </div>`;
             }
             else {
                 return html `
-                        <nav class="d-flex my-3 justify-content-center">
-                            <ul class="pagination pagination-rounded mb-0">
-                                <li class="page-item me-0">
-                                    <div
-                                            class="page-link-v2 page-link-prev"
-                                            aria-label="Previous"
-                                            style="cursor:pointer"
-                                            onclick="${gvc.event(() => {
+            <nav class="d-flex my-3 justify-content-center">
+              <ul class="pagination pagination-rounded mb-0">
+                <li class="page-item me-0">
+                  <div
+                    class="page-link-v2 page-link-prev"
+                    aria-label="Previous"
+                    style="cursor:pointer"
+                    onclick="${gvc.event(() => {
                     nowPage - 1 > 0 && callback(nowPage - 1);
                 })}"
-                                    >
-                                        <i class="fa-solid fa-angle-left angle-style"></i>
-                                    </div>
-                                </li>
-                                ${glitter.print(() => {
+                  >
+                    <i class="fa-solid fa-angle-left angle-style"></i>
+                  </div>
+                </li>
+                ${glitter.print(() => {
                     if (nowPage - 2 > 0) {
                         return generator(nowPage - 2) + generator(nowPage - 1);
                     }
@@ -317,10 +346,10 @@ BlogList.pageSplitV2 = (gvc, countPage, nowPage, callback) => {
                         return ``;
                     }
                 })}
-                                <li class="page-item active mx-0" style="border-radius: 100%">
-                                    <div class="page-link-v2 page-link-active">${nowPage}</div>
-                                </li>
-                                ${glitter.print(() => {
+                <li class="page-item active mx-0" style="border-radius: 100%">
+                  <div class="page-link-v2 page-link-active">${nowPage}</div>
+                </li>
+                ${glitter.print(() => {
                     if (nowPage + 2 <= countPage) {
                         return generator(nowPage + 1) + generator(nowPage + 2);
                     }
@@ -331,24 +360,23 @@ BlogList.pageSplitV2 = (gvc, countPage, nowPage, callback) => {
                         return ``;
                     }
                 })}
-                                <li class="page-item ms-0">
-                                    <div
-                                            class="page-link-v2 page-link-next"
-                                            aria-label="Next"
-                                            style="cursor:pointer"
-                                            onclick="${gvc.event(() => {
+                <li class="page-item ms-0">
+                  <div
+                    class="page-link-v2 page-link-next"
+                    aria-label="Next"
+                    style="cursor:pointer"
+                    onclick="${gvc.event(() => {
                     nowPage + 1 <= countPage && callback(nowPage + 1);
                 })}"
-                                    >
-                                        <i class="fa-solid fa-angle-right angle-style"></i>
-                                    </div>
-                                </li>
-                            </ul>
-                        </nav>
-                    `;
+                  >
+                    <i class="fa-solid fa-angle-right angle-style"></i>
+                  </div>
+                </li>
+              </ul>
+            </nav>
+          `;
             }
         },
-        divCreate: {},
         onCreate: () => {
             if (vm.loading) {
                 vm.loading = false;