From 7f2ec232277fdf99f350d448e81e864469f3793c Mon Sep 17 00:00:00 2001 From: Barnabas Nsoh Date: Fri, 19 Jan 2024 12:06:49 +0000 Subject: [PATCH] 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