@claspo/document-connector 16.6.1 → 16.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export default class GoogleFontsLoader {
|
|
2
2
|
static getUsedGoogleFonts(documentModel: any): any;
|
|
3
3
|
static _getEnabledStyleEntries(node: any): any[];
|
|
4
|
+
static _normalizeFontWeight(fontWeight: any): number;
|
|
5
|
+
static _normalizeFontFamilyName(fontFamily: any): string;
|
|
4
6
|
loadedGoogleFonts: any[];
|
|
5
7
|
testStrings: {
|
|
6
8
|
latin: string;
|
|
@@ -9,10 +11,30 @@ export default class GoogleFontsLoader {
|
|
|
9
11
|
load(fonts: any, htmlDocumentObject: any): Promise<void>;
|
|
10
12
|
cleanup(): void;
|
|
11
13
|
_getDynamicUrlPart(fonts: any, htmlDocumentObject: any): any[];
|
|
12
|
-
_combineUrlDynamicPart(fonts: any
|
|
14
|
+
_combineUrlDynamicPart(fonts: any): any[];
|
|
13
15
|
_makeFontOptions(): any[];
|
|
14
|
-
|
|
15
|
-
|
|
16
|
+
_loadResolvedFontVariations(fonts: any, htmlDocumentObject: any): Promise<any[]>;
|
|
17
|
+
_fetchFontsMetadata(fontUrlParts: any): Promise<string>;
|
|
18
|
+
_makeGoogleFontsUrl(fontUrlParts: any): string;
|
|
19
|
+
_addFontsLinkToDocument(fontUrlParts: any, htmlDocumentObject: any): Promise<void> | Promise<PromiseSettledResult<unknown>[]>;
|
|
20
|
+
_addFontsStyleToDocument(fontFaceCss: any, htmlDocumentObject: any): void;
|
|
21
|
+
_parseFontFaces(cssText: any): any[];
|
|
22
|
+
_getFontFaceProperty(css: any, property: any): any;
|
|
23
|
+
_parseFontFaceWeight(fontWeight: any): {
|
|
24
|
+
minWeight: number;
|
|
25
|
+
maxWeight: number;
|
|
26
|
+
};
|
|
27
|
+
_resolveFontVariations(fonts: any, fontFaces: any): any[];
|
|
28
|
+
_findNearestFontFaces(fontFaces: any, family: any, style: any, weight: any): any;
|
|
29
|
+
_warnAboutUnresolvedReturnedFontFamilies(fonts: any, fontFaces: any, variations: any): void;
|
|
30
|
+
_warnAboutItalicOnlyReturnedFontFamilies(fonts: any, fontFaces: any): void;
|
|
31
|
+
_getFontFaceDistance(fontFace: any, weight: any): number;
|
|
32
|
+
_resolveWeightForFontFace(fontFace: any, weight: any): any;
|
|
33
|
+
_getFontFaceCss(variations: any): string;
|
|
34
|
+
_generateFontVariations(fonts: any): any[];
|
|
35
|
+
_getFontFamily(font: any): any;
|
|
36
|
+
_getRequestedWeights(font: any): number[];
|
|
37
|
+
_encodeFontFamily(fontFamily: any): string;
|
|
16
38
|
_createFontTester(variations: any, htmlDocumentObject: any): any;
|
|
17
39
|
_waitForAllFontsToLoad(variations: any, htmlDocumentObject: any): Promise<void>;
|
|
18
40
|
_waitForFontBatchLoad(batch: any, htmlDocumentObject: any): Promise<any[]>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}static getUsedGoogleFonts(t){const e=t.shared.googleFonts;if(!e||0===e.length)return[];const o=new Set,s=new Set;for(const e of t.views||[])DocumentUtils.iterateDepthFirst(e,t=>{const e=GoogleFontsLoader._getEnabledStyleEntries(t);for(const t of e)if(t.classes)for(const e of t.classes.split(" "))e&&e.startsWith("cl-")&&
|
|
1
|
+
import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}static getUsedGoogleFonts(t){const e=t.shared.googleFonts;if(!e||0===e.length)return[];const o=new Map,n=new Set,s=(t,e=400)=>{t&&(o.has(t)||o.set(t,new Set),o.get(t).add(GoogleFontsLoader._normalizeFontWeight(e)))};for(const e of t.views||[])DocumentUtils.iterateDepthFirst(e,t=>{const e=GoogleFontsLoader._getEnabledStyleEntries(t);for(const t of e)if(t.classes)for(const e of t.classes.split(" "))e&&e.startsWith("cl-")&&n.add(e);for(const t of e)t.styleAttributes&&t.styleAttributes.fontFamily&&s(t.styleAttributes.fontFamily,t.styleAttributes.fontWeight)});const a=t.shared;for(const t of n){const e=a.textClasses&&a.textClasses[t];e&&(e.styleAttributes&&e.styleAttributes.fontFamily?s(e.styleAttributes.fontFamily,e.styleAttributes.fontWeight):(e.isHeader&&a.headerFontFamily&&s(a.headerFontFamily,e.styleAttributes&&e.styleAttributes.fontWeight),!e.isHeader&&a.textFontFamily&&s(a.textFontFamily,e.styleAttributes&&e.styleAttributes.fontWeight)))}return a.textFontFamily&&s(a.textFontFamily),e.filter(t=>o.has(t)).map(t=>({fontFamily:t,weights:Array.from(o.get(t)).sort((t,e)=>t-e)}))}static _getEnabledStyleEntries(t){const e=[];t.props&&t.props.adaptiveStyles&&(e.push(...t.props.adaptiveStyles.desktop||[]),e.push(...t.props.adaptiveStyles.mobile||[])),t.props&&t.props.styles&&e.push(...t.props.styles||[]);const o=new Set(e.filter(t=>t.params&&!1===t.params.enabled).map(t=>t.element));return e.filter(t=>!o.has(t.element))}static _normalizeFontWeight(t){if("normal"===t)return 400;if("bold"===t)return 700;const e=parseInt(t,10);return Number.isFinite(e)&&e>0?e:400}static _normalizeFontFamilyName(t){return`${t||""}`.trim().replace(/\s+/g," ").toLowerCase()}async load(t,e){try{if(e=e||document,!(t||[]).length)return;const o=await this._loadResolvedFontVariations(t,e);if(!o.length)return;const n=this._createFontTester(o,e);e.body.appendChild(n);const s=this._waitForAllFontsToLoad(o,e),a=new Promise((t,e)=>setTimeout(()=>e(new Error("Timeout")),2e3));await Promise.race([s,a]),n.remove()}catch(t){console.error("Error while loading fonts",t)}}cleanup(){this.loadedGoogleFonts.forEach(t=>t.remove()),this.loadedGoogleFonts=[]}_getDynamicUrlPart(t,e){return this._combineUrlDynamicPart(t)}_combineUrlDynamicPart(t){const e=[],o=this._makeFontOptions(),n=[{name:"normal",value:0},{name:"italic",value:1}];return t.forEach(t=>{const s=this._getFontFamily(t),a=this._getRequestedWeights(t);if(!s||!a.length)return;const r=[];n.forEach(t=>{o.forEach(e=>{r.push(`${t.value},${e}`)})});const i=r.join(";");e.push({fontFamily:s,weights:a,urlPart:`&family=${this._encodeFontFamily(s)}:ital,wght@${i}`})}),e}_makeFontOptions(){const t=[];for(let e=0;e<9;e++){const o=100*(e+1);t.push(o)}return t}async _loadResolvedFontVariations(t,e){const o=this._getDynamicUrlPart(t,e);if(!o||0===o.length)return[];try{const n=await this._fetchFontsMetadata(o),s=this._parseFontFaces(n);if(!s.length)throw new Error("Google Fonts metadata did not contain font-face rules");const a=this._resolveFontVariations(t,s);this._warnAboutUnresolvedReturnedFontFamilies(t,s,a),this._warnAboutItalicOnlyReturnedFontFamilies(t,s);const r=this._getFontFaceCss(a);if(!r)throw new Error("Google Fonts metadata did not contain matching font faces");return this._addFontsStyleToDocument(r,e),a}catch(n){return console.error("Failed to load optimized Google Fonts CSS. Falling back to stylesheet link.",n),await this._addFontsLinkToDocument(o,e),this._generateFontVariations(t)}}async _fetchFontsMetadata(t){const e=await fetch(this._makeGoogleFontsUrl(t));if(!e.ok)throw new Error(`Google Fonts metadata request failed with status ${e.status}`);return e.text()}_makeGoogleFontsUrl(t){return"https://fonts.googleapis.com/css2?display=swap"+t.map(({urlPart:t})=>t).join("")}_addFontsLinkToDocument(t,e){if(!e.head)return Promise.resolve();const o=[{fontFamily:t.map(({fontFamily:t})=>t).join(", "),urlPart:t.map(({urlPart:t})=>t).join("")}].map(({fontFamily:t,urlPart:o})=>new Promise((n,s)=>{const a=e.createElement("link");a.rel="stylesheet",a.href="https://fonts.googleapis.com/css2?display=swap"+o,a.onload=()=>n({fontFamily:t,success:!0}),a.onerror=()=>{console.error(`Failed to load font: ${t}`),s(new Error(`Failed to load font: ${t}`))},e.head.appendChild(a),this.loadedGoogleFonts.push(a)}));return Promise.allSettled(o)}_addFontsStyleToDocument(t,e){if(!e.head)return;const o=e.createElement("style");o.setAttribute("data-cl-google-fonts","true"),o.textContent=t,e.head.appendChild(o),this.loadedGoogleFonts.push(o)}_parseFontFaces(t){const e=[],o=/@font-face\s*{[^}]*}/gi;let n;for(;null!==(n=o.exec(t||""));){const t=n[0],o=this._getFontFaceProperty(t,"font-family"),s=this._getFontFaceProperty(t,"font-style")||"normal",a=this._parseFontFaceWeight(this._getFontFaceProperty(t,"font-weight"));o&&a&&e.push({family:o,style:s,minWeight:a.minWeight,maxWeight:a.maxWeight,css:t})}return e}_getFontFaceProperty(t,e){const o=new RegExp(`${e}\\s*:\\s*([^;]+);`,"i"),n=t.match(o);return n?n[1].trim().replace(/^['"]|['"]$/g,""):""}_parseFontFaceWeight(t){const e=`${t||""}`.match(/\d+(\.\d+)?/g);if(!e||!e.length)return null;const o=Number(e[0]),n=Number(e[e.length-1]);return{minWeight:Math.min(o,n),maxWeight:Math.max(o,n)}}_resolveFontVariations(t,e){const o=["normal","italic"],n=[],s=new Set;return t.forEach(t=>{const a=this._getFontFamily(t);this._getRequestedWeights(t).forEach(t=>{o.forEach(o=>{const r=this._findNearestFontFaces(e,a,o,t);if(!r.length)return;const i=this._resolveWeightForFontFace(r[0],t),l=`${a}|${o}|${i}`;s.has(l)||(s.add(l),n.push({family:a,weight:i,style:o,descriptor:`${o} ${i} 1em "${a}"`,cssBlocks:r.map(t=>t.css)}))})})}),n}_findNearestFontFaces(t,e,o,n){const s=GoogleFontsLoader._normalizeFontFamilyName(e),a=t.filter(t=>GoogleFontsLoader._normalizeFontFamilyName(t.family)===s&&t.style===o);if(!a.length)return[];const r=a.reduce((t,e)=>{if(!t)return e;const o=this._getFontFaceDistance(e,n),s=this._getFontFaceDistance(t,n);if(o<s)return e;if(o>s)return t;const a=this._resolveWeightForFontFace(e,n),r=this._resolveWeightForFontFace(t,n);return n<=500?a<r?e:t:a>r?e:t},null),i=this._resolveWeightForFontFace(r,n);return a.filter(t=>this._resolveWeightForFontFace(t,n)===i)}_warnAboutUnresolvedReturnedFontFamilies(t,e,o){const n=new Set(e.map(t=>GoogleFontsLoader._normalizeFontFamilyName(t.family))),s=new Set(o.map(t=>GoogleFontsLoader._normalizeFontFamilyName(t.family))),a=[];t.forEach(t=>{const e=this._getFontFamily(t),o=GoogleFontsLoader._normalizeFontFamilyName(e);o&&n.has(o)&&!s.has(o)&&a.push(e)}),a.length&&console.error(`Google Fonts metadata returned font faces that were not resolved: ${a.join(", ")}`)}_warnAboutItalicOnlyReturnedFontFamilies(t,e){const o=[];t.forEach(t=>{const n=this._getFontFamily(t),s=GoogleFontsLoader._normalizeFontFamilyName(n);if(!s)return;const a=e.filter(t=>GoogleFontsLoader._normalizeFontFamilyName(t.family)===s);if(!a.length)return;const r=a.some(t=>"normal"===t.style),i=a.some(t=>"italic"===t.style);!r&&i&&o.push(n)}),o.length&&console.error(`Google Fonts metadata returned only italic font faces for: ${o.join(", ")}. Normal text may fall back to a different font.`)}_getFontFaceDistance(t,e){return e>=t.minWeight&&e<=t.maxWeight?0:Math.min(Math.abs(e-t.minWeight),Math.abs(e-t.maxWeight))}_resolveWeightForFontFace(t,e){return e<t.minWeight?t.minWeight:e>t.maxWeight?t.maxWeight:e}_getFontFaceCss(t){const e=[],o=new Set;return t.forEach(t=>{(t.cssBlocks||[]).forEach(t=>{t&&!o.has(t)&&(o.add(t),e.push(t))})}),e.join("\n")}_generateFontVariations(t){const e=[];return t.forEach(t=>{const o=this._getFontFamily(t);this._getRequestedWeights(t).forEach(t=>{["normal","italic"].forEach(n=>{e.push({family:o,weight:t,style:n,descriptor:`${n} ${t} 1em "${o}"`})})})}),e}_getFontFamily(t){return"string"==typeof t?t:t&&t.fontFamily}_getRequestedWeights(t){if("string"==typeof t)return[400];const e=t&&t.weights;if(!e||!e.length)return[400];const o=e.map(t=>GoogleFontsLoader._normalizeFontWeight(t));return Array.from(new Set(o)).sort((t,e)=>t-e)}_encodeFontFamily(t){return encodeURIComponent(t).replace(/%20/g,"+")}_createFontTester(t,e){const o=e.createElement("div");return o.setAttribute("aria-hidden","true"),o.style.cssText="\n position: fixed;\n top: -9999px;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n visibility: hidden;\n pointer-events: none;\n user-select: none;\n z-index: -1;\n ",t.forEach(t=>{Object.entries(this.testStrings).forEach(([n,s])=>{const a=e.createElement("span");a.textContent=s,a.style.cssText=`\n font-family: "${t.family}", sans-serif;\n font-weight: ${t.weight};\n font-style: ${t.style};\n font-size: 20px;\n display: inline-block;\n white-space: nowrap;\n `,a.dataset.font=`${t.family}-${t.weight}-${t.style}`,a.dataset.subset=n,o.appendChild(a)})}),o}async _waitForAllFontsToLoad(t,e){const o=[];for(let e=0;e<t.length;e+=10)o.push(t.slice(e,e+10));for(const t of o)await this._waitForFontBatchLoad(t,e)}async _waitForFontBatchLoad(t,e){const o=t.map(async t=>{try{e.fonts.check(t.descriptor)||await e.fonts.load(t.descriptor)}catch(e){console.error(`Failed to load: ${t.descriptor}`,e)}});return Promise.all(o)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";import GlobalScrollBlocker from"../GlobalScrollBlocker";import trapFocus from"../trapFocus";class DialogLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.dialogRootElement=document.createElement("div"),this.dialogRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.dialogElement=this.dialogRootElement.querySelector(DialogLayout.dialogSelector),this.dialogElement.style.background=this.getDocumentModel().shared.dialog.background,this.dialogElement.setAttribute("cl-connector-root-element",LayoutType.DETACHED),this.params.formVariantId&&this.dialogElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.dialogElement.querySelector(DialogLayout.dialogCloseIconSelector),this.addBackDropClickEventListener(),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).appendChild(this.brandingElement),this.addBrandingElementListeners()),this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener)}adjustBrandingPosition(){this.brandingElement.style.position="relative",this.brandingElement.style.marginTop="10px"}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}migrateDocumentModel(e){return e=this.migrateDialogParams(e),e=this.migrateCloseIconParams(e)}migrateDialogParams(e){return e.shared.dialog?e:Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{dialog:{background:"rgba(0, 0, 0, 0.7)"}})})}migrateCloseIconParams(e){if(e.shared.closeIcon)return e;const t=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{closeIcon:{desktop:t.desktop,mobile:t.mobile}})})}addBackDropClickEventListener(){this.dialogElement.addEventListener("click",e=>{const t="cl-widget-id";e.target!==this.dialogElement||document.activeElement&&document.activeElement.closest(`[${t}=${this.dialogElement.getAttribute(t)}]`)===this.dialogElement||this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)})}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.dialogElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block();return this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector).appendChild(e),t.appendChild(this.dialogElement),this.setConnectedElement(this.dialogElement),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv)},5)),this.dialogElement}disconnect(e){var t;super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener),null===(t=this.removeFocusTrap)||void 0===t||t.call(this);const n=()=>{var t,n;null==e||e(),this.dialogElement.remove(),null===(t=this.sharedUpdateListener)||void 0===t||t.off(),null===(n=this.environmentUpdateListener)||void 0===n||n.off()};if(this.params.disableLayoutAnimations)return void n();const o=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,o.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),n()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=.9*this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${o}px`,this.dialogElement.style.overflowY="auto",this.dialogElement.style.overflowX="hidden",this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}showDialog(){if(this.widgetIsShown)return;this.widgetIsShown=!0;!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations?setTimeout(()=>{this.dialogElement.style.visibility="visible";const e=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,e.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,setTimeout(()=>{this.dialogElement.style.animation="",e.style.animation="",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement))},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):(this.dialogElement.style.visibility="visible",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement)))}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){var t;return`\n<div class="cl-dialog" role="dialog" aria-modal="true" aria-label="Popup" ${this.isStaticRenderMode()?'tabindex="0"':""}>\n <style>\n .cl-dialog {\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n z-index: ${e.zIndex};\n }\n\n .cl-dialog:focus {\n outline: none;\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(DialogLayout.dialogSelector):""}\n\n .cl-dialog-inner-content-wrapper {\n display: flex;\n flex-direction: column;\n align-items: end;\n }\n \n .cl-dialog-inner-content {\n position: relative;\n max-width: 100vw;\n }\n\n .cl-dialog-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n ${this.getOtherStyles()}\n \n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-dialog-inner-content-wrapper">\n <div class="cl-dialog-inner-content">\n <div class="cl-dialog-close-icon"></div>\n <div class="cl-dialog-content"></div>\n </div>\n </div>\n</div>\n`}getEntryAndDestroyAnimations(){return"\n@keyframes fadeInDialog {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes zoomInContent {\n 0% {\n transform: scale(0.5);\n }\n 100% {\n transform: scale(1);\n }\n}\n "}}DialogLayout.dialogSelector=".cl-dialog",DialogLayout.dialogContentWrapperSelector=".cl-dialog-inner-content-wrapper",DialogLayout.dialogContentSelector=".cl-dialog-content",DialogLayout.dialogCloseIconSelector=".cl-dialog-close-icon";export default DialogLayout;
|
|
1
|
+
import LayoutWithCloseIcon from"../LayoutWithCloseIcon";import DocumentConnectorEventType from"../../DocumentConnectorEventType";import{LayoutType}from"@claspo/common/LayoutType";import{WidgetToEditorEventType}from"@claspo/renderer/renderer/WidgetToEditorEventType";import{EditorToWidgetEventType}from"@claspo/renderer/document-model/DocumentModelService";import debounce from"@claspo/common/async/debounce";import GlobalScrollBlocker from"../GlobalScrollBlocker";import trapFocus from"../trapFocus";class DialogLayout extends LayoutWithCloseIcon{constructor(e,t,n,o,i){super(e,t,n,o,i),this.entryAndDestroyAnimationDurationInSeconds=.3,this.widgetIsShown=!1,this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.dialogRootElement=document.createElement("div"),this.dialogRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.dialogElement=this.dialogRootElement.querySelector(DialogLayout.dialogSelector),this.dialogElement.style.background=this.getDocumentModel().shared.dialog.background,this.dialogElement.setAttribute("cl-connector-root-element",LayoutType.DETACHED),this.params.formVariantId&&this.dialogElement.setAttribute("cl-widget-id",this.params.formVariantId),this.closeIconElement=this.dialogElement.querySelector(DialogLayout.dialogCloseIconSelector),this.addBackDropClickEventListener(),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector)),this.setCloseIconParams(this.isMobileEnv()),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).appendChild(this.brandingElement),this.addBrandingElementListeners()),this.boundEscapeListener=this.escapeListenerCallback.bind(this),window.addEventListener("keyup",this.boundEscapeListener)}adjustBrandingPosition(){this.brandingElement.style.position="relative",this.brandingElement.style.marginTop="10px"}getDocumentModel(){return this.migratedDocumentModel||super.getDocumentModel()}migrateDocumentModel(e){return e=this.migrateDialogParams(e),e=this.migrateCloseIconParams(e)}migrateDialogParams(e){return e.shared.dialog?e:Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{dialog:{background:"rgba(0, 0, 0, 0.7)"}})})}migrateCloseIconParams(e){if(e.shared.closeIcon)return e;const t=this.getDefaultCloseIconParams();return Object.assign(Object.assign({},e),{shared:Object.assign(Object.assign({},e.shared),{closeIcon:{desktop:t.desktop,mobile:t.mobile}})})}addBackDropClickEventListener(){this.dialogElement.addEventListener("click",e=>{const t="cl-widget-id";e.target!==this.dialogElement||document.activeElement&&document.activeElement!==this.dialogElement&&document.activeElement.closest(`[${t}=${this.dialogElement.getAttribute(t)}]`)===this.dialogElement||this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)})}setCloseIconParams(e){const t=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,t,e)}connect(e,t,n){this.dialogElement.style.visibility="hidden",n.compositionRoot.services.eventEmitter.on(WidgetToEditorEventType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.showDialog()}),this.documentElement=e,this.containerElement=t,this.params.disableGlobalScroll&&GlobalScrollBlocker.block();return this.dialogRootElement.querySelector(DialogLayout.dialogContentSelector).appendChild(e),t.appendChild(this.dialogElement),this.setConnectedElement(this.dialogElement),this.updateScrollbar(this.isMobileEnv()),this.sharedUpdateListener=this.documentModel.on(EditorToWidgetEventType.SHARED_UPDATE_ALL,debounce(()=>{this.migratedDocumentModel=this.migrateDocumentModel(super.getDocumentModel()),this.setCloseIconParams(this.isMobileEnv())},5)),this.environmentUpdateListener=this.documentModel.on(EditorToWidgetEventType.ENVIRONMENT_UPDATE,debounce(e=>{this.setCloseIconParams(e.isMobileEnv),this.updateScrollbar(e.isMobileEnv)},5)),this.dialogElement}disconnect(e){var t;super.disconnect(e),window.removeEventListener("keyup",this.boundEscapeListener),null===(t=this.removeFocusTrap)||void 0===t||t.call(this);const n=()=>{var t,n;null==e||e(),this.dialogElement.remove(),null===(t=this.sharedUpdateListener)||void 0===t||t.off(),null===(n=this.environmentUpdateListener)||void 0===n||n.off()};if(this.params.disableLayoutAnimations)return void n();const o=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,o.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out reverse`,setTimeout(()=>{this.params.disableGlobalScroll&&GlobalScrollBlocker.restore(),n()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}updateScrollbar(e){if(this.params.disableScrollbarCalculation)return;const t=this.getViewContentContainer();if(!t)return;const n=this.getActualSizeByEnv(e);if(!n)return;const o=.9*this.getContainerElementHeight();o>parseFloat(n.height)||(t.style.overflowY="auto",t.style.overflowX="hidden",this._extendContainerOuterSizeToFitInnerContentShadows(t),this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector).style.maxHeight=`${o}px`,this.dialogElement.style.overflowY="auto",this.dialogElement.style.overflowX="hidden",this.changeViewAlignToTop())}escapeListenerCallback(e){"Escape"===e.key&&this.eventEmitter.emit(DocumentConnectorEventType.CLOSE_WIDGET)}showDialog(){if(this.widgetIsShown)return;this.widgetIsShown=!0;!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations?setTimeout(()=>{this.dialogElement.style.visibility="visible";const e=this.dialogElement.querySelector(DialogLayout.dialogContentWrapperSelector);this.dialogElement.style.animation=`fadeInDialog ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,e.style.animation=`zoomInContent ${this.entryAndDestroyAnimationDurationInSeconds}s ease-in-out forwards`,setTimeout(()=>{this.dialogElement.style.animation="",e.style.animation="",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement))},1e3*this.entryAndDestroyAnimationDurationInSeconds)},50):(this.dialogElement.style.visibility="visible",this.isStaticRenderMode()&&(this.dialogElement.focus(),this.removeFocusTrap=trapFocus(this.dialogElement)))}_extendContainerOuterSizeToFitInnerContentShadows(e){e.style.width="calc(100% + 40px)",e.style.margin="-20px",e.style.padding="20px"}getOtherStyles(){return""}_getTemplate(e){var t;return`\n<div class="cl-dialog" role="dialog" aria-modal="true" aria-label="Popup" ${this.isStaticRenderMode()?'tabindex="0"':""}>\n <style>\n .cl-dialog {\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n position: ${null!==(t=e.displayPosition)&&void 0!==t?t:"fixed"};\n z-index: ${e.zIndex};\n }\n\n .cl-dialog:focus {\n outline: none;\n }\n\n ${e.disabled?this.getDisabledWidgetStyles(DialogLayout.dialogSelector):""}\n\n .cl-dialog-inner-content-wrapper {\n display: flex;\n flex-direction: column;\n align-items: end;\n }\n \n .cl-dialog-inner-content {\n position: relative;\n max-width: 100vw;\n }\n\n .cl-dialog-close-icon {\n z-index: 99;\n position: absolute;\n cursor: pointer;\n }\n\n ${this.getBrandingStyles()}\n\n ${this.getGameSpotlightStyles()}\n\n ${this.getOtherStyles()}\n \n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-dialog-inner-content-wrapper">\n <div class="cl-dialog-inner-content">\n <div class="cl-dialog-close-icon"></div>\n <div class="cl-dialog-content"></div>\n </div>\n </div>\n</div>\n`}getEntryAndDestroyAnimations(){return"\n@keyframes fadeInDialog {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes zoomInContent {\n 0% {\n transform: scale(0.5);\n }\n 100% {\n transform: scale(1);\n }\n}\n "}}DialogLayout.dialogSelector=".cl-dialog",DialogLayout.dialogContentWrapperSelector=".cl-dialog-inner-content-wrapper",DialogLayout.dialogContentSelector=".cl-dialog-content",DialogLayout.dialogCloseIconSelector=".cl-dialog-close-icon";export default DialogLayout;
|