From 7496b9a47e0c7b0bbd5d33c0d3ca320ba65c5210 Mon Sep 17 00:00:00 2001 From: Grand Julivan Date: Thu, 25 Jan 2024 13:26:50 +0100 Subject: [PATCH] fix csp --- WebNanoflowActions.mpr | Bin 2838528 -> 2838528 bytes .../webactions/actions/TakePicture.js | 207 +----------------- themesource/webactions/web/_take-picture.scss | 153 +++++++++++++ themesource/webactions/web/main.scss | 3 +- 4 files changed, 156 insertions(+), 207 deletions(-) create mode 100644 themesource/webactions/web/_take-picture.scss diff --git a/WebNanoflowActions.mpr b/WebNanoflowActions.mpr index 0f0ba195cb11fb5a5e53ed5cc41dd9cc338612ad..e2768bd0c8a992fe3bc77ea86c4450298a3c17e1 100644 GIT binary patch delta 150 zcmWN=w-LfX006;x?Bl(a@E*#b09v?GL~uEDpaux(4|Zm={1dYOR}$hoy@&Wjf)u1E zB`HfqsuHCpb!kXbTGEz|bfqVK8OTsZGM0%?R_ delta 150 zcmWN=M-c)65CFkia?bgVoIwTxurN~KF@JDy26*BRx~d=9Cm#Q=B;uXkBA!S{PV!Qa zqLid86{$*1>e7&=w4^N^=}J%fGLWH+WGoYz%1jbTWiAU@%1YL { let error; let stream; - const styleElements = []; let videoIsReady = false; let shouldFaceEnvironment = true; - for (const styleElement of createStyleElements(createStyles())) { - styleElements.push(styleElement); - document.head.appendChild(styleElement); - } const { video, wrapper, @@ -116,204 +112,6 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit videoContext === null || videoContext === void 0 ? void 0 : videoContext.drawImage(video, 0, 0); return videoCanvas; } - function createStyles() { - return [ - ` - .take-picture-wrapper { - height: 100%; - width: 100%; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - flex-direction: column-reverse; - justify-content: space-between; - /* Should be higher than the the video. */ - z-index: 111; - }; - `, - ` - .take-picture-video-element { - position: absolute; - /* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */ - z-index: 110; - top: 0; - left: 0; - right: 0; - bottom: 0; - object-fit: cover; - width: 100%; - height: 100%; - background-color: black; - }; - `, - ` - .take-picture-action-control-wrapper { - display: flex; - justify-content: center; - flex-direction: row; - align-items: center; - /* should be higher than the video. */ - z-index: 111; - margin-bottom: 74px; - }; - `, - ` - .take-picture-action-switch-control-wrapper { - display: flex; - justify-content: space-between; - flex-direction: row; - align-items: center; - /* should be higher than the video. */ - z-index: 111; - margin-bottom: 74px; - }; - `, - ` - .take-picture-close-control-wrapper { - display: flex; - justify-content: flex-start; - flex-direction: column; - align-items: flex-start; - /* should be higher than the video. */ - z-index: 111; - }; - `, - ` - .take-picture-action-control { - background-color: transparent; - border-style: none; - padding: 0; - }; - `, - ` - .take-picture-action-spacing { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - }; - `, - ` - .take-picture-switch-spacing { - display: flex; - flex: 1; - justify-content: flex-end; - align-items: center; - }; - `, - ` - .take-picture-spacing-div { - flex: 1; - }; - `, - ` - .take-picture-action-control-inner { - border-radius: 50%; - background-color: white; - border: 1px solid black; - width: 58px; - height: 58px; - }; - `, - ` - .take-picture-button-wrapper { - display: flex; - flex-direction: row; - justify-content: space-between; - z-index: 111; - }; - `, - ` - .take-picture-save-button { - color: white; - background-color: #264AE5; - width: 100%; - border-radius: 4px; - height: 40px; - font-size: 14px; - line-height: 20px; - text-align: center; - border-style: none; - }; - `, - ` - .take-picture-switch-control { - background-color: transparent; - border-style: none; - padding: 0; - margin-right: 22.33px; - }; - `, - ` - .take-picture-close-control { - margin: 30px 0 0 30px; - border-style: none; - padding: 0; - background-color: transparent; - }; - `, - ` - .take-picture-save-control { - margin: 30px 30px 0 0; - border-style: none; - padding: 0; - background-color: transparent; - }; - `, - ` - .take-picture-confirm-wrapper { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background-color: white; - /* should be higher than the wrapper. */ - z-index: 112; - display: flex; - flex-direction: column; - justify-content: space-between; - } - `, - ` - .take-picture-image { - position: absolute; - /* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */ - z-index: 110; - top: 0; - left: 0; - right: 0; - bottom: 0; - object-fit: cover; - width: 100%; - height: 100%; - background-color: black; - } - `, - ` - /* Overwrite 'atlas_core/web/core/_legacy/_mxui.scss' for this particular widget because otherwise - iOS Safari will in certain cases put the top and/or bottom bar on top of the overlay of this widget. */ - - .mx-scrollcontainer-wrapper:not(.mx-scrollcontainer-nested) { - -webkit-overflow-scrolling: auto; - } - ` - ]; - } - function createStyleElements(styles) { - const styleElements = []; - for (const style of styles) { - const styleElement = document.createElement("style"); - styleElement.appendChild(document.createTextNode(style)); - styleElements.push(styleElement); - } - return styleElements; - } function createFirstScreenElements() { const wrapper = document.createElement("div"); wrapper.setAttribute("role", "dialog"); @@ -454,9 +252,6 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit function closeControlHandler() { stopCamera(); document.body.removeChild(wrapper); - for (const styleElement of styleElements) { - document.head.removeChild(styleElement); - } } async function startCamera(facingMode) { var _a; diff --git a/themesource/webactions/web/_take-picture.scss b/themesource/webactions/web/_take-picture.scss new file mode 100644 index 0000000..8203f9c --- /dev/null +++ b/themesource/webactions/web/_take-picture.scss @@ -0,0 +1,153 @@ +/* ========================================================================== + Take picture styles +========================================================================== */ + +.take-picture-wrapper { + height: 100%; + width: 100%; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column-reverse; + justify-content: space-between; + /* Should be higher than the the video. */ + z-index: 111; +} +.take-picture-video-element { + position: absolute; + /* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */ + z-index: 110; + top: 0; + left: 0; + right: 0; + bottom: 0; + object-fit: cover; + width: 100%; + height: 100%; + background-color: black; +} +.take-picture-action-control-wrapper { + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; + /* should be higher than the video. */ + z-index: 111; + margin-bottom: 74px; +} +.take-picture-action-switch-control-wrapper { + display: flex; + justify-content: space-between; + flex-direction: row; + align-items: center; + /* should be higher than the video. */ + z-index: 111; + margin-bottom: 74px; +} +.take-picture-close-control-wrapper { + display: flex; + justify-content: flex-start; + flex-direction: column; + align-items: flex-start; + /* should be higher than the video. */ + z-index: 111; +} +.take-picture-action-control { + background-color: transparent; + border-style: none; + padding: 0; +} +.take-picture-action-spacing { + flex: 1; + display: flex; + justify-content: center; + align-items: center; +} +.take-picture-switch-spacing { + display: flex; + flex: 1; + justify-content: flex-end; + align-items: center; +} +.take-picture-spacing-div { + flex: 1; +} +.take-picture-action-control-inner { + border-radius: 50%; + background-color: white; + border: 1px solid black; + width: 58px; + height: 58px; +} +.take-picture-button-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + z-index: 111; +} +.take-picture-save-button { + color: white; + background-color: #264AE5; + width: 100%; + border-radius: 4px; + height: 40px; + font-size: 14px; + line-height: 20px; + text-align: center; + border-style: none; +} +.take-picture-switch-control { + background-color: transparent; + border-style: none; + padding: 0; + margin-right: 22.33px; +} +.take-picture-close-control { + margin: 30px 0 0 30px; + border-style: none; + padding: 0; + background-color: transparent; +} +.take-picture-save-control { + margin: 30px 30px 0 0; + border-style: none; + padding: 0; + background-color: transparent; +} +.take-picture-confirm-wrapper { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: white; + /* should be higher than the wrapper. */ + z-index: 112; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.take-picture-image { + position: absolute; + /* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */ + z-index: 110; + top: 0; + left: 0; + right: 0; + bottom: 0; + object-fit: cover; + width: 100%; + height: 100%; + background-color: black; +} +/* Overwrite 'atlas_core/web/core/_legacy/_mxui.scss' for this particular widget because otherwise + iOS Safari will in certain cases put the top and/or bottom bar on top of the overlay of this widget. */ + +.mx-scrollcontainer-wrapper:not(.mx-scrollcontainer-nested) { + -webkit-overflow-scrolling: auto; +} diff --git a/themesource/webactions/web/main.scss b/themesource/webactions/web/main.scss index 122370f..ad1ac28 100644 --- a/themesource/webactions/web/main.scss +++ b/themesource/webactions/web/main.scss @@ -1,2 +1,3 @@ -@import '../../../theme/web/custom-variables'; +@import "../../../theme/web/custom-variables"; +@import "take-picture";