From 7f2ec232277fdf99f350d448e81e864469f3793c Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Fri, 19 Jan 2024 12:06:49 +0000 Subject: [PATCH 1/3] Add Selfie instruction screend --- .../selfie-capture/SelfieInstruction.js | 687 ++++++++++++++++++ .../SelfieInstruction.stories.js | 17 + 2 files changed, 704 insertions(+) create mode 100644 packages/components/selfie-capture/SelfieInstruction.js create mode 100644 packages/components/selfie-capture/SelfieInstruction.stories.js diff --git a/packages/components/selfie-capture/SelfieInstruction.js b/packages/components/selfie-capture/SelfieInstruction.js new file mode 100644 index 00000000..b509df9d --- /dev/null +++ b/packages/components/selfie-capture/SelfieInstruction.js @@ -0,0 +1,687 @@ +"use strict"; + +function templateString() { + return ` + + + +
+ ${this.showNavigation ? ` +
+
+ +
Back
+
+ +
+ ` : ''} +
+ + + + + + + + + + + + + + + +

Next, we'll take a quick selfie

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+

Good Light

+

+ Make sure you are in a well-lit environment where your face is + clear and visible +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+

Clear Image

+

+ Hold your phone steady so the selfie is clear and sharp. Don't + take blurry images. +

+
+
+
+ + + + + + +
+

Remove Obstructions

+

+ Remove anything that covers your face, such glasses, masks, hats + and scarves +

+
+
+
+ ${this.hideAttribution ? '' : ` + + `} +
+ `; +} + +class SelfieInstruction extends HTMLElement { + constructor() { + super(); + this.templateString = templateString.bind(this); + this.render = () => { + return this.templateString(); + }; + + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.pages = []; + const template = document.createElement("template"); + template.innerHTML = this.render(); + + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + this.backButton = this.shadowRoot.querySelector("#back-button"); + const CloseIframeButtons = + this.shadowRoot.querySelectorAll(".close-iframe"); + + this.backButton && this.backButton.addEventListener("click", (e) => { + this.handleBackEvents(e); + }); + + CloseIframeButtons.forEach((button) => { + button.addEventListener( + "click", + () => { + this.closeWindow(); + }, + false, + ); + }); + } + + get hideBack() { + return this.hasAttribute("hide-back-to-host"); + } + + get themeColor() { + return this.getAttribute("theme-color") || "#043C93"; + } + + get hideAttribution() { + return this.hasAttribute('hide-attribution'); + } + + handleBackEvents() { + this.dispatchEvent(new CustomEvent("SmileIdentity::Exit")); + } + + closeWindow() { + const referenceWindow = window.parent; + referenceWindow.postMessage("SmileIdentity::Close", "*"); + } +} + +if ("customElements" in window) { + window.customElements.define('selfie-instruction', SelfieInstruction); +} + +export { + SelfieInstruction +}; diff --git a/packages/components/selfie-capture/SelfieInstruction.stories.js b/packages/components/selfie-capture/SelfieInstruction.stories.js new file mode 100644 index 00000000..c19cdc09 --- /dev/null +++ b/packages/components/selfie-capture/SelfieInstruction.stories.js @@ -0,0 +1,17 @@ +import "./SelfieInstruction"; + +const meta = { + component: "selfie-instruction", +}; + +export default meta; + +export const SelfieInstruction = { + render: () => ` + + + `, +} \ No newline at end of file From 5c229408972a93d4768146aece0631b843b12f78 Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Mon, 22 Jan 2024 14:45:34 +0000 Subject: [PATCH 2/3] handle allow camera --- .../components/selfie-capture/SelfieInstruction.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/components/selfie-capture/SelfieInstruction.js b/packages/components/selfie-capture/SelfieInstruction.js index b509df9d..66be2247 100644 --- a/packages/components/selfie-capture/SelfieInstruction.js +++ b/packages/components/selfie-capture/SelfieInstruction.js @@ -611,6 +611,14 @@ function templateString() {

+
+ + +
${this.hideAttribution ? '' : ` @@ -637,6 +645,7 @@ class SelfieInstruction extends HTMLElement { this.shadowRoot.appendChild(template.content.cloneNode(true)); + this.allowButton = this.shadowRoot.querySelector("#allow"); this.backButton = this.shadowRoot.querySelector("#back-button"); const CloseIframeButtons = this.shadowRoot.querySelectorAll(".close-iframe"); @@ -645,6 +654,11 @@ class SelfieInstruction extends HTMLElement { this.handleBackEvents(e); }); + this.allowButton && this.allowButton.addEventListener("click", () => { + this.dispatchEvent(new CustomEvent("SelfieInstruction::StartCamera")); + }); + + CloseIframeButtons.forEach((button) => { button.addEventListener( "click", From b400987c9eb45c101d1a9a46b099b9c16a21bc3c Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Wed, 24 Jan 2024 13:24:40 +0000 Subject: [PATCH 3/3] Lint: fix lint errors --- .../selfie-capture/SelfieInstruction.js | 775 +++++++++--------- .../SelfieInstruction.stories.js | 8 +- 2 files changed, 389 insertions(+), 394 deletions(-) diff --git a/packages/components/selfie-capture/SelfieInstruction.js b/packages/components/selfie-capture/SelfieInstruction.js index 66be2247..6a45fef1 100644 --- a/packages/components/selfie-capture/SelfieInstruction.js +++ b/packages/components/selfie-capture/SelfieInstruction.js @@ -1,14 +1,12 @@ -"use strict"; - function templateString() { - return ` - + return ` + - -
- ${this.showNavigation ? ` -
-
- -
Back
-
- -
- ` : ''} -
- - - - - - - - - - - - - - - -

Next, we'll take a quick selfie

-
-
-
- - - - - - - - - - - - - - - - - - - - - - -
-

Good Light

-

- Make sure you are in a well-lit environment where your face is - clear and visible -

-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - -
-

Clear Image

-

- Hold your phone steady so the selfie is clear and sharp. Don't - take blurry images. -

-
-
-
- - - - - - -
-

Remove Obstructions

-

- Remove anything that covers your face, such glasses, masks, hats - and scarves -

-
-
-
- - -
-
- ${this.hideAttribution ? '' : ` - - `} + +
+ ${this.showNavigation ? ` +
+
+ +
Back
+
+ +
+ ` : ''} +
+ + + + + + + + + + + + + + + +

Next, we'll take a quick selfie

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+

Good Light

+

+ Make sure you are in a well-lit environment where your face is + clear and visible +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+

Clear Image

+

+ Hold your phone steady so the selfie is clear and sharp. Don't + take blurry images. +

+
+
+
+ + + + + + +
+

Remove Obstructions

+

+ Remove anything that covers your face, such glasses, masks, hats + and scarves +

+
+
+
+ + +
+
+ ${this.hideAttribution ? '' : ` + + `}
`; } class SelfieInstruction extends HTMLElement { - constructor() { - super(); - this.templateString = templateString.bind(this); - this.render = () => { - return this.templateString(); - }; - - this.attachShadow({ mode: "open" }); - } - - connectedCallback() { - this.pages = []; - const template = document.createElement("template"); - template.innerHTML = this.render(); - - this.shadowRoot.appendChild(template.content.cloneNode(true)); - - this.allowButton = this.shadowRoot.querySelector("#allow"); - this.backButton = this.shadowRoot.querySelector("#back-button"); - const CloseIframeButtons = - this.shadowRoot.querySelectorAll(".close-iframe"); - - this.backButton && this.backButton.addEventListener("click", (e) => { - this.handleBackEvents(e); - }); - - this.allowButton && this.allowButton.addEventListener("click", () => { - this.dispatchEvent(new CustomEvent("SelfieInstruction::StartCamera")); - }); - - - CloseIframeButtons.forEach((button) => { - button.addEventListener( - "click", - () => { - this.closeWindow(); - }, - false, - ); - }); - } - - get hideBack() { - return this.hasAttribute("hide-back-to-host"); - } - - get themeColor() { - return this.getAttribute("theme-color") || "#043C93"; - } - - get hideAttribution() { - return this.hasAttribute('hide-attribution'); - } - - handleBackEvents() { - this.dispatchEvent(new CustomEvent("SmileIdentity::Exit")); - } - - closeWindow() { - const referenceWindow = window.parent; - referenceWindow.postMessage("SmileIdentity::Close", "*"); - } + constructor() { + super(); + this.templateString = templateString.bind(this); + this.render = () => this.templateString(); + + this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + this.pages = []; + const template = document.createElement('template'); + template.innerHTML = this.render(); + + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + this.allowButton = this.shadowRoot.querySelector('#allow'); + this.backButton = this.shadowRoot.querySelector('#back-button'); + const CloseIframeButtons = this.shadowRoot.querySelectorAll('.close-iframe'); + + if (this.backButton) { + this.backButton.addEventListener('click', (e) => { + this.handleBackEvents(e); + }); + } + if (this.allowButton) { + this.allowButton.addEventListener('click', () => { + this.dispatchEvent(new CustomEvent('SelfieInstruction::StartCamera')); + }); + } + + CloseIframeButtons.forEach((button) => { + button.addEventListener( + 'click', + () => { + this.closeWindow(); + }, + false, + ); + }); + } + + get hideBack() { + return this.hasAttribute('hide-back-to-host'); + } + + get themeColor() { + return this.getAttribute('theme-color') || '#043C93'; + } + + get hideAttribution() { + return this.hasAttribute('hide-attribution'); + } + + handleBackEvents() { + this.dispatchEvent(new CustomEvent('SmileIdentity::Exit')); + } + + closeWindow() { + const referenceWindow = window.parent; + referenceWindow.postMessage('SmileIdentity::Close', '*'); + } } -if ("customElements" in window) { - window.customElements.define('selfie-instruction', SelfieInstruction); +if ('customElements' in window) { + window.customElements.define('selfie-instruction', SelfieInstruction); } -export { - SelfieInstruction -}; +export default SelfieInstruction; diff --git a/packages/components/selfie-capture/SelfieInstruction.stories.js b/packages/components/selfie-capture/SelfieInstruction.stories.js index c19cdc09..c77e391d 100644 --- a/packages/components/selfie-capture/SelfieInstruction.stories.js +++ b/packages/components/selfie-capture/SelfieInstruction.stories.js @@ -1,17 +1,17 @@ -import "./SelfieInstruction"; +import './SelfieInstruction'; const meta = { - component: "selfie-instruction", + component: 'selfie-instruction', }; export default meta; export const SelfieInstruction = { - render: () => ` + render: () => ` `, -} \ No newline at end of file +};