summaryrefslogtreecommitdiff
path: root/assets/compare.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/compare.js')
-rw-r--r--assets/compare.js79
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') ;
- }
-}