@xwadex/fesd 0.0.1

package/src/fesd/marquee4/marquee4.js

@@ -0,0 +1,371 @@
+'use strict';
+
+// 獲取標籤上斷點設定
+function getBreakpoints(m4) {
+  const breakpoints = {};
+  [...m4.attributes].forEach(attr => {
+    if (attr.name.includes('duration-')) {
+      const key = attr.name.replace('duration-', '');
+      const value = attr.nodeValue;
+      breakpoints[key] = Number(value);
+    }
+  });
+  return Object.keys(breakpoints).length === 0 ? null : breakpoints;
+}
+
+// 透過標籤上設定的斷點判斷持續時間
+function getDuration(m4) {
+  if (getBreakpoints(m4)) {
+    let breakpoint;
+    const points = Object.keys(getBreakpoints(m4)).map(point => {
+      return {
+        value: point,
+        point,
+      };
+    });
+    points.sort((a, b) => parseInt(b.value, 10) - parseInt(a.value, 10));
+    for (let i = 0; i < points.length; i += 1) {
+      const { point, value } = points[i];
+      if (window.matchMedia(`(max-width: ${value}px)`).matches) {
+        breakpoint = point;
+      }
+    }
+    return breakpoint ? Number(getBreakpoints(m4)[breakpoint]) : m4.s.options.duration;
+  } else {
+    return m4.s.options.duration;
+  }
+}
+
+// 產生動畫結構
+function createAnimateWrap(m4) {
+  const { behavior, continual, gap } = m4.s.options;
+  const childDOM = m4.childNodes;
+  const container = document.createElement('div');
+  const animateItem = document.createElement('div');
+  container.className = 'animate-container';
+  animateItem.className = 'animate-item';
+  [...childDOM].forEach(element => {
+    animateItem.append(element);
+  });
+  function cloneElement() {
+    const cloneAnimateWrap = animateItem.cloneNode(true);
+    cloneAnimateWrap.classList.add('clone');
+    m4.s.cloneAnimation = null;
+    m4.s.cloneAnimateEl = cloneAnimateWrap;
+    return cloneAnimateWrap;
+  }
+  m4.s.animation = null;
+  m4.s.animateEl = animateItem;
+  m4.textContent = '';
+  container.append(animateItem);
+  m4.append(container);
+  if (animateItem.clientWidth * 2 + gap >= m4.clientWidth) {
+    if (behavior === 'normal' && continual) {
+      container.append(cloneElement());
+    }
+  } else {
+    m4.s.options.continual = false;
+  }
+}
+
+// 設定動畫影格
+function keyframes(m4) {
+  const { behavior, direction, continual } = m4.s.options;
+  let framesObj = {};
+  // 判斷模式
+  switch (behavior) {
+    case 'normal':
+      // 判斷方向
+      // normal 模式會判斷是否開啟 continual
+      let animateFrom, animateTo;
+      switch (direction) {
+        case 'top':
+          animateFrom = continual ? 'translate3d(0,100%,0)' : `translate3d(0,${m4.clientHeight}px,0)`;
+          animateTo = continual ? 'translate3d(0,-100%,0)' : 'translate3d(0,-100%,0)';
+          framesObj.animate1 = [{ transform: animateFrom }, { transform: animateTo }];
+          if (continual) {
+            framesObj.animate2 = [{ transform: 'translate3d(0,0,0)' }, { transform: 'translate3d(0,-200%,0)' }];
+          }
+          break;
+        case 'right':
+          animateFrom = continual ? 'translate3d(0,0,0)' : 'translate3d(-100%,0,0)';
+          animateTo = continual ? 'translate3d(200%,0,0)' : `translate3d(${m4.clientWidth}px,0,0)`;
+          framesObj.animate1 = [{ transform: animateFrom }, { transform: animateTo }];
+          if (continual) {
+            framesObj.animate2 = [{ transform: 'translate3d(-100%,0,0)' }, { transform: 'translate3d(100%,0,0)' }];
+          }
+          break;
+        case 'bottom':
+          animateFrom = continual ? 'translate3d(0,-100%,0)' : 'translate3d(0,-100%,0)';
+          animateTo = continual ? 'translate3d(0,100%,0)' : `translate3d(0,${m4.clientHeight}px,0)`;
+          framesObj.animate1 = [{ transform: animateFrom }, { transform: animateTo }];
+          if (continual) {
+            framesObj.animate2 = [{ transform: 'translate3d(0,-200%,0)' }, { transform: 'translate3d(0,0,0)' }];
+          }
+          break;
+        case 'left':
+          animateFrom = continual ? 'translate3d(100%,0,0)' : `translate3d(${m4.clientWidth}px,0,0)`;
+          animateTo = continual ? 'translate3d(-100%,0,0)' : 'translate3d(-100%,0,0)';
+          framesObj.animate1 = [{ transform: animateFrom }, { transform: animateTo }];
+          if (continual) {
+            framesObj.animate2 = [{ transform: 'translate3d(0,0,0)' }, { transform: 'translate3d(-200%,0,0)' }];
+          }
+          break;
+      }
+      break;
+    // 來回模式
+    case 'alternate':
+      // 判斷方向
+      switch (direction) {
+        case 'top':
+          framesObj.animate1 = [{ transform: `translate3d(0,calc(${m4.clientHeight}px - 100%),0)` }, { transform: `translate3d(0,0,0)` }, { transform: `translate3d(0,calc(${m4.clientHeight}px - 100%),0)` }];
+          break;
+        case 'right':
+          framesObj.animate1 = [{ transform: `translate3d(0,0,0)` }, { transform: `translate3d(calc(-100% + ${m4.clientWidth}px),0,0)` }, { transform: `translate3d(0,0,0)` }];
+          break;
+        case 'bottom':
+          framesObj.animate1 = [{ transform: `translate3d(0,0,0)` }, { transform: `translate3d(0,calc(${m4.clientHeight}px - 100%),0)` }, { transform: `translate3d(0,0,0)` }];
+          break;
+        case 'left':
+          framesObj.animate1 = [{ transform: `translate3d(calc(-100% + ${m4.clientWidth}px),0,0)` }, { transform: `translate3d(0,0,0)` }, { transform: `translate3d(calc(-100% + ${m4.clientWidth}px),0,0)` }];
+          break;
+      }
+      break;
+    case 'endStop':
+      // 判斷方向
+      switch (direction) {
+        case 'top':
+          framesObj.animate1 = [{ transform: `translate3d(0,${m4.clientHeight}px,0)` }, { transform: `translate3d(0,0,0)` }];
+          break;
+        case 'right':
+          framesObj.animate1 = [{ transform: `translate3d(-100%,0,0)` }, { transform: `translate3d(0,0,0)` }];
+          break;
+        case 'bottom':
+          framesObj.animate1 = [{ transform: `translate3d(0,-100%,0)` }, { transform: `translate3d(0,calc(${m4.clientHeight}px - 100%),0)` }];
+          break;
+        case 'left':
+          framesObj.animate1 = [{ transform: `translate3d(${m4.clientWidth}px,0,0)` }, { transform: `translate3d(calc(${m4.clientWidth}px - 100%),0,0)` }];
+          break;
+      }
+      break;
+  }
+  return framesObj;
+}
+
+function debounce(func) {
+  let timer;
+  return function (event) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(func, 200, event);
+  };
+}
+
+class Marquee4 extends HTMLElement {
+  constructor() {
+    super();
+    this.initialize = false;
+  }
+  static get observedAttributes() {
+    return [];
+  }
+  attributeChangedCallback(attr, oldVal, newVal) { }
+  connectedCallback() {
+    if (this.initialize) return;
+    this.initialize = true;
+    this.#create();
+  }
+  #create() {
+    const options = {
+      direction: this.getAttribute('direction') || fesdDB.marquee4.SETTINGS.direction, // up / down / left / right
+      behavior: this.getAttribute('behavior') || fesdDB.marquee4.SETTINGS.behavior, // normal / alternate / endStop
+      duration: Number(this.getAttribute('duration')) || fesdDB.marquee4.SETTINGS.duration, // ms
+      durationBreakpoints: getBreakpoints(this) || fesdDB.marquee4.SETTINGS.durationBreakpoints,
+      autoplay: this.getAttribute('autoplay') || fesdDB.marquee4.SETTINGS.autoplay, // normal / alternate / endStop
+      pauseOnMouseenter: this.getAttribute('pauseOnMouseEnter') ? (this.getAttribute('pauseOnMouseEnter') === 'true' ? true : false) : fesdDB.marquee4.SETTINGS.pauseOnMouseenter, // true / false
+      continual: this.getAttribute('continual') ? (this.getAttribute('continual') === 'true' ? true : false) : fesdDB.marquee4.SETTINGS.continual, // true / false
+      gap: Number(this.getAttribute('gap')) || fesdDB.marquee4.SETTINGS.gap,
+    };
+    this.s = {};
+    this.s.options = options;
+    this.s.nowDuration = getDuration(this);
+    createAnimateWrap(this);
+    this.#init();
+  }
+  #init() {
+    const { direction, continual, gap } = this.s.options;
+    // 方向為左/右
+    switch (direction) {
+      case 'left':
+      case 'right':
+        this.style.cssText = `--continual-gap: ${gap}px;`;
+        break;
+      case 'top':
+      case 'bottom':
+        if (continual) {
+          this.style.cssText = `height: ${this.s.animateEl.clientHeight}px;--continual-gap: ${gap}px;`;
+        } else {
+          this.style.cssText = `min-height: ${this.s.animateEl.clientHeight}px;--continual-gap: ${gap}px;`;
+        }
+        break;
+    }
+    this.#animation();
+    this.#event();
+    if (continual) {
+      this.classList.add(`continual`);
+    }
+    this.classList.add('m4-initialize');
+  }
+  #animation() {
+    const m4 = this;
+    const { direction, behavior, duration, autoplay, pauseOnMouseenter, continual } = m4.s.options;
+    let playDelay; //跑馬燈自動撥放開始前的延遲時間
+    function animateInit() {
+      // 判斷模式
+      switch (behavior) {
+        case 'normal':
+          m4.s.animateEl.style.transform = `${keyframes(m4).animate1[0].transform}`;
+          m4.s.animation = m4.s.animateEl.animate(keyframes(m4).animate1, {
+            duration: m4.s.nowDuration,
+            iterations: Infinity,
+          });
+          if (continual) {
+            m4.s.cloneAnimateEl.style.transform = `${keyframes(m4).animate2[0].transform}`;
+            m4.s.cloneAnimation = m4.s.cloneAnimateEl.animate(keyframes(m4).animate2, {
+              duration: m4.s.nowDuration,
+              delay: -m4.s.nowDuration / 2,
+              iterations: Infinity,
+            });
+          }
+          break;
+        case 'alternate':
+          let moveDistance; //移動的距離
+          let averageDuration; //平均速率
+          // 進場的keyframe
+          function enterKeyframes() {
+            let framesArr = [];
+            switch (direction) {
+              case 'top':
+                moveDistance = Math.abs(m4.s.animateEl.scrollHeight - m4.clientHeight);
+                averageDuration = parseInt(m4.s.nowDuration / (moveDistance * 2)) * m4.s.animateEl.scrollHeight;
+                framesArr = [{ transform: `translate3d(0,${m4.clientHeight}px,0)` }, { transform: `translate3d(0,calc(${m4.clientHeight}px - 100%),0)` }];
+                break;
+              case 'right':
+                moveDistance = Math.abs(m4.s.animateEl.scrollWidth - m4.clientWidth);
+                averageDuration = parseInt(m4.s.nowDuration / (moveDistance * 2)) * m4.s.animateEl.scrollWidth;
+                framesArr = [{ transform: `translate3d(-100%,0,0)` }, { transform: `translate3d(0,0,0)` }];
+                break;
+              case 'bottom':
+                moveDistance = Math.abs(m4.s.animateEl.scrollHeight - m4.clientHeight);
+                averageDuration = parseInt(duration / (moveDistance * 2)) * m4.s.animateEl.scrollHeight;
+                framesArr = [{ transform: `translate3d(0,-100%,0)` }, { transform: `translate3d(0,0,0)` }];
+                break;
+              case 'left':
+                moveDistance = Math.abs(m4.s.animateEl.scrollWidth - m4.clientWidth);
+                averageDuration = parseInt(duration / (moveDistance * 2)) * m4.s.animateEl.scrollWidth;
+                framesArr = [{ transform: `translate3d(${m4.clientWidth}px,0,0)` }, { transform: `translate3d(calc(-100% + ${m4.clientWidth}px),0,0)` }];
+                break;
+            }
+            return framesArr;
+          }
+          // 跑馬燈範圍高度大於內容高度或是方向為左/右時
+          if (m4.clientHeight > m4.s.animateEl.scrollHeight || direction === 'left' || direction === 'right') {
+            m4.s.animateEl.style.transform = `${enterKeyframes()[0].transform}`;
+            const enterAnimate = m4.s.animateEl.animate(enterKeyframes(), {
+              duration: averageDuration,
+              fill: 'forwards',
+            });
+            enterAnimate.finished.then(() => {
+              m4.s.animation = m4.s.animateEl.animate(keyframes(m4).animate1, {
+                duration: m4.s.nowDuration,
+                iterations: Infinity,
+              });
+            });
+          }
+          if (m4.s.animation) {
+            m4.s.animation.ready.then(() => {
+              m4.s.animateEl.classList.add('ready');
+            });
+          }
+          break;
+        case 'endStop':
+          m4.s.animateEl.style.transform = `${keyframes(m4).animate1[0].transform}`;
+          m4.s.animation = m4.s.animateEl.animate(keyframes(m4).animate1, {
+            duration: m4.s.nowDuration,
+            fill: 'forwards',
+          });
+          break;
+      }
+      m4.s.animateEl.classList.add('start');
+      if (autoplay === false) {
+        m4.s.animateEl.classList.remove('start');
+        m4.s.animation.cancel();
+      }
+    }
+    clearTimeout(playDelay);
+    playDelay = setTimeout(
+      () => {
+        animateInit();
+      },
+      autoplay ? autoplay : 0,
+    );
+
+    // mouseenter/leave Event
+    m4.addEventListener('mouseenter', function () {
+      if (m4.s.animation && pauseOnMouseenter && m4.s.animation.playState === 'running') {
+        m4.pause();
+      }
+    });
+    m4.addEventListener('mouseleave', function () {
+      if (m4.s.animation && pauseOnMouseenter && m4.s.animation.playState === 'paused') {
+        m4.play();
+      }
+    });
+  }
+  #event() {
+    const m4 = this;
+    function updateDuration() {
+      const startTime = m4.s.animation.startTime;
+      const cloneStartTime = m4.s.cloneAnimation ? m4.s.cloneAnimation.startTime : null;
+      m4.s.nowDuration = getDuration(m4);
+      m4.s.animation.cancel();
+      if (m4.s.cloneAnimation) {
+        m4.s.cloneAnimation.cancel();
+      }
+      m4.s.animation = m4.s.animateEl.animate(keyframes(m4).animate1, {
+        duration: m4.s.nowDuration,
+        iterations: Infinity,
+      });
+      m4.s.animation.startTime = startTime;
+      if (m4.s.cloneAnimation) {
+        m4.s.cloneAnimation = m4.s.cloneAnimateEl.animate(keyframes(m4).animate2, {
+          duration: m4.s.nowDuration,
+          delay: -m4.s.nowDuration / 2,
+          iterations: Infinity,
+        });
+        m4.s.cloneAnimation.startTime = cloneStartTime;
+      }
+    }
+    window.addEventListener('resize', debounce(updateDuration));
+  }
+  play() {
+    this.s.animation.play();
+    this.s.animateEl.classList.add('start');
+    if (this.s.options.continual) {
+      this.s.cloneAnimation.play();
+      this.s.cloneAnimateEl.classList.add('start');
+    }
+  }
+  pause() {
+    this.s.animation.pause();
+    if (this.s.options.continual) {
+      this.s.cloneAnimation.pause();
+    }
+  }
+}
+
+// define custom element
+// if (!customElements.get('marquee-el')) {
+//   customElements.define('marquee-el', Marquee4);
+// }
+
+export default Marquee4;

package/src/fesd/modal4/_modal4.sass

@@ -0,0 +1,134 @@
+modern-modal
+  position: fixed
+  z-index: 10
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  background-color: rgba(0, 0, 0, .6)
+  backdrop-filter: blur(10px)
+  opacity: 0
+  pointer-events: none
+  transition: .5s .3s
+  display: none
+  &.show
+    opacity: 1
+    pointer-events: auto
+    transition: .5s
+  .modal-scroller
+    position: relative
+    width: 100%
+    height: 100%
+  .modal-wrapper
+    display: flex
+    flex-direction: column
+    min-height: 100%
+  .modal-content
+    position: relative
+    width: 100%
+    max-width: 800px
+    background-color: #fff
+    margin: auto
+
+// animation
+modern-modal
+  &[data-modal-animate="fade-up"]
+    &.show
+      .modal-content
+        opacity: 1
+        transform: translate(0)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      transform: translateY(50px)
+      transition: .6s
+  &[data-modal-animate="fade-down"]
+    &.show
+      .modal-content
+        opacity: 1
+        transform: translate(0)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      transform: translateY(-50px)
+      transition: .6s
+  &[data-modal-animate="fade-right"]
+    &.show
+      .modal-content
+        opacity: 1
+        transform: translate(0)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      transform: translateX(-50px)
+      transition: .6s
+  &[data-modal-animate="fade-left"]
+    &.show
+      .modal-content
+        opacity: 1
+        transform: translate(0)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      transform: translateX(50px)
+      transition: .6s
+  &[data-modal-animate="zoom-in"]
+    &.show
+      .modal-content
+        opacity: 1
+        transform: scale(1)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      transform: scale(.8)
+      transition: .6s
+  &[data-modal-animate="zoom-out"]
+    &.show
+      .modal-content
+        opacity: 1
+        transform: scale(1)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      transform: scale(1.2)
+      transition: .6s
+  &[data-modal-animate="clip-up"]
+    &.show
+      .modal-content
+        opacity: 1
+        clip-path: polygon(0 -15%, 100% 0, 100% 100%, 0 100%)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
+      transition: .6s
+  &[data-modal-animate="clip-down"]
+    &.show
+      .modal-content
+        opacity: 1
+        clip-path: polygon(0 0, 100% 0, 100% 115%, 0 100%)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)
+      transition: .6s
+  &[data-modal-animate="clip-right"]
+    &.show
+      .modal-content
+        opacity: 1
+        clip-path: polygon(0 0, 115% 0, 100% 100%, 0 100%)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
+      transition: .6s
+  &[data-modal-animate="clip-left"]
+    &.show
+      .modal-content
+        opacity: 1
+        clip-path: polygon(-15% 0, 100% 0, 100% 100%, 0 100%)
+        transition: .6s .2s
+    .modal-content
+      opacity: 0
+      clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)
+      transition: .6s