@xwadex/fesd 0.0.1 → 0.0.3

package/src/fesd/video4/video4.js

@@ -1,237 +0,0 @@
-import Modal4 from '../modal4/modal4';
-import videoPlayer from './videoPlayer';
-import SHARED from './../shared/shared';
-
-import { isString, isElement, isNodeList, getAllElements, warn, error, insert } from './../shared/utils';
-
-('use strict');
-
-// define custom element
-if (!customElements.get('video-player')) {
-  customElements.define('video-player', videoPlayer);
-}
-
-// 判斷影片物件有沒有 video-id
-const hasVideoID = data => {
-  return data.videoId !== '' || typeof data.videoId !== 'undefined' ? true : false;
-};
-
-// 判斷影片物件是否已經啟用
-const isActive = data => {
-  return data.$selector.getAttribute('video4-active') === 'on' ? true : false;
-};
-
-const createPlayer = params => {
-  return `<video-player video-id="${params.videoId}" video-type="${params.videoType}" video-autoplay="${params.videoAutoplay}"></video-player>`;
-};
-
-class video4 {
-  constructor(el, options = {}) {
-    // 可傳 string 或 element 或 nodeList
-    if (!isString(el) && !isElement(el) && !isNodeList(el)) {
-      error('video4', `找不到該物件 -> ${el}`);
-      return;
-    }
-
-    this.__storage__ = {
-      el,
-      options,
-    };
-
-    this.#create();
-  }
-
-  #create() {
-    const { el, options } = this.__storage__;
-    // 從 fesdDB 提取設定
-    const { SETTINGS, EVENTS } = fesdDB.video4;
-
-    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.video = {};
-      el.video.instance = this;
-      el.video.defaultOptions = options;
-      el.video.params = this.#getVideoData(el);
-
-      if (hasVideoID(el.video.params) && !isActive(el.video.params)) {
-        el.setAttribute('video4-active', 'on');
-        this.#createCover(el);
-      }
-
-      if (!hasVideoID(el.video.params)) {
-        error('video4', `無法取得影片 ID`);
-      }
-    });
-
-    this.emit('init');
-  }
-
-  #createCover(el) {
-    const { LAYOUT } = fesdDB.video4;
-    const params = el.video.params;
-    const { $selector, videoLayoutNo, videoId, videoType, videoMode, videoButton, videoCover } = params;
-
-    if (videoMode === 'onBox') {
-      let $target = null;
-      if (videoCover === 'on') {
-        el.classList.add('video4-cover');
-        // 無圖片結構放置圖片結構
-        if (!$selector.querySelector('img')) {
-          $selector.insertAdjacentHTML(insert.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>');
-          warn('video4', `若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構，若無結構則自動加入圖片結構`);
-        }
-
-        const $cover = $selector.querySelector('img');
-        $cover.insertAdjacentHTML(insert.after, LAYOUT[videoLayoutNo]);
-
-        const src = $cover?.getAttribute('src') || $cover?.getAttribute('data-src');
-
-        // 無圖片時放置預設封面畫面，僅 youtube & vimeo 提供
-        if (!src && videoType == 'youtube') {
-          $cover.setAttribute('src', `https://img.youtube.com/vi/${videoId}/0.jpg`);
-        } else if (!src && videoType == 'vimeo') {
-          $cover.setAttribute('src', `https://vumbnail.com/${videoId}_large.jpg`);
-        } else {
-          warn('video4', `僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片`);
-        }
-      }
-
-      // 若無設定撥放按鈕，則點擊物件轉移為物件本身
-      if (videoButton == 'off') {
-        $target = $selector;
-      } else {
-        $target = $selector.querySelector(videoButton) ?? $selector;
-        if (!$selector.querySelector(videoButton)) {
-          warn('video4', `找不到 videoButton 設定的 element -> '${videoButton}' , 點擊物件轉移至 '${this.__storage__.el}'`);
-        }
-      }
-
-      if (!$target.video) {
-        $target.video = {};
-        $target.video.params = params;
-      }
-
-      $target.video.eventHandler = this.#trigger;
-      $target.addEventListener('click', $target.video.eventHandler);
-    } else if (videoMode === 'onPage') {
-      let $target = null;
-      if (videoCover == 'on') {
-        el.classList.add('video4-cover');
-        // 無圖片結構放置圖片結構
-        if (!$selector.querySelector('img')) {
-          $selector.insertAdjacentHTML(insert.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>');
-          warn('video', `若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構`);
-        }
-
-        const $cover = $selector.querySelector('img');
-        $cover.insertAdjacentHTML(insert.after, LAYOUT[videoLayoutNo]);
-
-        const src = $cover?.getAttribute('src') || $cover?.getAttribute('data-src');
-
-        // 無圖片時放置預設封面畫面，僅 youtube 提供
-        if (!src && videoType == 'youtube') {
-          $cover.setAttribute('src', `https://img.youtube.com/vi/${videoId}/0.jpg`);
-        } else if (!src && videoType == 'vimeo') {
-          $cover.setAttribute('src', `https://vumbnail.com/${videoId}_large.jpg`);
-        } else if (!src) {
-          warn('video4', `僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片`);
-        }
-
-        // 若無設定撥放按鈕，則點擊物件轉移為物件本身
-        if (videoButton == 'off') {
-          $target = $selector;
-        } else {
-          $target = $selector.querySelector(videoButton) ?? $selector;
-          if (!$selector.querySelector(videoButton)) {
-            warn('video4', `找不到 videoButton 設定的 element -> '${videoButton}', 點擊物件轉移至 '${this.__storage__.el}'`);
-          }
-        }
-      } else {
-        $selector.innerHTML = createPlayer(params);
-        return;
-      }
-
-      if (!$target.video) {
-        $target.video = {};
-        $target.video.params = params;
-      }
-
-      $target.video.eventHandler = this.#trigger;
-      $target.addEventListener('click', $target.video.eventHandler);
-    }
-  }
-
-  #trigger(e) {
-    const { video } = this;
-    const { $selector, videoMode, videoTarget, videoTargetRoute } = video.params;
-
-    if (videoMode == 'onBox') {
-      const options = {
-        target: videoTarget,
-        route: videoTargetRoute,
-        on: {
-          complete(modal) {
-            modal.querySelector('.modal-content').insertAdjacentHTML('beforeend', createPlayer(video.params));
-          },
-          open(modal) {
-            const scrollers = modal.querySelectorAll('[data-overlayscrollbars-viewport]');
-            _g.lazy.update();
-            _g.scrollLock([...scrollers]);
-          },
-          close(modal) {
-            const scrollers = modal.querySelectorAll('[data-overlayscrollbars-viewport]');
-            _g.scrollUnlock([...scrollers]);
-          },
-          destroy(modal) {},
-        },
-      };
-
-      Modal4.open(options);
-    } else if (videoMode == 'onPage') {
-      // onPage 點擊後應自動撥放影片
-      video.params.videoAutoplay = 'on';
-      // 直接替換 cover & playButton
-      $selector.innerHTML = createPlayer(video.params);
-    }
-  }
-
-  #getVideoData(el) {
-    const { SETTINGS } = fesdDB.video4;
-
-    return {
-      $selector: el,
-      videoId: el.getAttribute('video-id'),
-      videoType: el.getAttribute('video-type'),
-      videoAutoplay: el.getAttribute('video-autoplay') || SETTINGS.videoAutoplay,
-      videoMode: el.getAttribute('video-mode') || SETTINGS.videoMode,
-      videoButton: el.getAttribute('video-button') || SETTINGS.videoButton,
-      videoCover: el.getAttribute('video-cover') || SETTINGS.videoCover,
-      videoLayoutNo: el.getAttribute('video-layout-no') || SETTINGS.videoLayoutNo,
-      videoTarget: el.getAttribute('video-target') || SETTINGS.videoTarget,
-      videoTargetRoute: el.getAttribute('video-target-route') || SETTINGS.videoTargetRoute,
-    };
-  }
-
-  update() {
-    this.#create();
-  }
-}
-
-Object.assign(video4.prototype, SHARED);
-
-export default video4;

package/src/fesd/video4/videoPlayer.js

@@ -1,195 +0,0 @@
-
-import { insert, warn } from './../shared/utils';
-
-'use strict'
-
-// create template method
-const createTemplate = (el) => {
-  const { TEMPLATE } = fesdDB.video4
-  const { childDom } = el
-  const container = document.createElement('div')
-  container.innerHTML = TEMPLATE();
-
-  const content = container.querySelector('.player-wrapper');
-  [...childDom].forEach((child) => {
-    content.append(child);
-  });
-
-  return container.children[0];
-};
-
-// class
-class videoPlayer extends HTMLElement {
-  constructor() {
-    super();
-
-    this.#create();
-  }
-
-  #create() {
-    if (!this.getAttribute('video-id')) {
-      warn('videoPlayer', `video-render needs a ['video-id'] attribute to creat player.`);
-      return;
-    }
-
-    this.videoId = this.getAttribute('video-id');
-    this.videoType = this.getAttribute('video-type');
-    this.autoplay = this.getAttribute('video-autoplay');
-
-    this.#mount();
-  }
-
-  #mount() {
-    this.childDom = this.childNodes;
-    this.template = createTemplate(this);
-
-    // 清空原本結構
-    this.innerHTML = '';
-    // 放置整理過後的結構
-    this.append(this.template);
-
-    this.#init();
-  }
-
-  #init() {
-    const { videoType } = this;
-    let layout = '';
-
-    switch (videoType) {
-      case 'youtubeAPI':
-        // this.#youtubeAPI();
-        break;
-      case 'youtube':
-        layout = this.#youtube();
-        break;
-      case 'youkuAPI':
-        // this.#youkuAPI();
-        break;
-      case 'youku':
-        layout = this.#youku();
-        break;
-      case 'vimeo':
-        layout = this.#vimeo();
-        break;
-      case 'bilibili':
-        layout = this.#bilibili();
-        break;
-      case 'videojs':
-        // this.#videoJs();
-        break;
-      default:
-        break;
-    }
-
-    this.querySelector('.player-wrapper').insertAdjacentHTML(insert.prepend, layout);
-  }
-
-  // youtube iframe
-  #youtube() {
-    const { videoId, autoplay } = this;
-    return `<iframe src="https://www.youtube.com/embed/${videoId}?rel=0&${
-      autoplay === 'on' ? 'autoplay=1' : ''
-    }&mute=1&loop=1&enablejsapi=1" frameborder="0" allowfullscreen="0" volumn="0" allow="${
-      autoplay === 'on' ? 'autoplay;' : ''
-    } encrypted-media; gyroscope; picture-in-picture;"></iframe>`;
-  }
-
-  // vimeo iframe
-  #vimeo() {
-    const { videoId, autoplay, hash } = this;
-
-    return `<iframe src="https://player.vimeo.com/video/${videoId}?h=${hash}&${
-      autoplay === 'on' ? 'autoplay=1' : ''
-    }&loop=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="${
-      autoplay === 'on' ? 'autoplay;' : ''
-    } fullscreen; picture-in-picture" allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"></script>`;
-  }
-
-  // youku iframe
-  #youku() {
-    const { videoId, autoplay } = this;
-
-    return `<iframe src="https://player.youku.com/embed/${videoId}?rel=0&${
-      autoplay === 'on' ? 'autoplay=1' : ''
-    }" frameborder=0 "allowfullscreen"></iframe>`;
-  }
-
-  #bilibili() {
-    const { videoId, autoplay } = this;
-    return `<iframe src="//player.bilibili.com/player.html?bvid=${videoId}&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>`
-  }
-
-  play() {
-    const { videoType } = this;
-
-    switch (videoType) {
-      case 'youtubeAPI':
-        // 無可用 functione
-        break;
-      case 'youtube':
-        this.querySelector('iframe').contentWindow.postMessage(
-          JSON.stringify({ event: 'command', func: 'playVideo' }),
-          '*'
-        );
-        break;
-      case 'youkuAPI':
-        // 無可用 functione
-        break;
-      case 'youku':
-        // 無可用 functione
-        break;
-      case 'vimeo':
-        this.querySelector('iframe').contentWindow.postMessage(
-          JSON.stringify({ value: 'true', method: 'play' }),
-          '*'
-        );
-        break;
-      case 'bilibili':
-        // 無可用 functione
-        break;
-      case 'videojs':
-        // 無可用 functione
-        break;
-      default:
-        break;
-    }
-  }
-
-  pause() {
-    const { videoType } = this;
-
-    switch (videoType) {
-      case 'youtubeAPI':
-        // 無可用 functione
-        break;
-      case 'youtube':
-        this.querySelector('iframe').contentWindow.postMessage(
-          JSON.stringify({ event: 'command', func: 'pauseVideo' }),
-          '*'
-        );
-        break;
-      case 'youkuAPI':
-        // 無可用 functione
-        break;
-      case 'youku':
-        // 無可用 functione
-        break;
-      case 'vimeo':
-        this.querySelector('iframe').contentWindow.postMessage(
-          JSON.stringify({ value: 'true', method: 'pause' }),
-          '*'
-        );
-        break;
-      case 'bilibili':
-        // 無可用 functione
-        break;
-      case 'videojs':
-        // 無可用 functione
-        break;
-      default:
-        break;
-    }
-  }
-}
-
-export default videoPlayer;

package/src/fesd.js

@@ -1,53 +0,0 @@
-import './fesd.sass';
-// 卷軸套件
-import 'overlayscrollbars/overlayscrollbars.css';
-// Swiper_V8
-import 'swiper/css/bundle';
-
-// FESD_DB
-export { default as FESD_DB } from './fesdDB.js';
-
-// Detect4
-export { default as Detect4 } from './fesd/detect4/detect4';
-
-// Anchor4
-export { default as Anchor4 } from './fesd/anchor4/anchor4';
-
-// Modal4
-export { default as Modal4 } from './fesd/modal4/modal4';
-
-// Aost4
-export { default as Aost4 } from './fesd/aost4/aost4';
-
-// Article4
-export { default as Article4 } from './fesd/article4/article4';
-
-// Video4
-export { default as Video4 } from './fesd/video4/video4';
-
-// Share4
-export { default as Share4 } from './fesd/share4/share4';
-
-// Dropdown4
-export { default as Dropdown4 } from './fesd/dropdown4/dropdown4';
-
-// Marquee4
-export { default as Marquee4 } from './fesd/marquee4/marquee4';
-
-// Multipurpose4
-export { default as Multipurpose4 } from './fesd/multipurpose4/multipurpose4';
-
-// Tab4
-export { default as Tab4 } from './fesd/tab4/tab4';
-
-// Collapse4
-export { default as Collapse4 } from './fesd/collapse4/collapse4';
-
-// Ripple4
-export { default as Ripple4 } from './fesd/ripple4/ripple4';
-
-// image-validate
-export { default as ImageValidate } from './fesd/image-validate/image-validate';
-
-// image-preview
-export { default as ImagePreview } from './fesd/image-preview/image-preview';

package/src/fesd.sass

@@ -1,29 +0,0 @@
-// Modal4
-@import './fesd/modal4/_modal4.sass'
-
-// Aost4
-@import './fesd/aost4/_aost4.sass'
-
-// Video4
-@import './fesd/video4/_video4.sass'
-
-// Dropdown4
-@import './fesd/dropdown4/_dropdown4.sass'
-
-// Marquee4
-@import './fesd/marquee4/_marquee4.sass'
-
-// Multipurpose4
-@import './fesd/multipurpose4/_multipurpose4.sass'
-
-// Tab4
-@import './fesd/tab4/_tab4.sass'
-
-// Ripple4
-@import './fesd/ripple4/_ripple4.sass'
-
-// image-validate
-@import './fesd/image-validate/_image-validate.sass'
-
-// image-preview
-@import './fesd/image-preview/_image-preview.sass'