npm - @claspo/document-connector - Versions diffs - 16.5.2 → 16.5.3 - Mend

@claspo/document-connector 16.5.2 → 16.5.3

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 (8) hide show

package/layouts/BaseLayout.d.ts +1 -0
package/layouts/BaseLayout.js +1 -1
package/layouts/LayoutWithCloseIcon.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 +1 -1

package/layouts/BaseLayout.d.ts CHANGED Viewed

@@ -25,6 +25,7 @@ export default class BaseLayout {
     getGameSpotlightStyles(): string;
     getViewportWidth(documentObject: any, windowObject: any): number;
     getContainerElementHeight(): any;
+    isStaticRenderMode(): boolean;
     getCurrentViewIndex(): any;
     getActualSizeByEnv(isMobileEnv: any): ClDocumentEnvironmentActualSize | null | undefined;
     getViewContentContainer(): 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,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()}}
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 }"}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 i=this.isStaticRenderMode()?"\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(i)for(let e=0;e<t;e++)i+=`\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 i}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}isStaticRenderMode(){return this.params.renderMode===RenderMode.STATIC}getCurrentViewIndex(){return this.isStaticRenderMode()?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()}}

package/layouts/LayoutWithCloseIcon.js CHANGED Viewed

	@@ -1 +1 @@
1	- import BaseLayout from"./BaseLayout";import DocumentConnectorEventType from"../DocumentConnectorEventType";import{RenderMode}from"@claspo/common/RenderMode";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{WidgetHorizontalPosition}from"./PositionConstants";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export default class LayoutWithCloseIcon extends BaseLayout{disconnect(e){var l;null===(l=this.closeIconNavigationEndListener)\|\|void 0===l\|\|l.off()}getDefaultCloseIconParams(){const e={verticalOffset:"-42px",horizontalOffset:"-42px",width:"34px",height:"34px",content:"0",defaultIcon:!0,color:"rgb(255, 255, 255)"};return{enabled:!0,desktop:e,mobile:Object.assign(Object.assign({},e),{verticalOffset:"-37px",horizontalOffset:"0px"})}}applyCloseIconParams(e,l,n){if(e&&!l)return void(e.style.display="none");if(!e\|\|!l)return;const t=this.params.renderMode===RenderMode.STATIC;this.setCloseIconVisibility(e,l,this.getCurrentViewIndex()),t&&(this.closeIconNavigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.setCloseIconVisibility(e,l,this.getCurrentViewIndex())}));const o=n?l.mobile:l.desktop;if(e.style.width=o.width,e.style.height=o.height,e.style.top=o.verticalOffset,o.horizontalPosition&&o.horizontalPosition!==WidgetHorizontalPosition.RIGHT?(e.style.left=o.horizontalOffset,e.style.right=""):(e.style.right=o.horizontalOffset,e.style.left=""),o.inlineSvg\|\|o.defaultIcon){e.style.color=o.color,insertHtmlIntoElement({element:e,html:this.getInlineSvg(o.content)});const l=e.firstElementChild;l.style.width="100%",l.style.height="100%"}else{e.style.color="",insertHtmlIntoElement({element:e,html:""});const l=document.createElement("img");l.src=o.content,l.style.width="100%",e.appendChild(l)}}setCloseIconVisibility(e,l,n){var t;const o="block",i="none";if(!this.isCloseIconEnabled(l))return void(e.style.display=i);if(!l.showOnViews)return void(e.style.display=o);const r=null===(t=this.getDocumentModel().views[n])\|\|void 0===t?void 0:t.id;e.style.display=r?l.showOnViews.includes(r)?o:i:o}isCloseIconEnabled(e){return"boolean"!=typeof e.enabled\|\|e.enabled}getInlineSvg(e){const l=Number.parseInt(e,10);if(Number.isNaN(l))return"";switch(l){case 0:return'\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 9.70662L9.70711 15.7066L8.29289 14.2924L14.2929 8.2924L15.7071 9.70662Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29289 9.70711L14.2929 15.7071L15.7071 14.2929L9.70711 8.29289L8.29289 9.70711Z" fill="currentColor"/>\n</svg>\n';case 1:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9916 5.34171C19.4472 5.79732 19.4472 6.53602 18.9916 6.99163L6.99163 18.9916C6.53602 19.4472 5.79732 19.4472 5.34171 18.9916C4.8861 18.536 4.8861 17.7973 5.34171 17.3417L17.3417 5.34171C17.7973 4.8861 18.536 4.8861 18.9916 5.34171Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M5.34171 5.34171C4.8861 5.79732 4.8861 6.53602 5.34171 6.99163L17.3417 18.9916C17.7973 19.4472 18.536 19.4472 18.9916 18.9916C19.4472 18.536 19.4472 17.7973 18.9916 17.3417L6.99163 5.34171C6.53602 4.8861 5.79732 4.8861 5.34171 5.34171Z" fill="currentColor"/>\n</svg>\n';case 2:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 3C6.80558 3 3 6.80558 3 11.5C3 16.1944 6.80558 20 11.5 20C16.1944 20 20 16.1944 20 11.5C20 6.80558 16.1944 3 11.5 3ZM2 11.5C2 6.25329 6.25329 2 11.5 2C16.7467 2 21 6.25329 21 11.5C21 16.7467 16.7467 21 11.5 21C6.25329 21 2 16.7467 2 11.5Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8536 8.85319L8.85355 14.8532L8.14645 14.1461L14.1464 8.14608L14.8536 8.85319Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.14645 8.85355L14.1464 14.8536L14.8536 14.1464L8.85355 8.14645L8.14645 8.85355Z" fill="currentColor"/>\n</svg>\n';case 3:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8648 6.13518C18.0451 6.31542 18.0451 6.60765 17.8648 6.7879L6.78792 17.8648C6.60768 18.0451 6.31545 18.0451 6.13521 17.8648C5.95496 17.6846 5.95496 17.3923 6.13521 17.2121L17.2121 6.13518C17.3923 5.95494 17.6846 5.95494 17.8648 6.13518Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M6.13518 6.13518C5.95494 6.31542 5.95494 6.60765 6.13518 6.7879L17.2121 17.8648C17.3923 18.0451 17.6846 18.0451 17.8648 17.8648C18.045 17.6846 18.045 17.3923 17.8648 17.2121L6.78789 6.13518C6.60765 5.95494 6.31542 5.95494 6.13518 6.13518Z" fill="currentColor"/>\n</svg>\n';case 4:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L10.5858 12L7.29289 8.70711C6.90237 8.31658 6.90237 7.68342 7.29289 7.29289C7.68342 6.90237 8.31658 6.90237 8.70711 7.29289L12 10.5858L15.2929 7.29289C15.6834 6.90237 16.3166 6.90237 16.7071 7.29289C17.0976 7.68342 17.0976 8.31658 16.7071 8.70711L13.4142 12L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L12 13.4142L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071Z" fill="currentColor"/>\n</svg>\n';case 5:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="10" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 9.70662L9.70711 15.7066L8.29289 14.2924L14.2929 8.2924L15.7071 9.70662Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29289 9.70711L14.2929 15.7071L15.7071 14.2929L9.70711 8.29289L8.29289 9.70711Z" fill="currentColor"/>\n</svg>\n';case 6:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="9" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3536 9.35306L9.35355 15.3531L8.64645 14.646L14.6464 8.64596L15.3536 9.35306Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 9.35355L14.6464 15.3536L15.3536 14.6464L9.35355 8.64645L8.64645 9.35355Z" fill="currentColor"/>\n</svg>\n ';case 7:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="9" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L10.5858 12L7.29289 8.70711C6.90237 8.31658 6.90237 7.68342 7.29289 7.29289C7.68342 6.90237 8.31658 6.90237 8.70711 7.29289L12 10.5858L15.2929 7.29289C15.6834 6.90237 16.3166 6.90237 16.7071 7.29289C17.0976 7.68342 17.0976 8.31658 16.7071 8.70711L13.4142 12L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L12 13.4142L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071Z" fill="currentColor"/>\n</svg>\n ';case 8:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="9" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9138 8.08736C16.1416 8.31516 16.1416 8.68451 15.9138 8.91232L8.9138 15.9123C8.68599 16.1401 8.31664 16.1401 8.08884 15.9123C7.86103 15.6845 7.86103 15.3152 8.08884 15.0874L15.0889 8.08736C15.3167 7.85955 15.686 7.85955 15.9138 8.08736Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.08882 8.08736C7.86102 8.31516 7.86102 8.68451 8.08882 8.91232L15.0888 15.9123C15.3166 16.1401 15.686 16.1401 15.9138 15.9123C16.1416 15.6845 16.1416 15.3152 15.9138 15.0874L8.91378 8.08736C8.68598 7.85955 8.31663 7.85955 8.08882 8.08736Z" fill="currentColor"/>\n</svg>\n ';case 9:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="9" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.705 8.29392C15.8189 8.40783 15.8189 8.5925 15.705 8.7064L8.70495 15.7064C8.59105 15.8203 8.40638 15.8203 8.29247 15.7064C8.17857 15.5925 8.17857 15.4078 8.29247 15.2939L15.2925 8.29392C15.4064 8.18002 15.5911 8.18002 15.705 8.29392Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29246 8.29392C8.17856 8.40783 8.17856 8.5925 8.29246 8.7064L15.2925 15.7064C15.4064 15.8203 15.5911 15.8203 15.705 15.7064C15.8189 15.5925 15.8189 15.4078 15.705 15.2939L8.70494 8.29392C8.59104 8.18002 8.40636 8.18002 8.29246 8.29392Z" fill="currentColor"/>\n</svg>\n ';default:return""}}addCloseIconEventListener(){this.closeIconElement.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_ICON_CLICKED,this.closeIconElement),this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)})}}
1	+ import BaseLayout from"./BaseLayout";import DocumentConnectorEventType from"../DocumentConnectorEventType";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{WidgetHorizontalPosition}from"./PositionConstants";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export default class LayoutWithCloseIcon extends BaseLayout{disconnect(e){var l;null===(l=this.closeIconNavigationEndListener)\|\|void 0===l\|\|l.off()}getDefaultCloseIconParams(){const e={verticalOffset:"-42px",horizontalOffset:"-42px",width:"34px",height:"34px",content:"0",defaultIcon:!0,color:"rgb(255, 255, 255)"};return{enabled:!0,desktop:e,mobile:Object.assign(Object.assign({},e),{verticalOffset:"-37px",horizontalOffset:"0px"})}}applyCloseIconParams(e,l,n){if(e&&!l)return void(e.style.display="none");if(!e\|\|!l)return;this.setCloseIconVisibility(e,l,this.getCurrentViewIndex()),this.isStaticRenderMode()&&(this.closeIconNavigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.setCloseIconVisibility(e,l,this.getCurrentViewIndex())}));const t=n?l.mobile:l.desktop;if(e.style.width=t.width,e.style.height=t.height,e.style.top=t.verticalOffset,t.horizontalPosition&&t.horizontalPosition!==WidgetHorizontalPosition.RIGHT?(e.style.left=t.horizontalOffset,e.style.right=""):(e.style.right=t.horizontalOffset,e.style.left=""),t.inlineSvg\|\|t.defaultIcon){e.style.color=t.color,insertHtmlIntoElement({element:e,html:this.getInlineSvg(t.content)});const l=e.firstElementChild;l.style.width="100%",l.style.height="100%"}else{e.style.color="",insertHtmlIntoElement({element:e,html:""});const l=document.createElement("img");l.src=t.content,l.style.width="100%",e.appendChild(l)}}setCloseIconVisibility(e,l,n){var t;const o="block",i="none";if(!this.isCloseIconEnabled(l))return void(e.style.display=i);if(!l.showOnViews)return void(e.style.display=o);const r=null===(t=this.getDocumentModel().views[n])\|\|void 0===t?void 0:t.id;e.style.display=r?l.showOnViews.includes(r)?o:i:o}isCloseIconEnabled(e){return"boolean"!=typeof e.enabled\|\|e.enabled}getInlineSvg(e){const l=Number.parseInt(e,10);if(Number.isNaN(l))return"";switch(l){case 0:return'\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 9.70662L9.70711 15.7066L8.29289 14.2924L14.2929 8.2924L15.7071 9.70662Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29289 9.70711L14.2929 15.7071L15.7071 14.2929L9.70711 8.29289L8.29289 9.70711Z" fill="currentColor"/>\n</svg>\n';case 1:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9916 5.34171C19.4472 5.79732 19.4472 6.53602 18.9916 6.99163L6.99163 18.9916C6.53602 19.4472 5.79732 19.4472 5.34171 18.9916C4.8861 18.536 4.8861 17.7973 5.34171 17.3417L17.3417 5.34171C17.7973 4.8861 18.536 4.8861 18.9916 5.34171Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M5.34171 5.34171C4.8861 5.79732 4.8861 6.53602 5.34171 6.99163L17.3417 18.9916C17.7973 19.4472 18.536 19.4472 18.9916 18.9916C19.4472 18.536 19.4472 17.7973 18.9916 17.3417L6.99163 5.34171C6.53602 4.8861 5.79732 4.8861 5.34171 5.34171Z" fill="currentColor"/>\n</svg>\n';case 2:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 3C6.80558 3 3 6.80558 3 11.5C3 16.1944 6.80558 20 11.5 20C16.1944 20 20 16.1944 20 11.5C20 6.80558 16.1944 3 11.5 3ZM2 11.5C2 6.25329 6.25329 2 11.5 2C16.7467 2 21 6.25329 21 11.5C21 16.7467 16.7467 21 11.5 21C6.25329 21 2 16.7467 2 11.5Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8536 8.85319L8.85355 14.8532L8.14645 14.1461L14.1464 8.14608L14.8536 8.85319Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.14645 8.85355L14.1464 14.8536L14.8536 14.1464L8.85355 8.14645L8.14645 8.85355Z" fill="currentColor"/>\n</svg>\n';case 3:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8648 6.13518C18.0451 6.31542 18.0451 6.60765 17.8648 6.7879L6.78792 17.8648C6.60768 18.0451 6.31545 18.0451 6.13521 17.8648C5.95496 17.6846 5.95496 17.3923 6.13521 17.2121L17.2121 6.13518C17.3923 5.95494 17.6846 5.95494 17.8648 6.13518Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M6.13518 6.13518C5.95494 6.31542 5.95494 6.60765 6.13518 6.7879L17.2121 17.8648C17.3923 18.0451 17.6846 18.0451 17.8648 17.8648C18.045 17.6846 18.045 17.3923 17.8648 17.2121L6.78789 6.13518C6.60765 5.95494 6.31542 5.95494 6.13518 6.13518Z" fill="currentColor"/>\n</svg>\n';case 4:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L10.5858 12L7.29289 8.70711C6.90237 8.31658 6.90237 7.68342 7.29289 7.29289C7.68342 6.90237 8.31658 6.90237 8.70711 7.29289L12 10.5858L15.2929 7.29289C15.6834 6.90237 16.3166 6.90237 16.7071 7.29289C17.0976 7.68342 17.0976 8.31658 16.7071 8.70711L13.4142 12L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L12 13.4142L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071Z" fill="currentColor"/>\n</svg>\n';case 5:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="10" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 9.70662L9.70711 15.7066L8.29289 14.2924L14.2929 8.2924L15.7071 9.70662Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29289 9.70711L14.2929 15.7071L15.7071 14.2929L9.70711 8.29289L8.29289 9.70711Z" fill="currentColor"/>\n</svg>\n';case 6:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="9" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3536 9.35306L9.35355 15.3531L8.64645 14.646L14.6464 8.64596L15.3536 9.35306Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 9.35355L14.6464 15.3536L15.3536 14.6464L9.35355 8.64645L8.64645 9.35355Z" fill="currentColor"/>\n</svg>\n ';case 7:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="9" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L10.5858 12L7.29289 8.70711C6.90237 8.31658 6.90237 7.68342 7.29289 7.29289C7.68342 6.90237 8.31658 6.90237 8.70711 7.29289L12 10.5858L15.2929 7.29289C15.6834 6.90237 16.3166 6.90237 16.7071 7.29289C17.0976 7.68342 17.0976 8.31658 16.7071 8.70711L13.4142 12L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L12 13.4142L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071Z" fill="currentColor"/>\n</svg>\n ';case 8:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="9" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9138 8.08736C16.1416 8.31516 16.1416 8.68451 15.9138 8.91232L8.9138 15.9123C8.68599 16.1401 8.31664 16.1401 8.08884 15.9123C7.86103 15.6845 7.86103 15.3152 8.08884 15.0874L15.0889 8.08736C15.3167 7.85955 15.686 7.85955 15.9138 8.08736Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.08882 8.08736C7.86102 8.31516 7.86102 8.68451 8.08882 8.91232L15.0888 15.9123C15.3166 16.1401 15.686 16.1401 15.9138 15.9123C16.1416 15.6845 16.1416 15.3152 15.9138 15.0874L8.91378 8.08736C8.68598 7.85955 8.31663 7.85955 8.08882 8.08736Z" fill="currentColor"/>\n</svg>\n ';case 9:return'\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<circle cx="12" cy="12" r="9" fill="black" fill-opacity="0.1"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M15.705 8.29392C15.8189 8.40783 15.8189 8.5925 15.705 8.7064L8.70495 15.7064C8.59105 15.8203 8.40638 15.8203 8.29247 15.7064C8.17857 15.5925 8.17857 15.4078 8.29247 15.2939L15.2925 8.29392C15.4064 8.18002 15.5911 8.18002 15.705 8.29392Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29246 8.29392C8.17856 8.40783 8.17856 8.5925 8.29246 8.7064L15.2925 15.7064C15.4064 15.8203 15.5911 15.8203 15.705 15.7064C15.8189 15.5925 15.8189 15.4078 15.705 15.2939L8.70494 8.29392C8.59104 8.18002 8.40636 8.18002 8.29246 8.29392Z" fill="currentColor"/>\n</svg>\n ';default:return""}}addCloseIconEventListener(){this.closeIconElement.addEventListener("click",()=>{this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_ICON_CLICKED,this.closeIconElement),this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)})}}

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

	@@ -1 +1 @@
1	- import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import debounce from"@claspo/common/async/debounce";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{RenderMode}from"@claspo/common/RenderMode";import GlobalScrollBlocker from"../GlobalScrollBlocker";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import trapFocus from"../trapFocus";import{ClWidgetHorizontalPosition,ClWidgetVerticalPosition}from"@claspo/common/document/Document.interface";class ContentLockerLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.contentLockerRootElement=document.createElement("div"),this.contentLockerRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.contentLockerElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerSelector),this.contentLockerContentElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerContentSelector),this.contentLockerElement.setAttribute("cl-connector-root-element",LayoutType.CONTENT_LOCKER),this.params.formVariantId&&this.contentLockerElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=document.createElement("div"),this.closeIconElement.classList.add("cl-content-locker-close-icon"),this.contentLockerContentElement.appendChild(this.closeIconElement),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.contentLockerElement.querySelector(ContentLockerLayout.contentLockerContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.contentLockerElement.appendChild(this.brandingElement),this.addBrandingElementListeners());const s=this.getDocumentModel().shared.closeIcon;s&&!s.showOnViews&&this.isCloseIconEnabled(s)&&(this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener))}adjustBrandingPosition(){this.brandingElement.style.right="10px",this.brandingElement.style.bottom="10px"}addOverlayStyles(e){var t,n,o,i;const s=this.getDocumentModel(),l="backdropFilter",r=(null===(n=null===(t=s.shared.overlay)\|\|void 0===t?void 0:t.styles)\|\|void 0===n?void 0:n.backdropFilter)\|\|"blur(20px)",c="background",a=(null===(i=null===(o=s.shared.overlay)\|\|void 0===o?void 0:o.styles)\|\|void 0===i?void 0:i.background)\|\|"transparent";e.style[l]=r,e.style[c]=a;const d=new MutationObserver(t=>{t.forEach(t=>{var n,o;"attributes"===t.type&&"style"===t.attributeName&&((null===(n=e.style[l])\|\|void 0===n?void 0:n.includes(r))\|\|(e.style[l]=r),(null===(o=e.style[c])\|\|void 0===o?void 0:o.includes(a))\|\|(e.style[c]=a))})});return d.observe(e,{attributes:!0,attributeFilter:["style"]}),()=>d.disconnect()}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block(),this.removeOverlayStyles=this.addOverlayStyles(this.contentLockerElement),this.contentLockerContentElement.appendChild(e),t.appendChild(this.contentLockerElement),this.setConnectedElement(this.contentLockerElement),this.updateScrollbar(this.isMobileEnv()),this.contentLockerContentElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible",requestAnimationFrame(()=>{this.contentLockerElement.focus()}),this.removeFocusTrap=trapFocus(this.contentLockerElement)}),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{var e;this.setCloseIconParams(this.isMobileEnv()),this.centerContentIfNeeded(this.getCurrentViewIndex()),null===(e=this.removeOverlayStyles)\|\|void 0===e\|\|e.call(this),this.removeOverlayStyles=this.addOverlayStyles(this.contentLockerElement)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;if(this.centerContentIfNeeded(this.getCurrentViewIndex()),o&&(this.navigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())})),!o){const e=this.getDocumentModel().views[this.getCurrentViewIndex()].id;this.viewPropsUpdateListener=this.documentModel.on(`${EditorToWidgetEventType.COMPONENT_PROPS_UPDATE}_${e}`,debounce(()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())},5))}return this.contentLockerElement}disconnect(e){var t,n,o,i,s,l;super.disconnect(e),null==e\|\|e(),this.boundEscapeListener&&window.removeEventListener("keyup",this.boundEscapeListener),null===(t=this.removeFocusTrap)\|\|void 0===t\|\|t.call(this),this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),null===(n=this.removeOverlayStyles)\|\|void 0===n\|\|n.call(this),this.contentLockerElement.remove(),null===(o=this.sharedUpdateListener)\|\|void 0===o\|\|o.off(),null===(i=this.viewPropsUpdateListener)\|\|void 0===i\|\|i.off(),null===(s=this.environmentUpdateListener)\|\|void 0===s\|\|s.off(),null===(l=this.navigationEndListener)\|\|void 0===l\|\|l.off()}centerContentIfNeeded(e){var t,n;const o=this.getDocumentModel(),i=o.views[e],s=this.isMobileEnv(),l=s?i.props.adaptiveStyles.mobile[0].styleAttributes:i.props.adaptiveStyles.desktop[0].styleAttributes,r="100%"===l.width&&"100%"===l.height;this.documentElement.style.width=l.width,this.documentElement.style.minWidth=l.minWidth,this.documentElement.style.height=l.height,this.documentElement.style.minHeight=l.minHeight;const c=s?null===(t=o.shared.overlay)\|\|void 0===t?void 0:t.mobile:null===(n=o.shared.overlay)\|\|void 0===n?void 0:n.desktop;r?this.resetCustomContentSize():this.setCustomSizeForContent(l,c)}resetCustomContentSize(){this.contentLockerElement.style.display="",this.contentLockerElement.style.justifyContent="",this.contentLockerElement.style.alignItems="",this.contentLockerContentElement.style.width="100%",this.contentLockerContentElement.style.minWidth="",this.contentLockerContentElement.style.height="100%",this.contentLockerContentElement.style.minHeight="",this.contentLockerContentElement.style.margin=""}setCustomSizeForContent(e,t){const{horizontalAlign:n,verticalAlign:o,cssPropNameForHorizontalOffset:i,cssPropNameForVerticalOffset:s}=this.getContentPositionDetails(t);this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent=n,this.contentLockerElement.style.alignItems=o,this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight,this.contentLockerContentElement.style.margin="",(null==t?void 0:t.horizontalOffset)&&i&&(this.contentLockerContentElement.style[i]=t.horizontalOffset),(null==t?void 0:t.verticalOffset)&&s&&(this.contentLockerContentElement.style[s]=t.verticalOffset)}getContentPositionDetails(e){let t,n,o=null,i=null;return!(null==e?void 0:e.horizontalPosition)\|\|e.horizontalPosition===ClWidgetHorizontalPosition.CENTER&&e.verticalPosition!==ClWidgetVerticalPosition.CENTER?t="center":e.horizontalPosition===ClWidgetHorizontalPosition.LEFT?(t="flex-start",o="marginLeft"):e.horizontalPosition===ClWidgetHorizontalPosition.RIGHT?(t="flex-end",o="marginRight"):(t="center",o="marginLeft"),!(null==e?void 0:e.verticalPosition)\|\|e.verticalPosition===ClWidgetVerticalPosition.CENTER&&e.horizontalPosition!==ClWidgetHorizontalPosition.CENTER?n="center":e.verticalPosition===ClWidgetVerticalPosition.TOP?(n="flex-start",i="marginTop"):e.verticalPosition===ClWidgetVerticalPosition.BOTTOM?(n="flex-end",i="marginBottom"):(n="center",i="marginTop"),{horizontalAlign:t,verticalAlign:n,cssPropNameForHorizontalOffset:o,cssPropNameForVerticalOffset:i}}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t\|\|!this.getDocumentModel().shared.actualSize)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=this.getContainerElementHeight();o>parseFloat(n.height)\|\|(t.style.overflowY="auto",t.style.overflowX="hidden",t.style.minHeight=`${o}px`,this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}_getTemplate(e){var t,n;return`\n <div class="cl-content-locker" role="dialog" aria-modal="true" aria-label="Popup" tabindex="0">\n <style>\n .cl-content-locker {\n display: block;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n z-index: ${String(null!==(n=e.zIndex)&&void 0!==n?n:Number.MAX_SAFE_INTEGER)}\n }\n\n .cl-content-locker:focus {\n outline: none;\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(ContentLockerLayout.contentLockerSelector):""}\n\n .cl-content-locker-content {\n width: 100%;\n height: 100%;\n min-height: fit-content;\n }\n\n .cl-content-locker-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n </style>\n\n <div class="cl-content-locker-content"></div>\n </div>`}}ContentLockerLayout.contentLockerSelector=".cl-content-locker",ContentLockerLayout.contentLockerContentSelector=".cl-content-locker-content",ContentLockerLayout.contentLockerCloseIconSelector=".cl-content-locker-close-icon";export default ContentLockerLayout;
1	+ import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import debounce from"@claspo/common/async/debounce";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{RenderMode}from"@claspo/common/RenderMode";import GlobalScrollBlocker from"../GlobalScrollBlocker";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import trapFocus from"../trapFocus";import{ClWidgetHorizontalPosition,ClWidgetVerticalPosition}from"@claspo/common/document/Document.interface";class ContentLockerLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.contentLockerRootElement=document.createElement("div"),this.contentLockerRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.contentLockerElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerSelector),this.contentLockerContentElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerContentSelector),this.contentLockerElement.setAttribute("cl-connector-root-element",LayoutType.CONTENT_LOCKER),this.params.formVariantId&&this.contentLockerElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=document.createElement("div"),this.closeIconElement.classList.add("cl-content-locker-close-icon"),this.contentLockerContentElement.appendChild(this.closeIconElement),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.contentLockerElement.querySelector(ContentLockerLayout.contentLockerContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.contentLockerElement.appendChild(this.brandingElement),this.addBrandingElementListeners());const s=this.getDocumentModel().shared.closeIcon;s&&!s.showOnViews&&this.isCloseIconEnabled(s)&&(this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener))}adjustBrandingPosition(){this.brandingElement.style.right="10px",this.brandingElement.style.bottom="10px"}addOverlayStyles(e){var t,n,o,i;const s=this.getDocumentModel(),l="backdropFilter",r=(null===(n=null===(t=s.shared.overlay)\|\|void 0===t?void 0:t.styles)\|\|void 0===n?void 0:n.backdropFilter)\|\|"blur(20px)",c="background",a=(null===(i=null===(o=s.shared.overlay)\|\|void 0===o?void 0:o.styles)\|\|void 0===i?void 0:i.background)\|\|"transparent";e.style[l]=r,e.style[c]=a;const d=new MutationObserver(t=>{t.forEach(t=>{var n,o;"attributes"===t.type&&"style"===t.attributeName&&((null===(n=e.style[l])\|\|void 0===n?void 0:n.includes(r))\|\|(e.style[l]=r),(null===(o=e.style[c])\|\|void 0===o?void 0:o.includes(a))\|\|(e.style[c]=a))})});return d.observe(e,{attributes:!0,attributeFilter:["style"]}),()=>d.disconnect()}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block(),this.removeOverlayStyles=this.addOverlayStyles(this.contentLockerElement),this.contentLockerContentElement.appendChild(e),t.appendChild(this.contentLockerElement),this.setConnectedElement(this.contentLockerElement),this.updateScrollbar(this.isMobileEnv()),this.contentLockerContentElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible",this.isStaticRenderMode()&&(requestAnimationFrame(()=>{this.contentLockerElement.focus()}),this.removeFocusTrap=trapFocus(this.contentLockerElement))}),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{var e;this.setCloseIconParams(this.isMobileEnv()),this.centerContentIfNeeded(this.getCurrentViewIndex()),null===(e=this.removeOverlayStyles)\|\|void 0===e\|\|e.call(this),this.removeOverlayStyles=this.addOverlayStyles(this.contentLockerElement)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;if(this.centerContentIfNeeded(this.getCurrentViewIndex()),o&&(this.navigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())})),!o){const e=this.getDocumentModel().views[this.getCurrentViewIndex()].id;this.viewPropsUpdateListener=this.documentModel.on(`${EditorToWidgetEventType.COMPONENT_PROPS_UPDATE}_${e}`,debounce(()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())},5))}return this.contentLockerElement}disconnect(e){var t,n,o,i,s,l;super.disconnect(e),null==e\|\|e(),this.boundEscapeListener&&window.removeEventListener("keyup",this.boundEscapeListener),null===(t=this.removeFocusTrap)\|\|void 0===t\|\|t.call(this),this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),null===(n=this.removeOverlayStyles)\|\|void 0===n\|\|n.call(this),this.contentLockerElement.remove(),null===(o=this.sharedUpdateListener)\|\|void 0===o\|\|o.off(),null===(i=this.viewPropsUpdateListener)\|\|void 0===i\|\|i.off(),null===(s=this.environmentUpdateListener)\|\|void 0===s\|\|s.off(),null===(l=this.navigationEndListener)\|\|void 0===l\|\|l.off()}centerContentIfNeeded(e){var t,n;const o=this.getDocumentModel(),i=o.views[e],s=this.isMobileEnv(),l=s?i.props.adaptiveStyles.mobile[0].styleAttributes:i.props.adaptiveStyles.desktop[0].styleAttributes,r="100%"===l.width&&"100%"===l.height;this.documentElement.style.width=l.width,this.documentElement.style.minWidth=l.minWidth,this.documentElement.style.height=l.height,this.documentElement.style.minHeight=l.minHeight;const c=s?null===(t=o.shared.overlay)\|\|void 0===t?void 0:t.mobile:null===(n=o.shared.overlay)\|\|void 0===n?void 0:n.desktop;r?this.resetCustomContentSize():this.setCustomSizeForContent(l,c)}resetCustomContentSize(){this.contentLockerElement.style.display="",this.contentLockerElement.style.justifyContent="",this.contentLockerElement.style.alignItems="",this.contentLockerContentElement.style.width="100%",this.contentLockerContentElement.style.minWidth="",this.contentLockerContentElement.style.height="100%",this.contentLockerContentElement.style.minHeight="",this.contentLockerContentElement.style.margin=""}setCustomSizeForContent(e,t){const{horizontalAlign:n,verticalAlign:o,cssPropNameForHorizontalOffset:i,cssPropNameForVerticalOffset:s}=this.getContentPositionDetails(t);this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent=n,this.contentLockerElement.style.alignItems=o,this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight,this.contentLockerContentElement.style.margin="",(null==t?void 0:t.horizontalOffset)&&i&&(this.contentLockerContentElement.style[i]=t.horizontalOffset),(null==t?void 0:t.verticalOffset)&&s&&(this.contentLockerContentElement.style[s]=t.verticalOffset)}getContentPositionDetails(e){let t,n,o=null,i=null;return!(null==e?void 0:e.horizontalPosition)\|\|e.horizontalPosition===ClWidgetHorizontalPosition.CENTER&&e.verticalPosition!==ClWidgetVerticalPosition.CENTER?t="center":e.horizontalPosition===ClWidgetHorizontalPosition.LEFT?(t="flex-start",o="marginLeft"):e.horizontalPosition===ClWidgetHorizontalPosition.RIGHT?(t="flex-end",o="marginRight"):(t="center",o="marginLeft"),!(null==e?void 0:e.verticalPosition)\|\|e.verticalPosition===ClWidgetVerticalPosition.CENTER&&e.horizontalPosition!==ClWidgetHorizontalPosition.CENTER?n="center":e.verticalPosition===ClWidgetVerticalPosition.TOP?(n="flex-start",i="marginTop"):e.verticalPosition===ClWidgetVerticalPosition.BOTTOM?(n="flex-end",i="marginBottom"):(n="center",i="marginTop"),{horizontalAlign:t,verticalAlign:n,cssPropNameForHorizontalOffset:o,cssPropNameForVerticalOffset:i}}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t\|\|!this.getDocumentModel().shared.actualSize)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=this.getContainerElementHeight();o>parseFloat(n.height)\|\|(t.style.overflowY="auto",t.style.overflowX="hidden",t.style.minHeight=`${o}px`,this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}_getTemplate(e){var t,n;return`\n <div class="cl-content-locker" role="dialog" aria-modal="true" aria-label="Popup" ${this.isStaticRenderMode()?'tabindex="0"':""}>\n <style>\n .cl-content-locker {\n display: block;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n z-index: ${String(null!==(n=e.zIndex)&&void 0!==n?n:Number.MAX_SAFE_INTEGER)}\n }\n\n .cl-content-locker:focus {\n outline: none;\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(ContentLockerLayout.contentLockerSelector):""}\n\n .cl-content-locker-content {\n width: 100%;\n height: 100%;\n min-height: fit-content;\n }\n\n .cl-content-locker-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n </style>\n\n <div class="cl-content-locker-content"></div>\n </div>`}}ContentLockerLayout.contentLockerSelector=".cl-content-locker",ContentLockerLayout.contentLockerContentSelector=".cl-content-locker-content",ContentLockerLayout.contentLockerCloseIconSelector=".cl-content-locker-close-icon";export default ContentLockerLayout;

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

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

	@@ -1 +1 @@
1	- import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,i,o,n){super(t,e,i,o,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.floatingBarRootElement=document.createElement("div"),this.floatingBarRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBarElement=this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarSelector),this.floatingBarElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BAR),this.params.formVariantId&&this.floatingBarElement.setAttribute("cl-widget-id",this.params.formVariantId);const s=this.isMobileEnv();this.closeIconElement=this.floatingBarElement.querySelector(FloatingBarLayout.floatingBarCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector)),this.setCloseIconParams(s),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(s),this.floatingBarElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}getSharedParams(){return this.getDocumentModel().shared.floatingBar}isBottomPosition(t){return t.verticalPosition===WidgetVerticalPosition.BOTTOM}adjustBrandingPosition(t){const e=this.getSharedParams(),i=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(i)?this.brandingElement.style.top="-30px":this.brandingElement.style.bottom="-30px"}clearPosition(){const t=Array.from(this.floatingBarElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBarElement.style.getPropertyValue(t)]);this.floatingBarElement.removeAttribute("style"),t.forEach(([t,e])=>{this.floatingBarElement.style.setProperty(t,e)}),this.modifiedFloatingElement&&(this.modifiedFloatingElement.style.top=this.originalModifiedFloatingElementTop)}restoreHtmlBodyStyles(){this.modifiedHtmlBodyElement&&this.originalHtmlBodyElementMarginTop&&(this.modifiedHtmlBodyElement.style.marginTop=this.originalHtmlBodyElementMarginTop)}setTopPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.top="0px"}setBottomPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.bottom="0px"}setPosition(t){this.clearPosition(),this.restoreHtmlBodyStyles();const e=this.getSharedParams(),i=t?e.mobile:e.desktop,o=this.isBottomPosition(i);return o?(this.setBottomPosition(i),{isBottomPosition:o}):(this._setTopPosition(t,i),{isBottomPosition:o})}getOtherStyles(){return""}_setTopPosition(t,e){if(this.modifiedFloatingElement=null,this.modifiedHtmlBodyElement=null,this.calculatedOverflowAbove=0,"body"!==this.containerElement.tagName.toLowerCase()\|\|!this.getDocumentModel().shared.actualSize\|\|this.params.disableSmartPosition)return void this.setTopPosition(e);const i=this.getActualSizeByEnv(t);if(!i)return void this.setTopPosition(e);const o=i.height,n=parseFloat(o),s=this.containerElement.getRootNode(),l=this._getElementAtTheTopOfTheViewport(s);if(l){const t=this._findFloatingElement(l);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const i=n+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=i+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const a=n+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=a+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView\|\|t.parentWindow)/2,i=t.querySelector('[cl-connector-root-element="DETACHED"]'),o=t.querySelector('[cl-connector-root-element="CONTENT_LOCKER"]');i&&(i.style.visibility="hidden"),o&&(o.style.visibility="hidden");const n=t.elementFromPoint(e,0);return i&&(i.style.visibility="visible"),o&&(o.style.visibility="visible"),n!==t.body?n:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,i=null;for(;e;){const t=e.ownerDocument;if(e===t.body\|\|e===t.documentElement)break;const o=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===o.position){i=e;break}e=e.parentElement}return i}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let i=e.top;const o=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let n;for(;n=o.nextNode();){let o=0,s=n;for(;s!==t&&o<10;)s=s.parentElement,o++;if(o>=10)continue;const l=getComputedStyle(n);if("none"===l.display\|\|"hidden"===l.visibility\|\|0===parseFloat(l.opacity))continue;const a=n.getBoundingClientRect();a.right>e.left+.1e.width&&a.left<e.right-.1e.width&&(a.height>0&&a.width>0&&a.top<i&&a.top>e.top-150&&(i=a.top))}return Math.max(0,e.top-i)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,i){this.containerElement=e,this.documentElement=t,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:o}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(o)}),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,i;null==t\|\|t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)\|\|void 0===e\|\|e.off(),null===(i=this.environmentUpdateListener)\|\|void 0===i\|\|i.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),o=this.isMobileEnv()?i.mobile:i.desktop,n=this.isBottomPosition(o)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${n} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){var e;return`\n <div class="cl-floating-bar" role="region" aria-label="Notification" tabindex="0">\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 .cl-floating-bar:focus {\n outline: none;\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)this.floatingBarElement.focus();else{const e=t?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBarElement.style.animation="",this.floatingBarElement.focus()},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{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,i,o,n){super(t,e,i,o,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.floatingBarRootElement=document.createElement("div"),this.floatingBarRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBarElement=this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarSelector),this.floatingBarElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BAR),this.params.formVariantId&&this.floatingBarElement.setAttribute("cl-widget-id",this.params.formVariantId);const s=this.isMobileEnv();this.closeIconElement=this.floatingBarElement.querySelector(FloatingBarLayout.floatingBarCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector)),this.setCloseIconParams(s),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(s),this.floatingBarElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}getSharedParams(){return this.getDocumentModel().shared.floatingBar}isBottomPosition(t){return t.verticalPosition===WidgetVerticalPosition.BOTTOM}adjustBrandingPosition(t){const e=this.getSharedParams(),i=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(i)?this.brandingElement.style.top="-30px":this.brandingElement.style.bottom="-30px"}clearPosition(){const t=Array.from(this.floatingBarElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBarElement.style.getPropertyValue(t)]);this.floatingBarElement.removeAttribute("style"),t.forEach(([t,e])=>{this.floatingBarElement.style.setProperty(t,e)}),this.modifiedFloatingElement&&(this.modifiedFloatingElement.style.top=this.originalModifiedFloatingElementTop)}restoreHtmlBodyStyles(){this.modifiedHtmlBodyElement&&this.originalHtmlBodyElementMarginTop&&(this.modifiedHtmlBodyElement.style.marginTop=this.originalHtmlBodyElementMarginTop)}setTopPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.top="0px"}setBottomPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.bottom="0px"}setPosition(t){this.clearPosition(),this.restoreHtmlBodyStyles();const e=this.getSharedParams(),i=t?e.mobile:e.desktop,o=this.isBottomPosition(i);return o?(this.setBottomPosition(i),{isBottomPosition:o}):(this._setTopPosition(t,i),{isBottomPosition:o})}getOtherStyles(){return""}_setTopPosition(t,e){if(this.modifiedFloatingElement=null,this.modifiedHtmlBodyElement=null,this.calculatedOverflowAbove=0,"body"!==this.containerElement.tagName.toLowerCase()\|\|!this.getDocumentModel().shared.actualSize\|\|this.params.disableSmartPosition)return void this.setTopPosition(e);const i=this.getActualSizeByEnv(t);if(!i)return void this.setTopPosition(e);const o=i.height,n=parseFloat(o),s=this.containerElement.getRootNode(),l=this._getElementAtTheTopOfTheViewport(s);if(l){const t=this._findFloatingElement(l);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const i=n+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=i+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const a=n+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=a+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView\|\|t.parentWindow)/2,i=t.querySelector('[cl-connector-root-element="DETACHED"]'),o=t.querySelector('[cl-connector-root-element="CONTENT_LOCKER"]');i&&(i.style.visibility="hidden"),o&&(o.style.visibility="hidden");const n=t.elementFromPoint(e,0);return i&&(i.style.visibility="visible"),o&&(o.style.visibility="visible"),n!==t.body?n:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,i=null;for(;e;){const t=e.ownerDocument;if(e===t.body\|\|e===t.documentElement)break;const o=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===o.position){i=e;break}e=e.parentElement}return i}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let i=e.top;const o=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let n;for(;n=o.nextNode();){let o=0,s=n;for(;s!==t&&o<10;)s=s.parentElement,o++;if(o>=10)continue;const l=getComputedStyle(n);if("none"===l.display\|\|"hidden"===l.visibility\|\|0===parseFloat(l.opacity))continue;const a=n.getBoundingClientRect();a.right>e.left+.1e.width&&a.left<e.right-.1e.width&&(a.height>0&&a.width>0&&a.top<i&&a.top>e.top-150&&(i=a.top))}return Math.max(0,e.top-i)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,i){this.containerElement=e,this.documentElement=t,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:o}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(o)}),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,i;null==t\|\|t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)\|\|void 0===e\|\|e.off(),null===(i=this.environmentUpdateListener)\|\|void 0===i\|\|i.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),o=this.isMobileEnv()?i.mobile:i.desktop,n=this.isBottomPosition(o)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${n} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){var e;return`\n <div class="cl-floating-bar" role="region" aria-label="Notification" ${this.isStaticRenderMode()?'tabindex="0"':""}>\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 .cl-floating-bar:focus {\n outline: none;\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)this.isStaticRenderMode()&&this.floatingBarElement.focus();else{const e=t?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBarElement.style.animation="",this.isStaticRenderMode()&&this.floatingBarElement.focus()},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{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import{WidgetType}from"@claspo/common/WidgetType";class FloatingBoxLayout extends LayoutWithCloseIcon{constructor(t,e,i,o,n){super(t,e,i,o,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,i=t?e.mobile.verticalOffset:e.verticalOffset,o=this.getMinVerticalOffset();return parseFloat(i)<o?`${o}px`:i}setPosition(t){this.clearPosition();const e=this.getDocumentModel().shared.floatingBox,i=this.getActualSizeByEnv(t);let o=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:o,verticalOffset:this.getVerticalOffset(t),actualSizeByEnv:i};this.params.widgetType===WidgetType.TEASER?(this.setTeaserPosition(s),this.floatingBoxElement.style.cursor="pointer"):this.setRegularPosition(s)}setTeaserPosition(t){const{horizontalPosition:e,verticalPosition:i,actualSizeByEnv:o}=t;let n=t.horizontalOffset;if(i===WidgetVerticalPosition.CENTER&&e===WidgetHorizontalPosition.RIGHT&&o&&(n=`${parseFloat(o.height)+parseFloat(n)}px`),this.setHorizontalPosition(Object.assign(Object.assign({},t),{horizontalOffset:n})),i===WidgetVerticalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.width),i=this.getContainerHeight(),n=e===WidgetHorizontalPosition.LEFT?t/2:-t/2;this.floatingBoxElement.style.top=`${i/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:i}=t;if(this.setHorizontalPosition(t),e===WidgetVerticalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.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:i}=t;this.floatingBoxElement.style[e.toLowerCase()]=i}getContainerHeight(){return"BODY"===this.containerElement.tagName?(this.containerElement.ownerDocument.defaultView\|\|this.containerElement.ownerDocument.parentWindow).innerHeight:this.containerElement.clientHeight}setHorizontalPosition(t){const{horizontalPosition:e,horizontalOffset:i,actualSizeByEnv:o}=t;if(e===WidgetHorizontalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.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()]=i}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 i={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({},i)})})})}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,i){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",i.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{setTimeout(()=>{const t=this.isMobileEnv();this.setPosition(t),this.showFloatingBox(t)})}),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel());const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv),this.updateScrollbar(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBoxElement}disconnect(t){super.disconnect(t);const e=()=>{var e,i;null==t\|\|t(),this.floatingBoxElement.remove(),null===(e=this.sharedUpdateListener)\|\|void 0===e\|\|e.off(),null===(i=this.environmentUpdateListener)\|\|void 0===i\|\|i.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.params.disableLayoutAnimations)return void e();const i=this.getEntryAnimationName(this.isMobileEnv());this.floatingBoxElement.style.animation=`${i} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3this.entryAndDestroyAnimationDurationInSeconds-50)}getDocumentModel(){return this.migratedDocumentModel\|\|super.getDocumentModel()}isDialogWidget(){return this.params.widgetType!==WidgetType.TEASER&&this.params.widgetType!==WidgetType.LAUNCHER}showFloatingBox(t){if(!this.widgetIsShown)if(this.widgetIsShown=!0,this.floatingBoxElement.style.visibility="visible",this.params.disableEntryAnimation\|\|this.params.disableLayoutAnimations)this.isDialogWidget()&&this.floatingBoxElement.focus();else{const e=this.getEntryAnimationName(t);this.floatingBoxElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBoxElement.style.animation="",this.isDialogWidget()&&this.floatingBoxElement.focus()},1e3this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAnimationName(t){const e=this.getDocumentModel().shared.floatingBox,i=t?e.mobile.verticalPosition:e.verticalPosition,o=t?e.mobile.horizontalPosition:e.horizontalPosition,n=this.getActualSizeByEnv(t);return i===WidgetVerticalPosition.CENTER&&n&&this.containerElement?o===WidgetHorizontalPosition.LEFT?this.params.widgetType===WidgetType.TEASER?"slideInLeftTeaser":"slideInLeftRegular":this.params.widgetType===WidgetType.TEASER?"slideInRightTeaser":"slideInRightRegular":i===WidgetVerticalPosition.TOP?"slideInTop":"slideInBottom"}updateScrollbar(t){if(this.params.disableScrollbarCalculation)return;const e=this.getViewContentContainer();if(!e)return;const i=this.getActualSizeByEnv(t);if(!i)return;const o=parseFloat(this.closeIconElement.style.top),n=this.getVerticalOffset(t),s=parseFloat(n),a=this.getContainerElementHeight()-(o>0?0:Math.abs(o))-s;a>parseFloat(i.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"${this.isDialogWidget()?' role="dialog" aria-modal="true" aria-label="Popup" tabindex="0"':""}>\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:focus {\n outline: none;\n }\n .cl-floating-box-inner-content {\n position: relative;\n max-width: 100vw;\n z-index: 1;\n }\n\n .cl-floating-box-close-icon {\n position: absolute;\n cursor: pointer;\n z-index: 99;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-floating-box-inner-content">\n <div class="cl-floating-box-close-icon"></div>\n <div class="cl-floating-box-content"></div>\n </div>\n</div>\n`}getEntryAndDestroyAnimations(){return`\n@keyframes slideInTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n} \n \n@keyframes slideInBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideInLeftTeaser {\n 0% {\n opacity: 0;\n transform: translateX(-100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n}\n\n@keyframes slideInRightTeaser {\n 0% {\n opacity: 0;\n transform: translateX(100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n}\n\n@keyframes slideInLeftRegular {\n 0% {\n opacity: 0;\n transform: translateX(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slideInRightRegular {\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n `}}FloatingBoxLayout.floatingBoxSelector=".cl-floating-box",FloatingBoxLayout.floatingBoxContentSelector=".cl-floating-box-content",FloatingBoxLayout.floatingBoxCloseIconSelector=".cl-floating-box-close-icon",FloatingBoxLayout.verticalCenterPositionRotationCss="rotate(-90deg)";export default FloatingBoxLayout;
1	+ import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import{WidgetType}from"@claspo/common/WidgetType";class FloatingBoxLayout extends LayoutWithCloseIcon{constructor(t,e,i,o,n){super(t,e,i,o,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,i=t?e.mobile.verticalOffset:e.verticalOffset,o=this.getMinVerticalOffset();return parseFloat(i)<o?`${o}px`:i}setPosition(t){this.clearPosition();const e=this.getDocumentModel().shared.floatingBox,i=this.getActualSizeByEnv(t);let o=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:o,verticalOffset:this.getVerticalOffset(t),actualSizeByEnv:i};this.params.widgetType===WidgetType.TEASER?(this.setTeaserPosition(s),this.floatingBoxElement.style.cursor="pointer"):this.setRegularPosition(s)}setTeaserPosition(t){const{horizontalPosition:e,verticalPosition:i,actualSizeByEnv:o}=t;let n=t.horizontalOffset;if(i===WidgetVerticalPosition.CENTER&&e===WidgetHorizontalPosition.RIGHT&&o&&(n=`${parseFloat(o.height)+parseFloat(n)}px`),this.setHorizontalPosition(Object.assign(Object.assign({},t),{horizontalOffset:n})),i===WidgetVerticalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.width),i=this.getContainerHeight(),n=e===WidgetHorizontalPosition.LEFT?t/2:-t/2;this.floatingBoxElement.style.top=`${i/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:i}=t;if(this.setHorizontalPosition(t),e===WidgetVerticalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.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:i}=t;this.floatingBoxElement.style[e.toLowerCase()]=i}getContainerHeight(){return"BODY"===this.containerElement.tagName?(this.containerElement.ownerDocument.defaultView\|\|this.containerElement.ownerDocument.parentWindow).innerHeight:this.containerElement.clientHeight}setHorizontalPosition(t){const{horizontalPosition:e,horizontalOffset:i,actualSizeByEnv:o}=t;if(e===WidgetHorizontalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.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()]=i}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 i={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({},i)})})})}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,i){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",i.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{setTimeout(()=>{const t=this.isMobileEnv();this.setPosition(t),this.showFloatingBox(t)})}),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel());const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv),this.updateScrollbar(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBoxElement}disconnect(t){super.disconnect(t);const e=()=>{var e,i;null==t\|\|t(),this.floatingBoxElement.remove(),null===(e=this.sharedUpdateListener)\|\|void 0===e\|\|e.off(),null===(i=this.environmentUpdateListener)\|\|void 0===i\|\|i.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.params.disableLayoutAnimations)return void e();const i=this.getEntryAnimationName(this.isMobileEnv());this.floatingBoxElement.style.animation=`${i} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3this.entryAndDestroyAnimationDurationInSeconds-50)}getDocumentModel(){return this.migratedDocumentModel\|\|super.getDocumentModel()}isDialogWidget(){return this.params.widgetType!==WidgetType.TEASER&&this.params.widgetType!==WidgetType.LAUNCHER}showFloatingBox(t){if(!this.widgetIsShown)if(this.widgetIsShown=!0,this.floatingBoxElement.style.visibility="visible",this.params.disableEntryAnimation\|\|this.params.disableLayoutAnimations)this.isDialogWidget()&&this.isStaticRenderMode()&&this.floatingBoxElement.focus();else{const e=this.getEntryAnimationName(t);this.floatingBoxElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBoxElement.style.animation="",this.isDialogWidget()&&this.isStaticRenderMode()&&this.floatingBoxElement.focus()},1e3this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAnimationName(t){const e=this.getDocumentModel().shared.floatingBox,i=t?e.mobile.verticalPosition:e.verticalPosition,o=t?e.mobile.horizontalPosition:e.horizontalPosition,n=this.getActualSizeByEnv(t);return i===WidgetVerticalPosition.CENTER&&n&&this.containerElement?o===WidgetHorizontalPosition.LEFT?this.params.widgetType===WidgetType.TEASER?"slideInLeftTeaser":"slideInLeftRegular":this.params.widgetType===WidgetType.TEASER?"slideInRightTeaser":"slideInRightRegular":i===WidgetVerticalPosition.TOP?"slideInTop":"slideInBottom"}updateScrollbar(t){if(this.params.disableScrollbarCalculation)return;const e=this.getViewContentContainer();if(!e)return;const i=this.getActualSizeByEnv(t);if(!i)return;const o=parseFloat(this.closeIconElement.style.top),n=this.getVerticalOffset(t),s=parseFloat(n),a=this.getContainerElementHeight()-(o>0?0:Math.abs(o))-s;a>parseFloat(i.height)\|\|(e.style.overflowY="auto",e.style.overflowX="hidden",e.style.maxHeight=`${a}px`,this.changeViewAlignToTop())}_getTemplate(t){var e;const i=this.isStaticRenderMode()?'tabindex="0"':"";return`\n<div class="cl-floating-box"${this.isDialogWidget()?' role="dialog" aria-modal="true" aria-label="Popup" '+i:""}>\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:focus {\n outline: none;\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.5.2",
+  "version": "16.5.3",
   "scripts": {
     "test": "jest --no-cache --coverage",
     "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",