@xwadex/fesd 0.0.1

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

@@ -0,0 +1,332 @@
+// 判斷操作事件使用 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

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

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