create-fesd-app 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fesd-app",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.10",
     "@tailwindcss/vite": "^4.1.10",
-    "@xwadex/fesd": "0.0.44",
+    "@xwadex/fesd": "0.0.46",
     "ansi-colors": "^4.1.3",
     "chalk": "^5.3.0",
     "clsx": "^2.1.1",

package/src/assets/css/base/_common.sass

@@ -31,6 +31,9 @@ input
 [data-noContent]
   display: none
 
+[data-cookie]
+  cursor: pointer
+
 .lazy
   opacity: 0
   &.loaded

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

@@ -97,7 +97,6 @@
       display: flex
       align-items: center
       gap: 15px
-      cursor: pointer
   +rwdmax(767)
     .cookie-main
       padding: 50px 25px
@@ -309,7 +308,7 @@
         color: #4B4B4B
         pointer-events: none
         transform: translate3d(calc(-100% - 10px),0,0)
-        content: "拒絕"
+        content: var(--switch-closeText)
       &::before 
         content: ''
         position: absolute
@@ -331,7 +330,7 @@
       transform: translateX(18px)
       background: #fff
     input:checked + .switch::after 
-      content: "啟用"
+      content: var(--switch-openText)
     input:checked + .switch:active::before 
       box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1)
 

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

@@ -20,7 +20,7 @@ nav.navbar
       align-items: center
       margin-left: auto
       li
-        a
+        a, div
           padding: 0 10px
           +rwdmax(575)
             padding: 0 8px

package/src/assets/js/commons/cookies/cookieData.js

@@ -1,11 +1,10 @@
 // 此處為 demo 資料, 後端會用相同資料結構洗資料在 #_wcookie 上
 // 給後端: 基本上進階版細項開關不開, 有需求才開; 若開啟進階版細項, 大分類的 close 開關預設會無效, 會以判斷細項是否有開啟 or 全關為主
 // close: 0 -> 開啟; close: 1 -> 關閉
+// 說明文件 
 export const cookieData = [
   {
-    multiType: true, // 進階版是否開啟個別選項設定
-    title: "您的 Cookie 偏好設定",
-    text: "我們使用不同類型的 Cookies 來優化您在我們的網站上的體驗，點擊下面類別以了解其目的與更多訊息。<br>您可以選擇允許的 Cookies 類型，也可以隨時更改您的偏好設定。<br>提醒您，停用 Cookies 可能會影響您在網站上的體驗，您可以瀏覽我們的隱私權政策，進一步了解我們如何使用 Cookie。",
+    multiType: true, // 進階版時是否開啟個別選項設定
     options: [
       {
         key: "required",

package/src/assets/js/commons/cookies/cookieElement.js

@@ -159,7 +159,7 @@ export const cookieStep2ListCollapseEl = (
   num
 )=> {
   const isDisabled = li.disabled ? " disabled" : ""
-  const isListChecked = cookieNewObj[parentKey].list[li.key].close == 0 ? "checked" : ""
+  const isListChecked = cookieNewObj[parentKey].list?.[li.key].close == 0 ? "checked" : ""
   return `
     <div class="list collapseItem list-option ${isListChecked}" data-collapse>
       <div class="title collapseTitle" data-collapse-click>
@@ -223,7 +223,7 @@ export const cookieStep2ListNormalEl = (
   index,
   parentKey
 ) => {
-  const isListChecked = cookieNewObj[parentKey].list[li.key].close == 0 ? "checked" : ""
+  const isListChecked = cookieNewObj[parentKey].list?.[li.key].close == 0 ? "checked" : ""
   return `
     <div class="list list-option ${isListChecked}">
       <div class="title">

package/src/assets/js/commons/cookies/cookiePolicy.js

@@ -1,13 +1,13 @@
 import {
   methods
-} from "@/commons";
+} from "@/commons"
 import {
   scrollLock,
   scrollUnlock
-} from '@xwadex/fesd/tools';
-import Cookies from "js-cookie";
-import { OverlayScrollbars } from 'overlayscrollbars';
-import { cookieData } from "./cookieData";
+} from '@xwadex/fesd/tools'
+import Cookies from "js-cookie"
+import { OverlayScrollbars } from 'overlayscrollbars'
+import { cookieData } from "./cookieData"
 import { cookieStep1El, cookieStep2TittleEl, cookieStep2ContentEl } from "./cookieElement"
 
 // 基礎版 cookie
@@ -17,103 +17,87 @@ const cookieAdvanced = {}
 const cookieSetting = {}
 const cookieElements = {}
 // 設定一個預存空間
-let cookieNewObj = {};
+let cookieNewObj = {}
 
 // 簡易版 cookie 設定
-cookieBasic.basicCookiePolicy = () => {
-  const $cookiePolicy = $(".cookie-check"); 
-  if (!$cookiePolicy.length) return;
-  
-  const $agreeBtn = $cookiePolicy.find(".agree");
-  const $closeBtn = $cookiePolicy.find(".close");
+cookieBasic.basicCookiePolicy = (el) => {
+  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");
-  
+    const agreeLocal = localStorage.getItem(el)
+    const agreeSession = sessionStorage.getItem(el)
+
     if (agreeLocal !== "true" && agreeSession !== "false") {
-      $cookiePolicy.addClass("first-enter");
+      $cookiePolicy.addClass("first-enter")
       setTimeout(() => {
-        $cookiePolicy.addClass("show");
-      }, 800);
+        $cookiePolicy.addClass("show")
+      }, 800)
     }
-  };
-  
+  }
+
   // 點擊事件
   const clickEvent = () => {
     $agreeBtn.on("click", () => {
-      $cookiePolicy.addClass("agree");
-      localStorage.setItem("frameworkCookie-agree", "true");
-      // 執行後端方法
-      if (typeof window._wdSetting === 'function') {
-        window._wdSetting()
-      }
-    });
-  
-    $closeBtn.on("click", () => {
-      $cookiePolicy.addClass("hidden");
-      sessionStorage.setItem("frameworkCookie-agree", "false");
-      if (typeof window._wdSetting === 'function') {
-        window._wdSetting()
-      }
-    });
+      $cookiePolicy.addClass("agree")
+      localStorage.setItem(el, "true")
+    })
 
-    // 開啟 cookie 視窗按鈕
-    $("[data-cookie-open]").on("click", function() {
-      $cookiePolicy.addClass("first-enter");
-      $cookiePolicy.removeClass("agree");
-      $cookiePolicy.removeClass("hidden");
-      setTimeout(() => {
-        $cookiePolicy.addClass("show");
-      }, 800);
+    $closeBtn.on("click", () => {
+      $cookiePolicy.addClass("hidden")
+      sessionStorage.setItem(el, "false")
     })
-  };
+  }
 
   // 執行事件
-  firstEnterDetect();
-  clickEvent();
-};
+  firstEnterDetect()
+  clickEvent()
+}
 
 // 產生新物件
 cookieAdvanced.newObj = () => {
-  if (Cookies.get('_wd') !== undefined) {
+  if (Cookies.get('_wd') !== undefined && $("#_wcookie").val()) {
     const cloudDdata = JSON.parse(Cookies.get('_wd'))
     cookieNewObj = { ...cloudDdata }
   } else {
     const data = $("#_wcookie").val() ? JSON.parse($("#_wcookie").val())[0] : cookieData[0]
-    const options = data?.options;
+    const options = data?.options
+
     if (options) {
       // 判斷是否全開 or 全關 (排除 required)
-      const nonRequiredOptions = options.filter(opt => opt.key !== 'required');
-      const allNonRequiredAreFalse = nonRequiredOptions.every(opt => opt.close === 1);
-      const globalCloseValue = allNonRequiredAreFalse == 1 ? 1 : 0;
-      
-      cookieNewObj.close = globalCloseValue;
+      const nonRequiredOptions = options.filter(opt => opt.key !== 'required')
+      const allNonRequiredAreFalse = nonRequiredOptions.every(opt => opt.close === 1)
+      const globalCloseValue = allNonRequiredAreFalse == 1 ? 1 : 0
+
+      cookieNewObj.close = globalCloseValue
 
       const categoriesObject = options.reduce((acc, option) => {
-        const topLevelKey = option.key;
-        const dataItems = option.data?.items;
+        const topLevelKey = option.key
+        const dataItems = option.data?.items
 
-        acc[topLevelKey] = { close: option.close };
+        acc[topLevelKey] = { close: option.close }
 
         if (data.multiType && dataItems !== undefined && dataItems.length > 0) {
-          acc[topLevelKey].list = {};
+          acc[topLevelKey].list = {}
 
           dataItems.forEach(item => {
             item.list?.forEach(listItem => {
               if (listItem.key) {
                 acc[topLevelKey].list[listItem.key] = {
                   close: listItem.close
-                };
+                }
               }
-            });
-          });
+            })
+          })
         }
-        return acc;
-      }, {});
+        return acc
+      }, {})
       // 若無 cookie 紀錄可抓, 直接新建一個新的物件預存
-      Object.assign(cookieNewObj, categoriesObject);
+      Object.assign(cookieNewObj, categoriesObject)
     }
   }
 }
@@ -129,9 +113,6 @@ export const generateHtmlString = (target, fn) => {
 
 // 產資料結構
 cookieAdvanced.dataAppend = () => {
-  const $block = $(".cookie-setting")
-  if (!$block.length) return
-
   const val = $("#_wcookie").val()
   const data = val ? JSON.parse(val)[0] : cookieData[0]
   const $step1 = $(".setting-container[t4-id='step1']")
@@ -142,7 +123,7 @@ cookieAdvanced.dataAppend = () => {
     generateHtmlString(data.options, cookieElements.getStep1Element)
   )
 
-  const step2OpenClick = function() {
+  const step2OpenClick = function () {
     const index = $(this).closest(".item").data("index")
     const opt = data.options[index]
     const items = opt.data?.items || []
@@ -153,21 +134,23 @@ cookieAdvanced.dataAppend = () => {
     )
     // 產 step2 下方結構
     $step2.find(".content-block").html(
-      cookieStep2ContentEl(items,cookieNewObj,data,opt)
+      cookieStep2ContentEl(items, cookieNewObj, data, opt)
     )
     // 換頁
-    document.body.fesd.cookieGoToNext();
+    document.body.fesd.cookieGoToNext()
     // 重綁收合
     methods.collapseEvent(
-      '[data-collapse-click]', 
-      '[data-collapse]', 
-      '[data-collapse-content]', 
-      false, 
+      '[data-collapse-click]',
+      '[data-collapse]',
+      '[data-collapse-content]',
+      false,
       true
     )
   }
   // step2 點擊打開
-  $step1.off('click.step2Open', '[data-open]').on('click.step2Open', '[data-open]', step2OpenClick)
+  $step1
+    .off('click.step2Open', '[data-open]')
+    .on('click.step2Open', '[data-open]', step2OpenClick)
 }
 
 // switch 的一些狀態
@@ -176,178 +159,256 @@ cookieAdvanced.switchState = () => {
   const $step2contentSwitch = `[t4-id='step2'] .content-block input[type="checkbox"][data-parent][data-name]:not(.disabled)`
   const $step2topSwitch = `[t4-id='step2'] .top-block input[type="checkbox"][data-name]:not(.disabled)`
 
-  let isSyncing = false 
+  let isSyncing = false
 
   // 開關同步連動控制
-  $(document).off('change.switch').on('change.switch', 'input[type="checkbox"][data-name]:not(:disabled)', function () { 
-    if (isSyncing) return
-    isSyncing = true
-
-    const $this = $(this)
-    const key = $this.data('name') 
-    const val = $this.prop('checked') 
-    
-    $(`input[type="checkbox"][data-name="${key}"]`).not(this).prop('checked', val)
-    if (!val) {
-      $($this).parents(".main-option,.list-option").removeClass("checked")
-    } else {
-      $($this).parents(".main-option,.list-option").addClass("checked")
-    }
-    isSyncing = false
-  })
+  $(document)
+    .off('change.switch')
+    .on('change.switch', 'input[type="checkbox"][data-name]:not(:disabled)', function () {
+      if (isSyncing) return
+      isSyncing = true
+
+      const $this = $(this)
+      const key = $this.data('name')
+      const val = $this.prop('checked')
+
+      $(`input[type="checkbox"][data-name="${key}"]`).not(this).prop('checked', val)
+      if (!val) {
+        $($this).parents(".main-option,.list-option").removeClass("checked")
+      } else {
+        $($this).parents(".main-option,.list-option").addClass("checked")
+      }
+      isSyncing = false
+    })
 
   // step1 變動 → 更新 cookieNewObj
-  $(document).off('change.cookieStep1').on('change.cookieStep1', `[t4-id='step1'] input[type="checkbox"][data-name]`, function () {
-    if (isSyncing) return
-    isSyncing = true
-
-    const $this = $(this)
-    const key = $this.data("name")
-    const val = $this.prop('checked') ? 0 : 1
-
-    if (cookieNewObj[key]) {
-      cookieNewObj[key].close = val
-      const targetList = cookieNewObj[key].list;
-      if (targetList && typeof targetList === 'object') {
-        Object.keys(targetList).forEach(childKey => {
-          if (targetList[childKey].close !== undefined) {
-            targetList[childKey].close = val;
-          }
-        });
-      } 
-    }
+  $(document)
+    .off('change.cookieStep1')
+    .on('change.cookieStep1', `[t4-id='step1'] input[type="checkbox"][data-name]`, function () {
+      if ($(this).closest("[t4-id='step2']").length) return
+      if (isSyncing) return
+      isSyncing = true
+
+      const $this = $(this)
+      const key = $this.data("name")
+      const val = $this.prop('checked') ? 0 : 1
+
+      if (cookieNewObj[key]) {
+        cookieNewObj[key].close = val
+        const targetList = cookieNewObj[key].list
+        if (targetList && typeof targetList === 'object') {
+          Object.keys(targetList).forEach(childKey => {
+            if (targetList[childKey].close !== undefined) {
+              targetList[childKey].close = val
+            }
+          })
+        }
+      }
     isSyncing = false
   })
 
-  $(document).off("change.step2content").on("change.step2content", $step2contentSwitch, function () {
-    if (isSyncing) return
-    isSyncing = true
-
-    const key = $(this).data("name")
-    const parent = $(this).data("parent")
-    const val = $(this).prop('checked') ? 0 : 1
-    const $step1Switch = $(`[t4-id='step1'] input[type="checkbox"][data-name='${parent}']:not(.disabled)`)
-    const total = $($step2contentSwitch).length
-    const checked = $($step2contentSwitch).filter(':checked').length
-    
-
-    // 改變 cookieNewObj 的值
-    cookieNewObj[parent].list[key].close = val
-
-    // Step2 子項全部打開
-    if (checked === total || checked > 0) {
-      cookieNewObj[parent].close = 0
-      $($step2topSwitch).prop("checked", true)
-      $step1Switch.prop("checked", true)
-      $step2.find(".main-option").addClass("checked")
-    }
-    
-    // Step2 子項全部關閉
-    else if (checked === 0) {
-      cookieNewObj[parent].close = 1
-      $($step2topSwitch).prop("checked", false)
-      $step1Switch.prop("checked", false)
-      $step2.find(".main-option").removeClass("checked")
-    }
+  $(document)
+    .off("change.step2content")
+    .on("change.step2content", $step2contentSwitch, function () {
+      // if ($(this).closest("[t4-id='step2']").length) return
+      if (isSyncing) return
+      isSyncing = true
+
+      const key = $(this).data("name")
+      const parent = $(this).data("parent")
+      const val = $(this).prop('checked') ? 0 : 1
+      const $step1Switch = $(`[t4-id='step1'] input[type="checkbox"][data-name='${parent}']:not(.disabled)`)
+      const total = $($step2contentSwitch).length
+      const checked = $($step2contentSwitch).filter(':checked').length
+
+      // 改變 cookieNewObj 的值
+      cookieNewObj[parent].list[key].close = val
+
+      // Step2 子項全部打開
+      if (checked === total || checked > 0) {
+        cookieNewObj[parent].close = 0
+        $($step2topSwitch).prop("checked", true)
+        $step1Switch.prop("checked", true)
+        $step2.find(".main-option").addClass("checked")
+      }
 
-    isSyncing = false
-  })
+      // Step2 子項全部關閉
+      else if (checked === 0) {
+        cookieNewObj[parent].close = 1
+        $($step2topSwitch).prop("checked", false)
+        $step1Switch.prop("checked", false)
+        $step2.find(".main-option").removeClass("checked")
+      }
 
-  $(document).off("change.step2top").on("change.step2top", $step2topSwitch, function () {
-    if (isSyncing) return
-    isSyncing = true
-    const $this = $(this)
-    const key = $this.data("name")
-    const isChecked = $this.prop("checked")
-    const detectVal = $this.prop('checked') 
-    const val = isChecked ? 0 : 1
-
-    // 改所有子項
-    $($step2contentSwitch).prop('checked', isChecked)
-    if (!detectVal) {
-      $step2.find(".list-option").removeClass("checked")
-    } else {
-      $step2.find(".list-option").addClass("checked")
-    }
-    // 改 cookie main
-    if (cookieNewObj[key]) {
-      const list = cookieNewObj[key].list
-      cookieNewObj[key].close = val
-      if (list) {
-        Object.keys(list).forEach(childKey => {
-          list[childKey].close = val
-        })
+      isSyncing = false
+    })
+
+  $(document)
+    .off("change.step2top")
+    .on("change.step2top", $step2topSwitch, function () {
+      if (isSyncing) return
+      isSyncing = true
+      const $this = $(this)
+      const key = $this.data("name")
+      const isChecked = $this.prop("checked")
+      const detectVal = $this.prop('checked')
+      const val = isChecked ? 0 : 1
+
+      // 改所有子項
+      $($step2contentSwitch).prop('checked', isChecked)
+      if (!detectVal) {
+        $step2.find(".list-option").removeClass("checked")
+      } else {
+        $step2.find(".list-option").addClass("checked")
       }
-    }
-    isSyncing = false
-  })
+      // 改 cookie main
+      if (cookieNewObj[key]) {
+        const list = cookieNewObj[key].list
+        cookieNewObj[key].close = val
+        if (list) {
+          Object.keys(list).forEach(childKey => {
+            list[childKey].close = val
+          })
+        }
+      }
+      isSyncing = false
+    })
 }
 
 // 存 cookie
 cookieAdvanced.cookieSaveFn = () => {
   const nonRequiredValues = Object.entries(cookieNewObj)
-    .filter(([key]) => key !== 'required' && key !== 'close')
-    .map(([, value]) => value);
+    .filter(
+      ([key]) => key !== 'required' && key !== 'close'
+    )
+    .map(
+      ([, value]) => value
+    )
 
-  const allNonRequiredAreClosed = nonRequiredValues.every(opt => opt.close === 1);
-  const globalCloseValue = allNonRequiredAreClosed ? 1 : 0;
+  const allNonRequiredAreClosed = nonRequiredValues.every(opt => opt.close === 1)
+  const globalCloseValue = allNonRequiredAreClosed ? 1 : 0
 
   // 判斷設定第一層的 close 值
-  cookieNewObj.close = globalCloseValue;
+  cookieNewObj.close = globalCloseValue
 
   // 存入 cookie
   Cookies.set('_wd', JSON.stringify(cookieNewObj), {
     expires: 180,
     path: '/',
     sameSite: true,
-  });
+  })
 }
 
 // 點擊方法
-cookieAdvanced.clickEvent = () => {
+cookieAdvanced.clickEvent = (el) => {
   const $settingBlock = $(".cookie-setting")
+  const $cookiePolicy = $(".cookie-check")
 
-  // 打開進階版 cookie 介面
-  $(document).on("click",".cookie-setting-btn", () => cookieSetting.openEvent($settingBlock));
-  // 全開
-  $(document).on('click',"[data-cookie-all]", cookieSetting.enableAll)
-  // 儲存
-  $(document).on('click',"[data-cookie-save]", cookieAdvanced.cookieSaveFn)
-  // 關閉視窗
-  $(document).on('click',"[data-cookie-close]", () => cookieSetting.closeEvent($settingBlock))
-  // 我拒絕
-  $(document).on('click',"[data-cookie-reject]", function() {
-    cookieSetting.rejectAll()
-    cookieAdvanced.cookieSaveFn()
-  })
+  let scrollInstance = null
+
+  $(document)
+    .off("click.cookie", "[data-cookie]")
+    .on("click.cookie", "[data-cookie]", function (e) {
+      const $this = $(this)
+  
+      // 打開 cookie 介面
+      if ($this.is("[data-cookie-open]")) {
+        const mode = $this.attr("data-cookie-open")
+        const targets = new Set(mode === "all" ? ["advance", "basic"] : [mode])
+
+        const openAdvance = () => {
+          cookieSetting.openEvent($settingBlock, () => {
+            if (scrollInstance) return
+            const scrollerEl = $settingBlock.find(".scroller")[0]
+            if (scrollerEl) scrollInstance = OverlayScrollbars(scrollerEl, {})
+          })
+        }
+
+        const openBasic = () => {
+          $cookiePolicy
+            .addClass("first-enter")
+            .removeClass("agree hidden")
+
+          // 如果你只是要等動畫再 show，建議先清掉舊的 timer，避免連點造成閃爍
+          clearTimeout(cookieAdvanced._basicTimer)
+          cookieAdvanced._basicTimer = setTimeout(() => {
+            $cookiePolicy.addClass("show")
+          }, 800)
+        }
+
+        if (targets.has("advance")) openAdvance()
+        if (targets.has("basic")) openBasic()
+      }
+
+      // 啟用進階版 cookie 所有選項
+      if ($this.is("[data-cookie-all]")) {
+        cookieSetting.enableAll()
+      }
+
+      // 關閉進階版 cookie 所有選項
+      if ($this.is("[data-cookie-reject]")) {
+        cookieSetting.rejectAll()
+        cookieAdvanced.cookieSaveFn()
+      }
+
+      // 關閉進階版 cookie 視窗
+      if ($this.is("[data-cookie-close]")) {
+        const mode = $this.attr("data-cookie-close")
+        const targets = new Set(mode === "all" ? ["basic", "advance"] : [mode])
+
+        const closeAdvance = () => {
+          cookieSetting.closeEvent($settingBlock)
+        }
+
+        const closeBasic = () => {
+          $cookiePolicy.addClass("hidden")
+          sessionStorage.setItem(el, "true")
+        }
+
+        if (targets.has("advance")) closeAdvance()
+        if (targets.has("basic")) closeBasic()
+      }
+
+      // 儲存, 放在預存當前選項的按鈕上（功能：將目前選項紀錄預存至 cookie 中, 尚未真正啟用）
+      if ($this.is("[data-cookie-save]")) {
+        cookieAdvanced.cookieSaveFn()
+      }
+
+      // 放在真正要啟動 cookie 功能的儲存按鈕上（功能：依照目前 save 的 cookie 選項, 執行後端程式）
+      if ($this.is("[data-cookie-run]")) {
+        if (typeof window._wdSetting === "function") {
+          window._wdSetting()
+        }
+      }
+    })
 }
 
 // ** --- 工具們 --- **
 // cookie 開啟方法
-cookieSetting.openEvent = (el) => {
+cookieSetting.openEvent = (el, scrollInit) => {
   $(el).addClass("active")
   setTimeout(() => {
     $(el).addClass("show")
-    scrollLock();
-    const scrollers = $(".cookie-setting").find('.scroller')[0]
-    OverlayScrollbars(scrollers, {})
-  }, 500);
+    scrollLock()
+    scrollInit?.()
+  }, 500)
 }
 
 // cookie 關閉方法
 cookieSetting.closeEvent = (el) => {
   $(el).removeClass("show")
+
   setTimeout(() => {
     $(el).removeClass("active")
-    scrollUnlock();
-  }, 500);
+    scrollUnlock()
+  }, 500)
 }
 
 // 全部打開
 cookieSetting.enableAll = () => {
   $(`input[type="checkbox"][data-name]:not(.disabled)`).prop('checked', true).trigger('change')
   $('.main-option:not([data-name="required"]),.list-option:not([data-name="required"])').addClass("checked")
-  cookieNewObj.close == 0
+  cookieNewObj.close = 0
   Object.keys(cookieNewObj).forEach(data => {
     cookieNewObj[data].close == 0
   })
@@ -365,73 +426,73 @@ cookieSetting.rejectAll = () => {
 
 // 判斷該分類底下細項按鈕狀態
 cookieSetting.hasAnyListItemsOpen = (key) => {
-  const category = cookieNewObj[key];
-  if (!category) return false;
+  const category = cookieNewObj[key]
+  if (!category) return false
 
-  const targetList = category.list;
+  const targetList = category.list
 
   // 沒有子 list，就看自己這一層
   if (!targetList) {
-    return category.close === 0;
+    return category.close === 0
   }
 
   // 有子 list，就看子項目有沒有任何一個是 open
-  return Object.values(targetList).some(item => item?.close === 0);
-};
+  return Object.values(targetList).some(item => item?.close === 0)
+}
 
 cookieSetting.isCategoryChecked = (key) => {
-  if (key === "required") return true;
-  return cookieSetting.hasAnyListItemsOpen(key);
-};
+  if (key === "required") return true
+  return cookieSetting.hasAnyListItemsOpen(key)
+}
 
 // 共用：產生 step 元件用的 getter
 const createStepElement = (templateFn) => {
   return (opt, index) => {
-    const isDisabled = opt.disabled ? "disabled" : "";
+    const isDisabled = opt.disabled ? "disabled" : ""
     const isChecked = () =>
-      cookieSetting.isCategoryChecked(opt.key) ? "checked" : "";
+      cookieSetting.isCategoryChecked(opt.key) ? "checked" : ""
 
-    return templateFn(opt, index, isDisabled, isChecked);
-  };
-};
+    return templateFn(opt, index, isDisabled, isChecked)
+  }
+}
 
 // step 1 結構
-cookieElements.getStep1Element = createStepElement(cookieStep1El);
+cookieElements.getStep1Element = createStepElement(cookieStep1El)
 // step 2 上面結構
-cookieElements.getStep2TopElement = createStepElement(cookieStep2TittleEl);
+cookieElements.getStep2TopElement = createStepElement(cookieStep2TittleEl)
 
 // 頁籤
 cookieSetting.goToTab = (el = true) => {
   const tab = $('tab-el[t4-name="cookie-tab"]')
   const $step2 = $(".setting-container[t4-id='step2']")
   if (el) {
-    tab[0].goNext();
+    tab[0].goNext()
   } else {
-    tab[0].goPrev();
-    $step2.find(".top-block, .content-block").empty();
+    tab[0].goPrev()
+    $step2.find(".top-block, .content-block").empty()
   }
 }
 
-methods.toBackend({ 
+methods.toBackend({
   getCookieValue: (el) => Cookies.get(el),
   cookieGoToNext: (el) => cookieSetting.goToTab(el),
-});
+})
 
 // init
-cookieAdvanced.init = () => {
-  cookieAdvanced.newObj();
-  cookieAdvanced.dataAppend();
-  // cookieAdvanced.initialState();
-  cookieAdvanced.clickEvent();
-  cookieAdvanced.cookieSaveFn();
-  cookieAdvanced.switchState();
+cookieAdvanced.init = (el) => {
+  cookieAdvanced.newObj()
+  cookieAdvanced.dataAppend()
+  // cookieAdvanced.initialState()
+  cookieAdvanced.clickEvent(el)
+  cookieAdvanced.cookieSaveFn()
+  cookieAdvanced.switchState()
 }
 
 // 預設為 false -> 基礎版, true -> 進階版
-export const init = (isOpenAdvanced = false) => {
+export const init = (isOpenAdvanced = false, el) => {
   // cookie 基本版
-  cookieBasic.basicCookiePolicy();
+  cookieBasic.basicCookiePolicy(el)
   if (!isOpenAdvanced) return
   // cookie 進階版
-  cookieAdvanced.init();
+  cookieAdvanced.init(el)
 }

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

@@ -54,8 +54,8 @@ export const inits = () => {
   new ImageValidate();
   // uiInit
   navbar.init();
-  // 預設為 false -> 基礎版, true -> 進階版
-  cookie.init(true);
+  // 預設為 false -> 基礎版, true -> 進階版, 各專案 key 名要記得更改
+  cookie.init(true,"frameworkCookie-agree");
   // coding...
   firstEntryHandler.init();
 }

package/src/layouts/_navbar.pug

@@ -12,7 +12,9 @@ nav.navbar
       li
         a(href="./play.html") Play
       li
-        a(href="javascript:;" data-cookie-open) cookie 設定
+        div(data-cookie data-cookie-open="basic") cookie 設定
+      li
+        div(data-cookie data-cookie-open="advance") cookie 進階設定
       li
         a(href="javascript:;" data-modal-target="my-modal") 燈箱
       li

package/src/layouts/_template.pug

@@ -52,3 +52,8 @@ html(lang="zh-Hant-TW" data-overlayscrollbars-initialize)
       modern-modal(data-modal-id="my-modal" data-modal-animate="clip-right")
         .close-btn(data-modal-close)
         .title Modal4
+        .photo-box(video-target video-id="5bMdjkfvONE" video-type="youtube" video-mode="onPage")
+          picture
+            source(srcset="https://cdn.wdd.idv.tw/image/video-cover02.webp" type="image/webp")
+            source(srcset="https://cdn.wdd.idv.tw/image/video-cover02.jpg" type="image/jpeg")
+            img(src="https://cdn.wdd.idv.tw/image/video-cover02.jpg" alt="")

package/src/layouts/components/_cookiePolicy.pug

@@ -1,4 +1,12 @@
 // 基本版 cookie
+//- .close & .agree 按鈕名字需保留, 不可更改
+//- 若需要以下按鈕功能, 按鈕必須加上 [data-cookie]
+//- [data-cookie-open="xxx"] -> 開啟 cookie 介面按鈕功能綁定, 值: basic(基本)/advance(進階)/all(所有)
+//- [data-cookie-close="xxx"] -> 關閉 cookie 視窗, 值: basic(基本)/advance(進階)/all(所有)
+//- [data-cookie-reject] -> 關閉進階版 cookie 所有選項
+//- [data-cookie-all] -> 啟用進階版 cookie 所有選項
+//- [data-cookie-save] -> 放在預存當前選項的按鈕上（功能：將目前選項紀錄預存至 cookie 中, 尚未真正啟用）
+//- [data-cookie-run] -> 放在真正要啟動 cookie 功能的儲存按鈕上（功能：依照目前 save 的 cookie 選項, 執行後端程式）
 .cookie-check
   .cookie-main
     .cookie-container 
@@ -7,10 +15,10 @@
         p.text 關於本網站使用瀏覽器紀錄 Cookie 來提供您最好的使用體驗，我們使用的 Cookie 也包括了第三方 Cookie 。<br>相關資訊請訪問我們的隱私權與 Cookie 政策。如果您選擇繼續瀏覽或關閉這個提示，便表示您已接受我們的網站使用條款。
       .button-group
         // [data-cookie-reject] -> 全部關閉; [data-cookie-save] -> 儲存 cookie
-        .cookie-btn.close(data-cookie-reject) Reject 我拒絕
-        .cookie-btn.agree(data-cookie-save) OK 我接受
+        .cookie-btn.close(data-cookie data-cookie-reject) Reject 我拒絕
+        .cookie-btn.agree(data-cookie data-cookie-save) OK 我接受
         // 若此專案無開進階版 cookie, 請移除以下結構！
-        .cookie-setting-btn
+        .cookie-setting-btn(data-cookie data-cookie-open="advance")
           span Cookie 偏好設定
           .icon 
             i.icon-arrow
@@ -19,7 +27,8 @@
 // 若此專案無開進階版 cookie, 請移除以下結構！
 .cookie-setting
   .scroller 
-    .setting-main
+    // 多語系 ** --switch-openText: 開啟按鈕文字設定 / --switch-closeText: 關閉按鈕文字設定
+    .setting-main(style=`--switch-openText: "啟用";--switch-closeText: "拒絕";`)
       tab-el(t4-name="cookie-tab" t4-type="process" t4-group='false')
         // 步驟 1
         .setting-container(t4-role="tabPanel" t4-id='step1') 
@@ -29,8 +38,8 @@
           .content-block
             // JS append 結構 (cookieStep1El)
           .button-group
-            .cookie-btn.open(data-cookie-all) 啟用所有 Cookie
-            .cookie-btn.save(data-cookie-close) SAVE 儲存本次變更
+            .cookie-btn.open(data-cookie data-cookie-all) 啟用所有 Cookie
+            .cookie-btn.save(data-cookie data-cookie-close="advance") SAVE 儲存本次變更
         // 步驟 2
         .setting-container(t4-role="tabPanel" t4-id='step2')
           .back(onClick=`document.body.fesd.cookieGoToNext(false)`)
@@ -41,6 +50,7 @@
             // JS append 結構 (cookieStep2TittleEl)
           .content-block
             // JS append 結構 (cookieStep2ContentEl)
+  
   // 後端 cookie 資料放這兒, 先放假結構
   // 若此專案無開進階版 cookie, 請移除以下結構！
   input(type="hidden" id="_wcookie" value='')

package/src/pages/index.pug

@@ -24,11 +24,11 @@ block content
             .text 
               .box
                 span 您可前往 
-                span(data-cookie-open) Cookie 偏好設定
+                span(data-cookie data-cookie-open="advance") Cookie 偏好設定
                 span  進行修改
               .box
                 span Modify your 
-                span(data-cookie-open) cookie preferences.
+                span(data-cookie data-cookie-open="advance") cookie preferences.
         .swiper-slide
           .media-box
             video(src="https://cdn.wdd.idv.tw/video/chappie_Video1.mp4" muted playsinline)
@@ -93,13 +93,13 @@ block content
       h3 Video4 👇
       .row
         .grid
-          .photo-box(video-target="video-ig-template" video-target-route="./ajax/ajax_igDemo.html" video-id="../../public/assets/img/banner.jpg" video-type="instagram")
+          .photo-box(video-target="video-ig-template" video-button="playing" video-target-route="./ajax/ajax_igDemo.html" video-id="../../public/assets/img/banner.jpg" video-type="instagram")
             picture
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover01.webp" type="image/webp")
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover01.jpg" type="image/jpeg")
               img(src="https://cdn.wdd.idv.tw/image/video-cover01.jpg" alt="")
         .grid
-          .photo-box(video-target video-id="5bMdjkfvONE" video-type="youtube" video-mode="onPage")
+          .photo-box(video-target video-id="5bMdjkfvONE" video-type="youtube")
             picture
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover02.webp" type="image/webp")
               source(srcset="https://cdn.wdd.idv.tw/image/video-cover02.jpg" type="image/jpeg")