From aa4abd69cef3f88b7f5f6b4e78f0f933b8fbd9cb Mon Sep 17 00:00:00 2001 From: Laurell Seville Date: Wed, 3 Mar 2021 14:47:11 -0500 Subject: [PATCH 1/5] feat, started working on loading screen --- packages/core/loader.svg | 98 +++++++++++++++++++++++++++ packages/core/src/elements/iframe.ts | 6 +- packages/core/src/helpers/elements.ts | 1 + packages/core/src/index.ts | 21 +++++- 4 files changed, 124 insertions(+), 2 deletions(-) create mode 100644 packages/core/loader.svg create mode 100644 packages/core/src/helpers/elements.ts diff --git a/packages/core/loader.svg b/packages/core/loader.svg new file mode 100644 index 0000000..6b23126 --- /dev/null +++ b/packages/core/loader.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/core/src/elements/iframe.ts b/packages/core/src/elements/iframe.ts index e8dab48..61b0b55 100644 --- a/packages/core/src/elements/iframe.ts +++ b/packages/core/src/elements/iframe.ts @@ -1,6 +1,8 @@ import { iframeStyles } from "../styles/styles"; -import { ORBA_ONE_MESSAGE_CHANNEL, ORBA_ONE_SUCCESS, ORBA_ONE_CANCEL } from "./constants"; +import { loadingDiv } from "../helpers/elements"; + +import {ORBA_ONE_MESSAGE_CHANNEL,ORBA_ONE_SUCCESS,ORBA_ONE_CANCEL} from "./constants"; type State = "loading" | "success" | "error" | "idle"; @@ -58,6 +60,8 @@ export function iframeManager( // prevent unnecessary margins to the scrollbar document.documentElement.style.overflowY = "visible"; document.body.removeChild(iframe); + document.body.removeChild(loadingDiv); + } function addIFrame() { diff --git a/packages/core/src/helpers/elements.ts b/packages/core/src/helpers/elements.ts new file mode 100644 index 0000000..a24d26b --- /dev/null +++ b/packages/core/src/helpers/elements.ts @@ -0,0 +1 @@ +export const loadingDiv = document.createElement('div'); diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 08ad5e2..cd95d58 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,6 +1,7 @@ import { createButton } from "./elements/button"; import { createIframe } from "./elements/iframe"; import { verificationUrl } from "./helpers/defaultConfig"; +import { loadingDiv } from "./helpers/elements"; import { OrbaOneConfig } from "./helpers/types"; import { getSessionUrl, isValidConfig } from "./helpers/utils"; @@ -10,7 +11,25 @@ function initializeVerification(config: OrbaOneConfig, button: ReturnType +

Loading...

+ Loader + + `; + + document.body.appendChild(loadingDiv); const url = getSessionUrl(verificationUrl, apiKey, applicantId, steps); const iframe = createIframe(url, applicantId, onSuccess, onCancelled, onError, (state) => { button.setState(state); From 6f22f5217e039a6392cf85d6b2272534145a3c1a Mon Sep 17 00:00:00 2001 From: Laurell Seville Date: Wed, 3 Mar 2021 15:10:34 -0500 Subject: [PATCH 2/5] fix, embed svg --- packages/core/loader.svg | 98 ------------------------------------ packages/core/src/index.ts | 100 ++++++++++++++++++++++++++++++++++++- 2 files changed, 98 insertions(+), 100 deletions(-) delete mode 100644 packages/core/loader.svg diff --git a/packages/core/loader.svg b/packages/core/loader.svg deleted file mode 100644 index 6b23126..0000000 --- a/packages/core/loader.svg +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index cd95d58..4c9915e 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -24,8 +24,104 @@ function initializeVerification(config: OrbaOneConfig, button: ReturnType -

Loading...

- Loader + + + + + + + + + + + + + + + + + + + + + + `; From 145cc7e7bf054834b793991694ffbd57fdff391f Mon Sep 17 00:00:00 2001 From: Laurell Seville Date: Wed, 3 Mar 2021 15:44:18 -0500 Subject: [PATCH 3/5] fix, remove embedded svg --- packages/core/src/index.ts | 101 +------------------------------------ 1 file changed, 2 insertions(+), 99 deletions(-) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 4c9915e..fe82aa9 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -3,7 +3,7 @@ import { createIframe } from "./elements/iframe"; import { verificationUrl } from "./helpers/defaultConfig"; import { loadingDiv } from "./helpers/elements"; import { OrbaOneConfig } from "./helpers/types"; - +import { loader } from "./styles/templates"; import { getSessionUrl, isValidConfig } from "./helpers/utils"; function initializeVerification(config: OrbaOneConfig, button: ReturnType): void { @@ -24,104 +24,7 @@ function initializeVerification(config: OrbaOneConfig, button: ReturnType - - - - - - - - - - - - - - - - - - - - - - + ${loader} `; From 03d9ca118600316bef0f0b418dff708b57561afe Mon Sep 17 00:00:00 2001 From: Laurell Seville Date: Wed, 3 Mar 2021 16:35:33 -0500 Subject: [PATCH 4/5] fix, refactor index file --- packages/core/src/index.ts | 19 ++----------------- packages/core/src/styles/templates.ts | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index fe82aa9..d7c8082 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -3,7 +3,7 @@ import { createIframe } from "./elements/iframe"; import { verificationUrl } from "./helpers/defaultConfig"; import { loadingDiv } from "./helpers/elements"; import { OrbaOneConfig } from "./helpers/types"; -import { loader } from "./styles/templates"; +import { iframeLoader } from "./styles/templates"; import { getSessionUrl, isValidConfig } from "./helpers/utils"; function initializeVerification(config: OrbaOneConfig, button: ReturnType): void { @@ -11,22 +11,7 @@ function initializeVerification(config: OrbaOneConfig, button: ReturnType - ${loader} - - `; + loadingDiv.innerHTML = iframeLoader; document.body.appendChild(loadingDiv); const url = getSessionUrl(verificationUrl, apiKey, applicantId, steps); diff --git a/packages/core/src/styles/templates.ts b/packages/core/src/styles/templates.ts index 52c5fc5..b300822 100644 --- a/packages/core/src/styles/templates.ts +++ b/packages/core/src/styles/templates.ts @@ -119,3 +119,20 @@ export const loader = ` `; + +export const iframeLoader = ` +
+${loader} +
+`; From c8bb2d7742db642aa3f96b79e01530deeada16cd Mon Sep 17 00:00:00 2001 From: Laurell Seville Date: Wed, 3 Mar 2021 16:53:28 -0500 Subject: [PATCH 5/5] fix, refactor loading screen toggle --- packages/core/src/elements/iframe.ts | 4 ++-- packages/core/src/helpers/utils.ts | 10 ++++++++++ packages/core/src/index.ts | 8 +++----- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/core/src/elements/iframe.ts b/packages/core/src/elements/iframe.ts index 61b0b55..db1536b 100644 --- a/packages/core/src/elements/iframe.ts +++ b/packages/core/src/elements/iframe.ts @@ -1,6 +1,6 @@ import { iframeStyles } from "../styles/styles"; -import { loadingDiv } from "../helpers/elements"; +import { removeLoadingScreen } from "../helpers/utils"; import {ORBA_ONE_MESSAGE_CHANNEL,ORBA_ONE_SUCCESS,ORBA_ONE_CANCEL} from "./constants"; @@ -59,8 +59,8 @@ export function iframeManager( // The html tag has to have a overflowY value of visible instead of auto to // prevent unnecessary margins to the scrollbar document.documentElement.style.overflowY = "visible"; + removeLoadingScreen(); document.body.removeChild(iframe); - document.body.removeChild(loadingDiv); } diff --git a/packages/core/src/helpers/utils.ts b/packages/core/src/helpers/utils.ts index 0ad7147..764d140 100644 --- a/packages/core/src/helpers/utils.ts +++ b/packages/core/src/helpers/utils.ts @@ -1,4 +1,6 @@ import { OrbaOneConfig } from "./types"; +import { iframeLoader } from "../styles/templates"; +import { loadingDiv } from "../helpers/elements"; export function isDomElement(obj: any): obj is HTMLElement | Element { //! check if obj is not null explicitly because null is a type of object @@ -57,3 +59,11 @@ export function getSessionUrl(verificationUrl: string, apiKey: string, applicant return `${verificationUrl}?publicKey=${apiKey}&applicantId=${applicantId}&steps=${steps.join("&steps=")}`; } +export function showLoadingScreen() { + loadingDiv.innerHTML = iframeLoader; + document.body.appendChild(loadingDiv); +} + +export function removeLoadingScreen() { + document.body.removeChild(loadingDiv); +} diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index d7c8082..a6444bd 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,19 +1,17 @@ import { createButton } from "./elements/button"; import { createIframe } from "./elements/iframe"; import { verificationUrl } from "./helpers/defaultConfig"; -import { loadingDiv } from "./helpers/elements"; import { OrbaOneConfig } from "./helpers/types"; -import { iframeLoader } from "./styles/templates"; import { getSessionUrl, isValidConfig } from "./helpers/utils"; +import { showLoadingScreen } from "./helpers/utils"; function initializeVerification(config: OrbaOneConfig, button: ReturnType): void { const { apiKey, applicantId, onSuccess, onCancelled, onError, steps } = config; //Set Loading state button.setState("loading"); - loadingDiv.innerHTML = iframeLoader; - - document.body.appendChild(loadingDiv); + showLoadingScreen(); + const url = getSessionUrl(verificationUrl, apiKey, applicantId, steps); const iframe = createIframe(url, applicantId, onSuccess, onCancelled, onError, (state) => { button.setState(state);