@claspo/document-connector 16.4.5-aria.1 → 16.4.5-aria.f1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/layouts/content-locker/ContentLockerLayout.d.ts +1 -0
- package/layouts/content-locker/ContentLockerLayout.js +1 -1
- package/layouts/detached/DialogLayout.d.ts +1 -0
- package/layouts/detached/DialogLayout.js +1 -1
- package/layouts/trapFocus.d.ts +1 -0
- package/layouts/trapFocus.js +1 -0
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ export default class ContentLockerLayout extends LayoutWithCloseIcon {
|
|
|
13
13
|
environmentUpdateListener: any;
|
|
14
14
|
navigationEndListener: any;
|
|
15
15
|
boundEscapeListener: any;
|
|
16
|
+
removeFocusTrap: any;
|
|
16
17
|
constructor(params: any, eventEmitter: any, viewRouter: any, documentModelService: any, resizeListener: any);
|
|
17
18
|
adjustBrandingPosition(): void;
|
|
18
19
|
addOverlayStyles(container: any): () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import debounce from"@claspo/common/async/debounce";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{RenderMode}from"@claspo/common/RenderMode";import GlobalScrollBlocker from"../GlobalScrollBlocker";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{ClWidgetHorizontalPosition,ClWidgetVerticalPosition}from"@claspo/common/document/Document.interface";class ContentLockerLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.contentLockerRootElement=document.createElement("div"),this.contentLockerRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.contentLockerElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerSelector),this.contentLockerContentElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerContentSelector),this.contentLockerElement.setAttribute("cl-connector-root-element",LayoutType.CONTENT_LOCKER),this.params.formVariantId&&this.contentLockerElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=document.createElement("div"),this.closeIconElement.classList.add("cl-content-locker-close-icon"),this.contentLockerContentElement.appendChild(this.closeIconElement),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.contentLockerElement.querySelector(ContentLockerLayout.contentLockerContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.contentLockerElement.appendChild(this.brandingElement),this.addBrandingElementListeners());const s=this.getDocumentModel().shared.closeIcon;s&&!s.showOnViews&&this.isCloseIconEnabled(s)&&(this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener))}adjustBrandingPosition(){this.brandingElement.style.right="10px",this.brandingElement.style.bottom="10px"}addOverlayStyles(e){var t,n,o,i;const s=this.getDocumentModel(),l="backdropFilter",r=(null===(n=null===(t=s.shared.overlay)||void 0===t?void 0:t.styles)||void 0===n?void 0:n.backdropFilter)||"blur(20px)",c="background",a=(null===(i=null===(o=s.shared.overlay)||void 0===o?void 0:o.styles)||void 0===i?void 0:i.background)||"transparent";e.style[l]=r,e.style[c]=a;const d=new MutationObserver(t=>{t.forEach(t=>{var n,o;"attributes"===t.type&&"style"===t.attributeName&&((null===(n=e.style[l])||void 0===n?void 0:n.includes(r))||(e.style[l]=r),(null===(o=e.style[c])||void 0===o?void 0:o.includes(a))||(e.style[c]=a))})});return d.observe(e,{attributes:!0,attributeFilter:["style"]}),()=>d.disconnect()}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block(),this.removeOverlayStyles=this.addOverlayStyles(this.contentLockerElement),this.contentLockerContentElement.appendChild(e),t.appendChild(this.contentLockerElement),this.setConnectedElement(this.contentLockerElement),this.updateScrollbar(this.isMobileEnv()),this.contentLockerContentElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible",requestAnimationFrame(()=>{this.contentLockerElement.focus()})}),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{var e;this.setCloseIconParams(this.isMobileEnv()),this.centerContentIfNeeded(this.getCurrentViewIndex()),null===(e=this.removeOverlayStyles)||void 0===e||e.call(this),this.removeOverlayStyles=this.addOverlayStyles(this.contentLockerElement)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;if(this.centerContentIfNeeded(this.getCurrentViewIndex()),o&&(this.navigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())})),!o){const e=this.getDocumentModel().views[this.getCurrentViewIndex()].id;this.viewPropsUpdateListener=this.documentModel.on(`${EditorToWidgetEventType.COMPONENT_PROPS_UPDATE}_${e}`,debounce(()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())},5))}return this.contentLockerElement}disconnect(e){var t,n,o,i,s;super.disconnect(e),null==e||e(),this.boundEscapeListener&&window.removeEventListener("keyup",this.boundEscapeListener),this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),null===(t=this.removeOverlayStyles)||void 0===t||t.call(this),this.contentLockerElement.remove(),null===(n=this.sharedUpdateListener)||void 0===n||n.off(),null===(o=this.viewPropsUpdateListener)||void 0===o||o.off(),null===(i=this.environmentUpdateListener)||void 0===i||i.off(),null===(s=this.navigationEndListener)||void 0===s||s.off()}centerContentIfNeeded(e){var t,n;const o=this.getDocumentModel(),i=o.views[e],s=this.isMobileEnv(),l=s?i.props.adaptiveStyles.mobile[0].styleAttributes:i.props.adaptiveStyles.desktop[0].styleAttributes,r="100%"===l.width&&"100%"===l.height;this.documentElement.style.width=l.width,this.documentElement.style.minWidth=l.minWidth,this.documentElement.style.height=l.height,this.documentElement.style.minHeight=l.minHeight;const c=s?null===(t=o.shared.overlay)||void 0===t?void 0:t.mobile:null===(n=o.shared.overlay)||void 0===n?void 0:n.desktop;r?this.resetCustomContentSize():this.setCustomSizeForContent(l,c)}resetCustomContentSize(){this.contentLockerElement.style.display="",this.contentLockerElement.style.justifyContent="",this.contentLockerElement.style.alignItems="",this.contentLockerContentElement.style.width="100%",this.contentLockerContentElement.style.minWidth="",this.contentLockerContentElement.style.height="100%",this.contentLockerContentElement.style.minHeight="",this.contentLockerContentElement.style.margin=""}setCustomSizeForContent(e,t){const{horizontalAlign:n,verticalAlign:o,cssPropNameForHorizontalOffset:i,cssPropNameForVerticalOffset:s}=this.getContentPositionDetails(t);this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent=n,this.contentLockerElement.style.alignItems=o,this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight,this.contentLockerContentElement.style.margin="",(null==t?void 0:t.horizontalOffset)&&i&&(this.contentLockerContentElement.style[i]=t.horizontalOffset),(null==t?void 0:t.verticalOffset)&&s&&(this.contentLockerContentElement.style[s]=t.verticalOffset)}getContentPositionDetails(e){let t,n,o=null,i=null;return!(null==e?void 0:e.horizontalPosition)||e.horizontalPosition===ClWidgetHorizontalPosition.CENTER&&e.verticalPosition!==ClWidgetVerticalPosition.CENTER?t="center":e.horizontalPosition===ClWidgetHorizontalPosition.LEFT?(t="flex-start",o="marginLeft"):e.horizontalPosition===ClWidgetHorizontalPosition.RIGHT?(t="flex-end",o="marginRight"):(t="center",o="marginLeft"),!(null==e?void 0:e.verticalPosition)||e.verticalPosition===ClWidgetVerticalPosition.CENTER&&e.horizontalPosition!==ClWidgetHorizontalPosition.CENTER?n="center":e.verticalPosition===ClWidgetVerticalPosition.TOP?(n="flex-start",i="marginTop"):e.verticalPosition===ClWidgetVerticalPosition.BOTTOM?(n="flex-end",i="marginBottom"):(n="center",i="marginTop"),{horizontalAlign:t,verticalAlign:n,cssPropNameForHorizontalOffset:o,cssPropNameForVerticalOffset:i}}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t||!this.getDocumentModel().shared.actualSize)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",t.style.minHeight=`${o}px`,this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}_getTemplate(e){var t,n;return`\n <div class="cl-content-locker" role="dialog" aria-modal="true" aria-label="Popup" tabindex="0">\n <style>\n .cl-content-locker {\n display: block;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n z-index: ${String(null!==(n=e.zIndex)&&void 0!==n?n:Number.MAX_SAFE_INTEGER)}\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(ContentLockerLayout.contentLockerSelector):""}\n\n .cl-content-locker-content {\n width: 100%;\n height: 100%;\n min-height: fit-content;\n }\n\n .cl-content-locker-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n </style>\n\n <div class="cl-content-locker-content"></div>\n </div>`}}ContentLockerLayout.contentLockerSelector=".cl-content-locker",ContentLockerLayout.contentLockerContentSelector=".cl-content-locker-content",ContentLockerLayout.contentLockerCloseIconSelector=".cl-content-locker-close-icon";export default ContentLockerLayout;
|
|
1
|
+
import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import debounce from"@claspo/common/async/debounce";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{RenderMode}from"@claspo/common/RenderMode";import GlobalScrollBlocker from"../GlobalScrollBlocker";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import trapFocus from"../trapFocus";import{ClWidgetHorizontalPosition,ClWidgetVerticalPosition}from"@claspo/common/document/Document.interface";class ContentLockerLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.contentLockerRootElement=document.createElement("div"),this.contentLockerRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.contentLockerElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerSelector),this.contentLockerContentElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerContentSelector),this.contentLockerElement.setAttribute("cl-connector-root-element",LayoutType.CONTENT_LOCKER),this.params.formVariantId&&this.contentLockerElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=document.createElement("div"),this.closeIconElement.classList.add("cl-content-locker-close-icon"),this.contentLockerContentElement.appendChild(this.closeIconElement),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.contentLockerElement.querySelector(ContentLockerLayout.contentLockerContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.contentLockerElement.appendChild(this.brandingElement),this.addBrandingElementListeners());const s=this.getDocumentModel().shared.closeIcon;s&&!s.showOnViews&&this.isCloseIconEnabled(s)&&(this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener))}adjustBrandingPosition(){this.brandingElement.style.right="10px",this.brandingElement.style.bottom="10px"}addOverlayStyles(e){var t,n,o,i;const s=this.getDocumentModel(),l="backdropFilter",r=(null===(n=null===(t=s.shared.overlay)||void 0===t?void 0:t.styles)||void 0===n?void 0:n.backdropFilter)||"blur(20px)",c="background",a=(null===(i=null===(o=s.shared.overlay)||void 0===o?void 0:o.styles)||void 0===i?void 0:i.background)||"transparent";e.style[l]=r,e.style[c]=a;const d=new MutationObserver(t=>{t.forEach(t=>{var n,o;"attributes"===t.type&&"style"===t.attributeName&&((null===(n=e.style[l])||void 0===n?void 0:n.includes(r))||(e.style[l]=r),(null===(o=e.style[c])||void 0===o?void 0:o.includes(a))||(e.style[c]=a))})});return d.observe(e,{attributes:!0,attributeFilter:["style"]}),()=>d.disconnect()}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block(),this.removeOverlayStyles=this.addOverlayStyles(this.contentLockerElement),this.contentLockerContentElement.appendChild(e),t.appendChild(this.contentLockerElement),this.setConnectedElement(this.contentLockerElement),this.updateScrollbar(this.isMobileEnv()),this.contentLockerContentElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible",requestAnimationFrame(()=>{this.contentLockerElement.focus()}),this.removeFocusTrap=trapFocus(this.contentLockerElement)}),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{var e;this.setCloseIconParams(this.isMobileEnv()),this.centerContentIfNeeded(this.getCurrentViewIndex()),null===(e=this.removeOverlayStyles)||void 0===e||e.call(this),this.removeOverlayStyles=this.addOverlayStyles(this.contentLockerElement)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;if(this.centerContentIfNeeded(this.getCurrentViewIndex()),o&&(this.navigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())})),!o){const e=this.getDocumentModel().views[this.getCurrentViewIndex()].id;this.viewPropsUpdateListener=this.documentModel.on(`${EditorToWidgetEventType.COMPONENT_PROPS_UPDATE}_${e}`,debounce(()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())},5))}return this.contentLockerElement}disconnect(e){var t,n,o,i,s,l;super.disconnect(e),null==e||e(),this.boundEscapeListener&&window.removeEventListener("keyup",this.boundEscapeListener),null===(t=this.removeFocusTrap)||void 0===t||t.call(this),this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),null===(n=this.removeOverlayStyles)||void 0===n||n.call(this),this.contentLockerElement.remove(),null===(o=this.sharedUpdateListener)||void 0===o||o.off(),null===(i=this.viewPropsUpdateListener)||void 0===i||i.off(),null===(s=this.environmentUpdateListener)||void 0===s||s.off(),null===(l=this.navigationEndListener)||void 0===l||l.off()}centerContentIfNeeded(e){var t,n;const o=this.getDocumentModel(),i=o.views[e],s=this.isMobileEnv(),l=s?i.props.adaptiveStyles.mobile[0].styleAttributes:i.props.adaptiveStyles.desktop[0].styleAttributes,r="100%"===l.width&&"100%"===l.height;this.documentElement.style.width=l.width,this.documentElement.style.minWidth=l.minWidth,this.documentElement.style.height=l.height,this.documentElement.style.minHeight=l.minHeight;const c=s?null===(t=o.shared.overlay)||void 0===t?void 0:t.mobile:null===(n=o.shared.overlay)||void 0===n?void 0:n.desktop;r?this.resetCustomContentSize():this.setCustomSizeForContent(l,c)}resetCustomContentSize(){this.contentLockerElement.style.display="",this.contentLockerElement.style.justifyContent="",this.contentLockerElement.style.alignItems="",this.contentLockerContentElement.style.width="100%",this.contentLockerContentElement.style.minWidth="",this.contentLockerContentElement.style.height="100%",this.contentLockerContentElement.style.minHeight="",this.contentLockerContentElement.style.margin=""}setCustomSizeForContent(e,t){const{horizontalAlign:n,verticalAlign:o,cssPropNameForHorizontalOffset:i,cssPropNameForVerticalOffset:s}=this.getContentPositionDetails(t);this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent=n,this.contentLockerElement.style.alignItems=o,this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight,this.contentLockerContentElement.style.margin="",(null==t?void 0:t.horizontalOffset)&&i&&(this.contentLockerContentElement.style[i]=t.horizontalOffset),(null==t?void 0:t.verticalOffset)&&s&&(this.contentLockerContentElement.style[s]=t.verticalOffset)}getContentPositionDetails(e){let t,n,o=null,i=null;return!(null==e?void 0:e.horizontalPosition)||e.horizontalPosition===ClWidgetHorizontalPosition.CENTER&&e.verticalPosition!==ClWidgetVerticalPosition.CENTER?t="center":e.horizontalPosition===ClWidgetHorizontalPosition.LEFT?(t="flex-start",o="marginLeft"):e.horizontalPosition===ClWidgetHorizontalPosition.RIGHT?(t="flex-end",o="marginRight"):(t="center",o="marginLeft"),!(null==e?void 0:e.verticalPosition)||e.verticalPosition===ClWidgetVerticalPosition.CENTER&&e.horizontalPosition!==ClWidgetHorizontalPosition.CENTER?n="center":e.verticalPosition===ClWidgetVerticalPosition.TOP?(n="flex-start",i="marginTop"):e.verticalPosition===ClWidgetVerticalPosition.BOTTOM?(n="flex-end",i="marginBottom"):(n="center",i="marginTop"),{horizontalAlign:t,verticalAlign:n,cssPropNameForHorizontalOffset:o,cssPropNameForVerticalOffset:i}}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t||!this.getDocumentModel().shared.actualSize)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",t.style.minHeight=`${o}px`,this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}_getTemplate(e){var t,n;return`\n <div class="cl-content-locker" role="dialog" aria-modal="true" aria-label="Popup" tabindex="0">\n <style>\n .cl-content-locker {\n display: block;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n z-index: ${String(null!==(n=e.zIndex)&&void 0!==n?n:Number.MAX_SAFE_INTEGER)}\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(ContentLockerLayout.contentLockerSelector):""}\n\n .cl-content-locker-content {\n width: 100%;\n height: 100%;\n min-height: fit-content;\n }\n\n .cl-content-locker-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n </style>\n\n <div class="cl-content-locker-content"></div>\n </div>`}}ContentLockerLayout.contentLockerSelector=".cl-content-locker",ContentLockerLayout.contentLockerContentSelector=".cl-content-locker-content",ContentLockerLayout.contentLockerCloseIconSelector=".cl-content-locker-close-icon";export default ContentLockerLayout;
|
|
@@ -11,6 +11,7 @@ export default class DialogLayout extends LayoutWithCloseIcon {
|
|
|
11
11
|
dialogRootElement: any;
|
|
12
12
|
dialogElement: any;
|
|
13
13
|
boundEscapeListener: any;
|
|
14
|
+
removeFocusTrap: any;
|
|
14
15
|
sharedUpdateListener: any;
|
|
15
16
|
environmentUpdateListener: any;
|
|
16
17
|
constructor(params: any, eventEmitter: any, viewRouter: any, documentModel: any, resizeListener: any);
|
|
@@ -1 +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";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){super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener);const
|
|
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.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement)},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):(this.dialogElement.style.visibility="visible",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" 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 ${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;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function trapFocus(container: HTMLElement): () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const FOCUSABLE_SELECTOR='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function getDeepActiveElement(){let e=document.activeElement;for(;e&&e.shadowRoot&&e.shadowRoot.activeElement;)e=e.shadowRoot.activeElement;return e}function collectFocusableElements(e,t){e instanceof HTMLElement&&e.shadowRoot&&collectFocusableElements(e.shadowRoot,t);const o=e instanceof HTMLElement&&e.shadowRoot?e.shadowRoot.children:e.childNodes;for(let e=0;e<o.length;e++){const n=o[e];n instanceof HTMLElement&&(n.matches(FOCUSABLE_SELECTOR)&&t.push(n),n.shadowRoot?collectFocusableElements(n.shadowRoot,t):collectFocusableElements(n,t))}}export default function trapFocus(e){const t=t=>{if("Tab"!==t.key)return;const o=[];if(collectFocusableElements(e,o),0===o.length)return;const n=o[0],l=o[o.length-1],s=getDeepActiveElement();t.shiftKey?s!==n&&s!==e||(t.preventDefault(),l.focus()):s===l&&(t.preventDefault(),n.focus())};return e.addEventListener("keydown",t),()=>e.removeEventListener("keydown",t)}
|