@claspo/document-connector 16.5.5-hidden-fields → 16.6.1-close.0

package/layouts/detached/DialogLayout.js

@@ -1 +1 @@
-import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";import GlobalScrollBlocker from"../GlobalScrollBlocker";import trapFocus from"../trapFocus";class DialogLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.dialogRootElement=document.createElement("div"),this.dialogRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.dialogElement=this.dialogRootElement.querySelector(DialogLayout.dialogSelector),this.dialogElement.style.background=this.getDocumentModel().shared.dialog.background,this.dialogElement.setAttribute("cl-connector-root-element",LayoutType.DETACHED),this.params.formVariantId&&this.dialogElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.dialogElement.querySelector(DialogLayout.dialogCloseIconSelector),this.addBackDropClickEventListener(),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).appendChild(this.brandingElement),this.addBrandingElementListeners()),this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener)}adjustBrandingPosition(){this.brandingElement.style.position="relative",this.brandingElement.style.marginTop="10px"}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}migrateDocumentModel(e){return e=this.migrateDialogParams(e),e=this.migrateCloseIconParams(e)}migrateDialogParams(e){return e.shared.dialog?e:Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{dialog:{background:"rgba(0, 0, 0, 0.7)"}})})}migrateCloseIconParams(e){if(e.shared.closeIcon)return e;const t=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{closeIcon:{desktop:t.desktop,mobile:t.mobile}})})}addBackDropClickEventListener(){this.dialogElement.addEventListener("click",e=>{const t="cl-widget-id";e.target!==this.dialogElement||document.activeElement&&document.activeElement.closest(`[${t}=${this.dialogElement.getAttribute(t)}]`)===this.dialogElement||this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)})}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.dialogElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block();return this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector).appendChild(e),t.appendChild(this.dialogElement),this.setConnectedElement(this.dialogElement),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv)},5)),this.dialogElement}disconnect(e){var t;super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener),null===(t=this.removeFocusTrap)||void 0===t||t.call(this);const n=()=>{var t,n;null==e||e(),this.dialogElement.remove(),null===(t=this.sharedUpdateListener)||void 0===t||t.off(),null===(n=this.environmentUpdateListener)||void 0===n||n.off()};if(this.params.disableLayoutAnimations)return void n();const o=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,o.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),n()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=.9*this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${o}px`,this.dialogElement.style.overflowY="auto",this.dialogElement.style.overflowX="hidden",this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}showDialog(){if(this.widgetIsShown)return;this.widgetIsShown=!0;!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations?setTimeout(()=>{this.dialogElement.style.visibility="visible";const e=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,e.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,setTimeout(()=>{this.dialogElement.style.animation="",e.style.animation="",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement))},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):(this.dialogElement.style.visibility="visible",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement)))}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){var t;return`\n<div class="cl-dialog" role="dialog" aria-modal="true" aria-label="Popup" ${this.isStaticRenderMode()?'tabindex="0"':""}>\n  <style>\n  .cl-dialog {\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n    z-index: ${e.zIndex};\n  }\n\n  .cl-dialog:focus {\n    outline: none;\n  }\n\n  ${e.disabled?this.getDisabledWidgetStyles(DialogLayout.dialogSelector):""}\n\n  .cl-dialog-inner-content-wrapper {\n     display: flex;\n     flex-direction: column;\n     align-items: end;\n  }\n  \n  .cl-dialog-inner-content {\n     position: relative;\n     max-width: 100vw;\n  }\n\n  .cl-dialog-close-icon {\n    z-index: 99;\n    position: absolute;\n    cursor: pointer;\n  }\n\n  ${this.getBrandingStyles()}\n\n  ${this.getGameSpotlightStyles()}\n\n  ${this.getOtherStyles()}\n  \n  ${this.getEntryAndDestroyAnimations()}\n  </style>\n\n  <div class="cl-dialog-inner-content-wrapper">\n    <div class="cl-dialog-inner-content">\n      <div class="cl-dialog-close-icon"></div>\n      <div class="cl-dialog-content"></div>\n    </div>\n  </div>\n</div>\n`}getEntryAndDestroyAnimations(){return"\n@keyframes fadeInDialog {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes zoomInContent {\n  0% {\n    transform: scale(0.5);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n    "}}DialogLayout.dialogSelector=".cl-dialog",DialogLayout.dialogContentWrapperSelector=".cl-dialog-inner-content-wrapper",DialogLayout.dialogContentSelector=".cl-dialog-content",DialogLayout.dialogCloseIconSelector=".cl-dialog-close-icon";export default DialogLayout;
+import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";import GlobalScrollBlocker from"../GlobalScrollBlocker";import trapFocus from"../trapFocus";class DialogLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.dialogRootElement=document.createElement("div"),this.dialogRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.dialogElement=this.dialogRootElement.querySelector(DialogLayout.dialogSelector),this.dialogElement.style.background=this.getDocumentModel().shared.dialog.background,this.dialogElement.setAttribute("cl-connector-root-element",LayoutType.DETACHED),this.params.formVariantId&&this.dialogElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.dialogElement.querySelector(DialogLayout.dialogCloseIconSelector),this.addBackDropClickEventListener(),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).appendChild(this.brandingElement),this.addBrandingElementListeners()),this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener)}adjustBrandingPosition(){this.brandingElement.style.position="relative",this.brandingElement.style.marginTop="10px"}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}migrateDocumentModel(e){return e=this.migrateDialogParams(e),e=this.migrateCloseIconParams(e)}migrateDialogParams(e){return e.shared.dialog?e:Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{dialog:{background:"rgba(0, 0, 0, 0.7)"}})})}migrateCloseIconParams(e){if(e.shared.closeIcon)return e;const t=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{closeIcon:{desktop:t.desktop,mobile:t.mobile}})})}addBackDropClickEventListener(){this.dialogElement.addEventListener("click",e=>{const t="cl-widget-id";e.target!==this.dialogElement||document.activeElement&&(document.activeElement===this.dialogElement||document.activeElement.closest(`[${t}=${this.dialogElement.getAttribute(t)}]`)===this.dialogElement)||this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)})}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.dialogElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block();return this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector).appendChild(e),t.appendChild(this.dialogElement),this.setConnectedElement(this.dialogElement),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv)},5)),this.dialogElement}disconnect(e){var t;super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener),null===(t=this.removeFocusTrap)||void 0===t||t.call(this);const n=()=>{var t,n;null==e||e(),this.dialogElement.remove(),null===(t=this.sharedUpdateListener)||void 0===t||t.off(),null===(n=this.environmentUpdateListener)||void 0===n||n.off()};if(this.params.disableLayoutAnimations)return void n();const o=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,o.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),n()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=.9*this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${o}px`,this.dialogElement.style.overflowY="auto",this.dialogElement.style.overflowX="hidden",this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}showDialog(){if(this.widgetIsShown)return;this.widgetIsShown=!0;!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations?setTimeout(()=>{this.dialogElement.style.visibility="visible";const e=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,e.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,setTimeout(()=>{this.dialogElement.style.animation="",e.style.animation="",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement))},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):(this.dialogElement.style.visibility="visible",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement)))}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){var t;return`\n<div class="cl-dialog" role="dialog" aria-modal="true" aria-label="Popup" ${this.isStaticRenderMode()?'tabindex="0"':""}>\n  <style>\n  .cl-dialog {\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n    z-index: ${e.zIndex};\n  }\n\n  .cl-dialog:focus {\n    outline: none;\n  }\n\n  ${e.disabled?this.getDisabledWidgetStyles(DialogLayout.dialogSelector):""}\n\n  .cl-dialog-inner-content-wrapper {\n     display: flex;\n     flex-direction: column;\n     align-items: end;\n  }\n  \n  .cl-dialog-inner-content {\n     position: relative;\n     max-width: 100vw;\n  }\n\n  .cl-dialog-close-icon {\n    z-index: 99;\n    position: absolute;\n    cursor: pointer;\n  }\n\n  ${this.getBrandingStyles()}\n\n  ${this.getGameSpotlightStyles()}\n\n  ${this.getOtherStyles()}\n  \n  ${this.getEntryAndDestroyAnimations()}\n  </style>\n\n  <div class="cl-dialog-inner-content-wrapper">\n    <div class="cl-dialog-inner-content">\n      <div class="cl-dialog-close-icon"></div>\n      <div class="cl-dialog-content"></div>\n    </div>\n  </div>\n</div>\n`}getEntryAndDestroyAnimations(){return"\n@keyframes fadeInDialog {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes zoomInContent {\n  0% {\n    transform: scale(0.5);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n    "}}DialogLayout.dialogSelector=".cl-dialog",DialogLayout.dialogContentWrapperSelector=".cl-dialog-inner-content-wrapper",DialogLayout.dialogContentSelector=".cl-dialog-content",DialogLayout.dialogCloseIconSelector=".cl-dialog-close-icon";export default DialogLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/document-connector",
-  "version": "16.5.5-hidden-fields",
+  "version": "16.6.1-close.0",
   "scripts": {
     "test": "jest --no-cache --coverage",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -14,8 +14,8 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "7.1.5-hidden-fields",
-    "@claspo/renderer": "18.4.3-hidden-fields"
+    "@claspo/common": "7.2.0",
+    "@claspo/renderer": "18.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",