{"version":3,"file":"script.js","mappings":"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","sources":["webpack://image-compare/external var \"React\"","webpack://image-compare/external var \"ReactDOM\"","webpack://image-compare/../Components/utils/getCSS.js","webpack://image-compare/./src/Style.js","webpack://image-compare/./src/utils/functions.js","webpack://image-compare/./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(/mx-es/wp-content/plugins/before-after-image-compare/dist/${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 ? '' : ['top', 'right', 'bottom', 'left'].map(side => borderSideCheck(side) ? `border-${side}: ${borderCSS};` : '').join('')}\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\tgoogleFontLink: !isUploadFont || isEmptyFamily ? '' : `@import url(/mx-es/wp-content/plugins/before-after-image-compare/dist/${link});`,\r\n\t\tstyles: `${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}`.replace(/\\s+/g, ' ').trim()\r\n\t}\r\n}\r\n\r\nexport const getBoxCSS = (val = {}) => Object.values(val).join(' ');","import { getBorderCSS, getColorsCSS, getSpaceCSS, getTypoCSS } from '../../Components/utils/getCSS';\r\n\r\nconst Style = ({ attributes, clientId }) => {\r\n\tconst { alignment, width, border, labelTypo, labelColors, labelPadding, capTypo, capColors, capPadding } = attributes;\r\n\r\n\tconst mainSl = `#icbImageCompare-${clientId}`;\r\n\tconst imgCompareSl = `${mainSl} .icbImageCompare`;\r\n\r\n\treturn <style dangerouslySetInnerHTML={{\r\n\t\t__html: `\r\n\t\t${getTypoCSS('', labelTypo)?.googleFontLink}\r\n\t\t${getTypoCSS('', capTypo)?.googleFontLink}\r\n\t\t${getTypoCSS(`${imgCompareSl} .overlay`, labelTypo)?.styles}\r\n\t\t${getTypoCSS(`${imgCompareSl} .caption`, capTypo)?.styles}\r\n\r\n\t\t#icbImageCompare-${clientId}{\r\n\t\t\ttext-align: ${alignment};\r\n\t\t}\r\n\t\t${imgCompareSl}{\r\n\t\t\twidth: ${width};\r\n\t\t\t${getBorderCSS(border)};\r\n\t\t}\r\n\t\t${imgCompareSl} .overlay{\r\n\t\t\t${getColorsCSS(labelColors)}\r\n\t\t\tpadding: ${getSpaceCSS(labelPadding)};\r\n\t\t}\r\n\t\t${imgCompareSl} .caption{\r\n\t\t\t${getColorsCSS(capColors)}\r\n\t\t\tpadding: ${getSpaceCSS(capPadding)};\r\n\t\t}\r\n\t\t`.replace(/\\s+/g, ' ')\r\n\t}} />\r\n}\r\nexport default Style;","const $ = jQuery;\r\n\r\nexport const drags = (dragElement, resizeElement, container) => {\r\n\t// This creates a variable that detects if the user is using touch input instead of the mouse.\r\n\tlet touched = false;\r\n\twindow.addEventListener('touchstart', function () {\r\n\t\ttouched = true;\r\n\t});\r\n\twindow.addEventListener('touchend', function () {\r\n\t\ttouched = false;\r\n\t});\r\n\r\n\t// click the image and move the slider on interaction with the mouse or the touch input\r\n\tdragElement.on('mousedown touchstart', function (e) {\r\n\t\t//add classes to the elements - good for css animations if you need it to\r\n\t\tdragElement.addClass('icDraggable');\r\n\t\tresizeElement.addClass('icResizable');\r\n\t\t//create vars\r\n\t\tlet startX = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX;\r\n\t\tlet dragWidth = dragElement.outerWidth();\r\n\t\tlet posX = dragElement.offset().left + dragWidth - startX;\r\n\t\tlet containerOffset = container.offset().left;\r\n\t\tlet containerWidth = container.outerWidth();\r\n\t\tlet minLeft = containerOffset + 10;\r\n\t\tlet maxLeft = containerOffset + containerWidth - dragWidth - 10;\r\n\r\n\t\t//add event listener on the divider element\r\n\t\tdragElement.parents().on('mousemove touchmove', function (e) {\r\n\t\t\t// if the user is not using touch input let do preventDefault to prevent the user from selecting the images as he moves the slider around.\r\n\t\t\tif (touched === false) {\r\n\t\t\t\te.preventDefault();\r\n\t\t\t}\r\n\r\n\t\t\tlet moveX = e.pageX ? e.pageX : e.originalEvent?.touches?.[0].pageX;\r\n\t\t\tlet leftValue = moveX + posX - dragWidth;\r\n\r\n\t\t\t// stop the divider from going over the limits of the container\r\n\t\t\tif (leftValue < minLeft) {\r\n\t\t\t\tleftValue = minLeft;\r\n\t\t\t} else if (leftValue > maxLeft) {\r\n\t\t\t\tleftValue = maxLeft;\r\n\t\t\t}\r\n\r\n\t\t\tlet widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + '%';\r\n\r\n\t\t\t$('.icDraggable').css('left', widthValue).on('mouseup touchend touchcancel', function () {\r\n\t\t\t\t$(this).removeClass('icDraggable');\r\n\t\t\t\tresizeElement.removeClass('icResizable');\r\n\t\t\t});\r\n\r\n\t\t\t$('.icResizable').css('width', widthValue);\r\n\r\n\t\t}).on('mouseup touchend touchcancel', function () {\r\n\t\t\tdragElement.removeClass('icDraggable');\r\n\t\t\tresizeElement.removeClass('icResizable');\r\n\t\t});\r\n\t}).on('mouseup touchend touchcancel', function () {\r\n\t\t// stop clicking the image and move the slider\r\n\t\tdragElement.removeClass('icDraggable');\r\n\t\tresizeElement.removeClass('icResizable');\r\n\t});\r\n}","import { useEffect, useRef } from 'react';\r\nimport { render } from 'react-dom';\r\nconst $ = jQuery;\r\n\r\nimport './style.scss';\r\nimport Style from './Style';\r\nimport { drags } from './utils/functions';\r\n\r\n// Image Compare\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\tconst allImageCompare = document.querySelectorAll('.wp-block-icb-image-compare');\r\n\tallImageCompare.forEach(imageCompare => {\r\n\t\tconst attributes = JSON.parse(imageCompare.dataset.attributes);\r\n\r\n\t\trender(<>\r\n\t\t\t<Style attributes={attributes} clientId={attributes.cId} />\r\n\r\n\t\t\t<ImageCompare attributes={attributes} />\r\n\t\t</>, imageCompare);\r\n\r\n\t\timageCompare?.removeAttribute('data-attributes');\r\n\t});\r\n});\r\n\r\nconst ImageCompare = ({ attributes }) => {\r\n\tconst { beforeImg, afterImg, isLabel, beforeLabel, afterLabel, isCap, cap } = attributes;\r\n\r\n\tconst imgCompareRef = useRef(null);\r\n\tconst dividerRef = useRef(null);\r\n\tconst resizeRef = useRef(null);\r\n\tconst beforeImgRef = useRef(null);\r\n\r\n\tconst setImgWidth = width => {\r\n\t\tbeforeImgRef.current.style.width = width;\r\n\t\tbeforeImgRef.current.style.minWidth = width;\r\n\t}\r\n\r\n\t// Image Slider Scripts\r\n\tuseEffect(() => {\r\n\t\tconst imgCompareWidth = imgCompareRef.current?.clientWidth;\r\n\r\n\t\tconst handleResize = () => setImgWidth(`${imgCompareWidth}px`);\r\n\r\n\t\tconst observer = new ResizeObserver(handleResize);\r\n\r\n\t\tif (imgCompareRef.current) {\r\n\t\t\tobserver.observe(imgCompareRef.current);\r\n\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tif (imgCompareRef.current) {\r\n\t\t\t\t\thandleResize();\r\n\r\n\t\t\t\t\tdrags($(dividerRef.current), $(resizeRef.current), $(imgCompareRef.current));\r\n\r\n\t\t\t\t\twindow.addEventListener('resize', handleResize);\r\n\t\t\t\t}\r\n\t\t\t}, 0);\r\n\t\t}\r\n\r\n\t\treturn () => {\r\n\t\t\tobserver.disconnect();\r\n\t\t\twindow.removeEventListener('resize', handleResize);\r\n\t\t};\r\n\t}, [$]);\r\n\r\n\treturn <div className='icbImageCompare' ref={imgCompareRef}>\r\n\t\t<div className='comparison-slider'>\r\n\t\t\t{isLabel && afterLabel && <div className='overlay afterLabel' dangerouslySetInnerHTML={{ __html: afterLabel }} />}\r\n\t\t\t<img className='afterImg' src=/mx-es/wp-content/plugins/before-after-image-compare/dist/{afterImg?.url} alt={afterImg?.alt} />\r\n\r\n\t\t\t<div className='resize' ref={resizeRef}>\r\n\t\t\t\t{isLabel && beforeLabel && <div className='overlay beforeLabel' dangerouslySetInnerHTML={{ __html: beforeLabel }} />}\r\n\t\t\t\t<img className='beforeImg' src=/mx-es/wp-content/plugins/before-after-image-compare/dist/{beforeImg?.url} alt={beforeImg?.alt} ref={beforeImgRef} />\r\n\t\t\t</div>\r\n\r\n\t\t\t<div className='divider' ref={dividerRef}></div>\r\n\t\t</div>\r\n\r\n\t\t{isCap && cap && <div className='caption' dangerouslySetInnerHTML={{ __html: cap }} />}\r\n\t</div>\r\n}"],"names":["React","ReactDOM","getBorderCSS","border","width","style","color","side","radius","borderSideCheck","s","bSide","toLowerCase","includes","noWidth","borderCSS","styles","map","join","getColorsCSS","colors","bgType","bg","gradient","getSpaceCSS","space","vertical","horizontal","top","right","bottom","left","getTypoCSS","selector","typo","isFamily","fontFamily","fontCategory","fontVariant","fontWeight","isUploadFont","fontSize","desktop","tablet","mobile","fontStyle","textTransform","textDecoration","lineHeight","letterSpace","generateCss","value","cssProperty","isEmptyFamily","desktopFontSize","tabletFontSize","mobileFontSize","linkQuery","replace","link","split","googleFontLink","trim","attributes","clientId","alignment","labelTypo","labelColors","labelPadding","capTypo","capColors","capPadding","mainSl","imgCompareSl","dangerouslySetInnerHTML","__html","$","jQuery","document","addEventListener","querySelectorAll","forEach","imageCompare","JSON","parse","dataset","render","cId","ImageCompare","removeAttribute","beforeImg","afterImg","isLabel","beforeLabel","afterLabel","isCap","cap","imgCompareRef","useRef","dividerRef","resizeRef","beforeImgRef","useEffect","imgCompareWidth","current","clientWidth","handleResize","minWidth","observer","ResizeObserver","observe","setTimeout","dragElement","resizeElement","container","touched","window","on","e","addClass","startX","pageX","originalEvent","touches","dragWidth","outerWidth","posX","offset","containerOffset","containerWidth","minLeft","maxLeft","parents","preventDefault","leftValue","widthValue","css","this","removeClass","disconnect","removeEventListener","className","ref","src","url","alt"],"sourceRoot":""}