{"version":3,"file":"script.js","mappings":"yBAAA,IAAI,EAA+BA,MCA/B,EAA+BC,SCAtBC,EAAmB,SAACC,GAA0D,IAAtDC,IAAsD,yDAAtCC,IAAsC,yDAAnBC,IAAmB,yDAC1F,EAA0OH,EAAlOI,KAAAA,OAAR,MAAe,QAAf,IAA0OJ,EAAlNK,MAAAA,OAAxB,MAAgC,YAAhC,IAA0OL,EAA7LM,SAAAA,OAA7C,MAAwD,4CAAxD,IAA0ON,EAArIO,MAAAA,OAArG,MAA6G,GAA7G,IAA0OP,EAAzHQ,SAAAA,OAAjH,MAA4H,gBAA5H,IAA0OR,EAA7FS,WAAAA,OAA7I,MAA0J,UAA1J,IAA0OT,EAArEU,OAAAA,OAArK,MAA8K,YAA9K,IAA0OV,EAA/CW,KAAAA,OAA3L,MAAkM,QAAlM,IAA0OX,EAA/BY,aAAAA,OAA3M,MAA0N,YAA1N,EAEMC,EAAU,aAAeT,GAAQF,EAAxB,sBAAqDI,EAArD,KACb,UAAYF,GAAQD,EAArB,0BACoBI,aADpB,EACoBA,EAAOO,IAD3B,yCAEsBF,EAFtB,2CAGyBJ,EAHzB,uCAIqBG,EAJrB,yCAKuBD,EALvB,6CAM2BD,EAN3B,8CAQCR,GAAW,eAAJ,OAAmBI,EAAnB,KAET,OAAOQ,GCQR,EApBc,SAAC,GAA6B,IDqGhBE,EAC3B,EAAQC,EAAR,EAAkBC,EAAlB,EAAoCC,EAApC,EAAwDC,EAAxD,EAAqEC,EAArE,EAAoFC,EAApF,EAAoGC,ECtGpFC,EAA2B,EAA3BA,WAAYC,EAAe,EAAfA,SACpBC,EAA6DF,EAA7DE,cAAeC,EAA8CH,EAA9CG,UAAWC,EAAmCJ,EAAnCI,WAAYC,EAAuBL,EAAvBK,UAAWC,EAAYN,EAAZM,QAEzD,OAAO,6BAAOC,wBAAyB,CACtCC,OAAQ,oCACcP,EADd,gCAEOI,EAFP,6CAIcJ,EAJd,yDAKYC,EALZ,gCAMOC,EANP,gCAOOE,EAPP,8BDiGkBb,ECzFFc,ED0FzB,EAAqHd,EAA7GC,KAAAA,OAAR,MAAe,EAAf,IAAqHD,EAAnGE,SAAAA,OAAlB,MAA6B,MAA7B,IAAqHF,EAAjFG,WAAAA,OAApC,MAAiD,MAAjD,IAAqHH,EAA7DI,IAAAA,OAAxD,MAA8D,MAA9D,IAAqHJ,EAAhDK,MAAAA,OAArE,MAA6E,MAA7E,IAAqHL,EAAjCM,OAAAA,OAApF,MAA6F,MAA7F,IAAqHN,EAAjBO,KAAAA,OAApG,MAA2G,MAA3G,EAEe,IAAMN,EAAN,UAAgBC,EAAhB,YAA4BC,GAA5B,UAA8CC,EAA9C,YAAqDC,EAArD,YAA8DC,EAA9D,YAAwEC,ICpG9E,6CAUcE,EAVd,oCAWLzB,EAAiB4B,GAXZ,iBAaNK,QAAQ,OAAQ,SCnBPC,EAAe,SAACC,EAAIC,GAAgC,MAAtBC,EAAsB,wDAC1DC,EAAQC,WAAWJ,SAAD,UAACA,EAAIK,eAAL,aAAC,EAAaF,SAAW,EAC3CG,EAAgBJ,GAAaK,OAAOC,QACpCC,EAAeF,OAAOG,YACtBC,EAAeV,aAAH,EAAGA,EAAUW,aACzBC,EAAkBZ,aAAH,EAAGA,EAAUa,UAG5BC,EAAYT,EAAgBG,EAGlC,GAAIM,EAAYF,GAAmBP,EAAgBO,EAAkBF,EAAc,CAElF,IAAMK,GAAcD,EAAYF,GAAmBV,EAE7Cc,EAASR,EAAeE,EAE1BO,EAAeF,EAAYC,EAAU,KAAQ,GAAc,GAARd,GAGvDH,EAAGmB,MAAMlC,IAAMiC,EAAa,IAC5BlB,EAAGmB,MAAMC,UAAY,oBAAsBF,EAAa,OCb1DG,SAASC,iBAAiB,oBAAoB,WAClBD,SAASE,iBAAiB,0BAClCC,SAAQ,SAAAC,GAC1B,MAAgCC,KAAKC,MAAMF,EAAgBpB,QAAQuB,OAA3DvC,EAAR,EAAQA,WAAYwC,EAApB,EAAoBA,SAEpBC,EAAAA,EAAAA,QAAO,oBAACC,EAAD,CAAiB1C,WAAYA,EAAYwC,QAASA,IAAaJ,GAEtEA,SAAAA,EAAiBO,gBAAgB,oBAInC,IAAMD,EAAkB,SAAC,GAA4B,IAA1B1C,EAA0B,EAA1BA,WAAYwC,EAAc,EAAdA,QAC9BI,EAAe5C,EAAf4C,IAAK9B,EAAUd,EAAVc,MAEP+B,GAAgBC,EAAAA,EAAAA,QAAO,MAY7B,OAVAC,EAAAA,EAAAA,YAAU,WACLF,SAAAA,EAAeG,UAClBtC,EAAamC,EAAcG,QAASH,EAAcG,QAAQC,eAE1DjB,SAASC,iBAAiB,UAAU,WACnCvB,EAAamC,EAAcG,QAASH,EAAcG,QAAQC,qBAG1D,CAACJ,aAAD,EAACA,EAAeG,UAEZ,wCACN,oBAAC,EAAD,CAAOhD,WAAYA,EAAYC,SAAU2C,IAEzC,2BAAKM,UAAU,iBAAiB,aAAYpC,EAAOqC,IAAKN,IAExD,2BAAKK,UAAU,qBAAqB3C,wBAAyB,CAAEC,OAAQgC,O","sources":["webpack://parallax-section/external var \"React\"","webpack://parallax-section/external var \"ReactDOM\"","webpack://parallax-section/../Components/Helper/getCSS.js","webpack://parallax-section/./src/Style.js","webpack://parallax-section/./src/utils/functions.js","webpack://parallax-section/./src/script.js"],"sourcesContent":["var __WEBPACK_NAMESPACE_OBJECT__ = React;","var __WEBPACK_NAMESPACE_OBJECT__ = ReactDOM;","export const getBackgroundCSS = (bg, isSolid = true, isGradient = true, isImage = true) => {\r\n\tconst { type = 'solid', color = '#000000b3', gradient = 'linear-gradient(135deg, #4527a4, #8344c5)', image = {}, position = 'center center', attachment = 'initial', repeat = 'no-repeat', size = 'cover', overlayColor = '#000000b3' } = bg;\r\n\r\n\tconst styles = ('gradient' === type && isGradient) ? `background: ${gradient};` :\r\n\t\t('image' === type && isImage) ?\r\n\t\t\t`background: url(${image?.url});\r\n\t\t\t\tbackground-color: ${overlayColor};\r\n\t\t\t\tbackground-position: ${position};\r\n\t\t\t\tbackground-size: ${size};\r\n\t\t\t\tbackground-repeat: ${repeat};\r\n\t\t\t\tbackground-attachment: ${attachment};\r\n\t\t\t\tbackground-blend-mode: overlay;` :\r\n\t\t\tisSolid && `background: ${color};`;\r\n\r\n\treturn styles;\r\n} // PHP version in Stepped Content\r\n\r\nexport const getBorderCSS = (border) => {\r\n\tconst { width = '0px', style = 'solid', color = '#0000', side = 'all', radius = '0px' } = border;\r\n\r\n\tconst borderSideCheck = s => {\r\n\t\tconst bSide = side?.toLowerCase();\r\n\t\treturn bSide?.includes('all') || bSide?.includes(s);\r\n\t}\r\n\r\n\tconst noWidth = width === '0px' || !width;\r\n\tconst borderCSS = `${width} ${style} ${color}`;\r\n\r\n\tconst styles = `\r\n\t\t${noWidth ? '' : borderSideCheck('top') ? `border-top: ${borderCSS};` : ''}\r\n\t\t${noWidth ? '' : borderSideCheck('right') ? `border-right: ${borderCSS};` : ''}\r\n\t\t${noWidth ? '' : borderSideCheck('bottom') ? `border-bottom: ${borderCSS};` : ''}\r\n\t\t${noWidth ? '' : borderSideCheck('left') ? `border-left: ${borderCSS};` : ''}\r\n\t\t${!radius ? '' : `border-radius: ${radius};`}\r\n\t`;\r\n\r\n\treturn styles;\r\n}\r\n\r\nexport const getColorsCSS = (colors) => {\r\n\tconst { color = '#333', bgType = 'solid', bg = '#0000', gradient = 'linear-gradient(135deg, #4527a4, #8344c5)' } = colors;\r\n\r\n\tconst styles = `\r\n\t\t${color ? `color: ${color};` : ''}\r\n\t\t${gradient || bg ? `background: ${'gradient' === bgType ? gradient : bg};` : ''}\r\n\t`;\r\n\r\n\treturn styles;\r\n}\r\n\r\nexport const getIconCSS = (icon, isSize = true, isColor = true) => {\r\n\tconst { fontSize = 16, colorType = 'solid', color = 'inherit', gradient = 'linear-gradient(135deg, #4527a4, #8344c5)' } = icon;\r\n\r\n\tconst colorCSS = 'gradient' === colorType ?\r\n\t\t`color: transparent; background-image: ${gradient}; -webkit-background-clip: text; background-clip: text;` :\r\n\t\t`color: ${color};`;\r\n\r\n\tconst styles = `\r\n\t\t${!fontSize || !isSize ? '' : `font-size: ${fontSize}px;`}\r\n\t\t${isColor ? colorCSS : ''}\r\n\t`;\r\n\r\n\treturn styles;\r\n}\r\n\r\nexport const getMultiShadowCSS = (value, type = 'box') => {\r\n\tlet styles = '';\r\n\r\n\tvalue?.map((item, index) => {\r\n\t\tconst { hOffset = '0px', vOffset = '0px', blur = '0px', spreed = '0px', color = '#7090b0', isInset = false } = item;\r\n\r\n\t\tconst inset = isInset ? 'inset' : '';\r\n\t\tconst offsetBlur = `${hOffset || ''} ${vOffset || ''} ${blur || ''}`;\r\n\t\tconst isComa = index + 1 >= value.length ? '' : ', ';\r\n\r\n\t\tstyles += 'text' === type ? `${offsetBlur} ${color || ''}${isComa}` : `${offsetBlur} ${spreed || ''} ${color || ''} ${inset}${isComa}`;\r\n\t});\r\n\r\n\treturn styles || 'none';\r\n}\r\n\r\nexport const getSeparatorCSS = (separator) => {\r\n\tconst { width = '50%', height = '2px', style = 'solid', color = '#bbb' } = separator;\r\n\r\n\tconst styles = `\r\n\t\twidth: ${width};\r\n\t\t${'0px' === height && '0em' === height && '0rem' === height ? '' : `border-top: ${height} ${style} ${color};`}\r\n\t`;\r\n\r\n\treturn styles;\r\n}\r\n\r\nexport const getShadowCSS = (shadow) => {\r\n\tconst { type = 'box', hOffset = '0px', vOffset = '0px', blur = '0px', spreed = '0px', color = '#7090b0', isInset = false } = shadow;\r\n\r\n\tconst inset = isInset ? 'inset' : '';\r\n\tconst offsetBlur = `${hOffset} ${vOffset} ${blur}`;\r\n\r\n\tconst styles = 'text' === type ? `${offsetBlur} ${color}` : `${offsetBlur} ${spreed} ${color} ${inset}`;\r\n\r\n\treturn styles || 'none';\r\n}\r\n\r\nexport const getSpaceCSS = (space) => {\r\n\tconst { side = 2, vertical = '0px', horizontal = '0px', top = '0px', right = '0px', bottom = '0px', left = '0px' } = space;\r\n\r\n\tconst styles = 2 === side ? `${vertical} ${horizontal}` : `${top} ${right} ${bottom} ${left}`;\r\n\r\n\treturn styles;\r\n}\r\n\r\nexport const getTypoCSS = (selector, typo, isFamily = true) => {\r\n\tconst { fontFamily = 'Default', fontCategory = 'sans-serif', fontVariant = 400, fontWeight = 400, isUploadFont = true, fontSize = { desktop: 15, tablet: 15, mobile: 15 }, fontStyle = 'normal', textTransform = 'none', textDecoration = 'auto', lineHeight = '135%', letterSpace = '0px' } = typo;\r\n\r\n\tconst generateCss = (value, cssProperty) => !value ? '' : `${cssProperty}: ${value};`;\r\n\r\n\tconst isEmptyFamily = !isFamily || !fontFamily || 'Default' === fontFamily;\r\n\tconst desktopFontSize = fontSize?.desktop || fontSize;\r\n\tconst tabletFontSize = fontSize?.tablet || desktopFontSize;\r\n\tconst mobileFontSize = fontSize?.mobile || tabletFontSize;\r\n\r\n\tconst styles = `\r\n\t\t${isEmptyFamily ? '' : `font-family: '${fontFamily}', ${fontCategory};`}\r\n\t\t${generateCss(fontWeight, 'font-weight')}\r\n\t\t${`font-size: ${desktopFontSize}px;`}\r\n\t\t${generateCss(fontStyle, 'font-style')}\r\n\t\t${generateCss(textTransform, 'text-transform')}\r\n\t\t${generateCss(textDecoration, 'text-decoration')}\r\n\t\t${generateCss(lineHeight, 'line-height')}\r\n\t\t${generateCss(letterSpace, 'letter-spacing')}\r\n\t`;\r\n\r\n\t// Google font link\r\n\tconst linkQuery = !fontVariant || 400 === fontVariant ? '' : '400i' === fontVariant ? ':ital@1' : fontVariant?.includes('00i') ? `: ital, wght@1, ${fontVariant?.replace('00i', '00')} ` : `: wght@${fontVariant} `;\r\n\r\n\tconst link = isEmptyFamily ? '' : `https://fonts.googleapis.com/css2?family=${fontFamily?.split(' ').join('+')}${linkQuery.replace(/ /g, '')}&display=swap`;\r\n\r\n\treturn `\r\n\t\t${!isUploadFont || isEmptyFamily ? '' : `@import url(${link});`}\r\n\r\n\t\t${selector}{\r\n\t\t\t${styles}\r\n\t\t}\r\n\t\t@media (max-width: 768px) {\r\n\t\t\t${selector}{\r\n\t\t\t\t${`font-size: ${tabletFontSize}px;`}\r\n\t\t\t}\r\n\t\t}\r\n\t\t@media (max-width: 576px) {\r\n\t\t\t${selector}{\r\n\t\t\t\t${`font-size: ${mobileFontSize}px;`}\r\n\t\t\t}\r\n\t\t}\r\n\t`.replace(/\\s+/g, ' ').trim()\r\n}\r\n\r\nexport const getBoxCSS = (val = {}) => Object.values(val).join(' ');","import { getBackgroundCSS, getSpaceCSS } from '../../Components/Helper/getCSS';\r\n\r\nconst Style = ({ attributes, clientId }) => {\r\n\tconst { verticalAlign, textAlign, background, minHeight, padding } = attributes;\r\n\r\n\treturn <style dangerouslySetInnerHTML={{\r\n\t\t__html: `\r\n\t\t#psbParallaxSection-${clientId}{\r\n\t\t\tmin-height: ${minHeight};\r\n\t\t}\r\n\t\t#psbParallaxSection-${clientId} .psbParallaxSection{\r\n\t\t\tjustify-content: ${verticalAlign};\r\n\t\t\ttext-align: ${textAlign};\r\n\t\t\tmin-height: ${minHeight};\r\n\t\t\tpadding: ${getSpaceCSS(padding)};\r\n\t\t}\r\n\t\t#psbParallaxSection-${clientId} .psbParallaxImg{\r\n\t\t\t${getBackgroundCSS(background)}\r\n\t\t}\r\n\t\t`.replace(/\\s+/g, ' ')\r\n\t}} />\r\n}\r\nexport default Style;","export const parallaxInit = (el, parentEl, scrollTop = false) => {\r\n\tconst speed = parseFloat(el?.dataset?.speed) || -1;\r\n\tconst windowScrollY = scrollTop || window.scrollY;\r\n\tconst windowHeight = window.innerHeight;\r\n\tconst parentHeight = parentEl?.clientHeight;\r\n\tconst parentOffsetTop = parentEl?.offsetTop;\r\n\r\n\t// The next pixel to show on screen\r\n\tconst winBottom = windowScrollY + windowHeight;\r\n\r\n\t// If block is shown on screen\r\n\tif (winBottom > parentOffsetTop && windowScrollY < parentOffsetTop + parentHeight) {\r\n\t\t// Number of pixels shown after block appear\r\n\t\tconst imgBottom = ((winBottom - parentOffsetTop) * speed);\r\n\t\t// Max number of pixels until block disappear\r\n\t\tconst imgTop = windowHeight + parentHeight;\r\n\t\t// Percentage between start showing until disappearing\r\n\t\tlet imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));\r\n\r\n\t\t// Set the style\r\n\t\tel.style.top = imgPercent + '%';\r\n\t\tel.style.transform = 'translate(-50%, -' + imgPercent + '%)';\r\n\t}\r\n}","import { useEffect, useRef } from 'react';\r\nimport { render } from 'react-dom';\r\n\r\nimport './style.scss';\r\nimport Style from './Style';\r\nimport { parallaxInit } from './utils/functions';\r\n\r\n// Parallax Section\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\tconst allParallaxSection = document.querySelectorAll('.wp-block-psb-parallax');\r\n\tallParallaxSection.forEach(parallaxSection => {\r\n\t\tconst { attributes, content } = JSON.parse(parallaxSection.dataset.props);\r\n\r\n\t\trender(<ParallaxSection attributes={attributes} content={content} />, parallaxSection);\r\n\r\n\t\tparallaxSection?.removeAttribute('data-props');\r\n\t});\r\n});\r\n\r\nconst ParallaxSection = ({ attributes, content }) => {\r\n\tconst { cId, speed } = attributes;\r\n\r\n\tconst parallaxImgEl = useRef(null);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (parallaxImgEl?.current) {\r\n\t\t\tparallaxInit(parallaxImgEl.current, parallaxImgEl.current.parentElement);\r\n\r\n\t\t\tdocument.addEventListener('scroll', () => {\r\n\t\t\t\tparallaxInit(parallaxImgEl.current, parallaxImgEl.current.parentElement);\r\n\t\t\t});\r\n\t\t}\r\n\t}, [parallaxImgEl?.current]);\r\n\r\n\treturn <>\r\n\t\t<Style attributes={attributes} clientId={cId} />\r\n\r\n\t\t<div className='psbParallaxImg' data-speed={speed} ref={parallaxImgEl} />\r\n\r\n\t\t<div className='psbParallaxSection' dangerouslySetInnerHTML={{ __html: content }} />\r\n\t</>;\r\n}"],"names":["React","ReactDOM","getBackgroundCSS","bg","isSolid","isGradient","isImage","type","color","gradient","image","position","attachment","repeat","size","overlayColor","styles","url","space","side","vertical","horizontal","top","right","bottom","left","attributes","clientId","verticalAlign","textAlign","background","minHeight","padding","dangerouslySetInnerHTML","__html","replace","parallaxInit","el","parentEl","scrollTop","speed","parseFloat","dataset","windowScrollY","window","scrollY","windowHeight","innerHeight","parentHeight","clientHeight","parentOffsetTop","offsetTop","winBottom","imgBottom","imgTop","imgPercent","style","transform","document","addEventListener","querySelectorAll","forEach","parallaxSection","JSON","parse","props","content","render","ParallaxSection","removeAttribute","cId","parallaxImgEl","useRef","useEffect","current","parentElement","className","ref"],"sourceRoot":""}