@xwadex/fesd 0.0.1

package/src/fesd/anchor4/anchor4.js

@@ -0,0 +1,179 @@
+import SHARED from './../shared/shared';
+import { isString, isElementExist, isFunction, getElement, getAllElements } from './../shared/utils';
+
+const ease = {
+  easeInOutCirc(t, b, c, d) {
+    if ((t /= d / 2) < 1) return (-c / 2) * (Math.sqrt(1 - t * t) - 1) + b;
+    return (c / 2) * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
+  },
+  easeInQuart(t, b, c, d) {
+    return c * (t /= d) * t * t * t + b;
+  },
+  easeOutQuart(t, b, c, d) {
+    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
+  },
+};
+
+// scroll handler
+const scrollTo = (options, instance) => {
+  const { target, container, spacer, speed, gap, easing, direction } = options;
+
+  const isHorizontal = direction === 'horizontal';
+  const scrollDirection = isHorizontal ? 'scrollLeft' : 'scrollTop';
+  const rectPosition = isHorizontal ? 'left' : 'top';
+  const rectSpace = isHorizontal ? 'width' : 'height';
+
+  const containerEle = isElementExist(container) ? getElement(container) : document.scrollingElement;
+  const start = containerEle[scrollDirection];
+  const targetPoint = isElementExist(target) ? getElement(target).getBoundingClientRect()[rectPosition] : 0 - start;
+  const spacerGap = isElementExist(spacer) ? getElement(spacer).getBoundingClientRect()[rectSpace] : 0;
+  const change = targetPoint - gap - spacerGap;
+  const increment = 15;
+  let currentTime = 0;
+
+  if (change === 0) return;
+
+  const emitEvent = eventName => {
+    const targetEle = getElement(target);
+    if (instance) instance.emit(eventName, targetEle);
+    if (!instance && options.on) {
+      if (isFunction(options.on[eventName])) options.on[eventName](targetEle);
+    }
+  };
+
+  emitEvent('beforeScroll');
+
+  const animateScroll = () => {
+    currentTime += increment;
+    const val = ease[easing](currentTime, start, change, speed);
+    containerEle[scrollDirection] = val;
+    if (currentTime < speed) requestAnimationFrame(animateScroll);
+    if (currentTime >= speed) emitEvent('afterScroll');
+  };
+
+  requestAnimationFrame(animateScroll);
+};
+
+// class Anchor4
+class Anchor4 {
+  constructor(el, options = {}) {
+    this.__storage__ = {
+      el,
+      options,
+    };
+
+    this.#create();
+  }
+
+  #create() {
+    const { el, options } = this.__storage__;
+    if (!isString(el) || !isElementExist(el)) return;
+
+    const { SETTINGS, EVENTS } = fesdDB.anchor4;
+
+    this.elements = getAllElements(el);
+    this.options = Object.assign({}, SETTINGS, options);
+    this.__events__ = Object.assign({}, EVENTS);
+
+    if (this.options.on) {
+      for (const [k, v] of Object.entries(this.options.on)) {
+        this.__events__[k] = [v];
+      }
+    }
+
+    this.#init();
+  }
+
+  #init() {
+    const { elements, options } = this;
+
+    elements.forEach(el => {
+      el.anchor = {};
+      el.anchor.instance = this;
+      el.anchor.eventHandler = this.#trigger;
+      el.anchor.defaultOptions = options;
+      el.addEventListener('click', el.anchor.eventHandler);
+    });
+
+    this.emit('afterInit');
+  }
+
+  #trigger() {
+    /** the keyword `this` in this method is pointed to the click target */
+    const { defaultOptions, eventHandler, instance } = this.anchor;
+
+    const options = {
+      target: this.getAttribute('data-anchor-target') || defaultOptions.target,
+      container: this.getAttribute('data-anchor-container') || defaultOptions.container,
+      spacer: this.getAttribute('data-anchor-spacer') || defaultOptions.spacer,
+      gap: parseInt(this.getAttribute('data-anchor-gap') || defaultOptions.gap),
+      speed: parseInt(this.getAttribute('data-anchor-speed')) || defaultOptions.speed,
+      delay: parseInt(this.getAttribute('data-anchor-delay')) || defaultOptions.delay,
+      easing: this.getAttribute('data-anchor-easing') || defaultOptions.easing,
+      direction: this.getAttribute('data-anchor-direction') || defaultOptions.direction,
+    };
+
+    // prevent multiple click
+    this.removeEventListener('click', eventHandler);
+    setTimeout(() => {
+      this.addEventListener('click', eventHandler);
+    }, options.speed);
+
+    // do scroll
+    setTimeout(() => {
+      scrollTo(options, instance);
+    }, options.delay);
+  }
+
+  destroy() {
+    const { elements } = this;
+
+    this.emit('beforeDestroy');
+
+    elements.forEach(el => {
+      if (!el.anchor) return;
+
+      el.removeEventListener('click', el.anchor.eventHandler);
+      delete el.anchor;
+    });
+
+    return this;
+  }
+
+  update() {
+    this.destroy().#create();
+
+    this.emit('afterUpdate');
+
+    return this;
+  }
+
+  static run(options) {
+    const { SETTINGS } = fesdDB.anchor4;
+    const newOptions = Object.assign({}, SETTINGS, options);
+
+    setTimeout(() => {
+      scrollTo(newOptions);
+    }, newOptions.delay);
+  }
+
+  static url(options) {
+    const { SETTINGS } = fesdDB.anchor4;
+
+    const targetStr = window.location.search || window.location.hash;
+    const targetName = targetStr.split('?').pop();
+    const target = document.querySelector(`[data-anchor-id="${targetName}"]`);
+
+    if (!target) return;
+
+    const newOptions = Object.assign({}, SETTINGS, options, { target });
+
+    setTimeout(() => {
+      scrollTo(newOptions);
+    }, newOptions.delay);
+  }
+}
+
+Object.assign(Anchor4.prototype, SHARED);
+
+export default Anchor4;

package/src/fesd/aost4/_aost4.sass

@@ -0,0 +1,64 @@
+// aost
+[data-aost]
+  // animations
+  &[data-aost-fade]
+    opacity: 0
+    &.aost-show
+      opacity: 1
+      transition: opacity var(--aost-trans, .8s)
+  &[data-aost-fade-up]
+    opacity: 0
+    transform: translateY(50px)
+    &.aost-show
+      opacity: 1
+      transform: translateY(0)
+      transition: opacity var(--aost-trans, .8s), transform var(--aost-trans, .8s)
+  &[data-aost-fade-down]
+    opacity: 0
+    transform: translateY(-50px)
+    &.aost-show
+      opacity: 1
+      transform: translateY(0)
+      transition: opacity var(--aost-trans, .8s), transform var(--aost-trans, .8s)
+  &[data-aost-fade-right]
+    opacity: 0
+    transform: translateX(50px)
+    &.aost-show
+      opacity: 1
+      transform: translateY(0)
+      transition: opacity var(--aost-trans, .8s), transform var(--aost-trans, .8s)
+  &[data-aost-fade-left]
+    opacity: 0
+    transform: translateX(-50px)
+    &.aost-show
+      opacity: 1
+      transform: translateY(0)
+      transition: opacity var(--aost-trans, .8s), transform var(--aost-trans, .8s)
+  &[data-aost-clip-down]
+    opacity: 0
+    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)
+    &.aost-show
+      opacity: 1
+      clip-path: polygon(0 0, 100% 0, 100% 115%, 0 100%)
+      transition: opacity var(--aost-trans, .8s), clip-path var(--aost-trans, .8s)
+  &[data-aost-clip-left]
+    opacity: 0
+    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
+    &.aost-show
+      opacity: 1
+      clip-path: polygon(0 0, 110% 0, 100% 100%, 0 100%)
+      transition: opacity var(--aost-trans, .8s), clip-path var(--aost-trans, .8s)
+  &[data-aost-clip-right]
+    opacity: 0
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)
+    &.aost-show
+      opacity: 1
+      clip-path: polygon(-10% 0, 100% 0, 100% 100%, 0% 100%)
+      transition: opacity var(--aost-trans, .8s), clip-path var(--aost-trans, .8s)
+  &[data-aost-scale]
+    opacity: 0
+    transform: scale(.5)
+    &.aost-show
+      opacity: 1
+      transform: scale(1)
+      transition: opacity var(--aost-trans, .8s), clip-path var(--aost-trans, .8s)

package/src/fesd/aost4/aost4.js

@@ -0,0 +1,138 @@
+import SHARED from './../shared/shared';
+import { isString, isElementExist, getElement, getAllElements } from './../shared/utils';
+
+const interaction = (scrollElement, elements) => {
+  const viewHeight = scrollElement === window ? scrollElement.innerHeight : scrollElement.getBoundingClientRect().height;
+  const viewTop = scrollElement === window ? 0 : scrollElement.getBoundingClientRect().top;
+
+  elements.forEach(el => {
+    const { class: className, delay, start, end, repeat, instance } = el.aost;
+
+    const { top, bottom } = el.getBoundingClientRect();
+    const startTrigger = viewHeight * (start / 100);
+    const endTrigger = viewHeight * (end / 100);
+    const isEntered = top - viewTop <= startTrigger && bottom - viewTop >= endTrigger;
+
+    // in view
+    if (isEntered && el.offsetParent) {
+      setTimeout(() => {
+        // instance.emit('enter', el);
+        el.classList.add(className);
+      }, delay);
+    }
+    // out of view
+    else {
+      const shouldRemove = (el.classList.contains(className) && repeat === 'down' && top - viewTop >= startTrigger) || (repeat === 'up' && bottom - viewTop <= endTrigger) || repeat === true;
+      setTimeout(() => {
+        // instance.emit('leave', el);
+        if (shouldRemove) el.classList.remove(className);
+      }, delay);
+    }
+  });
+};
+
+const detectRepeat = (repeatType, options) => {
+  if (repeatType === 'up' || repeatType === 'down') {
+    return repeatType;
+  }
+
+  if (repeatType !== null) {
+    if (repeatType === 'true') {
+      return true;
+    } else if (repeatType === 'false') {
+      return false;
+    } else {
+      return options.repeat;
+    }
+  }
+
+  return options.repeat;
+};
+
+class Aost4 {
+  constructor(el, options = {}) {
+    this.__storage__ = {
+      el,
+      options,
+    };
+
+    this.#create();
+  }
+
+  #create() {
+    const { el, options } = this.__storage__;
+    if (!isString(el) || !isElementExist(el)) return;
+
+    const { SETTINGS, EVENTS } = fesdDB.aost4;
+
+    this.elements = getAllElements(el);
+    this.options = Object.assign({}, SETTINGS, options);
+    this.__events__ = Object.assign({}, EVENTS);
+
+    if (this.options.on) {
+      for (const [k, v] of Object.entries(this.options.on)) {
+        this.__events__[k] = [v];
+      }
+    }
+
+    this.#init();
+  }
+
+  #init() {
+    const { elements, options } = this;
+    const { scroller } = options;
+    const scrollElement = scroller === window || !isElementExist(scroller) ? window : getElement(scroller);
+
+    this.eventHandler = () => {
+      interaction(scrollElement, elements);
+    };
+
+    elements.forEach(el => {
+      el.aost = {};
+      el.aost.class = el.getAttribute('data-aost-class') || options.class;
+      el.aost.delay = parseInt(el.getAttribute('data-aost-delay')) || options.delay;
+      el.aost.start = parseInt(el.getAttribute('data-aost-start')) || options.start;
+      el.aost.end = parseInt(el.getAttribute('data-aost-end')) || options.end;
+      el.aost.repeat = detectRepeat(el.getAttribute('data-aost-repeat'), options);
+      el.aost.instance = this;
+    });
+
+    const { eventHandler } = this;
+    eventHandler();
+    scrollElement.aost = {};
+    scrollElement.aost.eventHandler = eventHandler;
+    scrollElement.addEventListener('scroll', scrollElement.aost.eventHandler, false);
+  }
+
+  destroy(removeShow) {
+    const { elements, options } = this;
+    if (!elements) return this;
+
+    const { scroller } = options;
+    const scrollElement = scroller === window || !isElementExist(scroller) ? window : getElement(scroller);
+
+    if (scrollElement.aost) {
+      scrollElement.removeEventListener('scroll', scrollElement.aost.eventHandler);
+      delete scrollElement.aost;
+    }
+
+    elements.forEach(el => {
+      if (!el.aost) return;
+      const { class: className } = el.aost;
+      if (removeShow) {
+        el.classList.remove(className);
+      }
+      delete el.aost;
+    });
+
+    return this;
+  }
+
+  update(removeShow) {
+    this.destroy(removeShow).#create();
+  }
+}
+
+Object.assign(Aost4.prototype, SHARED);
+
+export default Aost4;

package/src/fesd/article4/article4.js

@@ -0,0 +1,280 @@
+// import Swiper bundle with all modules installed
+import { Swiper as SwiperV8 } from 'swiper/bundle';
+import { isString, isNodeList, isElementExist, getAllElements, createUid } from './../shared/utils';
+
+('use strict');
+
+// 設置 CSS 樣式
+const setCss = (target, style, css) => {
+  if (!target) return;
+
+  // 若是 NodeList 則需使用 foreach set css
+  if (isNodeList(target)) target.forEach(el => (el.style[style] = css));
+  else target.style[style] = css;
+};
+
+class Article4 {
+  constructor(el, options = {}) {
+    if (!isString(el) || !isElementExist(el)) return;
+
+    this.__storage__ = {
+      el,
+      options,
+    };
+
+    this.#create();
+  }
+
+  #create() {
+    const { el, options } = this.__storage__;
+    const { SETTINGS } = fesdDB.article4;
+
+    this.elements = getAllElements(el);
+    this.options = Object.assign({}, SETTINGS, options);
+
+    this.#init();
+  }
+
+  #init() {
+    const { elements } = this;
+
+    elements.forEach(parent => {
+      parent.querySelectorAll('._article').forEach(el => {
+        el.article = {};
+        el.article.parent = parent;
+        el.article.params = this.#getArticleData(el);
+
+        this.#setStyle(el).#createVideo4(el).#createSwiper(el);
+      });
+    });
+  }
+
+  // 取得元件上的設定值
+  #getArticleData(element) {
+    return {
+      // 元件本身
+      $selector: element,
+
+      // 父層元件
+      $backgroundWrap: element.querySelector('._backgroundWrap'),
+      $contentWrap: element.querySelector('._contentWrap'),
+      $wordCover: element.querySelector('._wordCover'),
+      $buttonCover: element.querySelector('._buttonCover'),
+      $imgCover: element.querySelector('._imgCover'),
+      $cover: element.querySelectorAll('._cover'),
+      $swiper: element.querySelector('.swiper'),
+      $swiperButtonCover: element.querySelector('.swiper-button-cover'),
+
+      // 子層元件
+      $h: element.querySelector('._H'),
+      $subH: element.querySelector('._subH'),
+      $p: element.querySelector('._P'),
+      $button: element.querySelector('._button'),
+      $description: element.querySelectorAll('._description'),
+      $video: element.querySelectorAll('[video-id]'),
+
+      // 父層設定
+      typeFullColor: element.getAttribute('typeFull-color'),
+      typeFullBoxColor: element.getAttribute('typeFull-boxcolor'),
+
+      // 子層設定
+      hColor: element.getAttribute('h-color'),
+      subHColor: element.getAttribute('subh-color'),
+      pColor: element.getAttribute('p-color'),
+      buttonColor: element.getAttribute('button-color'),
+      buttonColorHover: element.getAttribute('button-color-hover'),
+      buttonTextColor: element.getAttribute('button-textcolor'),
+      descriptionColor: element.getAttribute('description-color'),
+    };
+  }
+
+  // 設置設定值的 CSS 樣式
+  #setStyle(element) {
+    const { params } = element.article;
+
+    // article ._H
+    setCss(params.$h, 'color', params.hColor);
+
+    // article ._subH
+    setCss(params.$subH, 'color', params.subHColor);
+
+    // article ._P
+    setCss(params.$p, 'color', params.pColor);
+
+    // imgCover ._description
+    setCss(params.$description, 'color', params.descriptionColor);
+
+    // button background-color && text color
+    setCss(params.$button, 'backgroundColor', params.buttonColor);
+    setCss(params.$button, 'color', params.buttonTextColor);
+
+    // button hover color
+    if (params.buttonColorHover) {
+      params.$button.appendChild(document.createElement('span'));
+      setCss(params.$button.querySelector('span'), 'backgroundColor', params.buttonColorHover);
+    }
+
+    // typeFull background-color
+    setCss(params.$backgroundWrap, 'backgroundColor', params.typeFullColor);
+
+    // typeFull box background-color
+    setCss(params.$contentWrap, 'backgroundColor', params.typeFullBoxColor);
+
+    return this;
+  }
+
+  #createVideo4(element) {
+    const { params } = element.article;
+
+    if (params.$video.length) {
+      const video = new Video4(params.$video);
+    }
+
+    return this;
+  }
+
+  #createSwiper(element) {
+    const { basic_rwd } = this.options;
+
+    const { params } = element.article;
+
+    // 判斷是否擁有 swiper4 結構
+    if (!params.$swiper) return;
+
+    // set id
+    const $id = createUid();
+
+    const $this = this;
+
+    // set swiper
+    let $swiperSet = {
+      on: {
+        init(swiper) {
+          const container = swiper.$el[0];
+          // video4 重複綁定修正
+          if (params.$video.length) {
+            // 應該抓 DB 設定的 classname
+            const allVideo4 = container.querySelectorAll('[video4-active]');
+            [...allVideo4].forEach(element => {
+              element.querySelector(fesdDB.video4.SETTINGS.videoButton)?.remove();
+              element.querySelector('.overlay')?.remove();
+              element.removeAttribute('video4-active');
+            });
+            $this.update();
+          }
+        },
+        observerUpdate(swiper) {
+          if (swiper.params.autoplay.enabled) {
+            swiper.autoplay.start();
+            swiper.update();
+          }
+        },
+      },
+      observer: true,
+      breakpoints: {},
+    };
+
+    params.$selector.setAttribute('img-swiper', 'on');
+    params.$selector.classList.add(`swiper-${$id}`);
+
+    // swiper navigation (預設為 off)
+    if (params.$selector.getAttribute('swiper-arrow') !== 'off' && params.$selector.getAttribute('swiper-arrow')) {
+      const next = document.createElement('div');
+      next.className = `swiper-button-next swiper-${$id}`;
+      params.$swiperButtonCover.appendChild(next);
+
+      const prev = document.createElement('div');
+      prev.className = `swiper-button-prev swiper-${$id}`;
+      params.$swiperButtonCover.appendChild(prev);
+
+      $swiperSet.navigation = {
+        nextEl: `.swiper-button-next.swiper-${$id}`,
+        prevEl: `.swiper-button-prev.swiper-${$id}`,
+      };
+    }
+
+    // swiper pagination (預設為 on)
+    if (params.$selector.getAttribute('swiper-nav') !== 'off' || !params.$selector.getAttribute('swiper-nav')) {
+      const pagination = document.createElement('div');
+      pagination.className = `swiper-pagination swiper-${$id}`;
+      params.$swiper.appendChild(pagination);
+
+      $swiperSet.pagination = {
+        el: `.swiper-pagination.swiper-${$id}`,
+        clickable: true,
+      };
+    }
+
+    // slidesPerView
+    if (Number.parseInt(params.$selector.getAttribute('swiper-num'))) {
+      $swiperSet.breakpoints[basic_rwd] = {
+        slidesPerView: params.$selector.getAttribute('swiper-num') ? (Number.parseInt(params.$selector.getAttribute('swiper-num')) > 5 ? 5 : Number.parseInt(params.$selector.getAttribute('swiper-num'))) : 1,
+      };
+    }
+
+    // autoplay (預設為 on)
+    if (params.$selector.getAttribute('swiper-autoplay') !== 'off' || !params.$selector.getAttribute('swiper-autoplay')) {
+      $swiperSet.autoplay = {
+        delay: 3000,
+        disableOnInteraction: false,
+      };
+    }
+
+    // loop (預設為 on)
+    if (params.$selector.getAttribute('swiper-loop') !== 'off' || !params.$selector.getAttribute('swiper-loop')) {
+      $swiperSet.loop = true;
+    }
+
+    // speed
+    if (params.$selector.getAttribute('swiper-speed')) {
+      $swiperSet.speed = parseInt(params.$selector.getAttribute('swiper-speed'));
+    }
+
+    // parallax (預設為 off)
+    if (params.$selector.getAttribute('swiper-parallax') !== 'off' && !params.$selector.getAttribute('swiper-loop')) {
+      $swiperSet.parallax = true;
+    }
+
+    // pagination dynamicBullets (預設為 off)
+    if (params.$selector.getAttribute('swiper-pagination-dynamic') === 'on') {
+      $swiperSet.pagination.dynamicBullets = true;
+    }
+
+    // 若 swiper 只有一筆輪播則隱藏 navigation 及 pagination
+    let gate = () => (window.innerWidth > this.basic_rwd ? Number(params.$selector.getAttribute('swiper-num')) || 1 : 1);
+
+    if (params.$swiper.querySelectorAll('.swiper-slide').length <= gate()) {
+      $swiperSet.navigation = false;
+      $swiperSet.pagination = false;
+      $swiperSet.autoplay = false;
+      $swiperSet.loop = false;
+
+      params.$selector.querySelector('.swiper-button-cover').style.display = 'none';
+      params.$selector.querySelector('.swiper-pagination').style.display = 'none';
+
+      params.$swiper.classList.add('swiper-no-swiping');
+    }
+
+    const $swiper = new SwiperV8(params.$swiper, $swiperSet);
+
+    element.article.swiperList = [];
+    element.article.swiperList.push($swiper);
+
+    return this;
+  }
+  update() {
+    const { elements } = this;
+
+    elements.forEach(parent => {
+      parent.querySelectorAll('._article').forEach(el => {
+        el.article = {};
+        el.article.parent = parent;
+        el.article.params = this.#getArticleData(el);
+
+        this.#createVideo4(el);
+      });
+    });
+  }
+}
+
+export default Article4;

package/src/fesd/article4/article4.md

@@ -0,0 +1 @@
+段落編輯器的 sass 檔案已移動至 WDD_Template

package/src/fesd/category-slider/_category-slider.sass

@@ -0,0 +1,33 @@
+.category-slider
+  position: relative
+  display: inline-block
+  max-width: 100%
+  overflow: hidden
+  &.slidable
+    mask-image: linear-gradient(270deg, rgba(#fff, 0), #fff 20%, #fff 80%,rgba(#fff, 0))
+    .wrapper
+      cursor: grab
+      &.dragging
+        cursor: grabbing
+      &.moving
+        .category
+          pointer-events: none
+  &.is-start
+    mask-image: linear-gradient(270deg, rgba(#fff, 0), #fff 20%, #fff)
+  &.is-end
+    mask-image: linear-gradient(90deg, rgba(#fff, 0), #fff 20%, #fff)
+  .wrapper
+    position: relative
+    display: flex
+    flex-wrap: nowrap
+    justify-content: flex-start
+    width: 100%
+    height: 100%
+    transform: translate3d(0px, 0, 0)
+    transition-property: transform
+    user-select: none
+    .item
+      flex-shrink: 0
+      &.active
+        a
+          color: red