https://www.serre-editeur.fr/components/com_sppagebuilder/assets/js/addons/image.js

1(() => {
2    'use strict';
3
4    const processImageShapes = (currentDocument = document, isProcessOnLoad = false) => {
5        const wrapperElements = currentDocument?.querySelectorAll('.sppb-addon-image-shape');
6        
7        wrapperElements.forEach((wrapperElement) => {
8            const path = wrapperElement.querySelector('svg path');
9            const image = wrapperElement.querySelector('img');
10            
11            if (!image || !path) {
12                return;
13            }
14
15            const updateSVGStyle = (image) => {
16                const dataScale = image.getAttribute('data-scale') || 1;
17                const bbox = path.getBBox();
18                const centerX = bbox.x + bbox.width / 2;
19                const centerY = bbox.y + bbox.height / 2;
20                const translateX = image.width / 2;
21                const translateY = image.height / 2;
22                path.setAttribute('transform', 'translate(' + translateX + ',' + translateY + ') scale(' + dataScale + ') translate(' + (-centerX) + ',' + (-centerY) + ')');
23                image.style.visibility = null;
24            }
25            
26            if (isProcessOnLoad) {
27                image.onload = () => {
28                    updateSVGStyle(image);
29                }
30
31                return;
32            }
33            
34            updateSVGStyle(image);
35        })
36    }
37
38    document.addEventListener('DOMContentLoaded', function () {
39        processImageShapes(document, false);
40        
41        document.getElementById('sp-pagebuilder-view')?.addEventListener('load', () => {
42            const pageBuilderIframe = window.frames['sp-pagebuilder-view'];
43
44            if (!pageBuilderIframe) {
45                return;
46            }
47
48            const container = pageBuilderIframe?.window.document.getElementById('sp-pagebuilder-container');
49            if (container) {
50                processImageShapes(container, true);
51
52                const config = { attributes: true, childList: true, subtree: true };
53                const observer = new MutationObserver(function (mutations) {
54                    mutations.forEach(function (mutation) {                            
55                        if (mutation.type === 'childList' || mutation.type === 'subtree') {
56                            if (mutation.target === container || container.contains(mutation.target)) {
57                                processImageShapes(container, true);
58                            }
59                        }
60                    });
61                });
62
63                observer.observe(container, config);
64            }
65        })
66    });
67})();