https://survivalinternational.fr/assets/controllers/numiko/comparison_slider_controller-c0c086bb.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="numiko--comparison-slider"
4export default class extends Controller {
5  connect () {
6    if(document.querySelector('.comparison-slider')) {
7      const sliders = document.querySelectorAll('.comparison-slider');
8      sliders.forEach((slider) => {
9        var before = slider.querySelector('.before-image');
10        var beforeImage = before.getElementsByTagName('img')[0];
11        var resizer = slider.querySelector('.comparison-slider-resizer');
12        let active = false;
13        let width = slider.offsetWidth;
14        beforeImage.style.width = width + 'px';
15  
16        //Adjust width of image on resize
17        window.addEventListener('resize', function() {
18          let width = slider.offsetWidth;
19          beforeImage.style.width = width + 'px';
20        })
21  
22        resizer.addEventListener('mousedown',function(){
23          active = true;
24          resizer.classList.add('resize');
25        });
26  
27        document.body.addEventListener('mouseup',function(){
28          active = false;
29          resizer.classList.remove('resize');
30        });
31  
32        document.body.addEventListener('mouseleave', function() {
33          active = false;
34          resizer.classList.remove('resize');
35        });
36  
37        document.body.addEventListener('mousemove',function(e){
38          if (!active) return;
39          let x = e.pageX;
40          x -= slider.getBoundingClientRect().left;
41          slideIt(x);
42          pauseEvent(e);
43        });
44  
45        resizer.addEventListener('touchstart',function(){
46          active = true;
47          resizer.classList.add('resize');
48        });
49  
50        document.body.addEventListener('touchend',function(){
51          active = false;
52          resizer.classList.remove('resize');
53        });
54  
55        document.body.addEventListener('touchcancel',function(){
56          active = false;
57          resizer.classList.remove('resize');
58        });
59  
60        //calculation for dragging on touch devices
61        document.body.addEventListener('touchmove',function(e){
62          if (!active) return;
63          let x;
64  
65          let i;
66          for (i=0; i < e.changedTouches.length; i++) {
67            x = e.changedTouches[i].pageX; 
68          }
69  
70          x -= slider.getBoundingClientRect().left;
71          slideIt(x);
72          pauseEvent(e);
73        });
74  
75        function slideIt(x){
76          let transform = Math.max(0,(Math.min(x,slider.offsetWidth)));
77          before.style.width = transform+"px";
78          resizer.style.left = transform-0+"px";
79        }
80  
81        //stop divs being selected.
82        function pauseEvent(e){
83          if(e.stopPropagation) e.stopPropagation();
84          if(e.preventDefault) e.preventDefault();
85          e.cancelBubble=true;
86          e.returnValue=false;
87          return false;
88        }
89      })
90    }
91  }
92}