@ikas/popup-renderer
Advanced tools
Comparing version 0.0.9 to 0.0.10
@@ -1,1 +0,1 @@ | ||
import e from"react";import'./../../ext/mobx-react-lite/es/index.js';import{PopupTypeEnum as t,PopupPositonEnum as o}from"../models/modal/index.js";import r from"../assets/x-close.js";import{CloseButtonPositionTypeEnum as n,CloseIconTypeEnum as i,CloseButtonDisplayTypeEnum as l}from"../models/modal/close-settings/index.js";import{PopupElementTypeEnum as d,ComponentVerticalAlignmentEnum as s}from"../models/modal/step/elements/base/index.js";import a from"./text-element-renderer/index.js";import c from"./button-element-renderer/index.js";import m from"./space-element-renderer/index.js";import p from"./divider-element-renderer/index.js";import u from"./social-element-renderer/index.js";import x from"./image-element-renderer/index.js";import f from"./image-column-element-renderer/index.js";import E from"./product-list-renderer/index.js";import P from"./form-element-renderer/index.js";import{ImageColumnPositionEnum as g}from"../models/modal/step/elements/image-column/index.js";import{observer as T}from'./../../ext/mobx-react-lite/es/observer.js';var O=T((function(T){var O,_,v,I,b=T.popup,y=T.dynamicData,h=T.dashboardComponents,C=b.modal,R=C.teaser,A=!!C.selectedStep.isTeaser,S=C.selectedStep.elements.find((function(e){return e.type===d.IMAGE_COLUMN})),D=A?R.backgroundSettings:C.backgroundSettings,M=A?R.windowSettings:C.windowSettings,w=A?R.closeSettings:C.closeSettings,k=D.allowScrollingWhenPopupOpen;document.body.style.overflow=k?"auto":"hidden";var N=D.overlay,j=D.border,L="center",U="center";switch(A?t.POPUP:C.type){case t.POPUP:var B=A?R.position:C.position;B===o.POPUP_TOP_LEFT?(L="flex-start",U="flex-start"):B===o.POPUP_TOP_CENTER?(L="center",U="flex-start"):B===o.POPUP_TOP_RIGHT?(L="flex-end",U="flex-start"):B===o.POPUP_MIDDLE_LEFT?(L="flex-start",U="center"):B===o.POPUP_MIDDLE_CENTER?(L="center",U="center"):B===o.POPUP_MIDDLE_RIGHT?(L="flex-end",U="center"):B===o.POPUP_BOTTOM_LEFT?(L="flex-start",U="flex-end"):B===o.POPUP_BOTTOM_CENTER?(L="center",U="flex-end"):B===o.POPUP_BOTTOM_RIGHT&&(L="flex-end",U="flex-end");break;case t.DRAWER:C.position===o.DRAWER_LEFT?(L="flex-start",U="center"):C.position===o.DRAWER_RIGHT&&(L="flex-end",U="center");break;case t.NOTIFICATION_BAR:C.position===o.NOTIFICATION_BAR_UP?(L="center",U="flex-start"):C.position===o.NOTIFICATION_BAR_DOWN&&(L="center",U="flex-end")}var W={position:"fixed",display:"flex",justifyContent:L,alignItems:U,top:0,left:0,right:0,bottom:0,zIndex:1e3,overflow:"hidden",padding:"".concat(M.outerVerticalPadding,"px ").concat(M.outerHorizontalPadding,"px")},F={position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:1001,backgroundColor:N?N.bgColor:"",opacity:N?(N.bgOpacity||100)/100:void 0},H={position:"relative",zIndex:1002,opacity:1,display:"flex",flexDirection:S?S.imagePosition===g.LEFT_ALIGN?"row-reverse":"row":"column",backgroundColor:D.bgColor,border:j?"".concat(j.borderWidth,"px ").concat(j.borderStyle," ").concat(j.borderColor):"",borderRadius:"".concat(M.borderRadius,"px"),width:M.takeFullWidth?"100%":void 0,maxWidth:"100%",maxHeight:"100%",height:M.takeFullHeight?"100%":M.maxHeight,boxShadow:D.shadow?"0 0 10px ".concat(D.shadow.color):""},G="";switch(null==S?void 0:S.verticalAlignment){case s.BOTTOM:G="flex-end";break;case s.MIDDLE:G="center";break;case s.TOP:G="flex-start"}var V={width:M.takeFullWidth?"100%":M.maxWidth,maxWidth:"100%",overflow:"auto",display:"flex",flexDirection:"column",alignItems:G,borderRadius:"".concat(M.borderRadius,"px")},z={position:w.closeButtonPositionType===n.TAKE_SPACE?"relative":"absolute",float:w.closeButtonPositionType===n.TAKE_SPACE?"right":"none",top:8,right:8,zIndex:1003},K={position:"sticky",padding:"6px",marginLeft:w.closeButtonPositionType===n.TAKE_SPACE?"14px":void 0,display:"flex",justifyContent:"center",alignItems:"center",border:(null===(O=w.iconSettings)||void 0===O?void 0:O.type)===i.WITH_BORDER?"1px solid ".concat(null===(_=w.iconSettings)||void 0===_?void 0:_.color):"",borderRadius:"50%",backgroundColor:null===(v=w.iconSettings)||void 0===v?void 0:v.backgroundColor},X={color:null===(I=w.iconSettings)||void 0===I?void 0:I.color,cursor:"pointer"},Y=function(t){var o=t.type,r=h&&h[o]&&h[o].length?h[o][0]:null,n=r&&b.marketingPopupViewModel?e.createElement(r,{element:t,marketingPopupViewModel:b.marketingPopupViewModel}):void 0;switch(o){case d.TEXT:return e.createElement(a,{element:t});case d.IMAGE:return e.createElement(x,{element:t,popup:b,editModeChildren:n});case d.IMAGE_COLUMN:return e.createElement(f,{element:t,popup:b,editModeChildren:n});case d.BUTTON:return e.createElement(c,{element:t});case d.DIVIDER:return e.createElement(p,{element:t});case d.FORM:return e.createElement(P,{element:t});case d.PRODUCT_LIST:return e.createElement(E,{element:t,products:y.products[t.id],popup:b,editModeChildren:n});case d.SOCIAL_MEDIA:return e.createElement(u,{element:t,popup:b,editModeChildren:n});case d.SPACE:return e.createElement(m,{element:t})}};return e.createElement("div",{className:"default-styles",id:"ikas-popup-container",style:W,onClick:function(e){A&&(C.selectedStep=C.steps[0])}},e.createElement("div",{style:H},w.closeButtonDisplayType!==l.ALWAYS_HIDDEN&&e.createElement("div",{style:z},e.createElement("div",{style:K,className:w.closeButtonDisplayType===l.VISIBLE_ON_HOVER?"visible-on-hover":""},e.createElement(r,{style:X}))),e.createElement("div",{style:V},C.selectedStep.elements.filter((function(e){return e.type!==d.IMAGE_COLUMN})).slice().sort((function(e,t){return e.order-t.order})).map((function(e){return Y(e)}))),S&&Y(S)),e.createElement("div",{style:F}))}));export{O as default}; | ||
import e from"react";import'./../../ext/mobx-react-lite/es/index.js';import{PopupTypeEnum as t,PopupPositonEnum as o}from"../models/modal/index.js";import i from"../assets/x-close.js";import{CloseButtonPositionTypeEnum as r,CloseIconTypeEnum as n,CloseButtonDisplayTypeEnum as l}from"../models/modal/close-settings/index.js";import{PopupElementTypeEnum as s,ComponentVerticalAlignmentEnum as d}from"../models/modal/step/elements/base/index.js";import a from"./text-element-renderer/index.js";import c from"./button-element-renderer/index.js";import m from"./space-element-renderer/index.js";import p from"./divider-element-renderer/index.js";import u from"./social-element-renderer/index.js";import f from"./image-element-renderer/index.js";import x from"./image-column-element-renderer/index.js";import P from"./product-list-renderer/index.js";import E from"./form-element-renderer/index.js";import{ImageColumnPositionEnum as g}from"../models/modal/step/elements/image-column/index.js";import{observer as v}from'./../../ext/mobx-react-lite/es/observer.js';var T=v((function(v){var T,b,y,O,_=v.popup,I=v.dynamicData,h=v.dashboardComponents,C=_.modal,R=C.teaser,A=!!C.selectedStep.isTeaser,M=C.selectedStep.elements.find((function(e){return e.type===s.IMAGE_COLUMN})),S=A?R.backgroundSettings:C.backgroundSettings,D=A?R.windowSettings:C.windowSettings,w=A?R.closeSettings:C.closeSettings,k=S.allowScrollingWhenPopupOpen,N=!!_.isPreviewMode||C.isVisible;N&&(document.body.style.overflow=k?"auto":"hidden");var j=S.overlay,L=S.border,U="center",B="center";switch(A?t.POPUP:C.type){case t.POPUP:var W=A?R.position:C.position;W===o.POPUP_TOP_LEFT?(U="flex-start",B="flex-start"):W===o.POPUP_TOP_CENTER?(U="center",B="flex-start"):W===o.POPUP_TOP_RIGHT?(U="flex-end",B="flex-start"):W===o.POPUP_MIDDLE_LEFT?(U="flex-start",B="center"):W===o.POPUP_MIDDLE_CENTER?(U="center",B="center"):W===o.POPUP_MIDDLE_RIGHT?(U="flex-end",B="center"):W===o.POPUP_BOTTOM_LEFT?(U="flex-start",B="flex-end"):W===o.POPUP_BOTTOM_CENTER?(U="center",B="flex-end"):W===o.POPUP_BOTTOM_RIGHT&&(U="flex-end",B="flex-end");break;case t.DRAWER:C.position===o.DRAWER_LEFT?(U="flex-start",B="center"):C.position===o.DRAWER_RIGHT&&(U="flex-end",B="center");break;case t.NOTIFICATION_BAR:C.position===o.NOTIFICATION_BAR_UP?(U="center",B="flex-start"):C.position===o.NOTIFICATION_BAR_DOWN&&(U="center",B="flex-end")}var F={position:"fixed",display:"flex",justifyContent:U,alignItems:B,top:0,left:0,right:0,bottom:0,zIndex:1e3,overflow:"hidden",padding:"".concat(D.outerVerticalPadding,"px ").concat(D.outerHorizontalPadding,"px"),opacity:N?1:0,visibility:N?"visible":"hidden",transition:"opacity 0.3s ease, visibility 0.3s ease"},H={position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:1001,backgroundColor:j?j.bgColor:"",opacity:j?(j.bgOpacity||100)/100:void 0},V={position:"relative",zIndex:1002,display:"flex",flexDirection:M?M.imagePosition===g.LEFT_ALIGN?"row-reverse":"row":"column",backgroundColor:S.bgColor,border:L?"".concat(L.borderWidth,"px ").concat(L.borderStyle," ").concat(L.borderColor):"",borderRadius:"".concat(D.borderRadius,"px"),width:D.takeFullWidth?"100%":void 0,maxWidth:"100%",maxHeight:"100%",height:D.takeFullHeight?"100%":D.maxHeight,boxShadow:S.shadow?"0 0 10px ".concat(S.shadow.color):"",opacity:N?1:0,visibility:N?"visible":"hidden",transition:"opacity 0.3s ease, visibility 0.3s ease"},G="";switch(null==M?void 0:M.verticalAlignment){case d.BOTTOM:G="flex-end";break;case d.MIDDLE:G="center";break;case d.TOP:G="flex-start"}var z={width:D.takeFullWidth?"100%":D.maxWidth,maxWidth:"100%",overflow:"auto",display:"flex",flexDirection:"column",alignItems:G,borderRadius:"".concat(D.borderRadius,"px")},K={position:w.closeButtonPositionType===r.TAKE_SPACE?"relative":"absolute",float:w.closeButtonPositionType===r.TAKE_SPACE?"right":"none",top:8,right:8,zIndex:1003},X={position:"sticky",padding:"6px",marginLeft:w.closeButtonPositionType===r.TAKE_SPACE?"14px":void 0,display:"flex",justifyContent:"center",alignItems:"center",border:(null===(T=w.iconSettings)||void 0===T?void 0:T.type)===n.WITH_BORDER?"1px solid ".concat(null===(b=w.iconSettings)||void 0===b?void 0:b.color):"",borderRadius:"50%",backgroundColor:null===(y=w.iconSettings)||void 0===y?void 0:y.backgroundColor},Y={color:null===(O=w.iconSettings)||void 0===O?void 0:O.color,cursor:"pointer"},q=function(t){var o=t.type,i=h&&h[o]&&h[o].length?h[o][0]:null,r=i&&_.marketingPopupViewModel?e.createElement(i,{element:t,marketingPopupViewModel:_.marketingPopupViewModel}):void 0;switch(o){case s.TEXT:return e.createElement(a,{element:t});case s.IMAGE:return e.createElement(f,{element:t,popup:_,editModeChildren:r});case s.IMAGE_COLUMN:return e.createElement(x,{element:t,popup:_,editModeChildren:r});case s.BUTTON:return e.createElement(c,{element:t});case s.DIVIDER:return e.createElement(p,{element:t});case s.FORM:return e.createElement(E,{element:t});case s.PRODUCT_LIST:return e.createElement(P,{element:t,products:I.products[t.id],popup:_,editModeChildren:r});case s.SOCIAL_MEDIA:return e.createElement(u,{element:t,popup:_,editModeChildren:r});case s.SPACE:return e.createElement(m,{element:t})}},J=function(){_.isPreviewMode||C.isVisible&&(C.isVisible=!1)};return e.createElement("div",{className:"ikas-popup-default-styles",id:"ikas-popup-container",style:F,onClick:function(e){A&&(C.selectedStep=C.steps[0])}},e.createElement("div",{style:V},w.closeButtonDisplayType!==l.ALWAYS_HIDDEN&&e.createElement("div",{style:K,onClick:function(){return J()}},e.createElement("div",{style:X,className:w.closeButtonDisplayType===l.VISIBLE_ON_HOVER?"visible-on-hover":""},e.createElement(i,{style:Y}))),e.createElement("div",{style:z},C.selectedStep.elements.filter((function(e){return e.type!==s.IMAGE_COLUMN})).slice().sort((function(e,t){return e.order-t.order})).map((function(e){return q(e)}))),M&&q(M)),e.createElement("div",{style:H,onClick:function(){return J()}}))}));export{T as default}; |
@@ -27,2 +27,3 @@ import { PopupStep } from "./step"; | ||
export declare class Modal { | ||
isVisible: boolean; | ||
type: PopupTypeEnum; | ||
@@ -29,0 +30,0 @@ position: PopupPositonEnum; |
@@ -1,1 +0,1 @@ | ||
import{makeObservable as t,observable as i,computed as e,action as P}from"mobx";import{PopupStep as n}from"./step/index.js";import{Teaser as s}from"./teaser/index.js";import{WindowSettings as o}from"./window-settings/index.js";import{Border as O,BackgroundSettings as T}from"./background-settings/index.js";import{CloseSettings as _}from"./close-settings/index.js";var I,r;!function(t){t.POPUP="POPUP",t.NOTIFICATION_BAR="NOTIFICATION_BAR",t.DRAWER="DRAWER"}(I||(I={})),function(t){t.POPUP_TOP_LEFT="POPUP_TOP_LEFT",t.POPUP_TOP_CENTER="POPUP_TOP_CENTER",t.POPUP_TOP_RIGHT="POPUP_TOP_RIGHT",t.POPUP_MIDDLE_LEFT="POPUP_MIDDLE_LEFT",t.POPUP_MIDDLE_CENTER="POPUP_MIDDLE_CENTER",t.POPUP_MIDDLE_RIGHT="POPUP_MIDDLE_RIGHT",t.POPUP_BOTTOM_LEFT="POPUP_BOTTOM_LEFT",t.POPUP_BOTTOM_CENTER="POPUP_BOTTOM_CENTER",t.POPUP_BOTTOM_RIGHT="POPUP_BOTTOM_RIGHT",t.NOTIFICATION_BAR_UP="NOTIFICATION_BAR_UP",t.NOTIFICATION_BAR_DOWN="NOTIFICATION_BAR_DOWN",t.DRAWER_RIGHT="DRAWER_RIGHT",t.DRAWER_LEFT="DRAWER_LEFT"}(r||(r={}));var R=function(){function R(O){this.type=O.type||I.POPUP,this.teaser=O.teaser?new s(O.teaser):new s({backgroundSettings:new T({allowScrollingWhenPopupOpen:!0})}),this.windowSettings=O.windowSettings?new o(O.windowSettings):new o({}),this.backgroundSettings=new T(O.backgroundSettings||{}),this.closeSettings=new _(O.closeSettings||{}),this.steps=O.steps&&O.steps.length?O.steps.map((function(t){return new n(t)})):[new n({stepNumber:1,name:"TODO",isThankYouStep:!1})],this.selectedStep=this.steps[0],this.position=O.position?O.position:r.POPUP_MIDDLE_CENTER,t(this,{type:i,position:i,teaser:i,windowSettings:i,backgroundSettings:i,closeSettings:i,steps:i,selectedStep:i,availablePositions:e,setInitialSettings:P,setInitialPosition:P,setInitialWindowSettings:P})}return R.prototype.setInitialSettings=function(t){void 0===t&&(t=!1),this.setInitialPosition(t),this.setInitialWindowSettings(t)},R.prototype.setInitialPosition=function(t){switch(this.type){case I.POPUP:this.position=t?r.POPUP_BOTTOM_RIGHT:r.POPUP_MIDDLE_CENTER;break;case I.NOTIFICATION_BAR:this.position=r.NOTIFICATION_BAR_UP;break;case I.DRAWER:this.position=r.DRAWER_RIGHT}},R.prototype.setInitialWindowSettings=function(t){switch(this.type){case I.POPUP:this.windowSettings=new o({}),t&&(this.backgroundSettings.allowScrollingWhenPopupOpen=!0,this.backgroundSettings.overlay=null,this.backgroundSettings.border=new O({}));break;case I.NOTIFICATION_BAR:this.windowSettings=new o({outerHorizontalPadding:0,outerVerticalPadding:0,takeFullWidth:!0});break;case I.DRAWER:this.windowSettings=new o({outerHorizontalPadding:0,outerVerticalPadding:0,takeFullHeight:!0})}},Object.defineProperty(R.prototype,"availablePositions",{get:function(){var t;return(t={})[I.POPUP]=[r.POPUP_TOP_LEFT,r.POPUP_TOP_CENTER,r.POPUP_TOP_RIGHT,r.POPUP_MIDDLE_LEFT,r.POPUP_MIDDLE_CENTER,r.POPUP_MIDDLE_RIGHT,r.POPUP_BOTTOM_LEFT,r.POPUP_BOTTOM_CENTER,r.POPUP_BOTTOM_RIGHT],t[I.NOTIFICATION_BAR]=[r.NOTIFICATION_BAR_UP,r.NOTIFICATION_BAR_DOWN],t[I.DRAWER]=[r.DRAWER_RIGHT,r.DRAWER_LEFT],t},enumerable:!1,configurable:!0}),R}();export{R as Modal,r as PopupPositonEnum,I as PopupTypeEnum}; | ||
import{makeObservable as t,observable as i,computed as e,action as P}from"mobx";import{PopupStep as n}from"./step/index.js";import{Teaser as s}from"./teaser/index.js";import{WindowSettings as o}from"./window-settings/index.js";import{Border as O,BackgroundSettings as T}from"./background-settings/index.js";import{CloseSettings as _}from"./close-settings/index.js";var I,r;!function(t){t.POPUP="POPUP",t.NOTIFICATION_BAR="NOTIFICATION_BAR",t.DRAWER="DRAWER"}(I||(I={})),function(t){t.POPUP_TOP_LEFT="POPUP_TOP_LEFT",t.POPUP_TOP_CENTER="POPUP_TOP_CENTER",t.POPUP_TOP_RIGHT="POPUP_TOP_RIGHT",t.POPUP_MIDDLE_LEFT="POPUP_MIDDLE_LEFT",t.POPUP_MIDDLE_CENTER="POPUP_MIDDLE_CENTER",t.POPUP_MIDDLE_RIGHT="POPUP_MIDDLE_RIGHT",t.POPUP_BOTTOM_LEFT="POPUP_BOTTOM_LEFT",t.POPUP_BOTTOM_CENTER="POPUP_BOTTOM_CENTER",t.POPUP_BOTTOM_RIGHT="POPUP_BOTTOM_RIGHT",t.NOTIFICATION_BAR_UP="NOTIFICATION_BAR_UP",t.NOTIFICATION_BAR_DOWN="NOTIFICATION_BAR_DOWN",t.DRAWER_RIGHT="DRAWER_RIGHT",t.DRAWER_LEFT="DRAWER_LEFT"}(r||(r={}));var R=function(){function R(O){this.type=O.type||I.POPUP,this.teaser=O.teaser?new s(O.teaser):new s({backgroundSettings:new T({allowScrollingWhenPopupOpen:!0})}),this.windowSettings=O.windowSettings?new o(O.windowSettings):new o({}),this.backgroundSettings=new T(O.backgroundSettings||{}),this.closeSettings=new _(O.closeSettings||{}),this.steps=O.steps&&O.steps.length?O.steps.map((function(t){return new n(t)})):[new n({stepNumber:1,name:"TODO",isThankYouStep:!1})],this.isVisible=!1,this.selectedStep=this.steps[0],this.position=O.position?O.position:r.POPUP_MIDDLE_CENTER,t(this,{type:i,position:i,teaser:i,windowSettings:i,backgroundSettings:i,closeSettings:i,steps:i,selectedStep:i,availablePositions:e,setInitialSettings:P,setInitialPosition:P,setInitialWindowSettings:P})}return R.prototype.setInitialSettings=function(t){void 0===t&&(t=!1),this.setInitialPosition(t),this.setInitialWindowSettings(t)},R.prototype.setInitialPosition=function(t){switch(this.type){case I.POPUP:this.position=t?r.POPUP_BOTTOM_RIGHT:r.POPUP_MIDDLE_CENTER;break;case I.NOTIFICATION_BAR:this.position=r.NOTIFICATION_BAR_UP;break;case I.DRAWER:this.position=r.DRAWER_RIGHT}},R.prototype.setInitialWindowSettings=function(t){switch(this.type){case I.POPUP:this.windowSettings=new o({}),t&&(this.backgroundSettings.allowScrollingWhenPopupOpen=!0,this.backgroundSettings.overlay=null,this.backgroundSettings.border=new O({}));break;case I.NOTIFICATION_BAR:this.windowSettings=new o({outerHorizontalPadding:0,outerVerticalPadding:0,takeFullWidth:!0});break;case I.DRAWER:this.windowSettings=new o({outerHorizontalPadding:0,outerVerticalPadding:0,takeFullHeight:!0})}},Object.defineProperty(R.prototype,"availablePositions",{get:function(){var t;return(t={})[I.POPUP]=[r.POPUP_TOP_LEFT,r.POPUP_TOP_CENTER,r.POPUP_TOP_RIGHT,r.POPUP_MIDDLE_LEFT,r.POPUP_MIDDLE_CENTER,r.POPUP_MIDDLE_RIGHT,r.POPUP_BOTTOM_LEFT,r.POPUP_BOTTOM_CENTER,r.POPUP_BOTTOM_RIGHT],t[I.NOTIFICATION_BAR]=[r.NOTIFICATION_BAR_UP,r.NOTIFICATION_BAR_DOWN],t[I.DRAWER]=[r.DRAWER_RIGHT,r.DRAWER_LEFT],t},enumerable:!1,configurable:!0}),R}();export{R as Modal,r as PopupPositonEnum,I as PopupTypeEnum}; |
{ | ||
"name": "@ikas/popup-renderer", | ||
"version": "0.0.9", | ||
"version": "0.0.10", | ||
"description": "", | ||
@@ -5,0 +5,0 @@ "author": "ucy", |
Sorry, the diff of this file is not supported yet
105238
1208