@claspo/document-connector 16.0.6 → 16.0.8-tooltip.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}static getUsedGoogleFonts(t){const e=t.shared.googleFonts;if(!e||0===e.length)return[];const o=new Set,s=new Set;for(const e of t.views||[])DocumentUtils.iterateDepthFirst(e,t=>{const e=GoogleFontsLoader._getEnabledStyleEntries(t);for(const t of e)if(t.classes)for(const e of t.classes.split(" "))e&&e.startsWith("cl-")&&s.add(e);for(const t of e)t.styleAttributes&&t.styleAttributes.fontFamily&&o.add(t.styleAttributes.fontFamily)});const n=t.shared;for(const t of s){const e=n.textClasses&&n.textClasses[t];e&&(e.styleAttributes&&e.styleAttributes.fontFamily?o.add(e.styleAttributes.fontFamily):(e.isHeader&&n.headerFontFamily&&o.add(n.headerFontFamily),!e.isHeader&&n.textFontFamily&&o.add(n.textFontFamily)))}return n.textFontFamily&&o.add(n.textFontFamily),e.filter(t=>o.has(t))}static _getEnabledStyleEntries(t){const e=[];
|
|
1
|
+
import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class GoogleFontsLoader{constructor(){this.loadedGoogleFonts=[],this.testStrings={latin:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",cyrillic:"АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя"}}static getUsedGoogleFonts(t){const e=t.shared.googleFonts;if(!e||0===e.length)return[];const o=new Set,s=new Set;for(const e of t.views||[])DocumentUtils.iterateDepthFirst(e,t=>{const e=GoogleFontsLoader._getEnabledStyleEntries(t);for(const t of e)if(t.classes)for(const e of t.classes.split(" "))e&&e.startsWith("cl-")&&s.add(e);for(const t of e)t.styleAttributes&&t.styleAttributes.fontFamily&&o.add(t.styleAttributes.fontFamily)});const n=t.shared;for(const t of s){const e=n.textClasses&&n.textClasses[t];e&&(e.styleAttributes&&e.styleAttributes.fontFamily?o.add(e.styleAttributes.fontFamily):(e.isHeader&&n.headerFontFamily&&o.add(n.headerFontFamily),!e.isHeader&&n.textFontFamily&&o.add(n.textFontFamily)))}return n.textFontFamily&&o.add(n.textFontFamily),e.filter(t=>o.has(t))}static _getEnabledStyleEntries(t){const e=[];t.props&&t.props.adaptiveStyles&&(e.push(...t.props.adaptiveStyles.desktop||[]),e.push(...t.props.adaptiveStyles.mobile||[])),t.props&&t.props.styles&&e.push(...t.props.styles||[]);const o=new Set(e.filter(t=>t.params&&!1===t.params.enabled).map(t=>t.element));return e.filter(t=>!o.has(t.element))}async load(t,e){try{if(e=e||document,!(t||[]).length)return;const o=this._getDynamicUrlPart(t,e);if(!o||0===o.length)return;await this._addFontsLinkToDocument(o,e);const s=this._generateFontVariations(t),n=this._createFontTester(s,e);e.body.appendChild(n);const a=this._waitForAllFontsToLoad(s,e),r=new Promise((t,e)=>setTimeout(()=>e(new Error("Timeout")),2e3));await Promise.race([a,r]),n.remove()}catch(t){console.error("Error while loading fonts",t)}}cleanup(){this.loadedGoogleFonts.forEach(t=>t.remove()),this.loadedGoogleFonts=[]}_getDynamicUrlPart(t,e){let o=[];(e.fonts||[]).forEach(t=>o.push(`${t.family} ${t.weight} ${t.style}`));const s=new Set(o);return this._combineUrlDynamicPart(t,s)}_combineUrlDynamicPart(t,e){const o=[];let s=this._makeFontOptions();return t.forEach(t=>{let n="",a="";s.forEach(o=>{if(!e.has(`${t} ${o} normal`)){const t=`1,${o}`;a+=a?`;${t}`:t}if(!e.has(`${t} ${o} italic`)){const t=`0,${o}`;n+=n?`;${t}`:t}}),(n||a)&&o.push({fontFamily:t,urlPart:`&family=${t.replace(/ /g,"+")}:ital,wght@${n};${a}`})}),o}_makeFontOptions(){const t=[];for(let e=0;e<9;e++){const o=100*(e+1);t.push(o)}return t}_addFontsLinkToDocument(t,e){if(!e.head)return Promise.resolve();const o=t.map(({fontFamily:t,urlPart:o})=>new Promise((s,n)=>{const a=document.createElement("link");a.rel="stylesheet",a.href="https://fonts.googleapis.com/css2?display=swap"+o,a.onload=()=>s({fontFamily:t,success:!0}),a.onerror=()=>{console.error(`Failed to load font: ${t}`),n(new Error(`Failed to load font: ${t}`))},e.head.appendChild(a),this.loadedGoogleFonts.push(a)}));return Promise.allSettled(o)}_generateFontVariations(t){const e=[100,200,300,400,500,600,700,800,900],o=["normal","italic"],s=[];return t.forEach(t=>{e.forEach(e=>{o.forEach(o=>{s.push({family:t,weight:e,style:o,descriptor:`${o} ${e} 1em "${t}"`})})})}),s}_createFontTester(t,e){const o=e.createElement("div");return o.setAttribute("aria-hidden","true"),o.style.cssText="\n position: fixed;\n top: -9999px;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n visibility: hidden;\n pointer-events: none;\n user-select: none;\n z-index: -1;\n ",t.forEach(t=>{Object.entries(this.testStrings).forEach(([s,n])=>{const a=e.createElement("span");a.textContent=n,a.style.cssText=`\n font-family: "${t.family}", sans-serif;\n font-weight: ${t.weight};\n font-style: ${t.style};\n font-size: 20px;\n display: inline-block;\n white-space: nowrap;\n `,a.dataset.font=`${t.family}-${t.weight}-${t.style}`,a.dataset.subset=s,o.appendChild(a)})}),o}async _waitForAllFontsToLoad(t,e){const o=[];for(let e=0;e<t.length;e+=10)o.push(t.slice(e,e+10));for(const t of o)await this._waitForFontBatchLoad(t,e)}async _waitForFontBatchLoad(t,e){const o=t.map(async t=>{try{e.fonts.check(t.descriptor)||await e.fonts.load(t.descriptor)}catch(e){console.error(`Failed to load: ${t.descriptor}`,e)}});return Promise.all(o)}}
|
|
@@ -1 +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";class FloatingBarLayout extends LayoutWithCloseIcon{constructor(t,e,o,n
|
|
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,o,i,n){super(t,e,o,i,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.floatingBarRootElement=document.createElement("div"),this.floatingBarRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBarElement=this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarSelector),this.floatingBarElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BAR),this.params.formVariantId&&this.floatingBarElement.setAttribute("cl-widget-id",this.params.formVariantId);const s=this.isMobileEnv();this.closeIconElement=this.floatingBarElement.querySelector(FloatingBarLayout.floatingBarCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector)),this.setCloseIconParams(s),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(s),this.floatingBarElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}getSharedParams(){return this.getDocumentModel().shared.floatingBar}isBottomPosition(t){return t.verticalPosition===WidgetVerticalPosition.BOTTOM}adjustBrandingPosition(t){const e=this.getSharedParams(),o=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(o)?this.brandingElement.style.top="-30px":this.brandingElement.style.bottom="-30px"}clearPosition(){const t=Array.from(this.floatingBarElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBarElement.style.getPropertyValue(t)]);this.floatingBarElement.removeAttribute("style"),t.forEach(([t,e])=>{this.floatingBarElement.style.setProperty(t,e)}),this.modifiedFloatingElement&&(this.modifiedFloatingElement.style.top=this.originalModifiedFloatingElementTop)}restoreHtmlBodyStyles(){this.modifiedHtmlBodyElement&&this.originalHtmlBodyElementMarginTop&&(this.modifiedHtmlBodyElement.style.marginTop=this.originalHtmlBodyElementMarginTop)}setTopPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.top="0px"}setBottomPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.bottom="0px"}setPosition(t){this.clearPosition(),this.restoreHtmlBodyStyles();const e=this.getSharedParams(),o=t?e.mobile:e.desktop,i=this.isBottomPosition(o);return i?(this.setBottomPosition(o),{isBottomPosition:i}):(this._setTopPosition(t,o),{isBottomPosition:i})}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 o=this.getActualSizeByEnv(t);if(!o)return void this.setTopPosition(e);const i=o.height,n=parseFloat(i),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 o=n+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=o+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const l=n+this.calculatedOverflowAbove;this.modifiedHtmlBodyElement.style.marginTop=l+"px",this.setTopPosition(e)}_getElementAtTheTopOfTheViewport(t){const e=this.getViewportWidth(t,t.defaultView||t.parentWindow)/2,o=t.elementFromPoint(e,0);return o!==t.body?o:t.elementFromPoint(e,50)}_findFloatingElement(t){let e=t,o=null;for(;e;){const t=getComputedStyle(e);if(!(e&&e.getAttribute("cl-connector-root-element"))&&"fixed"===t.position||"sticky"===t.position){o=e;break}e=e.parentElement}return o}_getVisualOverflowAbove(t){const e=t.getBoundingClientRect();let o=e.top;const i=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let n;for(;n=i.nextNode();){let i=0,s=n;for(;s!==t&&i<10;)s=s.parentElement,i++;if(i>=10)continue;const a=getComputedStyle(n);if("none"===a.display||"hidden"===a.visibility||0===parseFloat(a.opacity))continue;const l=n.getBoundingClientRect();l.right>e.left+.1*e.width&&l.left<e.right-.1*e.width&&(l.height>0&&l.width>0&&l.top<o&&l.top>e.top-150&&(o=l.top))}return Math.max(0,e.top-o)}setCloseIconParams(t){const e=this.getDocumentModel().shared.closeIcon;this.applyCloseIconParams(this.closeIconElement,e,t)}connect(t,e,o){this.containerElement=e,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:i}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",o.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(i)}),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)),window.addEventListener("resize",this._onZoomChange),this.floatingBarElement}disconnect(t){super.disconnect(t);const e=()=>{var e,o;null==t||t(),this.clearPosition(),this.floatingBarElement.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.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const o=this.getSharedParams(),i=this.isMobileEnv()?o.mobile:o.desktop,n=this.isBottomPosition(i)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${n} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){var e;return`\n <div class="cl-floating-bar">\n <style>\n .cl-floating-bar {\n width: 100%;\n position: ${null!==(e=t.displayPosition)&&void 0!==e?e:"fixed"};\n z-index: ${t.zIndex};\n }\n\n ${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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@claspo/document-connector",
|
|
3
|
-
"version": "16.0.
|
|
3
|
+
"version": "16.0.8-tooltip.0",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"test": "jest --no-cache --coverage",
|
|
6
6
|
"build": "rm -rf out && tsc --project tsconfig.json && npm run minify",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@claspo/common": "7.0.2",
|
|
18
|
-
"@claspo/renderer": "18.0.2"
|
|
18
|
+
"@claspo/renderer": "18.0.2-tooltip.0"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"concat-md": "^0.5.1",
|