diff --git a/app.js b/app.js index b6243a7..82c77c7 100644 --- a/app.js +++ b/app.js @@ -99,5 +99,34 @@ window.app = createApp({ }, loadExampleCredential(event) { this.loadCredential(event.target.value); + }, + setupMessaging(el) { + const iframe = el; + const loader = el.nextElementSibling; + // create a MessageChannel; transfer one port to the iframe + const channel = new MessageChannel(); + // start message queue so messages won't be lost while iframe loads + channel.port1.start(); + // handle `ready` message + channel.port1.onmessage = function(event) { + if(event.data?.ready) { + iframe.removeAttribute('hidden'); + loader.setAttribute('hidden', 'hidden'); + if(event.data?.pdf) { + // append another iframe after the current one with the PDF data URL + const pdfDownloadLink = document.createElement('a'); + pdfDownloadLink.href = event.data.pdf; + pdfDownloadLink.download = 'credential.pdf'; + pdfDownloadLink.textContent = 'Download PDF'; + pdfDownloadLink.type = 'application/pdf'; + iframe.insertAdjacentElement('afterend', pdfDownloadLink); + } + } else { + new Error(event.data?.error?.message); + } + channel.port1.onmessage = undefined; + }; + // send "start" message; send `port2` to iframe for return communication + iframe.contentWindow.postMessage('start', '*', [channel.port2]); } }).mount(); diff --git a/index.html b/index.html index c8d149a..dcd4f8a 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,13 @@ @click="currentTab = 'credential'">Filtered Credential
- + + +
diff --git a/viewers/html.js b/viewers/html.js index ae01a50..a24d660 100644 --- a/viewers/html.js +++ b/viewers/html.js @@ -36,6 +36,26 @@ export function HTMLViewer({template, credential, pointers}) { + ${store.code}