<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>Space tester</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="card">
			<h1>Space tester</h1>
        </div>
        <form>
          <fieldset name="urlparams">
                <legend>URL params</legend>
                    <div>
                        Iframe src <pre></pre>
                    </div>
                    <div>
                        <label>Query params <input name="queryparams" type="text" placeholder="?key=value"></label>
                    </div>
                     <div>
                        <label>Hash <input name="hash" type="text" placeholder="#hash"></label>
                    </div>
                    <div>
                        <button type="button">Update embedder URL</button>
                    </div>
            </fieldset>
        </form>
		
        <script async>
            const urlparams = document.querySelector('[name="urlparams"]');
            const showIframeSrc = () => urlparams.querySelector('pre').textContent = window.location.href;
          
            urlparams.querySelector('button').addEventListener('click', () => {
                const queryString = urlparams.querySelector('[name="queryparams"]').value;
                const hash = urlparams.querySelector('[name="hash"]').value;
                if(hash || queryString) {
                  window.parent.postMessage({ hash, queryString }, '*');
                }
            });
            window.addEventListener('hashchange', showIframeSrc);
            showIframeSrc();
        </script>
	</body>
</html>