From 132511b3a26276ed8a23c2a721a27386a3d41d7e Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjaybhangar@gmail.com>
Date: Mon, 5 Mar 2018 16:28:33 +0530
Subject: [PATCH] add some comments to the code

---
 index.html | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/index.html b/index.html
index 603c424..b35acbe 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,15 @@
 
 const $iframe = document.getElementById('padembed');
 
+/*
+	Listen to all messages received by iframes on the page.
+*/
 window.addEventListener('message', listener, false);
 
+
+/*
+	Log all messages received from the iframe.
+*/
 function listener(event) {
 	const data = JSON.parse(event.data);
 	if (data.event === 'init') document.getElementById(data.target).isInit = true;
@@ -26,6 +33,10 @@ function listener(event) {
 	document.getElementById('messages').appendChild($message);
 }
 
+
+/*
+	Event handler for clicking on button to set the URL of the iframe.
+*/
 document.getElementById('setUrl').addEventListener('click', function(e) {
 	console.log('clicked button');
 	$iframe.contentWindow.postMessage(JSON.stringify({
@@ -38,6 +49,10 @@ document.getElementById('setUrl').addEventListener('click', function(e) {
 
 $iframe.addEventListener('load', () => {
 	let timeout;
+
+	/*
+		We can't be sure that the JS inside the iframe will be fully loaded and ready to receive messages. Therefore, we need to keep resending the init event until we are sure we've received the acknowledgement reply from the embed. This function calls itself every 250ms until `isInit` on the iframe object is set to true. The listener above sets this to true once it received the init acknowledgement.
+	*/
 	function init() {
 		console.log('init called');
 		if ($iframe.isInit) {