@xwadex/fesd 0.0.1

package/src/fesd/video4/video4.js

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

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

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

@@ -0,0 +1,29 @@
+// 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'