create-fesd-app 1.0.0-bate.93 → 1.0.0-bate.95

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "create-fesd-app",
-  "version": "1.0.0-bate.93",
+  "version": "1.0.0-bate.95",
   "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
   "bin": {
     "create-fesd-app": "bin/create-fesd-app.mjs"
   },
@@ -17,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",
@@ -44,10 +49,5 @@
     "vite": "^5.4.8",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-imagemin": "^0.6.1"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
   }
-}
+}

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
 
 /////////////////////////////////////////////
 /////////////  [ 個別類型設定 ]  /////////////
@@ -214,10 +228,12 @@
       &[mobile-rwd="on"]
         ._imgCover
           order: 1
+          margin-bottom: 0
 
   &.typeD
     ._imgCover
-      margin-bottom: #{-$cover-TB-gap + $img-cover-TB-gap}
+      // margin-bottom: #{-$cover-TB-gap + $img-cover-TB-gap}
+      margin-bottom: #{$img-cover-TB-gap - (-$cover-TB-gap + $img-cover-TB-gap)}
     ._wordCover
       margin: 0
     +rwdmax($basic_rwd)
@@ -237,6 +253,9 @@
         width: 100%
       ._wordCover
         margin-top: 0
+      &[mobile-rwd="on"]
+        ._H
+          margin-top: 0
   &.typeDL
     ._H
       order: 1
@@ -468,11 +487,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
@@ -568,6 +587,8 @@
   &[img-swiper="on"]
     ._imgCover
       position: relative
+      ._cover
+        margin-bottom: 0
       .swiper-button-cover
         &:before
           display: block
@@ -590,9 +611,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 +622,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 +632,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/error/404/page.js

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

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

@@ -33,8 +33,8 @@ swiperHandler.banner = function () {
     init() {
       console.log('swiper init!!');
     },
-    slideChangeTransitionStart() {
-      isVideo(this);
+    slideChangeTransitionStart(swiper) {
+      isVideo(swiper);
     },
   };
   const banner = new SwiperV11('.swiper', { ...bannerConfig, on: bannerEvents });

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,29 +11,32 @@ import {
   scrollUnlock
 } from '@xwadex/fesd/tools';
 import { toBackend } from "@/commons/methods";
+import { cookiePolicyInit } from "@/commons/pages";
 import { lazyLoadImg } from '@/plugins';
 import { navbar } from '@/ui';
 
+const firstEntryHandler = {}
+
 // 進場
-const firstEntry = {
-  init() {
-    const firstEntry = localStorage.getItem('firstEntry');
-    if (!firstEntry) this.saveState()
-    this.active()
-  },
-  saveState() {
-    // 進場動畫...
-    localStorage.setItem('firstEntry', true);
-  },
-  active() {
-    $('.main-wrapper').addClass('show');
-    setTimeout(() => {
-      new Aost4('[data-aost]', {
-        start: 95,
-      });
-    }, 100);
-  },
-};
+firstEntryHandler.saveState = () => {
+  // 進場動畫...
+  localStorage.setItem('firstEntry', true);
+}
+
+firstEntryHandler.active = () => {
+  $('.main-wrapper').addClass('show');
+  setTimeout(() => {
+    new Aost4('[data-aost]', {
+      start: 95,
+    });
+  }, 100);
+}
+
+firstEntryHandler.init = () => {
+  const firstEntry = localStorage.getItem('firstEntry');
+  if (!firstEntry) firstEntryHandler.saveState()
+    firstEntryHandler.active()
+}
 
 toBackend({ scrollLock, scrollUnlock });
 
@@ -48,8 +51,9 @@ export const inits = () => {
   new ImageValidate();
   // uiInit
   navbar.init();
+  cookiePolicyInit();
   // coding...
-  firstEntry.init();
+  firstEntryHandler.init();
 }
 
 //Don't Move and Delete!!!

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,51 @@
+const cookiePolicy = {};
+
+// 首次進入執行
+cookiePolicy.firstEnterDetect = () => {
+  const { $cookiePolicy } = cookiePolicy;
+
+  // 請記得更改 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);
+  }
+};
+
+// 點擊事件
+cookiePolicy.clickEvent = () => {
+  const { $cookiePolicy, $agreeBtn, $closeBtn } = cookiePolicy;
+
+  $agreeBtn.on("click", () => {
+    $cookiePolicy.addClass("agree");
+    localStorage.setItem("frameworkCookie-agree", "true");
+    sessionStorage.setItem("frameworkCookie-agree", "true");
+  });
+
+  $closeBtn.on("click", () => {
+    $cookiePolicy.addClass("hidden");
+    sessionStorage.setItem("frameworkCookie-agree", "false");
+  });
+};
+
+cookiePolicy.init = () => {
+  const $cookiePolicy = $(".cookie-check"); 
+
+  if (!$cookiePolicy.length) return;
+
+  cookiePolicy.$cookiePolicy = $cookiePolicy;
+  cookiePolicy.$agreeBtn = $cookiePolicy.find(".agree");
+  cookiePolicy.$closeBtn = $cookiePolicy.find(".close");
+
+  // 執行事件
+  cookiePolicy.firstEnterDetect();
+  cookiePolicy.clickEvent();
+};
+
+export const cookiePolicyInit = () => {
+  cookiePolicy.init();
+};

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