@xwadex/fesd 0.0.2 → 0.0.5

package/src/fesd/anchor4/anchor4.js

@@ -1,179 +0,0 @@
-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

@@ -1,64 +0,0 @@
-// 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

@@ -1,138 +0,0 @@
-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

@@ -1,280 +0,0 @@
-// 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

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

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

@@ -1,33 +0,0 @@
-.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