From 8cf2f0d87950facb7c2dc070af9f27f46c25ec37 Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 12 Aug 2021 14:02:39 +0200
Subject: [PATCH 01/10] Solve #180: Multiple Uppload instances have problems.

---
 src/helpers/elements.ts | 17 +++++++++++++++++
 src/uppload.ts          | 21 +++++++++++++--------
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/helpers/elements.ts b/src/helpers/elements.ts
index 291c0dba..b5ae9236 100644
--- a/src/helpers/elements.ts
+++ b/src/helpers/elements.ts
@@ -48,6 +48,23 @@ export const safeListen = (
   listening.push({ element, type });
 };
 
+/**
+ * Safely remove an event listener
+ * @param element - HTML element to remove event listener to
+ * @param type - Type of event listener to remove
+ * @param fn - Callback function to associated listener
+ */
+export const safeUnlisten = (
+  element: Element,
+  type: string,
+  fn: EventListenerOrEventListenerObject
+) => {
+  const listener = listening.findIndex((a) => a.element === element && a.type === type);
+  if (listener < 0) return;
+  element.removeEventListener(type, fn);
+  listening.splice(listener, 1);
+};
+
 const safeRequestAnimationFrame = (callback: FrameRequestCallback) => {
   if (window.requestAnimationFrame)
     return window.requestAnimationFrame(callback);
diff --git a/src/uppload.ts b/src/uppload.ts
index 7bc01709..7c8e9a82 100644
--- a/src/uppload.ts
+++ b/src/uppload.ts
@@ -1,7 +1,7 @@
 import { UpploadService } from "./service";
 import { UpploadEffect } from "./effect";
 import { setI18N, translate } from "./helpers/i18n";
-import { getElements, safeListen, compressImage } from "./helpers/elements";
+import { getElements, safeListen, safeUnlisten, compressImage } from "./helpers/elements";
 import { colorSVG } from "./helpers/assets";
 import createFocusTrap, { FocusTrap, Options } from "focus-trap";
 import mitt from "mitt";
@@ -37,6 +37,7 @@ class UploadingService extends UpploadService {
  * Uppload image uploading widget
  */
 export class Uppload implements IUppload {
+  id: string = `${+new Date()}`;
   services: UpploadService[] = [new DefaultService(), new UploadingService()];
   effects: UpploadEffect[] = [];
   isOpen = false;
@@ -62,6 +63,7 @@ export class Uppload implements IUppload {
     this.settings = {};
     this.updateSettings(settings || {});
     this.container = document.createElement("div");
+    this.container.setAttribute("id", `uppload-${this.id}`);
     this.renderContainer();
     this.container.classList.add("uppload-container");
     const body = document.body;
@@ -98,6 +100,7 @@ export class Uppload implements IUppload {
   updateSettings(settings: IUpploadSettings) {
     this.settings = { ...this.settings, ...settings };
     this.emitter.emit("settingsUpdated", settings);
+    if (settings.id) this.id = settings.id;
     if (settings.lang) setI18N(settings.lang);
     if (settings.defaultService) this.activeService = settings.defaultService;
     if (settings.lang) this.lang = settings.lang;
@@ -231,9 +234,11 @@ export class Uppload implements IUppload {
     let firstService = this.settings.defaultService;
     if (this.services.length === 3) this.navigate(this.services[2].name);
     if (firstService) this.navigate(firstService);
-    safeListen(document.body, "keyup", (e) => {
-      if ((e as KeyboardEvent).key === "Escape" && this.open) this.close();
-    });
+    const escape = (e) => {
+      if ((e as KeyboardEvent).key === "Escape" && this.isOpen) this.close();
+    };
+    safeUnlisten(document.body, "keyup", escape);
+    safeListen(document.body, "keyup", escape);
     setTimeout(() => {
       this.container.style.opacity = "1";
     }, 1);
@@ -341,12 +346,12 @@ export class Uppload implements IUppload {
             }" class="uppload-service-name">
           ${
             sidebar
-              ? `<input type="radio" id="uppload-service-radio-${service.name}" value="${service.name}" name="uppload-radio">`
+              ? `<input type="radio" id="uppload-service-radio-${service.name}-${this.id}" value="${service.name}" name="uppload-radio">`
               : ""
           }
           <${
             sidebar
-              ? `label for="uppload-service-radio-${service.name}"`
+              ? `label for="uppload-service-radio-${service.name}-${this.id}"`
               : "button"
           } data-uppload-service="${service.name}">
             ${
@@ -378,10 +383,10 @@ export class Uppload implements IUppload {
       ${this.effects
         .map(
           (effect) => `
-      <input type="radio" id="uppload-effect-radio-${effect.name}" value="${
+      <input type="radio" id="uppload-effect-radio-${effect.name}-${this.id}" value="${
             effect.name
           }" name="uppload-effect-radio">
-        <label for="uppload-effect-radio-${effect.name}">
+        <label for="uppload-effect-radio-${effect.name}-${this.id}">
           ${
             effect.icon.indexOf("http") === 0
               ? `<img class="effect-icon" alt="" src="${effect.icon}">`

From 7aa46cfa6a8831f14b673ce0b9003369c06a606c Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 12 Aug 2021 14:19:55 +0200
Subject: [PATCH 02/10] Solve #249: Cannot click on other upload options after
 one is selected.

---
 src/uppload.ts | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/uppload.ts b/src/uppload.ts
index 7c8e9a82..a61a956a 100644
--- a/src/uppload.ts
+++ b/src/uppload.ts
@@ -224,16 +224,19 @@ export class Uppload implements IUppload {
     this.file = { blob: new Blob() };
     this.activeService = "default";
     this.activeEffect = "";
-    const serviceRadio = this.container.querySelector(
-      `input[type=radio][value='${this.activeService}']`
-    );
-    if (serviceRadio) serviceRadio.setAttribute("checked", "checked");
     this.container.style.transition = `${this.transitionDuration}ms`;
     this.container.style.opacity = "0";
     this.update();
     let firstService = this.settings.defaultService;
     if (this.services.length === 3) this.navigate(this.services[2].name);
     if (firstService) this.navigate(firstService);
+    const serviceRadio = this.container.querySelector(
+      `input[type=radio][value='${this.activeService}']`
+    );
+    if (serviceRadio) {
+      serviceRadio.setAttribute("checked", "checked");
+      serviceRadio.checked = true;
+    }
     const escape = (e) => {
       if ((e as KeyboardEvent).key === "Escape" && this.isOpen) this.close();
     };
@@ -346,7 +349,7 @@ export class Uppload implements IUppload {
             }" class="uppload-service-name">
           ${
             sidebar
-              ? `<input type="radio" id="uppload-service-radio-${service.name}-${this.id}" value="${service.name}" name="uppload-radio">`
+              ? `<input type="radio" id="uppload-service-radio-${service.name}-${this.id}" value="${service.name}" name="uppload-radio" ${service.name === this.activeService ? `checked="checked"` : ""}>`
               : ""
           }
           <${
@@ -718,6 +721,13 @@ export class Uppload implements IUppload {
     defaultServiceLinks.forEach((link) => {
       const linkFunction = (e: Event) => {
         const service = link.getAttribute("data-uppload-service");
+        const serviceRadio = this.container.querySelector(
+          `input[type=radio][value='${service}']`
+        );
+        if (serviceRadio) {
+          serviceRadio.setAttribute("checked", "checked");
+          serviceRadio.checked = true;
+        }
         if (service) {
           this.navigate(service);
           const serviceDiv = this.container.querySelector(
@@ -737,10 +747,6 @@ export class Uppload implements IUppload {
             } catch (error) {}
           }
         }
-        const serviceRadio = this.container.querySelector(
-          `input[type=radio][value='${service}']`
-        );
-        if (serviceRadio) serviceRadio.setAttribute("checked", "checked");
         e.preventDefault();
         return false;
       };

From ca87b1f78654a0ff1ead7bea12503ee7124ccff4 Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 12 Aug 2021 14:36:58 +0200
Subject: [PATCH 03/10] Solve #288: Add a settings option to choose where to
 render the Uppload modal.

---
 src/uppload.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/uppload.ts b/src/uppload.ts
index a61a956a..a3522a88 100644
--- a/src/uppload.ts
+++ b/src/uppload.ts
@@ -38,6 +38,7 @@ class UploadingService extends UpploadService {
  */
 export class Uppload implements IUppload {
   id: string = `${+new Date()}`;
+  wrapper?: string;
   services: UpploadService[] = [new DefaultService(), new UploadingService()];
   effects: UpploadEffect[] = [];
   isOpen = false;
@@ -66,9 +67,9 @@ export class Uppload implements IUppload {
     this.container.setAttribute("id", `uppload-${this.id}`);
     this.renderContainer();
     this.container.classList.add("uppload-container");
-    const body = document.body;
-    if (body) {
-      body.appendChild(this.container);
+    const wrapper = this.wrapper ? document.querySelector(this.wrapper) : document.body;
+    if (wrapper) {
+      wrapper.appendChild(this.container);
     }
     this.focusTrap = createFocusTrap(this.container, {
       initialFocus: () => this.container.querySelector("button"),
@@ -101,6 +102,7 @@ export class Uppload implements IUppload {
     this.settings = { ...this.settings, ...settings };
     this.emitter.emit("settingsUpdated", settings);
     if (settings.id) this.id = settings.id;
+    if (settings.wrapper) this.wrapper = settings.wrapper;
     if (settings.lang) setI18N(settings.lang);
     if (settings.defaultService) this.activeService = settings.defaultService;
     if (settings.lang) this.lang = settings.lang;

From 0888595af8f5d37fbde4bce6fa785f235787f388 Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 12 Aug 2021 14:44:27 +0200
Subject: [PATCH 04/10] Fix interfaces related to solved issues.

---
 src/helpers/interfaces.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/helpers/interfaces.ts b/src/helpers/interfaces.ts
index d713989d..3a9ec70d 100644
--- a/src/helpers/interfaces.ts
+++ b/src/helpers/interfaces.ts
@@ -4,6 +4,8 @@ export type IElements = string | string[] | Element | Element[];
 
 export type ITranslator = (key: string, params?: string | string[]) => string;
 export interface IUppload {
+  id: string;
+  wrapper?: string;
   services: UpploadService[];
   effects: UpploadEffect[];
   isOpen: boolean;
@@ -15,6 +17,8 @@ export interface IUppload {
 }
 
 export interface IUpploadSettings {
+  id?: string;
+  wrapper?: string;
   value?: string;
   bind?: IElements;
   call?: IElements;

From e134d34e864df1257563890dea6a1ee194924a8e Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 12 Aug 2021 15:00:26 +0200
Subject: [PATCH 05/10] Solve #708: Customize "need help" button and URL.
 (partially)

---
 src/helpers/interfaces.ts | 1 +
 src/helpers/microlink.ts  | 6 +++---
 src/helpers/search.ts     | 6 +++---
 src/services/camera.ts    | 6 +++---
 src/services/local.ts     | 4 ++--
 5 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/helpers/interfaces.ts b/src/helpers/interfaces.ts
index 3a9ec70d..150f411a 100644
--- a/src/helpers/interfaces.ts
+++ b/src/helpers/interfaces.ts
@@ -37,6 +37,7 @@ export interface IUpploadSettings {
   compressor?: (file: Blob) => Promise<Blob>;
   transitionDuration?: number;
   disableModalClickClose?: boolean;
+  disableHelp?: boolean;
 }
 
 export interface IHandlersParams {
diff --git a/src/helpers/microlink.ts b/src/helpers/microlink.ts
index aa863429..52902a97 100644
--- a/src/helpers/microlink.ts
+++ b/src/helpers/microlink.ts
@@ -19,7 +19,7 @@ export class MicrolinkBaseClass extends UpploadService {
   exampleURL = "";
   validator: (value: string) => boolean = () => true;
 
-  template = ({ translate }: IServiceTemplateParams): string => {
+  template = ({ translate, uppload }: IServiceTemplateParams): string => {
     return `
       <div class="microlink-container">
       <form class="microlink-search-form">
@@ -49,9 +49,9 @@ export class MicrolinkBaseClass extends UpploadService {
         "services.microlink.button",
         translate(`services.${this.name}.title`) || this.name
       )
-    }</button></form><button class="need-help-link"><span>${translate(
+    }</button></form>${!uppload.settings.disableHelp ? `<button class="need-help-link"><span>${translate(
       "needHelp"
-    )}</span aria-hidden="true"><span>?</span></button></div>
+    )}</span aria-hidden="true"><span>?</span></button>` : ""}</div>
     <div class="uppload-loader microlink-loader">
     <div></div>
     <p>${
diff --git a/src/helpers/search.ts b/src/helpers/search.ts
index 1965c7e9..6da63ccb 100644
--- a/src/helpers/search.ts
+++ b/src/helpers/search.ts
@@ -108,7 +108,7 @@ export class SearchBaseClass<ImageResult = any> extends UpploadService {
     if (loader) loader.style.display = this.loading ? "flex" : "none";
   }
 
-  template = ({ translate }: IServiceTemplateParams): string => {
+  template = ({ translate, uppload }: IServiceTemplateParams): string => {
     return `
       <div class="search-container"><form class="search-search-form">
       <div class="service-icon">${colorSVG(this.icon, this)}</div>
@@ -131,9 +131,9 @@ export class SearchBaseClass<ImageResult = any> extends UpploadService {
           `services.${this.name}.title`
         )}</a>`
       )}</p></div>
-      <button class="need-help-link"><span>${translate(
+      ${!uppload.settings.disableHelp ? `<button class="need-help-link"><span>${translate(
         "needHelp"
-      )}</span aria-hidden="true"><span>?</span></button>
+      )}</span aria-hidden="true"><span>?</span></button>` : ""}
       <div class="uppload-loader search-loader">
         <div></div>
         <p>${translate(
diff --git a/src/services/camera.ts b/src/services/camera.ts
index 81484b44..cf532ae5 100644
--- a/src/services/camera.ts
+++ b/src/services/camera.ts
@@ -24,7 +24,7 @@ export default class Camera extends UpploadService {
       !/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
     );
 
-  template = ({ translate }: IServiceTemplateParams) => {
+  template = ({ translate, uppload }: IServiceTemplateParams) => {
     return `
       <div class="service-main">
         <div class="camera-waiting">${translate(
@@ -49,9 +49,9 @@ export default class Camera extends UpploadService {
           style="background: ${this.color}"
         >${translate("services.camera.button")}</button>
       </footer>
-      <button class="need-help-link"><span>${translate(
+      ${!uppload.settings.disableHelp ? `<button class="need-help-link"><span>${translate(
         "needHelp"
-      )}</span aria-hidden="true"><span>?</span></button>
+      )}</span aria-hidden="true"><span>?</span></button>` : ""}
     `;
   };
 
diff --git a/src/services/local.ts b/src/services/local.ts
index 9027e34a..7ebdfb36 100644
--- a/src/services/local.ts
+++ b/src/services/local.ts
@@ -30,9 +30,9 @@ export default class Local extends UpploadService {
       <div class="alternate-input">
         <input type="file" accept="${this.mimeTypes.join()}"${
       params.uppload.settings.multiple ? " multiple" : ""
-    }></div><button class="need-help-link"><span>${translate(
+    }></div>${!params.uppload.settings.disableHelp ? `<button class="need-help-link"><span>${translate(
       "needHelp"
-    )}</span aria-hidden="true"><span>?</span></button>`;
+    )}</span aria-hidden="true"><span>?</span></button>` : ""}`;
   };
 
   handlers = (params: IHandlersParams) => {

From ea03d5f9224b3a59a5220633378596e60464f8d4 Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 12 Aug 2021 15:07:58 +0200
Subject: [PATCH 06/10] Better service navigation logic on open.

---
 src/uppload.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/uppload.ts b/src/uppload.ts
index a3522a88..b4970cc5 100644
--- a/src/uppload.ts
+++ b/src/uppload.ts
@@ -229,9 +229,9 @@ export class Uppload implements IUppload {
     this.container.style.transition = `${this.transitionDuration}ms`;
     this.container.style.opacity = "0";
     this.update();
-    let firstService = this.settings.defaultService;
-    if (this.services.length === 3) this.navigate(this.services[2].name);
+    const firstService = this.settings.defaultService;
     if (firstService) this.navigate(firstService);
+    else if (this.services.length === 3) this.navigate(this.services[2].name);
     const serviceRadio = this.container.querySelector(
       `input[type=radio][value='${this.activeService}']`
     );

From 32151a249d433db348e7d4c1a144015a90cad1ca Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 12 Aug 2021 15:10:01 +0200
Subject: [PATCH 07/10] Better usability: if click on cancel button return to
 choosen active service.

---
 src/uppload.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/uppload.ts b/src/uppload.ts
index b4970cc5..ef615447 100644
--- a/src/uppload.ts
+++ b/src/uppload.ts
@@ -822,7 +822,6 @@ export class Uppload implements IUppload {
     if (cancelButton)
       safeListen(cancelButton, "click", () => {
         this.file = { blob: new Blob() };
-        this.activeService = "default";
         this.activeEffect = "";
         this.update();
       });

From d666b8cac7b0647ae34132b7a8dc7e0f378cf3b5 Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 12 Aug 2021 15:18:57 +0200
Subject: [PATCH 08/10] Solve #609: Effects Rotate & Flip using the same
 code.(Docs)

---
 content/effects/flip.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/effects/flip.md b/content/effects/flip.md
index f572aeec..b6b45e40 100644
--- a/content/effects/flip.md
+++ b/content/effects/flip.md
@@ -3,10 +3,10 @@
 The Flip effect lets users flip their images before uploading them. Users can choose to flip vertically or horizontally.
 
 ```ts
-import { Uppload, Rotate } from "uppload";
+import { Uppload, Flip } from "uppload";
 
 const profilePicture = new Uppload();
-profilePicture.use(new Rotate());
+profilePicture.use(new Flip());
 ```
 
 ![Screenshot of the Flip effect](/assets/screenshots/flip.png)

From 9c5d9517910b5580092f3ced4d6decd5446dd917 Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 12 Aug 2021 16:13:39 +0200
Subject: [PATCH 09/10] Cast input elements and set type for keyboard event.

---
 src/uppload.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/uppload.ts b/src/uppload.ts
index ef615447..b623df9f 100644
--- a/src/uppload.ts
+++ b/src/uppload.ts
@@ -234,13 +234,13 @@ export class Uppload implements IUppload {
     else if (this.services.length === 3) this.navigate(this.services[2].name);
     const serviceRadio = this.container.querySelector(
       `input[type=radio][value='${this.activeService}']`
-    );
+    ) as HTMLInputElement;
     if (serviceRadio) {
       serviceRadio.setAttribute("checked", "checked");
       serviceRadio.checked = true;
     }
-    const escape = (e) => {
-      if ((e as KeyboardEvent).key === "Escape" && this.isOpen) this.close();
+    const escape = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && this.isOpen) this.close();
     };
     safeUnlisten(document.body, "keyup", escape);
     safeListen(document.body, "keyup", escape);
@@ -631,8 +631,11 @@ export class Uppload implements IUppload {
     // Set active state to current effect
     const activeRadio = this.container.querySelector(
       `input[name='uppload-effect-radio'][value='${this.activeEffect}']`
-    );
-    if (activeRadio) activeRadio.setAttribute("checked", "checked");
+    ) as HTMLInputElement;
+    if (activeRadio) {
+      activeRadio.setAttribute("checked", "checked");
+      activeRadio.checked = true;
+    }
   }
 
   compress(file: Blob) {
@@ -725,7 +728,7 @@ export class Uppload implements IUppload {
         const service = link.getAttribute("data-uppload-service");
         const serviceRadio = this.container.querySelector(
           `input[type=radio][value='${service}']`
-        );
+        ) as HTMLInputElement;
         if (serviceRadio) {
           serviceRadio.setAttribute("checked", "checked");
           serviceRadio.checked = true;

From 47e9dc4e049811c4c0b32ea73088abe08d06ffaa Mon Sep 17 00:00:00 2001
From: Egon Zemmer <egon.zemmer@phlegx.com>
Date: Thu, 26 Aug 2021 16:03:50 +0200
Subject: [PATCH 10/10] Remove help HTML tags if help is disabled in settings.

---
 src/uppload.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/uppload.ts b/src/uppload.ts
index b623df9f..df83eb42 100644
--- a/src/uppload.ts
+++ b/src/uppload.ts
@@ -429,6 +429,7 @@ export class Uppload implements IUppload {
           <div class="uppload-active-container"></div>
           <footer style="display: none" class="effects-nav">${this.getEffectsNavbar()}</footer>
         </section>
+        ${!this.settings.disableHelp ? `
         <div class="uppload-help-loading">
           <div class="uppload-loader">
             <div></div>
@@ -440,7 +441,7 @@ export class Uppload implements IUppload {
             "help.close"
           )}</span><span aria-hidden="true">&times;</span></button></div>
           <iframe></iframe>
-        </div>
+        </div>` : ""}
       </div>
       <div class="uppload-modal-bg">
         <button class="uppload-close" aria-label="${translate(