@xwadex/fesd 0.0.2 → 0.0.5

package/src/fesd/category-slider/category-slider.js

@@ -1,332 +0,0 @@
-// 判斷操作事件使用 mouse 或是 touch
-let operateStart = 'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown';
-let operateEnd = 'ontouchend' in document.documentElement ? 'touchend' : 'mouseup';
-let operateMove = 'ontouchmove' in document.documentElement ? 'touchmove' : 'mousemove';
-
-/* ---------------------------- Function 宣告 --------------------------------- */
-
-// 獲取 translate 數值
-function getTranslateValues(element) {
-  const style = window.getComputedStyle(element);
-  const matrix = style['transform'] || style.mozTransform;
-
-  // No transform property. Simply return 0 values.
-  if (matrix === 'none') {
-    return {
-      x: 0,
-      y: 0,
-      z: 0,
-    };
-  }
-
-  // Can either be 2d or 3d transform
-  const matrixType = matrix.includes('3d') ? '3d' : '2d';
-  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
-
-  // 2d matrices have 6 values
-  // Last 2 values are X and Y.
-  // 2d matrices does not have Z value.
-  if (matrixType === '2d') {
-    return {
-      x: Number(matrixValues[4]),
-      y: Number(matrixValues[5]),
-      z: 0,
-    };
-  }
-
-  // 3d matrices have 16 values
-  // The 13th, 14th, and 15th values are X, Y, and Z
-  if (matrixType === '3d') {
-    return {
-      x: Number(matrixValues[12]),
-      y: Number(matrixValues[13]),
-      z: Number(matrixValues[14]),
-    };
-  }
-}
-
-// 計算輪播內容總寬度
-function getSlideTotalW(element) {
-  const slideWrap = element.querySelector('.wrapper');
-  const items = slideWrap.querySelectorAll('.item');
-  let slideTotalWidth = 0; //輪播內容總寬度
-  items.forEach((item) => {
-    const style = getComputedStyle(item);
-    const marginL = parseInt(style.marginLeft);
-    const marginR = parseInt(style.marginRight);
-    slideTotalWidth += item.getBoundingClientRect().width + marginL + marginR;
-  });
-  return slideTotalWidth;
-}
-
-// 偵測目前輪播位置
-function detectPos(self) {
-  // 拖拉在最左邊時
-  if (getTranslateValues(self.slideWrapEl).x >= self.translateMin) {
-    return 'is-start';
-  }
-  // 拖拉在最右邊時
-  else if (getTranslateValues(self.slideWrapEl).x <= self.translateMax) {
-    return 'is-end';
-  }
-  // 拖拉在中間時
-  else if (
-    getTranslateValues(self.slideWrapEl).x < self.translateMin &&
-    getTranslateValues(self.slideWrapEl).x > self.translateMax
-  ) {
-    return 'is-middle';
-  }
-}
-
-// 綁定事件
-function eventHandler(self) {
-  const element = self.el;
-  const slideWrap = element.querySelector('.wrapper');
-  //滑鼠按住或是行動裝置手指按住
-  slideWrap.addEventListener(operateStart, function (e) {
-    self.isDown = true;
-    if (self.slidable) slideWrap.classList.add('dragging');
-    switch (operateStart) {
-      case 'mousedown':
-        self.startX = e.pageX;
-        break;
-      case 'touchstart':
-        self.startX = e.changedTouches[0].pageX;
-        break;
-    }
-    self.nowTranslateX = getTranslateValues(slideWrap).x;
-  });
-
-  //滑鼠放開或是行動裝置手指放開
-  slideWrap.addEventListener(operateEnd, function (e) {
-    self.isDown = false;
-    slideWrap.classList.remove('dragging');
-    slideWrap.classList.remove('moving');
-    //移動距離
-    let moveDistance;
-    switch (operateMove) {
-      case 'mousemove':
-        moveDistance = e.pageX - self.startX;
-        break;
-      case 'touchmove':
-        moveDistance = e.changedTouches[0].pageX - self.startX;
-        break;
-    }
-    if (moveDistance === 0 && e.target.closest('.item')) {
-      if (operateEnd === 'mouseup' && e.button !== 0) return;
-      const items = slideWrap.querySelectorAll('.item');
-      items.forEach((item) => {
-        item.classList.remove('active');
-      });
-      e.target.closest('.item').classList.add('active');
-      self.moveActive(self.params.speed);
-    } else {
-      if (self.slidable) self.resetPos(element);
-    }
-  });
-
-  //滑鼠離開
-  slideWrap.addEventListener('mouseleave', function () {
-    if (!self.isDown) return;
-    if (self.slidable) {
-      self.isDown = false;
-      slideWrap.classList.remove('dragging');
-      slideWrap.classList.remove('moving');
-      self.resetPos(element);
-    }
-  });
-
-  //滑鼠移動或是行動裝置手指移動
-  slideWrap.addEventListener(operateMove, function (e) {
-    if (!self.draggable) return;
-    if (self.slidable) {
-      if (!self.isDown) return;
-      e.preventDefault();
-      //移動距離
-      let moveDistance;
-      switch (operateMove) {
-        case 'mousemove':
-          moveDistance = e.pageX - self.startX;
-          break;
-        case 'touchmove':
-          moveDistance = e.changedTouches[0].pageX - self.startX;
-          break;
-      }
-      if (moveDistance !== 0) {
-        slideWrap.classList.add('moving');
-        const styles = {
-          transition: 'all 0ms ease 0s',
-          transform: `translate3d(${self.nowTranslateX + moveDistance}px,0,0)`,
-        };
-        Object.assign(slideWrap.style, styles);
-      }
-    }
-  });
-}
-
-// 取消 a 的拖拉
-function disableLinkDrag(element) {
-  const aTag = element.querySelectorAll('a');
-  for (var i = 0, len = aTag.length; i < len; i++) {
-    aTag[i].draggable = false;
-  }
-}
-
-export default class CategorySlider {
-  constructor(element, params) {
-    this.el = typeof element === 'string' ? document.querySelector(element) : element;
-    this.slideWrapEl = this.el.querySelector('.wrapper');
-    // default params
-    this.params = {
-      speed: 300,
-      clickSwitch: true,
-      breakpoint: false,
-    };
-    Object.assign(this.params, params);
-
-    this.draggable = true;
-    this.isDown = false; //按下
-    this.startX = 0; //按下初始位置
-    this.nowTranslateX = getTranslateValues(this.slideWrapEl).x; //目前X軸偏移輛
-    this.slideTotalWidth = getSlideTotalW(this.el);
-    this.translateMin = 0;
-    this.translateMax = -Math.floor(
-      Math.abs(
-        getSlideTotalW(this.el) - this.el.querySelector('.wrapper').getBoundingClientRect().width
-      )
-    );
-    this.slidable =
-      this.slideTotalWidth > Math.round(this.el.getBoundingClientRect().width) &&
-      (!this.params.breakpoint || window.innerWidth <= this.params.breakpoint);
-    this.init();
-  }
-  init() {
-    const self = this;
-    if (self.slidable) {
-      self.slideWrapEl.style.width = `${self.slideTotalWidth}px`;
-      self.el.classList.add('slidable');
-      if (self.slideWrapEl.querySelector('.item.active')) self.moveActive();
-    }
-    window.addEventListener('resize', function () {
-      self.update();
-    });
-    eventHandler(self);
-    disableLinkDrag(self.el);
-  }
-  moveActive(speed) {
-    const self = this;
-    const activeItem = self.slideWrapEl.querySelector('.item.active');
-    const prevItem = activeItem.previousElementSibling;
-    const prevOffsetLeft = prevItem
-      ? activeItem.offsetLeft - self.el.clientWidth / 2 + activeItem.clientWidth / 2
-      : 0;
-    if (self.slidable) {
-      if (-prevOffsetLeft < 0 && -prevOffsetLeft > self.translateMax) {
-        const styles = {
-          transition: `all ${speed ? speed : 0}ms ease 0s`,
-          transform: `translate3d(-${prevOffsetLeft}px,0,0)`,
-        };
-        Object.assign(self.slideWrapEl.style, styles);
-      } else if (-prevOffsetLeft >= 0) {
-        const styles = {
-          transition: `all ${speed ? speed : 0}ms ease 0s`,
-          transform: `translate3d(0,0,0)`,
-        };
-        Object.assign(self.slideWrapEl.style, styles);
-      } else {
-        const styles = {
-          transition: `all ${speed ? speed : 0}ms ease 0s`,
-          transform: `translate3d(${self.translateMax}px,0,0)`,
-        };
-        Object.assign(self.slideWrapEl.style, styles);
-      }
-      if (speed) {
-        self.slideWrapEl.addEventListener(
-          'transitionend',
-          function () {
-            self.nowTranslateX = getTranslateValues(self.slideWrapEl).x;
-            switch (detectPos(self)) {
-              case 'is-start':
-                self.el.classList.add('is-start');
-                self.el.classList.remove('is-end');
-                break;
-              case 'is-middle':
-                self.el.classList.remove('is-start');
-                self.el.classList.remove('is-end');
-                break;
-              case 'is-end':
-                self.el.classList.remove('is-start');
-                self.el.classList.add('is-end');
-                break;
-            }
-          },
-          false
-        );
-      } else {
-        self.nowTranslateX = getTranslateValues(self.slideWrapEl).x;
-        switch (detectPos(self)) {
-          case 'is-start':
-            self.el.classList.add('is-start');
-            self.el.classList.remove('is-end');
-            break;
-          case 'is-middle':
-            self.el.classList.remove('is-start');
-            self.el.classList.remove('is-end');
-            break;
-          case 'is-end':
-            self.el.classList.remove('is-start');
-            self.el.classList.add('is-end');
-            break;
-        }
-      }
-    }
-  }
-  resetPos() {
-    const self = this;
-    switch (detectPos(self)) {
-      case 'is-start':
-        self.el.classList.add('is-start');
-        self.el.classList.remove('is-end');
-        Object.assign(self.slideWrapEl.style, {
-          transition: `all ${self.params.speed}ms ease 0s`,
-          transform: 'translate3d(0,0,0)',
-        });
-        break;
-      case 'is-middle':
-        self.el.classList.remove('is-start');
-        self.el.classList.remove('is-end');
-        break;
-      case 'is-end':
-        self.el.classList.remove('is-start');
-        self.el.classList.add('is-end');
-        Object.assign(self.slideWrapEl.style, {
-          transition: `all ${self.params.speed}ms ease 0s`,
-          transform: `translate3d(${self.translateMax}px,0,0)`,
-        });
-        break;
-    }
-  }
-  update() {
-    const self = this;
-    self.el.querySelector('.wrapper').removeAttribute('style');
-    self.slideTotalWidth = getSlideTotalW(self.el);
-    self.translateMax = -Math.floor(
-      Math.abs(
-        getSlideTotalW(self.el) - self.el.querySelector('.wrapper').getBoundingClientRect().width
-      )
-    );
-    self.slidable =
-      self.slideTotalWidth > Math.round(self.el.getBoundingClientRect().width) &&
-      (!self.params.breakpoint || window.innerWidth <= self.params.breakpoint);
-    if (self.slidable) {
-      self.slideWrapEl.style.width = `${self.slideTotalWidth}px`;
-      self.el.classList.add('slidable');
-      if (self.slideWrapEl.querySelector('.item.active')) self.moveActive();
-    } else {
-      self.el.classList.remove('slidable');
-      self.el.classList.remove('is-start');
-      self.el.classList.remove('is-end');
-      self.slideWrapEl.removeAttribute('style');
-    }
-  }
-}

package/src/fesd/collapse4/collapse4.js

@@ -1,159 +0,0 @@
-import SHARED from '../shared/shared';
-import { isString, isElement, isNodeList, isElementExist, isFunction, getElement, getAllElements, createUid, toHTMLElement, jsonParse, warn, error } from '../shared/utils';
-
-('use strict');
-
-const collapseHandle = $wrapper => {
-  const { defaultOptions } = $wrapper.collapse;
-  const { collapseClass, target, transition } = defaultOptions;
-
-  const $target = $wrapper.querySelector(target);
-
-  $wrapper.classList.add(collapseClass);
-
-  $target.style.height = 0;
-  $target.style['transition-property'] = transition.property;
-  $target.style['transition-duration'] = transition.duration;
-  $target.style['transition-timing-function'] = transition.function;
-  $target.style['transition-delay'] = transition.delay;
-  $target.style.overflow = 'hidden';
-};
-
-const expandHandle = $wrapper => {
-  const { defaultOptions } = $wrapper.collapse;
-  const { collapseClass, target, transition } = defaultOptions;
-
-  const $target = $wrapper.querySelector(target);
-  const height = $target.children[0].offsetHeight;
-  $wrapper.collapse.height = height;
-
-  // console.log( height );
-  // console.log( $target.children[0].offsetHeight );
-  $wrapper.classList.remove(collapseClass);
-
-  $target.style.display = 'block';
-  $target.style.height = `${height}px`;
-  $target.style['transition-property'] = transition.property;
-  $target.style['transition-duration'] = transition.duration;
-  $target.style['transition-timing-function'] = transition.function;
-  $target.style['transition-delay'] = transition.delay;
-  $target.style.overflow = 'hidden';
-};
-
-class Collapse4 {
-  constructor(el, options = {}) {
-    // 可傳 string 或 element 或 nodeList
-    if (!isString(el) && !isElement(el) && !isNodeList(el) && !isElementExist(el)) return;
-
-    this.__storage__ = {
-      el,
-      options,
-    };
-
-    this.#create();
-  }
-
-  #create() {
-    const { el, options } = this.__storage__;
-    const { SETTINGS, EVENTS } = fesdDB.collapse4;
-
-    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.collapse = {};
-      el.collapse.instance = this;
-      el.collapse.defaultOptions = options;
-
-      this.#trigger(el);
-    });
-
-    this.emit('init');
-  }
-
-  #trigger(el) {
-    const { options } = this;
-    const { collapseClass, block, target, defaultOpen, targetStopPropagation, defaultActiveMark } = options;
-
-    // collapse-wrapper
-    // collapse-block
-    // collapse-target
-
-    const $wrapper = el;
-    const $target = $wrapper.querySelector(target);
-    $wrapper.collapse.height = $target.children[0].offsetHeight;
-
-    // const $block = $wrapper.querySelector(block);
-
-    // 是否預設全打開
-    if (defaultOpen) {
-      $target.style.height = `${$target.children[0].offsetHeight}px`;
-      $wrapper.classList.remove(collapseClass);
-    } else {
-      if (!$wrapper.classList.contains(defaultActiveMark) && !$wrapper.hasAttribute(defaultActiveMark)) {
-        $wrapper.classList.add(collapseClass);
-        $target.style.height = '0px';
-        $target.style.overflow = 'hidden';
-      } else {
-        $target.style.height = `${$target.children[0].offsetHeight}px`;
-        $wrapper.classList.remove(collapseClass);
-      }
-    }
-
-    // update() 避免重複綁定
-    $wrapper.removeEventListener('click', this.#event);
-    $wrapper.addEventListener('click', this.#event);
-
-    // target 點擊不收合
-    if (targetStopPropagation) {
-      const event = e => {
-        e.stopPropagation();
-      };
-      // update() 避免重複綁定
-      $target.removeEventListener('click', event);
-      $target.addEventListener('click', event);
-    }
-  }
-
-  #event() {
-    const { instance, defaultOptions } = this.collapse;
-    const { collapseClass, block, target, single } = defaultOptions;
-
-    const $wrapper = this;
-
-    if ($wrapper.classList.contains(collapseClass)) {
-      if (single) {
-        $wrapper.parentNode.querySelectorAll(`.${$wrapper.classList[0]}`).forEach(el => {
-          collapseHandle(el);
-        });
-      }
-
-      expandHandle($wrapper);
-    } else {
-      collapseHandle($wrapper);
-    }
-
-    instance.emit('afterCollapse');
-  }
-
-  update() {
-    this.#create();
-  }
-}
-
-Object.assign(Collapse4.prototype, SHARED);
-
-export default Collapse4;

package/src/fesd/detect4/detect4.js

@@ -1,70 +0,0 @@
-const Detect4 = {};
-Detect4.init = function () {
-  const userAgent = navigator.userAgent;
-
-  // isBrowser4
-  fesdDB.library.browser = {
-    // Firefox 1.0+
-    isFirefox: typeof InstallTrigger !== 'undefined',
-    // Opera 8.0+
-    isOpera: (!!window.opr && !!opr.addons) || !!window.opera || userAgent.indexOf(' OPR/') >= 0,
-    // Internet Explorer 6-11
-    isIE: /*@cc_on!@*/ false || !!document.documentMode,
-    // Edge 20+
-    isEdge: !(false || !!document.documentMode) && !!window.StyleMedia,
-    // Edge (based on chromium) detection
-    isEdgeChromium: /\sedg\//i.test(userAgent) || /edg([ea]|ios)/i.test(userAgent),
-    // Safari 3.0+ "[object HTMLElementConstructor]"
-    isSafari: !/chrome|crios|crmo/i.test(userAgent) && /safari/i.test(userAgent),
-    // Chrome 1 - 79
-    isChrome: (!!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime)) || /chrome|crios|crmo/i.test(userAgent),
-  };
-
-  // isMobile4
-  fesdDB.library.mobile = {
-    // Android
-    isAndroid: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1,
-    // iOS | ipad
-    isiOS: userAgent.indexOf('Mac') > -1 && 'ontouchend' in document,
-  };
-
-  // isOs4
-  fesdDB.library.os = {
-    // window
-    isWindows: userAgent.indexOf('Win') > -1,
-    // macos
-    isMacOS: userAgent.indexOf('Mac') > -1,
-    // UNIX
-    isUNIX: userAgent.indexOf('X11') > -1,
-    // Linux
-    isLinux: userAgent.indexOf('Linux') > -1,
-  };
-
-  // **eric - 以下待優化
-  const isBrowser4 = () => {
-    const { browser } = fesdDB.library;
-    return Object.keys(browser).find(key => {
-      if (browser[key]) return browser[key];
-    });
-  };
-
-  const isMobile4 = () => {
-    const { mobile } = fesdDB.library;
-    return Object.keys(mobile).some(key => {
-      if (mobile[key]) return mobile[key];
-    });
-  };
-
-  const isOs4 = () => {
-    const { os } = fesdDB.library;
-    return Object.keys(os).find(key => {
-      if (os[key]) return os[key];
-    });
-  };
-
-  fesdDB.is.isBrowser4 = isBrowser4();
-  fesdDB.is.isMobile4 = isMobile4();
-  fesdDB.is.isOs4 = isOs4();
-};
-
-export default Detect4;