@claspo/document-connector 15.0.4 → 15.0.5-theme.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BaseDocumentConnector.js +1 -1
- package/DocumentConnectorEventType.d.ts +9 -9
- package/DocumentConnectorEventType.js +1 -1
- package/DocumentConnectorEvents.interface.d.ts +10 -0
- package/DocumentConnectorEvents.interface.js +1 -0
- package/InlineEvents.d.ts +7 -0
- package/InlineEvents.js +1 -0
- package/PreviewBackgroundStyles.js +1 -1
- package/README.md +227 -0
- package/StaticDocumentConnector.d.ts +4 -0
- package/StaticDocumentConnector.js +1 -1
- package/layouts/content-locker/ContentLockerLayout.js +1 -1
- package/layouts/detached/DialogLayout.js +1 -1
- package/layouts/floating-bar/FloatingBarLayout.js +1 -1
- package/layouts/floating-box/FloatingBoxLayout.js +1 -1
- package/layouts/launcher/LauncherLayout.js +1 -1
- package/package.json +10 -6
package/BaseDocumentConnector.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import ThemeCssVars from"@claspo/common/element/ThemeCssVars";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class BaseDocumentConnector extends DefaultEventEmitter{constructor(e){super(),this.propsRequestListener=e=>{e.stopPropagation();let t=e.detail.id,o=e.detail.widgetId;if(o&&this.params.formVariantId&&this.params.formVariantId!==o)return;let r=DocumentUtils.getNodeById(this.entryModule.compositionRoot.services.documentModel.getViews(),t);r&&(e.detail.props=this.entryModule.componentFactory.constructProps(r,this.entryModule.viewRenderer.viewResourceManager))},this.params=e,this.entryModule=null,this.controllers=[],this.container=null}disconnect(){var e;null===(e=this.container)||void 0===e||e.removeEventListener("cl-props-request",this.propsRequestListener)}addPropsRequestEventListener(e){this.container=e,e.addEventListener("cl-props-request",this.propsRequestListener)}setEntryModule(e){this.entryModule=e}navigate(e){this.entryModule&&this.entryModule.viewRouter&&this.entryModule.viewRouter.navigate(e)}performAction(e,t){const o=this.entryModule.performAction(e,t);return this.controllers.forEach(o=>{if(e===DocumentModelUpdateType.THEME_UPDATE)ThemeCssVars.override(t.schema,o.getConnectedElement())}),o}setEnvironment(e){this.entryModule.performAction(DocumentModelUpdateType.ENVIRONMENT_UPDATE,e)}getComponentManifests(){return this.componentResolver.getComponentManifests()}}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
declare
|
|
2
|
-
CONTACT_ID_WAS_RECEIVED
|
|
3
|
-
CLOSE_WIDGET
|
|
4
|
-
SHOW_WIDGET
|
|
5
|
-
CLOSE_ICON_CLICKED
|
|
6
|
-
BRANDING_ELEMENT_CLICKED
|
|
7
|
-
CONTACT_DATA_SUBMIT
|
|
8
|
-
WIDGET_CONTENT_CLICKED
|
|
9
|
-
}
|
|
1
|
+
declare enum DocumentConnectorEventType {
|
|
2
|
+
CONTACT_ID_WAS_RECEIVED = "CONTACT_ID_WAS_RECEIVED",
|
|
3
|
+
CLOSE_WIDGET = "CLOSE_WIDGET",
|
|
4
|
+
SHOW_WIDGET = "SHOW_WIDGET",
|
|
5
|
+
CLOSE_ICON_CLICKED = "CLOSE_ICON_CLICKED",
|
|
6
|
+
BRANDING_ELEMENT_CLICKED = "BRANDING_ELEMENT_CLICKED",
|
|
7
|
+
CONTACT_DATA_SUBMIT = "CONTACT_DATA_SUBMIT",
|
|
8
|
+
WIDGET_CONTENT_CLICKED = "WIDGET_CONTENT_CLICKED"
|
|
9
|
+
}
|
|
10
10
|
export default DocumentConnectorEventType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
var DocumentConnectorEventType;!function(C){C.CONTACT_ID_WAS_RECEIVED="CONTACT_ID_WAS_RECEIVED",C.CLOSE_WIDGET="CLOSE_WIDGET",C.SHOW_WIDGET="SHOW_WIDGET",C.CLOSE_ICON_CLICKED="CLOSE_ICON_CLICKED",C.BRANDING_ELEMENT_CLICKED="BRANDING_ELEMENT_CLICKED",C.CONTACT_DATA_SUBMIT="CONTACT_DATA_SUBMIT",C.WIDGET_CONTENT_CLICKED="WIDGET_CONTENT_CLICKED"}(DocumentConnectorEventType||(DocumentConnectorEventType={}));export default DocumentConnectorEventType;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import DocumentConnectorEventType from './DocumentConnectorEventType';
|
|
2
|
+
import InlineEvents from './InlineEvents';
|
|
3
|
+
import SysActionTypes from '@claspo/renderer/action/SysActionTypes';
|
|
4
|
+
import SysEventTypes from '@claspo/renderer/common/SysEventTypes';
|
|
5
|
+
import SysRouterEvent from '@claspo/renderer/RouterEvent';
|
|
6
|
+
type SysActionTypesT = typeof SysActionTypes[keyof typeof SysActionTypes];
|
|
7
|
+
type SysEventTypesT = typeof SysEventTypes[keyof typeof SysEventTypes];
|
|
8
|
+
type SysRouterEventT = typeof SysRouterEvent[keyof typeof SysRouterEvent];
|
|
9
|
+
export type DocumentConnectorEventNameT = DocumentConnectorEventType | InlineEvents | SysActionTypesT | SysEventTypesT | SysRouterEventT;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
declare enum InlineEvents {
|
|
2
|
+
INVALID_CONTACT_DATA_SUBMIT_ATTEMPT = "INVALID_CONTACT_DATA_SUBMIT_ATTEMPT",
|
|
3
|
+
SET_SUBSCRIBE_CONTACT_BUTTON_AS_INVALID = "SET_SUBSCRIBE_CONTACT_BUTTON_AS_INVALID",
|
|
4
|
+
SET_SUBSCRIBE_CONTACT_BUTTON_AS_VALID = "SET_SUBSCRIBE_CONTACT_BUTTON_AS_VALID",
|
|
5
|
+
WIDGET_NAVIGATION_STATE_NOT_FOUND = "WIDGET_NAVIGATION_STATE_NOT_FOUND"
|
|
6
|
+
}
|
|
7
|
+
export default InlineEvents;
|
package/InlineEvents.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var InlineEvents;!function(T){T.INVALID_CONTACT_DATA_SUBMIT_ATTEMPT="INVALID_CONTACT_DATA_SUBMIT_ATTEMPT",T.SET_SUBSCRIBE_CONTACT_BUTTON_AS_INVALID="SET_SUBSCRIBE_CONTACT_BUTTON_AS_INVALID",T.SET_SUBSCRIBE_CONTACT_BUTTON_AS_VALID="SET_SUBSCRIBE_CONTACT_BUTTON_AS_VALID",T.WIDGET_NAVIGATION_STATE_NOT_FOUND="WIDGET_NAVIGATION_STATE_NOT_FOUND"}(InlineEvents||(InlineEvents={}));export default InlineEvents;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
class PreviewBackgroundStyles{static getFullScreen(){return`\n\n <style>\n\n .holder {\n height: 100%;\n overflow: hidden;\n max-width: 100%;\n border-radius: 4px;\n box-sizing: border-box;\n }\n\n .cover-wrapper {\n display: flex;\n flex-direction: column;\n gap: 5px;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n }\n\n .cover-row-small {\n height: 10%;\n border-radius: 4px;\n background: ${PreviewBackgroundStyles.blockBackground};\n }\n\n .cover-row {\n width: 100%;\n height: 37%;\n border-radius: 4px;\n background: ${PreviewBackgroundStyles.blockBackground};\n }\n\n\n .d-flex {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n }\n \n .d-flex--height {\n gap: 5px;\n height: 37%;\n }\n\n .cover-col {\n height: 100%;\n background: ${PreviewBackgroundStyles.blockBackground};\n width: 100%;\n border-radius: 4px;\n }\n\n </style>\n\n <div class="holder">\n <div class="cover-wrapper">\n <div class="cover-row-small"></div>\n <div class="cover-row"></div>\n <div class="cover-row-small"></div>\n <div class="d-flex d-flex--height flex-row justify-content-between">\n <div class="cover-col"></div>\n <div class="cover-col"></div>\n <div class="cover-col"></div>\n </div>\n </div>\n </div>\n `}static getBuiltInTopSection(){const e=document.createElement("div");return e.className="preview-placeholder-element",e.style.width="100%",e.style.height="100%",e.style.borderRadius="4px",e.style.background=PreviewBackgroundStyles.blockBackground,e}static getBuiltInBottomSection(){const e=document.createElement("div");e.className="preview-placeholder-element",e.style.display="flex",e.style.flexDirection="row",e.style.justifyContent="space-between",e.style.gap="15px",e.style.width="100%",e.style.height="100%",e.style.borderRadius="4px";for(let n=0;n<3;n++){const n=document.createElement("div");n.style.background=PreviewBackgroundStyles.blockBackground,n.style.width="100%",n.style.height="100%",e.appendChild(n)}return e}}PreviewBackgroundStyles.blockBackground="#EDEDED";export default PreviewBackgroundStyles;
|
package/README.md
ADDED
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
# @claspo/document-connector
|
|
2
|
+
|
|
3
|
+
Connection layer between Claspo widgets and the host document. Manages widget layouts, positioning, and resource loading.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @claspo/document-connector
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**Requirements:** Node.js >= 18.16.0
|
|
12
|
+
|
|
13
|
+
## Package Overview
|
|
14
|
+
|
|
15
|
+
This package provides:
|
|
16
|
+
- **Document Connectors**: Bridge between widgets and host pages
|
|
17
|
+
- **Layout Management**: Various widget display layouts (popup, floating bar, etc.)
|
|
18
|
+
- **Resource Loading**: Font loading, asset management
|
|
19
|
+
- **Event System**: Widget lifecycle events
|
|
20
|
+
|
|
21
|
+
## Architecture
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
┌─────────────────────────────────────────────────────────┐
|
|
25
|
+
│ Host Document │
|
|
26
|
+
├─────────────────────────────────────────────────────────┤
|
|
27
|
+
│ ┌───────────────────────────────────────────────────┐ │
|
|
28
|
+
│ │ Document Connector │ │
|
|
29
|
+
│ │ ┌─────────────┐ ┌─────────────┐ ┌───────────┐ │ │
|
|
30
|
+
│ │ │ Layout │ │ Resource │ │ Event │ │ │
|
|
31
|
+
│ │ │ Manager │ │ Loader │ │ System │ │ │
|
|
32
|
+
│ │ └─────────────┘ └─────────────┘ └───────────┘ │ │
|
|
33
|
+
│ └───────────────────────────────────────────────────┘ │
|
|
34
|
+
│ │ │
|
|
35
|
+
│ ┌───────────────────────▼───────────────────────────┐ │
|
|
36
|
+
│ │ @claspo/renderer │ │
|
|
37
|
+
│ │ (Web Components Engine) │ │
|
|
38
|
+
│ └───────────────────────────────────────────────────┘ │
|
|
39
|
+
└─────────────────────────────────────────────────────────┘
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Document Connectors
|
|
43
|
+
|
|
44
|
+
### StaticDocumentConnector
|
|
45
|
+
|
|
46
|
+
For script SDK integrations where the widget HTML is pre-rendered.
|
|
47
|
+
|
|
48
|
+
```typescript
|
|
49
|
+
import StaticDocumentConnector from '@claspo/document-connector/StaticDocumentConnector';
|
|
50
|
+
|
|
51
|
+
const connector = new StaticDocumentConnector({
|
|
52
|
+
formVariantId: 'widget-123',
|
|
53
|
+
layoutType: 'DETACHED',
|
|
54
|
+
// ... configuration
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
await connector.connect();
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### UpdatingDocumentConnector
|
|
61
|
+
|
|
62
|
+
For editor environments with real-time updates.
|
|
63
|
+
|
|
64
|
+
```typescript
|
|
65
|
+
import UpdatingDocumentConnector from '@claspo/document-connector/UpdatingDocumentConnector';
|
|
66
|
+
|
|
67
|
+
const connector = new UpdatingDocumentConnector({
|
|
68
|
+
formVariantId: 'widget-123',
|
|
69
|
+
// ... configuration
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
connector.updateDocument(newModel);
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Layout Types
|
|
76
|
+
|
|
77
|
+
| Layout | Description | Use Case |
|
|
78
|
+
|--------|-------------|----------|
|
|
79
|
+
| `DETACHED` | Modal dialog overlay | Popups, announcements |
|
|
80
|
+
| `FLOATING_BAR` | Fixed position bar | Cookie notices, promotions |
|
|
81
|
+
| `FLOATING_BOX` | Floating corner widget | Chat, feedback |
|
|
82
|
+
| `BUILT_IN` | Inline embedded | In-page content |
|
|
83
|
+
| `CONTENT_LOCKER` | Full-page overlay | Gated content |
|
|
84
|
+
| `LAUNCHER` | Trigger button | Widget activation |
|
|
85
|
+
| `IN_APP_POP_UP` | Mobile app popup | Mobile SDK |
|
|
86
|
+
| `IN_APP_SLIDE_UP` | Mobile slide-up | Mobile SDK |
|
|
87
|
+
|
|
88
|
+
### Layout Configuration
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
const config: WidgetInitConfigI = {
|
|
92
|
+
formVariantId: 'widget-123',
|
|
93
|
+
layoutType: 'FLOATING_BOX',
|
|
94
|
+
layoutParams: {
|
|
95
|
+
position: 'bottom-right',
|
|
96
|
+
offsetX: 20,
|
|
97
|
+
offsetY: 20
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Events
|
|
103
|
+
|
|
104
|
+
### Event Types
|
|
105
|
+
|
|
106
|
+
```typescript
|
|
107
|
+
import { DocumentConnectorEventType } from '@claspo/document-connector/DocumentConnectorEventType';
|
|
108
|
+
|
|
109
|
+
// Available events
|
|
110
|
+
DocumentConnectorEventType.WIDGET_SHOWN
|
|
111
|
+
DocumentConnectorEventType.WIDGET_CLOSED
|
|
112
|
+
DocumentConnectorEventType.FORM_SUBMITTED
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### Event Listening
|
|
116
|
+
|
|
117
|
+
```typescript
|
|
118
|
+
connector.on(DocumentConnectorEventType.WIDGET_SHOWN, () => {
|
|
119
|
+
console.log('Widget displayed');
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
connector.on(DocumentConnectorEventType.WIDGET_CLOSED, () => {
|
|
123
|
+
console.log('Widget closed');
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
connector.on(DocumentConnectorEventType.FORM_SUBMITTED, (data) => {
|
|
127
|
+
console.log('Form submitted:', data);
|
|
128
|
+
});
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## Resource Loading
|
|
132
|
+
|
|
133
|
+
### Google Fonts
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
import GoogleFontsLoader from '@claspo/document-connector/layouts/GoogleFontsLoader';
|
|
137
|
+
|
|
138
|
+
GoogleFontsLoader.load(['Roboto', 'Open Sans']);
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## Security Architecture
|
|
142
|
+
|
|
143
|
+
### Isolation Mechanisms
|
|
144
|
+
|
|
145
|
+
1. **Shadow DOM** - Widget content is encapsulated
|
|
146
|
+
2. **CSS Isolation** - Styles don't leak to host page
|
|
147
|
+
3. **Event Boundaries** - Events are scoped to widget
|
|
148
|
+
|
|
149
|
+
### Resource Validation
|
|
150
|
+
|
|
151
|
+
- All external resources validated before loading
|
|
152
|
+
- URL validation using `@claspo/common/url/sanitizeUrl`
|
|
153
|
+
- MIME type verification for loaded assets
|
|
154
|
+
|
|
155
|
+
### CSP Requirements
|
|
156
|
+
|
|
157
|
+
See [docs/CSP_CONFIGURATION.md](./docs/CSP_CONFIGURATION.md) for Content Security Policy configuration.
|
|
158
|
+
|
|
159
|
+
## Privacy & Consent
|
|
160
|
+
|
|
161
|
+
> **CRITICAL NOTICE**
|
|
162
|
+
>
|
|
163
|
+
> This package assumes user consent has been obtained **BEFORE** widget initialization.
|
|
164
|
+
>
|
|
165
|
+
> **Client Responsibilities:**
|
|
166
|
+
> - Collecting user consent for data processing
|
|
167
|
+
> - Managing consent preferences and withdrawals
|
|
168
|
+
> - Handling data subject rights (access, deletion, portability)
|
|
169
|
+
> - GDPR/CCPA/LGPD compliance for your jurisdiction
|
|
170
|
+
>
|
|
171
|
+
> Claspo widgets process data based on the assumption that your application has already obtained proper consent. See [docs/GDPR_COMPLIANCE.md](./docs/GDPR_COMPLIANCE.md) for details.
|
|
172
|
+
|
|
173
|
+
## API Reference
|
|
174
|
+
|
|
175
|
+
### BaseDocumentConnector
|
|
176
|
+
|
|
177
|
+
Base class for all connectors.
|
|
178
|
+
|
|
179
|
+
```typescript
|
|
180
|
+
class BaseDocumentConnector extends DefaultEventEmitter {
|
|
181
|
+
params: WidgetInitConfigI;
|
|
182
|
+
container: HTMLElement | null;
|
|
183
|
+
|
|
184
|
+
disconnect(): void;
|
|
185
|
+
navigate(viewIndex: number): void;
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
### StaticDocumentConnector
|
|
190
|
+
|
|
191
|
+
```typescript
|
|
192
|
+
class StaticDocumentConnector extends BaseDocumentConnector {
|
|
193
|
+
connect(): Promise<void>;
|
|
194
|
+
show(): void;
|
|
195
|
+
close(): void;
|
|
196
|
+
}
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### UpdatingDocumentConnector
|
|
200
|
+
|
|
201
|
+
```typescript
|
|
202
|
+
class UpdatingDocumentConnector extends BaseDocumentConnector {
|
|
203
|
+
updateDocument(model: DocumentModelI): void;
|
|
204
|
+
setEnvironment(env: EnvironmentI): void;
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
## Security Documentation
|
|
209
|
+
|
|
210
|
+
- [CSP Configuration](./docs/CSP_CONFIGURATION.md) - Content Security Policy setup
|
|
211
|
+
- [Resource Loading Security](./docs/RESOURCE_LOADING_SECURITY.md) - Asset validation
|
|
212
|
+
- [GDPR Compliance](./docs/GDPR_COMPLIANCE.md) - Privacy requirements
|
|
213
|
+
|
|
214
|
+
## Dependencies
|
|
215
|
+
|
|
216
|
+
- `@claspo/common` - Shared utilities
|
|
217
|
+
- `@claspo/renderer` - Web Components rendering engine
|
|
218
|
+
|
|
219
|
+
## License
|
|
220
|
+
|
|
221
|
+
Proprietary - Claspo Inc.
|
|
222
|
+
|
|
223
|
+
## Links
|
|
224
|
+
|
|
225
|
+
- [Documentation](https://docs.claspo.io/docs/claspodocument-connector)
|
|
226
|
+
- [Security Policy](../SECURITY.md)
|
|
227
|
+
- [Privacy Policy](../PRIVACY.md)
|
|
@@ -3,6 +3,7 @@ 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 { DocumentConnectorEventNameT } from './DocumentConnectorEvents.interface';
|
|
6
7
|
export default class StaticDocumentConnector extends BaseDocumentConnector {
|
|
7
8
|
componentRegister: WcRegister;
|
|
8
9
|
componentResolver: WcResolver;
|
|
@@ -11,5 +12,8 @@ export default class StaticDocumentConnector extends BaseDocumentConnector {
|
|
|
11
12
|
connect(containerElement: HTMLElement): Promise<any>;
|
|
12
13
|
disconnect(): void;
|
|
13
14
|
destroy(): void;
|
|
15
|
+
on(eventName: DocumentConnectorEventNameT | '*', listener: (value: any, eventName: string, params?: any) => void): {
|
|
16
|
+
off: () => void;
|
|
17
|
+
};
|
|
14
18
|
_initializeRenderer(containerElement: HTMLElement, htmlDocumentObject: Document): Promise<any>;
|
|
15
19
|
}
|
|
@@ -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";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.googleFontsLoader=null;const{documentModel:o,translations:t,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister);const i=new StaticEntryModule(o,this.componentResolver,this.componentRegister,e,t,s,n);this.setEntryModule(i)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader;const o=e.getRootNode();return this.params.disableGoogleFonts||await this.googleFontsLoader.load(this.params.documentModel.shared.googleFonts,o),this._initializeRenderer(e,o)}disconnect(){var e;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)||void 0===e||e.cleanup()}destroy(){this.disconnect()}async _initializeRenderer(e,o){var t,s,n;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const r=this.entryModule.init(o);r.style.display="flex";const{layoutFactoryClass:i=LayoutFactory,layoutType:a,documentModel:c}=this.params,d=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(t=null==c?void 0:c.shared)||void 0===t?void 0:t.zIndex)&&void 0!==s?s:getZIndexByLayoutType(a)});return this.controllers.push(i.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)),super.addPropsRequestEventListener(r),this.params.formVariantId?r.classList.add("cl-widget-"+this.params.formVariantId):r.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,o)=>{this.emit(o,e),o===DocumentConnectorEventType.CLOSE_WIDGET&&e&&"function"==typeof e&&e()}),null===(n=this.controllers[0])||void 0===n?void 0:n.connect(r,e,this.entryModule)}}
|
|
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";export default class StaticDocumentConnector extends BaseDocumentConnector{constructor(e){super(e),this.googleFontsLoader=null;const{documentModel:o,translations:t,trackingService:s,layoutType:n,bundledComponentClasses:r}=e;this.componentRegister=new WcRegister(r),this.componentResolver=new WcResolver(RenderMode.STATIC,this.componentRegister);const i=new StaticEntryModule(o,this.componentResolver,this.componentRegister,e,t,s,n);this.setEntryModule(i)}async connect(e){this.googleFontsLoader=new GoogleFontsLoader;const o=e.getRootNode();return this.params.disableGoogleFonts||await this.googleFontsLoader.load(this.params.documentModel.shared.googleFonts,o),this._initializeRenderer(e,o)}disconnect(){var e;super.disconnect(),this.controllers[0]&&this.controllers[0].disconnect(()=>{this.entryModule&&this.entryModule.viewRouter&&this.entryModule.compositionRoot&&this.entryModule.destroy()}),this.controllers=[],null===(e=this.googleFontsLoader)||void 0===e||e.cleanup()}destroy(){this.disconnect()}on(e,o){return super.on(e,o)}async _initializeRenderer(e,o){var t,s,n;await this.componentResolver.loadComponentsIfNecessary(this.params.documentModel,this.params.staticResourcesUrl);const r=this.entryModule.init(o);r.style.display="flex";const{layoutFactoryClass:i=LayoutFactory,layoutType:a,documentModel:c}=this.params,d=Object.assign(Object.assign({},this.params),{zIndex:null!==(s=null===(t=null==c?void 0:c.shared)||void 0===t?void 0:t.zIndex)&&void 0!==s?s:getZIndexByLayoutType(a)});return this.controllers.push(i.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)),super.addPropsRequestEventListener(r),this.params.formVariantId?r.classList.add("cl-widget-"+this.params.formVariantId):r.classList.add("cl-widget"),this.entryModule.listenAction("*",(e,o)=>{this.emit(o,e),o===DocumentConnectorEventType.CLOSE_WIDGET&&e&&"function"==typeof e&&e()}),null===(n=this.controllers[0])||void 0===n?void 0:n.connect(r,e,this.entryModule)}}
|
|
@@ -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";
|
|
1
|
+
import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import debounce from"@claspo/common/async/debounce";import SysRouterEvent from"@claspo/renderer/RouterEvent";import{RenderMode}from"@claspo/common/RenderMode";class ContentLockerLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){var s,l;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.contentLockerElement.style.position=null!==(s=this.params.displayPosition)&&void 0!==s?s:"fixed",this.contentLockerElement.style.zIndex=String(null!==(l=this.params.zIndex)&&void 0!==l?l:Number.MAX_SAFE_INTEGER),this.getDocumentModel().shared.closeIcon&&(this.closeIconElement=document.createElement("div"),this.closeIconElement.classList.add("cl-content-locker-close-icon"),this.contentLockerContentElement.appendChild(this.closeIconElement),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.contentLockerElement.querySelector(ContentLockerLayout.contentLockerContentSelector)),this.setCloseIconParams(this.isMobileEnv())),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.contentLockerElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}adjustBrandingPosition(){this.brandingElement.style.right="10px",this.brandingElement.style.bottom="10px"}addBlurryBackdrop(e){const t="backdropFilter",n="blur(20px)";e.style[t]=n;const o=new MutationObserver(o=>{o.forEach(o=>{var i;"attributes"===o.type&&"style"===o.attributeName&&((null===(i=e.style[t])||void 0===i?void 0:i.includes(n))||(e.style[t]=n))})});return o.observe(e,{attributes:!0,attributeFilter:["style"]}),()=>o.disconnect()}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&document.body.classList.add("cl-noscroll"),this.removeBlurryBackdrop=this.addBlurryBackdrop(this.contentLockerElement),this.contentLockerContentElement.appendChild(e),t.appendChild(this.contentLockerElement),this.setConnectedElement(this.contentLockerElement),this.updateScrollbar(this.isMobileEnv()),this.contentLockerContentElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.contentLockerContentElement.style.visibility="visible"}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv),this.centerContentIfNeeded(this.getCurrentViewIndex())},5));const o=this.params.renderMode===RenderMode.STATIC;return this.centerContentIfNeeded(this.getCurrentViewIndex()),o&&(this.navigationEndListener=this.eventEmitter.on(SysRouterEvent.NAVIGATION_END,()=>{this.centerContentIfNeeded(this.getCurrentViewIndex())})),this.contentLockerElement}disconnect(e){var t,n,o,i;super.disconnect(e),null==e||e(),this.params.disableGlobalScroll&&document.body.classList.remove("cl-noscroll"),null===(t=this.removeBlurryBackdrop)||void 0===t||t.call(this),this.contentLockerElement.remove(),null===(n=this.sharedUpdateListener)||void 0===n||n.off(),null===(o=this.environmentUpdateListener)||void 0===o||o.off(),null===(i=this.navigationEndListener)||void 0===i||i.off()}centerContentIfNeeded(e){const t=this.getDocumentModel().views[e],n=this.isMobileEnv()?t.props.adaptiveStyles.mobile[0].styleAttributes:t.props.adaptiveStyles.desktop[0].styleAttributes;"100%"===n.width&&"100%"===n.height?this.resetCustomContentSize():this.setCustomSizeForContent(n)}resetCustomContentSize(){this.originalDocumentElementStyles&&(this.documentElement.style.width=this.originalDocumentElementStyles.width,this.documentElement.style.minWidth=this.originalDocumentElementStyles.minWidth,this.documentElement.style.height=this.originalDocumentElementStyles.height,this.documentElement.style.minHeight=this.originalDocumentElementStyles.minHeight),this.contentLockerElement.style.display="",this.contentLockerElement.style.justifyContent="",this.contentLockerElement.style.alignItems="",this.contentLockerContentElement.style.width="100%",this.contentLockerContentElement.style.minWidth="",this.contentLockerContentElement.style.height="100%",this.contentLockerContentElement.style.minHeight=""}setCustomSizeForContent(e){this.originalDocumentElementStyles={width:this.documentElement.style.width,minWidth:this.documentElement.style.minWidth,height:this.documentElement.style.height,minHeight:this.documentElement.style.minHeight},this.documentElement.style.width=e.width,this.documentElement.style.minWidth=e.minWidth,this.documentElement.style.height=e.height,this.documentElement.style.minHeight=e.minHeight,this.contentLockerElement.style.display="flex",this.contentLockerElement.style.justifyContent="center",this.contentLockerElement.style.alignItems="center",this.contentLockerContentElement.style.width=e.width,this.contentLockerContentElement.style.minWidth=e.minWidth,this.contentLockerContentElement.style.height=e.height,this.contentLockerContentElement.style.minHeight=e.minHeight}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t||!this.getDocumentModel().shared.actualSize)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",t.style.minHeight=`${o}px`,this.changeViewAlignToTop())}_getTemplate(e){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 }\n\n ${e.disabled?this.getDisabledWidgetStyles(ContentLockerLayout.contentLockerSelector):""}\n\n .cl-content-locker-content {\n width: 100%;\n height: 100%;\n min-height: fit-content;\n }\n\n .cl-noscroll {\n overflow: hidden !important;\n }\n\n .cl-content-locker-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n </style>\n\n <div class="cl-content-locker-content"></div>\n </div>`}}ContentLockerLayout.contentLockerSelector=".cl-content-locker",ContentLockerLayout.contentLockerContentSelector=".cl-content-locker-content",ContentLockerLayout.contentLockerCloseIconSelector=".cl-content-locker-close-icon";export default ContentLockerLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";
|
|
1
|
+
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";class DialogLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){var s;super(e,t,n,o,i),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this.zIndex=this.params.zIndex,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.style.zIndex=this.zIndex,this.dialogElement.setAttribute("cl-connector-root-element",LayoutType.DETACHED),this.params.formVariantId&&this.dialogElement.setAttribute("cl-widget-id",this.params.formVariantId),this.dialogElement.style.position=null!==(s=this.params.displayPosition)&&void 0!==s?s:"fixed",this.closeIconElement=this.dialogElement.querySelector(DialogLayout.dialogCloseIconSelector),this.addBackDropClickEventListener(),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).appendChild(this.brandingElement),this.addBrandingElementListeners()),this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener)}adjustBrandingPosition(){this.brandingElement.style.position="relative",this.brandingElement.style.marginTop="10px"}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}migrateDocumentModel(e){return e=this.migrateDialogParams(e),e=this.migrateCloseIconParams(e)}migrateDialogParams(e){return e.shared.dialog?e:Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{dialog:{background:"rgba(0, 0, 0, 0.7)"}})})}migrateCloseIconParams(e){if(e.shared.closeIcon)return e;const t=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{closeIcon:{desktop:t.desktop,mobile:t.mobile}})})}addBackDropClickEventListener(){this.dialogElement.addEventListener("click",e=>{const t="cl-widget-id";e.target!==this.dialogElement||document.activeElement&&document.activeElement.closest(`[${t}=${this.dialogElement.getAttribute(t)}]`)===this.dialogElement||this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)})}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.dialogElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&document.body.classList.add("cl-noscroll");return this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector).appendChild(e),t.appendChild(this.dialogElement),this.setConnectedElement(this.dialogElement),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv)},5)),this.dialogElement}disconnect(e){super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener);const t=()=>{var t,n;null==e||e(),this.dialogElement.remove(),null===(t=this.sharedUpdateListener)||void 0===t||t.off(),null===(n=this.environmentUpdateListener)||void 0===n||n.off()};if(this.params.disableLayoutAnimations)return void t();const n=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,n.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&document.body.classList.remove("cl-noscroll"),t()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=.9*this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${o}px`,this.dialogElement.style.overflowY="auto",this.dialogElement.style.overflowX="hidden",this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}showDialog(){if(this.widgetIsShown)return;this.widgetIsShown=!0;!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations?setTimeout(()=>{this.dialogElement.style.visibility="visible";const e=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,e.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,setTimeout(()=>{this.dialogElement.style.animation="",e.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):this.dialogElement.style.visibility="visible"}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){return`\n<div class="cl-dialog">\n <style>\n .cl-dialog {\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(DialogLayout.dialogSelector):""}\n\n .cl-dialog-inner-content-wrapper {\n display: flex;\n flex-direction: column;\n align-items: end;\n }\n \n .cl-dialog-inner-content {\n position: relative;\n max-width: 100vw;\n }\n\n .cl-dialog-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getOtherStyles()}\n \n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-dialog-inner-content-wrapper">\n <div class="cl-dialog-inner-content">\n <div class="cl-dialog-close-icon"></div>\n <div class="cl-dialog-content"></div>\n </div>\n </div>\n</div>\n`}getEntryAndDestroyAnimations(){return"\n@keyframes fadeInDialog {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes zoomInContent {\n 0% {\n transform: scale(0.5);\n }\n 100% {\n transform: scale(1);\n }\n}\n "}}DialogLayout.dialogSelector=".cl-dialog",DialogLayout.dialogContentWrapperSelector=".cl-dialog-inner-content-wrapper",DialogLayout.dialogContentSelector=".cl-dialog-content",DialogLayout.dialogCloseIconSelector=".cl-dialog-close-icon";export default DialogLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";
|
|
1
|
+
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,i,n,o){super(t,e,i,n,o),this.entryAndDestroyAnimationDurationInSeconds=.3,this.zIndex=this.params.zIndex,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(){var t;this.floatingBarElement.removeAttribute("style"),this.floatingBarElement.style.zIndex=this.zIndex,this.floatingBarElement.style.position=null!==(t=this.params.displayPosition)&&void 0!==t?t:"fixed",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,n=this.isBottomPosition(i);return n?(this.setBottomPosition(i),{isBottomPosition:n}):(this._setTopPosition(t,i),{isBottomPosition:n})}getOtherStyles(){return""}_setTopPosition(t,e){if(this.modifiedFloatingElement=null,this.modifiedHtmlBodyElement=null,this.calculatedOverflowAbove=0,"body"!==this.containerElement.tagName.toLowerCase()||!this.getDocumentModel().shared.actualSize||this.params.disableSmartPosition)return void this.setTopPosition(e);const i=this.getActualSizeByEnv(t);if(!i)return void this.setTopPosition(e);const n=i.height,o=parseFloat(n),s=this.containerElement.getRootNode(),a=this._getElementAtTheTopOfTheViewport(s);if(a){const t=this._findFloatingElement(a);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const i=o+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 l=o+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=l+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView||t.parentWindow)/2,i=t.elementFromPoint(e,0);return i!==t.body?i:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,i=null;for(;e;){const t=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===t.position||"sticky"===t.position){i=e;break}e=e.parentElement}return i}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let i=e.top;const n=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let o;for(;o=n.nextNode();){let n=0,s=o;for(;s!==t&&n<10;)s=s.parentElement,n++;if(n>=10)continue;const a=getComputedStyle(o);if("none"===a.display||"hidden"===a.visibility||0===parseFloat(a.opacity))continue;const l=o.getBoundingClientRect();l.right>e.left+.1*e.width&&l.left<e.right-.1*e.width&&(l.height>0&&l.width>0&&l.top<i&&l.top>e.top-150&&(i=l.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.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:n}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(n)}),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv)},5)),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,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()};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),n=this.isMobileEnv()?i.mobile:i.desktop,o=this.isBottomPosition(n)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${o} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){return`\n <div class="cl-floating-bar">\n <style>\n .cl-floating-bar {\n width: 100%;\n }\n\n ${t.disabled?this.getDisabledWidgetStyles(FloatingBarLayout.floatingBarSelector):""}\n\n .cl-floating-bar-inner-content {\n position: relative;\n max-width: 100vw;\n z-index: 1;\n }\n\n .cl-floating-bar-close-icon {\n position: absolute;\n cursor: pointer;\n z-index: 99;\n }\n\n ${this.getOtherStyles()}\n\n ${this.getBrandingStyles()}\n \n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-floating-bar-inner-content">\n <div class="cl-floating-bar-close-icon"></div>\n <div class="cl-floating-bar-content"></div>\n </div>\n </div>\n `}playEntryAnimation(t){if(!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations){const e=t?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBarElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAndDestroyAnimations(){return"\n@keyframes slideInTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n \n@keyframes slideInBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n "}}FloatingBarLayout.floatingBarSelector=".cl-floating-bar",FloatingBarLayout.floatingBarContentSelector=".cl-floating-bar-content",FloatingBarLayout.floatingBarCloseIconSelector=".cl-floating-bar-close-icon";export default FloatingBarLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import{WidgetType}from"@claspo/common/WidgetType";export default class FloatingBoxLayout extends LayoutWithCloseIcon{constructor(t,e,o,i,n){super(t,e,o,i,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.zIndex=this.params.zIndex,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(){var t;this.floatingBoxElement.removeAttribute("style"),this.floatingBoxElement.style.zIndex=this.zIndex,this.floatingBoxElement.style.position=null!==(t=this.params.displayPosition)&&void 0!==t?t:"fixed"}getMinVerticalOffset(){return this.params.branded?32:0}getVerticalOffset(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalOffset:e.verticalOffset,i=this.getMinVerticalOffset();return parseFloat(o)<i?`${i}px`:o}setPosition(t){this.clearPosition();const e=this.getDocumentModel().shared.floatingBox,o=this.getActualSizeByEnv(t);let i=t?e.mobile.horizontalOffset:e.horizontalOffset;const n=t?e.mobile.verticalPosition:e.verticalPosition,s={horizontalPosition:t?e.mobile.horizontalPosition:e.horizontalPosition,verticalPosition:n,horizontalOffset:i,verticalOffset:this.getVerticalOffset(t),actualSizeByEnv:o};this.params.widgetType===WidgetType.TEASER?(this.setTeaserPosition(s),this.floatingBoxElement.style.cursor="pointer"):this.setRegularPosition(s)}setTeaserPosition(t){const{horizontalPosition:e,verticalPosition:o,actualSizeByEnv:i}=t;let n=t.horizontalOffset;if(o===WidgetVerticalPosition.CENTER&&e===WidgetHorizontalPosition.RIGHT&&i&&(n=`${parseFloat(i.height)+parseFloat(n)}px`),this.setHorizontalPosition(Object.assign(Object.assign({},t),{horizontalOffset:n})),o===WidgetVerticalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),o=this.getContainerHeight(),n=e===WidgetHorizontalPosition.LEFT?t/2:-t/2;this.floatingBoxElement.style.top=`${o/2+n}px`,this.floatingBoxElement.style.transform=FloatingBoxLayout.verticalCenterPositionRotationCss,this.floatingBoxElement.style.transformOrigin=e===WidgetHorizontalPosition.LEFT?"left top":"right top"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setRegularPosition(t){const{verticalPosition:e,actualSizeByEnv:o}=t;if(this.setHorizontalPosition(t),e===WidgetVerticalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.height),e=this.getContainerHeight();this.floatingBoxElement.style.top=e/2-t/2+"px"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setVerticalPositionFallback(){this.floatingBoxElement.style.bottom="20px"}setVerticalPositionNearScreenEdge(t){const{verticalPosition:e,verticalOffset:o}=t;this.floatingBoxElement.style[e.toLowerCase()]=o}getContainerHeight(){return"BODY"===this.containerElement.tagName?(this.containerElement.ownerDocument.defaultView||this.containerElement.ownerDocument.parentWindow).innerHeight:this.containerElement.clientHeight}setHorizontalPosition(t){const{horizontalPosition:e,horizontalOffset:o,actualSizeByEnv:i}=t;if(e===WidgetHorizontalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),e=this.containerElement.getBoundingClientRect().width;this.floatingBoxElement.style.left=e/2-t/2+"px"}else this.floatingBoxElement.style.left="20px";else this.floatingBoxElement.style[e.toLowerCase()]=o}migrateDocumentModel(t){return t=this.migrateCloseIconParams(t),t=this.migrateMobilePosition(t)}migrateMobilePosition(t){var e;if(null===(e=t.shared.floatingBox)||void 0===e?void 0:e.mobile)return t;const o={verticalPosition:WidgetVerticalPosition.BOTTOM,horizontalPosition:WidgetHorizontalPosition.LEFT,verticalOffset:this.getMinVerticalOffset(),horizontalOffset:"0px"};return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{floatingBox:Object.assign(Object.assign({},t.shared.floatingBox),{mobile:Object.assign({},o)})})})}migrateCloseIconParams(t){if(t.shared.closeIcon)return t;const e=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{closeIcon:Object.assign(Object.assign({},e),{desktop:Object.assign(Object.assign({},e.desktop),{color:"rgb(0, 0, 0)"}),mobile:Object.assign(Object.assign({},e.mobile),{color:"rgb(0, 0, 0)"})})})})}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,o){return this.documentElement=t,this.containerElement=e,this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector).appendChild(t),e.appendChild(this.floatingBoxElement),this.setConnectedElement(this.floatingBoxElement),this.floatingBoxElement.style.visibility="hidden",o.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{setTimeout(()=>{const t=this.isMobileEnv();this.setPosition(t),this.showFloatingBox(t)})}),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel());const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv),this.updateScrollbar(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBoxElement}disconnect(t){super.disconnect(t);const e=()=>{var e,o;null==t||t(),this.floatingBoxElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(o=this.environmentUpdateListener)||void 0===o||o.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.params.disableLayoutAnimations)return void e();const o=this.getEntryAnimationName(this.isMobileEnv());this.floatingBoxElement.style.animation=`${o} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}showFloatingBox(t){if(!this.widgetIsShown&&(this.widgetIsShown=!0,this.floatingBoxElement.style.visibility="visible",!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations)){const e=this.getEntryAnimationName(t);this.floatingBoxElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBoxElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAnimationName(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalPosition:e.verticalPosition,i=t?e.mobile.horizontalPosition:e.horizontalPosition,n=this.getActualSizeByEnv(t);return o===WidgetVerticalPosition.CENTER&&n&&this.containerElement?i===WidgetHorizontalPosition.LEFT?this.params.widgetType===WidgetType.TEASER?"slideInLeftTeaser":"slideInLeftRegular":this.params.widgetType===WidgetType.TEASER?"slideInRightTeaser":"slideInRightRegular":o===WidgetVerticalPosition.TOP?"slideInTop":"slideInBottom"}updateScrollbar(t){if(this.params.disableScrollbarCalculation)return;const e=this.getViewContentContainer();if(!e)return;const o=this.getActualSizeByEnv(t);if(!o)return;const i=parseFloat(this.closeIconElement.style.top),n=this.getVerticalOffset(t),s=parseFloat(n),a=this.getContainerElementHeight()-(i>0?0:Math.abs(i))-s;a>parseFloat(o.height)||(e.style.overflowY="auto",e.style.overflowX="hidden",e.style.maxHeight=`${a}px`,this.changeViewAlignToTop())}_getTemplate(t){return`\n<div class="cl-floating-box">\n <style>\n ${t.disabled?this.getDisabledWidgetStyles(FloatingBoxLayout.floatingBoxSelector):""}\n\n .cl-floating-box-inner-content {\n position: relative;\n max-width: 100vw;\n z-index: 1;\n }\n\n .cl-floating-box-close-icon {\n position: absolute;\n cursor: pointer;\n z-index: 99;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-floating-box-inner-content">\n <div class="cl-floating-box-close-icon"></div>\n <div class="cl-floating-box-content"></div>\n </div>\n</div>\n`}getEntryAndDestroyAnimations(){return`\n@keyframes slideInTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n} \n \n@keyframes slideInBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideInLeftTeaser {\n 0% {\n opacity: 0;\n transform: translateX(-100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n}\n\n@keyframes slideInRightTeaser {\n 0% {\n opacity: 0;\n transform: translateX(100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n}\n\n@keyframes slideInLeftRegular {\n 0% {\n opacity: 0;\n transform: translateX(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slideInRightRegular {\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n `}}FloatingBoxLayout.floatingBoxSelector=".cl-floating-box",FloatingBoxLayout.floatingBoxContentSelector=".cl-floating-box-content",FloatingBoxLayout.floatingBoxCloseIconSelector=".cl-floating-box-close-icon",FloatingBoxLayout.verticalCenterPositionRotationCss="rotate(-90deg)";
|
|
1
|
+
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import{LayoutType}from"@claspo/common/LayoutType";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import{WidgetType}from"@claspo/common/WidgetType";class FloatingBoxLayout extends LayoutWithCloseIcon{constructor(t,e,o,i,n){super(t,e,o,i,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.zIndex=this.params.zIndex,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(){var t;this.floatingBoxElement.removeAttribute("style"),this.floatingBoxElement.style.zIndex=this.zIndex,this.floatingBoxElement.style.position=null!==(t=this.params.displayPosition)&&void 0!==t?t:"fixed"}getMinVerticalOffset(){return this.params.branded?32:0}getVerticalOffset(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalOffset:e.verticalOffset,i=this.getMinVerticalOffset();return parseFloat(o)<i?`${i}px`:o}setPosition(t){this.clearPosition();const e=this.getDocumentModel().shared.floatingBox,o=this.getActualSizeByEnv(t);let i=t?e.mobile.horizontalOffset:e.horizontalOffset;const n=t?e.mobile.verticalPosition:e.verticalPosition,s={horizontalPosition:t?e.mobile.horizontalPosition:e.horizontalPosition,verticalPosition:n,horizontalOffset:i,verticalOffset:this.getVerticalOffset(t),actualSizeByEnv:o};this.params.widgetType===WidgetType.TEASER?(this.setTeaserPosition(s),this.floatingBoxElement.style.cursor="pointer"):this.setRegularPosition(s)}setTeaserPosition(t){const{horizontalPosition:e,verticalPosition:o,actualSizeByEnv:i}=t;let n=t.horizontalOffset;if(o===WidgetVerticalPosition.CENTER&&e===WidgetHorizontalPosition.RIGHT&&i&&(n=`${parseFloat(i.height)+parseFloat(n)}px`),this.setHorizontalPosition(Object.assign(Object.assign({},t),{horizontalOffset:n})),o===WidgetVerticalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),o=this.getContainerHeight(),n=e===WidgetHorizontalPosition.LEFT?t/2:-t/2;this.floatingBoxElement.style.top=`${o/2+n}px`,this.floatingBoxElement.style.transform=FloatingBoxLayout.verticalCenterPositionRotationCss,this.floatingBoxElement.style.transformOrigin=e===WidgetHorizontalPosition.LEFT?"left top":"right top"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setRegularPosition(t){const{verticalPosition:e,actualSizeByEnv:o}=t;if(this.setHorizontalPosition(t),e===WidgetVerticalPosition.CENTER)if(o&&this.containerElement){const t=parseFloat(o.height),e=this.getContainerHeight();this.floatingBoxElement.style.top=e/2-t/2+"px"}else this.setVerticalPositionFallback();else this.setVerticalPositionNearScreenEdge(t)}setVerticalPositionFallback(){this.floatingBoxElement.style.bottom="20px"}setVerticalPositionNearScreenEdge(t){const{verticalPosition:e,verticalOffset:o}=t;this.floatingBoxElement.style[e.toLowerCase()]=o}getContainerHeight(){return"BODY"===this.containerElement.tagName?(this.containerElement.ownerDocument.defaultView||this.containerElement.ownerDocument.parentWindow).innerHeight:this.containerElement.clientHeight}setHorizontalPosition(t){const{horizontalPosition:e,horizontalOffset:o,actualSizeByEnv:i}=t;if(e===WidgetHorizontalPosition.CENTER)if(i&&this.containerElement){const t=parseFloat(i.width),e=this.containerElement.getBoundingClientRect().width;this.floatingBoxElement.style.left=e/2-t/2+"px"}else this.floatingBoxElement.style.left="20px";else this.floatingBoxElement.style[e.toLowerCase()]=o}migrateDocumentModel(t){return t=this.migrateCloseIconParams(t),t=this.migrateMobilePosition(t)}migrateMobilePosition(t){var e;if(null===(e=t.shared.floatingBox)||void 0===e?void 0:e.mobile)return t;const o={verticalPosition:WidgetVerticalPosition.BOTTOM,horizontalPosition:WidgetHorizontalPosition.LEFT,verticalOffset:this.getMinVerticalOffset(),horizontalOffset:"0px"};return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{floatingBox:Object.assign(Object.assign({},t.shared.floatingBox),{mobile:Object.assign({},o)})})})}migrateCloseIconParams(t){if(t.shared.closeIcon)return t;const e=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},t),{shared:Object.assign(Object.assign({},t.shared),{closeIcon:Object.assign(Object.assign({},e),{desktop:Object.assign(Object.assign({},e.desktop),{color:"rgb(0, 0, 0)"}),mobile:Object.assign(Object.assign({},e.mobile),{color:"rgb(0, 0, 0)"})})})})}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,o){return this.documentElement=t,this.containerElement=e,this.floatingBoxRootElement.querySelector(FloatingBoxLayout.floatingBoxContentSelector).appendChild(t),e.appendChild(this.floatingBoxElement),this.setConnectedElement(this.floatingBoxElement),this.floatingBoxElement.style.visibility="hidden",o.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{setTimeout(()=>{const t=this.isMobileEnv();this.setPosition(t),this.showFloatingBox(t)})}),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel());const t=this.isMobileEnv();this.setPosition(t),this.setCloseIconParams(t)},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(t=>{this.setPosition(t.isMobileEnv),this.setCloseIconParams(t.isMobileEnv),this.updateScrollbar(t.isMobileEnv)},5)),window.addEventListener("resize",this._onZoomChange),this.floatingBoxElement}disconnect(t){super.disconnect(t);const e=()=>{var e,o;null==t||t(),this.floatingBoxElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(o=this.environmentUpdateListener)||void 0===o||o.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.params.disableLayoutAnimations)return void e();const o=this.getEntryAnimationName(this.isMobileEnv());this.floatingBoxElement.style.animation=`${o} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}showFloatingBox(t){if(!this.widgetIsShown&&(this.widgetIsShown=!0,this.floatingBoxElement.style.visibility="visible",!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations)){const e=this.getEntryAnimationName(t);this.floatingBoxElement.style.animation=`${e} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out forwards`,setTimeout(()=>{this.floatingBoxElement.style.animation=""},1e3*this.entryAndDestroyAnimationDurationInSeconds)}}getEntryAnimationName(t){const e=this.getDocumentModel().shared.floatingBox,o=t?e.mobile.verticalPosition:e.verticalPosition,i=t?e.mobile.horizontalPosition:e.horizontalPosition,n=this.getActualSizeByEnv(t);return o===WidgetVerticalPosition.CENTER&&n&&this.containerElement?i===WidgetHorizontalPosition.LEFT?this.params.widgetType===WidgetType.TEASER?"slideInLeftTeaser":"slideInLeftRegular":this.params.widgetType===WidgetType.TEASER?"slideInRightTeaser":"slideInRightRegular":o===WidgetVerticalPosition.TOP?"slideInTop":"slideInBottom"}updateScrollbar(t){if(this.params.disableScrollbarCalculation)return;const e=this.getViewContentContainer();if(!e)return;const o=this.getActualSizeByEnv(t);if(!o)return;const i=parseFloat(this.closeIconElement.style.top),n=this.getVerticalOffset(t),s=parseFloat(n),a=this.getContainerElementHeight()-(i>0?0:Math.abs(i))-s;a>parseFloat(o.height)||(e.style.overflowY="auto",e.style.overflowX="hidden",e.style.maxHeight=`${a}px`,this.changeViewAlignToTop())}_getTemplate(t){return`\n<div class="cl-floating-box">\n <style>\n ${t.disabled?this.getDisabledWidgetStyles(FloatingBoxLayout.floatingBoxSelector):""}\n\n .cl-floating-box-inner-content {\n position: relative;\n max-width: 100vw;\n z-index: 1;\n }\n\n .cl-floating-box-close-icon {\n position: absolute;\n cursor: pointer;\n z-index: 99;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-floating-box-inner-content">\n <div class="cl-floating-box-close-icon"></div>\n <div class="cl-floating-box-content"></div>\n </div>\n</div>\n`}getEntryAndDestroyAnimations(){return`\n@keyframes slideInTop {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n} \n \n@keyframes slideInBottom {\n 0% {\n opacity: 0;\n transform: translateY(100%);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideInLeftTeaser {\n 0% {\n opacity: 0;\n transform: translateX(-100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: left top;\n }\n}\n\n@keyframes slideInRightTeaser {\n 0% {\n opacity: 0;\n transform: translateX(100%) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n 100% {\n opacity: 1;\n transform: translateX(0) ${FloatingBoxLayout.verticalCenterPositionRotationCss};\n transform-origin: right top;\n }\n}\n\n@keyframes slideInLeftRegular {\n 0% {\n opacity: 0;\n transform: translateX(-100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slideInRightRegular {\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n `}}FloatingBoxLayout.floatingBoxSelector=".cl-floating-box",FloatingBoxLayout.floatingBoxContentSelector=".cl-floating-box-content",FloatingBoxLayout.floatingBoxCloseIconSelector=".cl-floating-box-close-icon",FloatingBoxLayout.verticalCenterPositionRotationCss="rotate(-90deg)";export default FloatingBoxLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import BaseLayout from"../BaseLayout";import{LoopAnimationStylesService}from"@claspo/renderer/renderer/style/LoopAnimationStylesService";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";
|
|
1
|
+
import BaseLayout from"../BaseLayout";import{LoopAnimationStylesService}from"@claspo/renderer/renderer/style/LoopAnimationStylesService";import{ViewRendererActionType}from"@claspo/renderer/renderer/ViewRendererActionType";import{DocumentModelUpdateType}from"@claspo/renderer/document-model/DocumentModelService";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetHorizontalPosition,WidgetVerticalPosition}from"../PositionConstants";import debounce from"@claspo/common/async/debounce";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";class LauncherLayout extends BaseLayout{constructor(e,t,n,i,o){super(e,t,n,i,o),this.zIndex=this.params.zIndex,this.launcherRootElement=document.createElement("div"),this.launcherRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.launcherElement=this.launcherRootElement.querySelector(LauncherLayout.launcherSelector),this.launcherElement.setAttribute("cl-connector-root-element",LayoutType.LAUNCHER),this.params.formVariantId&&this.launcherElement.setAttribute("cl-widget-id",this.params.formVariantId),this.defaultStylesElement=this.launcherElement.querySelector(LauncherLayout.launcherStylesSelector).cloneNode(!0),this.addWidgetContentClickEventListener(this.launcherRootElement.querySelector(LauncherLayout.launcherContentSelector))}connect(e,t,n){return this.launcherRootElement.querySelector(LauncherLayout.launcherContentSelector).appendChild(e),t.appendChild(this.launcherElement),this.setEntryAnimationAndPosition(this.isMobileEnv()),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.SHARED_UPDATE_ALL,debounce(e=>{this.setEntryAnimationAndPosition(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,debounce(e=>{this.setEntryAnimationAndPosition(e.isMobileEnv)},5)),this.setConnectedElement(this.launcherElement),this.launcherElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.launcherElement.style.visibility="visible"}),this.launcherElement}disconnect(e){var t;null==e||e(),this.launcherElement.remove(),null===(t=this.environmentUpdateListener)||void 0===t||t.off()}setEntryAnimationAndPosition(e){const t=this.getDocumentModel().shared.launcher;this.setLoopAnimation(t.loopAnimation);const n=e?t.mobile:t.desktop,i=n.verticalPosition.toLowerCase(),o=n.horizontalPosition.toLowerCase();if(this.params.disableLayoutAnimations||!["SLIDE_TO_TOP","SLIDE_TO_BOTTOM","SLIDE_TO_LEFT","SLIDE_TO_RIGHT"].includes(t.entryAnimation.type))return this.launcherElement.style[o]=n.horizontalOffset,this.launcherElement.style[i]=n.verticalOffset,void(this.launcherElement.style.opacity="1");let l,s,a,r,c;"SLIDE_TO_TOP"===t.entryAnimation.type||"SLIDE_TO_BOTTOM"===t.entryAnimation.type?(l=o,s=n.horizontalOffset,a=i,r=n.verticalOffset,c="SLIDE_TO_TOP"===t.entryAnimation.type?n.verticalPosition===WidgetVerticalPosition.TOP?20:-20:n.verticalPosition===WidgetVerticalPosition.TOP?-20:20):(l=i,s=n.verticalOffset,a=o,r=n.horizontalOffset,c="SLIDE_TO_LEFT"===t.entryAnimation.type?n.horizontalPosition===WidgetHorizontalPosition.LEFT?20:-20:n.horizontalPosition===WidgetHorizontalPosition.LEFT?-20:20),this.launcherElement.style[l]=s,this.launcherElement.style[a]=`${parseFloat(r)+c}px`,setTimeout(()=>{this.launcherElement.style[a]=r,this.launcherElement.style.opacity="1"},50)}clearLoopAnimations(){var e;const t=[];this.launcherElement.classList.forEach(e=>{e.startsWith(LoopAnimationStylesService.animationClassPrefix)&&t.push(e)}),this.launcherElement.classList.remove(...t);const n=this.launcherElement.querySelector(LauncherLayout.launcherStylesSelector);insertHtmlIntoElement({element:n,html:this.defaultStylesElement.innerHTML}),this.launcherElement.removeAttribute("style"),this.launcherElement.style.zIndex=this.zIndex,this.launcherElement.style.position=null!==(e=this.params.displayPosition)&&void 0!==e?e:"fixed"}setLoopAnimation(e){this.clearLoopAnimations(),this.params.disableLayoutAnimations||(this._applyLoopAnimationParams(e),this.launcherElement.classList.add(LoopAnimationStylesService.animationClassPrefix+e.type))}_applyLoopAnimationParams(e){e.params&&Object.keys(e.params).forEach(t=>{const n=e.params[t];this.launcherElement.style.setProperty(`--cl-${e.type}-${t}`,`${n||LoopAnimationStylesService.getDefaultParamValueByAnimationType(e.type,t)}`)})}_getTemplate(e){var t;const n=e.documentModel.shared.launcher;return`\n <div class="cl-launcher">\n <style class="cl-launcher-styles">\n\n ${LoopAnimationStylesService.constructAnimationStylesByTypes([null===(t=n.loopAnimation)||void 0===t?void 0:t.type])}\n\n .cl-launcher {\n ${this.params.disableLayoutAnimations?"":"transition: 0.3s;"}\n cursor: pointer;\n opacity: 0;\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(LauncherLayout.launcherSelector):""}\n\n .cl-launcher-inner-content {\n position: relative;\n }\n </style>\n\n <div class="cl-launcher-inner-content">\n <div class="cl-launcher-content"></div>\n </div>\n </div>\n`}}LauncherLayout.launcherSelector=".cl-launcher",LauncherLayout.launcherContentSelector=".cl-launcher-content",LauncherLayout.launcherStylesSelector=".cl-launcher-styles";export default LauncherLayout;
|
package/package.json
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@claspo/document-connector",
|
|
3
|
-
"version": "15.0.
|
|
3
|
+
"version": "15.0.5-theme.30",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"test": "jest --no-cache --coverage",
|
|
6
6
|
"build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
|
|
7
|
+
"build:docs": "typedoc --options typedoc.md.json && node scripts/postprocess-md.js && node scripts/add-frontmatter.js",
|
|
7
8
|
"minify": "find out -name '*.js' ! -name '*.d.js' -exec terser {} --compress --mangle --output {} \\;",
|
|
8
9
|
"dev": "tsc --project tsconfig.json --watch",
|
|
9
|
-
"package": "npm i && npm run test && npm run build && cp package.json out && cd out && npm publish --access=public && cd .."
|
|
10
|
+
"package": "npm i && npm run test && npm run build && cp package.json README.md out && cd out && npm publish --access=public && cd .."
|
|
10
11
|
},
|
|
11
12
|
"engines": {
|
|
12
13
|
"node": ">=18.16.0"
|
|
13
14
|
},
|
|
14
15
|
"dependencies": {
|
|
15
|
-
"@claspo/common": "6.0.
|
|
16
|
-
"@claspo/renderer": "17.0.
|
|
16
|
+
"@claspo/common": "6.0.8-theme.30",
|
|
17
|
+
"@claspo/renderer": "17.0.3-theme.30"
|
|
17
18
|
},
|
|
18
19
|
"devDependencies": {
|
|
19
20
|
"@babel/core": "^7.28.5",
|
|
@@ -24,9 +25,12 @@
|
|
|
24
25
|
"terser": "^5.37.0",
|
|
25
26
|
"ts-jest": "^28.0.3",
|
|
26
27
|
"ts-node": "^10.8.0",
|
|
27
|
-
"typescript": "^
|
|
28
|
+
"typescript": "^5.8.2",
|
|
29
|
+
"typedoc": "^0.28.0",
|
|
30
|
+
"typedoc-plugin-markdown": "^4.4.1",
|
|
31
|
+
"glob": "^7.1.7"
|
|
28
32
|
},
|
|
29
33
|
"author": "alex-chernysh",
|
|
30
34
|
"license": "",
|
|
31
|
-
"homepage": "https://claspo.io/"
|
|
35
|
+
"homepage": "https://docs.claspo.io/docs/claspodocument-connector"
|
|
32
36
|
}
|