create-fesd-app 1.0.0-bate.94 → 1.0.0-bate.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fesd-app",
-  "version": "1.0.0-bate.94",
+  "version": "1.0.0-bate.96",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,7 +22,7 @@
     ".gitignore"
   ],
   "dependencies": {
-    "@xwadex/fesd": "0.0.14-re.71",
+    "@xwadex/fesd": "0.0.15",
     "ansi-colors": "^4.1.3",
     "chalk": "^5.3.0",
     "colorthief": "^2.4.0",

package/src/assets/css/layouts/_cookiePolicy.sass

@@ -0,0 +1,75 @@
+.cookie-check
+  padding: 20px
+  display: flex
+  opacity: 0
+  width: 100%
+  height: 100%
+  z-index: 101
+  overflow: hidden
+  position: fixed
+  right: 0
+  bottom: 0
+  transition: opacity .5s
+  pointer-events: none
+  &.first-enter
+    opacity: 1
+    .cookie-main
+      pointer-events: auto
+      transform: translate3d(0,0,0)
+  &.agree,&.hidden
+    .cookie-main
+      pointer-events: none
+      transform: translate3d(0,calc(100% + 40px),0)
+  .cookie-main
+    margin: auto 0 0 auto
+    padding: 40px
+    max-width: 600px
+    width: 100%
+    background: #fff
+    border-radius: 5px
+    transform: translate3d(0,100%,0)
+    transition: transform .5s 
+    box-shadow: 0px 0px 20px 0px rgba(90, 70, 42, .15)
+  .cookie-container 
+    .title-block
+      margin-right: 20px
+      // width: 634/824*100%
+      width: 100%
+      .title
+        font-size: px(20)
+      .text
+        margin-top: 10px
+    .button-group
+      margin: 20px 0 0 auto
+      display: flex
+      gap: 10px 20px
+    .cookie-btn
+      display: flex
+      align-items: center
+      cursor: pointer
+      gap: 10px
+      transition: opacity .5s
+      &::before 
+        display: block
+        background: #000000
+        width: 5px
+        height: 5px
+        content: ''
+      +hover 
+        opacity: .5
+  +rwdmax(767)
+    .cookie-main
+      margin: auto auto 0 auto
+    .cookie-container 
+      flex-direction: column
+      .title-block
+        width: 100%
+      .button-group
+        margin-top: 30px
+        display: flex
+        flex-direction: row
+        width: 100%
+  +rwdmax(575)
+    .cookie-container 
+      .button-group
+        flex-direction: column

package/src/assets/css/layouts/article4/_article4_2.0.sass

@@ -75,6 +75,20 @@
     &[swiper-pagination-dynamic="on"]
       .swiper-pagination
         left: 50%
+    // 點點深淺模式樣式
+    // 以下可客製化更改
+    &[nav-theme="dark"]
+      .swiper-pagination
+        .swiper-pagination-bullet
+          background-color: #C4C4C4
+          &.swiper-pagination-bullet-active
+            background-color: #000
+    &[nav-theme="light"]
+      .swiper-pagination
+        .swiper-pagination-bullet
+          background-color: #ffffff7e
+          &.swiper-pagination-bullet-active
+            background-color: #ffffff
 
 /////////////////////////////////////////////
 /////////////  [ 個別類型設定 ]  /////////////
@@ -147,6 +161,8 @@
     ._wordCover
       margin: 0
       margin-bottom: $img-cover-TB-gap
+    ._cover
+      margin-bottom: 0
     &[img-row="x2"],
     &[img-row="x3"],
     &[img-row="x4"],
@@ -156,14 +172,24 @@
     +rwdmax($basic_rwd)
       ._wordCover
         margin-bottom: $img-cover-TB-gap_rwd
+      ._imgCover
+        margin-bottom: 0
       &[mobile-rwd="on"]
         ._H
-          margin-top: $img-cover-TB-gap_rwd
+          // 2025.04.21 新增 important
+          margin-top: $img-cover-TB-gap_rwd !important
         ._imgCover
-          margin-top: 0
+          margin-top: 0 !important
           order: -1
         ._wordCover
           margin: 0
+      // 2025.04.21 新增判斷
+      &[img-row="x2"],
+      &[img-row="x3"],
+      &[img-row="x4"],
+      &[img-row="x5"]
+        ._imgCover
+          margin-bottom: #{-$cover-TB-gap_rwd}
 
   &.typeUL,
   &.typeUR
@@ -214,6 +240,7 @@
       &[mobile-rwd="on"]
         ._imgCover
           order: 1
+          margin-bottom: 0
 
   &.typeD
     ._imgCover
@@ -237,6 +264,9 @@
         width: 100%
       ._wordCover
         margin-top: 0
+      &[mobile-rwd="on"]
+        ._H
+          margin-top: 0
   &.typeDL
     ._H
       order: 1
@@ -468,11 +498,11 @@
       &[img-row="x4"],
       &[img-row="x5"]
         ._imgCover
-          margin: 0 #{-$cover-LR-gap_rwd * 0.5}
+          margin: 0 #{-$cover-LR-gap_rwd * 0.5} #{$img-cover-TB-gap_rwd + $cover-TB-gap_rwd - $img-cover-TB-gap_rwd}
           width: calc(100% + #{$cover-LR-gap_rwd})
       &[img-merge="on"]
         ._imgCover
-          margin: 0
+          margin: 0 0 #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd} 0
           width: 100%
       &[mobile-rwd="on"]
         ._imgCover
@@ -566,8 +596,16 @@
 
   // swiper
   &[img-swiper="on"]
+    &.typeD
+      ._imgCover
+        // margin-bottom: #{-$cover-TB-gap + $img-cover-TB-gap}
+        margin-bottom: #{$img-cover-TB-gap - (-$cover-TB-gap + $img-cover-TB-gap)}
     ._imgCover
       position: relative
+      margin: 0 #{-$swiper-cover-LR-gap / 2}
+      ._cover
+        margin-bottom: 0
+        padding: 0 #{$swiper-cover-LR-gap / 2}
       .swiper-button-cover
         &:before
           display: block
@@ -590,9 +628,10 @@
 
   // img-row
   @for $i from 2 through 5
-    &[img-row="x#{$i}"]
+    &[img-row="x#{$i}"],
+    &[swiper-num="#{$i}"]
       ._imgCover
-        margin: 0 #{-$cover-LR-gap * 0.5} #{-$cover-TB-gap + $img-cover-TB-gap} #{-$cover-LR-gap * 0.5}
+        // margin: 0 #{-$cover-LR-gap * 0.5} #{-$cover-TB-gap + $img-cover-TB-gap} #{-$cover-LR-gap * 0.5}
         width: calc(100% + #{$cover-LR-gap})
         ._cover
           margin-bottom: $cover-TB-gap
@@ -600,7 +639,7 @@
           width: calc(100% / #{$i})
       +rwdmax($basic_rwd)
         ._imgCover
-          margin: 0 #{-$cover-LR-gap_rwd * 0.5} #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
+          // margin: 0 #{-$cover-LR-gap_rwd * 0.5} #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
           width: calc(100% + #{$cover-LR-gap_rwd})
           ._cover
             margin-bottom: $cover-TB-gap_rwd
@@ -610,13 +649,17 @@
   // img-merge
   &[img-merge="on"]
     ._imgCover
-      margin: 0 0 $cover-TB-gap
       width: 100%
+      margin-bottom: 0
       ._cover
         padding: 0
-        margin-bottom: 0
-        ._description
-          display: none
+    &:not([swiper-num])
+      ._imgCover
+        // margin: 0 0 $cover-TB-gap
+        ._cover
+          margin-bottom: 0
+          ._description
+            display: none
 
   // article-flex
   &[article-flex="up"]

package/src/assets/css/layouts/article4/_article4_setting.sass

@@ -51,6 +51,9 @@ $button-cover-gap_rwd: 20px
 $cover-LR-gap: 12px
 $cover-LR-gap_rwd: 12px
 
+// 輪播左右間的距離
+$swiper-cover-LR-gap: 12px
+
 // 影像上下間的距離
 $cover-TB-gap: 30px
 $cover-TB-gap_rwd: 10px
@@ -244,7 +247,8 @@ $pagination-TB-gap_rwd: 10px
 
 // swiper 結構
 %swiper_pagination
-  margin: calc(#{$pagination-TB-gap} - #{$cover-TB-gap}) 0 0
+  // margin: calc(#{$pagination-TB-gap} - #{$cover-TB-gap}) 0 0
+  margin: $pagination-TB-gap 0 0 
   display: block
   position: relative
   top: auto
@@ -252,7 +256,7 @@ $pagination-TB-gap_rwd: 10px
   left: auto
   right: auto
   +rwdmax($basic_rwd)
-    margin: calc(#{$pagination-TB-gap_rwd} - #{$cover-TB-gap_rwd}) 0 0
+    margin: $pagination-TB-gap_rwd 0 0
 
 %swiper_pagination_bullet
   margin: 0 10px

package/src/assets/css/style.sass

@@ -24,6 +24,8 @@
 @import ./layouts/_footer
 // 燈箱 Modal
 @import ./layouts/_modal
+// cookie
+@import ./layouts/_cookiePolicy
 // Swiper樣式
 @import 'swiperv8/css/bundle'
 @import 'swiperv11/css/bundle'

package/src/assets/js/apps/about/page.js

@@ -1,5 +1,5 @@
 import { Article4 } from '@xwadex/fesd';
-import { common, noContentCheck } from "@/commons";
+import { common, methods } from "@/commons";
 
 $(async () => {
   // common Init
@@ -7,5 +7,5 @@ $(async () => {
   // pluginInit
   new Article4('._articleBlock')
   // coding...
-  noContentCheck();
+  methods.noContentCheck();
 })

package/src/assets/js/apps/error/404/page.js

@@ -7,5 +7,4 @@ $(async () => {
 
   if (!backHomeElement || !href) return;
   pageCounterInit(6, href)
-
 })

package/src/assets/js/apps/index/page.js

@@ -16,7 +16,6 @@ import {
 } from '@xwadex/fesd/tools';
 import {
   common,
-  collapseEvent,
   methods
 } from "@/commons"
 // flatpickr
@@ -28,17 +27,20 @@ import { bannerConfig } from "@/configs"
 // swiper
 const { SwiperV11 } = SwiperVer11
 const swiperHandler = {};
+
 swiperHandler.banner = function () {
   const bannerEvents = {
+    ...bannerConfig,
     init() {
       console.log('swiper init!!');
     },
-    slideChangeTransitionStart() {
-      isVideo(this);
+    slideChangeTransitionStart(swiper) {
+      isVideo(swiper);
     },
   };
-  const banner = new SwiperV11('.swiper', { ...bannerConfig, on: bannerEvents });
+  const banner = new SwiperV11('.swiper', bannerEvents );
 };
+
 swiperHandler.all = function () {
   this.banner();
 };
@@ -123,7 +125,7 @@ const s4Handler = function () {
 
 const s6Handler = function () {
   // 簡易版
-  collapseEvent('[data-collapse-click]', '[data-collapse]', true, true)
+  methods.collapseEvent('[data-collapse-click]', '[data-collapse]', true, true)
   // 公版
   collapse: new Collapse4('[partnerCollapse-wrapper]', {
     defaultOpen: false,
@@ -151,7 +153,6 @@ const s8Handler = function () {
   });
   wddForm.addEventListener('submit', function () {
     console.log('submit', wddForm.value);
-
   });
 };
 // -- 方法 給後端

package/src/assets/js/commons/index.js

@@ -3,4 +3,4 @@ export * as methods from "./methods"
 // 小工具
 export * from "./utils"
 // 共用
-export * from "./pages/page.error"
+export * from "./pages"

package/src/assets/js/commons/inits.js

@@ -11,6 +11,7 @@ import {
   scrollUnlock
 } from '@xwadex/fesd/tools';
 import { toBackend } from "@/commons/methods";
+import { cookiePolicy } from "@/commons/pages";
 import { lazyLoadImg } from '@/plugins';
 import { navbar } from '@/ui';
 
@@ -50,6 +51,7 @@ export const inits = () => {
   new ImageValidate();
   // uiInit
   navbar.init();
+  cookiePolicy();
   // coding...
   firstEntryHandler.init();
 }

package/src/assets/js/commons/methods.js

@@ -1,11 +1,42 @@
 export const toBackend = (contents) => {
-    if (!contents) return
-    if (!document || !document?.body) return
-    if (!document.body?.fesd) document.body.fesd = {}
+  if (!contents) return
+  if (!document || !document?.body) return
+  if (!document.body?.fesd) document.body.fesd = {}
 
-    for (const [key, value] of Object.entries(contents)) {
-        document.body.fesd[key] = value
-    }
+  for (const [key, value] of Object.entries(contents)) {
+    document.body.fesd[key] = value
+  }
 
-    return document.body.fesd
+  return document.body.fesd
+}
+
+// collapse
+export function collapseEvent(clickTarget, parentBox, anchor = false, single = false) {
+  if (!clickTarget || !parentBox) return;
+
+  const $clickTarget = $(clickTarget);
+  const $parentBoxes = $(parentBox);
+  if (!$clickTarget.length || !$parentBoxes.length) return;
+
+  $clickTarget.on('click', function () {
+    const $parent = $(this).closest(parentBox);
+    if (!$parent.length) return;
+    if ($parent.hasClass('open')) return $parent.removeClass('open');
+
+    $parent.addClass('open');
+    if (single) $parentBoxes.not($parent).removeClass('open');
+    if (anchor) setTimeout(() => Anchor4.run({ target: $parent[0] }), 500);
+  });
+}
+
+export function noContentCheck() {
+  const params = new URLSearchParams(document.location.search);
+  const val = params.get('debug');
+  const contentBox = $('[data-content]')
+  const noContentBox = $('[data-noContent]')
+  if (!val || !contentBox || !noContentBox) return
+  if (val.toLowerCase() === 'nocontent') {
+    contentBox.hide();
+    noContentBox.show();
+  }
 }

package/src/assets/js/commons/pages/index.js

@@ -0,0 +1,2 @@
+export * from "./page.error"
+export * from "./page.cookiePolicy";

package/src/assets/js/commons/pages/page.cookiePolicy.js

@@ -0,0 +1,37 @@
+export const cookiePolicy = () => {
+  const $cookiePolicy = $(".cookie-check"); 
+  if (!$cookiePolicy.length) return;
+  
+  const $agreeBtn = $cookiePolicy.find(".agree");
+  const $closeBtn = $cookiePolicy.find(".close");
+
+  const firstEnterDetect = () => {
+    // 請記得更改 cookie 存入的值
+    const agreeLocal = localStorage.getItem("frameworkCookie-agree");
+    const agreeSession = sessionStorage.getItem("frameworkCookie-agree");
+  
+    if (agreeLocal !== "true" && agreeSession !== "false") {
+      $cookiePolicy.addClass("first-enter");
+      setTimeout(() => {
+        $cookiePolicy.addClass("show");
+      }, 800);
+    }
+  };
+  
+  // 點擊事件
+  const clickEvent = () => {
+    $agreeBtn.on("click", () => {
+      $cookiePolicy.addClass("agree");
+      localStorage.setItem("frameworkCookie-agree", "true");
+    });
+  
+    $closeBtn.on("click", () => {
+      $cookiePolicy.addClass("hidden");
+      sessionStorage.setItem("frameworkCookie-agree", "false");
+    });
+  };
+
+  // 執行事件
+  firstEnterDetect();
+  clickEvent();
+};

package/src/assets/js/commons/utils.js

@@ -1,32 +0,0 @@
-import { Anchor4 } from '@xwadex/fesd';
-
-// collapse
-export function collapseEvent(clickTarget, parentBox, anchor = false, single = false) {
-  if (!clickTarget || !parentBox) return;
-
-  const $clickTarget = $(clickTarget);
-  const $parentBoxes = $(parentBox);
-  if (!$clickTarget.length || !$parentBoxes.length) return;
-
-  $clickTarget.on('click', function () {
-    const $parent = $(this).closest(parentBox);
-    if (!$parent.length) return;
-    if ($parent.hasClass('open')) return $parent.removeClass('open');
-
-    $parent.addClass('open');
-    if (single) $parentBoxes.not($parent).removeClass('open');
-    if (anchor) setTimeout(() => Anchor4.run({ target: $parent[0] }), 500);
-  });
-}
-
-export function noContentCheck() {
-  const params = new URLSearchParams(document.location.search);
-  const val = params.get('debug');
-  const contentBox = $('[data-content]')
-  const noContentBox = $('[data-noContent]')
-  if (!val || !contentBox || !noContentBox) return
-  if (val.toLowerCase() === 'nocontent') {
-    contentBox.hide();
-    noContentBox.show();
-  }
-}

package/src/layouts/_template.pug

@@ -40,6 +40,10 @@ html(lang="zh-Hant-TW" data-overlayscrollbars-initialize)
       // 頁腳
       block footer
         include ./_footer.pug
+      
+      // cookie
+      block cookie
+        include ./components/_cookiePolicy.pug
 
       modern-modal(data-modal-id="my-modal" data-modal-animate="clip-right")
         .close-btn(data-modal-close)

package/src/layouts/components/_cookiePolicy.pug

@@ -0,0 +1,9 @@
+.cookie-check
+  .cookie-main
+    .cookie-container 
+      .title-block
+        p.title Cookie 
+        p.text Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      .button-group
+        .cookie-btn.agree Agree
+        .cookie-btn.close Disagree