{"version":3,"file":"script.js","mappings":"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","sources":["webpack://image-compare/external var [\"wp\",\"blockEditor\"]","webpack://image-compare/external var [\"wp\",\"element\"]","webpack://image-compare/./src/Style.js","webpack://image-compare/./src/Const/functions.js","webpack://image-compare/./src/script.js"],"sourcesContent":["var __WEBPACK_NAMESPACE_OBJECT__ = wp.blockEditor;","var __WEBPACK_NAMESPACE_OBJECT__ = wp.element;","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};\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 { RichText } from '@wordpress/block-editor';\r\nimport { render, useEffect } from '@wordpress/element';\r\nconst $ = jQuery;\r\n\r\nimport './style.scss';\r\nimport Style from './Style';\r\nimport { drags } from './Const/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\t// Image Slider Scripts\r\n\tuseEffect(() => {\r\n\t\tif ($('.comparison-slider')[0]) {\r\n\t\t\tlet compSlider = $('.comparison-slider');\r\n\r\n\t\t\t//let's loop through the sliders and initialize each of them\r\n\t\t\tcompSlider.each(function () {\r\n\t\t\t\tlet compSliderWidth = $(this).width() + 'px';\r\n\t\t\t\t$(this).find('.resize img').css({ width: compSliderWidth, minWidth: compSliderWidth });\r\n\t\t\t\tdrags($(this).find('.divider'), $(this).find('.resize'), $(this));\r\n\t\t\t});\r\n\r\n\t\t\t//if the user resizes the windows lets update our variables and resize our images\r\n\t\t\t$(window).on('resize', function () {\r\n\t\t\t\tlet compSliderWidth = compSlider.width() + 'px';\r\n\t\t\t\tcompSlider.find('.resize img').css({ width: compSliderWidth, minWidth: compSliderWidth });\r\n\t\t\t});\r\n\t\t}\r\n\t}, [$]);\r\n\r\n\treturn <div className='icbImageCompare'>\r\n\t\t<div className='comparison-slider'>\r\n\t\t\t{isLabel && afterLabel && <RichText.Content className='overlay afterLabel' tagName='div' value={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'>\r\n\t\t\t\t{isLabel && beforeLabel && <RichText.Content className='overlay beforeLabel' tagName='div' value={beforeLabel} />}\r\n\t\t\t\t<img className='beforeImg' src={beforeImg?.url} alt={beforeImg?.alt} />\r\n\t\t\t</div>\r\n\r\n\t\t\t<div className='divider'></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</div>\r\n}"],"names":["wp","blockEditor","element","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","useEffect","compSlider","each","dragElement","resizeElement","container","touched","compSliderWidth","this","find","css","minWidth","window","on","e","addClass","startX","pageX","originalEvent","touches","dragWidth","outerWidth","posX","offset","left","containerOffset","containerWidth","minLeft","maxLeft","parents","preventDefault","leftValue","widthValue","removeClass","className","RichText","tagName","value","src","url","alt"],"sourceRoot":""}