@claspo/document-connector 16.2.3 → 16.2.4
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/BaseDocumentConnector.js +1 -1
- package/layouts/built-in/BuiltInLayout.js +1 -1
- package/layouts/content-locker/ContentLockerLayout.js +1 -1
- package/layouts/detached/DialogLayout.js +1 -1
- package/layouts/floating-bar/FloatingBarLayout.js +1 -1
- package/layouts/floating-box/FloatingBoxLayout.js +1 -1
- package/layouts/launcher/LauncherLayout.js +1 -1
- package/package.json +3 -3
package/BaseDocumentConnector.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import CssVarsOperations from"@claspo/common/element/CssVarsOperations";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";import{
|
|
1
|
+
import CssVarsOperations from"@claspo/common/element/CssVarsOperations";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class BaseDocumentConnector extends DefaultEventEmitter{constructor(e){super(),this.propsRequestListener=e=>{e.stopPropagation();let t=e.detail.id,o=e.detail.widgetId;if(o&&this.params.formVariantId&&this.params.formVariantId!==o)return;let r=DocumentUtils.getNodeById(this.entryModule.compositionRoot.services.documentModel.getViews(),t);r&&(e.detail.props=this.entryModule.componentFactory.constructProps(r,this.entryModule.viewRenderer.viewResourceManager))},this.params=e,this.entryModule=null,this.controllers=[],this.container=null}disconnect(){var e;null===(e=this.container)||void 0===e||e.removeEventListener("cl-props-request",this.propsRequestListener)}addPropsRequestEventListener(e){this.container=e,e.addEventListener("cl-props-request",this.propsRequestListener)}setEntryModule(e){this.entryModule=e}navigate(e){this.entryModule&&this.entryModule.viewRouter&&this.entryModule.viewRouter.navigate(e)}performAction(e,t){const o=this.entryModule.performAction(e,t);return this.controllers.forEach(o=>{switch(e){case EditorToWidgetEventType.COLOR_SCHEMA_UPDATE:CssVarsOperations.override(t,o.getConnectedElement());break;case EditorToWidgetEventType.THEME_UPDATE:ThemeCssVars.override(t.schema,o.getConnectedElement())}}),o}setEnvironment(e){this.entryModule.performAction(EditorToWidgetEventType.ENVIRONMENT_UPDATE,e)}getComponentManifests(){return this.componentResolver.getComponentManifests()}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import BaseLayout from"../BaseLayout";import InsertType from"./InsertType";import InsertPositionMapper from"./InsertPositionMapper";import{LayoutType}from"@claspo/common/LayoutType";import{
|
|
1
|
+
import BaseLayout from"../BaseLayout";import InsertType from"./InsertType";import InsertPositionMapper from"./InsertPositionMapper";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export default class BuiltInLayout extends BaseLayout{constructor(t,e,n,i,s){super(t,e,n,i,s),this.builtInElement=null,this.params.branded&&this.createBrandingElement()}connect(t,e,n){let i;if(t.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{t.style.visibility="visible"}),this.params.placement?(i=(e=document.querySelector(this.params.placement.selector)).getRootNode(),t.setAttribute("cl-connector-root-element",LayoutType.BUILT_IN),this.params.formVariantId&&t.setAttribute("cl-widget-id",this.params.formVariantId),this.params.placement.insertType===InsertType.REPLACE?e.replaceWith(t):e.insertAdjacentElement(InsertPositionMapper.map(this.params.placement.insertType),t)):(i=e.getRootNode(),e.appendChild(t)),this.params.disabled){const e=document.createElement("style");insertHtmlIntoElement({element:e,html:this.getDisabledWidgetStyles('[class^="cl-widget"]')}),t.appendChild(e)}this.builtInElement=t,this.documentElement=t,this.setConnectedElement(this.builtInElement);const s=document.createElement("style");if(insertHtmlIntoElement({element:s,html:this.getGameSpotlightStyles()}),t.appendChild(s),this.params.branded){const e=document.createElement("style");insertHtmlIntoElement({element:e,html:this.getBrandingStyles()}),this.adjustBrandingPosition(),t.appendChild(this.brandingElement),"VIEW"===t.getAttribute("cl-type")?(t.shadowRoot.appendChild(e),t.shadowRoot.appendChild(this.brandingElement)):(t.style.position="relative",t.appendChild(e),t.appendChild(this.brandingElement)),this.addBrandingElementListeners()}return this.addWidgetContentClickEventListener(i),this.builtInElement}adjustBrandingPosition(){this.brandingElement.style.position="absolute",this.brandingElement.style.bottom="10px",this.brandingElement.style.right="10px"}disconnect(t){null==t||t(),this.builtInElement&&this.builtInElement.remove()}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LayoutType}from"@claspo/common/LayoutType";import{
|
|
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"}),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">\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 +1 @@
|
|
|
1
|
-
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{
|
|
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 t=()=>{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 t();const n=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,n.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),t()},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=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):this.dialogElement.style.visibility="visible"}_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">\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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{
|
|
1
|
+
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,i,o,n){super(t,e,i,o,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.floatingBarRootElement=document.createElement("div"),this.floatingBarRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBarElement=this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarSelector),this.floatingBarElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BAR),this.params.formVariantId&&this.floatingBarElement.setAttribute("cl-widget-id",this.params.formVariantId);const s=this.isMobileEnv();this.closeIconElement=this.floatingBarElement.querySelector(FloatingBarLayout.floatingBarCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector)),this.setCloseIconParams(s),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(s),this.floatingBarElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}getSharedParams(){return this.getDocumentModel().shared.floatingBar}isBottomPosition(t){return t.verticalPosition===WidgetVerticalPosition.BOTTOM}adjustBrandingPosition(t){const e=this.getSharedParams(),i=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(i)?this.brandingElement.style.top="-30px":this.brandingElement.style.bottom="-30px"}clearPosition(){const t=Array.from(this.floatingBarElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBarElement.style.getPropertyValue(t)]);this.floatingBarElement.removeAttribute("style"),t.forEach(([t,e])=>{this.floatingBarElement.style.setProperty(t,e)}),this.modifiedFloatingElement&&(this.modifiedFloatingElement.style.top=this.originalModifiedFloatingElementTop)}restoreHtmlBodyStyles(){this.modifiedHtmlBodyElement&&this.originalHtmlBodyElementMarginTop&&(this.modifiedHtmlBodyElement.style.marginTop=this.originalHtmlBodyElementMarginTop)}setTopPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.top="0px"}setBottomPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.bottom="0px"}setPosition(t){this.clearPosition(),this.restoreHtmlBodyStyles();const e=this.getSharedParams(),i=t?e.mobile:e.desktop,o=this.isBottomPosition(i);return o?(this.setBottomPosition(i),{isBottomPosition:o}):(this._setTopPosition(t,i),{isBottomPosition:o})}getOtherStyles(){return""}_setTopPosition(t,e){if(this.modifiedFloatingElement=null,this.modifiedHtmlBodyElement=null,this.calculatedOverflowAbove=0,"body"!==this.containerElement.tagName.toLowerCase()||!this.getDocumentModel().shared.actualSize||this.params.disableSmartPosition)return void this.setTopPosition(e);const i=this.getActualSizeByEnv(t);if(!i)return void this.setTopPosition(e);const o=i.height,n=parseFloat(o),s=this.containerElement.getRootNode(),l=this._getElementAtTheTopOfTheViewport(s);if(l){const t=this._findFloatingElement(l);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const i=n+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=i+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const a=n+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=a+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView||t.parentWindow)/2,i=t.querySelector('[cl-connector-root-element="DETACHED"]'),o=t.querySelector('[cl-connector-root-element="CONTENT_LOCKER"]');i&&(i.style.visibility="hidden"),o&&(o.style.visibility="hidden");const n=t.elementFromPoint(e,0);return i&&(i.style.visibility="visible"),o&&(o.style.visibility="visible"),n!==t.body?n:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,i=null;for(;e;){const t=e.ownerDocument;if(e===t.body||e===t.documentElement)break;const o=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===o.position){i=e;break}e=e.parentElement}return i}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let i=e.top;const o=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let n;for(;n=o.nextNode();){let o=0,s=n;for(;s!==t&&o<10;)s=s.parentElement,o++;if(o>=10)continue;const l=getComputedStyle(n);if("none"===l.display||"hidden"===l.visibility||0===parseFloat(l.opacity))continue;const a=n.getBoundingClientRect();a.right>e.left+.1*e.width&&a.left<e.right-.1*e.width&&(a.height>0&&a.width>0&&a.top<i&&a.top>e.top-150&&(i=a.top))}return Math.max(0,e.top-i)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,i){this.containerElement=e,this.documentElement=t,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:o}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(o)}),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,i;null==t||t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(i=this.environmentUpdateListener)||void 0===i||i.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),o=this.isMobileEnv()?i.mobile:i.desktop,n=this.isBottomPosition(o)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${n} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){var e;return`\n <div class="cl-floating-bar">\n <style>\n .cl-floating-bar {\n width: 100%;\n position: ${null!==(e=t.displayPosition)&&void 0!==e?e:"fixed"};\n z-index: ${t.zIndex};\n }\n\n ${t.disabled?this.getDisabledWidgetStyles(FloatingBarLayout.floatingBarSelector):""}\n\n .cl-floating-bar-inner-content {\n position: relative;\n max-width: 100vw;\n z-index: 1;\n }\n\n .cl-floating-bar-close-icon {\n position: absolute;\n cursor: pointer;\n z-index: 99;\n }\n\n ${this.getOtherStyles()}\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-floating-bar-inner-content">\n <div class="cl-floating-bar-close-icon"></div>\n <div class="cl-floating-bar-content"></div>\n </div>\n </div>\n `}playEntryAnimation(t){if(!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations){const e=t?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBarElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAndDestroyAnimations(){return"\n@keyframes slideInTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n \n@keyframes slideInBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n "}}FloatingBarLayout.floatingBarSelector=".cl-floating-bar",FloatingBarLayout.floatingBarContentSelector=".cl-floating-bar-content",FloatingBarLayout.floatingBarCloseIconSelector=".cl-floating-bar-close-icon";export default FloatingBarLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import{WidgetType}from"@claspo/common/WidgetType";class FloatingBoxLayout extends LayoutWithCloseIcon{constructor(t,e,o,i,n){super(t,e,o,i,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.floatingBoxRootElement=document.createElement("div"),this.floatingBoxRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBoxElement=this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxSelector),this.floatingBoxElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BOX),this.params.formVariantId&&this.floatingBoxElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.floatingBoxElement.querySelector(FloatingBoxLayout.floatingBoxCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.floatingBoxElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}adjustBrandingPosition(){this.brandingElement.style.bottom="-30px",this.brandingElement.style.right="0"}clearPosition(){const t=Array.from(this.floatingBoxElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBoxElement.style.getPropertyValue(t)]);this.floatingBoxElement.removeAttribute("style"),t.forEach(([t,e])=>{this.floatingBoxElement.style.setProperty(t,e)})}getMinVerticalOffset(){return this.params.branded?32:0}getVerticalOffset(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalOffset:e.verticalOffset,i=this.getMinVerticalOffset();return parseFloat(o)<i?`${i}px`:o}setPosition(t){this.clearPosition();const e=this.getDocumentModel().shared.floatingBox,o=this.getActualSizeByEnv(t);let i=t?e.mobile.horizontalOffset:e.horizontalOffset;const n=t?e.mobile.verticalPosition:e.verticalPosition,s={horizontalPosition:t?e.mobile.horizontalPosition:e.horizontalPosition,verticalPosition:n,horizontalOffset:i,verticalOffset:this.getVerticalOffset(t),actualSizeByEnv:o};this.params.widgetType===WidgetType.TEASER?(this.setTeaserPosition(s),this.floatingBoxElement.style.cursor="pointer"):this.setRegularPosition(s)}setTeaserPosition(t){const{horizontalPosition:e,verticalPosition:o,actualSizeByEnv:i}=t;let n=t.horizontalOffset;if(o===WidgetVerticalPosition.CENTER&&e===WidgetHorizontalPosition.RIGHT&&i&&(n=`${parseFloat(i.height)+parseFloat(n)}px`),this.setHorizontalPosition(Object.assign(Object.assign({},t),{horizontalOffset:n})),o===WidgetVerticalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),o=this.getContainerHeight(),n=e===WidgetHorizontalPosition.LEFT?t/2:-t/2;this.floatingBoxElement.style.top=`${o/2+n}px`,this.floatingBoxElement.style.transform=FloatingBoxLayout.verticalCenterPositionRotationCss,this.floatingBoxElement.style.transformOrigin=e===WidgetHorizontalPosition.LEFT?"left top":"right top"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setRegularPosition(t){const{verticalPosition:e,actualSizeByEnv:o}=t;if(this.setHorizontalPosition(t),e===WidgetVerticalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.height),e=this.getContainerHeight();this.floatingBoxElement.style.top=e/2-t/2+"px"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setVerticalPositionFallback(){this.floatingBoxElement.style.bottom="20px"}setVerticalPositionNearScreenEdge(t){const{verticalPosition:e,verticalOffset:o}=t;this.floatingBoxElement.style[e.toLowerCase()]=o}getContainerHeight(){return"BODY"===this.containerElement.tagName?(this.containerElement.ownerDocument.defaultView||this.containerElement.ownerDocument.parentWindow).innerHeight:this.containerElement.clientHeight}setHorizontalPosition(t){const{horizontalPosition:e,horizontalOffset:o,actualSizeByEnv:i}=t;if(e===WidgetHorizontalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),e=this.containerElement.getBoundingClientRect().width;this.floatingBoxElement.style.left=e/2-t/2+"px"}else this.floatingBoxElement.style.left="20px";else this.floatingBoxElement.style[e.toLowerCase()]=o}migrateDocumentModel(t){return t=this.migrateCloseIconParams(t),t=this.migrateMobilePosition(t)}migrateMobilePosition(t){var e;if(null===(e=t.shared.floatingBox)||void 0===e?void 0:e.mobile)return t;const o={verticalPosition:WidgetVerticalPosition.BOTTOM,horizontalPosition:WidgetHorizontalPosition.LEFT,verticalOffset:this.getMinVerticalOffset(),horizontalOffset:"0px"};return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{floatingBox:Object.assign(Object.assign({},t.shared.floatingBox),{mobile:Object.assign({},o)})})})}migrateCloseIconParams(t){if(t.shared.closeIcon)return t;const e=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{closeIcon:Object.assign(Object.assign({},e),{desktop:Object.assign(Object.assign({},e.desktop),{color:"rgb(0, 0, 0)"}),mobile:Object.assign(Object.assign({},e.mobile),{color:"rgb(0, 0, 0)"})})})})}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,o){return this.documentElement=t,this.containerElement=e,this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector).appendChild(t),e.appendChild(this.floatingBoxElement),this.setConnectedElement(this.floatingBoxElement),this.floatingBoxElement.style.visibility="hidden",o.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{setTimeout(()=>{const t=this.isMobileEnv();this.setPosition(t),this.showFloatingBox(t)})}),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel());const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv),this.updateScrollbar(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBoxElement}disconnect(t){super.disconnect(t);const e=()=>{var e,o;null==t||t(),this.floatingBoxElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(o=this.environmentUpdateListener)||void 0===o||o.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.params.disableLayoutAnimations)return void e();const o=this.getEntryAnimationName(this.isMobileEnv());this.floatingBoxElement.style.animation=`${o} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}showFloatingBox(t){if(!this.widgetIsShown&&(this.widgetIsShown=!0,this.floatingBoxElement.style.visibility="visible",!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations)){const e=this.getEntryAnimationName(t);this.floatingBoxElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBoxElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAnimationName(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalPosition:e.verticalPosition,i=t?e.mobile.horizontalPosition:e.horizontalPosition,n=this.getActualSizeByEnv(t);return o===WidgetVerticalPosition.CENTER&&n&&this.containerElement?i===WidgetHorizontalPosition.LEFT?this.params.widgetType===WidgetType.TEASER?"slideInLeftTeaser":"slideInLeftRegular":this.params.widgetType===WidgetType.TEASER?"slideInRightTeaser":"slideInRightRegular":o===WidgetVerticalPosition.TOP?"slideInTop":"slideInBottom"}updateScrollbar(t){if(this.params.disableScrollbarCalculation)return;const e=this.getViewContentContainer();if(!e)return;const o=this.getActualSizeByEnv(t);if(!o)return;const i=parseFloat(this.closeIconElement.style.top),n=this.getVerticalOffset(t),s=parseFloat(n),a=this.getContainerElementHeight()-(i>0?0:Math.abs(i))-s;a>parseFloat(o.height)||(e.style.overflowY="auto",e.style.overflowX="hidden",e.style.maxHeight=`${a}px`,this.changeViewAlignToTop())}_getTemplate(t){var e;return`\n<div class="cl-floating-box">\n <style>\n ${t.disabled?this.getDisabledWidgetStyles(FloatingBoxLayout.floatingBoxSelector):""}\n .cl-floating-box {\n position: ${null!==(e=t.displayPosition)&&void 0!==e?e:"fixed"};\n z-index: ${t.zIndex};\n }\n .cl-floating-box-inner-content {\n position: relative;\n max-width: 100vw;\n z-index: 1;\n }\n\n .cl-floating-box-close-icon {\n position: absolute;\n cursor: pointer;\n z-index: 99;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-floating-box-inner-content">\n <div class="cl-floating-box-close-icon"></div>\n <div class="cl-floating-box-content"></div>\n </div>\n</div>\n`}getEntryAndDestroyAnimations(){return`\n@keyframes slideInTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n} \n \n@keyframes slideInBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideInLeftTeaser {\n 0% {\n opacity: 0;\n transform: translateX(-100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n}\n\n@keyframes slideInRightTeaser {\n 0% {\n opacity: 0;\n transform: translateX(100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n}\n\n@keyframes slideInLeftRegular {\n 0% {\n opacity: 0;\n transform: translateX(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slideInRightRegular {\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n `}}FloatingBoxLayout.floatingBoxSelector=".cl-floating-box",FloatingBoxLayout.floatingBoxContentSelector=".cl-floating-box-content",FloatingBoxLayout.floatingBoxCloseIconSelector=".cl-floating-box-close-icon",FloatingBoxLayout.verticalCenterPositionRotationCss="rotate(-90deg)";export default FloatingBoxLayout;
|
|
1
|
+
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import{WidgetType}from"@claspo/common/WidgetType";class FloatingBoxLayout extends LayoutWithCloseIcon{constructor(t,e,o,i,n){super(t,e,o,i,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.floatingBoxRootElement=document.createElement("div"),this.floatingBoxRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBoxElement=this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxSelector),this.floatingBoxElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BOX),this.params.formVariantId&&this.floatingBoxElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.floatingBoxElement.querySelector(FloatingBoxLayout.floatingBoxCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.floatingBoxElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}adjustBrandingPosition(){this.brandingElement.style.bottom="-30px",this.brandingElement.style.right="0"}clearPosition(){const t=Array.from(this.floatingBoxElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBoxElement.style.getPropertyValue(t)]);this.floatingBoxElement.removeAttribute("style"),t.forEach(([t,e])=>{this.floatingBoxElement.style.setProperty(t,e)})}getMinVerticalOffset(){return this.params.branded?32:0}getVerticalOffset(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalOffset:e.verticalOffset,i=this.getMinVerticalOffset();return parseFloat(o)<i?`${i}px`:o}setPosition(t){this.clearPosition();const e=this.getDocumentModel().shared.floatingBox,o=this.getActualSizeByEnv(t);let i=t?e.mobile.horizontalOffset:e.horizontalOffset;const n=t?e.mobile.verticalPosition:e.verticalPosition,s={horizontalPosition:t?e.mobile.horizontalPosition:e.horizontalPosition,verticalPosition:n,horizontalOffset:i,verticalOffset:this.getVerticalOffset(t),actualSizeByEnv:o};this.params.widgetType===WidgetType.TEASER?(this.setTeaserPosition(s),this.floatingBoxElement.style.cursor="pointer"):this.setRegularPosition(s)}setTeaserPosition(t){const{horizontalPosition:e,verticalPosition:o,actualSizeByEnv:i}=t;let n=t.horizontalOffset;if(o===WidgetVerticalPosition.CENTER&&e===WidgetHorizontalPosition.RIGHT&&i&&(n=`${parseFloat(i.height)+parseFloat(n)}px`),this.setHorizontalPosition(Object.assign(Object.assign({},t),{horizontalOffset:n})),o===WidgetVerticalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),o=this.getContainerHeight(),n=e===WidgetHorizontalPosition.LEFT?t/2:-t/2;this.floatingBoxElement.style.top=`${o/2+n}px`,this.floatingBoxElement.style.transform=FloatingBoxLayout.verticalCenterPositionRotationCss,this.floatingBoxElement.style.transformOrigin=e===WidgetHorizontalPosition.LEFT?"left top":"right top"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setRegularPosition(t){const{verticalPosition:e,actualSizeByEnv:o}=t;if(this.setHorizontalPosition(t),e===WidgetVerticalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.height),e=this.getContainerHeight();this.floatingBoxElement.style.top=e/2-t/2+"px"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setVerticalPositionFallback(){this.floatingBoxElement.style.bottom="20px"}setVerticalPositionNearScreenEdge(t){const{verticalPosition:e,verticalOffset:o}=t;this.floatingBoxElement.style[e.toLowerCase()]=o}getContainerHeight(){return"BODY"===this.containerElement.tagName?(this.containerElement.ownerDocument.defaultView||this.containerElement.ownerDocument.parentWindow).innerHeight:this.containerElement.clientHeight}setHorizontalPosition(t){const{horizontalPosition:e,horizontalOffset:o,actualSizeByEnv:i}=t;if(e===WidgetHorizontalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),e=this.containerElement.getBoundingClientRect().width;this.floatingBoxElement.style.left=e/2-t/2+"px"}else this.floatingBoxElement.style.left="20px";else this.floatingBoxElement.style[e.toLowerCase()]=o}migrateDocumentModel(t){return t=this.migrateCloseIconParams(t),t=this.migrateMobilePosition(t)}migrateMobilePosition(t){var e;if(null===(e=t.shared.floatingBox)||void 0===e?void 0:e.mobile)return t;const o={verticalPosition:WidgetVerticalPosition.BOTTOM,horizontalPosition:WidgetHorizontalPosition.LEFT,verticalOffset:this.getMinVerticalOffset(),horizontalOffset:"0px"};return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{floatingBox:Object.assign(Object.assign({},t.shared.floatingBox),{mobile:Object.assign({},o)})})})}migrateCloseIconParams(t){if(t.shared.closeIcon)return t;const e=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{closeIcon:Object.assign(Object.assign({},e),{desktop:Object.assign(Object.assign({},e.desktop),{color:"rgb(0, 0, 0)"}),mobile:Object.assign(Object.assign({},e.mobile),{color:"rgb(0, 0, 0)"})})})})}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,o){return this.documentElement=t,this.containerElement=e,this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector).appendChild(t),e.appendChild(this.floatingBoxElement),this.setConnectedElement(this.floatingBoxElement),this.floatingBoxElement.style.visibility="hidden",o.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{setTimeout(()=>{const t=this.isMobileEnv();this.setPosition(t),this.showFloatingBox(t)})}),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel());const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv),this.updateScrollbar(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBoxElement}disconnect(t){super.disconnect(t);const e=()=>{var e,o;null==t||t(),this.floatingBoxElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(o=this.environmentUpdateListener)||void 0===o||o.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.params.disableLayoutAnimations)return void e();const o=this.getEntryAnimationName(this.isMobileEnv());this.floatingBoxElement.style.animation=`${o} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}showFloatingBox(t){if(!this.widgetIsShown&&(this.widgetIsShown=!0,this.floatingBoxElement.style.visibility="visible",!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations)){const e=this.getEntryAnimationName(t);this.floatingBoxElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBoxElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAnimationName(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalPosition:e.verticalPosition,i=t?e.mobile.horizontalPosition:e.horizontalPosition,n=this.getActualSizeByEnv(t);return o===WidgetVerticalPosition.CENTER&&n&&this.containerElement?i===WidgetHorizontalPosition.LEFT?this.params.widgetType===WidgetType.TEASER?"slideInLeftTeaser":"slideInLeftRegular":this.params.widgetType===WidgetType.TEASER?"slideInRightTeaser":"slideInRightRegular":o===WidgetVerticalPosition.TOP?"slideInTop":"slideInBottom"}updateScrollbar(t){if(this.params.disableScrollbarCalculation)return;const e=this.getViewContentContainer();if(!e)return;const o=this.getActualSizeByEnv(t);if(!o)return;const i=parseFloat(this.closeIconElement.style.top),n=this.getVerticalOffset(t),s=parseFloat(n),a=this.getContainerElementHeight()-(i>0?0:Math.abs(i))-s;a>parseFloat(o.height)||(e.style.overflowY="auto",e.style.overflowX="hidden",e.style.maxHeight=`${a}px`,this.changeViewAlignToTop())}_getTemplate(t){var e;return`\n<div class="cl-floating-box">\n <style>\n ${t.disabled?this.getDisabledWidgetStyles(FloatingBoxLayout.floatingBoxSelector):""}\n .cl-floating-box {\n position: ${null!==(e=t.displayPosition)&&void 0!==e?e:"fixed"};\n z-index: ${t.zIndex};\n }\n .cl-floating-box-inner-content {\n position: relative;\n max-width: 100vw;\n z-index: 1;\n }\n\n .cl-floating-box-close-icon {\n position: absolute;\n cursor: pointer;\n z-index: 99;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-floating-box-inner-content">\n <div class="cl-floating-box-close-icon"></div>\n <div class="cl-floating-box-content"></div>\n </div>\n</div>\n`}getEntryAndDestroyAnimations(){return`\n@keyframes slideInTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n} \n \n@keyframes slideInBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideInLeftTeaser {\n 0% {\n opacity: 0;\n transform: translateX(-100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n}\n\n@keyframes slideInRightTeaser {\n 0% {\n opacity: 0;\n transform: translateX(100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n}\n\n@keyframes slideInLeftRegular {\n 0% {\n opacity: 0;\n transform: translateX(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slideInRightRegular {\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n `}}FloatingBoxLayout.floatingBoxSelector=".cl-floating-box",FloatingBoxLayout.floatingBoxContentSelector=".cl-floating-box-content",FloatingBoxLayout.floatingBoxCloseIconSelector=".cl-floating-box-close-icon",FloatingBoxLayout.verticalCenterPositionRotationCss="rotate(-90deg)";export default FloatingBoxLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import BaseLayout from"../BaseLayout";import{LoopAnimationStylesService}from"@claspo/renderer/renderer/style/LoopAnimationStylesService";import{
|
|
1
|
+
import BaseLayout from"../BaseLayout";import{LoopAnimationStylesService}from"@claspo/renderer/renderer/style/LoopAnimationStylesService";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";class LauncherLayout extends BaseLayout{constructor(e,t,n,i,o){super(e,t,n,i,o),this.launcherRootElement=document.createElement("div"),this.launcherRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.launcherElement=this.launcherRootElement.querySelector(LauncherLayout.launcherSelector),this.launcherElement.setAttribute("cl-connector-root-element",LayoutType.LAUNCHER),this.params.formVariantId&&this.launcherElement.setAttribute("cl-widget-id",this.params.formVariantId),this.defaultStylesElement=this.launcherElement.querySelector(LauncherLayout.launcherStylesSelector).cloneNode(!0),this.addWidgetContentClickEventListener(this.launcherRootElement.querySelector(LauncherLayout.launcherContentSelector))}connect(e,t,n){return this.launcherRootElement.querySelector(LauncherLayout.launcherContentSelector).appendChild(e),t.appendChild(this.launcherElement),this.setEntryAnimationAndPosition(this.isMobileEnv()),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(e=>{this.setEntryAnimationAndPosition(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setEntryAnimationAndPosition(e.isMobileEnv)},5)),this.setConnectedElement(this.launcherElement),this.launcherElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.launcherElement.style.visibility="visible"}),this.launcherElement}disconnect(e){var t;null==e||e(),this.launcherElement.remove(),null===(t=this.environmentUpdateListener)||void 0===t||t.off()}setEntryAnimationAndPosition(e){const t=this.getDocumentModel().shared.launcher;this.setLoopAnimation(t.loopAnimation);const n=e?t.mobile:t.desktop,i=n.verticalPosition.toLowerCase(),o=n.horizontalPosition.toLowerCase();if(this.params.disableLayoutAnimations||!["SLIDE_TO_TOP","SLIDE_TO_BOTTOM","SLIDE_TO_LEFT","SLIDE_TO_RIGHT"].includes(t.entryAnimation.type))return this.launcherElement.style[o]=n.horizontalOffset,this.launcherElement.style[i]=n.verticalOffset,void(this.launcherElement.style.opacity="1");let l,r,s,a,c;"SLIDE_TO_TOP"===t.entryAnimation.type||"SLIDE_TO_BOTTOM"===t.entryAnimation.type?(l=o,r=n.horizontalOffset,s=i,a=n.verticalOffset,c="SLIDE_TO_TOP"===t.entryAnimation.type?n.verticalPosition===WidgetVerticalPosition.TOP?20:-20:n.verticalPosition===WidgetVerticalPosition.TOP?-20:20):(l=i,r=n.verticalOffset,s=o,a=n.horizontalOffset,c="SLIDE_TO_LEFT"===t.entryAnimation.type?n.horizontalPosition===WidgetHorizontalPosition.LEFT?20:-20:n.horizontalPosition===WidgetHorizontalPosition.LEFT?-20:20),this.launcherElement.style[l]=r,this.launcherElement.style[s]=`${parseFloat(a)+c}px`,setTimeout(()=>{this.launcherElement.style[s]=a,this.launcherElement.style.opacity="1"},50)}clearLoopAnimations(){const e=[];this.launcherElement.classList.forEach(t=>{t.startsWith(LoopAnimationStylesService.animationClassPrefix)&&e.push(t)}),this.launcherElement.classList.remove(...e);const t=this.launcherElement.querySelector(LauncherLayout.launcherStylesSelector);insertHtmlIntoElement({element:t,html:this.defaultStylesElement.innerHTML});const n=Array.from(this.launcherElement.style).filter(e=>e.startsWith("--")).map(e=>[e,this.launcherElement.style.getPropertyValue(e)]);this.launcherElement.removeAttribute("style"),n.forEach(([e,t])=>{this.launcherElement.style.setProperty(e,t)})}setLoopAnimation(e){this.clearLoopAnimations(),this.params.disableLayoutAnimations||(this._applyLoopAnimationParams(e),this.launcherElement.classList.add(LoopAnimationStylesService.animationClassPrefix+e.type))}_applyLoopAnimationParams(e){e.params&&Object.keys(e.params).forEach(t=>{const n=e.params[t];this.launcherElement.style.setProperty(`--cl-${e.type}-${t}`,`${n||LoopAnimationStylesService.getDefaultParamValueByAnimationType(e.type,t)}`)})}_getTemplate(e){var t,n;const i=e.documentModel.shared.launcher;return`\n <div class="cl-launcher">\n <style class="cl-launcher-styles">\n\n ${LoopAnimationStylesService.constructAnimationStylesByTypes([null===(t=i.loopAnimation)||void 0===t?void 0:t.type])}\n\n .cl-launcher {\n ${this.params.disableLayoutAnimations?"":"transition: 0.3s;"}\n cursor: pointer;\n opacity: 0;\n position: ${null!==(n=e.displayPosition)&&void 0!==n?n:"fixed"};\n z-index: ${e.zIndex};\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(LauncherLayout.launcherSelector):""}\n\n .cl-launcher-inner-content {\n position: relative;\n }\n </style>\n\n <div class="cl-launcher-inner-content">\n <div class="cl-launcher-content"></div>\n </div>\n </div>\n`}}LauncherLayout.launcherSelector=".cl-launcher",LauncherLayout.launcherContentSelector=".cl-launcher-content",LauncherLayout.launcherStylesSelector=".cl-launcher-styles";export default LauncherLayout;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@claspo/document-connector",
|
|
3
|
-
"version": "16.2.
|
|
3
|
+
"version": "16.2.4",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"test": "jest --no-cache --coverage",
|
|
6
6
|
"build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"node": ">=18.16.0"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@claspo/common": "7.0.
|
|
18
|
-
"@claspo/renderer": "18.0.
|
|
17
|
+
"@claspo/common": "7.0.7",
|
|
18
|
+
"@claspo/renderer": "18.0.9"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@babel/core": "^7.28.5",
|