https://civicus.org/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 translateX = image.width / 2;
18                const translateY = image.height / 2;
19                path.setAttribute('transform', 'translate(' + translateX + ',' + translateY + ') scale(' + dataScale + ')');
20                image.style.visibility = null;
21            }
22            
23            if (isProcessOnLoad) {
24                image.onload = () => {
25                    updateSVGStyle(image);
26                }
27
28                return;
29            }
30            
31            updateSVGStyle(image);
32        })
33    }
34
35    document.addEventListener('DOMContentLoaded', function () {
36        processImageShapes(document, false);
37        
38        document.getElementById('sp-pagebuilder-view')?.addEventListener('load', () => {
39            const pageBuilderIframe = window.frames['sp-pagebuilder-view'];
40
41            if (!pageBuilderIframe) {
42                return;
43            }
44
45            const container = pageBuilderIframe?.window.document.getElementById('sp-pagebuilder-container');
46            if (container) {
47                processImageShapes(container, true);
48
49                const config = { attributes: true, childList: true, subtree: true };
50                const observer = new MutationObserver(function (mutations) {
51                    mutations.forEach(function (mutation) {                            
52                        if (mutation.type === 'childList' || mutation.type === 'subtree') {
53                            if (mutation.target === container || container.contains(mutation.target)) {
54                                processImageShapes(container, true);
55                            }
56                        }
57                    });
58                });
59
60                observer.observe(container, config);
61            }
62        })
63    });
64})();