joakin/mobile-html-wrapper.html

## mobile-html-wrapper.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
      }
      body,
      input,
      td,
      textarea {
        font-size: 18px;
      }
      main {
        box-shadow: 0 50px 560px rgba(0, 0, 0, 0.2);
      }
      iframe {
        width: 80vw;
        height: 80vh;
        border: 0;
        padding: 20px;
      }
      header {
        background-color: #fafafa;
        border: 1px solid #f0f0f0;
        border-radius: 4px 4px 0 0;
        padding: 10px 0;
        display: flex;
        flex-direction: row;
      }
      header > * {
        flex: 1;
        padding: 0.3rem 0.4rem;
        margin: 0 0.5rem;
      }
    </style>
  </head>
  <body>
    <main>
      <header>
        <input name="domain" value="en.wikipedia.org" />
        <input name="title" value="Banana" />
      </header>
    </main>
    <script>
      let [domain, title] = [
        document.querySelector("[name=domain]"),
        document.querySelector("[name=title]")
      ];

      let main = document.querySelector("main");
      let iframe = document.createElement("iframe");

      let timeout = null;
      function onChange() {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          iframe.onload = loaded;
          iframe.src = `./${encodeURIComponent(
            domain.value
          )}/v1/page/mobile-html/${encodeURIComponent(title.value)}`;
        }, 500);
      }

      if (window.location.hash) {
        onHashChange();
      }
      function onHashChange() {
        let [domainValue, titleValue] = window.location.hash
          .slice(1)
          .split("/");
        domain.value = decodeURIComponent(domainValue);
        title.value = decodeURIComponent(titleValue);
        onChange();
      }

      function loaded() {
        if (iframe.contentWindow.pagelib)
          iframe.contentWindow.pagelib.c1.Page.setup({
            platform: iframe.contentWindow.pagelib.c1.Platforms.ANDROID,
            theme: iframe.contentWindow.pagelib.c1.Themes.DEFAULT
          });
      }

      window.addEventListener("hashchange", onHashChange);
      domain.addEventListener("input", onChange);
      title.addEventListener("input", onChange);
      onChange();
      main.appendChild(iframe);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	}
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	}
	body,
	input,
	td,
	textarea {
	font-size: 18px;
	}
	main {
	box-shadow: 0 50px 560px rgba(0, 0, 0, 0.2);
	}
	iframe {
	width: 80vw;
	height: 80vh;
	border: 0;
	padding: 20px;
	}
	header {
	background-color: #fafafa;
	border: 1px solid #f0f0f0;
	border-radius: 4px 4px 0 0;
	padding: 10px 0;
	display: flex;
	flex-direction: row;
	}
	header > * {
	flex: 1;
	padding: 0.3rem 0.4rem;
	margin: 0 0.5rem;
	}
	</style>
	</head>
	<body>
	<main>
	<header>
	<input name="domain" value="en.wikipedia.org" />
	<input name="title" value="Banana" />
	</header>
	</main>
	<script>
	let [domain, title] = [
	document.querySelector("[name=domain]"),
	document.querySelector("[name=title]")
	];

	let main = document.querySelector("main");
	let iframe = document.createElement("iframe");

	let timeout = null;
	function onChange() {
	if (timeout) clearTimeout(timeout);
	timeout = setTimeout(() => {
	iframe.onload = loaded;
	iframe.src = `./${encodeURIComponent(
	domain.value
	)}/v1/page/mobile-html/${encodeURIComponent(title.value)}`;
	}, 500);
	}

	if (window.location.hash) {
	onHashChange();
	}
	function onHashChange() {
	let [domainValue, titleValue] = window.location.hash
	.slice(1)
	.split("/");
	domain.value = decodeURIComponent(domainValue);
	title.value = decodeURIComponent(titleValue);
	onChange();
	}

	function loaded() {
	if (iframe.contentWindow.pagelib)
	iframe.contentWindow.pagelib.c1.Page.setup({
	platform: iframe.contentWindow.pagelib.c1.Platforms.ANDROID,
	theme: iframe.contentWindow.pagelib.c1.Themes.DEFAULT
	});
	}

	window.addEventListener("hashchange", onHashChange);
	domain.addEventListener("input", onChange);
	title.addEventListener("input", onChange);
	onChange();
	main.appendChild(iframe);
	</script>
	</body>
	</html>