Skip to content

Instantly share code, notes, and snippets.

@rocktronica

rocktronica/gist:1700623

Created January 29, 2012 21:01
Show Gist options
  • Save rocktronica/1700623 to your computer and use it in GitHub Desktop.
Save rocktronica/1700623 to your computer and use it in GitHub Desktop.
Download ZIP
An Auto-Updating Data URI Text Editor
Raw
gistfile1.html
data:text/html,
<body id='b'>
<textarea spellcheck="false" id="t"></textarea>
<script>
var f,
t = document.getElementById("t"),
b = document.body,
v = t.value,
c = parseInt(b.getAttribute("c")) || t.value.length,
s = parseInt(b.getAttribute("s")) || 0;
t.focus();
document.title = t.value.split("\n")[0] || "...";
t.className = "s";
t.scrollTop = s;
function updateUrl() {
clearInterval(f);
f = setTimeout(function() {
if (v === t.value) { return false; }
t.className = "";
t.innerHTML = encodeURIComponent(t.value);
var s = "data:text/html,<body id='b'";
if (!!t.selectionStart) { s += " c='" + t.selectionStart + "'"; }
s += " s='" + t.scrollTop + "'>" + b.innerHTML;
window.location.href = s;
}, 500);
}
t.addEventListener("keyup", updateUrl);
if (!!t.setSelectionRange) {
t.setSelectionRange(c,c);
setTimeout(function(){
t.setSelectionRange(c,c);
t.scrollTop = s;
}, 10);
}
</script>
<style>
textarea {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
margin: 0;
padding: 10px;
background: black;
font: 14px/20px monospace;
outline: none;
border: none;
box-sizing: border-box;
cursor: wait;
color: gray;
}
textarea.s {
cursor: text;
color: white;
}
</style>
<!-- http://iamnotagoodartist.com/web/an-auto-updating-data-uri-text-editor -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment