njdart/Reactive-page-builder.html

## json-prettify.js
#
# Try to find any json on the page and prettify it
#


javascript:(function
    jsonParser(t, d){
        if(!t.children || !d) {
            return;
        }
        for(let e in t.children) {
            jsonParser(t.children[e], d-1);
            if(t.textContent){
                try{
                    const n = JSON.stringify(JSON.parse(t.textContent), null, 2);
                    if (n) {
                        const r = document.createElement("pre");
                        r.style.border="1px solid red";
                        r.textContent = n;
                        t.appendChild(r)
                    }
                }
                catch(o) {
                    console.log("No Json Here", o)
                }
            }
        }
    }
)(document.body, window.prompt("Max Depth (default 5)?", 5));

## Reactive-page-builder.html
# Provides two divs, one at the top to input content, one below which has its `innerHTML` set to the content of the top.
# This allows easily building simple tools quickly


data:text/html, <html>
    <head>
        <style>
            .halfBox {
                width: 100%;
                height: 50%;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="halfBox" id="textBox" contenteditable></div>
        <div class="halfBox" id="previewBox"></div>

        <script>
            const textBox = document.getElementById('textBox');
            const previewBox = document.getElementById('previewBox');

            textBox.addEventListener("input", ev => {
                previewBox.innerHTML = ev.target.innerText
            }, false);

            console.log(textBox);
            //.innerHTML = .innerText"
        </script>
    </body>
</html>

## rm-sticky-elements.js
#
# Taken from hackernews a **some** point
#


javascript:(function(){(function(){var%20i,elements=document.querySelectorAll('body%20*');for(i=0;i<elements.length;i++){var%20p=getComputedStyle(elements[i]).position;if(p==='fixed'||p==='sticky'||p==='-webkit-sticky'){elements[i].parentNode.removeChild(elements[i]);}}})()})()

## scratchpad.html
#
# A Simple scratch-pad with no storage capabilities (TODO?)
#


data:text/html, <html>
    <head>
    </head>
    <body>
        <input type="number" value="10" onchange="document.getElementById('a').style.setProperty('font-size', this.value)">
        <pre id="a" contenteditable style="font-size: 10px; height: 100%;"></pre>
    </body>
</html>
	#
	# Try to find any json on the page and prettify it
	#


	javascript:(function
	jsonParser(t, d){
	if(!t.children \|\| !d) {
	return;
	}
	for(let e in t.children) {
	jsonParser(t.children[e], d-1);
	if(t.textContent){
	try{
	const n = JSON.stringify(JSON.parse(t.textContent), null, 2);
	if (n) {
	const r = document.createElement("pre");
	r.style.border="1px solid red";
	r.textContent = n;
	t.appendChild(r)
	}
	}
	catch(o) {
	console.log("No Json Here", o)
	}
	}
	}
	}
	)(document.body, window.prompt("Max Depth (default 5)?", 5));
	# Provides two divs, one at the top to input content, one below which has its `innerHTML` set to the content of the top.
	# This allows easily building simple tools quickly


	data:text/html, <html>
	<head>
	<style>
	.halfBox {
	width: 100%;
	height: 50%;
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<div class="halfBox" id="textBox" contenteditable></div>
	<div class="halfBox" id="previewBox"></div>

	<script>
	const textBox = document.getElementById('textBox');
	const previewBox = document.getElementById('previewBox');

	textBox.addEventListener("input", ev => {
	previewBox.innerHTML = ev.target.innerText
	}, false);

	console.log(textBox);
	//.innerHTML = .innerText"
	</script>
	</body>
	</html>
	#
	# Taken from hackernews a some point
	#


	javascript:(function(){(function(){var%20i,elements=document.querySelectorAll('body%20*');for(i=0;i<elements.length;i++){var%20p=getComputedStyle(elements[i]).position;if(p==='fixed'\|\|p==='sticky'\|\|p==='-webkit-sticky'){elements[i].parentNode.removeChild(elements[i]);}}})()})()
	#
	# A Simple scratch-pad with no storage capabilities (TODO?)
	#


	data:text/html, <html>
	<head>
	</head>
	<body>
	<input type="number" value="10" onchange="document.getElementById('a').style.setProperty('font-size', this.value)">
	<pre id="a" contenteditable style="font-size: 10px; height: 100%;"></pre>
	</body>
	</html>