import Messenger from './Messenger';
/**
* Module to resize the iframe parent based on iframe size
*
*/
const ResizeReceiver = {
/**
* Register iframe receiver
*/
init() {
Messenger.registerReceiver( 'gnca-iframe', this );
},
/**
* Resize iframe parent based on iframe size.
*
* @method receiveMessage
* @param {Object} data - Event object received from child iframe post message
*/
receiveMessage( data ) {
if ( data.target && 'setHeight' === data.action ) {
const $target = document.querySelector( `#${data.target}` );
if ( $target ) {
$target.style.height = `${data.height}px`;
}
// NOTE: we get into situations sometimes where you want to both preserve
// the aspect ratio AND resize dynamically. An example is a map that has
// a constant aspect ratio, with a caption below that cannot scale. The
// solution here is to update the aspect ratio based on the size of the embed.
// This way we don't have any dramatic jumps in sizing on page load.
if ( $target.parentElement.classList.contains( 'c-responsiveContainer--keepRatio' ) ) {
const ratio = $target.offsetHeight / $target.offsetWidth;
const paddingTop = ( ratio * 100 ).toFixed( 3 );
$target.parentElement.style.paddingTop = `${paddingTop}%`;
}
}
},
};
export default ResizeReceiver;