Last active
December 17, 2015 03:39
-
-
Save alfredxing/5544635 to your computer and use it in GitHub Desktop.
Textdown single-frame working mode with preview toggle.
This file contains 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> | |
| body { | |
| margin: 0; | |
| overflow-x: hidden; | |
| -webkit-transition: 0.2s opacity ease 0.25s; | |
| } | |
| body.pre { | |
| opacity: 0; | |
| } | |
| #editor { | |
| position: absolute; | |
| width: 60%; | |
| height: 100%; | |
| border-right: 1px dashed #CCC; | |
| box-sizing: border-box; | |
| -webkit-transition: 0.25s width ease; | |
| } | |
| #preview { | |
| position: absolute; | |
| width: 40%; | |
| height: 100%; | |
| left: 60%; | |
| -webkit-transition: 0.25s left ease; | |
| } | |
| body.min #editor { | |
| width: 100%; | |
| border: none; | |
| } | |
| body.min #preview { | |
| left: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="pre"> | |
| <iframe src="editor.html" frameborder="0" id="editor" class="mousetrap"></iframe> | |
| <iframe src="preview.html" frameborder="0" id="preview"></iframe> | |
| <script src="javascript/frame.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| // Put this file in javascript/frame.js | |
| var preview = parseInt(localStorage["preview"]); | |
| document.getElementById('editor').contentWindow.focus(); | |
| window.onload = function() { | |
| document.title = document.getElementById("editor").contentWindow.document.title; | |
| var tel = document.getElementById('editor').contentWindow.document.getElementsByTagName("title")[0]; | |
| var el = document.getElementById('editor').contentWindow.document.documentElement; | |
| if (el && el.addEventListener) { | |
| el.addEventListener("DOMSubtreeModified", function(evt) { | |
| var t = evt.target; | |
| if (t === tel || (t.parentNode && t.parentNode === tel)) { | |
| document.title = document.getElementById("editor").contentWindow.document.title; | |
| } | |
| }, false); | |
| } else { | |
| document.getElementById('editor').contentWindow.document.onpropertychange = function() { | |
| if (window.event.propertyName == "title") { | |
| document.title = document.getElementById("editor").contentWindow.document.title; | |
| } | |
| }; | |
| } | |
| document.getElementById("editor").contentWindow.Mousetrap.bind('ctrl+p', function(e) { | |
| if (preview) { | |
| preview = 0; | |
| document.body.className = "min"; | |
| } else if (!preview) { | |
| preview = 1; | |
| document.body.className = ""; | |
| } | |
| localStorage["preview"] = preview; | |
| return false; | |
| }); | |
| if (preview) { | |
| document.body.className = ""; | |
| } else if (!preview) { | |
| document.body.className = "min"; | |
| }; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment