https://casadeperegrinos.org/wp-content/plugins/rometheme-for-elem…/assets/js/image_comparison.js?ver=2.1.2

1jQuery(window).on('elementor/frontend/init', function () {
2    elementorFrontend.hooks.addAction('frontend/element_ready/rkit-imagecomparison.default', function ($scope, $) {
3        let h, w;
4
5        const imgElement = $scope.find('.img-comp-img img');
6
7        function updateImageDimensions() {
8            const imgCompImgs = $scope.find('.img-comp-img img');
9        
10            if (imgCompImgs.length === 0) return;
11        
12            const naturalWidth = imgCompImgs[0].naturalWidth;
13            const naturalHeight = imgCompImgs[0].naturalHeight;
14
15            console.log(naturalHeight, naturalWidth, imgCompImgs.length, imgCompImgs[0])
16        
17            if (!naturalWidth || !naturalHeight) {
18                console.error('Natural dimensions not available.');
19                return;
20            }
21        
22            // CARI ukuran container DI ATAS rkit-s-image
23            const parentContainer = $scope.find('.rkit-s-image').parent();
24        
25            const containerWidth = parentContainer.width();
26            const containerHeight = parentContainer.height();
27        
28            if (containerWidth === 0) {
29                return;
30            }
31        
32            let finalWidth = containerWidth;
33            let finalHeight = containerHeight;
34        
35            // Kalau parent container height 0, hitung pakai aspect ratio
36            if (containerHeight === 0) {

37                const aspectRatio = naturalWidth / naturalHeight;
38
39                finalHeight = finalWidth / aspectRatio;
40            }
41            const aspectRatios = naturalWidth / naturalHeight;
42            // const heightwidth = containerWidth / containerHeight;
43            w = finalWidth;
44            h = finalWidth / aspectRatios;
45        
46            // console.log('Update dimensions:', { w, h });
47        
48            const conWrap = $scope.find('.con-wrap');
49            const imgcomp = $scope.find('.img-comp-img');
50        
51            conWrap.css({ height: h + 'px', width: w + 'px' });
52            imgcomp.css({ height: h + 'px', width: w + 'px' });
53            imgCompImgs.css({ height: h + 'px', width: w + 'px' });
54        }
55        
56        function initComparisons() {
57            const container = $scope.find('.img-comp-container');
58            const sliderMode = container.data('slider-mode');
59            const showIcon = container.data('show-icon');
60            const overlays = $scope.find('.img-comp-overlay');
61
62            overlays.each(function () {
63                compareImages($(this));
64            });
65
66            function compareImages($img) {
67                let slider, clicked = 0;
68
69                if (sliderMode === 'vertical') {
70                    $img.css('height', (h / 2) + "px");
71
72                    $scope.find('.img-comp-slider.vertical').remove();
73                    slider = $('<div>', { class: 'img-comp-slider vertical' });
74
75                    if (showIcon === 'yes') {
76                        slider.append('<i class="eicon-caret-up"></i>');
77                        slider.append('<i class="eicon-caret-down"></i>');
78                    }
79
80                    $img.before(slider);
81                    slider.css({
82                        top: (h / 2) - (slider.outerHeight() / 2) + "px",
83                        left: (w / 2) - (slider.outerWidth() / 2) + "px"
84                    });
85                } else {
86                    $img.css('width', (w / 2) + "px");
87
88                    $scope.find('.img-comp-slider').remove();
89                    slider = $('<div>', { class: 'img-comp-slider' });
90
91                    if (showIcon === 'yes') {
92                        slider.append('<i class="eicon-caret-left"></i>');
93                        slider.append('<i class="eicon-caret-right"></i>');
94                    }
95
96                    $img.before(slider);
97                    slider.css({
98                        top: (h / 2) - (slider.outerHeight() / 2) + "px",
99                        left: (w / 2) - (slider.outerWidth() / 2) + "px"
100                    });
101                }
102
103                slider.on('mousedown touchstart', slideReady);
104                $(window).on('mouseup touchend', slideFinish);
105
106                function slideReady(e) {
107                    e.preventDefault();
108                    clicked = 1;
109                    $(window).on('mousemove touchmove', slideMove);
110                }
111
112                function slideFinish() {
113                    clicked = 0;
114                    $(window).off('mousemove touchmove', slideMove);
115                }
116
117                function slideMove(e) {
118                    if (clicked === 0) return false;
119
120                    let pos = (sliderMode === 'vertical') ? getCursorPosVertical(e) : getCursorPosHorizontal(e);
121
122                    pos = Math.max(0, Math.min(pos, (sliderMode === 'vertical' ? h : w)));
123
124                    slide(pos);
125                }
126
127                function getCursorPosVertical(e) {
128                    e = (e.changedTouches) ? e.changedTouches[0] : e;
129                    const imgOffset = $img.offset();
130                    return e.pageY - imgOffset.top;
131                }
132
133                function getCursorPosHorizontal(e) {
134                    e = (e.changedTouches) ? e.changedTouches[0] : e;
135                    const imgOffset = $img.offset();
136                    return e.pageX - imgOffset.left;
137                }
138
139                function slide(pos) {
140                    if (sliderMode === 'vertical') {
141                        $img.css('height', pos + "px");

142                        slider.css('top', pos - (slider.outerHeight() / 2) + "px");
143                    } else {
144                        $img.css('width', pos + "px");
145                        slider.css('left', pos - (slider.outerWidth() / 2) + "px");
146                    }
147                }
148            }
149        }
150
151        function initializeImage() {
152            updateImageDimensions();
153            initComparisons();
154        }
155
156        imgElement.on('load', function () {
157            setTimeout(initializeImage, 100);
158        });
159
160        if (imgElement[0].complete) {
161            setTimeout(initializeImage, 100);
162        }
163
164        // Ini yg baru bro
165        elementorFrontend.on('resize', function () {
166            // console.log('Elementor editor resized');
167            setTimeout(initializeImage, 200); // kasih delay kecil biar layout fix dulu
168        });
169
170        // Plus backup pakai ResizeObserver juga (kalau user resize manual di browser)
171        new ResizeObserver(() => {
172            setTimeout(initializeImage, 200);
173        }).observe($scope[0]);
174    });
175});