npm - @claspo/document-connector - Versions diffs - 16.0.6 → 16.0.7-tbfg7 - Mend

@claspo/document-connector 16.0.6 → 16.0.7-tbfg7

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.

Files changed (10) hide show

package/StaticDocumentConnector.js +1 -1
package/layouts/BaseLayout.d.ts +1 -0
package/layouts/BaseLayout.js +1 -1
package/layouts/GoogleFontsLoader.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/package.json +2 -2

package/StaticDocumentConnector.js CHANGED Viewed

	@@ -1 +1 @@
1	- import BaseDocumentConnector from"./BaseDocumentConnector";import DocumentConnectorEventType from"./DocumentConnectorEventType";import{getZIndexByLayoutType}from"./layouts/getZindex";import LayoutFactory from"./layouts/LayoutFactory";import StaticEntryModule from"@claspo/renderer/StaticEntryModule";import WcResolver from"@claspo/renderer/wc-renderer/WcResolver";import{RenderMode}from"@claspo/common/RenderMode";import{WcRegister}from"@claspo/renderer/wc-renderer/WcRegister";import GoogleFontsLoader from"./layouts/GoogleFontsLoader";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.googleFontsLoader=null;const{documentModel:o,translations:t,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r,e.productKeyPrefix),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister,e.productKeyPrefix);const i=new StaticEntryModule(o,this.componentResolver,this.componentRegister,e,t,s,n);this.setEntryModule(i)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader;const o=e.getRootNode();if(!this.params.disableGoogleFonts){const e=GoogleFontsLoader.getUsedGoogleFonts(this.params.documentModel);await this.googleFontsLoader.load(e,o)}return this._initializeRenderer(e,o)}disconnect(){var e;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)\|\|void 0===e\|\|e.cleanup()}destroy(){this.disconnect()}on(e,o){return super.on(e,o)}async _initializeRenderer(e,o){var t,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(o);i.style.display="flex";const{layoutFactoryClass:a=LayoutFactory,layoutType:c,documentModel:d}=this.params,l=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(t=null==d?void 0:d.shared)\|\|void 0===t?void 0:t.zIndex)&&void 0!==s?s:getZIndexByLayoutType(c)}),m=a.create(Object.assign(Object.assign({},l),{layoutType:this.params.layoutType,widgetType:this.params.widgetType,viewIndex:0,renderMode:this.entryModule.renderMode}),this,this.entryModule.viewRouter,this.entryModule.compositionRoot.services.documentModel,this.entryModule.compositionRoot.services.resizeListener);return this.controllers.push(m),super.addPropsRequestEventListener(i),this.params.formVariantId?i.classList.add("cl-widget-"+this.params.formVariantId):i.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,o)=>{this.emit(o,e),o===DocumentConnectorEventType.CLOSE_WIDGET&&e&&"function"==typeof e&&e()}),m.connect(i,e,this.entryModule),(null===(r=null===(n=d.shared)\|\|void 0===n?void 0:n.theme)\|\|void 0===r?void 0:r.schema)&&ThemeCssVars.override(d.shared.theme.schema,m.getConnectedElement()),m.getConnectedElement()}}
1	+ import BaseDocumentConnector from"./BaseDocumentConnector";import DocumentConnectorEventType from"./DocumentConnectorEventType";import{getZIndexByLayoutType}from"./layouts/getZindex";import LayoutFactory from"./layouts/LayoutFactory";import StaticEntryModule from"@claspo/renderer/StaticEntryModule";import WcResolver from"@claspo/renderer/wc-renderer/WcResolver";import{RenderMode}from"@claspo/common/RenderMode";import{WcRegister}from"@claspo/renderer/wc-renderer/WcRegister";import GoogleFontsLoader from"./layouts/GoogleFontsLoader";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.componentResolver=null,this.googleFontsLoader=null;const{documentModel:o,translations:t,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r,e.productKeyPrefix),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister,e.productKeyPrefix);const i=new StaticEntryModule(o,this.componentResolver,this.componentRegister,e,t,s,n);this.setEntryModule(i)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader;const o=e.getRootNode();if(!this.params.disableGoogleFonts){const e=GoogleFontsLoader.getUsedGoogleFonts(this.params.documentModel);await this.googleFontsLoader.load(e,o)}return this._initializeRenderer(e,o)}disconnect(){var e;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)\|\|void 0===e\|\|e.cleanup()}destroy(){this.disconnect()}on(e,o){return super.on(e,o)}async _initializeRenderer(e,o){var t,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(o);i.style.display="flex";const{layoutFactoryClass:c=LayoutFactory,layoutType:a,documentModel:d}=this.params,l=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(t=null==d?void 0:d.shared)\|\|void 0===t?void 0:t.zIndex)&&void 0!==s?s:getZIndexByLayoutType(a)}),m=c.create(Object.assign(Object.assign({},l),{layoutType:this.params.layoutType,widgetType:this.params.widgetType,viewIndex:0,renderMode:this.entryModule.renderMode}),this,this.entryModule.viewRouter,this.entryModule.compositionRoot.services.documentModel,this.entryModule.compositionRoot.services.resizeListener);return this.controllers.push(m),super.addPropsRequestEventListener(i),this.params.formVariantId?i.classList.add("cl-widget-"+this.params.formVariantId):i.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,o)=>{this.emit(o,e),o===DocumentConnectorEventType.CLOSE_WIDGET&&e&&"function"==typeof e&&e()}),m.connect(i,e,this.entryModule),(null===(r=null===(n=d.shared)\|\|void 0===n?void 0:n.theme)\|\|void 0===r?void 0:r.schema)&&ThemeCssVars.override(d.shared.theme.schema,m.getConnectedElement()),m.getConnectedElement()}}

package/layouts/BaseLayout.d.ts CHANGED Viewed

@@ -20,6 +20,7 @@ export default class BaseLayout {
     getConnectedElement(): any;
     getDisabledWidgetStyles(containerClass: any): string;
     getBrandingStyles(): string;
+    getGameSpotlightStyles(): string;
     getViewportWidth(documentObject: any, windowObject: any): number;
     getContainerElementHeight(): any;
     getCurrentViewIndex(): any;

package/layouts/BaseLayout.js CHANGED Viewed

	@@ -1 +1 @@
1	- import DocumentConnectorEventType from"../DocumentConnectorEventType";import{RenderMode}from"@claspo/common/RenderMode";export default class BaseLayout{constructor(e,n,t,i,r){this.params=e,this.eventEmitter=n,this.viewRouter=t,this.documentModel=i,this.resizeListener=r,this.connectedElement=null}createSvgElement(e,n,t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");return i.setAttributeNS(null,"viewBox","0 0 "+e+" "+n),i.setAttributeNS(null,"width",e),i.setAttributeNS(null,"height",n),i.innerHTML=t,i}getHideIcon(){return this.createSvgElement(21,21,'<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5582 11.167C13.6018 10.9519 13.6247 10.7293 13.6247 10.5013C13.6247 8.66035 12.1323 7.16797 10.2913 7.16797C10.0634 7.16797 9.84072 7.19086 9.6256 7.23446L10.3945 8.00339C11.6932 8.05612 12.7365 9.09947 12.7892 10.3981L13.5582 11.167ZM8.1189 9.2633C7.91046 9.62829 7.79134 10.0509 7.79134 10.5013C7.79134 11.882 8.91063 13.0013 10.2913 13.0013C10.7418 13.0013 11.1644 12.8822 11.5293 12.6737L12.1346 13.279C11.6067 13.6301 10.9729 13.8346 10.2913 13.8346C8.45039 13.8346 6.95801 12.3423 6.95801 10.5013C6.95801 9.81975 7.16256 9.18597 7.51361 8.65801L8.1189 9.2633Z" fill="#2C2C2C"/>\n <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7837 13.3901C16.4728 12.7662 17.0357 12.1378 17.4361 11.6517L17.4851 11.5924C17.7606 11.2595 18.0164 10.9504 18.0164 10.4987C18.0164 10.047 17.7606 9.73786 17.4851 9.40501L17.4361 9.3457C16.832 8.61222 15.8577 7.55476 14.6386 6.67763C13.4227 5.80287 11.9277 5.08203 10.2911 5.08203C9.46902 5.08203 8.68264 5.26393 7.94942 5.55587L8.59862 6.20507C9.14557 6.02176 9.71248 5.91536 10.2911 5.91536C11.6843 5.91536 13.0094 6.53209 14.1519 7.35408C15.2911 8.17371 16.2136 9.1722 16.7929 9.8755C17.1465 10.3049 17.183 10.3791 17.183 10.4987C17.183 10.6183 17.1465 10.6925 16.7929 11.1219C16.4027 11.5957 15.8567 12.2034 15.1937 12.8001L15.7837 13.3901ZM6.30424 7.44623C5.22306 8.24755 4.34715 9.19835 3.78941 9.8755C3.43577 10.3049 3.39925 10.3791 3.39925 10.4987C3.39925 10.6183 3.43577 10.6925 3.78941 11.1219C4.36868 11.8252 5.29119 12.8237 6.43042 13.6433C7.57294 14.4653 8.89795 15.082 10.2911 15.082C11.2901 15.082 12.2539 14.765 13.1406 14.2826L13.7526 14.8946C12.7242 15.4892 11.5495 15.9154 10.2911 15.9154C8.65456 15.9154 7.1596 15.1945 5.94374 14.3198C4.72459 13.4426 3.7503 12.3852 3.14617 11.6517L3.09716 11.5924C2.82173 11.2595 2.56592 10.9504 2.56592 10.4987C2.56592 10.047 2.82172 9.73786 3.09716 9.40501L3.14617 9.3457C3.711 8.65993 4.5994 7.69096 5.70897 6.85095L6.30424 7.44623Z" fill="#2C2C2C"/>\n <path d="M4.45752 2.16602L17.7909 15.4993" stroke="#2C2C2C" stroke-width="0.833333"/>')}getClaspoIcon(){return this.createSvgElement(17,10,'<path d="M13.8946 6.59451C13.337 7.15222 12.5956 7.45921 11.807 7.45921H3.68778C3.09624 7.45921 2.54034 7.22894 2.12199 6.81068C1.70373 6.39243 1.52894 5.83644 1.52894 5.24489C1.52894 4.65345 1.70373 4.09746 2.12199 3.67911C2.54034 3.26095 3.09624 3.03058 3.68778 3.03058C4.23793 3.03058 4.75748 3.23004 5.16396 3.59453V5.36522L10.1517 2.06086L10.1518 2.06116C10.6365 1.73171 11.2081 1.5544 11.807 1.5544C12.5956 1.5544 13.337 1.8614 13.8946 2.4191C14.4524 2.97671 14.7436 3.71827 14.7436 4.50686C14.7436 5.29544 14.4524 6.0369 13.8946 6.59451ZM11.807 0.078125C10.8924 0.078125 10.0424 0.355518 9.33667 0.830762L9.33636 0.830259L5.16396 3.59443V1.8617C4.71187 1.66425 4.21276 1.5544 3.68778 1.5544C1.64956 1.5544 0 3.20678 0 5.24489C0 7.28311 1.64956 8.93549 3.68778 8.93549H11.807C14.2529 8.93549 16.2911 6.95275 16.2911 4.50686C16.2911 2.06086 14.2529 0.078125 11.807 0.078125Z" fill="#F3492C"/>')}addBrandingUTMParametersToURL(e,n){const t={utm_campaign:"Powered_by_promo",utm_medium:"referral",utm_source:n},i=new URL(e);return i.search?i.search+=`&${new URLSearchParams(t).toString()}`:i.search=`?${new URLSearchParams(t).toString()}`,i.toString()}createBrandingElement(){const e=this.getClaspoIcon(),n=this.getHideIcon();this.brandingElement=document.createElement("div"),this.brandingElement.classList.add("cl-branding");const t=document.createElement("button");t.classList.add("cl-link"),t.addEventListener("click",()=>{window.open(this.addBrandingUTMParametersToURL("https://claspo.io/",this.params.siteId),"_blank","noopener,noreferrer")});const i=document.createElement("span");i.classList.add("cl-branding-text"),i.innerText="Powered by ",t.append(i),t.append(e);const r=document.createElement("span");if(r.classList.add("cl-branding-brand"),r.innerText="Claspo",t.append(r),this.brandingElement.append(t),this.params.upgradePlanButton){const e=document.createElement("div");e.classList.add("cl-branding-upgrade-overlay");const t=document.createElement("div");t.classList.add("cl-branding-upgrade"),t.appendChild(n),this.brandingElement.append(t),this.brandingElement.append(e)}}addBrandingElementListeners(){this.brandingElement.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.BRANDING_ELEMENT_CLICKED,this.params.layoutType)})}isMobileEnv(){return this.resizeListener.isMobile()}setConnectedElement(e){this.connectedElement=e}getConnectedElement(){return this.connectedElement}getDisabledWidgetStyles(e){return`${e}:after {\n content: '';\n height: 100%;\n width: 100%;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n }`}getBrandingStyles(){return".cl-branding {\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: 20px;\n background: #FFFFFF;\n height: 21px;\n line-height: 21px !important;\n font-family: Arial, sans-serif !important;\n letter-spacing: 0.3px !important;\n font-size: 10px !important;\n font-weight: 400 !important;\n padding: 0 10px !important;\n gap: 8px;\n position: absolute;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n z-index: 1;\n }\n \n .cl-link {\n background: none !important;\n border: none !important;\n padding: 0 !important;\n margin: 0 !important;\n font: inherit !important;\n \n display: flex;\n align-items: center;\n gap: 5px;\n text-decoration: none;\n cursor: pointer;\n }\n\n .cl-branding-text {\n color: #121221;\n flex: none;\n order: 0;\n flex-grow: 0;\n font-size: 10px !important;\n font-family: Arial, sans-serif !important;\n font-weight: 400 !important;\n font-style: normal !important;\n }\n\n .cl-branding-brand{\n display: flex;\n align-items: center;\n gap: 2px;\n color: #F3492C;\n flex: none;\n order: 1;\n flex-grow: 0;\n font-size: 10px !important;\n font-family: Arial, sans-serif !important;\n font-weight: 400;\n font-style: normal !important;\n }\n\n .cl-branding-link-overlay,\n .cl-branding-upgrade-overlay {\n width: 100%;\n height: 100%;\n position: absolute;\n cursor: pointer;\n }\n\n .cl-branding-upgrade {\n display: flex;\n align-items: center;\n order: 2;\n flex-grow: 0;\n }\n\n .cl-branding:hover {\n box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.07);\n }"}getViewportWidth(e,n){return Math.max((e\|\|document).documentElement.clientWidth,(n\|\|window).innerWidth\|\|0)}getContainerElementHeight(){return"BODY"===this.containerElement.tagName?Math.max(document.documentElement.clientHeight,window.innerHeight\|\|0):this.containerElement.getBoundingClientRect().height}getCurrentViewIndex(){return this.params.renderMode===RenderMode.STATIC?this.viewRouter.getCurrentViewIndex():this.params.viewIndex}getActualSizeByEnv(e){var n,t,i;const r=this.getDocumentModel();if(!r.shared.actualSize)return null;const o=e?"mobile":"desktop";return Array.isArray(r.shared.actualSize)?null===(t=null===(n=r.shared.actualSize)\|\|void 0===n?void 0:n[this.getCurrentViewIndex()])\|\|void 0===t?void 0:t[o]:null===(i=r.shared.actualSize)\|\|void 0===i?void 0:i[o]}getViewContentContainer(){var e;return null===(e=this.documentElement.querySelector('[cl-type="VIEW"]'))\|\|void 0===e?void 0:e.shadowRoot.querySelector("[cl-content-container]")}changeViewAlignToTop(){const e=this.documentElement.querySelector('[cl-type="VIEW"]');"row"===getComputedStyle(e).flexDirection?e.style.alignItems="flex-start":e.style.justifyContent="flex-start"}addWidgetContentClickEventListener(e){e.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.WIDGET_CONTENT_CLICKED,e)})}getDocumentModel(){return this.documentModel.getModel()}}
1	+ import DocumentConnectorEventType from"../DocumentConnectorEventType";import{RenderMode}from"@claspo/common/RenderMode";export default class BaseLayout{constructor(e,n,t,r,i){this.params=e,this.eventEmitter=n,this.viewRouter=t,this.documentModel=r,this.resizeListener=i,this.connectedElement=null}createSvgElement(e,n,t){const r=document.createElementNS("http://www.w3.org/2000/svg","svg");return r.setAttributeNS(null,"viewBox","0 0 "+e+" "+n),r.setAttributeNS(null,"width",e),r.setAttributeNS(null,"height",n),r.innerHTML=t,r}getHideIcon(){return this.createSvgElement(21,21,'<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5582 11.167C13.6018 10.9519 13.6247 10.7293 13.6247 10.5013C13.6247 8.66035 12.1323 7.16797 10.2913 7.16797C10.0634 7.16797 9.84072 7.19086 9.6256 7.23446L10.3945 8.00339C11.6932 8.05612 12.7365 9.09947 12.7892 10.3981L13.5582 11.167ZM8.1189 9.2633C7.91046 9.62829 7.79134 10.0509 7.79134 10.5013C7.79134 11.882 8.91063 13.0013 10.2913 13.0013C10.7418 13.0013 11.1644 12.8822 11.5293 12.6737L12.1346 13.279C11.6067 13.6301 10.9729 13.8346 10.2913 13.8346C8.45039 13.8346 6.95801 12.3423 6.95801 10.5013C6.95801 9.81975 7.16256 9.18597 7.51361 8.65801L8.1189 9.2633Z" fill="#2C2C2C"/>\n <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7837 13.3901C16.4728 12.7662 17.0357 12.1378 17.4361 11.6517L17.4851 11.5924C17.7606 11.2595 18.0164 10.9504 18.0164 10.4987C18.0164 10.047 17.7606 9.73786 17.4851 9.40501L17.4361 9.3457C16.832 8.61222 15.8577 7.55476 14.6386 6.67763C13.4227 5.80287 11.9277 5.08203 10.2911 5.08203C9.46902 5.08203 8.68264 5.26393 7.94942 5.55587L8.59862 6.20507C9.14557 6.02176 9.71248 5.91536 10.2911 5.91536C11.6843 5.91536 13.0094 6.53209 14.1519 7.35408C15.2911 8.17371 16.2136 9.1722 16.7929 9.8755C17.1465 10.3049 17.183 10.3791 17.183 10.4987C17.183 10.6183 17.1465 10.6925 16.7929 11.1219C16.4027 11.5957 15.8567 12.2034 15.1937 12.8001L15.7837 13.3901ZM6.30424 7.44623C5.22306 8.24755 4.34715 9.19835 3.78941 9.8755C3.43577 10.3049 3.39925 10.3791 3.39925 10.4987C3.39925 10.6183 3.43577 10.6925 3.78941 11.1219C4.36868 11.8252 5.29119 12.8237 6.43042 13.6433C7.57294 14.4653 8.89795 15.082 10.2911 15.082C11.2901 15.082 12.2539 14.765 13.1406 14.2826L13.7526 14.8946C12.7242 15.4892 11.5495 15.9154 10.2911 15.9154C8.65456 15.9154 7.1596 15.1945 5.94374 14.3198C4.72459 13.4426 3.7503 12.3852 3.14617 11.6517L3.09716 11.5924C2.82173 11.2595 2.56592 10.9504 2.56592 10.4987C2.56592 10.047 2.82172 9.73786 3.09716 9.40501L3.14617 9.3457C3.711 8.65993 4.5994 7.69096 5.70897 6.85095L6.30424 7.44623Z" fill="#2C2C2C"/>\n <path d="M4.45752 2.16602L17.7909 15.4993" stroke="#2C2C2C" stroke-width="0.833333"/>')}getClaspoIcon(){return this.createSvgElement(17,10,'<path d="M13.8946 6.59451C13.337 7.15222 12.5956 7.45921 11.807 7.45921H3.68778C3.09624 7.45921 2.54034 7.22894 2.12199 6.81068C1.70373 6.39243 1.52894 5.83644 1.52894 5.24489C1.52894 4.65345 1.70373 4.09746 2.12199 3.67911C2.54034 3.26095 3.09624 3.03058 3.68778 3.03058C4.23793 3.03058 4.75748 3.23004 5.16396 3.59453V5.36522L10.1517 2.06086L10.1518 2.06116C10.6365 1.73171 11.2081 1.5544 11.807 1.5544C12.5956 1.5544 13.337 1.8614 13.8946 2.4191C14.4524 2.97671 14.7436 3.71827 14.7436 4.50686C14.7436 5.29544 14.4524 6.0369 13.8946 6.59451ZM11.807 0.078125C10.8924 0.078125 10.0424 0.355518 9.33667 0.830762L9.33636 0.830259L5.16396 3.59443V1.8617C4.71187 1.66425 4.21276 1.5544 3.68778 1.5544C1.64956 1.5544 0 3.20678 0 5.24489C0 7.28311 1.64956 8.93549 3.68778 8.93549H11.807C14.2529 8.93549 16.2911 6.95275 16.2911 4.50686C16.2911 2.06086 14.2529 0.078125 11.807 0.078125Z" fill="#F3492C"/>')}addBrandingUTMParametersToURL(e,n){const t={utm_campaign:"Powered_by_promo",utm_medium:"referral",utm_source:n},r=new URL(e);return r.search?r.search+=`&${new URLSearchParams(t).toString()}`:r.search=`?${new URLSearchParams(t).toString()}`,r.toString()}createBrandingElement(){const e=this.getClaspoIcon(),n=this.getHideIcon();this.brandingElement=document.createElement("div"),this.brandingElement.classList.add("cl-branding");const t=document.createElement("button");t.classList.add("cl-link"),t.addEventListener("click",()=>{window.open(this.addBrandingUTMParametersToURL("https://claspo.io/",this.params.siteId),"_blank","noopener,noreferrer")});const r=document.createElement("span");r.classList.add("cl-branding-text"),r.innerText="Powered by ",t.append(r),t.append(e);const i=document.createElement("span");if(i.classList.add("cl-branding-brand"),i.innerText="Claspo",t.append(i),this.brandingElement.append(t),this.params.upgradePlanButton){const e=document.createElement("div");e.classList.add("cl-branding-upgrade-overlay");const t=document.createElement("div");t.classList.add("cl-branding-upgrade"),t.appendChild(n),this.brandingElement.append(t),this.brandingElement.append(e)}}addBrandingElementListeners(){this.brandingElement.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.BRANDING_ELEMENT_CLICKED,this.params.layoutType)})}isMobileEnv(){return this.resizeListener.isMobile()}setConnectedElement(e){this.connectedElement=e}getConnectedElement(){return this.connectedElement}getDisabledWidgetStyles(e){return`${e}:after {\n content: '';\n height: 100%;\n width: 100%;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 1;\n }`}getBrandingStyles(){return".cl-branding {\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: 20px;\n background: #FFFFFF;\n height: 21px;\n line-height: 21px !important;\n font-family: Arial, sans-serif !important;\n letter-spacing: 0.3px !important;\n font-size: 10px !important;\n font-weight: 400 !important;\n padding: 0 10px !important;\n gap: 8px;\n position: absolute;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n z-index: 1;\n }\n \n .cl-link {\n background: none !important;\n border: none !important;\n padding: 0 !important;\n margin: 0 !important;\n font: inherit !important;\n \n display: flex;\n align-items: center;\n gap: 5px;\n text-decoration: none;\n cursor: pointer;\n }\n\n .cl-branding-text {\n color: #121221;\n flex: none;\n order: 0;\n flex-grow: 0;\n font-size: 10px !important;\n font-family: Arial, sans-serif !important;\n font-weight: 400 !important;\n font-style: normal !important;\n }\n\n .cl-branding-brand{\n display: flex;\n align-items: center;\n gap: 2px;\n color: #F3492C;\n flex: none;\n order: 1;\n flex-grow: 0;\n font-size: 10px !important;\n font-family: Arial, sans-serif !important;\n font-weight: 400;\n font-style: normal !important;\n }\n\n .cl-branding-link-overlay,\n .cl-branding-upgrade-overlay {\n width: 100%;\n height: 100%;\n position: absolute;\n cursor: pointer;\n }\n\n .cl-branding-upgrade {\n display: flex;\n align-items: center;\n order: 2;\n flex-grow: 0;\n }\n\n .cl-branding:hover {\n box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.07);\n }"}getGameSpotlightStyles(){var e,n;const t=null===(n=null===(e=this.getDocumentModel())\|\|void 0===e?void 0:e.views)\|\|void 0===n?void 0:n.length;let r=this.params.renderMode===RenderMode.STATIC?"\n .cl-game-spotlight-widget {\n animation: unlock 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n }\n \n .cl-game-spotlight-skip-scale {\n animation: none !important;\n }\n \n @keyframes unlock {\n 0% { transform: scale(1); }\n 100% { transform: scale(0.95); }\n }\n ":"";if(r)for(let e=0;e<t;e++)r+=`\n .cl-game-spotlight-widget:has([cl-type="VIEW"][cl-path="${e}"])::after {\n content: "";\n position: absolute;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n overflow: visible;\n \n backdrop-filter: blur(4px);\n \n inset: -30px;\n mask-image: \n linear-gradient(to bottom, transparent, grey 30px, grey calc(100% - 30px), transparent),\n linear-gradient(to right, transparent, grey 30px, grey calc(100% - 30px), transparent);\n mask-composite: intersect;\n -webkit-mask-composite: source-in; /* for Chrome/Safari */\n \n transition: opacity 0.35s ease;\n pointer-events: auto;\n }`;return r}getViewportWidth(e,n){return Math.max((e\|\|document).documentElement.clientWidth,(n\|\|window).innerWidth\|\|0)}getContainerElementHeight(){return"BODY"===this.containerElement.tagName?Math.max(document.documentElement.clientHeight,window.innerHeight\|\|0):this.containerElement.getBoundingClientRect().height}getCurrentViewIndex(){return this.params.renderMode===RenderMode.STATIC?this.viewRouter.getCurrentViewIndex():this.params.viewIndex}getActualSizeByEnv(e){var n,t,r;const i=this.getDocumentModel();if(!i.shared.actualSize)return null;const o=e?"mobile":"desktop";return Array.isArray(i.shared.actualSize)?null===(t=null===(n=i.shared.actualSize)\|\|void 0===n?void 0:n[this.getCurrentViewIndex()])\|\|void 0===t?void 0:t[o]:null===(r=i.shared.actualSize)\|\|void 0===r?void 0:r[o]}getViewContentContainer(){var e;return null===(e=this.documentElement.querySelector('[cl-type="VIEW"]'))\|\|void 0===e?void 0:e.shadowRoot.querySelector("[cl-content-container]")}changeViewAlignToTop(){const e=this.documentElement.querySelector('[cl-type="VIEW"]');"row"===getComputedStyle(e).flexDirection?e.style.alignItems="flex-start":e.style.justifyContent="flex-start"}addWidgetContentClickEventListener(e){e.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.WIDGET_CONTENT_CLICKED,e)})}getDocumentModel(){return this.documentModel.getModel()}}

package/layouts/GoogleFontsLoader.js CHANGED Viewed

	@@ -1 +1 @@
1	- import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}static getUsedGoogleFonts(t){const e=t.shared.googleFonts;if(!e\|\|0===e.length)return[];const o=new Set,s=new Set;for(const e of t.views\|\|[])DocumentUtils.iterateDepthFirst(e,t=>{const e=GoogleFontsLoader._getEnabledStyleEntries(t);for(const t of e)if(t.classes)for(const e of t.classes.split(" "))e&&e.startsWith("cl-")&&s.add(e);for(const t of e)t.styleAttributes&&t.styleAttributes.fontFamily&&o.add(t.styleAttributes.fontFamily)});const n=t.shared;for(const t of s){const e=n.textClasses&&n.textClasses[t];e&&(e.styleAttributes&&e.styleAttributes.fontFamily?o.add(e.styleAttributes.fontFamily):(e.isHeader&&n.headerFontFamily&&o.add(n.headerFontFamily),!e.isHeader&&n.textFontFamily&&o.add(n.textFontFamily)))}return n.textFontFamily&&o.add(n.textFontFamily),e.filter(t=>o.has(t))}static _getEnabledStyleEntries(t){const e=[];~~return~~ t.props&&t.props.adaptiveStyles&&(e.push(...t.props.adaptiveStyles.desktop\|\|[]),e.push(...t.props.adaptiveStyles.mobile\|\|[])),t.props&&t.props.styles&&e.push(...t.props.styles\|\|[]),e.filter(t~~=>!(~~t.params&&!1===t.params.enabled))}async load(t,e){try{if(e=e\|\|document,!(t\|\|[]).length)return;const o=this._getDynamicUrlPart(t,e);if(!o\|\|0===o.length)return;await this._addFontsLinkToDocument(o,e);const s=this._generateFontVariations(t),n=this._createFontTester(s,e);e.body.appendChild(n);const a=this._waitForAllFontsToLoad(s,e),r=new Promise((t,e)=>setTimeout(()=>e(new Error("Timeout")),2e3));await Promise.race([a,r]),n.remove()}catch(t){console.error("Error while loading fonts",t)}}cleanup(){this.loadedGoogleFonts.forEach(t=>t.remove()),this.loadedGoogleFonts=[]}_getDynamicUrlPart(t,e){let o=[];(e.fonts\|\|[]).forEach(t=>o.push(`${t.family} ${t.weight} ${t.style}`));const s=new Set(o);return this._combineUrlDynamicPart(t,s)}_combineUrlDynamicPart(t,e){const o=[];let s=this._makeFontOptions();return t.forEach(t=>{let n="",a="";s.forEach(o=>{if(!e.has(`${t} ${o} normal`)){const t=`1,${o}`;a+=a?`;${t}`:t}if(!e.has(`${t} ${o} italic`)){const t=`0,${o}`;n+=n?`;${t}`:t}}),(n\|\|a)&&o.push({fontFamily:t,urlPart:`&family=${t.replace(/ /g,"+")}:ital,wght@${n};${a}`})}),o}_makeFontOptions(){const t=[];for(let e=0;e<9;e++){const o=100*(e+1);t.push(o)}return t}_addFontsLinkToDocument(t,e){if(!e.head)return Promise.resolve();const o=t.map(({fontFamily:t,urlPart:o})=>new Promise((s,n)=>{const a=document.createElement("link");a.rel="stylesheet",a.href="https://fonts.googleapis.com/css2?display=swap"+o,a.onload=()=>s({fontFamily:t,success:!0}),a.onerror=()=>{console.error(`Failed to load font: ${t}`),n(new Error(`Failed to load font: ${t}`))},e.head.appendChild(a),this.loadedGoogleFonts.push(a)}));return Promise.allSettled(o)}_generateFontVariations(t){const e=[100,200,300,400,500,600,700,800,900],o=["normal","italic"],s=[];return t.forEach(t=>{e.forEach(e=>{o.forEach(o=>{s.push({family:t,weight:e,style:o,descriptor:`${o} ${e} 1em "${t}"`})})})}),s}_createFontTester(t,e){const o=e.createElement("div");return o.setAttribute("aria-hidden","true"),o.style.cssText="\n position: fixed;\n top: -9999px;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n visibility: hidden;\n pointer-events: none;\n user-select: none;\n z-index: -1;\n ",t.forEach(t=>{Object.entries(this.testStrings).forEach(([s,n])=>{const a=e.createElement("span");a.textContent=n,a.style.cssText=`\n font-family: "${t.family}", sans-serif;\n font-weight: ${t.weight};\n font-style: ${t.style};\n font-size: 20px;\n display: inline-block;\n white-space: nowrap;\n `,a.dataset.font=`${t.family}-${t.weight}-${t.style}`,a.dataset.subset=s,o.appendChild(a)})}),o}async _waitForAllFontsToLoad(t,e){const o=[];for(let e=0;e<t.length;e+=10)o.push(t.slice(e,e+10));for(const t of o)await this._waitForFontBatchLoad(t,e)}async _waitForFontBatchLoad(t,e){const o=t.map(async t=>{try{e.fonts.check(t.descriptor)\|\|await e.fonts.load(t.descriptor)}catch(e){console.error(`Failed to load: ${t.descriptor}`,e)}});return Promise.all(o)}}
1	+ import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}static getUsedGoogleFonts(t){const e=t.shared.googleFonts;if(!e\|\|0===e.length)return[];const o=new Set,s=new Set;for(const e of t.views\|\|[])DocumentUtils.iterateDepthFirst(e,t=>{const e=GoogleFontsLoader._getEnabledStyleEntries(t);for(const t of e)if(t.classes)for(const e of t.classes.split(" "))e&&e.startsWith("cl-")&&s.add(e);for(const t of e)t.styleAttributes&&t.styleAttributes.fontFamily&&o.add(t.styleAttributes.fontFamily)});const n=t.shared;for(const t of s){const e=n.textClasses&&n.textClasses[t];e&&(e.styleAttributes&&e.styleAttributes.fontFamily?o.add(e.styleAttributes.fontFamily):(e.isHeader&&n.headerFontFamily&&o.add(n.headerFontFamily),!e.isHeader&&n.textFontFamily&&o.add(n.textFontFamily)))}return n.textFontFamily&&o.add(n.textFontFamily),e.filter(t=>o.has(t))}static _getEnabledStyleEntries(t){const e=[];t.props&&t.props.adaptiveStyles&&(e.push(...t.props.adaptiveStyles.desktop\|\|[]),e.push(...t.props.adaptiveStyles.mobile\|\|[])),t.props&&t.props.styles&&e.push(...t.props.styles\|\|[]);const o=new Set(e.filter(t=>t.params&&!1===t.params.enabled).map(t=>t.element));return e.filter(t=>!o.has(t.element))}async load(t,e){try{if(e=e\|\|document,!(t\|\|[]).length)return;const o=this._getDynamicUrlPart(t,e);if(!o\|\|0===o.length)return;await this._addFontsLinkToDocument(o,e);const s=this._generateFontVariations(t),n=this._createFontTester(s,e);e.body.appendChild(n);const a=this._waitForAllFontsToLoad(s,e),r=new Promise((t,e)=>setTimeout(()=>e(new Error("Timeout")),2e3));await Promise.race([a,r]),n.remove()}catch(t){console.error("Error while loading fonts",t)}}cleanup(){this.loadedGoogleFonts.forEach(t=>t.remove()),this.loadedGoogleFonts=[]}_getDynamicUrlPart(t,e){let o=[];(e.fonts\|\|[]).forEach(t=>o.push(`${t.family} ${t.weight} ${t.style}`));const s=new Set(o);return this._combineUrlDynamicPart(t,s)}_combineUrlDynamicPart(t,e){const o=[];let s=this._makeFontOptions();return t.forEach(t=>{let n="",a="";s.forEach(o=>{if(!e.has(`${t} ${o} normal`)){const t=`1,${o}`;a+=a?`;${t}`:t}if(!e.has(`${t} ${o} italic`)){const t=`0,${o}`;n+=n?`;${t}`:t}}),(n\|\|a)&&o.push({fontFamily:t,urlPart:`&family=${t.replace(/ /g,"+")}:ital,wght@${n};${a}`})}),o}_makeFontOptions(){const t=[];for(let e=0;e<9;e++){const o=100*(e+1);t.push(o)}return t}_addFontsLinkToDocument(t,e){if(!e.head)return Promise.resolve();const o=t.map(({fontFamily:t,urlPart:o})=>new Promise((s,n)=>{const a=document.createElement("link");a.rel="stylesheet",a.href="https://fonts.googleapis.com/css2?display=swap"+o,a.onload=()=>s({fontFamily:t,success:!0}),a.onerror=()=>{console.error(`Failed to load font: ${t}`),n(new Error(`Failed to load font: ${t}`))},e.head.appendChild(a),this.loadedGoogleFonts.push(a)}));return Promise.allSettled(o)}_generateFontVariations(t){const e=[100,200,300,400,500,600,700,800,900],o=["normal","italic"],s=[];return t.forEach(t=>{e.forEach(e=>{o.forEach(o=>{s.push({family:t,weight:e,style:o,descriptor:`${o} ${e} 1em "${t}"`})})})}),s}_createFontTester(t,e){const o=e.createElement("div");return o.setAttribute("aria-hidden","true"),o.style.cssText="\n position: fixed;\n top: -9999px;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n visibility: hidden;\n pointer-events: none;\n user-select: none;\n z-index: -1;\n ",t.forEach(t=>{Object.entries(this.testStrings).forEach(([s,n])=>{const a=e.createElement("span");a.textContent=n,a.style.cssText=`\n font-family: "${t.family}", sans-serif;\n font-weight: ${t.weight};\n font-style: ${t.style};\n font-size: 20px;\n display: inline-block;\n white-space: nowrap;\n `,a.dataset.font=`${t.family}-${t.weight}-${t.style}`,a.dataset.subset=s,o.appendChild(a)})}),o}async _waitForAllFontsToLoad(t,e){const o=[];for(let e=0;e<t.length;e+=10)o.push(t.slice(e,e+10));for(const t of o)await this._waitForFontBatchLoad(t,e)}async _waitForFontBatchLoad(t,e){const o=t.map(async t=>{try{e.fonts.check(t.descriptor)\|\|await e.fonts.load(t.descriptor)}catch(e){console.error(`Failed to load: ${t.descriptor}`,e)}});return Promise.all(o)}}

package/layouts/built-in/BuiltInLayout.js CHANGED Viewed

	@@ -1 +1 @@
1	- import BaseLayout from"../BaseLayout";import InsertType from"./InsertType";import InsertPositionMapper from"./InsertPositionMapper";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export default class BuiltInLayout extends BaseLayout{constructor(e,t,n,i,s){super(e,t,n,i,s),this.builtInElement=null,this.params.branded&&this.createBrandingElement()}connect(e,t,n){let i;if(e.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{e.style.visibility="visible"}),this.params.placement?(i=(t=document.querySelector(this.params.placement.selector)).getRootNode(),e.setAttribute("cl-connector-root-element",LayoutType.BUILT_IN),this.params.formVariantId&&e.setAttribute("cl-widget-id",this.params.formVariantId),this.params.placement.insertType===InsertType.REPLACE?t.replaceWith(e):t.insertAdjacentElement(InsertPositionMapper.map(this.params.placement.insertType),e)):(i=t.getRootNode(),t.appendChild(e)),this.params.disabled){const t=document.createElement("style");insertHtmlIntoElement({element:t,html:this.getDisabledWidgetStyles('[class^="cl-widget"]')}),e.appendChild(t)}~~if(~~this.builtInElement=e,this.setConnectedElement(this.builtInElement),this.params.branded){const t=document.createElement("style");insertHtmlIntoElement({element:t,html:this.getBrandingStyles()}),this.adjustBrandingPosition(),e.appendChild(this.brandingElement),"VIEW"===e.getAttribute("cl-type")?(e.shadowRoot.appendChild(t),e.shadowRoot.appendChild(this.brandingElement)):(e.style.position="relative",e.appendChild(t),e.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(e){null==e\|\|e(),this.builtInElement&&this.builtInElement.remove()}}
1	+ import BaseLayout from"../BaseLayout";import InsertType from"./InsertType";import InsertPositionMapper from"./InsertPositionMapper";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export default class BuiltInLayout extends BaseLayout{constructor(e,t,n,i,s){super(e,t,n,i,s),this.builtInElement=null,this.params.branded&&this.createBrandingElement()}connect(e,t,n){let i;if(e.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{e.style.visibility="visible"}),this.params.placement?(i=(t=document.querySelector(this.params.placement.selector)).getRootNode(),e.setAttribute("cl-connector-root-element",LayoutType.BUILT_IN),this.params.formVariantId&&e.setAttribute("cl-widget-id",this.params.formVariantId),this.params.placement.insertType===InsertType.REPLACE?t.replaceWith(e):t.insertAdjacentElement(InsertPositionMapper.map(this.params.placement.insertType),e)):(i=t.getRootNode(),t.appendChild(e)),this.params.disabled){const t=document.createElement("style");insertHtmlIntoElement({element:t,html:this.getDisabledWidgetStyles('[class^="cl-widget"]')}),e.appendChild(t)}this.builtInElement=e,this.documentElement=e,this.setConnectedElement(this.builtInElement);const s=document.createElement("style");if(insertHtmlIntoElement({element:s,html:this.getGameSpotlightStyles()}),e.appendChild(s),this.params.branded){const t=document.createElement("style");insertHtmlIntoElement({element:t,html:this.getBrandingStyles()}),this.adjustBrandingPosition(),e.appendChild(this.brandingElement),"VIEW"===e.getAttribute("cl-type")?(e.shadowRoot.appendChild(t),e.shadowRoot.appendChild(this.brandingElement)):(e.style.position="relative",e.appendChild(t),e.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(e){null==e\|\|e(),this.builtInElement&&this.builtInElement.remove()}}

package/layouts/content-locker/ContentLockerLayout.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}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";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.getDocumentModel().shared.closeIcon&&(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())}adjustBrandingPosition(){this.brandingElement.style.right="10px",this.brandingElement.style.bottom="10px"}addBlurryBackdrop(e){const t="backdropFilter",n="blur(20px)";e.style[t]=n;const o=new MutationObserver(o=>{o.forEach(o=>{var i;"attributes"===o.type&&"style"===o.attributeName&&((null===(i=e.style[t])\|\|void 0===i?void 0:i.includes(n))\|\|(e.style[t]=n))})});return o.observe(e,{attributes:!0,attributeFilter:["style"]}),()=>o.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&&document.body.classList.add("cl-noscroll"),this.removeBlurryBackdrop=this.addBlurryBackdrop(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(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible"}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;return this.centerContentIfNeeded(this.getCurrentViewIndex()),o&&(this.navigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())})),this.contentLockerElement}disconnect(e){var t,n,o,i;super.disconnect(e),null==e\|\|e(),this.params.disableGlobalScroll&&document.body.classList.remove("cl-noscroll"),null===(t=this.removeBlurryBackdrop)\|\|void 0===t\|\|t.call(this),this.contentLockerElement.remove(),null===(n=this.sharedUpdateListener)\|\|void 0===n\|\|n.off(),null===(o=this.environmentUpdateListener)\|\|void 0===o\|\|o.off(),null===(i=this.navigationEndListener)\|\|void 0===i\|\|i.off()}centerContentIfNeeded(e){const t=this.getDocumentModel().views[e],n=this.isMobileEnv()?t.props.adaptiveStyles.mobile[0].styleAttributes:t.props.adaptiveStyles.desktop[0].styleAttributes;"100%"===n.width&&"100%"===n.height?this.resetCustomContentSize():this.setCustomSizeForContent(n)}resetCustomContentSize(){this.originalDocumentElementStyles&&(this.documentElement.style.width=this.originalDocumentElementStyles.width,this.documentElement.style.minWidth=this.originalDocumentElementStyles.minWidth,this.documentElement.style.height=this.originalDocumentElementStyles.height,this.documentElement.style.minHeight=this.originalDocumentElementStyles.minHeight),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=""}setCustomSizeForContent(e){this.originalDocumentElementStyles={width:this.documentElement.style.width,minWidth:this.documentElement.style.minWidth,height:this.documentElement.style.height,minHeight:this.documentElement.style.minHeight},this.documentElement.style.width=e.width,this.documentElement.style.minWidth=e.minWidth,this.documentElement.style.height=e.height,this.documentElement.style.minHeight=e.minHeight,this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent="center",this.contentLockerElement.style.alignItems="center",this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight}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())}_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-noscroll {\n overflow: hidden !important;\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 </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{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}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";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.getDocumentModel().shared.closeIcon&&(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())}adjustBrandingPosition(){this.brandingElement.style.right="10px",this.brandingElement.style.bottom="10px"}addBlurryBackdrop(e){const t="backdropFilter",n="blur(20px)";e.style[t]=n;const o=new MutationObserver(o=>{o.forEach(o=>{var i;"attributes"===o.type&&"style"===o.attributeName&&((null===(i=e.style[t])\|\|void 0===i?void 0:i.includes(n))\|\|(e.style[t]=n))})});return o.observe(e,{attributes:!0,attributeFilter:["style"]}),()=>o.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&&document.body.classList.add("cl-noscroll"),this.removeBlurryBackdrop=this.addBlurryBackdrop(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(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible"}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;return this.centerContentIfNeeded(this.getCurrentViewIndex()),o&&(this.navigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())})),this.contentLockerElement}disconnect(e){var t,n,o,i;super.disconnect(e),null==e\|\|e(),this.params.disableGlobalScroll&&document.body.classList.remove("cl-noscroll"),null===(t=this.removeBlurryBackdrop)\|\|void 0===t\|\|t.call(this),this.contentLockerElement.remove(),null===(n=this.sharedUpdateListener)\|\|void 0===n\|\|n.off(),null===(o=this.environmentUpdateListener)\|\|void 0===o\|\|o.off(),null===(i=this.navigationEndListener)\|\|void 0===i\|\|i.off()}centerContentIfNeeded(e){const t=this.getDocumentModel().views[e],n=this.isMobileEnv()?t.props.adaptiveStyles.mobile[0].styleAttributes:t.props.adaptiveStyles.desktop[0].styleAttributes;"100%"===n.width&&"100%"===n.height?this.resetCustomContentSize():this.setCustomSizeForContent(n)}resetCustomContentSize(){this.originalDocumentElementStyles&&(this.documentElement.style.width=this.originalDocumentElementStyles.width,this.documentElement.style.minWidth=this.originalDocumentElementStyles.minWidth,this.documentElement.style.height=this.originalDocumentElementStyles.height,this.documentElement.style.minHeight=this.originalDocumentElementStyles.minHeight),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=""}setCustomSizeForContent(e){this.originalDocumentElementStyles={width:this.documentElement.style.width,minWidth:this.documentElement.style.minWidth,height:this.documentElement.style.height,minHeight:this.documentElement.style.minHeight},this.documentElement.style.width=e.width,this.documentElement.style.minWidth=e.minWidth,this.documentElement.style.height=e.height,this.documentElement.style.minHeight=e.minHeight,this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent="center",this.contentLockerElement.style.alignItems="center",this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight}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())}_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-noscroll {\n overflow: hidden !important;\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;

package/layouts/detached/DialogLayout.js CHANGED Viewed

	@@ -1 +1 @@
1	- import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";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(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&document.body.classList.add("cl-noscroll");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(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.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&&document.body.classList.remove("cl-noscroll"),t()},1e3this.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=.9this.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.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	+ import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";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(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&document.body.classList.add("cl-noscroll");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(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.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&&document.body.classList.remove("cl-noscroll"),t()},1e3this.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=.9this.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;

package/layouts/floating-bar/FloatingBarLayout.js CHANGED Viewed

	@@ -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{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,o,n,i){super(t,e,o,n,i),this.entryAndDestroyAnimationDurationInSeconds=.3,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(),o=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(o)?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(),o=t?e.mobile:e.desktop,n=this.isBottomPosition(o);return n?(this.setBottomPosition(o),{isBottomPosition:n}):(this._setTopPosition(t,o),{isBottomPosition:n})}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 o=this.getActualSizeByEnv(t);if(!o)return void this.setTopPosition(e);const n=o.height,i=parseFloat(n),s=this.containerElement.getRootNode(),a=this._getElementAtTheTopOfTheViewport(s);if(a){const t=this._findFloatingElement(a);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const o=i+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=o+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const l=i+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=l+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView\|\|t.parentWindow)/2,o=t.elementFromPoint(e,0);return o!==t.body?o:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,o=null;for(;e;){const t=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===t.position\|\|"sticky"===t.position){o=e;break}e=e.parentElement}return o}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let o=e.top;const n=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let i;for(;i=n.nextNode();){let n=0,s=i;for(;s!==t&&n<10;)s=s.parentElement,n++;if(n>=10)continue;const a=getComputedStyle(i);if("none"===a.display\|\|"hidden"===a.visibility\|\|0===parseFloat(a.opacity))continue;const l=i.getBoundingClientRect();l.right>e.left+.1e.width&&l.left<e.right-.1e.width&&(l.height>0&&l.width>0&&l.top<o&&l.top>e.top-150&&(o=l.top))}return Math.max(0,e.top-o)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,o){this.containerElement=e,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:n}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",o.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(n)}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{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)},5)),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,o;null==t\|\|t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)\|\|void 0===e\|\|e.off(),null===(o=this.environmentUpdateListener)\|\|void 0===o\|\|o.off()};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const o=this.getSharedParams(),n=this.isMobileEnv()?o.mobile:o.desktop,i=this.isBottomPosition(n)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${i} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3this.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.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=""},1e3this.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	+ 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{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,n,o,i){super(t,e,n,o,i),this.entryAndDestroyAnimationDurationInSeconds=.3,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(),n=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(n)?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(),n=t?e.mobile:e.desktop,o=this.isBottomPosition(n);return o?(this.setBottomPosition(n),{isBottomPosition:o}):(this._setTopPosition(t,n),{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 n=this.getActualSizeByEnv(t);if(!n)return void this.setTopPosition(e);const o=n.height,i=parseFloat(o),s=this.containerElement.getRootNode(),a=this._getElementAtTheTopOfTheViewport(s);if(a){const t=this._findFloatingElement(a);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const n=i+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=n+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const l=i+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=l+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView\|\|t.parentWindow)/2,n=t.elementFromPoint(e,0);return n!==t.body?n:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,n=null;for(;e;){const t=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===t.position\|\|"sticky"===t.position){n=e;break}e=e.parentElement}return n}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let n=e.top;const o=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let i;for(;i=o.nextNode();){let o=0,s=i;for(;s!==t&&o<10;)s=s.parentElement,o++;if(o>=10)continue;const a=getComputedStyle(i);if("none"===a.display\|\|"hidden"===a.visibility\|\|0===parseFloat(a.opacity))continue;const l=i.getBoundingClientRect();l.right>e.left+.1e.width&&l.left<e.right-.1e.width&&(l.height>0&&l.width>0&&l.top<n&&l.top>e.top-150&&(n=l.top))}return Math.max(0,e.top-n)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,n){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",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(o)}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{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)},5)),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,n;null==t\|\|t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)\|\|void 0===e\|\|e.off(),null===(n=this.environmentUpdateListener)\|\|void 0===n\|\|n.off()};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const n=this.getSharedParams(),o=this.isMobileEnv()?n.mobile:n.desktop,i=this.isBottomPosition(o)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${i} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3this.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=""},1e3this.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;

package/layouts/floating-box/FloatingBoxLayout.js CHANGED Viewed

	@@ -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()},1e3this.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=""},1e3this.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.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{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()},1e3this.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=""},1e3this.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;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/document-connector",
-  "version": "16.0.6",
+  "version": "16.0.7-tbfg7",
   "scripts": {
     "test": "jest --no-cache --coverage",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@claspo/common": "7.0.2",
-    "@claspo/renderer": "18.0.2"
+    "@claspo/renderer": "18.0.2-tbfg7"
   },
   "devDependencies": {
     "concat-md": "^0.5.1",