{"version":3,"sources":["block-image-comparison.js"],"names":["jQuery","document","ready","$","checkPosition","container","each","actualContainer","this","window","scrollTop","height","offset","top","addClass","scrolling","checkLabel","actual","updateLabel","find","resizing","drags","dragElement","resizeElement","labelContainer","labelResizeElement","on","e","ePageX","pageX","originalEvent","touches","dragWidth","outerWidth","xPosition","left","containerOffset","containerWidth","minLeft","maxLeft","parents","dragging","requestAnimationFrame","animateDraggedHandle","setTimeout","removeClass","preventDefault","leftValue","widthValue","css","label","position","imageComparisonContainers"],"mappings":"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","file":"block-image-comparison.js","sourcesContent":["jQuery(document).ready(function($){\n    var dragging = false,\n        scrolling = false,\n        resizing = false;\n    //cache jQuery objects\n    var imageComparisonContainers = $('.cd-image-container');\n    //check if the .cd-image-container is in the viewport\n    //if yes, animate it\n    checkPosition(imageComparisonContainers);\n    $(window).on('scroll', function(){\n      if( !scrolling) {\n        scrolling =  true;\n        ( !window.requestAnimationFrame )\n          ? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)\n          : requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});\n      }\n    });\n\n    //make the .cd-handle element cd-draggable and modify .cd-resize-img width according to its position\n    imageComparisonContainers.each(function(){\n      var actual = $(this);\n      drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type=\"original\"]'), actual.find('.cd-image-label[data-type=\"modified\"]'));\n    });\n\n    //upadate images label visibility\n    $(window).on('resize', function(){\n      if( !resizing) {\n        resizing =  true;\n        ( !window.requestAnimationFrame )\n          ? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100)\n          : requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});\n      }\n    });\n\n    function checkPosition(container) {\n      container.each(function(){\n        var actualContainer = $(this);\n        if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {\n          actualContainer.addClass('is-visible');\n        }\n      });\n\n      scrolling = false;\n    }\n\n    function checkLabel(container) {\n      container.each(function(){\n        var actual = $(this);\n        updateLabel(actual.find('.cd-image-label[data-type=\"modified\"]'), actual.find('.cd-resize-img'), 'left');\n        updateLabel(actual.find('.cd-image-label[data-type=\"original\"]'), actual.find('.cd-resize-img'), 'right');\n      });\n\n      resizing = false;\n    }\n\n    //cd-draggable funtionality - credits to http://css-tricks.com/snippets/jquery/cd-draggable-without-jquery-ui/\n    function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {\n      dragElement.on(\"mousedown vmousedown touchstart\", function(e) {\n        dragElement.addClass('cd-draggable');\n        resizeElement.addClass('resizable');\n\n        var ePageX = e.pageX;\n        if(typeof ePageX == 'undefined') {\n          ePageX = e.originalEvent.touches[0].pageX;\n        }\n\n        var dragWidth = dragElement.outerWidth(),\n            xPosition = dragElement.offset().left + dragWidth - ePageX,\n            containerOffset = container.offset().left,\n            containerWidth = container.outerWidth(),\n            minLeft = containerOffset + 10,\n            maxLeft = containerOffset + containerWidth - dragWidth - 10;\n\n        // console.log(dragElement.offset().left, dragWidth, ePageX);\n        // console.log(dragWidth, xPosition, containerOffset, containerWidth, minLeft, maxLeft);\n\n        dragElement.parents().on(\"mousemove vmousemove touchmove\", function(e) {\n          if( !dragging) {\n            dragging =  true;\n            ( !window.requestAnimationFrame )\n              ? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100)\n              : requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});\n          }\n        }).on(\"mouseup vmouseup touchend\", function(e){\n          dragElement.removeClass('cd-draggable');\n          resizeElement.removeClass('resizable');\n        });\n        e.preventDefault();\n      }).on(\"mouseup vmouseup touchend\", function(e) {\n        dragElement.removeClass('cd-draggable');\n        resizeElement.removeClass('resizable');\n      });\n    }\n\n    function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {\n      var ePageX = e.pageX;\n      if(typeof ePageX == 'undefined') {\n        ePageX = e.originalEvent.touches[0].pageX;\n      }\n      var leftValue = ePageX + xPosition - dragWidth;\n      //constrain the cd-draggable element to move inside his container\n      if(leftValue < minLeft ) {\n        leftValue = minLeft;\n      } else if ( leftValue > maxLeft) {\n        leftValue = maxLeft;\n      }\n\n      var widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';\n\n      $('.cd-draggable').css('left', widthValue).on(\"mouseup vmouseup touchend\", function() {\n        $(this).removeClass('cd-draggable');\n        resizeElement.removeClass('resizable');\n      });\n\n      $('.resizable').css('width', widthValue);\n\n      updateLabel(labelResizeElement, resizeElement, 'left');\n      updateLabel(labelContainer, resizeElement, 'right');\n      dragging =  false;\n    }\n\n    function updateLabel(label, resizeElement, position) {\n      if(position == 'left') {\n        ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;\n      } else {\n        ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;\n      }\n    }\n});\n"]}