main/ResizeReceiver.js

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;