https://tubbyandcoos.com/wp-content/plugins/responsive-add-ons/admin/js/preview-handler.js?ver=3.5.4

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

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