@xwadex/fesd 0.0.2 → 0.0.5

package/src/fesd/image-preview/image-preview.js

@@ -1,209 +0,0 @@
-'use strict';
-
-//建立 callback Function
-function createCallbackFunction(attributeValue, defaultValue) {
-  if (attributeValue) {
-    return function (el, res) {
-      Function(attributeValue)(el, res);
-    };
-  } else {
-    return defaultValue;
-  }
-}
-
-//產生結構
-function createDOM(input, element, file, res) {
-  const params = element.params;
-  const preview = input.closest('[data-upload-item]').querySelector('[data-preview]');
-  if (preview.querySelector('img')) preview.querySelector('img').remove();
-  preview.appendChild(res.imgElement);
-  const group = input.dataset.group;
-  const inputIndex = document.querySelector(element.el).dataset.index;
-  if (params.compress) {
-    //副檔名
-    const fileExt = file.name.substring(file.name.lastIndexOf('.')).replace('.');
-    //檔名
-    const fileName = file.name.replace(`.${fileExt}`, '');
-    //檔案壓縮
-    res.originalCanvas.toBlob(
-      function (blob) {
-        const imgFile = new File([blob], `${fileName}`, { type: file.type });
-        uploadImage[`${group}`][inputIndex] = {
-          file: imgFile,
-          info: res,
-        };
-        if (params.on.changeAfter && typeof params.on.changeAfter === 'function') {
-          params.on.changeAfter(input, res);
-        }
-      },
-      file.type,
-      params.compress,
-    );
-  } else {
-    uploadImage[`${group}`][inputIndex] = {
-      file: file,
-      info: res,
-    };
-    if (params.on.changeAfter && typeof params.on.changeAfter === 'function') {
-      params.on.changeAfter(input, res);
-    }
-  }
-}
-
-//產生Canvas
-function createCanvas(options, img, outputW, outputH) {
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-  const originalWidth = img.width;
-  const originalHeight = img.height;
-  const originalRatio = (originalHeight / originalWidth) * 100;
-  const outputRatio = (outputH / outputW) * 100;
-  let newWidth = 0;
-  let newHeight = 0;
-  canvas.width = outputW;
-  canvas.height = outputH;
-  //縮圖填滿
-  switch (options.previewSize) {
-    case 'contain':
-      if (originalRatio < outputRatio) {
-        newWidth = canvas.width;
-        newHeight = (outputW * originalRatio) / 100;
-      } else if (originalRatio > outputRatio) {
-        newWidth = (outputH / originalRatio) * 100;
-        newHeight = canvas.height;
-      } else {
-        newWidth = canvas.width;
-        newHeight = canvas.height;
-      }
-      break;
-    case 'cover':
-      if (originalRatio < outputRatio) {
-        newWidth = (outputH / originalRatio) * 100;
-        newHeight = canvas.height;
-      } else if (originalRatio > outputRatio) {
-        newWidth = canvas.width;
-        newHeight = (outputW * originalRatio) / 100;
-      } else if (originalRatio === outputRatio) {
-        newWidth = canvas.width;
-        newHeight = canvas.height;
-      }
-      break;
-  }
-  const x = (canvas.width - newWidth) * 0.5;
-  const y = (canvas.height - newHeight) * 0.5;
-  ctx.drawImage(img, x, y, newWidth, newHeight);
-
-  return canvas;
-}
-
-//將檔案轉成圖片
-function convertImg(options, dataUrl) {
-  return new Promise((resolve, reject) => {
-    if (dataUrl) {
-      const img = new Image();
-      img.src = dataUrl;
-      img.classList.add(options.previewSize);
-      img.onload = () => {
-        let result = {
-          imgElement: img,
-          originalCanvas: createCanvas(options, img, img.width, img.height),
-          info: {
-            originalWidth: img.width,
-            originalHeight: img.height,
-            ratio: (img.height / img.width) * 100 + '%',
-          },
-        };
-        resolve(result);
-      };
-    } else {
-      resolve();
-    }
-  });
-}
-
-//小數點後第N位四捨五入
-function formatFloat(num, pos) {
-  const size = Math.pow(10, pos);
-  return Math.round(num * size) / size;
-}
-
-//檢查檔案大小
-function checkSize(file, sizeLimit) {
-  let fileSize = file.size / 1024 / 1024;
-  return `${formatFloat(fileSize, 2)}` <= sizeLimit;
-}
-
-//讀取檔案
-function readFileHandler(e, input, element) {
-  if (e.target.files.length <= 0) return;
-  const file = e.target.files[0];
-  const parentsEl = input.closest('[data-upload-item]');
-  let reader = new FileReader();
-  reader.onload = event => {
-    const dataUrl = file.type.split('/')[0] === 'image' ? event.target.result : null;
-    if (element.params.sizeLimit && !checkSize(file, element.params.sizeLimit)) {
-      input.value = '';
-      parentsEl.classList.add('over-limit');
-      if (element.params.on.overLimit && typeof element.params.on.overLimit === 'function') {
-        element.params.on.overLimit(input, element.params.sizeLimit);
-      }
-      return;
-    } else {
-      parentsEl.classList.remove('over-limit');
-      parentsEl.classList.add('uploaded');
-      convertImg(element.params, dataUrl).then(res => {
-        createDOM(input, element, file, res);
-      });
-    }
-  };
-  reader.readAsDataURL(file);
-}
-
-class ImagePreview {
-  constructor(element, params) {
-    const self = this;
-    self.el = element;
-    // default params
-    self.params = {
-      on: {
-        changeAfter: null,
-        overLimit: null,
-      },
-      group: 'group', //群組名稱 (type: String)
-      sizeLimit: 2, //大小限制 (type: Number 單位: MB)
-      previewSize: 'cover', //縮圖形式 (type: String 'contain' || 'cover')
-      compress: 0.8, //壓縮品質 (type: Number 0~1 || false)
-    };
-    Object.assign(self.params, params);
-    self.init();
-  }
-  init() {
-    const self = this;
-    const inputs = document.querySelectorAll(`${self.el}:not(.preview-active)`);
-    if (inputs.length <= 0) return;
-    window.uploadImage = {};
-    inputs.forEach((input, index) => {
-      input.classList.add('preview-active');
-      // final set params
-      const params = {
-        group: input.dataset.group || self.params.group,
-        sizeLimit: parseInt(input.dataset.limit) || self.params.sizeLimit,
-        previewSize: input.dataset.previewSize || self.params.previewSize,
-        compress: input.dataset.compress || self.params.compress,
-        on: {
-          changeAfter: createCallbackFunction(input.dataset.changeAfter, self.params.on.changeAfter),
-          overLimit: createCallbackFunction(input.dataset.overLimit, self.params.on.overLimit),
-        },
-      };
-      self.params = params;
-      if (typeof uploadImage[`${params.group}`] === 'undefined') uploadImage[`${params.group}`] = [];
-      if (!input.dataset.group) input.dataset.group = params.group;
-      input.dataset.index = document.querySelectorAll(`[data-group="${params.group}"]`).length - 1;
-      input.addEventListener('change', function (e) {
-        readFileHandler(e, input, self);
-      });
-    });
-  }
-}
-
-export default ImagePreview;

package/src/fesd/image-validate/_image-validate.sass

@@ -1,21 +0,0 @@
-.no-image
-  position: absolute
-  top: 50%
-  left: 50%
-  transform: translate3d(-50%,-50%,0)
-  width: 100%
-  height: 100%
-  background: #F7F7F7
-  border: 1px solid #ABABAB
-  overflow: hidden
-  .slash1,.slash2
-    position: absolute
-    top: 0
-    height: 1px
-    background-color: #ABABAB
-  .slash1
-    left: 0
-    transform-origin: left top
-  .slash2
-    right: 0
-    transform-origin: right top

package/src/fesd/image-validate/image-validate.js

@@ -1,84 +0,0 @@
-export default class ImageValidate {
-  constructor() {
-    this.init();
-  }
-  init() {
-    const images = document.querySelectorAll('*:not([video-id]) > img');
-    const noImageDom = (width, height) => {
-      const div = document.createElement('div');
-      const slash1 = document.createElement('span');
-      const slash2 = document.createElement('span');
-      const slashWidth = Math.sqrt(width ** 2 + height ** 2);
-      const theta = (Math.asin(height / slashWidth) * 180) / Math.PI;
-      div.className = 'no-image';
-      slash1.className = 'slash1';
-      slash1.style.cssText = `
-          width: ${slashWidth}px;
-          transform: rotate(${theta}deg);
-        `;
-      slash2.className = 'slash2';
-      slash2.style.cssText = `
-          width: ${slashWidth}px;
-          transform: rotate(${-theta}deg);
-        `;
-      div.appendChild(slash1);
-      div.appendChild(slash2);
-      return div;
-    };
-    const errorImage = document.querySelectorAll('.error-image');
-    for (let i = 0; i < errorImage.length; i++) {
-      errorImage[i].remove();
-    }
-    images.forEach((img) => {
-      let src;
-      const wrapWidth = img.parentElement.clientWidth;
-      const wrapHeight = img.parentElement.clientHeight;
-      if (img.classList.contains('lazy') || img.classList.contains('swiper-lazy')) {
-        src = img.getAttribute('data-src');
-      } else {
-        src = img.getAttribute('src');
-      }
-      if (src === '') {
-        const wrapDIV = document.createElement('div');
-        const parentsPosition = getComputedStyle(img.parentElement).position;
-        wrapDIV.className = 'error-image';
-        if (parentsPosition === 'static') {
-          img.parentElement.style.position = 'relative';
-        }
-        img.parentElement.appendChild(wrapDIV);
-        wrapDIV.style.cssText = `
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 100%;
-          height: 100%;
-          transform: translate(-50%,-50%);
-          z-index: 1;
-        `;
-        wrapDIV.appendChild(noImageDom(wrapWidth, wrapHeight));
-      }
-    });
-    function imageResize() {
-      const noImage = document.querySelectorAll('.no-image');
-      if (noImage.length <= 0) return;
-      noImage.forEach((item) => {
-        const wrapWidth = item.parentElement.clientWidth;
-        const wrapHeight = item.parentElement.clientHeight;
-        const slashWidth = Math.sqrt(wrapWidth ** 2 + wrapHeight ** 2);
-        const theta = (Math.asin(wrapHeight / slashWidth) * 180) / Math.PI;
-        item.querySelector('.slash1').style.cssText = `
-          width: ${slashWidth}px;
-          transform: rotate(${theta}deg);
-        `;
-        item.querySelector('.slash2').style.cssText = `
-          width: ${slashWidth}px;
-          transform: rotate(${-theta}deg);
-        `;
-      });
-    }
-    window.addEventListener('resize', imageResize);
-  }
-  reValidate() {
-    this.init();
-  }
-}

package/src/fesd/marquee4/_marquee4.sass

@@ -1,45 +0,0 @@
-marquee-el
-	display: flex
-	width: 100%
-	height: 100%
-	padding: 0 !important
-	border: none !important
-	overflow: hidden
-	&.continual
-		.animate-container
-			display: flex
-			width: 100%
-			overflow: hidden
-	&[direction="left"],&[direction="right"]
-		white-space: nowrap
-		&.continual
-			.animate-container
-				flex-direction: row
-				margin: 0 calc(-1 * var(--continual-gap) / 2)
-				transform: translateX(calc(var(--continual-gap) / 2))
-			.animate-item
-				padding: 0 calc(var(--continual-gap) / 2)
-	&[direction="top"],&[direction="bottom"]
-		&.continual
-			.animate-container
-				flex-direction: column
-				margin: calc(-1 * var(--continual-gap) / 2) 0
-			.animate-item
-				padding: calc(var(--continual-gap) / 2) 0
-	&[direction="left"]
-		&.continual
-			.animate-container
-				justify-content: flex-start
-	&[direction="right"]
-		&.continual
-			.animate-container
-				justify-content: flex-end
-	.animate-container
-		flex-wrap: nowrap
-	.animate-item
-		width: fit-content
-		opacity: 0
-		&.start,
-		&.start + .animate-item
-			opacity: 1
-			transition: opacity .6s