https://healthysmiles.pet/wp-content/themes/healthysmiles-multipayments/assets/js/comparison.js

1jQuery(document).ready(function ($) {
2  var dragging = false,
3    scrolling = false,
4    resizing = false;
5  //cache jQuery objects
6  var imageComparisonContainers = $('.cd-image-container');
7  //check if the .cd-image-container is in the viewport 
8  //if yes, animate it
9  checkPosition(imageComparisonContainers);
10  $(window).on('scroll', function () {
11    if (!scrolling) {
12      scrolling = true;
13      (!window.requestAnimationFrame)
14        ? setTimeout(function () { checkPosition(imageComparisonContainers); }, 100)
15        : requestAnimationFrame(function () { checkPosition(imageComparisonContainers); });
16    }
17  });
18
19  //make the .cd-handle element draggable and modify .cd-resize-img width according to its position
20  imageComparisonContainers.each(function () {
21    var actual = $(this);
22    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"]'));
23  });
24
25  //upadate images label visibility
26  $(window).on('resize', function () {
27    if (!resizing) {
28      resizing = true;
29      (!window.requestAnimationFrame)
30        ? setTimeout(function () { checkLabel(imageComparisonContainers); }, 100)
31        : requestAnimationFrame(function () { checkLabel(imageComparisonContainers); });
32    }
33  });
34
35  function checkPosition(container) {
36    container.each(function () {
37      var actualContainer = $(this);
38      if ($(window).scrollTop() + $(window).height() * 0.5 > actualContainer.offset().top) {
39        actualContainer.addClass('is-visible');
40      }
41    });
42
43    scrolling = false;
44  }
45
46  function checkLabel(container) {
47    container.each(function () {
48      var actual = $(this);
49      updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');
50      updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');
51    });
52
53    resizing = false;
54  }
55
56  //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
57  function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
58    dragElement.on("mousedown vmousedown", function (e) {
59      dragElement.addClass('draggable');
60      resizeElement.addClass('resizable');
61
62      var dragWidth = dragElement.outerWidth(),
63        xPosition = dragElement.offset().left + dragWidth - e.pageX,
64        containerOffset = container.offset().left,
65        containerWidth = container.outerWidth(),
66        minLeft = containerOffset - 22,
67        maxLeft = containerOffset + containerWidth - dragWidth + 22;
68
69      dragElement.parents().on("mousemove vmousemove", function (e) {
70        if (!dragging) {
71          dragging = true;
72          (!window.requestAnimationFrame)
73            ? setTimeout(function () { animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement); }, 100)
74            : requestAnimationFrame(function () { animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement); });
75        }
76      }).on("mouseup vmouseup", function (e) {
77        dragElement.removeClass('draggable');
78        resizeElement.removeClass('resizable');
79      });
80      e.preventDefault();
81    }).on("mouseup vmouseup", function (e) {
82      dragElement.removeClass('draggable');
83      resizeElement.removeClass('resizable');
84    });
85  }
86
87  function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {
88    var leftValue = e.pageX + xPosition - dragWidth;
89    //constrain the draggable element to move inside his container
90    if (leftValue < minLeft) {
91      leftValue = minLeft;
92    } else if (leftValue > maxLeft) {
93      leftValue = maxLeft;
94    }
95
96    var widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + '%';
97
98    $('.draggable').css('left', widthValue).on("mouseup vmouseup", function () {
99      $(this).removeClass('draggable');
100      resizeElement.removeClass('resizable');
101    });
102
103    $('.resizable').css('width', widthValue);
104
105    updateLabel(labelResizeElement, resizeElement, 'left');
106    updateLabel(labelContainer, resizeElement, 'right');
107    dragging = false;

108  }
109
110  function updateLabel(label, resizeElement, position) {
111    if (position == 'left') {
112      (label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth()) ? label.removeClass('is-hidden') : label.addClass('is-hidden');
113    } else {
114      (label.offset().left > resizeElement.offset().left + resizeElement.outerWidth()) ? label.removeClass('is-hidden') : label.addClass('is-hidden');
115    }
116  }
117});