https://www.scientology.org.tw/plugins/slideshow/image-compare.js

1function initComparison() {
2    var dragging = false,
3        scrolling = false,
4        resizing = false;
5    //cache jQuery objects
6    var imageComparisonContainers = $('.cd-image-container:not(.cd-image-container__inited)');
7
8    if(imageComparisonContainers.length == 0) {
9        return;
10    }
11
12    $('.slider-switch').change(function() {
13        var $wrapper = $(this).closest('.cd-image-wrapper');
14        var $container = $wrapper.find('.cd-image-container');
15        // determine the target state class based on the switch value:
16        if(this.checked) {
17            $container.addClass('cd-image-container__secondary');
18        } else {
19            $container.removeClass('cd-image-container__secondary');
20        }
21    });
22
23    //check if the .cd-image-container is in the viewport
24    //if yes, animate it
25    for (var index = 0; index < imageComparisonContainers.length; index++) {
26        var container = imageComparisonContainers[index];
27        checkPosition(container);
28        $(container).addClass('cd-image-container__inited');
29    }
30    // checkPosition(imageComparisonContainers);
31    // $(window).on('scroll', function(){
32    //     if( !scrolling) {
33    //         scrolling =  true;
34    //         ( !window.requestAnimationFrame )
35    //             ? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)
36    //             : requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});
37    //     }
38    // });
39
40    //make the .cd-handle element draggable and modify .cd-resize-img width according to its position
41    imageComparisonContainers.each(function(){
42        var actual = $(this);
43        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"]'));
44    });
45
46    //upadate images label visibility
47    $(window).on('resize', function(){
48        if( !resizing) {
49            resizing =  true;
50            ( !window.requestAnimationFrame )
51                ? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100)
52                : requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});
53        }
54    });
55
56    function checkPosition(container) {
57        var actualContainer = $(container);
58        $(container).click(function(){
59            actualContainer.addClass('is-visible');
60        });
61        if($(container).next().hasClass('image-compare-caption')) {
62            $(container).next().click(function(){
63                actualContainer.addClass('is-visible');
64            });
65        }
66        // container.each(function(){
67        //     var actualContainer = $(this);
68        //     if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {
69        //         actualContainer.addClass('is-visible');
70        //     }
71        // });
72
73        scrolling = false;
74    }
75
76    function checkLabel(container) {
77        container.each(function(){
78            var actual = $(this);
79            updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');
80            updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');
81        });
82
83        resizing = false;
84    }
85
86
87    //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
88    function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
89        dragElement.on("mousedown vmousedown touchstart", function(e) {
90            e.stopPropagation();
91            e.preventDefault();
92            e.stopImmediatePropagation();
93
94            dragElement.addClass('draggable');
95            resizeElement.addClass('resizable');
96            var containerRect = container[0].getBoundingClientRect();
97            var handleWidth   = dragElement.outerWidth();               // ← capture handle width
98            e.preventDefault();
99            $(window).on("mousemove.vm touchmove.vm", function moveHandler(ev) {
100                if (!dragging) {
101                    dragging = true;
102                    requestAnimationFrame(function() {
103                        animateDraggedHandle(
104                            ev, 
105                            containerRect, 
106                            resizeElement, 
107                            labelContainer, 
108                            labelResizeElement,
109                            handleWidth                                   // ← pass it along
110                        );
111                    });
112                }
113            }).on("mouseup.vm touchend.vm", function upHandler(e) {
114                e.stopPropagation();
115                e.preventDefault();
116                e.stopImmediatePropagation();
117                
118                dragElement.removeClass('draggable');
119                resizeElement.removeClass('resizable');
120                dragging = false;

121                $(window).off(".vm");
122            });
123        });
124    }
125
126    function animateDraggedHandle(e, containerRect, resizeElement, labelContainer, labelResizeElement, handleWidth) {
127        // use clientX for viewport coords
128        var clientX = e.clientX || (e.changedTouches && e.changedTouches[0].clientX),
129            relX    = clientX - containerRect.left,
130            // clamp so handle never goes closer than half its width to edges:
131            minOffset = handleWidth / 2,
132            maxOffset = containerRect.width - handleWidth / 2;
133
134        relX = Math.max(minOffset, Math.min(maxOffset, relX));
135
136        var pct = (relX / containerRect.width) * 100 + '%';
137
138        $('.draggable').css('left', pct);
139        $('.resizable').css('width', pct);
140
141        updateLabel(labelResizeElement, resizeElement, 'left');
142        updateLabel(labelContainer, resizeElement, 'right');
143        dragging = false;
144    }
145
146    // replace updateLabel entirely:
147    function updateLabel(label, resizeElement, position) {
148        if (!label.length) return;
149
150        // use boundingClientRect so transforms are accounted for
151        var labelRect  = label[0].getBoundingClientRect(),
152            resizeRect = resizeElement[0].getBoundingClientRect();
153
154        if (position === 'left') {
155            (labelRect.left >  resizeRect.left + resizeRect.width)
156                ? label.removeClass('is-hidden')
157                : label.addClass('is-hidden');
158        } else {
159            (labelRect.left + labelRect.width < resizeRect.left + resizeRect.width)
160                ? label.removeClass('is-hidden')
161                : label.addClass('is-hidden');
162        }
163    }
164}