https://www.mrpt.org/wp-content/plugins/responsive-add-ons/admin/js/preview-handler.js?ver=3.5.2

1(function () {
2    if (window.self === window.top) return;
3  
4    const logo = document.querySelector('.custom-logo');
5    const logoUrl = logo ? logo.src : null;
6    const logoWidth = logo ? logo.naturalWidth : null;
7    const logoHeight = logo ? logo.naturalHeight : null;
8
9    window.parent.postMessage(
10      { 
11          type: 'CC_PREVIEW_READY',
12          logoUrl: logoUrl,
13          logoWidth: logoWidth,
14          logoHeight: logoHeight
15      },
16      '*'
17    );
18  
19
20    window.addEventListener('message', (event) => {
21
22        if (event.data?.type === 'SET_PALETTE') {
23            const root = document.documentElement;
24            const vars = event.data.payload;
25
26            const prevPalette3 = getResolvedCSSVar('--responsive-global-palette3', root);
27            const prevHeadingColor = getResolvedCSSVar('--responsive-global-headings-color', root);
28
29            function getResolvedCSSVar(varName, element = document.documentElement) {
30                const styles = getComputedStyle(element);
31                let value = styles.getPropertyValue(varName).trim();
32
33                if (!value.startsWith('var(')) {
34                    return value;
35                }
36
37                const match = value.match(/var\((--[^)]+)\)/);
38                if (!match) return value;
39
40                return styles.getPropertyValue(match[1]).trim();
41            }
42
43            // Was heading color effectively linked to palette3?
44            const headingWasFollowingPalette =
45                prevPalette3 &&
46                prevHeadingColor &&
47                prevPalette3.toLowerCase() === prevHeadingColor.toLowerCase();
48
49    
50            Object.entries(vars).forEach(([key, value]) => {
51
52                if(key !== '--responsive-global-headings-color') {
53                    root.style.setProperty(key, value);
54                }
55                // Special handling for headings color
56                if (
57                    key === '--responsive-global-headings-color'
58                    &&
59                    headingWasFollowingPalette
60                ) {
61                    // Update ONLY because it was previously linked
62                    root.style.setProperty(key, value);
63                }
64            });
65
66        }
67
68        if (event.data?.type === 'SET_FONT_PRESET') {
69             const preset = event.data.payload;
70             if (!preset) return;
71
72             if (preset.id === 'default') {
73                // Remove custom font styles and link
74                const existingLink = document.getElementById('responsive-preview-fonts');
75                if (existingLink) existingLink.remove();
76
77                const existingStyle = document.getElementById('responsive-preview-font-styles');
78                if (existingStyle) existingStyle.remove();
79                return;
80             }
81
82             // Load Google Fonts
83             loadGoogleFonts(preset);
84
85             // Apply Styles
86             updateFontStyles(preset);
87        }
88
89        if (event.data?.type === 'SET_LOGO') {
90            const logo = event.data.payload;
91            let logoImgs = document.querySelectorAll('.custom-logo');
92
93            if (logoImgs.length === 0 && logo) {
94                // Logo element doesn't exist, we will create a logo element in the preview
95                // Try to find a container
96                const siteLogoContainer = document.querySelector('.site-branding-wrapper');
97
98                if (siteLogoContainer) {
99                    const link = document.createElement('a');
100                    link.className = 'custom-logo-link';
101                    link.rel = 'home';
102                    link.href = '/'; // Or actual site URL if available
103                    link.itemProp = 'url';
104
105                    const newLogoImg = document.createElement('img');
106                    newLogoImg.className = 'custom-logo';
107                    newLogoImg.itemProp = 'logo';
108                    
109                    link.appendChild(newLogoImg);
110                    
111                    if (document.querySelector('.site-logo')) {
112                         siteLogoContainer.appendChild(link);
113                    } else {
114                        siteLogoContainer.prepend(link);
115                     }
116                     
117                    logoImgs = document.querySelectorAll('.custom-logo');
118                }
119            }
120
121            
122            if (logoImgs.length > 0) {

123                logoImgs.forEach((logoImg) => {
124                    if(logo) {
125                        logoImg.src = logo.url;
126                        logoImg.srcset = ''; // Clear srcset to avoid browser selecting different size
127                        // Remove fixed HTML attributes
128                        logoImg.sizes = '';
129                        logoImg.style.display = 'block';
130                        logoImg.alt = logo.alt || 'Site Logo'; // Good practice to set alt
131                    } else {
132                         // If logo is removed, we can hide the image or set src to empty
133                         logoImg.src = '';
134                         logoImg.srcset = '';
135                         logoImg.style.display = 'none';
136                    }
137                });
138            }
139        }
140    });
141
142    function loadGoogleFonts(preset) {
143        const fonts = [];
144        if (preset.bodyFont) {
145            fonts.push(`${preset.bodyFont}:${preset.bodyWeight || '400'}`);
146        }
147        if (preset.headingFont) {
148            fonts.push(`${preset.headingFont}:${preset.headingWeight || '400'}`);
149        }
150
151        if (fonts.length === 0) return;
152
153        const fontQuery = fonts.join('|').replace(/ /g, '+');
154        const href = `https://fonts.googleapis.com/css?family=${fontQuery}&display=swap`;
155
156        let link = document.getElementById('responsive-preview-fonts');
157        if (!link) {
158            link = document.createElement('link');
159            link.id = 'responsive-preview-fonts';
160            link.rel = 'stylesheet';
161            document.head.appendChild(link);
162        }
163        link.href = href;
164    }
165
166    function updateFontStyles(preset) {
167        let style = document.getElementById('responsive-preview-font-styles');
168        if (!style) {
169            style = document.createElement('style');
170            style.id = 'responsive-preview-font-styles';
171            document.head.appendChild(style);
172        }
173
174        const css = `
175            body, .post-meta {
176                font-family: '${preset.bodyFont}', sans-serif;
177                font-weight: ${preset.bodyWeight || '400'};
178            }
179            h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
180                font-family: '${preset.headingFont}', sans-serif;
181                font-weight: ${preset.headingWeight || '400'};
182            }
183        `;
184        style.textContent = css;
185    }
186
187  })();