https://dwech.com.au/wp-content/themes/ace-standard/js/beforeafter.js?ver=1.0.0

1class BeforeAfter {
2    static instances = [];
3
4    constructor(enteryObject) {
5        const beforeAfterContainer = document.querySelector(enteryObject.id);
6        const before = beforeAfterContainer.querySelector('.bal-before');
7        const beforeText = beforeAfterContainer.querySelector('.bal-beforePosition');
8        const afterText = beforeAfterContainer.querySelector('.bal-afterPosition');
9        const handle = beforeAfterContainer.querySelector('.bal-handle');
10
11        this.container = beforeAfterContainer;
12        this.before = before;
13        this.handle = handle;
14        this.beforeInset = beforeAfterContainer.querySelector('.bal-before-inset');
15
16        this.setInitialWidths();
17
18        // Touch event listener
19        beforeAfterContainer.addEventListener("touchstart", (e) => {
20            beforeAfterContainer.addEventListener("touchmove", (e2) => {
21                let containerWidth = beforeAfterContainer.offsetWidth;
22                let currentPoint = e2.changedTouches[0].clientX;
23                let startOfDiv = beforeAfterContainer.offsetLeft;
24                let modifiedCurrentPoint = currentPoint - startOfDiv;
25
26                if (modifiedCurrentPoint > 10 && modifiedCurrentPoint < containerWidth - 10) {
27                    let newWidth = modifiedCurrentPoint * 100 / containerWidth;
28                    before.setAttribute('style', `width: ${newWidth}%;`);
29                    afterText.setAttribute('style', "z-index: 1;");
30                    handle.setAttribute('style', `left: ${newWidth}%;`);
31                }
32            });
33        });
34
35        // Mouse move event listener
36        beforeAfterContainer.addEventListener('mousemove', (e) => {
37            let containerWidth = beforeAfterContainer.offsetWidth;
38            if (e.offsetX > 10 && e.offsetX < containerWidth - 10) {
39                let newWidth = e.offsetX * 100 / containerWidth;
40                before.setAttribute('style', `width: ${newWidth}%;`);
41                afterText.setAttribute('style', "z-index: 1;");
42                handle.setAttribute('style', `left: ${newWidth}%;`);
43            }
44        });
45
46        // Store instance for global resize handling
47        BeforeAfter.instances.push(this);
48    }
49
50    setInitialWidths() {
51        this.beforeInset.setAttribute("style", `width: ${this.container.offsetWidth}px;`);
52        this.before.setAttribute('style', "width: 50%;");
53        this.handle.setAttribute('style', "left: 50%;");
54    }
55
56    updateOnResize() {
57        this.beforeInset.setAttribute("style", `width: ${this.container.offsetWidth}px;`);
58    }
59
60    // Optional: call this to manually update all sliders if needed
61    static updateAllOnResize() {
62        BeforeAfter.instances.forEach(instance => instance.updateOnResize());
63    }
64}
65
66// Attach single global resize handler
67window.addEventListener('resize', () => {
68    BeforeAfter.updateAllOnResize();
69});