https://expertexteriors.ca/wp-content/themes/kitchor/assets/js/elementor/image-before-after.js?ver=1.0.1

1(function ($) {
2    "use strict";
3    $(window).on('elementor/frontend/init', () => {
4        elementorFrontend.hooks.addAction('frontend/element_ready/kitchor-image-before-after.default', ($scope) => {
5            // I hope this over-commenting helps. Let's do this!
6            // Let's use the 'active' variable to let us know when we're using it
7            let active = false,
8                $wrapper = document.querySelector('.elementor-image-before-after', $scope),
9                $scroller = document.querySelector('.elementor-image-scroller', $scope),
10                $after = document.querySelector('.elementor-image-after', $scope),
11                $width = $('.elementor-image-before-after', $scope);
12
13            // First we'll have to set up our event listeners
14            // We want to watch for clicks on our scroller
15            $scroller.addEventListener('mousedown', function () {
16                active = true;
17                // Add our scrolling class so the scroller has full opacity while active
18                $scroller.classList.add('elementor-image-scrolling');
19            });
20            // We also want to watch the body for changes to the state,
21            // like moving around and releasing the click
22            // so let's set up our event listeners
23            document.body.addEventListener('mouseup', function () {
24                active = false;
25                $scroller.classList.remove('elementor-image-scrolling');
26            });
27            document.body.addEventListener('mouseleave', function () {
28                active = false;
29                $scroller.classList.remove('elementor-image-scrolling');
30            });
31
32            // Let's figure out where their mouse is at
33            document.body.addEventListener('mousemove', function (e) {
34                if (!active) return;
35                // Their mouse is here...
36                let x = e.pageX;
37                // but we want it relative to our wrapper
38                x -= $wrapper.getBoundingClientRect().left;
39                // Okay let's change our state
40                scrollIt(x);
41            });
42
43            // Let's use this function
44            function scrollIt(x) {
45                let transform = Math.max(0, (Math.min(x, $wrapper.offsetWidth)));
46                $after.style.width = transform + "px";
47                $scroller.style.left = transform - 40 + "px";
48            }
49
50            // Let's set our opening state based off the width,
51            // we want to show a bit of both images so the user can see what's going on
52            scrollIt($width.width() / 2);
53
54            // And finally let's repeat the process for touch events
55            // first our middle scroller...
56            $scroller.addEventListener('touchstart', function () {
57                active = true;
58                $scroller.classList.add('elementor-image-scrolling');
59            });
60            document.body.addEventListener('touchend', function () {
61                active = false;
62                $scroller.classList.remove('elementor-image-scrolling');
63            });
64            document.body.addEventListener('touchcancel', function () {
65                active = false;
66                $scroller.classList.remove('elementor-image-scrolling');
67            });
68        });
69    });
70
71})(jQuery);