@claspo/document-connector 16.1.5 → 16.2.0-rc2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/UpdatingDocumentConnector.js +1 -1
- package/layouts/BaseLayout.d.ts +5 -4
- package/layouts/InAppLayoutFactory.d.ts +2 -1
- package/layouts/LayoutWithCloseIcon.d.ts +2 -0
- package/layouts/LayoutWithCloseIcon.js +1 -1
- package/layouts/content-locker/ContentLockerLayout.d.ts +15 -6
- package/layouts/content-locker/ContentLockerLayout.js +1 -1
- package/layouts/floating-bar/FloatingBarLayout.d.ts +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
import UpdatingEntryModule from"@claspo/renderer/UpdatingEntryModule";import LayoutFactory from"./layouts/LayoutFactory";import BaseDocumentConnector from"./BaseDocumentConnector";import{LayoutType}from"@claspo/common/LayoutType";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";export class UpdatingDocumentConnector extends BaseDocumentConnector{constructor(e){super(e);const{documentModel:t,layoutType:o,mouseInteractionStyles:
|
|
1
|
+
import UpdatingEntryModule from"@claspo/renderer/UpdatingEntryModule";import LayoutFactory from"./layouts/LayoutFactory";import BaseDocumentConnector from"./BaseDocumentConnector";import{LayoutType}from"@claspo/common/LayoutType";import ThemeCssVars from"@claspo/common/element/ThemeCssVars";export class UpdatingDocumentConnector extends BaseDocumentConnector{constructor(e){super(e);const{documentModel:t,layoutType:o,mouseInteractionStyles:n,componentRegister:s,componentResolver:i}=this.params;this.componentRegister=s,this.componentResolver=i;const r=new UpdatingEntryModule(t,this.componentResolver,this.componentRegister,n,this.params,o);this.setEntryModule(r)}async connect(e,t){let o;this.viewComponents=this.entryModule.init(e),super.addPropsRequestEventListener(document.body),this.params.layoutType!==LayoutType.DETACHED&&this.params.layoutType!==LayoutType.BUILT_IN&&(o={width:"100%",height:"100%"});const{layoutFactoryClass:n=LayoutFactory}=this.params;this.viewComponents.map((s,i)=>{var r,a;const d=n.create(Object.assign(Object.assign({},this.params),{optionalDocumentStyles:o,displayPosition:"absolute",zIndex:1,disableSmartPosition:!0,disableScrollbarCalculation:!0,disableLayoutAnimations:!0,viewIndex:i,renderMode:this.entryModule.renderMode}),this,this.entryModule.viewRouter,this.entryModule.compositionRoot.services.documentModel,this.entryModule.compositionRoot.services.resizeListener),c=document.createElement("div");c.classList.add("cl-widget"),c.appendChild(s);const l=t({viewComponent:s,viewModel:this.params.documentModel.views[i],index:i});e.appendChild(l.viewportElement),d.connect(c,l.viewContainerElement,this.entryModule),(null===(a=null===(r=this.params.documentModel.shared)||void 0===r?void 0:r.theme)||void 0===a?void 0:a.schema)&&ThemeCssVars.override(this.params.documentModel.shared.theme.schema,d.getConnectedElement()),this.controllers.push(d)}),this.entryModule.listenAction("*",(e,t)=>{this.emit(t,e)}),this.entryModule.listenContextAction("*",(e,t)=>{this.emit(t,e)})}disconnect(){super.disconnect(),this.entryModule.destroy(),this.controllers.forEach(e=>e.disconnect()),this.controllers=[]}destroy(){this.disconnect()}getDragEventListener(){return this.entryModule.dragEventListener}getHostElementById(e){return this.entryModule.getHostElementById(e)}getHostElementByPath(e){return this.entryModule.getHostElementByPath(e)}getContextRecordsMap(){return this.entryModule.getContextRecordsMap()}}
|
package/layouts/BaseLayout.d.ts
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
+
import DocumentModelService from '@claspo/renderer/document-model/DocumentModelService';
|
|
1
2
|
export default class BaseLayout {
|
|
2
3
|
params: any;
|
|
3
4
|
eventEmitter: any;
|
|
4
5
|
viewRouter: any;
|
|
5
|
-
documentModel:
|
|
6
|
+
documentModel: DocumentModelService;
|
|
6
7
|
resizeListener: any;
|
|
7
8
|
connectedElement: any;
|
|
8
9
|
brandingElement: any;
|
|
9
10
|
containerElement: any;
|
|
10
11
|
documentElement: any;
|
|
11
|
-
constructor(params: any, eventEmitter: any, viewRouter: any, documentModel:
|
|
12
|
+
constructor(params: any, eventEmitter: any, viewRouter: any, documentModel: DocumentModelService, resizeListener: any);
|
|
12
13
|
createSvgElement(boxWidth: any, boxHeight: any, html: any): SVGSVGElement;
|
|
13
14
|
getHideIcon(): SVGSVGElement;
|
|
14
15
|
getClaspoIcon(): SVGSVGElement;
|
|
@@ -24,9 +25,9 @@ export default class BaseLayout {
|
|
|
24
25
|
getViewportWidth(documentObject: any, windowObject: any): number;
|
|
25
26
|
getContainerElementHeight(): any;
|
|
26
27
|
getCurrentViewIndex(): any;
|
|
27
|
-
getActualSizeByEnv(isMobileEnv: any):
|
|
28
|
+
getActualSizeByEnv(isMobileEnv: any): import("@claspo/common/document/Document.interface").ClDocumentEnvironmentActualSize;
|
|
28
29
|
getViewContentContainer(): any;
|
|
29
30
|
changeViewAlignToTop(): void;
|
|
30
31
|
addWidgetContentClickEventListener(widgetContentElement: any): void;
|
|
31
|
-
getDocumentModel():
|
|
32
|
+
getDocumentModel(): import("@claspo/common/document/Document.interface").ClDocumentI;
|
|
32
33
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import ContentLockerLayout from "./content-locker/ContentLockerLayout";
|
|
2
|
+
import InAppSlideUpLayout from "./in-app-slide-up/InAppSlideUpLayout";
|
|
2
3
|
import LayoutFactory from "./LayoutFactory";
|
|
3
4
|
export default class InAppLayoutFactory extends LayoutFactory {
|
|
4
|
-
static create(params: any, eventEmitter: any, viewRouter: any, documentModel: any, resizeListener: any): ContentLockerLayout | import("./floating-bar/FloatingBarLayout").default | import("./floating-box/FloatingBoxLayout").default | import("./launcher/LauncherLayout").default | import("./detached/DialogLayout").default | import("./built-in/BuiltInLayout").default;
|
|
5
|
+
static create(params: any, eventEmitter: any, viewRouter: any, documentModel: any, resizeListener: any): ContentLockerLayout | import("./floating-bar/FloatingBarLayout").default | InAppSlideUpLayout | import("./floating-box/FloatingBoxLayout").default | import("./launcher/LauncherLayout").default | import("./detached/DialogLayout").default | import("./built-in/BuiltInLayout").default;
|
|
5
6
|
}
|
|
@@ -4,6 +4,7 @@ export default class LayoutWithCloseIcon extends BaseLayout {
|
|
|
4
4
|
closeIconElement: any;
|
|
5
5
|
disconnect(beforeDestroyCallback: any): void;
|
|
6
6
|
getDefaultCloseIconParams(): {
|
|
7
|
+
enabled: boolean;
|
|
7
8
|
desktop: {
|
|
8
9
|
verticalOffset: string;
|
|
9
10
|
horizontalOffset: string;
|
|
@@ -25,6 +26,7 @@ export default class LayoutWithCloseIcon extends BaseLayout {
|
|
|
25
26
|
};
|
|
26
27
|
applyCloseIconParams(element: any, params: any, isMobileEnv: any): void;
|
|
27
28
|
setCloseIconVisibility(element: any, params: any, currentViewIndex: any): void;
|
|
29
|
+
isCloseIconEnabled(params: any): boolean;
|
|
28
30
|
getInlineSvg(index: any): "" | "\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" | "\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" | "\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" | "\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" | "\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" | "\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" | "\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 " | "\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 " | "\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 " | "\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 ";
|
|
29
31
|
addCloseIconEventListener(): void;
|
|
30
32
|
}
|
|
@@ -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{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("boolean"==typeof l.enabled&&!l.enabled)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}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)})}}
|
|
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)})}}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import LayoutWithCloseIcon from "../LayoutWithCloseIcon";
|
|
2
|
+
import { ClDocumentOverlayEnvironmentParamsI } from '@claspo/common/document/Document.interface';
|
|
2
3
|
export default class ContentLockerLayout extends LayoutWithCloseIcon {
|
|
3
4
|
static contentLockerSelector: string;
|
|
4
5
|
static contentLockerContentSelector: string;
|
|
@@ -6,20 +7,28 @@ export default class ContentLockerLayout extends LayoutWithCloseIcon {
|
|
|
6
7
|
contentLockerRootElement: any;
|
|
7
8
|
contentLockerElement: any;
|
|
8
9
|
contentLockerContentElement: any;
|
|
9
|
-
|
|
10
|
+
removeOverlayStyles: any;
|
|
10
11
|
sharedUpdateListener: any;
|
|
12
|
+
viewPropsUpdateListener: any;
|
|
11
13
|
environmentUpdateListener: any;
|
|
12
14
|
navigationEndListener: any;
|
|
13
|
-
|
|
14
|
-
constructor(params: any, eventEmitter: any, viewRouter: any,
|
|
15
|
+
boundEscapeListener: any;
|
|
16
|
+
constructor(params: any, eventEmitter: any, viewRouter: any, documentModelService: any, resizeListener: any);
|
|
15
17
|
adjustBrandingPosition(): void;
|
|
16
|
-
|
|
18
|
+
addOverlayStyles(container: any): () => void;
|
|
17
19
|
setCloseIconParams(isMobileEnv: any): void;
|
|
18
20
|
connect(documentElement: any, containerElement: any, entryModule: any): any;
|
|
19
21
|
disconnect(beforeDestroyCallback: any): void;
|
|
20
|
-
centerContentIfNeeded(viewIndex:
|
|
22
|
+
centerContentIfNeeded(viewIndex: number): void;
|
|
21
23
|
resetCustomContentSize(): void;
|
|
22
|
-
setCustomSizeForContent(viewHostStyles: any): void;
|
|
24
|
+
setCustomSizeForContent(viewHostStyles: any, overlayEnvParams?: ClDocumentOverlayEnvironmentParamsI): void;
|
|
25
|
+
getContentPositionDetails(overlayEnvParams?: ClDocumentOverlayEnvironmentParamsI): {
|
|
26
|
+
horizontalAlign: string;
|
|
27
|
+
verticalAlign: string;
|
|
28
|
+
cssPropNameForHorizontalOffset: string | null;
|
|
29
|
+
cssPropNameForVerticalOffset: string | null;
|
|
30
|
+
};
|
|
23
31
|
updateScrollbar(isMobileEnv: any): void;
|
|
32
|
+
escapeListenerCallback(event: any): void;
|
|
24
33
|
_getTemplate(params: any): string;
|
|
25
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import debounce from"@claspo/common/async/debounce";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{RenderMode}from"@claspo/common/RenderMode";import GlobalScrollBlocker from"../GlobalScrollBlocker";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.
|
|
1
|
+
import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import debounce from"@claspo/common/async/debounce";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{RenderMode}from"@claspo/common/RenderMode";import GlobalScrollBlocker from"../GlobalScrollBlocker";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{ClWidgetHorizontalPosition,ClWidgetVerticalPosition}from"@claspo/common/document/Document.interface";class ContentLockerLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.contentLockerRootElement=document.createElement("div"),this.contentLockerRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.contentLockerElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerSelector),this.contentLockerContentElement=this.contentLockerRootElement.querySelector(ContentLockerLayout.contentLockerContentSelector),this.contentLockerElement.setAttribute("cl-connector-root-element",LayoutType.CONTENT_LOCKER),this.params.formVariantId&&this.contentLockerElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=document.createElement("div"),this.closeIconElement.classList.add("cl-content-locker-close-icon"),this.contentLockerContentElement.appendChild(this.closeIconElement),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.contentLockerElement.querySelector(ContentLockerLayout.contentLockerContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.contentLockerElement.appendChild(this.brandingElement),this.addBrandingElementListeners());const s=this.getDocumentModel().shared.closeIcon;s&&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(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible"}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.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(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;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(`${DocumentModelUpdateType.COMPONENT_PROPS_UPDATE}_${e}`,debounce(()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())},5))}return this.contentLockerElement}disconnect(e){var t,n,o,i,s;super.disconnect(e),null==e||e(),this.boundEscapeListener&&window.removeEventListener("keyup",this.boundEscapeListener),this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),null===(t=this.removeOverlayStyles)||void 0===t||t.call(this),this.contentLockerElement.remove(),null===(n=this.sharedUpdateListener)||void 0===n||n.off(),null===(o=this.viewPropsUpdateListener)||void 0===o||o.off(),null===(i=this.environmentUpdateListener)||void 0===i||i.off(),null===(s=this.navigationEndListener)||void 0===s||s.off()}centerContentIfNeeded(e){var t,n;const o=this.getDocumentModel(),i=o.views[e],s=this.isMobileEnv(),l=s?i.props.adaptiveStyles.mobile[0].styleAttributes:i.props.adaptiveStyles.desktop[0].styleAttributes,r="100%"===l.width&&"100%"===l.height;this.documentElement.style.width=l.width,this.documentElement.style.minWidth=l.minWidth,this.documentElement.style.height=l.height,this.documentElement.style.minHeight=l.minHeight;const c=s?null===(t=o.shared.overlay)||void 0===t?void 0:t.mobile:null===(n=o.shared.overlay)||void 0===n?void 0:n.desktop;r?this.resetCustomContentSize():this.setCustomSizeForContent(l,c)}resetCustomContentSize(){this.contentLockerElement.style.display="",this.contentLockerElement.style.justifyContent="",this.contentLockerElement.style.alignItems="",this.contentLockerContentElement.style.width="100%",this.contentLockerContentElement.style.minWidth="",this.contentLockerContentElement.style.height="100%",this.contentLockerContentElement.style.minHeight="",this.contentLockerContentElement.style.margin=""}setCustomSizeForContent(e,t){const{horizontalAlign:n,verticalAlign:o,cssPropNameForHorizontalOffset:i,cssPropNameForVerticalOffset:s}=this.getContentPositionDetails(t);this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent=n,this.contentLockerElement.style.alignItems=o,this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight,this.contentLockerContentElement.style.margin="",(null==t?void 0:t.horizontalOffset)&&i&&(this.contentLockerContentElement.style[i]=t.horizontalOffset),(null==t?void 0:t.verticalOffset)&&s&&(this.contentLockerContentElement.style[s]=t.verticalOffset)}getContentPositionDetails(e){let t,n,o=null,i=null;return(null==e?void 0:e.horizontalPosition)?e.horizontalPosition===ClWidgetHorizontalPosition.LEFT?(t="flex-start",o="marginLeft"):e.horizontalPosition===ClWidgetHorizontalPosition.RIGHT?(t="flex-end",o="marginRight"):t="center":t="center",(null==e?void 0:e.verticalPosition)?e.verticalPosition===ClWidgetVerticalPosition.TOP?(n="flex-start",i="marginTop"):e.verticalPosition===ClWidgetVerticalPosition.BOTTOM?(n="flex-end",i="marginBottom"):n="center":n="center",{horizontalAlign:t,verticalAlign:n,cssPropNameForHorizontalOffset:o,cssPropNameForVerticalOffset:i}}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t||!this.getDocumentModel().shared.actualSize)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",t.style.minHeight=`${o}px`,this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}_getTemplate(e){var t,n;return`\n <div class="cl-content-locker">\n <style>\n .cl-content-locker {\n display: block;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n z-index: ${String(null!==(n=e.zIndex)&&void 0!==n?n:Number.MAX_SAFE_INTEGER)}\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(ContentLockerLayout.contentLockerSelector):""}\n\n .cl-content-locker-content {\n width: 100%;\n height: 100%;\n min-height: fit-content;\n }\n\n .cl-content-locker-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n </style>\n\n <div class="cl-content-locker-content"></div>\n </div>`}}ContentLockerLayout.contentLockerSelector=".cl-content-locker",ContentLockerLayout.contentLockerContentSelector=".cl-content-locker-content",ContentLockerLayout.contentLockerCloseIconSelector=".cl-content-locker-close-icon";export default ContentLockerLayout;
|
|
@@ -15,7 +15,7 @@ export default class FloatingBarLayout extends LayoutWithCloseIcon {
|
|
|
15
15
|
sharedUpdateListener: any;
|
|
16
16
|
environmentUpdateListener: any;
|
|
17
17
|
constructor(params: any, eventEmitter: any, viewRouter: any, documentModel: any, resizeListener: any);
|
|
18
|
-
getSharedParams():
|
|
18
|
+
getSharedParams(): import("@claspo/common/document/Document.interface").ClFloatingBarParamsI;
|
|
19
19
|
isBottomPosition(params: any): boolean;
|
|
20
20
|
adjustBrandingPosition(isMobileEnv: any): void;
|
|
21
21
|
clearPosition(): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@claspo/document-connector",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.2.0-rc2",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"test": "jest --no-cache --coverage",
|
|
6
6
|
"build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"node": ">=18.16.0"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@claspo/common": "7.0.
|
|
18
|
-
"@claspo/renderer": "18.0.
|
|
17
|
+
"@claspo/common": "7.0.5-rc1",
|
|
18
|
+
"@claspo/renderer": "18.0.6-rc1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@babel/core": "^7.28.5",
|