@xwadex/fesd 0.0.1

package/src/fesd/multipurpose4/multipurpose4.js

@@ -0,0 +1,562 @@
+import { isNodeList, insert } from './../shared/utils';
+
+// debounce
+const debounce = function (func) {
+  let timer;
+  return function (event) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(func, 200, event);
+  };
+};
+
+// add class
+const addClass = (target, className) => {
+  if (isNodeList(target)) {
+    target.forEach(el => {
+      el.classList.add(className);
+    });
+    return;
+  }
+
+  target.classList.add(className);
+};
+
+// remove class
+const removeClass = (target, className) => {
+  if (isNodeList(target)) {
+    target.forEach(el => {
+      el.classList.remove(className);
+    });
+    return;
+  }
+
+  target.classList.remove(className);
+};
+
+// 拖拉類型控制
+class dragControl {
+  constructor(el) {
+    this.$element = el;
+    this.option = el.s.option.drag;
+    this.#init();
+  }
+
+  // 初始化
+  #init() {
+    const $this = this;
+    if (!$this.$element) return;
+
+    $this.$container = $this.$element.querySelector('.drag-container');
+    $this.$wrapper = $this.$container.querySelector('.wrapper');
+
+    // scroll & resize event
+    const updateEvent = () => {
+      $this.#scrollerDetect();
+      $this.#buttonDetect();
+    };
+
+    // scroll event handle
+    $this.$wrapper.removeEventListener('scroll', updateEvent);
+    $this.$wrapper.addEventListener('scroll', updateEvent);
+
+    // resize event handle
+    window.removeEventListener('resize', debounce(updateEvent));
+    window.addEventListener('resize', debounce(updateEvent));
+
+    // 左右拖拉事件綁定，若為 collapse 則強制啟用 draggable
+    if ($this.option.draggable || $this.$element.s.type == 'collapse') $this.#bindDragEvent();
+    // 左右箭頭事件綁定，若為 collapse 則不輸出 .navigation
+    if ($this.option.navigation && $this.$element.s.type !== 'collapse') {
+      $this.$container.insertAdjacentHTML(
+        insert.prepend,
+        `<div class="navigation">
+        <div class="button prev">
+          <div></div>
+        </div>
+        <div class="button next">
+          <div></div>
+        </div>
+      </div>`,
+      );
+
+      $this.$button = $this.$container?.querySelectorAll('.button');
+      $this.#bindButtonEvent();
+    }
+    // 卷軸位置判斷
+    $this.#scrollerDetect();
+    // 隱藏按鈕判斷
+    $this.#buttonDetect();
+    // 選項事件綁定
+    $this.#bindItemEvent();
+    // 更新 active 位置
+    // $this.update();
+  }
+  // 更新 active 位置
+  update(element) {
+    const $wrapper = element.querySelector('.wrapper');
+    const $active = $wrapper?.querySelector('.active');
+    if ($active) {
+      // 移動至 active class 處
+      const moveDistance = $active.offsetLeft + $active.getBoundingClientRect().width / 2 - $wrapper.getBoundingClientRect().width / 2;
+      $wrapper.scrollTo({
+        left: moveDistance,
+        behavior: 'smooth',
+      });
+    }
+  }
+  // 左右箭頭事件綁定
+  #bindButtonEvent() {
+    const $this = this;
+    const { $wrapper, $button } = $this;
+    // button event
+    const buttonEvent = function () {
+      const type = this.classList.contains('next');
+      const fix = parseInt($wrapper.getBoundingClientRect().width * 0.7);
+
+      $wrapper.scrollTo({
+        left: type ? $wrapper.scrollLeft + fix : $wrapper.scrollLeft - fix,
+        behavior: 'smooth',
+      });
+
+      setTimeout(() => {
+        $this.#buttonDetect();
+      }, 100);
+    };
+
+    // button event handle
+    $button.forEach($el => {
+      $el.removeEventListener('click', buttonEvent);
+      $el.addEventListener('click', buttonEvent);
+    });
+  }
+  // 左右拖拉事件綁定
+  #bindDragEvent() {
+    const { $wrapper } = this;
+
+    // 是否為點擊狀態
+    let isDown = false;
+    // 是否為移動狀態
+    let isMoved = false;
+    // 起始 X 軸數值
+    let startX = 0;
+    // 卷軸數值
+    let scrollLeft = 0;
+
+    // mousedown event
+    const mousedownEvent = function (event) {
+      event.preventDefault();
+
+      isMoved = false;
+      isDown = true;
+
+      startX = event.pageX - $wrapper.offsetLeft;
+      scrollLeft = $wrapper.scrollLeft;
+    };
+
+    // mousedown event handle
+    $wrapper.removeEventListener('mousedown', mousedownEvent);
+    $wrapper.addEventListener('mousedown', mousedownEvent);
+
+    // mouseleave event
+    const mouseleaveEvent = function () {
+      isMoved = false;
+      isDown = false;
+    };
+
+    // mouseleave event handle
+    $wrapper.removeEventListener('mouseleave', mouseleaveEvent);
+    $wrapper.addEventListener('mouseleave', mouseleaveEvent);
+
+    // mouseup event
+    const mouseupEvent = function (event) {
+      event.preventDefault();
+      isDown = false;
+    };
+
+    // mouseup event handle
+    $wrapper.removeEventListener('mouseup', mouseupEvent);
+    $wrapper.addEventListener('mouseup', mouseupEvent);
+
+    // mousemove event
+    const mousemoveEvent = function (event) {
+      event.preventDefault();
+
+      isMoved = true;
+
+      if (!isDown) return;
+
+      const x = event.pageX - $wrapper.offsetLeft;
+      const walk = x - startX;
+      $wrapper.scrollTo({
+        left: scrollLeft - walk,
+      });
+    };
+
+    // mousemove event handle
+    $wrapper.removeEventListener('mousemove', mousemoveEvent);
+    $wrapper.addEventListener('mousemove', mousemoveEvent);
+
+    const reset = function (event) {
+      if (isMoved) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+
+    $wrapper.querySelectorAll('a').forEach($el => {
+      $el.removeEventListener('click', reset);
+      $el.addEventListener('click', reset);
+    });
+  }
+  // 卷軸位置判斷
+  #scrollerDetect() {
+    const { $container, $wrapper } = this;
+
+    const gate = $wrapper.scrollWidth - $wrapper.clientWidth;
+    const value = $wrapper.scrollLeft;
+
+    if (gate <= 0) return;
+
+    addClass($container, 'scrollable');
+
+    // 最前
+    if (value == 0) {
+      removeClass($container, 'scrollable');
+      addClass($wrapper, 'start');
+      removeClass($wrapper, 'end');
+    }
+    // 最後
+    else if (value >= gate) {
+      removeClass($container, 'scrollable');
+      removeClass($wrapper, 'start');
+      addClass($wrapper, 'end');
+    }
+    // 中間
+    else {
+      addClass($wrapper, 'center');
+      removeClass($wrapper, 'start');
+      removeClass($wrapper, 'end');
+    }
+  }
+  // 隱藏按鈕判斷
+  #buttonDetect() {
+    const { $wrapper, $button, $element } = this;
+
+    if (!$button) return;
+
+    const gate = $wrapper.scrollWidth - $wrapper.clientWidth;
+    const value = $wrapper.scrollLeft;
+
+    if (gate <= 0) {
+      addClass($button, 'hide');
+      addClass($element, 'noScrollable');
+      return;
+    }
+
+    // 最前
+    if (value == 0) {
+      $button.forEach($el => {
+        if ($el.classList.contains('next')) {
+          removeClass($el, 'hide');
+          return;
+        }
+
+        addClass($el, 'hide');
+      });
+    }
+    // 最後
+    else if (value >= gate) {
+      $button.forEach($el => {
+        if ($el.classList.contains('next')) {
+          addClass($el, 'hide');
+          return;
+        }
+
+        removeClass($el, 'hide');
+      });
+    }
+    // 中間
+    else {
+      removeClass($button, 'hide');
+    }
+  }
+  // 選項事件綁定
+  #bindItemEvent() {
+    const { $element } = this;
+
+    const itemEvent = $el => {
+      if (this.option.selected) {
+        const selectOption = $el.getAttribute('data-option').trim();
+        $element.setAttribute('m4-status', selectOption);
+      }
+    };
+
+    function clickHandler() {
+      itemEvent(this);
+    }
+
+    this.$container.querySelectorAll('.item').forEach(el => {
+      el.removeEventListener('click', clickHandler);
+      el.addEventListener('click', clickHandler);
+    });
+  }
+}
+
+// 收合類型控制
+class collapseControl {
+  constructor(el) {
+    this.$element = el;
+    this.option = el.s.option.collapse;
+    this.#init();
+  }
+
+  // 初始化
+  #init() {
+    if (!this.$element) return;
+
+    this.$container = this.$element.querySelector('.collapse-container');
+    this.$wrapper = this.$container.querySelector('.wrapper');
+
+    // 隱藏按鈕判斷
+    if (this.#buttonDetect()) {
+      // 展開箭頭事件綁定
+      this.#bindButtonEvent();
+    }
+
+    // 選項事件綁定
+    this.#bindItemEvent();
+  }
+  // 隱藏按鈕判斷
+  #buttonDetect() {
+    const $drag = this.$element.querySelector('.drag-container');
+    const $wrapper = $drag.querySelector('.wrapper');
+
+    if ($wrapper.scrollWidth - $wrapper.clientWidth > 0) {
+      $drag.insertAdjacentHTML(insert.append, `<div class="open-collapse"></div>`);
+      this.$button = $drag.querySelector('.open-collapse');
+      return true;
+    }
+
+    return false;
+  }
+  // 展開箭頭事件綁定
+  #bindButtonEvent() {
+    const { $element, $button } = this;
+
+    // button event
+    const buttonEvent = function () {
+      if ($element.classList.contains('expand')) {
+        $element.classList.remove('expand');
+      } else {
+        $element.classList.add('expand');
+      }
+    };
+
+    // button event handle
+    $button.removeEventListener('click', buttonEvent);
+    $button.addEventListener('click', buttonEvent);
+  }
+  // 選項事件綁定
+  #bindItemEvent() {
+    const { $element } = this;
+
+    const itemEvent = ($el, collapse) => {
+      if (collapse) {
+        if ($element?.classList.contains('expand')) {
+          $element?.classList.remove('expand');
+        } else {
+          $element?.classList.add('expand');
+        }
+      }
+
+      if (this.option.selected) {
+        const selectOption = $el.getAttribute('data-option').trim();
+        $element.setAttribute('m4-status', selectOption);
+      }
+    };
+
+    function clickHandler() {
+      itemEvent(this, true);
+    }
+
+    this.$container.querySelectorAll('.item').forEach(el => {
+      el.removeEventListener('click', clickHandler);
+      el.addEventListener('click', clickHandler);
+    });
+  }
+}
+
+// create template method
+const createTemplate = m4 => {
+  const { type, option, originalDomString } = m4.s;
+
+  const $storage = document.createElement('div');
+  if (type == 'drag') {
+    $storage.innerHTML = fesdDB.multipurpose4.TEMPLATE[type]().trim();
+
+    const $wrapper = $storage.querySelector('.drag-container .wrapper');
+    $wrapper.insertAdjacentHTML(insert.append, originalDomString);
+  }
+  if (type == 'collapse') {
+    $storage.innerHTML = fesdDB.multipurpose4.TEMPLATE[type](option?.collapse).trim();
+    // drag
+    const $container = $storage.querySelector('.drag-container .wrapper');
+    $container.insertAdjacentHTML(insert.append, originalDomString);
+    // collapse
+    const $model = $storage.querySelector('.collapse-container .wrapper');
+    $model.insertAdjacentHTML(insert.append, originalDomString);
+  }
+  if (type == 'dropdown') {
+    $storage.innerHTML = fesdDB.multipurpose4.TEMPLATE[type](option?.dropdown).trim();
+
+    const $dropdown = $storage.querySelector('dropdown-el');
+    $dropdown.insertAdjacentHTML(insert.append, originalDomString);
+  }
+
+  return $storage.children;
+};
+
+class Multipurpose4 extends HTMLElement {
+  constructor() {
+    super();
+    this.initialize = false;
+    this.__events__ = {};
+    this.s = {};
+    this.s.originalDomString = this.innerHTML.trim().replace(/\n/g, '');
+    this.previousWidth = window.innerWidth;
+  }
+  static get observedAttributes() {
+    return ['m4-type', 'm4-status'];
+  }
+  attributeChangedCallback(attr, oldVal, newVal) {
+    switch (attr) {
+      case 'm4-type':
+        if (oldVal === null || oldVal === newVal) return;
+        this.s.type = newVal;
+        this.#distribute();
+        break;
+      case 'm4-status':
+        if (oldVal === newVal) return;
+        const type = this.getAttribute('m4-type');
+        if (type !== 'drag' && type !== 'collapse') return;
+        // 左右拖拉
+        this.querySelectorAll('.drag-container .item').forEach(el => {
+          el.classList.remove('active');
+        });
+        this.querySelector(`.drag-container .item[data-option="${newVal}"]`)?.classList.add('active');
+        // 展開選項
+        if (type === 'collapse') {
+          this.querySelectorAll('.collapse-container .item').forEach(el => {
+            el.classList.remove('active');
+          });
+          this.querySelector(`.collapse-container .item[data-option="${newVal}"]`)?.classList.add('active');
+        }
+        this.constructor.drag?.update(this);
+        break;
+    }
+  }
+  connectedCallback() {
+    if (this.initialize || this.classList.contains('m4-init')) return;
+    this.initialize = true;
+    this.#init();
+  }
+  update() {
+    // 斷點設定
+    this.#breakpoint();
+  }
+  #init() {
+    let customize = {};
+
+    if (!this.hasAttribute('m4-value')) {
+      this.setAttribute('m4-value', '');
+    }
+
+    this.s.type = this.getAttribute('m4-type') ?? fesdDB.multipurpose4.SETTINGS.type;
+    if (this.hasAttribute('m4-option')) {
+      customize = this.getAttribute('m4-option') ? JSON.parse(this.getAttribute('m4-option')) : {};
+      this.removeAttribute('m4-option');
+    }
+
+    const updateEvent = event => {
+      if (event.type === 'resize') {
+        if (window.innerWidth === this.previousWidth) return;
+        this.previousWidth = window.innerWidth;
+      }
+      this.update();
+    };
+
+    // resize event handle
+    window.removeEventListener('resize', debounce(updateEvent));
+    window.addEventListener('resize', debounce(updateEvent));
+
+    this.s.option = {};
+    this.s.option.drag = Object.assign({}, fesdDB.multipurpose4.SETTINGS.drag, customize?.drag);
+    this.s.option.collapse = Object.assign({}, fesdDB.multipurpose4.SETTINGS.collapse, customize?.collapse);
+    this.s.option.dropdown = Object.assign({}, fesdDB.multipurpose4.SETTINGS.dropdown, customize?.dropdown);
+    this.s.option.breakpoint = Object.assign({}, fesdDB.multipurpose4.SETTINGS.breakpoint, customize?.breakpoint);
+
+    this.#render();
+  }
+  #render() {
+    this.classList.add('m4-init');
+    // 斷點設定
+    this.#breakpoint();
+  }
+  // 斷點設定
+  #breakpoint() {
+    const obj = Object.keys(this.s.option.breakpoint);
+    if (!obj.length) {
+      this.#distribute();
+      return;
+    }
+    obj
+      .map(keys => Number(keys))
+      .sort((a, b) => b - a)
+      .some(point => {
+        if (window.innerWidth >= point) {
+          this.s.type = this.s.option.breakpoint[point]?.type;
+          this.setAttribute('m4-type', this.s.type);
+          this.s.option.drag = Object.assign({}, this.s.option.drag, this.s.option.breakpoint[point]?.drag);
+          this.s.option.collapse = Object.assign({}, this.s.option.collapse, this.s.option.breakpoint[point]?.collapse);
+          this.s.option.dropdown = Object.assign({}, this.s.option.dropdown, this.s.option.breakpoint[point]?.dropdown);
+        }
+        this.#distribute();
+        return window.innerWidth >= point;
+      });
+  }
+  // check type
+  #distribute() {
+    const { type } = this.s;
+
+    this.innerHTML = '';
+    [...createTemplate(this)].forEach(el => {
+      this.append(el);
+    });
+
+    // 新增預設 active class
+    const dragContainer = this.querySelector(`.drag-container .item[data-option="${this.getAttribute('m4-status')}"]`);
+    const collapseContainer = this.querySelector(`.collapse-container .item[data-option="${this.getAttribute('m4-status')}"]`);
+    dragContainer?.classList.add('active');
+    collapseContainer?.classList.add('active');
+
+    switch (type) {
+      case 'drag':
+        this.constructor.drag = new dragControl(this);
+        break;
+      case 'collapse':
+        this.constructor.drag = new dragControl(this);
+        this.constructor.collapse = new collapseControl(this);
+        break;
+      case 'dropdown':
+        // this.#dropdown();
+        break;
+    }
+    this.constructor.drag?.update(this);
+  }
+}
+
+// if (!customElements.get('multipurpose-nav')) {
+//   customElements.define('multipurpose-nav', Multipurpose4);
+// }
+
+export default Multipurpose4;

package/src/fesd/ripple4/_ripple4.sass

@@ -0,0 +1,44 @@
+ripple-btn
+  position: relative
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  overflow: hidden
+  cursor: pointer
+  .circle
+    width: 0
+    height: 0
+    position: absolute
+    transform: translate3d(-50%, -50%,0)
+    pointer-events: none
+    border-radius: 50%
+    animation-name: animate
+    animation-timing-function: linear
+
+  @keyframes animate 
+    100%
+      width: 400px
+      height: 400px
+      opacity: 0
+
+// hover event's hover-btn
+.hover-btn
+  position: relative
+  z-index: 1
+  overflow: hidden
+  // &:hover
+  //   .hover-ball
+  //     transform: translate(-50%, -50%) scale(1)
+  // hover時的球球
+  .hover-ball
+    position: absolute
+    z-index: -1
+    left: 0
+    top: 0
+    width: 1px
+    height: 1px
+    border-radius: 50%
+    background-color: rgba(#fff,.3)
+    pointer-events: none
+    transform: translate3d(-50%, -50%,0) scale(var(--r,1))
+    transition: transform .8s cubic-bezier(0.6, 0.25, 0, 1)