create-fesd-app 1.0.46 → 1.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fesd-app",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "type": "module",
   "bin": {
     "create-fesd-app": "bin/create-fesd-app.mjs"
@@ -19,11 +19,15 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.10",
     "@tailwindcss/vite": "^4.1.10",
-    "@xwadex/fesd": "0.0.68",
+    "@xwadex/fesd": "0.0.70",
     "ansi-colors": "^4.1.3",
     "chalk": "^5.3.0",
     "clsx": "^2.1.1",
     "colorthief": "^2.4.0",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-class-names": "^8.6.0",
+    "embla-carousel-fade": "^8.6.0",
     "commander": "^12.1.0",
     "flatpickr": "^4.6.13",
     "gsap": "^3.12.5",
@@ -47,7 +51,7 @@
     "@vituum/vite-plugin-pug": "^1.1.0",
     "sass": "1.77.4",
     "sass-migrator": "^2.1.0",
-    "vite": "^5.4.8",
+    "vite": "7.3.3",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-imagemin": "^0.6.1"
   },

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

@@ -0,0 +1,100 @@
+// 固定不改 可以用變數條整
+// --slide-spacing: 0px
+.embla
+  --slide-size: 30%
+  position: relative
+  overflow: hidden
+  width: 100%
+  .embla__viewport
+    overflow: hidden
+    width: 100%
+  .embla__container
+    display: flex
+    touch-action: pan-y pinch-zoom
+    margin-left: calc(var(--slide-spacing, 0) * -1)
+  .embla__slide
+    transform: translate3d(0, 0, 0)
+    flex: 0 0 var(--slide-size, 100%)
+    min-width: 0
+    padding-left: var(--slide-spacing, 0)
+    overflow: hidden
+  // no scroll
+  &.embla--noScrollable 
+    .embla__container
+      transform: none !important
+    .embla__prev,
+    .embla__next,
+    .embla__dots
+      display: none !important
+  // parallax
+  .embla__parallax
+    height: 100%
+    overflow: hidden
+    .embla__parallax__layer
+      position: relative
+      height: 100%
+      width: 100%
+      display: flex
+      justify-content: center
+    .embla__parallax__img 
+      max-width: none
+      flex: 0 0 calc(115% + (var(--slide-spacing, 0) * 2))
+      object-fit: cover
+
+
+// 箭頭控制
+.embla__controls
+  display: flex
+  justify-content: center
+  gap: 2.5rem
+  pointer-events: none
+  .embla__prev
+    >i
+      display: block
+      transform: rotate(180deg)
+  .embla__prev,
+  .embla__next
+    font-size: px(18)
+    pointer-events: auto
+    &[isHide]
+      opacity: 0.2
+      cursor: default
+      pointer-events: none
+
+// 點點控制
+.embla__dots
+  --bullet-size: 5px
+  --bullet-gap: 10px
+  --bullet-color-RGB: 0,0,0
+
+  display: flex
+  justify-content: center
+  align-items: center
+  gap: var(--bullet-gap)
+  .embla__dot
+    width: var(--bullet-size)
+    height: var(--bullet-size)
+    padding: 0
+    border-radius: 50%
+    background: rgba(var(--bullet-color-RGB), 0)
+    border: 1px solid rgba(var(--bullet-color-RGB), 1)
+    &.is-selected
+      background: rgba(var(--bullet-color-RGB),1)
+
+
+// 滾動條
+.embla__progress
+  border-radius: 1.875rem
+  background-color: rgba(0,0,0,0.1)
+  position: relative
+  height: 0.625rem
+  width: 200px
+  max-width: 90%
+  overflow: hidden
+  .embla__progressBar
+    background-color: rgba(0,0,0,.5)
+    height: 100%
+    width: 100%
+    transform: scaleX(0)
+    transform-origin: left
+    transition: transform 0.3s ease

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

@@ -1,3 +1,5 @@
+@import ./_emblaStyle
+
 // Swiper
 .swiper
   width: 100%

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

@@ -288,16 +288,17 @@
         // 以下可修改
         font-size: 16px
         line-height: 1.2
-        font-weight: 600
+        font-weight: 700
     tbody
       td
-        &.lefthead
-          font-size: 16px
-          line-height: 1.2
-          font-weight: 600
         // 以下可修改
         font-size: 16px
-        line-height: 1.2
+        line-height: 1.6
+        font-weight: 400
+        letter-spacing: 0.5px
+        &.lefthead
+          line-height: 1.2
+          font-weight: 700
 
 %table_tipText
   // 以下可修改

package/src/assets/css/pages/index.sass

@@ -291,5 +291,55 @@
   justify-content: center
   align-items: center
   cursor: pointer
+
+section.section6
+  .container
+    padding-block: 30px
+    // +baseSpace(10)
+    // +rwdmax(1200)
+    //   +baseSpace(1)
+  .titleBox
+    margin-bottom: px(20)
+    .sub-title,
+    .main-title-M
+      display: block
+  .embla-video-demo
+    --slide-size: 100%
+  .video-demo-card
+    position: relative
+    overflow: hidden
+    border-radius: 5px
+    background: #000
+    aspect-ratio: 16 / 9
+  .video-demo-label
+    position: absolute
+    top: px(20)
+    left: px(20)
+    z-index: 2
+    padding: px(10) px(14)
+    color: #fff
+    background: rgba(#000, .65)
+    border-radius: 5px
+    pointer-events: none
+    span,
+    small
+      display: block
+    small
+      margin-top: 2px
+      opacity: .7
+  .mediaBox,
+  .youtube-player,
+  .youku-player,
+  iframe
+    width: 100%
+    height: 100%
+  iframe
+    display: block
+    border: 0
+  video
+    width: 100%
+    height: 100%
+    object-fit: contain
+
 [video-cover="off"]
   padding: 0 !important

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

@@ -21,25 +21,30 @@ import {
 // flatpickr
 import { Mandarin } from "flatpickr/dist/l10n/zh.js"
 // swiper
-import { SwiperVer11, cn } from "@/plugins";
+import { SwiperVer11, SwiperEmbla, cn } from "@/plugins";
 import { bannerConfig } from "@/configs"
-
+const {
+  Embla,
+  setupVideo: setupVideoEmbla,
+  setupYt: setupYtEmbla,
+  setupYouku: setupYoukuEmbla
+} = SwiperEmbla
 // swiper
-const { SwiperV11 } = SwiperVer11
+const {
+  SwiperV11,
+  Autoplay,
+  setupVideo: setupVideoSwiper,
+  setupYt: setupYtSwiper,
+  setupYouku: setupYoukuSwiper,
+} = SwiperVer11
 const swiperHandler = {};
 
 swiperHandler.banner = function () {
   const bannerEvents = {
     ...bannerConfig,
     autoplay: false,
-    init() {
-      console.log('swiper init!!');
-    },
-    slideChangeTransitionStart(swiper) {
-      isVideo(swiper);
-    },
   };
-  const banner = new SwiperV11('.swiper', bannerEvents);
+  const banner = new SwiperV11('.banner .swiper', bannerEvents);
 };
 
 swiperHandler.all = function () {
@@ -125,19 +130,35 @@ const s4Handler = function () {
 };
 
 const s6Handler = function () {
-  // 簡易版
-  methods.collapseEvent('[data-collapse-click]', '[data-collapse]', true, true)
-  // 公版
-  collapse: new Collapse4('[partnerCollapse-wrapper]', {
-    defaultOpen: false,
-    single: true,
-    targetStopPropagation: true,
+  const options = {
+    modules: [Autoplay],
+    speed: 1200,
+    autoplay: {
+      delay: 5000,
+    },
+    loop: true,
+    slidesPerView: 1,
     on: {
-      afterCollapse() {
-        console.log('afterCollapse');
-      }
+      init(swiper) {
+        setupVideoSwiper(swiper);
+        setupYtSwiper(swiper, "swiper-video-demo");
+        setupYoukuSwiper(swiper);
+      },
+    }
+  }
+  const swiperTest = new SwiperV11('.swiper-video-demo', options)
+
+  const emblaTest = Embla({
+    selector: '.embla-video-demo',
+    autoplay: true,
+    loop: true,
+    onInit: (embla) => {
+      setupVideoEmbla(embla)
+      setupYtEmbla(embla, "embla-video-demo")
+      setupYoukuEmbla(embla)
     },
   })
+
 };
 
 const s8Handler = function () {

package/src/assets/js/plugins/embla.plugin.js

@@ -0,0 +1,603 @@
+import EmblaCarousel from "embla-carousel";
+import Autoplay from "embla-carousel-autoplay";
+import Fade from "embla-carousel-fade";
+import ClassNames from "embla-carousel-class-names";
+
+export const Embla = (options) => {
+  const {
+    selector,
+    duration = 40,
+    loop = false,
+    hasButtons = false,
+    hasDots = false,
+    dotsDynamic = true,
+    dotsClickAble = false,
+    autoplay = false,
+    autoplayDelay = 6000,
+    autoplayStopOnHover = false,
+    useFade = false,
+    useClassNames = true,
+    useProgressBar = false,
+    usePageNumber = false,
+    classNamesOptions = {
+      selected: "is-selected",
+      snapped: "is-snapped",
+      visible: "is-visible",
+    },
+    emblaOptions = {},
+    onInit = () => { },
+    onReInit = () => { },
+    onSelect = () => { },
+    onDestroy = () => { },
+    onPointerDown = () => { },
+    onPointerUp = () => { },
+  } = options;
+
+  const core = createEmblaCore({
+    selector,
+    loop,
+    duration,
+    useFade,
+    useClassNames,
+    classNamesOptions,
+    autoplay,
+    autoplayDelay,
+    autoplayStopOnHover,
+    emblaOptions,
+  });
+
+  if (!core) return null;
+
+  const { embla, autoplayPlugin, root } = core;
+
+  function updateScrollableState() {
+    const scrollSnaps = embla.scrollSnapList();
+    const isScrollable = scrollSnaps.length > 1;
+
+    root.classList.toggle("embla--noScrollable", !isScrollable);
+    if (autoplay && !isScrollable) autoplayPlugin?.stop();
+  }
+
+  updateScrollableState();
+  embla.on("init", updateScrollableState);
+  embla.on("reInit", updateScrollableState);
+
+  if (hasButtons) addPrevNextBtnsClickHandlers(embla, root, autoplayPlugin);
+  if (hasDots)
+    addDotBtnsAndClickHandlers(
+      embla,
+      root,
+      autoplayPlugin,
+      dotsClickAble,
+      dotsDynamic,
+    );
+
+  if (useProgressBar) setupProgressBar(embla, root);
+  if (usePageNumber) setupPageNumber(embla, root);
+
+  // 個別定義事件
+  if (onInit) embla.on("init", () => onInit(embla));
+  if (onReInit) embla.on("reInit", () => onReInit(embla));
+  if (onSelect) embla.on("select", () => onSelect(embla));
+  if (onDestroy) embla.on("destroy", () => onDestroy(embla));
+  if (onPointerDown) embla.on("pointerDown", () => onPointerDown(embla));
+  if (onPointerUp) embla.on("pointerUp", () => onPointerUp(embla));
+
+  return embla;
+};
+
+const createEmblaCore = ({
+  selector,
+  loop,
+  duration,
+  autoplay,
+  autoplayDelay,
+  autoplayStopOnHover,
+  useFade,
+  useClassNames,
+  classNamesOptions,
+  emblaOptions,
+}) => {
+  const root = document.querySelector(selector);
+  if (!root || root.classList.contains("embla--active")) return null;
+
+  const viewport = root.querySelector(".embla__viewport");
+  if (!viewport) return null;
+
+  const plugins = [];
+  const autoplayPlugin = autoplay
+    ? Autoplay({
+      delay: autoplayDelay,
+      stopOnInteraction: false,
+      stopOnMouseEnter: autoplayStopOnHover,
+    })
+    : null;
+
+  if (autoplayPlugin) plugins.push(autoplayPlugin);
+  if (useFade) plugins.push(Fade());
+  if (useClassNames) plugins.push(ClassNames(classNamesOptions));
+
+  const embla = EmblaCarousel(
+    viewport,
+    { loop, duration, ...emblaOptions },
+    plugins,
+  );
+
+  root.classList.add("embla--active");
+  return { embla, autoplayPlugin, root };
+};
+
+const addPrevNextBtnsClickHandlers = (embla, root, autoplayPlugin) => {
+  const prevBtn = root.querySelector(".embla__prev");
+  const nextBtn = root.querySelector(".embla__next");
+  if (!prevBtn || !nextBtn) return;
+
+  const scrollPrev = () => {
+    embla.scrollPrev();
+    autoplayPlugin?.reset();
+  };
+  const scrollNext = () => {
+    embla.scrollNext();
+    autoplayPlugin?.reset();
+  };
+
+  prevBtn.addEventListener("click", scrollPrev);
+  nextBtn.addEventListener("click", scrollNext);
+
+  const toggleButtons = () => {
+    embla.canScrollPrev()
+      ? prevBtn.removeAttribute("isHide")
+      : prevBtn.setAttribute("isHide", true);
+    embla.canScrollNext()
+      ? nextBtn.removeAttribute("isHide")
+      : nextBtn.setAttribute("isHide", true);
+  };
+
+  embla.on("init", toggleButtons);
+  embla.on("reInit", toggleButtons);
+  embla.on("select", toggleButtons);
+};
+
+// 輪播點點
+const addDotBtnsAndClickHandlers = (
+  embla,
+  root,
+  autoplayPlugin,
+  dotsClickAble,
+  dotsDynamic,
+) => {
+  const dotsContainer = root.querySelector(".embla__dots");
+  if (!dotsContainer) return;
+
+  let track = dotsContainer;
+  if (dotsDynamic) {
+    const wrapper = dotsContainer.querySelector(".embla__dots__track__wrapper");
+    if (wrapper) {
+      const dotsTrack = wrapper.querySelector(".embla__dots__track");
+      if (dotsTrack) {
+        track = dotsTrack;
+      } else {
+        track = dotsContainer;
+      }
+    }
+  }
+
+  if (!track) return;
+
+  const containerStyle = getComputedStyle(dotsContainer);
+  const dotsWidth =
+    parseFloat(containerStyle.getPropertyValue("--bullet-size")) || 0;
+  const maxDots =
+    parseInt(containerStyle.getPropertyValue("--max-bullet-count")) || 5;
+  const inactiveScale =
+    parseFloat(containerStyle.getPropertyValue("--bullet-inactive-scale")) || 1;
+
+  let dotNodes = [];
+
+  function dotsBindClick(dot, index) {
+    if (!dotsClickAble) return;
+    dot.style.cursor = "pointer";
+    dot.addEventListener("click", () => {
+      embla.scrollTo(index);
+      autoplayPlugin?.reset();
+    });
+  }
+
+  const createDots = () => {
+    track.innerHTML = "";
+    dotNodes = [];
+
+    dotNodes = embla.scrollSnapList().map((_, index) => {
+      const dot = document.createElement("button");
+      dot.className = "embla__dot";
+      dot.type = "button";
+
+      dotsBindClick(dot, index);
+      track.appendChild(dot);
+      return dot;
+    });
+  };
+
+  const updateDots = () => {
+    const selected = embla.selectedScrollSnap();
+    // 預設點點
+    if (!dotsDynamic) {
+      dotNodes.forEach((dot, i) =>
+        dot.classList.toggle("is-selected", i === selected),
+      );
+      return;
+    }
+
+    // 動態點點
+    const total = dotNodes.length;
+    const half = Math.floor(maxDots / 2);
+
+    dotNodes.forEach((dot, i) => {
+      const distance = Math.abs(i - selected);
+      dot.classList.toggle("is-selected", i === selected);
+
+      const scale = distance === 0 ? 1 : inactiveScale;
+      dot.style.transform = `scale(${scale})`;
+    });
+
+    let offset = selected - half;
+    if (offset < 0) offset = 0;
+    if (offset > total - maxDots) offset = Math.max(total - maxDots, 0);
+
+    const trackStyle = getComputedStyle(track);
+    const gap = parseFloat(trackStyle.gap) || 0;
+
+    const translate = -(dotsWidth + gap) * offset;
+    track.style.transform = `translateX(${translate}px)`;
+  };
+
+  embla.on("init", () => {
+    createDots();
+    updateDots();
+  });
+  embla.on("reInit", () => {
+    createDots();
+    updateDots();
+  });
+  embla.on("select", updateDots);
+};
+
+const setupPageNumber = (embla, root) => {
+  const snapDisplay = root.querySelector(".embla__selected-snap-display");
+  if (!snapDisplay) return;
+  const updateSnapDisplay = (embla) => {
+    const selectedSnap = embla.selectedScrollSnap();
+    const snapCount = embla.scrollSnapList().length;
+    snapDisplay.innerHTML = `${selectedSnap + 1} / ${snapCount}`;
+  };
+  embla.on("select", updateSnapDisplay);
+  updateSnapDisplay(embla);
+};
+
+const setupProgressBar = (embla, root) => {
+  const bar = root.querySelector(".embla__progressBar");
+  if (!bar) return;
+
+  const applyProgress = () => {
+    const progress = Math.max(0, Math.min(1, embla.scrollProgress()));
+    bar.style.transform = `scaleX(${progress})`;
+  };
+
+  embla.on("init", applyProgress);
+  embla.on("reInit", applyProgress);
+  embla.on("scroll", applyProgress);
+  embla.on("select", applyProgress);
+};
+
+const stopAutoplayNextTick = (autoplayPlugin) => {
+  if (!autoplayPlugin) return;
+
+  autoplayPlugin.stop();
+  setTimeout(() => {
+    autoplayPlugin.stop();
+  }, 100);
+};
+
+// 串接
+export const setupThumb = (
+  mainEmbla,
+  thumbEmbla,
+  activeClass = "is-selected",
+) => {
+  if (!mainEmbla || !thumbEmbla) return;
+  if (thumbEmbla.slideNodes().length !== mainEmbla.slideNodes().length)
+    console.warn("[setupThumbSync] slide not match");
+
+  const addThumbClickHandlers = () => {
+    thumbEmbla.slideNodes().forEach((thumb, index) => {
+      if (thumb.dataset.emblaThumbClickBound === "true") return;
+
+      thumb.dataset.emblaThumbClickBound = "true";
+      thumb.addEventListener("click", () => {
+        mainEmbla.scrollTo(index);
+      });
+    });
+  };
+  const updateThumbSelection = () => {
+    const selectedIndex = mainEmbla.selectedScrollSnap();
+    thumbEmbla.slideNodes().forEach((thumb, i) => {
+      thumb.classList.toggle(activeClass, i === selectedIndex);
+    });
+    thumbEmbla.scrollTo(selectedIndex);
+  };
+
+  updateThumbSelection();
+  addThumbClickHandlers();
+
+  mainEmbla.on("select", updateThumbSelection);
+  thumbEmbla.on("reInit", addThumbClickHandlers);
+};
+
+// 切換
+export const switchTheme = (
+  embla,
+  containerSelectors = [],
+  selectorWithinSlide = ".slideContent",
+  attributeName = "data-theme",
+) => {
+  const targets = (
+    Array.isArray(containerSelectors)
+      ? containerSelectors
+      : [containerSelectors]
+  )
+    .map((selector) => document.querySelector(selector))
+    .filter(Boolean);
+
+  const slides = embla.slideNodes();
+  if (!targets.length) return;
+
+  const applyTheme = () => {
+    const index = embla.selectedScrollSnap();
+    const activeSlide = slides[index];
+    const el = activeSlide?.querySelector(selectorWithinSlide);
+    const theme = el?.getAttribute(attributeName);
+
+    if (theme) {
+      targets.forEach((target) => {
+        target.setAttribute(attributeName, theme);
+      });
+    }
+  };
+
+  embla.on("select", applyTheme);
+  applyTheme();
+};
+
+// video
+export const setupVideo = (embla) => {
+  const slides = embla.slideNodes();
+  const autoplayPlugin = embla.plugins()?.autoplay;
+  if (!slides || slides.length === 1 || !autoplayPlugin) return;
+  let timer = null;
+
+  const clearVideoTimer = () => {
+    if (!timer) return;
+    clearTimeout(timer);
+    timer = null;
+  };
+
+  const pauseVideo = () => {
+    clearVideoTimer();
+    slides.forEach((slide) => {
+      const video = slide.querySelector("video");
+      if (!video) return;
+      video.removeAttribute("loop");
+      video.pause();
+      video.currentTime = 0;
+      video.onended = null;
+    });
+  };
+  const control = () => {
+    pauseVideo();
+    const index = embla.selectedScrollSnap();
+    const currentSlide = slides[index];
+    const video = currentSlide?.querySelector("video");
+    if (video) {
+      timer = setTimeout(() => {
+        if (autoplayPlugin.isPlaying()) autoplayPlugin.stop();
+      }, 150);
+      video.onended = () => {
+        if (embla.autoPlayPause) return;
+        embla.canScrollNext() ? embla.scrollNext() : embla.scrollTo(0);
+        if (!autoplayPlugin.isPlaying()) autoplayPlugin.play();
+      };
+      video.play()
+    }
+  };
+  control();
+  embla.on("select", control);
+  embla.on("destroy", clearVideoTimer);
+};
+
+// yt
+export const setupYt = (embla, ID) => {
+  const slides = embla.slideNodes();
+  const autoplayPlugin = embla.plugins()?.autoplay;
+  let isDestroyed = false;
+  if (!slides || slides.length === 1) return;
+
+  const onYouTubeIframeAPIReady = (playerID, videoID) => {
+    if (!window.YT?.ready || !window.YT?.Player) return;
+
+    window.YT.ready(function () {
+      if (isDestroyed || !document.getElementById(playerID)) return;
+
+      new window.YT.Player(playerID, {
+        height: "100%",
+        width: "100%",
+        videoId: videoID,
+        playerVars: {
+          autoplay: 1, // 在讀取時自動播放影片
+          controls: 1, // 在播放器顯示暫停／播放按鈕
+          disablekb: 1,
+          modestbranding: 1, // 隱藏 YouTube Logo
+          fs: 1, // 隱藏全螢幕按鈕
+          iv_load_policy: 3, // 隱藏影片註解
+          autohide: 1,
+          showinfo: 0,
+          rel: 0,
+          playsinline: 1,
+          enablejsapi: 1,
+          cc_lang_pref: "zh",
+          cc_load_policy: 0,
+          mute: 1,
+        },
+        events: {
+          onReady: onPlayerReady,
+          onStateChange: onPlayerStateChange,
+        },
+      });
+    });
+  };
+  const onPlayerReady = (event) => {
+    event.target.mute();
+    const state = event.target.playerInfo.playerState;
+    switch (state) {
+      case 0:
+        if (embla.autoPlayPause) return;
+        embla.canScrollNext() ? embla.scrollNext() : embla.scrollTo(0);
+        if (autoplayPlugin && !autoplayPlugin.isPlaying()) autoplayPlugin.play();
+        break;
+      case 1:
+        if (autoplayPlugin) autoplayPlugin.stop();
+        break;
+    }
+  };
+  const onPlayerStateChange = (event) => {
+    const state = event.data;
+    switch (state) {
+      case 0:
+        if (embla.autoPlayPause) return;
+        embla.canScrollNext() ? embla.scrollNext() : embla.scrollTo(0);
+        if (autoplayPlugin && !autoplayPlugin.isPlaying()) autoplayPlugin.play();
+        break;
+      case 1:
+        if (autoplayPlugin) autoplayPlugin.stop();
+        break;
+    }
+  };
+
+  const getCurrentYtSlide = () => {
+    const activeSlide = slides[embla.selectedScrollSnap()];
+    return activeSlide?.querySelector("[data-type='youtube'][data-videoID]");
+  };
+
+  const createYtIframe = (ytVideo) => {
+    const videoID = ytVideo.getAttribute("data-videoID");
+    const playerWrap = document.createElement("div");
+    const playerID = `youtube-player__${ID}__${embla.selectedScrollSnap()}__${videoID}`;
+
+    playerWrap.id = playerID;
+    playerWrap.className = "youtube-player";
+    const oldPlayer = ytVideo.querySelector(".youtube-player");
+    if (oldPlayer) oldPlayer.remove();
+    ytVideo.appendChild(playerWrap);
+    requestAnimationFrame(() => onYouTubeIframeAPIReady(playerID, videoID));
+  };
+
+  const removeYtPlayers = () => {
+    slides.forEach((slide) => {
+      const players = slide.querySelectorAll(".youtube-player");
+      players.forEach((player) => player.remove());
+    });
+  };
+
+  const handleSelect = () => {
+    const ytVideo = getCurrentYtSlide();
+    removeYtPlayers();
+
+    if (ytVideo) {
+      stopAutoplayNextTick(autoplayPlugin);
+      if (isDestroyed || getCurrentYtSlide() !== ytVideo) return;
+      createYtIframe(ytVideo);
+      stopAutoplayNextTick(autoplayPlugin);
+    } else if (autoplayPlugin && !autoplayPlugin.isPlaying()) {
+      autoplayPlugin.play();
+    }
+  };
+  embla.on("select", handleSelect);
+  embla.on("destroy", () => {
+    isDestroyed = true;
+    removeYtPlayers();
+  });
+  handleSelect();
+};
+
+// youku
+export const setupYouku = (embla) => {
+  const autoplayPlugin = embla.plugins()?.autoplay;
+  const slides = embla.slideNodes();
+
+  let youkuTimer = null;
+
+  const clearYoukuTimer = () => {
+    if (!youkuTimer) return;
+
+    clearTimeout(youkuTimer);
+    youkuTimer = null;
+  };
+
+  const getCurrentYoukuSlide = () => {
+    const activeSlide = slides[embla.selectedScrollSnap()];
+    return activeSlide?.querySelector("[data-type='youku'][data-videoID]");
+  };
+
+  const getYoukuDuration = (youkuVideo) => {
+    const duration = Number(youkuVideo.getAttribute("data-duration"));
+    return Number.isFinite(duration) && duration > 0 ? duration * 1000 : 30000;
+  };
+
+  const createYoukuIframe = (youkuVideo) => {
+    const videoID = youkuVideo.getAttribute("data-videoID");
+    const playerWrap = document.createElement("div");
+    const youkuIframe = document.createElement("iframe");
+
+    playerWrap.className = "youku-player";
+    youkuIframe.src = `https://player.youku.com/embed/${videoID}?rel=0&autoplay=1&muted=1`;
+    const oldPlayer = youkuVideo.querySelector(".youku-player");
+    if (oldPlayer) oldPlayer.remove();
+    playerWrap.appendChild(youkuIframe);
+    youkuVideo.appendChild(playerWrap);
+  };
+
+  const removeYoukuPlayers = () => {
+    slides.forEach((slide) => {
+      const players = slide.querySelectorAll(".youku-player iframe");
+      players.forEach((iframe) => {
+        iframe.src = "";
+        iframe.remove();
+      });
+    });
+  };
+
+  const handleSelect = () => {
+    const youkuVideo = getCurrentYoukuSlide();
+    clearYoukuTimer();
+    removeYoukuPlayers();
+    if (youkuVideo) {
+      createYoukuIframe(youkuVideo);
+      if (autoplayPlugin) {
+        stopAutoplayNextTick(autoplayPlugin);
+        youkuTimer = setTimeout(() => {
+          embla.scrollNext();
+          autoplayPlugin.play();
+        }, getYoukuDuration(youkuVideo));
+      }
+    } else if (autoplayPlugin && !autoplayPlugin.isPlaying()) {
+      autoplayPlugin.play();
+    }
+  };
+
+  embla.on("select", handleSelect);
+  embla.on("destroy", () => {
+    clearYoukuTimer();
+    removeYoukuPlayers();
+  });
+
+  handleSelect();
+};

package/src/assets/js/plugins/index.js

@@ -1,5 +1,6 @@
 export * as SwiperVer8 from "./swiperV8.plugin"
 export * as SwiperVer11 from "./swiperV11.plugin"
+export * as SwiperEmbla from "./embla.plugin";
 export { default as gsap } from "./gsap.plugin"
 export * from "./lazyLoad.plugin"
 export * from "./tailwind.plugin"

package/src/assets/js/plugins/swiperV11.plugin.js

@@ -24,3 +24,278 @@ export {
     EffectCreative,
     EffectCards,
 } from "swiperv11/modules"
+
+
+const getSlides = (swiper) => Array.from(swiper?.slides || [])
+
+const getActiveSlide = (swiper) => {
+    const slides = getSlides(swiper)
+    return slides[swiper?.activeIndex] || slides[swiper?.realIndex] || null
+}
+
+const stopAutoplayNextTick = (swiper) => {
+    const autoplay = swiper?.autoplay
+    if (!autoplay) return
+
+    autoplay.stop()
+    setTimeout(() => {
+        autoplay.stop()
+    }, 100)
+}
+
+const startAutoplay = (swiper) => {
+    const autoplay = swiper?.autoplay
+    if (!autoplay || autoplay.running) return
+
+    autoplay.start()
+}
+
+const slideNextOrFirst = (swiper) => {
+    if (!swiper) return
+
+    if (!swiper.params?.loop && swiper.isEnd) {
+        swiper.slideTo(0)
+        return
+    }
+
+    swiper.slideNext()
+}
+
+// video
+export const setupVideo = (swiper) => {
+    const slides = getSlides(swiper)
+    if (!swiper || slides.length <= 1) return null
+
+    let timer = null
+
+    const clearVideoTimer = () => {
+        if (!timer) return
+        clearTimeout(timer)
+        timer = null
+    }
+
+    const pauseVideo = () => {
+        clearVideoTimer()
+        slides.forEach((slide) => {
+            const video = slide.querySelector("video")
+            if (!video) return
+            video.removeAttribute("loop")
+            video.pause()
+            video.currentTime = 0
+            video.onended = null
+        })
+    }
+
+    const control = () => {
+        pauseVideo()
+        const currentSlide = getActiveSlide(swiper)
+        const video = currentSlide?.querySelector("video")
+        if (!video) {
+            startAutoplay(swiper)
+            return
+        }
+
+        timer = setTimeout(() => {
+            if (swiper.autoplay?.running) swiper.autoplay.stop()
+        }, 150)
+
+        video.onended = () => {
+            if (swiper.autoPlayPause) return
+            slideNextOrFirst(swiper)
+            startAutoplay(swiper)
+        }
+
+        video.play()
+    }
+
+    control()
+    swiper.on("slideChange", control)
+    swiper.on("destroy", clearVideoTimer)
+}
+
+// yt
+export const setupYt = (swiper, ID) => {
+    const slides = getSlides(swiper)
+    if (!swiper || slides.length <= 1) return null
+
+    let isDestroyed = false
+    let youtubePlayer = null
+
+    const getCurrentYtSlide = () => {
+        const activeSlide = getActiveSlide(swiper)
+        return activeSlide?.querySelector("[data-type='youtube'][data-videoID]")
+    }
+
+    const destroyYoutubePlayer = () => {
+        if (youtubePlayer?.destroy) youtubePlayer.destroy()
+        youtubePlayer = null
+
+        slides.forEach((slide) => {
+            const players = slide.querySelectorAll(".youtube-player")
+            players.forEach((player) => player.remove())
+        })
+    }
+
+    const handlePlayerStateChange = (event) => {
+        const state = event.data
+
+        switch (state) {
+            case 0:
+                if (swiper.autoPlayPause) return
+
+                slideNextOrFirst(swiper)
+                startAutoplay(swiper)
+                break
+            case 1:
+                stopAutoplayNextTick(swiper)
+                break
+        }
+    }
+
+    const createYtIframe = (ytVideo) => {
+        if (!window.YT?.ready || !window.YT?.Player) return
+
+        const videoID = ytVideo.getAttribute("data-videoID")
+        const playerWrap = document.createElement("div")
+        const playerID = `youtube-player__${ID}__${swiper.activeIndex}__${videoID}`
+
+        playerWrap.id = playerID
+        playerWrap.className = "youtube-player"
+
+        destroyYoutubePlayer()
+        ytVideo.appendChild(playerWrap)
+
+        window.YT.ready(() => {
+            if (isDestroyed || !document.getElementById(playerID)) return
+
+            youtubePlayer = new window.YT.Player(playerID, {
+                height: "100%",
+                width: "100%",
+                videoId: videoID,
+                playerVars: {
+                    autoplay: 1,
+                    controls: 1,
+                    disablekb: 1,
+                    modestbranding: 1,
+                    fs: 1,
+                    iv_load_policy: 3,
+                    autohide: 1,
+                    showinfo: 0,
+                    rel: 0,
+                    playsinline: 1,
+                    enablejsapi: 1,
+                    cc_lang_pref: "zh",
+                    cc_load_policy: 0,
+                    mute: 1,
+                },
+                events: {
+                    onReady: (event) => {
+                        event.target.mute()
+                        event.target.playVideo()
+                        swiper.youtubePlayer = event.target
+                        console.log(swiper.youtubePlayer);
+                    },
+                    onStateChange: handlePlayerStateChange,
+                },
+            })
+        })
+    }
+
+    const handleSelect = () => {
+        const ytVideo = getCurrentYtSlide()
+        destroyYoutubePlayer()
+
+        if (ytVideo) {
+            stopAutoplayNextTick(swiper)
+            if (isDestroyed || getCurrentYtSlide() !== ytVideo) return
+
+            createYtIframe(ytVideo)
+            stopAutoplayNextTick(swiper)
+        } else {
+            startAutoplay(swiper)
+        }
+    }
+
+    swiper.on("slideChange", handleSelect)
+    swiper.on("destroy", () => {
+        isDestroyed = true
+        destroyYoutubePlayer()
+    })
+
+    handleSelect()
+}
+
+// youku
+export const setupYouku = (swiper) => {
+    const slides = getSlides(swiper)
+    if (!swiper || slides.length <= 1) return null
+
+    let youkuTimer = null
+
+    const clearYoukuTimer = () => {
+        if (!youkuTimer) return
+
+        clearTimeout(youkuTimer)
+        youkuTimer = null
+    }
+
+    const getCurrentYoukuSlide = () => {
+        const activeSlide = getActiveSlide(swiper)
+        return activeSlide?.querySelector("[data-type='youku'][data-videoID]")
+    }
+
+    const createYoukuIframe = (youkuVideo) => {
+        const videoID = youkuVideo.getAttribute("data-videoID")
+        const playerWrap = document.createElement("div")
+        const youkuIframe = document.createElement("iframe")
+        playerWrap.className = "youku-player"
+        youkuIframe.src = `https://player.youku.com/embed/${videoID}?rel=0&autoplay=1&muted=1`
+        const oldPlayer = youkuVideo.querySelector(".youku-player")
+        if (oldPlayer) oldPlayer.remove()
+        playerWrap.appendChild(youkuIframe)
+        youkuVideo.appendChild(playerWrap)
+    }
+
+    const removeYoukuPlayers = () => {
+        slides.forEach((slide) => {
+            const players = slide.querySelectorAll(".youku-player")
+            players.forEach((player) => {
+                const iframe = player.querySelector("iframe")
+                if (iframe) iframe.src = ""
+                player.remove()
+            })
+        })
+    }
+
+    const handleSelect = () => {
+        const youkuVideo = getCurrentYoukuSlide()
+
+        clearYoukuTimer()
+        removeYoukuPlayers()
+
+        if (youkuVideo) {
+            const number = Number(youkuVideo.getAttribute("data-duration"))
+            const duration = number > 0 ? number * 1000 : 30000
+
+            createYoukuIframe(youkuVideo)
+            stopAutoplayNextTick(swiper)
+
+            youkuTimer = setTimeout(() => {
+                if (swiper.autoPlayPause) return
+
+                slideNextOrFirst(swiper)
+                startAutoplay(swiper)
+            }, duration)
+        } else {
+            startAutoplay(swiper)
+        }
+    }
+
+    swiper.on("slideChange", handleSelect)
+    swiper.on("destroy", () => {
+        clearYoukuTimer()
+        removeYoukuPlayers()
+    })
+
+    handleSelect()
+}

package/src/layouts/_template.pug

@@ -26,6 +26,8 @@ html(lang="zh-Hant-TW" data-overlayscrollbars-initialize)
     block stylesheet
     // 主頁面 CSS
     link(rel="stylesheet", href=`/src/assets/css/pages/${css}.sass`)
+    // YT-API
+    script(src="https://www.youtube.com/iframe_api")
     // 共用 JS
     script(defer type="module" src=`/src/assets/js/apps/${page}/page.js`) 
     // 若 video4 有開 Ig reels, 引入以下網址

package/src/pages/index.pug

@@ -290,76 +290,64 @@ block content
                     li 藥品服務
             dropdown-el.dropdown4.disabled(d4-placeholder="請先選擇服務分類")
   section.section6
+    -
+      const videoDemoData = [
+        {
+          type: 'youtube',
+          title: 'YouTube Demo',
+          videoID: 'zKYNITx17Mw',
+        },
+        {
+          type: 'youku',
+          title: 'Youku Demo',
+          videoID: 'XNjQ5NDk1NTc4OA',
+          duration: 3,
+        },
+        {
+          type: 'video',
+          title: 'video Demo',
+          videoID: 'https://cdn.wdd.idv.tw/video/chappie_Video1.mp4',
+        },
+      ]
     .container
-      h3 Collapse 👇
+      h3 VIDEO 👇
       .wrap
-        .collapseItem(partnerCollapse-wrapper)
-          .collapseTitle(collapse-block)
-            p 以下是公版套件
-            i.arrow
-          .collapseContent(collapse-target)
-            .innerBox
-              .content  
-                p aaaaa
-                p aaaaa
-                p aaaaa
-                p aaaaa
-        .collapseItem(partnerCollapse-wrapper)
-          .collapseTitle(collapse-block)
-            p BBBBB
-            i.arrow
-          .collapseContent(collapse-target)
-            .innerBox
-              .content  
-                p bbbbb
-                p bbbbb
-                p bbbbb
-                p bbbbb
-        .collapseItem(partnerCollapse-wrapper)
-          .collapseTitle(collapse-block)
-            p CCCCC
-            i.arrow
-          .collapseContent(collapse-target)
-            .innerBox
-              .content  
-                p ccccc
-                p ccccc
-                p ccccc
-                p ccccc
+        // 
+        .titleBox
+          .heading
+            .sub-title EMBLA
+        .embla.embla-video-demo
+          .embla__viewport
+            .embla__container
+              each item in videoDemoData
+                .embla__slide
+                  .video-demo-card
+                    .video-demo-label
+                      span= item.title
+                      small= item.videoID
+                    if item.type === 'video'
+                      .mediaBox
+                        video(src=item.videoID muted playsinline)
+                    else
+                      .mediaBox(data-type=item.type data-videoID=item.videoID data-duration=item.duration?item.duration:false)
       .wrap
-        .collapseItem(data-collapse)
-          .collapseTitle(data-collapse-click)
-            p 以下是簡易版
-            i.arrow
-          .collapseBox(data-collapse-content)
-            .innerBox
-              .content  
-                p aaaaa
-                p aaaaa
-                p aaaaa
-                p aaaaa
-        .collapseItem(data-collapse)
-          .collapseTitle(data-collapse-click)
-            p BBBBB
-            i.arrow
-          .collapseBox(data-collapse-content)
-            .innerBox
-              .content  
-                p bbbbb
-                p bbbbb
-                p bbbbb
-                p bbbbb
-        .collapseItem(data-collapse)
-          .collapseTitle(data-collapse-click)
-            p CCCCC
-            i.arrow
-          .collapseBox(data-collapse-content)
-            .innerBox
-              .content  
-                p ccccc
-                p ccccc
-                p ccccc
-                p ccccc
+        .titleBox
+          .heading
+            .sub-title SWIPER
+        .swiper.swiper-video-demo
+          .swiper-wrapper
+            each item in videoDemoData
+              .swiper-slide
+                .video-demo-card
+                  .video-demo-label
+                    span= item.title
+                    small= item.videoID
+                  if item.type === 'video'
+                    .mediaBox
+                      video(src=item.videoID muted playsinline)
+                  else
+                    .mediaBox(data-type=item.type data-videoID=item.videoID data-duration=item.duration?item.duration:false)
+
   section.section7
     .container
       h3 Ripple4 👇