1(() => { 2 'use strict'; 3 4 const getResponsiveScale = (dataScale, width) => { 5 if (!dataScale || typeof dataScale !== 'object') { 6 return 1; 7 } 8 9 let scale_xl = dataScale?.xl; 10 let scale_lg = dataScale?.lg ? dataScale.lg : scale_xl; 11 let scale_md = dataScale?.md ? dataScale.md : scale_lg; 12 let scale_sm = dataScale?.sm ? dataScale.sm : scale_md; 13 let scale_xs = dataScale?.xs ? dataScale.xs : scale_sm; 14 15 let scale = scale_xl; 16 17 if (width <= 1199.98) { 18 scale = scale_lg; 19 } 20 21 if (width <= 991.98) { 22 scale = scale_md; 23 } 24 25 if (width <= 767.98) { 26 scale = scale_sm; 27 } 28 29 if (width <= 575.98) { 30 scale = scale_xs; 31 } 32 33 scale = Number(scale); 34 35 return Number.isFinite(scale) ? scale : 1; 36 }; 37 38 const getResponsiveWidth = ( 39 currentDocument, 40 ) => { 41 const currentWindow = 42 currentDocument?.defaultView || window; 43 44 const pageBuilderContainer = 45 currentDocument?.getElementById( 46 'sp-pagebuilder-container' 47 ); 48 49 if (pageBuilderContainer) { 50 const rect = 51 pageBuilderContainer.getBoundingClientRect(); 52 53 if (rect.width > 0) { 54 return rect.width; 55 } 56 } 57 58 return currentWindow.innerWidth; 59 }; 60 61 const createUpdateSVGStyle = ( 62 currentDocument, 63 path, 64 image 65 ) => { 66 return () => { 67 if (!image || !path) { 68 return; 69 } 70 71 let dataScale; 72 73 try { 74 dataScale = JSON.parse( 75 image.getAttribute('data-scale') || '{}' 76 ); 77 } catch (error) { 78 console.error( 79 'Invalid data-scale:', 80 image.getAttribute('data-scale'), 81 error 82 ); 83 84 return; 85 } 86 87 const width = getResponsiveWidth( 88 currentDocument 89 ); 90 91 const scale = getResponsiveScale( 92 dataScale, 93 width 94 ); 95 96 if (!Number.isFinite(scale)) { 97 return; 98 } 99 100 const bbox = path.getBBox(); 101 102 const centerX = 103 bbox.x + bbox.width / 2; 104 105 const centerY = 106 bbox.y + bbox.height / 2; 107 108 const translateX = 109 image.getBoundingClientRect().width / 2; 110 111 const translateY = 112 image.getBoundingClientRect().height / 2; 113 114 path.setAttribute( 115 'transform', 116 `translate(${translateX},${translateY}) ` + 117 `scale(${scale}) ` + 118 `translate(${-centerX},${-centerY})` 119 ); 120 121 image.style.visibility = null; 122 }; 123 }; 124 125 const processImageShapes = ( 126 currentDocument = document 127 ) => { 128 const wrapperElements = 129 currentDocument?.querySelectorAll( 130 '.sppb-addon-image-shape' 131 ); 132 133 if (!wrapperElements) { 134 return; 135 } 136 137 wrapperElements.forEach((wrapperElement) => { 138 const path = 139 wrapperElement.querySelector('svg path'); 140 141 const image = 142 wrapperElement.querySelector('img'); 143 144 if (!image || !path) { 145 return; 146 } 147 148 const updateSVGStyle = 149 createUpdateSVGStyle( 150 currentDocument, 151 path, 152 image 153 ); 154 155 image._updateSVGStyle = updateSVGStyle; 156 157 if (image.complete) { 158 updateSVGStyle(); 159 } else { 160 image.addEventListener( 161 'load', 162 updateSVGStyle, 163 { once: true } 164 ); 165 } 166 }); 167 }; 168 169 const updateAllImageShapes = ( 170 currentDocument = document 171 ) => { 172 const images = 173 currentDocument.querySelectorAll( 174 '.sppb-addon-image-shape img' 175 ); 176
177 images.forEach((image) => { 178 if ( 179 typeof image._updateSVGStyle === 180 'function' 181 ) { 182 image._updateSVGStyle(); 183 } 184 }); 185 }; 186 187 const observeContainerResize = ( 188 container, 189 callback 190 ) => { 191 if ( 192 !container || 193 typeof ResizeObserver === 'undefined' 194 ) { 195 return null; 196 } 197 198 const resizeObserver = 199 new ResizeObserver(() => { 200 callback(); 201 }); 202 203 resizeObserver.observe(container); 204 205 return resizeObserver; 206 }; 207 208 document.addEventListener( 209 'DOMContentLoaded', 210 function () { 211 processImageShapes(document); 212 213 let resizeTimer; 214 215 window.addEventListener( 216 'resize', 217 () => { 218 clearTimeout(resizeTimer); 219 220 resizeTimer = setTimeout(() => { 221 processImageShapes(document); 222 updateAllImageShapes(document); 223 }, 50); 224 } 225 ); 226 227 const editorIframe = 228 document.getElementById( 229 'sp-pagebuilder-view' 230 ); 231 232 if (!editorIframe) { 233 return; 234 } 235 236 editorIframe.addEventListener( 237 'load', 238 () => { 239 const pageBuilderIframe = 240 window.frames[ 241 'sp-pagebuilder-view' 242 ]; 243 244 if (!pageBuilderIframe) { 245 return; 246 } 247 248 const editorDocument = 249 pageBuilderIframe.document; 250 251 const container = 252 editorDocument.getElementById( 253 'sp-pagebuilder-container' 254 ); 255 256 if (!container) { 257 return; 258 } 259 260 processImageShapes(editorDocument); 261 262 observeContainerResize( 263 container, 264 () => { 265 processImageShapes( 266 editorDocument 267 ); 268 269 updateAllImageShapes( 270 editorDocument 271 ); 272 } 273 ); 274 275 if (editorDocument.body) { 276 observeContainerResize( 277 editorDocument.body, 278 () => { 279 processImageShapes( 280 editorDocument 281 ); 282 283 updateAllImageShapes( 284 editorDocument 285 ); 286 } 287 ); 288 } 289 290 const config = { 291 childList: true, 292 subtree: true 293 }; 294 295 let mutationTimer; 296 297 const observer = 298 new MutationObserver( 299 (mutations) => { 300 let shouldUpdate = false; 301 302 mutations.forEach( 303 (mutation) => { 304 if ( 305 mutation.type === 306 'childList' || 307 mutation.type === 308 'attributes' 309 ) { 310 shouldUpdate = true; 311 } 312 } 313 ); 314 315 if (!shouldUpdate) { 316 return; 317 } 318 319 clearTimeout( 320 mutationTimer 321 ); 322 323 mutationTimer = 324 setTimeout(() => { 325 processImageShapes( 326 editorDocument 327 ); 328 329 updateAllImageShapes( 330 editorDocument 331 ); 332 }, 20); 333 } 334 ); 335 336 observer.observe( 337 container, 338 config 339 ); 340 } 341 ); 342 } 343 ); 344})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.