@claspo/document-connector 16.5.1 → 16.5.3-scf.0

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 (15) hide show
  1. package/StaticDocumentConnector.d.ts +2 -0
  2. package/StaticDocumentConnector.js +1 -1
  3. package/layouts/BaseLayout.d.ts +1 -0
  4. package/layouts/BaseLayout.js +1 -1
  5. package/layouts/CustomFontsLoader.d.ts +8 -0
  6. package/layouts/CustomFontsLoader.js +1 -0
  7. package/layouts/GoogleFontsLoader.js +1 -1
  8. package/layouts/LayoutWithCloseIcon.js +1 -1
  9. package/layouts/UsedFontFamiliesResolver.d.ts +2 -0
  10. package/layouts/UsedFontFamiliesResolver.js +1 -0
  11. package/layouts/content-locker/ContentLockerLayout.js +1 -1
  12. package/layouts/detached/DialogLayout.js +1 -1
  13. package/layouts/floating-bar/FloatingBarLayout.js +1 -1
  14. package/layouts/floating-box/FloatingBoxLayout.js +1 -1
  15. package/package.json +3 -3
package/StaticDocumentConnector.d.ts CHANGED
@@ -3,12 +3,14 @@ import { WidgetInitConfigI } from "@claspo/common/WidgetInitConfig.interface";
3
3
  import WcResolver from '@claspo/renderer/wc-renderer/WcResolver';
4
4
  import { WcRegister } from '@claspo/renderer/wc-renderer/WcRegister';
5
5
  import GoogleFontsLoader from './layouts/GoogleFontsLoader';
6
+ import CustomFontsLoader from './layouts/CustomFontsLoader';
6
7
  import { DocumentConnectorEventName } from './DocumentConnectorEvents.interface';
7
8
  export default class StaticDocumentConnector extends BaseDocumentConnector {
8
9
  componentRegister: WcRegister;
9
10
  componentResolver: WcResolver;
10
11
  googleFontsLoader: GoogleFontsLoader | null;
11
12
  closeSubmitPromise: Promise<boolean> | null;
13
+ customFontsLoader: CustomFontsLoader | null;
12
14
  constructor(params: WidgetInitConfigI);
13
15
  emit(eventName: string, value: any, params?: any): void;
14
16
  connect(containerElement: HTMLElement): Promise<any>;
package/StaticDocumentConnector.js CHANGED
@@ -1 +1 @@
1
- import BaseDocumentConnector from"./BaseDocumentConnector";import DocumentConnectorEventType from"./DocumentConnectorEventType";import{getZIndexByLayoutType}from"./layouts/getZindex";import LayoutFactory from"./layouts/LayoutFactory";import StaticEntryModule from"@claspo/renderer/StaticEntryModule";import WcResolver from"@claspo/renderer/wc-renderer/WcResolver";import{RenderMode}from"@claspo/common/RenderMode";import{WcRegister}from"@claspo/renderer/wc-renderer/WcRegister";import GoogleFontsLoader from"./layouts/GoogleFontsLoader";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";const DIRTY_SUBMIT_STATE="dirty",SUBMITTING_SUBMIT_STATE="submitting";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.componentResolver=null,this.googleFontsLoader=null,this.closeSubmitPromise=null;const{documentModel:t,translations:o,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r,e.productKeyPrefix),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister,e.productKeyPrefix);const i=new StaticEntryModule(t,this.componentResolver,this.componentRegister,e,o,s,n);this.setEntryModule(i)}emit(e,t,o=null){e!==DocumentConnectorEventType.CLOSE_WIDGET?super.emit(e,t,o):this.handleCloseWidget(t)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader;const t=e.getRootNode();if(!this.params.disableGoogleFonts){const e=GoogleFontsLoader.getUsedGoogleFonts(this.params.documentModel);await this.googleFontsLoader.load(e,t)}return this._initializeRenderer(e,t)}disconnect(){var e;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)||void 0===e||e.cleanup()}destroy(){this.disconnect()}on(e,t){return super.on(e,t)}async _initializeRenderer(e,t){var o,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(t);i.style.display="flex";const{layoutFactoryClass:l=LayoutFactory,layoutType:a,documentModel:c}=this.params,d=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(o=null==c?void 0:c.shared)||void 0===o?void 0:o.zIndex)&&void 0!==s?s:getZIndexByLayoutType(a)}),m=l.create(Object.assign(Object.assign({},d),{layoutType:this.params.layoutType,widgetType:this.params.widgetType,viewIndex:0,renderMode:this.entryModule.renderMode}),this,this.entryModule.viewRouter,this.entryModule.compositionRoot.services.documentModel,this.entryModule.compositionRoot.services.resizeListener);return this.controllers.push(m),super.addPropsRequestEventListener(i),this.params.formVariantId?i.classList.add("cl-widget-"+this.params.formVariantId):i.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,t)=>{this.emit(t,e)}),m.connect(i,e,this.entryModule),(null===(r=null===(n=c.shared)||void 0===n?void 0:n.theme)||void 0===r?void 0:r.schema)&&ThemeCssVars.override(c.shared.theme.schema,m.getConnectedElement()),m.getConnectedElement()}handleCloseWidget(e){this.trySubmitOnClose();try{super.emit(DocumentConnectorEventType.CLOSE_WIDGET,e)}finally{"function"==typeof e&&e()}}trySubmitOnClose(){const e=this.params.submitOnClose||{enabled:!1,skipValidation:!0},t=this.getSubmitState();e.enabled&&!this.closeSubmitPromise&&"submitting"!==t&&"dirty"===t&&this.hasDirtyFormData()&&(this.closeSubmitPromise=Promise.resolve(this.submitOnClose()).catch(e=>(console.error(e),!1)).finally(()=>{this.closeSubmitPromise=null}))}}
1
+ import BaseDocumentConnector from"./BaseDocumentConnector";import DocumentConnectorEventType from"./DocumentConnectorEventType";import{getZIndexByLayoutType}from"./layouts/getZindex";import LayoutFactory from"./layouts/LayoutFactory";import StaticEntryModule from"@claspo/renderer/StaticEntryModule";import WcResolver from"@claspo/renderer/wc-renderer/WcResolver";import{RenderMode}from"@claspo/common/RenderMode";import{WcRegister}from"@claspo/renderer/wc-renderer/WcRegister";import GoogleFontsLoader from"./layouts/GoogleFontsLoader";import CustomFontsLoader from"./layouts/CustomFontsLoader";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";const DIRTY_SUBMIT_STATE="dirty",SUBMITTING_SUBMIT_STATE="submitting";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.componentResolver=null,this.googleFontsLoader=null,this.closeSubmitPromise=null,this.customFontsLoader=null;const{documentModel:t,translations:o,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r,e.productKeyPrefix),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister,e.productKeyPrefix);const i=new StaticEntryModule(t,this.componentResolver,this.componentRegister,e,o,s,n);this.setEntryModule(i)}emit(e,t,o=null){e!==DocumentConnectorEventType.CLOSE_WIDGET?super.emit(e,t,o):this.handleCloseWidget(t)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader,this.customFontsLoader=new CustomFontsLoader;const t=e.getRootNode(),o=CustomFontsLoader.getUsedCustomFonts(this.params.documentModel),s=[this.customFontsLoader.load(o,t)];if(!this.params.disableGoogleFonts){const e=GoogleFontsLoader.getUsedGoogleFonts(this.params.documentModel);s.push(this.googleFontsLoader.load(e,t))}return await Promise.all(s),this._initializeRenderer(e,t)}disconnect(){var e,t;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)||void 0===e||e.cleanup(),null===(t=this.customFontsLoader)||void 0===t||t.cleanup()}destroy(){this.disconnect()}on(e,t){return super.on(e,t)}async _initializeRenderer(e,t){var o,s,n,r;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const i=this.entryModule.init(t);i.style.display="flex";const{layoutFactoryClass:l=LayoutFactory,layoutType:a,documentModel:d}=this.params,c=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(o=null==d?void 0:d.shared)||void 0===o?void 0:o.zIndex)&&void 0!==s?s:getZIndexByLayoutType(a)}),m=l.create(Object.assign(Object.assign({},c),{layoutType:this.params.layoutType,widgetType:this.params.widgetType,viewIndex:0,renderMode:this.entryModule.renderMode}),this,this.entryModule.viewRouter,this.entryModule.compositionRoot.services.documentModel,this.entryModule.compositionRoot.services.resizeListener);return this.controllers.push(m),super.addPropsRequestEventListener(i),this.params.formVariantId?i.classList.add("cl-widget-"+this.params.formVariantId):i.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,t)=>{this.emit(t,e)}),m.connect(i,e,this.entryModule),(null===(r=null===(n=d.shared)||void 0===n?void 0:n.theme)||void 0===r?void 0:r.schema)&&ThemeCssVars.override(d.shared.theme.schema,m.getConnectedElement()),m.getConnectedElement()}handleCloseWidget(e){this.trySubmitOnClose();try{super.emit(DocumentConnectorEventType.CLOSE_WIDGET,e)}finally{"function"==typeof e&&e()}}trySubmitOnClose(){const e=this.params.submitOnClose||{enabled:!1,skipValidation:!0},t=this.getSubmitState();e.enabled&&!this.closeSubmitPromise&&"submitting"!==t&&"dirty"===t&&this.hasDirtyFormData()&&(this.closeSubmitPromise=Promise.resolve(this.submitOnClose()).catch(e=>(console.error(e),!1)).finally(()=>{this.closeSubmitPromise=null}))}}
package/layouts/BaseLayout.d.ts CHANGED
@@ -25,6 +25,7 @@ export default class BaseLayout {
25
25
  getGameSpotlightStyles(): string;
26
26
  getViewportWidth(documentObject: any, windowObject: any): number;
27
27
  getContainerElementHeight(): any;
28
+ isStaticRenderMode(): boolean;
28
29
  getCurrentViewIndex(): any;
29
30
  getActualSizeByEnv(isMobileEnv: any): ClDocumentEnvironmentActualSize | null | undefined;
30
31
  getViewContentContainer(): any;
package/layouts/BaseLayout.js CHANGED
@@ -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/CustomFontsLoader.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { ClDocumentCustomFontResourceI } from '@claspo/common/document/Document.interface';
2
+ export default class CustomFontsLoader {
3
+ loadedCustomFonts: any[];
4
+ static getUsedCustomFonts(documentModel: any): ClDocumentCustomFontResourceI[];
5
+ load(customFonts: ClDocumentCustomFontResourceI[], htmlDocumentObject: Document): Promise<void>;
6
+ cleanup(): void;
7
+ _addCustomFontsLinkToDocument(customFonts: any, htmlDocumentObject: any): Promise<void> | Promise<PromiseSettledResult<unknown>[]>;
8
+ }
package/layouts/CustomFontsLoader.js ADDED
@@ -0,0 +1 @@
1
+ import{getUsedFontFamilies}from"./UsedFontFamiliesResolver";export default class CustomFontsLoader{constructor(){this.loadedCustomFonts=[]}static getUsedCustomFonts(e){const t=e.shared.customFontResources||[];if(!t.length)return[];const o=getUsedFontFamilies(e);return t.filter(e=>(null==e?void 0:e.fontFamily)&&(null==e?void 0:e.url)&&o.has(e.fontFamily))}async load(e,t){try{if(t=t||document,!(e||[]).length)return;await this._addCustomFontsLinkToDocument(e,t)}catch(e){console.error("Error while loading custom fonts",e)}}cleanup(){this.loadedCustomFonts.forEach(e=>e.remove()),this.loadedCustomFonts=[]}_addCustomFontsLinkToDocument(e,t){if(!t.head)return Promise.resolve();const o=new Set(Array.from(t.querySelectorAll('link[rel="stylesheet"]')).map(e=>e.href)),s=Array.from(new Set(e.map(e=>e.url).filter(e=>!o.has(e)))).map(e=>{const o=document.createElement("link");o.rel="stylesheet",o.href=e;const s=new Promise((t,s)=>{o.onload=()=>t({url:e,success:!0}),o.onerror=()=>s(new Error(`Failed to load custom font stylesheet: ${e}`))}),r=new Promise((t,o)=>setTimeout(()=>o(new Error(`Timeout while loading custom font stylesheet: ${e}`)),2e3));return t.head.appendChild(o),this.loadedCustomFonts.push(o),Promise.race([s,r])});return Promise.allSettled(s)}}
package/layouts/GoogleFontsLoader.js CHANGED
@@ -1 +1 @@
1
- import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}static getUsedGoogleFonts(t){const e=t.shared.googleFonts;if(!e||0===e.length)return[];const o=new Set,s=new Set;for(const e of t.views||[])DocumentUtils.iterateDepthFirst(e,t=>{const e=GoogleFontsLoader._getEnabledStyleEntries(t);for(const t of e)if(t.classes)for(const e of t.classes.split(" "))e&&e.startsWith("cl-")&&s.add(e);for(const t of e)t.styleAttributes&&t.styleAttributes.fontFamily&&o.add(t.styleAttributes.fontFamily)});const n=t.shared;for(const t of s){const e=n.textClasses&&n.textClasses[t];e&&(e.styleAttributes&&e.styleAttributes.fontFamily?o.add(e.styleAttributes.fontFamily):(e.isHeader&&n.headerFontFamily&&o.add(n.headerFontFamily),!e.isHeader&&n.textFontFamily&&o.add(n.textFontFamily)))}return n.textFontFamily&&o.add(n.textFontFamily),e.filter(t=>o.has(t))}static _getEnabledStyleEntries(t){const e=[];t.props&&t.props.adaptiveStyles&&(e.push(...t.props.adaptiveStyles.desktop||[]),e.push(...t.props.adaptiveStyles.mobile||[])),t.props&&t.props.styles&&e.push(...t.props.styles||[]);const o=new Set(e.filter(t=>t.params&&!1===t.params.enabled).map(t=>t.element));return e.filter(t=>!o.has(t.element))}async load(t,e){try{if(e=e||document,!(t||[]).length)return;const o=this._getDynamicUrlPart(t,e);if(!o||0===o.length)return;await this._addFontsLinkToDocument(o,e);const s=this._generateFontVariations(t),n=this._createFontTester(s,e);e.body.appendChild(n);const a=this._waitForAllFontsToLoad(s,e),r=new Promise((t,e)=>setTimeout(()=>e(new Error("Timeout")),2e3));await Promise.race([a,r]),n.remove()}catch(t){console.error("Error while loading fonts",t)}}cleanup(){this.loadedGoogleFonts.forEach(t=>t.remove()),this.loadedGoogleFonts=[]}_getDynamicUrlPart(t,e){let o=[];(e.fonts||[]).forEach(t=>o.push(`${t.family} ${t.weight} ${t.style}`));const s=new Set(o);return this._combineUrlDynamicPart(t,s)}_combineUrlDynamicPart(t,e){const o=[];let s=this._makeFontOptions();return t.forEach(t=>{let n="",a="";s.forEach(o=>{if(!e.has(`${t} ${o} normal`)){const t=`1,${o}`;a+=a?`;${t}`:t}if(!e.has(`${t} ${o} italic`)){const t=`0,${o}`;n+=n?`;${t}`:t}}),(n||a)&&o.push({fontFamily:t,urlPart:`&family=${t.replace(/ /g,"+")}:ital,wght@${n};${a}`})}),o}_makeFontOptions(){const t=[];for(let e=0;e<9;e++){const o=100*(e+1);t.push(o)}return t}_addFontsLinkToDocument(t,e){if(!e.head)return Promise.resolve();const o=t.map(({fontFamily:t,urlPart:o})=>new Promise((s,n)=>{const a=document.createElement("link");a.rel="stylesheet",a.href="https://fonts.googleapis.com/css2?display=swap"+o,a.onload=()=>s({fontFamily:t,success:!0}),a.onerror=()=>{console.error(`Failed to load font: ${t}`),n(new Error(`Failed to load font: ${t}`))},e.head.appendChild(a),this.loadedGoogleFonts.push(a)}));return Promise.allSettled(o)}_generateFontVariations(t){const e=[100,200,300,400,500,600,700,800,900],o=["normal","italic"],s=[];return t.forEach(t=>{e.forEach(e=>{o.forEach(o=>{s.push({family:t,weight:e,style:o,descriptor:`${o} ${e} 1em "${t}"`})})})}),s}_createFontTester(t,e){const o=e.createElement("div");return o.setAttribute("aria-hidden","true"),o.style.cssText="\n position: fixed;\n top: -9999px;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n visibility: hidden;\n pointer-events: none;\n user-select: none;\n z-index: -1;\n ",t.forEach(t=>{Object.entries(this.testStrings).forEach(([s,n])=>{const a=e.createElement("span");a.textContent=n,a.style.cssText=`\n font-family: "${t.family}", sans-serif;\n font-weight: ${t.weight};\n font-style: ${t.style};\n font-size: 20px;\n display: inline-block;\n white-space: nowrap;\n `,a.dataset.font=`${t.family}-${t.weight}-${t.style}`,a.dataset.subset=s,o.appendChild(a)})}),o}async _waitForAllFontsToLoad(t,e){const o=[];for(let e=0;e<t.length;e+=10)o.push(t.slice(e,e+10));for(const t of o)await this._waitForFontBatchLoad(t,e)}async _waitForFontBatchLoad(t,e){const o=t.map(async t=>{try{e.fonts.check(t.descriptor)||await e.fonts.load(t.descriptor)}catch(e){console.error(`Failed to load: ${t.descriptor}`,e)}});return Promise.all(o)}}
1
+ import{getEnabledStyleEntries,getUsedFontFamilies}from"./UsedFontFamiliesResolver";export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}static getUsedGoogleFonts(t){const e=t.shared.googleFonts;if(!e||0===e.length)return[];const o=getUsedFontFamilies(t);return e.filter(t=>o.has(t))}static _getEnabledStyleEntries(t){return getEnabledStyleEntries(t)}async load(t,e){try{if(e=e||document,!(t||[]).length)return;const o=this._getDynamicUrlPart(t,e);if(!o||0===o.length)return;await this._addFontsLinkToDocument(o,e);const n=this._generateFontVariations(t),s=this._createFontTester(n,e);e.body.appendChild(s);const r=this._waitForAllFontsToLoad(n,e),a=new Promise((t,e)=>setTimeout(()=>e(new Error("Timeout")),2e3));await Promise.race([r,a]),s.remove()}catch(t){console.error("Error while loading fonts",t)}}cleanup(){this.loadedGoogleFonts.forEach(t=>t.remove()),this.loadedGoogleFonts=[]}_getDynamicUrlPart(t,e){let o=[];(e.fonts||[]).forEach(t=>o.push(`${t.family} ${t.weight} ${t.style}`));const n=new Set(o);return this._combineUrlDynamicPart(t,n)}_combineUrlDynamicPart(t,e){const o=[];let n=this._makeFontOptions();return t.forEach(t=>{let s="",r="";n.forEach(o=>{if(!e.has(`${t} ${o} normal`)){const t=`1,${o}`;r+=r?`;${t}`:t}if(!e.has(`${t} ${o} italic`)){const t=`0,${o}`;s+=s?`;${t}`:t}}),(s||r)&&o.push({fontFamily:t,urlPart:`&family=${t.replace(/ /g,"+")}:ital,wght@${s};${r}`})}),o}_makeFontOptions(){const t=[];for(let e=0;e<9;e++){const o=100*(e+1);t.push(o)}return t}_addFontsLinkToDocument(t,e){if(!e.head)return Promise.resolve();const o=t.map(({fontFamily:t,urlPart:o})=>new Promise((n,s)=>{const r=document.createElement("link");r.rel="stylesheet",r.href="https://fonts.googleapis.com/css2?display=swap"+o,r.onload=()=>n({fontFamily:t,success:!0}),r.onerror=()=>{console.error(`Failed to load font: ${t}`),s(new Error(`Failed to load font: ${t}`))},e.head.appendChild(r),this.loadedGoogleFonts.push(r)}));return Promise.allSettled(o)}_generateFontVariations(t){const e=[100,200,300,400,500,600,700,800,900],o=["normal","italic"],n=[];return t.forEach(t=>{e.forEach(e=>{o.forEach(o=>{n.push({family:t,weight:e,style:o,descriptor:`${o} ${e} 1em "${t}"`})})})}),n}_createFontTester(t,e){const o=e.createElement("div");return o.setAttribute("aria-hidden","true"),o.style.cssText="\n position: fixed;\n top: -9999px;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n visibility: hidden;\n pointer-events: none;\n user-select: none;\n z-index: -1;\n ",t.forEach(t=>{Object.entries(this.testStrings).forEach(([n,s])=>{const r=e.createElement("span");r.textContent=s,r.style.cssText=`\n font-family: "${t.family}", sans-serif;\n font-weight: ${t.weight};\n font-style: ${t.style};\n font-size: 20px;\n display: inline-block;\n white-space: nowrap;\n `,r.dataset.font=`${t.family}-${t.weight}-${t.style}`,r.dataset.subset=n,o.appendChild(r)})}),o}async _waitForAllFontsToLoad(t,e){const o=[];for(let e=0;e<t.length;e+=10)o.push(t.slice(e,e+10));for(const t of o)await this._waitForFontBatchLoad(t,e)}async _waitForFontBatchLoad(t,e){const o=t.map(async t=>{try{e.fonts.check(t.descriptor)||await e.fonts.load(t.descriptor)}catch(e){console.error(`Failed to load: ${t.descriptor}`,e)}});return Promise.all(o)}}
package/layouts/LayoutWithCloseIcon.js CHANGED
@@ -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/UsedFontFamiliesResolver.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare function getUsedFontFamilies(documentModel: any): Set<string>;
2
+ export declare function getEnabledStyleEntries(node: any): any[];
package/layouts/UsedFontFamiliesResolver.js ADDED
@@ -0,0 +1 @@
1
+ import DocumentUtils from"@claspo/common/document/DocumentUtils";export function getUsedFontFamilies(t){const e=new Set,s=new Set;for(const o of t.views||[])DocumentUtils.iterateDepthFirst(o,t=>{const o=getEnabledStyleEntries(t);for(const t of o)if(t.classes)for(const e of t.classes.split(" "))e&&e.startsWith("cl-")&&s.add(e);for(const t of o)t.styleAttributes&&t.styleAttributes.fontFamily&&e.add(t.styleAttributes.fontFamily)});const o=t.shared;for(const t of s){const s=o.textClasses&&o.textClasses[t];s&&(s.styleAttributes&&s.styleAttributes.fontFamily?e.add(s.styleAttributes.fontFamily):(s.isHeader&&o.headerFontFamily&&e.add(o.headerFontFamily),!s.isHeader&&o.textFontFamily&&e.add(o.textFontFamily)))}return o.textFontFamily&&e.add(o.textFontFamily),e}export function getEnabledStyleEntries(t){const e=[];t.props&&t.props.adaptiveStyles&&(e.push(...t.props.adaptiveStyles.desktop||[]),e.push(...t.props.adaptiveStyles.mobile||[])),t.props&&t.props.styles&&e.push(...t.props.styles||[]);const s=new Set(e.filter(t=>t.params&&!1===t.params.enabled).map(t=>t.element));return e.filter(t=>!s.has(t.element))}
package/layouts/content-locker/ContentLockerLayout.js CHANGED
@@ -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
@@ -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()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=.9*this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${o}px`,this.dialogElement.style.overflowY="auto",this.dialogElement.style.overflowX="hidden",this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}showDialog(){if(this.widgetIsShown)return;this.widgetIsShown=!0;!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations?setTimeout(()=>{this.dialogElement.style.visibility="visible";const e=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,e.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,setTimeout(()=>{this.dialogElement.style.animation="",e.style.animation="",this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement)},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):(this.dialogElement.style.visibility="visible",this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement))}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){var t;return`\n<div class="cl-dialog" role="dialog" aria-modal="true" aria-label="Popup" tabindex="0">\n <style>\n .cl-dialog {\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n z-index: ${e.zIndex};\n }\n\n .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()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=.9*this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${o}px`,this.dialogElement.style.overflowY="auto",this.dialogElement.style.overflowX="hidden",this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}showDialog(){if(this.widgetIsShown)return;this.widgetIsShown=!0;!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations?setTimeout(()=>{this.dialogElement.style.visibility="visible";const e=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,e.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,setTimeout(()=>{this.dialogElement.style.animation="",e.style.animation="",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement))},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):(this.dialogElement.style.visibility="visible",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement)))}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){var t;return`\n<div class="cl-dialog" role="dialog" aria-modal="true" aria-label="Popup" ${this.isStaticRenderMode()?'tabindex="0"':""}>\n <style>\n .cl-dialog {\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n z-index: ${e.zIndex};\n }\n\n .cl-dialog:focus {\n outline: none;\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(DialogLayout.dialogSelector):""}\n\n .cl-dialog-inner-content-wrapper {\n display: flex;\n flex-direction: column;\n align-items: end;\n }\n \n .cl-dialog-inner-content {\n position: relative;\n max-width: 100vw;\n }\n\n .cl-dialog-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n ${this.getOtherStyles()}\n \n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-dialog-inner-content-wrapper">\n <div class="cl-dialog-inner-content">\n <div class="cl-dialog-close-icon"></div>\n <div class="cl-dialog-content"></div>\n </div>\n </div>\n</div>\n`}getEntryAndDestroyAnimations(){return"\n@keyframes fadeInDialog {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes zoomInContent {\n 0% {\n transform: scale(0.5);\n }\n 100% {\n transform: scale(1);\n }\n}\n "}}DialogLayout.dialogSelector=".cl-dialog",DialogLayout.dialogContentWrapperSelector=".cl-dialog-inner-content-wrapper",DialogLayout.dialogContentSelector=".cl-dialog-content",DialogLayout.dialogCloseIconSelector=".cl-dialog-close-icon";export default DialogLayout;
package/layouts/floating-bar/FloatingBarLayout.js CHANGED
@@ -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+.1*e.width&&a.left<e.right-.1*e.width&&(a.height>0&&a.width>0&&a.top<i&&a.top>e.top-150&&(i=a.top))}return Math.max(0,e.top-i)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,i){this.containerElement=e,this.documentElement=t,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:o}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(o)}),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,i;null==t||t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(i=this.environmentUpdateListener)||void 0===i||i.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),o=this.isMobileEnv()?i.mobile:i.desktop,n=this.isBottomPosition(o)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${n} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){var e;return`\n <div class="cl-floating-bar" 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()},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAndDestroyAnimations(){return"\n@keyframes slideInTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n \n@keyframes slideInBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n "}}FloatingBarLayout.floatingBarSelector=".cl-floating-bar",FloatingBarLayout.floatingBarContentSelector=".cl-floating-bar-content",FloatingBarLayout.floatingBarCloseIconSelector=".cl-floating-bar-close-icon";export default FloatingBarLayout;
1
+ import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,i,o,n){super(t,e,i,o,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.floatingBarRootElement=document.createElement("div"),this.floatingBarRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBarElement=this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarSelector),this.floatingBarElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BAR),this.params.formVariantId&&this.floatingBarElement.setAttribute("cl-widget-id",this.params.formVariantId);const s=this.isMobileEnv();this.closeIconElement=this.floatingBarElement.querySelector(FloatingBarLayout.floatingBarCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector)),this.setCloseIconParams(s),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(s),this.floatingBarElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}getSharedParams(){return this.getDocumentModel().shared.floatingBar}isBottomPosition(t){return t.verticalPosition===WidgetVerticalPosition.BOTTOM}adjustBrandingPosition(t){const e=this.getSharedParams(),i=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(i)?this.brandingElement.style.top="-30px":this.brandingElement.style.bottom="-30px"}clearPosition(){const t=Array.from(this.floatingBarElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBarElement.style.getPropertyValue(t)]);this.floatingBarElement.removeAttribute("style"),t.forEach(([t,e])=>{this.floatingBarElement.style.setProperty(t,e)}),this.modifiedFloatingElement&&(this.modifiedFloatingElement.style.top=this.originalModifiedFloatingElementTop)}restoreHtmlBodyStyles(){this.modifiedHtmlBodyElement&&this.originalHtmlBodyElementMarginTop&&(this.modifiedHtmlBodyElement.style.marginTop=this.originalHtmlBodyElementMarginTop)}setTopPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.top="0px"}setBottomPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.bottom="0px"}setPosition(t){this.clearPosition(),this.restoreHtmlBodyStyles();const e=this.getSharedParams(),i=t?e.mobile:e.desktop,o=this.isBottomPosition(i);return o?(this.setBottomPosition(i),{isBottomPosition:o}):(this._setTopPosition(t,i),{isBottomPosition:o})}getOtherStyles(){return""}_setTopPosition(t,e){if(this.modifiedFloatingElement=null,this.modifiedHtmlBodyElement=null,this.calculatedOverflowAbove=0,"body"!==this.containerElement.tagName.toLowerCase()||!this.getDocumentModel().shared.actualSize||this.params.disableSmartPosition)return void this.setTopPosition(e);const i=this.getActualSizeByEnv(t);if(!i)return void this.setTopPosition(e);const o=i.height,n=parseFloat(o),s=this.containerElement.getRootNode(),l=this._getElementAtTheTopOfTheViewport(s);if(l){const t=this._findFloatingElement(l);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const i=n+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=i+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const a=n+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=a+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView||t.parentWindow)/2,i=t.querySelector('[cl-connector-root-element="DETACHED"]'),o=t.querySelector('[cl-connector-root-element="CONTENT_LOCKER"]');i&&(i.style.visibility="hidden"),o&&(o.style.visibility="hidden");const n=t.elementFromPoint(e,0);return i&&(i.style.visibility="visible"),o&&(o.style.visibility="visible"),n!==t.body?n:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,i=null;for(;e;){const t=e.ownerDocument;if(e===t.body||e===t.documentElement)break;const o=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===o.position){i=e;break}e=e.parentElement}return i}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let i=e.top;const o=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let n;for(;n=o.nextNode();){let o=0,s=n;for(;s!==t&&o<10;)s=s.parentElement,o++;if(o>=10)continue;const l=getComputedStyle(n);if("none"===l.display||"hidden"===l.visibility||0===parseFloat(l.opacity))continue;const a=n.getBoundingClientRect();a.right>e.left+.1*e.width&&a.left<e.right-.1*e.width&&(a.height>0&&a.width>0&&a.top<i&&a.top>e.top-150&&(i=a.top))}return Math.max(0,e.top-i)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,i){this.containerElement=e,this.documentElement=t,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:o}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(o)}),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,i;null==t||t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(i=this.environmentUpdateListener)||void 0===i||i.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),o=this.isMobileEnv()?i.mobile:i.desktop,n=this.isBottomPosition(o)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${n} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){var e;return`\n <div class="cl-floating-bar" 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()},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAndDestroyAnimations(){return"\n@keyframes slideInTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n \n@keyframes slideInBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n "}}FloatingBarLayout.floatingBarSelector=".cl-floating-bar",FloatingBarLayout.floatingBarContentSelector=".cl-floating-bar-content",FloatingBarLayout.floatingBarCloseIconSelector=".cl-floating-bar-close-icon";export default FloatingBarLayout;
package/layouts/floating-box/FloatingBoxLayout.js CHANGED
@@ -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()},1e3*this.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()},1e3*this.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()},1e3*this.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()},1e3*this.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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@claspo/document-connector",
3
- "version": "16.5.1",
3
+ "version": "16.5.3-scf.0",
4
4
  "scripts": {
5
5
  "test": "jest --no-cache --coverage",
6
6
  "build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
@@ -14,8 +14,8 @@
14
14
  "node": ">=18.16.0"
15
15
  },
16
16
  "dependencies": {
17
- "@claspo/common": "7.1.4",
18
- "@claspo/renderer": "18.4.0"
17
+ "@claspo/common": "7.1.4-scf.0",
18
+ "@claspo/renderer": "18.4.1"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@babel/core": "^7.28.5",