Created
August 21, 2019 16:33
-
-
Save joakin/3e909f529ab09d3bbf32f9ed5358f267 to your computer and use it in GitHub Desktop.
PCS mobile-html HTML file wrapping with an iframe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment