Created
November 22, 2020 04:15
-
-
Save fitsum/c34981fa729bf878ea823b4c4f79d15b to your computer and use it in GitHub Desktop.
bookmarklet version of scratch.js
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
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>"<b>Result is added as HTML! (execute this line)</b>"<br></div><div><br></div><div><br></div><div>Math.random() > 0.3 ? "<style>body {background-color: rgb(253,246,227);}</style>" : "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> |
Nice!
attach https://fitsum.com/js/add_js
to expose add_js
and use like add_js(['https://fitsum.com/js/date.js',url, url, ...])
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/
moved to private repo for now
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Bookmarkable version of https://gist.github.com/kahole/651990b888c19b84d5700422daa961de minus
save()
as data URIs are blocked from localStorage