| 1 |
( function( $, exports, wp ) { |
| 2 |
const api = wp.customize; |
| 3 |
const $window = $( window ); |
| 4 |
const $previewIframe = $( '.wp-full-overlay' ); |
| 5 |
|
| 6 |
const scaleIframe = function() { |
| 7 |
|
| 8 |
// remove CSS properties that may have been previously added |
| 9 |
$previewIframe.find( 'iframe' ).css( { |
| 10 |
width: '', |
| 11 |
height: '', |
| 12 |
transformOrigin: '', |
| 13 |
transform: '' |
| 14 |
} ); |
| 15 |
|
| 16 |
// scaling of the site preview should be done only in desktop preview mode |
| 17 |
if ( api.previewedDevice.get() !== 'desktop' ) { |
| 18 |
return; |
| 19 |
} |
| 20 |
|
| 21 |
const iframeWidth = $previewIframe.width(); |
| 22 |
const windowWidth = $window.width(); |
| 23 |
const windowHeight = $window.height(); |
| 24 |
|
| 25 |
// get the ratio between the site preview and actual browser width |
| 26 |
const scale = windowWidth / iframeWidth; |
| 27 |
|
| 28 |
// for an accurate preview at resolutions where media queries may intervene |
| 29 |
// increase the width of the iframe and use CSS transforms to scale it back down |
| 30 |
if ( iframeWidth > 720 && iframeWidth < 1100 ) { |
| 31 |
$previewIframe.find( 'iframe' ).css( { |
| 32 |
width: iframeWidth * scale, |
| 33 |
height: windowHeight * scale, |
| 34 |
transformOrigin: 'left top', |
| 35 |
transform: 'scale(' + 1 / scale + ')' |
| 36 |
} ); |
| 37 |
} |
| 38 |
}; |
| 39 |
|
| 40 |
wp.customize.bind( 'ready', function() { |
| 41 |
|
| 42 |
wp.customize.previewer.bind( 'synced', function() { |
| 43 |
scaleIframe(); |
| 44 |
|
| 45 |
api.previewedDevice.bind( scaleIframe ); |
| 46 |
$window.on( 'resize', scaleIframe ); |
| 47 |
} ); |
| 48 |
|
| 49 |
$( '.collapse-sidebar' ).on( 'click', function() { |
| 50 |
setTimeout( scaleIframe, 300 ); |
| 51 |
} ); |
| 52 |
|
| 53 |
} ); |
| 54 |
|
| 55 |
} )( jQuery, window, wp ); |
