Skip to content

Instantly share code, notes, and snippets.

@dotproto dotproto/scratchpad.js
Last active Sep 21, 2017

Embed
What would you like to do?
Simple in-browser scratch pad with bookmark-based "saving." To use, copy and paste the this gist into your URL bar. Once loaded, you can save by dragging the link in the top left corner onto your bookmarks bar.
data:text/html,
<!-- See https://gist.github.com/svincent/699c0a9027bb6bc8298b076e638718f1/edit -->
<a id="link" title="Drag this link onto your bookmark bar to save!">save scratchpad</a>
<div id="editor" contenteditable>Type something here!<div>To save, drag the link in the top right onto your bookmark bar.</div></div>
<style>
:root {
--line-height: 1.5em;
}
* {
line-height: var(--line-height);
padding: 0;
margin: 0;
}
#link {
position: fixed;
top: 0;
right: 0;
}
#editor {
margin-top: var(--line-height);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
/* focus the editor so the user can start typing immediately */
editor.focus();
/* #link should only be a bookmarklet; it will fail if used as a link */
link.addEventListener('click', e => e.preventDefault());
/* magic sauce: make's #link's href match the content of this document for 'saving' */
const genLinkHref = () => link.setAttribute('href', `data:text/html, ${document.documentElement.outerHTML}`);
/* regenerate the href */
document.addEventListener('input', genLinkHref);
/* generate #link's href on load */
genLinkHref();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.