https://wiki.randomness.nu/mediawiki/index.php?action=history&feed=atom&title=clipthing.html
clipthing.html - Revision history
2026-05-24T23:58:26Z
Revision history for this page on the wiki
MediaWiki 1.42.1
https://wiki.randomness.nu/mediawiki/index.php?title=clipthing.html&diff=83&oldid=prev
Derg: formatting
2024-09-18T01:41:36Z
<p>formatting</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 03:41, 18 September 2024</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l157">Line 157:</td>
<td colspan="2" class="diff-lineno">Line 157:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </script></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </script></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></body></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></body></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td></tr>
</table>
Derg
https://wiki.randomness.nu/mediawiki/index.php?title=clipthing.html&diff=82&oldid=prev
Derg: Created page with "To try this thing out go to https://kserver.nu/tools/clipthing.php <syntaxhighlight lang="html"> <!DOCTYPE html> <html> <head> <title>ClipThing</title> <style> html { color: #ffffff; background-color: #000000; } #stuff { width: 100%; } .item { background-color: #111111; margin-bottom: 10px; padding: 5px; width: 100%; } .c..."
2024-09-18T01:31:16Z
<p>Created page with "To try this thing out go to https://kserver.nu/tools/clipthing.php <syntaxhighlight lang="html"> <!DOCTYPE html> <html> <head> <title>ClipThing</title> <style> html { color: #ffffff; background-color: #000000; } #stuff { width: 100%; } .item { background-color: #111111; margin-bottom: 10px; padding: 5px; width: 100%; } .c..."</p>
<p><b>New page</b></p><div>To try this thing out go to https://kserver.nu/tools/clipthing.php<br />
<syntaxhighlight lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<br />
<head><br />
<title>ClipThing</title><br />
<style><br />
html {<br />
color: #ffffff;<br />
background-color: #000000;<br />
}<br />
<br />
#stuff {<br />
width: 100%;<br />
}<br />
<br />
.item {<br />
background-color: #111111;<br />
margin-bottom: 10px;<br />
padding: 5px;<br />
width: 100%;<br />
}<br />
<br />
.content {<br />
background-color: #282828;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
Paste or drag and drop some text, html or images here<br />
<div id="stuff"></div><br />
<script><br />
function doUpload() {<br />
console.log(this.parentNode)<br />
let imgs = this.parentNode.parentNode.getElementsByTagName('img')<br />
let img = imgs[0]<br />
console.log(img)<br />
var imgdata = img.src.split(',', 2)[1]<br />
var imgbin = atob(imgdata)<br />
var formdata = new FormData()<br />
let file = new File([imgbin], 'image/png', { type: 'image/png' })<br />
formdata.append('img', file)<br />
fetch('http://kserver.nu/api/nonexistent.php', {<br />
method: 'POST',<br />
body: formdata,<br />
})<br />
.then(d => d.text())<br />
.then(d => {<br />
console.log(d)<br />
let el = document.createElement('div')<br />
el.classList.add('item')<br />
el.style.whiteSpace = 'pre'<br />
el.textContent = d<br />
append(el)<br />
})<br />
}<br />
function onDataTransfer(data) {<br />
let items = data.items<br />
var selected = null;<br />
var itemtype = null;<br />
var ignorerest = false;<br />
for (let i = 0; i < items.length; i++) {<br />
let item = items[i]<br />
let type = item.type<br />
console.log(item)<br />
if (ignorerest) continue<br />
// Select whatever appears the first time<br />
if (selected === null) {<br />
selected = item<br />
itemtype = type<br />
continue<br />
}<br />
// If there ever is an image we want it<br />
if (type.indexOf('image/') === 0) {<br />
selected = item<br />
itemtype = type<br />
ignorerest = true<br />
continue<br />
}<br />
// We want HTML if there is anything over text and alike<br />
if (selected !== 'text/html' && type === 'text/html') {<br />
selected = item<br />
itemtype = type<br />
}<br />
//item.getAsString(d => console.log(d))<br />
}<br />
<br />
if (itemtype.indexOf('image/') === 0) {<br />
var a = selected.getAsFile()<br />
console.log('file', itemtype, a)<br />
let f = new FileReader()<br />
f.readAsDataURL(a)<br />
f.onload = () => {<br />
let el = document.createElement('div')<br />
el.classList.add('item')<br />
let info = document.createElement('div')<br />
info.classList.add('info')<br />
let typ = document.createElement('span')<br />
typ.textContent = itemtype<br />
info.append(typ)<br />
el.append(info)<br />
btn = document.createElement('button')<br />
btn.textContent = 'Upload'<br />
btn.onclick = doUpload<br />
info.append(btn)<br />
let img = document.createElement('img')<br />
img.src = f.result<br />
el.append(img)<br />
append(el)<br />
}<br />
} else {<br />
let el = document.createElement('div')<br />
el.classList.add('item')<br />
let info = document.createElement('div')<br />
info.classList.add('info')<br />
let typ = document.createElement('span')<br />
typ.textContent = itemtype<br />
info.append(typ)<br />
el.append(info)<br />
let content = document.createElement('div')<br />
content.classList.add('content')<br />
el.append(content)<br />
console.log('string', itemtype)<br />
if (itemtype === 'text/html') {<br />
selected.getAsString(d => {<br />
content.innerHTML = d<br />
append(el)<br />
})<br />
} else {<br />
selected.getAsString(d => {<br />
el.style.whiteSpace = 'pre'<br />
content.textContent = d<br />
append(el)<br />
})<br />
}<br />
}<br />
}<br />
function onPaste(e) {<br />
onDataTransfer(e.clipboardData);<br />
}<br />
function onDragover(e) {<br />
e.preventDefault()<br />
}<br />
function onDrop(e) {<br />
e.preventDefault()<br />
onDataTransfer(e.dataTransfer)<br />
}<br />
function append(elem) {<br />
stuff.insertBefore(elem, stuff.firstChild)<br />
}<br />
var stuff = document.getElementById('stuff')<br />
document.addEventListener('paste', onPaste)<br />
document.addEventListener('dragover', onDragover)<br />
document.addEventListener('drop', onDrop)<br />
</script><br />
</body><br />
</html><br />
</syntaxhighlight></div>
Derg