diff options
Diffstat (limited to 'assets/compare.js')
-rw-r--r-- | assets/compare.js | 79 |
1 files changed, 0 insertions, 79 deletions
diff --git a/assets/compare.js b/assets/compare.js deleted file mode 100644 index 2d0d3e5..0000000 --- a/assets/compare.js +++ /dev/null @@ -1,79 +0,0 @@ -jQuery(document).ready(function($){ - //check if the .cd-image-container is in the viewport - //if yes, animate it - checkPosition($('.cd-image-container')); - $(window).on('scroll', function(){ - checkPosition($('.cd-image-container')); - }); - - //make the .cd-handle element draggable and modify .cd-resize-img width according to its position - drags($('.cd-handle'), $('.cd-resize-img'), $('.cd-image-container'), $('.cd-image-label[data-type="original"]'), $('.cd-image-label[data-type="modified"]')); - - //upadate images label visibility - $(window).on('resize', function(){ - updateLabel($('.cd-image-label[data-type="modified"]'), $('.cd-resize-img'), 'left'); - updateLabel($('.cd-image-label[data-type="original"]'), $('.cd-resize-img'), 'right'); - }); -}); - -function checkPosition(container) { - if( $(window).scrollTop() + $(window).height()*0.5 > container.offset().top) { - container.addClass('is-visible'); - //you can uncomment the following line if you don't have other events to bind to the window scroll - // $(window).off('scroll'); - } -} - -//draggable funtionality - credits to https://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/ -function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) { - dragElement.on("mousedown vmousedown", function(e) { - dragElement.addClass('draggable'); - resizeElement.addClass('resizable'); - - var dragWidth = dragElement.outerWidth(), - xPosition = dragElement.offset().left + dragWidth - e.pageX, - containerOffset = container.offset().left, - containerWidth = container.outerWidth(), - minLeft = containerOffset + 10, - maxLeft = containerOffset + containerWidth - dragWidth - 10; - - dragElement.parents().on("mousemove vmousemove", function(e) { - leftValue = e.pageX + xPosition - dragWidth; - - //constrain the draggable element to move inside his container - if(leftValue < minLeft ) { - leftValue = minLeft; - } else if ( leftValue > maxLeft) { - leftValue = maxLeft; - } - - widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%'; - - $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() { - $(this).removeClass('draggable'); - resizeElement.removeClass('resizable'); - }); - - $('.resizable').css('width', widthValue); - - updateLabel(labelResizeElement, resizeElement, 'left'); - updateLabel(labelContainer, resizeElement, 'right'); - - }).on("mouseup vmouseup", function(e){ - dragElement.removeClass('draggable'); - resizeElement.removeClass('resizable'); - }); - e.preventDefault(); - }).on("mouseup vmouseup", function(e) { - dragElement.removeClass('draggable'); - resizeElement.removeClass('resizable'); - }); -} - -function updateLabel(label, resizeElement, position) { - if(position == 'left') { - ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; - } else { - ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; - } -} |