@xwadex/fesd 0.0.1

package/src/fesd/ripple4/ripple4.js

@@ -0,0 +1,138 @@
+function createRipple(e, r4) {
+  const button = r4;
+  const { color, opacity, duration } = r4.s.options;
+
+  // 可以更改點擊時生成效果樣式的結構
+  let ripples = document.createElement('span');
+
+  //偵測滑鼠點擊位置
+  let x = e.clientX - button.getBoundingClientRect().left;
+  let y = e.clientY - button.getBoundingClientRect().top;
+
+  ripples.style.cssText = `background: ${color};left: ${x}px;top: ${y}px;opacity: ${opacity};animation-duration: ${duration}ms`;
+  ripples.classList.add('circle');
+
+  // 生成
+  button.appendChild(ripples);
+
+  // 生成後消失
+  setTimeout(function () {
+    ripples.remove();
+  }, `${duration}`);
+}
+
+function removeStyle() {
+  document.querySelectorAll('ripple-btn').forEach(button => {
+    const ball = button.querySelector('.hover-ball');
+    button.style.setProperty('--r', '');
+    button.classList.remove('entered');
+  });
+}
+
+document.addEventListener('click', removeStyle);
+
+class Ripple4 extends HTMLElement {
+  constructor() {
+    super();
+    this.initialize = false;
+  }
+
+  connectedCallback() {
+    const r4 = this;
+    if (r4.initialize || r4.classList.contains('r4-initialize')) return;
+    r4.initialize = true;
+    this.#create();
+  }
+
+  #create() {
+    const { SETTINGS } = fesdDB.ripple4;
+    this.s = {};
+    function attrToBoolean(str) {
+      let booleanVal = Boolean(str);
+      booleanVal = str === 'true';
+      return booleanVal;
+    }
+    const options = {
+      color: this.getAttribute('r4-color') || SETTINGS.color,
+      opacity: this.getAttribute('r4-opacity') || SETTINGS.opacity,
+      duration: Number(this.getAttribute('r4-duration')) || SETTINGS.duration,
+      speed: Number(this.getAttribute('r4-speed')) || SETTINGS.speed,
+      hover: this.getAttribute('r4-hover') ? attrToBoolean(this.getAttribute('r4-hover')) : SETTINGS.hover,
+      click: this.getAttribute('r4-hover-click') ? attrToBoolean(this.getAttribute('r4-hover-click')) : SETTINGS.click,
+    };
+
+    this.s.options = options;
+    if (this.s.options.hover) this.classList.add('hover-btn');
+
+    this.#init();
+  }
+
+  #init() {
+    this.#ball();
+    this.#event();
+    this.classList.add('r4-initialize');
+  }
+
+  #ball() {
+    const button = this;
+    const ball = document.createElement('i');
+    ball.classList.add('hover-ball');
+    ball.style.transitionDuration = `${button.s.options.speed}ms`;
+    button.appendChild(ball);
+  }
+
+  #event() {
+    const ball = this.querySelector('i.hover-ball');
+    const button = this;
+    // ripple點擊事件
+    button.addEventListener('click', function (e) {
+      e.stopPropagation();
+      if (button.s.options.click) {
+        createRipple(e, button);
+      }
+    });
+
+    // 判斷操作事件使用 mouse 或是 touch
+    let operateStart = 'ontouchstart' in document.documentElement ? 'touchstart' : 'mouseenter';
+    let operateEnd = 'ontouchend' in document.documentElement ? 'touchend' : 'mouseleave';
+    // hover
+    button.addEventListener(operateStart, function (e) {
+      if (operateStart === 'touchstart') {
+        removeStyle();
+      }
+      if (button.s.options.hover) {
+        const posX = operateStart === 'mouseenter' ? Math.round(e.clientX - button.getBoundingClientRect().left) : Math.round(e.changedTouches[0].clientX - button.getBoundingClientRect().x);
+        const posY = operateStart === 'mouseenter' ? Math.round(e.clientY - button.getBoundingClientRect().top) : Math.round(e.changedTouches[0].clientY - button.getBoundingClientRect().y);
+        const { offsetWidth, offsetHeight } = button;
+        // 最大可覆蓋之半徑
+        const rippleR = Math.ceil(Math.sqrt(offsetWidth ** 2 + offsetHeight ** 2) * 2);
+        button.style.setProperty('--r', rippleR);
+        ball.style.left = posX + 'px';
+        ball.style.top = posY + 'px';
+        button.classList.add('entered');
+      }
+    });
+    button.addEventListener(operateEnd, function (e) {
+      if (operateEnd === 'touchend') return;
+      if (button.s.options.hover) {
+        const posX = operateEnd === 'mouseleave' ? Math.round(e.clientX - button.getBoundingClientRect().left) : Math.round(e.changedTouches[0].clientX - button.getBoundingClientRect().x);
+        const posY = operateEnd === 'mouseleave' ? Math.round(e.clientY - button.getBoundingClientRect().top) : Math.round(e.changedTouches[0].clientY - button.getBoundingClientRect().y);
+        button.style.setProperty('--r', '');
+        ball.style.left = posX + 'px';
+        ball.style.top = posY + 'px';
+        button.classList.remove('entered');
+      }
+    });
+  }
+  update() {
+    this.classList.remove('r4-initialize');
+    this.querySelector('i.hover-ball').remove();
+    this.#create();
+  }
+}
+
+// if (!customElements.get('ripple-btn')) {
+//   customElements.define('ripple-btn', Ripple4);
+// }
+
+export default Ripple4;

package/src/fesd/share4/share4.js

@@ -0,0 +1,191 @@
+import { insert, isString, isElementExist, getAllElements } from './../shared/utils';
+
+('use strict');
+
+const getTargetUrl = type => {
+  // facebook
+  if (type == 'facebook') {
+    return 'https://www.facebook.com/sharer/sharer.php?u=';
+  }
+
+  // line
+  if (type == 'line') {
+    // desktop & mobile 網址不同
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      return 'http://line.naver.jp/R/msg/text/?';
+    }
+    return 'https://lineit.line.me/share/ui?url=';
+  }
+
+  // twitter
+  if (type == 'twitter') {
+    return 'https://twitter.com/intent/tweet?url=';
+  }
+
+  // linkedin
+  if (type == 'linkedin') {
+    return `http://www.linkedin.com/shareArticle?mini=true&title=${document.title}&source=${document.title}&url=`;
+    // return `https://www.linkedin.com/sharing/share-offsite/?url=`;
+  }
+
+  // telegram
+  if (type == 'telegram') {
+    return 'https://telegram.me/share/url?url=';
+  }
+};
+
+class Share4 {
+  constructor(el, options = {}) {
+    this.__storage__ = {
+      el,
+      options,
+    };
+
+    this.#create();
+  }
+
+  #create() {
+    const { el, options } = this.__storage__;
+    // 從 fesdDB 提取設定
+    const { SETTINGS } = fesdDB.share4;
+    if (!isString(el) || !isElementExist(el)) return;
+
+    this.elements = getAllElements(el);
+
+    this.options = Object.assign({}, SETTINGS, options);
+
+    this.#init();
+  }
+
+  #init() {
+    const { elements, options } = this;
+
+    elements.forEach(targets => {
+      targets.querySelectorAll('[share-target]').forEach(el => {
+        el.share = {};
+        el.share.instance = this;
+        el.share.params = options;
+        el.share.eventHandler = this.#trigger;
+        el.addEventListener('click', el.share.eventHandler);
+      });
+    });
+  }
+
+  #trigger() {
+    /** the keyword `this` in this method is pointed to the click target */
+    const { eventHandler, params } = this.share;
+    const type = this.getAttribute('share-target');
+
+    const utm = {
+      source: this.getAttribute('utm-source'),
+      medium: this.getAttribute('utm-medium'),
+      campaign: this.getAttribute('utm-campaign'),
+    };
+
+    const copy = {
+      success: this.getAttribute('copy-success') || params.success,
+      text: this.getAttribute('copy-text') || params.text,
+      className: this.getAttribute('copy-class') || params.className,
+      duration: this.getAttribute('copy-duration') || params.duration,
+    };
+
+    const baseUrl = encodeURIComponent(document.URL);
+    let shareUrl = baseUrl;
+
+    // 若為 wechat 則另開視窗掃描 QRcode
+    if (type == 'wechat') {
+      // https://api.qrserver.com/v1/create-qr-code/?data=${url}&size=300x300
+      window.open(`https://api.qrserver.com/v1/create-qr-code/?data=${baseUrl}&size=250x250`, 'share to wechat', 'width=300,height=300');
+      return;
+    }
+
+    // 若為 url 則複製連結
+    if (type == 'url') {
+      if (isElementExist('.copied-wrapper')) return;
+
+      document.querySelector('body').insertAdjacentHTML(insert.append, `<div class='copied-wrapper'><div class='text'>${copy.success ? copy.success : ''}</div><input id='clipboard' type='text' readonly></div>`);
+
+      const $copied = document.querySelector('.copied-wrapper');
+
+      if (copy.className) {
+        $copied.classList.add(copy.className);
+      }
+      $copied.style.top = this.getBoundingClientRect().top + window.scrollY + 'px';
+      $copied.style.left = this.getBoundingClientRect().left + this.getBoundingClientRect().width / 2 + 'px';
+      $copied.style.display = 'block';
+
+      const $clipboard = document.querySelector('#clipboard');
+
+      $clipboard.value = copy.text ?? window.location.href;
+      $clipboard.setSelectionRange(0, 9999);
+      $clipboard.select();
+
+      if (document.execCommand('copy')) {
+        // 複製對應內容
+        document.execCommand('copy');
+        // 動畫效果
+        const copiedWrapper = document.querySelector('.copied-wrapper');
+        const tooltipsText = document.querySelector('.copied-wrapper .text');
+        tooltipsText.style.display = 'block';
+        tooltipsText.style.opacity = 0;
+        const fadeIn = (element, duration) => {
+          let opacity = 0;
+          const interval = 50;
+          const gap = interval / duration;
+
+          const fading = setInterval(function () {
+            opacity += gap;
+            element.style.opacity = opacity;
+
+            if (opacity >= 1) {
+              clearInterval(fading);
+              setTimeout(function () {
+                fadeOut(element, 300, function () {
+                  copiedWrapper.remove();
+                });
+              }, copy.duration);
+            }
+          }, interval);
+        };
+        const fadeOut = (element, duration, callback) => {
+          let opacity = 1;
+          const interval = 50;
+          const gap = interval / duration;
+
+          const fading = setInterval(() => {
+            opacity -= gap;
+            element.style.opacity = opacity;
+
+            if (opacity <= 0) {
+              clearInterval(fading);
+              element.style.display = 'none';
+              if (callback) callback();
+            }
+          }, interval);
+        };
+        fadeIn(tooltipsText, 300);
+      }
+
+      return;
+    }
+
+    // 其餘則使用對應網址另開新分頁
+    // url + '?utm_source=Facebook' + '&utm_medium=social' + '&utm_campaign=' + campaign
+    shareUrl = `${shareUrl}${utm.source ? `?utm_source=${utm.source}` : ''}${utm.medium ? `&utm_medium${utm.medium}` : ''}${utm.campaign ? `&utm_campaign${utm.campaign}` : ''}`;
+    shareUrl = shareUrl.replace('?', '%3F').replace(new RegExp('&', 'g'), '%26');
+
+    if (type == 'line') {
+      // line 需帶入原始網址
+      window.open(`${getTargetUrl(type)}${baseUrl}`);
+    } else {
+      window.open(`${getTargetUrl(type)}${shareUrl}&quote=${shareUrl}`);
+    }
+
+    this.removeEventListener('click', eventHandler);
+    setTimeout(() => {
+      this.addEventListener('click', eventHandler);
+    }, 100);
+  }
+}
+
+export default Share4;

package/src/fesd/shared/shared.js

@@ -0,0 +1,59 @@
+import {
+  isFunction
+} from './utils'
+
+export default {
+  on(events, handler) {
+    if (!isFunction(handler)) return this;
+
+    const { __events__ } = this
+
+    events.split(' ').forEach(evt => {
+      if (!__events__[evt]) __events__[evt] = []
+      __events__[evt].push(handler)
+    })
+
+    return this
+  },
+
+  off(events, handler) {
+    const { __events__ } = this
+
+    events.split(' ').forEach(evt => {
+      if (typeof handler === 'undefined') __events__[evt] = []
+      else if (__events__[evt]) {
+        __events__[evt].forEach((evtHandler, index) => {
+          if (evtHandler === handler) __events__[evt].splice(index, 1)
+        })
+      }
+    })
+
+    return this
+  },
+
+  once(events, handler) {
+    if (!isFunction(handler)) return this;
+
+    const onceHandler = (...args) => {
+      this.off(events, onceHandler)
+      handler.apply(this, args)
+    }
+
+    return this.on(events, onceHandler)
+  },
+
+  emit(...args) {
+    const { __events__ } = this
+
+    const event = args[0]
+    const data = args.slice(1, args.length)
+
+    if (!__events__[event]) return this
+
+    __events__[event].forEach(handler => {
+      if (isFunction(handler)) handler.apply(this, data)
+    })
+
+    return this
+  }
+}

package/src/fesd/shared/utils.js

@@ -0,0 +1,98 @@
+
+// insertAdjacentHTML 語意化
+export const insert = {
+  before: 'beforebegin',
+  after: 'afterend',
+  append: 'beforeend',
+  prepend: 'afterbegin'
+}
+
+// check value is string and not empty
+export const isString = (value) => {
+  return typeof value === 'string' && value !== '';
+};
+
+// check value is number and not NaN
+export const isNumber = (value) => {
+  return typeof value === 'number' && !isNaN(value);
+};
+
+// check is HTML element
+export const isElement = (value) => {
+  return value instanceof HTMLElement;
+};
+
+// check is Node List
+export const isNodeList = (value) => {
+  return value instanceof NodeList;
+};
+
+// check element is exist
+export const isElementExist = (value) => {
+  return getElement(value) !== null;
+};
+
+// check value is a function
+export const isFunction = (value) => {
+  return typeof value === 'function';
+};
+
+// if value is an element then return value, if not then query value
+export const getElement = (value) => {
+  return isElement(value) ? value : document.querySelector(value);
+};
+
+// if value is an element then return value, if not then query value
+export const getAllElements = (value) => {
+  return isNodeList(value) ? value : document.querySelectorAll(value);
+};
+
+// create a unique id
+export const createUid = () => {
+  return Math.random().toString(36).substr(2, 9);
+};
+
+// parse string to HTML element
+export const toHTMLElement = (str) => {
+  const dom = document.createElement('div');
+  dom.innerHTML = str;
+  return dom.childNodes;
+};
+
+// parse json to object
+export const jsonParse = (json) => {
+  try {
+    JSON.parse(json);
+  } catch (e) {
+    return json;
+  }
+  return JSON.parse(json);
+};
+
+// get element transform X
+export const getTransformX = (target) => {
+  const transform = getComputedStyle(target).transform;
+  let mat = transform.match(/^matrix3d\((.+)\)$/);
+  if (mat) return parseFloat(mat[1].split(', ')[12]);
+  mat = transform.match(/^matrix\((.+)\)$/);
+  return mat ? parseFloat(mat[1].split(', ')[4]) : 0;
+};
+
+// get element transform Y
+export const getTransformY = (target) => {
+  const transform = getComputedStyle(target).transform;
+  let mat = transform.match(/^matrix3d\((.+)\)$/);
+  if (mat) return parseFloat(mat[1].split(', ')[13]);
+  mat = transform.match(/^matrix\((.+)\)$/);
+  return mat ? parseFloat(mat[1].split(', ')[5]) : 0;
+};
+
+// warn
+export const warn = (target, msg) => {
+  console.warn(`[${target} warn]: ${msg}`);
+};
+
+// error
+export const error = (target, msg) => {
+  console.error(`[${target} error]: ${msg}`);
+};

package/src/fesd/tab4/_tab4.sass

@@ -0,0 +1,25 @@
+tab-el
+  [t4-role="tabPanel"]
+    width: 100%
+    height: 100%
+    opacity: 0
+    &[t4-display="silde"]
+      // 要用slide一定要加喔 不然會壞掉
+      overflow: hidden
+// 可自訂 - 鍵頭按鈕樣式
+[t4-role="prev"],
+[t4-role="next"]
+  opacity: 1
+  transition: 0.5s opacity
+  cursor: pointer
+  &:hover
+    opacity: 0.7
+  &[disabled]
+    opacity: 0.1
+    pointer-events: none
+// 頁籤樣式
+[aria-selected="false"]
+  opacity: 0.7
+[aria-selected="true"]
+  opacity: 1
+  transition: 0.5s opacity