{"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/./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;","const Style = ({ attributes, clientId }) => {\r\n\tconst { alignment, width, border, labelTypo, labelColors, labelPadding, capTypo, capColors, capPadding } = attributes;\r\n\r\n\treturn <style dangerouslySetInnerHTML={{\r\n\t\t__html: `\r\n\t\t${labelTypo?.googleFontLink ? `@import url(${labelTypo?.googleFontLink});` : ''}\r\n\t\t${capTypo?.googleFontLink ? `@import url(${capTypo?.googleFontLink});` : ''}\r\n\r\n\t\t#icbImageCompare-${clientId}{\r\n\t\t\ttext-align: ${alignment};\r\n\t\t}\r\n\t\t#icbImageCompare-${clientId} .icbImageCompare{\r\n\t\t\twidth: ${width || '100%'};\r\n\t\t\t${border?.styles};\r\n\t\t}\r\n\t\t#icbImageCompare-${clientId} .icbImageCompare .overlay{\r\n\t\t\t${labelTypo?.styles || 'font-size: 15px;'}\r\n\t\t\t${labelColors?.styles || 'color: #fff; background: #00000080;'}\r\n\t\t\tpadding: ${labelPadding?.styles || '10px 15px'};\r\n\t\t}\r\n\t\t#icbImageCompare-${clientId} .icbImageCompare .caption{\r\n\t\t\t${capTypo?.styles || 'font-size: 14px;'}\r\n\t\t\t${capColors?.styles || 'color: #333; background: #f4f4f4;'}\r\n\t\t\tpadding: ${capPadding?.styles || '10px 15px'};\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\nconst 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}\r\nexport { drags }","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 comparisonRef = 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\tsetTimeout(() => {\r\n\t\t\tif (comparisonRef.current) {\r\n\t\t\t\tconst comparisonWidth = comparisonRef.current?.clientWidth + 'px';\r\n\r\n\t\t\t\tsetImgWidth(comparisonWidth);\r\n\r\n\t\t\t\tdrags($(dividerRef.current), $(resizeRef.current), $(comparisonRef.current));\r\n\r\n\t\t\t\twindow.addEventListener('resize', () => {\r\n\t\t\t\t\tconst comparisonWidth = comparisonRef.current?.clientWidth + 'px';\r\n\t\t\t\t\tsetImgWidth(comparisonWidth);\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}, 0);\r\n\t}, [$]);\r\n\r\n\t// useEffect(() => {\r\n\t// \tif ($('.comparison-slider')[0]) {\r\n\t// \t\tsetTimeout(() => {\r\n\t// \t\t\tlet compSlider = $('.comparison-slider');\r\n\r\n\t// \t\t\t//let's loop through the sliders and initialize each of them\r\n\t// \t\t\tcompSlider.each(function () {\r\n\t// \t\t\t\tlet compSliderWidth = $(this).width() + 'px';\r\n\t// \t\t\t\t$(this).find('.resize img').css({ width: compSliderWidth, minWidth: compSliderWidth });\r\n\t// \t\t\t\tdrags($(this).find('.divider'), $(this).find('.resize'), $(this));\r\n\t// \t\t\t});\r\n\r\n\t// \t\t\t//if the user resizes the windows lets update our variables and resize our images\r\n\t// \t\t\t$(window).on('resize', function () {\r\n\t// \t\t\t\tlet compSliderWidth = compSlider.width() + 'px';\r\n\t// \t\t\t\tcompSlider.find('.resize img').css({ width: compSliderWidth, minWidth: compSliderWidth });\r\n\t// \t\t\t});\r\n\t// \t\t}, 0);\r\n\t// \t}\r\n\t// }, [$]);\r\n\r\n\treturn <div className='icbImageCompare'>\r\n\t\t<div className='comparison-slider' ref={comparisonRef}>\r\n\t\t\t{/* {isLabel && afterLabel && <RichText.Content className='overlay afterLabel' tagName='div' value={afterLabel} />} */}\r\n\t\t\t{isLabel && afterLabel && <div className='overlay afterLabel' dangerouslySetInnerHTML={{ __html: afterLabel }} />}\r\n\t\t\t<img className='afterImg' src={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 && <RichText.Content className='overlay beforeLabel' tagName='div' value={beforeLabel} />} */}\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={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 && <RichText.Content className='caption' tagName='div' value={cap} />} */}\r\n\t\t{isCap && cap && <div className='caption' dangerouslySetInnerHTML={{ __html: cap }} />}\r\n\t</div>\r\n}"],"names":["React","ReactDOM","attributes","clientId","alignment","width","border","labelTypo","labelColors","labelPadding","capTypo","capColors","capPadding","dangerouslySetInnerHTML","__html","googleFontLink","styles","replace","$","jQuery","document","addEventListener","querySelectorAll","forEach","imageCompare","JSON","parse","dataset","render","cId","ImageCompare","removeAttribute","beforeImg","afterImg","isLabel","beforeLabel","afterLabel","isCap","cap","comparisonRef","useRef","dividerRef","resizeRef","beforeImgRef","setImgWidth","current","style","minWidth","useEffect","setTimeout","comparisonWidth","clientWidth","dragElement","resizeElement","container","touched","window","on","e","addClass","startX","pageX","originalEvent","touches","dragWidth","outerWidth","posX","offset","left","containerOffset","containerWidth","minLeft","maxLeft","parents","preventDefault","leftValue","widthValue","css","this","removeClass","className","ref","src","url","alt"],"sourceRoot":""}