✨ Allow disable modal click close (fixed #185)

elninotech · May 8, 2020 · 9e5c873 · 9e5c873
1 parent 3d644cd
commit 9e5c873
Show file tree

Hide file tree

Showing 46 changed files with 738 additions and 727 deletions.
diff --git a/demo/index.ts b/demo/index.ts
@@ -33,7 +33,7 @@ import {
  HueRotate,
  Invert,
  Saturate,
- Sepia
+ Sepia,
 } from "../src";
 
 const button = document.createElement("div");
@@ -48,15 +48,15 @@ const uppload = new Uppload({
  lang: en,
  maxSize: [256, 256],
  uploader: (file, updateProgress) =>
- new Promise(resolve => {
+ new Promise((resolve) => {
  console.log("Uploading file...", file);
  setTimeout(() => resolve(window.URL.createObjectURL(file)), 2750);
  let progress = 0;
  const interval = setInterval(() => {
  if (progress > 99) clearInterval(interval);
  updateProgress(progress++);
  }, 25);
- })
+ }),
 });
 
 // These are our public demo API keys
@@ -75,8 +75,8 @@ uppload.use([
  "image/jpeg",
  "image/jpg",
  "image/png",
- "application/pdf"
- ]
+ "application/pdf",
+ ],
  }),
  new Camera(),
  new Instagram(),
@@ -98,12 +98,12 @@ uppload.use([
  new LinkedIn(),
  new Reddit(),
  new Tumblr(),
- new WeHeartIt()
+ new WeHeartIt(),
 ]);
 
 uppload.use([
  new Crop({
- aspectRatio: 1
+ aspectRatio: 1,
  }),
  new Rotate(),
  new Blur(),
@@ -114,7 +114,7 @@ uppload.use([
  new HueRotate(),
  new Invert(),
  new Saturate(),
- new Sepia()
+ new Sepia(),
 ]);
 
 uppload.on("*", (a: any, b?: any) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/browser.ts b/src/browser.ts
@@ -57,7 +57,7 @@ import {
  HueRotate,
  Invert,
  Sepia,
- Saturate
+ Saturate,
 } from "./index";
 
 export interface UpploadWindow extends Window {

diff --git a/src/effects/crop/index.ts b/src/effects/crop/index.ts
@@ -3,12 +3,12 @@ import Cropper from "cropperjs";
 import {
  IHandlersParams,
  ITemplateParams,
- IUpploadFile
+ IUpploadFile,
 } from "../../helpers/interfaces";
 import {
  safeListen,
  fitImageToContainer,
- canvasToBlob
+ canvasToBlob,
 } from "../../helpers/elements";
 
 type CropNum = 1 | 2 | 3 | undefined;
@@ -21,7 +21,7 @@ export default class Crop extends UpploadEffect {
  aspectRatioOptions = {
  free: NaN,
  square: 1,
- "16:9": 16 / 9
+ "16:9": 16 / 9,
  } as { [index: string]: number };
  autoCropArea: CropNum = 1;
  viewMode: CropNum = 1;
@@ -32,7 +32,7 @@ export default class Crop extends UpploadEffect {
  aspectRatioOptions,
  hideAspectRatioSettings,
  autoCropArea,
- viewMode
+ viewMode,
  }: {
  aspectRatio?: number;
  aspectRatioOptions?: { [index: string]: number };
@@ -67,9 +67,10 @@ export default class Crop extends UpploadEffect {
  }" data-name="${aspectRatio}" name="crop-aspect-ratio" type="radio"${
  !index ? " checked" : ""
  } id="crop-aspect-ratio-${aspectRatio}">
- <label for="crop-aspect-ratio-${aspectRatio}">${translate(
- `effects.crop.aspectRatios.${aspectRatio}`
- ) || aspectRatio}</label>`
+ <label for="crop-aspect-ratio-${aspectRatio}">${
+ translate(`effects.crop.aspectRatios.${aspectRatio}`) ||
+ aspectRatio
+ }</label>`
  )
  .join("")}
  </div>`
@@ -95,22 +96,22 @@ export default class Crop extends UpploadEffect {
  autoCropArea: this.autoCropArea,
  viewMode: this.viewMode,
  ready() {
- canvasToBlob(cropper.getCroppedCanvas(), type).then(blob => {
+ canvasToBlob(cropper.getCroppedCanvas(), type).then((blob) => {
  originalFile.blob = blob;
  params.next(originalFile);
  });
  },
  cropend() {
- canvasToBlob(cropper.getCroppedCanvas(), type).then(blob => {
+ canvasToBlob(cropper.getCroppedCanvas(), type).then((blob) => {
  originalFile.blob = blob;
  params.next(originalFile);
  });
- }
+ },
  });
  const aspectRatios = params.uppload.container.querySelectorAll(
  "input[name='crop-aspect-ratio']"
  );
- aspectRatios.forEach(aspectRatio => {
+ aspectRatios.forEach((aspectRatio) => {
  safeListen(aspectRatio, "change", () => {
  const selectedAspectRatio = params.uppload.container.querySelector(
  "input[name='crop-aspect-ratio']:checked"
@@ -121,7 +122,7 @@ export default class Crop extends UpploadEffect {
  selectedAspectRatio.getAttribute("data-name") || "free"
  ]
  );
- canvasToBlob(cropper.getCroppedCanvas(), type).then(blob => {
+ canvasToBlob(cropper.getCroppedCanvas(), type).then((blob) => {
  originalFile.blob = blob;
  params.next(originalFile);
  });

diff --git a/src/effects/flip/index.ts b/src/effects/flip/index.ts
@@ -2,12 +2,12 @@ import { UpploadEffect } from "../../effect";
 import {
  IHandlersParams,
  ITemplateParams,
- IUpploadFile
+ IUpploadFile,
 } from "../../helpers/interfaces";
 import {
  fitImageToContainer,
  safeListen,
- canvasToBlob
+ canvasToBlob,
 } from "../../helpers/elements";
 
 export default class Flip extends UpploadEffect {
@@ -41,7 +41,7 @@ export default class Flip extends UpploadEffect {
  flipH = false,
  flipV = false
  ): Promise<Blob | null> {
- return new Promise(resolve => {
+ return new Promise((resolve) => {
  params.uppload.emitter.emit("processing");
  const scaleH = flipH ? -1 : 1;
  const scaleV = flipV ? -1 : 1;
@@ -58,7 +58,7 @@ export default class Flip extends UpploadEffect {
  context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  context.scale(scaleH, scaleV);
  context.drawImage(image, posX, posY);
- canvasToBlob(this.canvas).then(blob => {
+ canvasToBlob(this.canvas).then((blob) => {
  const image = URL.createObjectURL(blob);
  this.originalfileURL = image;
  params.uppload.emitter.emit("process");
@@ -73,7 +73,7 @@ export default class Flip extends UpploadEffect {
  ".uppload-flip img"
  ) as HTMLImageElement | null;
  if (!img) return;
- this.imageToCanvasBlob(params, x, y).then(blob => {
+ this.imageToCanvasBlob(params, x, y).then((blob) => {
  if (!blob) return;
  let file = this.originalFile;
  file.blob = blob;

diff --git a/src/effects/rotate/index.ts b/src/effects/rotate/index.ts
@@ -3,12 +3,12 @@ import Cropper from "cropperjs";
 import {
  IHandlersParams,
  ITemplateParams,
- IUpploadFile
+ IUpploadFile,
 } from "../../helpers/interfaces";
 import {
  safeListen,
  fitImageToContainer,
- canvasToBlob
+ canvasToBlob,
 } from "../../helpers/elements";
 
 export default class Rotate extends UpploadEffect {
@@ -28,8 +28,9 @@ export default class Rotate extends UpploadEffect {
  </div>
  <div class="settings">
  <input type="range" value="${this.value}" min="0" max="${this.max}">
- <span class="value"><span>0</span>${translate(`units.${this.unit}`) ||
- this.unit}</span>
+ <span class="value"><span>0</span>${
+ translate(`units.${this.unit}`) || this.unit
+ }</span>
  </div>
  `;
  };
@@ -50,12 +51,12 @@ export default class Rotate extends UpploadEffect {
  toggleDragModeOnDblclick: false,
  ready() {
  params.uppload.emitter.emit("processing");
- canvasToBlob(rotator.getCroppedCanvas()).then(blob => {
+ canvasToBlob(rotator.getCroppedCanvas()).then((blob) => {
  originalFile.blob = blob;
  params.uppload.emitter.emit("process");
  params.next(originalFile);
  });
- }
+ },
  });
  const range = params.uppload.container.querySelector(
  ".settings input[type='range']"
@@ -74,7 +75,7 @@ export default class Rotate extends UpploadEffect {
  rotator.rotate(value - this.value);
  this.value = value;
  params.uppload.emitter.emit("processing");
- canvasToBlob(rotator.getCroppedCanvas()).then(blob => {
+ canvasToBlob(rotator.getCroppedCanvas()).then((blob) => {
  originalFile.blob = blob;
  params.uppload.emitter.emit("process");
  params.next(originalFile);

diff --git a/src/helpers/elements.ts b/src/helpers/elements.ts
@@ -41,7 +41,7 @@ export const safeListen = (
  fn: EventListenerOrEventListenerObject
 ) => {
  const hasListener = !!listening.find(
- a => a.element === element && a.type === type
+ (a) => a.element === element && a.type === type
  );
  if (hasListener) return;
  element.addEventListener(type, fn);
@@ -64,7 +64,7 @@ export const fitImageToContainer = (
  params: IHandlersParams,
  image: HTMLImageElement | HTMLVideoElement
 ): Promise<undefined> => {
- return new Promise(resolve => {
+ return new Promise((resolve) => {
  safeRequestAnimationFrame(() => {
  const parent = image.parentElement as HTMLDivElement | null;
  const currentDimensions = image.getBoundingClientRect();
@@ -107,13 +107,13 @@ export const compressImage = (
  file: Blob,
  settings: IUpploadSettings
 ): Promise<Blob> =>
- new Promise(resolve => {
+ new Promise((resolve) => {
  const imageURL = URL.createObjectURL(file);
  const canvas = document.createElement("canvas");
  const image = document.createElement("img");
  const maxSize = settings.maxSize || [
  settings.maxWidth || Infinity,
- settings.maxHeight || Infinity
+ settings.maxHeight || Infinity,
  ];
  image.src = imageURL;
  image.onload = () => {
@@ -149,10 +149,7 @@ export const compressImage = (
  */
 const dataURItoBlob = (dataURI: string) => {
  const byteString = atob(dataURI.split(",")[1]);
- const mimeString = dataURI
- .split(",")[0]
- .split(":")[1]
- .split(";")[0];
+ const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uArray = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i++)
@@ -199,7 +196,7 @@ export const canvasToBlob = (
  }
  if (typeof canvas.toBlob === "function") {
  canvas.toBlob(
- blob => {
+ (blob) => {
  if (blob) resolve(blob);
  reject(new Error("errors.image_error"));
  },

diff --git a/src/helpers/files.ts b/src/helpers/files.ts
@@ -10,7 +10,7 @@ const safeBlobToFile = (blob: Blob, fileName?: string, lastModified?: Date) => {
  try {
  return new File([blob], fileName || "file_name", {
  lastModified: (lastModified || new Date()).getTime(),
- type: blob.type
+ type: blob.type,
  });
  } catch (error) {
  return blob;
@@ -27,7 +27,7 @@ export const blobToUpploadFile = (
  name,
  blob,
  lastModified,
- type
+ type,
  };
  return result;
 };

diff --git a/src/helpers/filter.ts b/src/helpers/filter.ts
@@ -2,7 +2,7 @@ import { UpploadEffect } from "../effect";
 import {
  safeListen,
  fitImageToContainer,
- canvasToBlob
+ canvasToBlob,
 } from "../helpers/elements";
 import { IHandlersParams, ITemplateParams, IUpploadFile } from "./interfaces";
 
@@ -31,8 +31,9 @@ export default class UpploadFilterBaseClass extends UpploadEffect {
  </div>
  <div class="settings">
  <input type="range" value="${this.value}" min="0" max="${this.max}">
- <span class="value"><span>0</span>${translate(`units.${this.unit}`) ||
- this.unit}</span>
+ <span class="value"><span>0</span>${
+ translate(`units.${this.unit}`) || this.unit
+ }</span>
  </div>
  `;
  };
@@ -42,7 +43,7 @@ export default class UpploadFilterBaseClass extends UpploadEffect {
  filters: string
  ): Promise<Blob | null> {
  params.uppload.emitter.emit("processing");
- return new Promise(resolve => {
+ return new Promise((resolve) => {
  this.canvas = document.createElement("canvas");
  const image = document.createElement("img");
  image.src = this.originalfileURL;
@@ -54,7 +55,7 @@ export default class UpploadFilterBaseClass extends UpploadEffect {
  context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  context.filter = filters;
  context.drawImage(image, 0, 0);
- canvasToBlob(this.canvas).then(blob => {
+ canvasToBlob(this.canvas).then((blob) => {
  params.uppload.emitter.emit("process");
  return resolve(blob);
  });
@@ -93,7 +94,7 @@ export default class UpploadFilterBaseClass extends UpploadEffect {
  this.imageToCanvasBlob(
  params,
  `${this.cssFilter}(${range.value}${this.unit})`
- ).then(blob => {
+ ).then((blob) => {
  if (!blob) return;
  this.originalFile.blob = blob;
  params.next(this.originalFile);