@claspo/document-connector 16.1.0 → 16.1.1-margin.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 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,o,n){super(t,e,i,o,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.floatingBarRootElement=document.createElement("div"),this.floatingBarRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBarElement=this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarSelector),this.floatingBarElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BAR),this.params.formVariantId&&this.floatingBarElement.setAttribute("cl-widget-id",this.params.formVariantId);const s=this.isMobileEnv();this.closeIconElement=this.floatingBarElement.querySelector(FloatingBarLayout.floatingBarCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector)),this.setCloseIconParams(s),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(s),this.floatingBarElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}getSharedParams(){return this.getDocumentModel().shared.floatingBar}isBottomPosition(t){return t.verticalPosition===WidgetVerticalPosition.BOTTOM}adjustBrandingPosition(t){const e=this.getSharedParams(),i=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(i)?this.brandingElement.style.top="-30px":this.brandingElement.style.bottom="-30px"}clearPosition(){const t=Array.from(this.floatingBarElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBarElement.style.getPropertyValue(t)]);this.floatingBarElement.removeAttribute("style"),t.forEach(([t,e])=>{this.floatingBarElement.style.setProperty(t,e)}),this.modifiedFloatingElement&&(this.modifiedFloatingElement.style.top=this.originalModifiedFloatingElementTop)}restoreHtmlBodyStyles(){this.modifiedHtmlBodyElement&&this.originalHtmlBodyElementMarginTop&&(this.modifiedHtmlBodyElement.style.marginTop=this.originalHtmlBodyElementMarginTop)}setTopPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.top="0px"}setBottomPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.bottom="0px"}setPosition(t){this.clearPosition(),this.restoreHtmlBodyStyles();const e=this.getSharedParams(),i=t?e.mobile:e.desktop,o=this.isBottomPosition(i);return o?(this.setBottomPosition(i),{isBottomPosition:o}):(this._setTopPosition(t,i),{isBottomPosition:o})}getOtherStyles(){return""}_setTopPosition(t,e){if(this.modifiedFloatingElement=null,this.modifiedHtmlBodyElement=null,this.calculatedOverflowAbove=0,"body"!==this.containerElement.tagName.toLowerCase()||!this.getDocumentModel().shared.actualSize||this.params.disableSmartPosition)return void this.setTopPosition(e);const i=this.getActualSizeByEnv(t);if(!i)return void this.setTopPosition(e);const o=i.height,n=parseFloat(o),s=this.containerElement.getRootNode(),a=this._getElementAtTheTopOfTheViewport(s);if(a){const t=this._findFloatingElement(a);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const i=n+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=i+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const 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,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 o=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let n;for(;n=o.nextNode();){let o=0,s=n;for(;s!==t&&o<10;)s=s.parentElement,o++;if(o>=10)continue;const 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<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.documentElement=t,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:o}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(o)}),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,i;null==t||t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(i=this.environmentUpdateListener)||void 0===i||i.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),o=this.isMobileEnv()?i.mobile:i.desktop,n=this.isBottomPosition(o)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${n} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){var e;return`\n <div class="cl-floating-bar">\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.getGameSpotlightStyles()}\n\n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-floating-bar-inner-content">\n <div class="cl-floating-bar-close-icon"></div>\n <div class="cl-floating-bar-content"></div>\n </div>\n </div>\n `}playEntryAnimation(t){if(!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations){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
|
+
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,o,n){super(t,e,i,o,n),this.entryAndDestroyAnimationDurationInSeconds=.3,this._onZoomChange=()=>{this.setPosition(this.isMobileEnv()),this.setCloseIconParams(this.isMobileEnv())},this.floatingBarRootElement=document.createElement("div"),this.floatingBarRootElement.insertAdjacentHTML("afterbegin",this._getTemplate(this.params)),this.floatingBarElement=this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarSelector),this.floatingBarElement.setAttribute("cl-connector-root-element",LayoutType.FLOATING_BAR),this.params.formVariantId&&this.floatingBarElement.setAttribute("cl-widget-id",this.params.formVariantId);const s=this.isMobileEnv();this.closeIconElement=this.floatingBarElement.querySelector(FloatingBarLayout.floatingBarCloseIconSelector),this.addCloseIconEventListener(),this.addWidgetContentClickEventListener(this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector)),this.setCloseIconParams(s),this.params.branded&&(this.createBrandingElement(),this.adjustBrandingPosition(s),this.floatingBarElement.appendChild(this.brandingElement),this.addBrandingElementListeners())}getSharedParams(){return this.getDocumentModel().shared.floatingBar}isBottomPosition(t){return t.verticalPosition===WidgetVerticalPosition.BOTTOM}adjustBrandingPosition(t){const e=this.getSharedParams(),i=t?e.mobile:e.desktop;this.brandingElement.style.right="10px",this.brandingElement.style.zIndex="2",this.isBottomPosition(i)?this.brandingElement.style.top="-30px":this.brandingElement.style.bottom="-30px"}clearPosition(){const t=Array.from(this.floatingBarElement.style).filter(t=>t.startsWith("--")).map(t=>[t,this.floatingBarElement.style.getPropertyValue(t)]);this.floatingBarElement.removeAttribute("style"),t.forEach(([t,e])=>{this.floatingBarElement.style.setProperty(t,e)}),this.modifiedFloatingElement&&(this.modifiedFloatingElement.style.top=this.originalModifiedFloatingElementTop)}restoreHtmlBodyStyles(){this.modifiedHtmlBodyElement&&this.originalHtmlBodyElementMarginTop&&(this.modifiedHtmlBodyElement.style.marginTop=this.originalHtmlBodyElementMarginTop)}setTopPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.top="0px"}setBottomPosition(t){this.floatingBarElement.style.left="0px",this.floatingBarElement.style.bottom="0px"}setPosition(t){this.clearPosition(),this.restoreHtmlBodyStyles();const e=this.getSharedParams(),i=t?e.mobile:e.desktop,o=this.isBottomPosition(i);return o?(this.setBottomPosition(i),{isBottomPosition:o}):(this._setTopPosition(t,i),{isBottomPosition:o})}getOtherStyles(){return""}_setTopPosition(t,e){if(this.modifiedFloatingElement=null,this.modifiedHtmlBodyElement=null,this.calculatedOverflowAbove=0,"body"!==this.containerElement.tagName.toLowerCase()||!this.getDocumentModel().shared.actualSize||this.params.disableSmartPosition)return void this.setTopPosition(e);const i=this.getActualSizeByEnv(t);if(!i)return void this.setTopPosition(e);const o=i.height,n=parseFloat(o),s=this.containerElement.getRootNode(),a=this._getElementAtTheTopOfTheViewport(s);if(a){const t=this._findFloatingElement(a);if(t){const e=this._getVisualOverflowAbove(t);this.calculatedOverflowAbove=e;const i=n+e;this.modifiedFloatingElement=t,this.originalModifiedFloatingElementTop=getComputedStyle(t).top,t.style.top=i+"px"}}this.modifiedHtmlBodyElement=s.body,this.originalHtmlBodyElementMarginTop=getComputedStyle(this.modifiedHtmlBodyElement).marginTop;const 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,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 o=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT,null);let n;for(;n=o.nextNode();){let o=0,s=n;for(;s!==t&&o<10;)s=s.parentElement,o++;if(o>=10)continue;const 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<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.documentElement=t,this.floatingBarRootElement.querySelector(FloatingBarLayout.floatingBarContentSelector).appendChild(t),e.appendChild(this.floatingBarElement),this.setConnectedElement(this.floatingBarElement);const{isBottomPosition:o}=this.setPosition(this.isMobileEnv());return this.floatingBarElement.style.visibility="hidden",i.compositionRoot.services.eventEmitter.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.floatingBarElement.style.visibility="visible",this.playEntryAnimation(o)}),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,i;null==t||t(),this.clearPosition(),this.floatingBarElement.remove(),null===(e=this.sharedUpdateListener)||void 0===e||e.off(),null===(i=this.environmentUpdateListener)||void 0===i||i.off(),window.removeEventListener("resize",this._onZoomChange)};if(this.restoreHtmlBodyStyles(),this.params.disableLayoutAnimations)return void e();const i=this.getSharedParams(),o=this.isMobileEnv()?i.mobile:i.desktop,n=this.isBottomPosition(o)?"slideInBottom":"slideInTop";this.floatingBarElement.style.animation=`${n} ${this.entryAndDestroyAnimationDurationInSeconds}s ease-out reverse`,setTimeout(()=>{e()},1e3*this.entryAndDestroyAnimationDurationInSeconds-50)}_getTemplate(t){var e;return`\n <div class="cl-floating-bar">\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.getGameSpotlightStyles()}\n\n ${this.getEntryAndDestroyAnimations()}\n </style>\n\n <div class="cl-floating-bar-inner-content">\n <div class="cl-floating-bar-close-icon"></div>\n <div class="cl-floating-bar-content"></div>\n </div>\n </div>\n `}playEntryAnimation(t){if(!this.params.disableEntryAnimation&&!this.params.disableLayoutAnimations){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;
|