Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
bookmarklet version of scratch.js
data:text/html, <html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>*scratch*</title><style> body{font-family:Hack,Menlo,Monaco,'Droid Sans Mono','Courier New',monospace;white-space:pre}body style{display:inline}style::before{content:'<style>'}style::after{content:'<\/style>'}*::before,*::after{color:rgba(136,18,128,0.5)}</style><script> const selectOuterMostNonBodyNode = (node) => node.parentNode.tagName === 'BODY' ? node : node.parentNode;function insertAfterSelection(selection,html){if(html === '') return;let nodeToInsert=document.createElement('div');nodeToInsert.innerHTML=html + '<br>';let range=selection.getRangeAt(0);let clone=range.cloneRange();let {endContainer} = range;range.setStartAfter(selectOuterMostNonBodyNode(endContainer)); range.insertNode(nodeToInsert);clone.setStart(clone.endContainer, clone.endOffset);selection.removeRange(range); selection.addRange(clone);} var globalEval=eval;function evaluate(){let selection=document.getSelection();let text=selection.toString();if(text.trim().length === 0){selection.modify("move", "backward", "lineboundary");selection.modify("extend", "forward", "lineboundary");text=selection.toString();}if(text.trim().length > 0){let result = '<b>__Error__</b>';try{result=globalEval(text);} catch(e){console.log(e);} insertAfterSelection(selection,result);}} let tutorial = `<div><br></div><div><br></div><div><br></div><div>"Press Ctrl+Enter to evaluate current line or selection"<br></div><div><br></div><div><br></div><div>3 * 33 + 7<br></div><div><br></div><div><br></div><div>"&lt;b&gt;Result is added as HTML! (execute this line)&lt;/b&gt;"<br></div><div><br></div><div><br></div><div>Math.random() > 0.3 ? "&lt;style&gt;body {background-color: rgb(253,246,227);}&lt;/style&gt" : "try again!";<br></div><div><br></div><div><br></div><div style="color: green;"><br></div><div><br></div><div><br></div><div style="color: green;"><br></div><div><br></div><div style="color: green;"><i style="color: red;">reset()</i><br></div><div style="color: green;"><i style="color: red;">clear()</i><br></div><div style="color: green;"><br></div><div><br></div><div><br></div><div style="color: green;"><br></div><div><br></div><div style="color: rgb(88,88,88);"> window.open("https://gist.github.com/kahole/651990b888c19b84d5700422daa961de", "_blank")<br></div><div><br></div><div><br></div><div style="color: green;"><br></div><div><br></div><div style="color: rgb(88,88,88);">[ "Emacs scratch buffer", window.open("https://www.gnu.org/software/emacs/manual/html_node/emacs/Lisp-Interaction.html", "_blank") ]<br></div><div><br></div><div style="color: rgb(88,88,88);">[ "Secretgeek's html quine", window.open("https://secretgeek.github.io/html_wysiwyg/html.html", "_blank") ]<br></div><div><br></div>`;if(navigator.userAgent.indexOf('Mac OS X') != -1){tutorial=tutorial.replace('Ctrl', 'Cmd');} const SCRATCH_STATE = 'scratch_state';function reset(){document.body.innerHTML=tutorial;return '';} function clear(){document.body.innerHTML = '<div><br></div>';return '';} document.addEventListener('keydown', (e) => (e.code === 'Tab' && document.execCommand('insertText', false, ' ') && e.preventDefault()));document.addEventListener('keypress', (e) => (e.ctrlKey && e.code === 'Enter' && evaluate() && e.preventDefault()));document.addEventListener('keydown', (e) => (e.metaKey && e.code === 'Enter' && evaluate() && e.preventDefault()));window.addEventListener('DOMContentLoaded', (e) => {reset();document.querySelector('[contenteditable]').addEventListener('paste', function (event) {event.preventDefault();document.execCommand('inserttext', false, event.clipboardData.getData('text/plain'));});});</script></head><body contenteditable="true" spellcheck="false"></body></html>
@fitsum

This comment has been minimized.

Copy link
Owner Author

@fitsum fitsum commented Nov 22, 2020

Bookmarkable version of https://gist.github.com/kahole/651990b888c19b84d5700422daa961de minus save() as data URIs are blocked from localStorage

@kahole

This comment has been minimized.

Copy link

@kahole kahole commented Nov 22, 2020

Nice!

@fitsum

This comment has been minimized.

Copy link
Owner Author

@fitsum fitsum commented Nov 24, 2020

attach https://fitsum.com/js/add_js to expose add_js and use like add_js(['https://fitsum.com/js/date.js',url, url, ...])

@Lerc

This comment has been minimized.

Copy link

@Lerc Lerc commented Nov 25, 2020

Implemented the suggestions I made on HN. https://gist.github.com/Lerc/6c5e30d68be2e386c9e36d2054c9bd87

Executes the contents of querySelectorAll(".definitions"); before executing the ctrl-enter line;

hosted version at http://fingswotidun.com/tests/scratch/

@fitsum

This comment has been minimized.

Copy link
Owner Author

@fitsum fitsum commented Dec 11, 2020

moved to private repo for now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment