36 lines
1.4 KiB
Plaintext
36 lines
1.4 KiB
Plaintext
<script type="text/javascript">
|
|
const resizeIframe = () => {
|
|
const combinedPadding = 16;
|
|
const previewIframe = document.getElementById("previewIframe");
|
|
const previewIFrameCard = document.getElementById("previewIFrameCard");
|
|
const templateInPreviewContainer = previewIframe.contentWindow.document.querySelector('.np-certificate-container');
|
|
const previewIframeContentHeight = templateInPreviewContainer.offsetHeight;
|
|
const previewIframeContentWidth = templateInPreviewContainer.offsetWidth;
|
|
const certificateRatio = previewIframeContentHeight / previewIframeContentWidth;
|
|
|
|
templateInPreviewContainer.style.margin = 0;
|
|
previewIFrameCard.style.height = `${previewIFrameCard.offsetWidth * certificateRatio}px`;
|
|
|
|
const scaledIframeWidth = previewIFrameCard.offsetWidth - combinedPadding;
|
|
const scaledIframeHeight = scaledIframeWidth * certificateRatio;
|
|
const scale = scaledIframeHeight / previewIframeContentHeight;
|
|
|
|
previewIframe.style.transform = `scale(${scale})`;
|
|
}
|
|
|
|
window.onresize = resizeIframe;
|
|
</script>
|
|
|
|
<div class="col-xs-12 col-md-8 np-certificate-iframe-container">
|
|
<div class="np-card spacing-clear">
|
|
<div id="previewIFrameCard" class="np-card-container np-certificate-card">
|
|
<iframe
|
|
id="previewIframe"
|
|
onload="resizeIframe()"
|
|
class="np-certificate-iframe-preview"
|
|
srcdoc="{{ certificate.certificate_template_html }}"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|