prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated drag and drop

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-06-28 18:54:46 -07:00
parent 418b1ea843
commit bc6e934c04
3 changed files with 73 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
docs/edit.css
View file

@ -186,6 +186,7 @@ input:focus {
background-position: top center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg width='128' height='128' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112 126H20C18.8954 126 18 125.105 18 124V4C18 2.89543 18.8954 2 20 2H88.3431C88.8736 2 89.3823 2.21071 89.7574 2.58579L113.414 26.2426C113.789 26.6177 114 27.1264 114 27.6569V124C114 125.105 113.105 126 112 126Z' fill='white' stroke='black' stroke-width='4'/%3E%3Crect x='88' y='4' width='4' height='24' fill='black'/%3E%3Crect x='88' y='24' width='24' height='4' fill='black'/%3E%3C/svg%3E%0A");
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMTIgMTI2SDIwQzE4Ljg5NTQgMTI2IDE4IDEyNS4xMDUgMTggMTI0VjRDMTggMi44OTU0MyAxOC44OTU0IDIgMjAgMkg4OC4zNDMxQzg4Ljg3MzYgMiA4OS4zODIzIDIuMjEwNzEgODkuNzU3NCAyLjU4NTc5TDExMy40MTQgMjYuMjQyNkMxMTMuNzg5IDI2LjYxNzcgMTE0IDI3LjEyNjQgMTE0IDI3LjY1NjlWMTI0QzExNCAxMjUuMTA1IDExMy4xMDUgMTI2IDExMiAxMjZaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSI0Ii8+CjxyZWN0IHg9Ijg4IiB5PSI0IiB3aWR0aD0iNCIgaGVpZ2h0PSIyNCIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iODgiIHk9IjI0IiB3aWR0aD0iMjQiIGhlaWdodD0iNCIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
min-height: 160px;
text-align: center;
padding-top: 200px;
@ -605,4 +606,23 @@ label:not(:first-child) {
.ql-formats {
opacity:0.0;
}
}
body:not(.dragging) #drop-zone {
display:none;
}
#drop-zone {
/* display:none; */
background: #e5e5e5;
height: 100%;
width: 100%;
position: fixed;
top: 0;
z-index: 9999;
text-align: center;
left: 0;
font-size: 100px;
font-family: sans-serif;
color: white;
line-height: 100vh;
opacity:0.2;

8
docs/edit.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.quilljs.com/ https://cdnjs.cloudflare.com/; connect-src https://codepen.io; font-src https://fonts.gstatic.com; style-src https://fonts.googleapis.com 'unsafe-inline' 'self'"> -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src data: 'self'; script-src 'self'; connect-src https://codepen.io; font-src https://fonts.gstatic.com; style-src https://fonts.googleapis.com 'unsafe-inline' 'self'">
<meta id="themeColor" name="theme-color" content="#f1f1f1" media="(prefers-color-scheme: light)">
<meta id="themeColorDark" name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
<link rel="canonical" id="canonical" href="/edit">
@ -24,6 +24,12 @@
<body>
<div id="doc-file"></div>
<input id="file-input" type="file" name="name" style="display: none;" />
<div id="drop-zone">DROP HERE</div>
<div id="placeholder">
&nbsp;itty bitty things<br>
&nbsp;can be conveyed in a link.<br>
&nbsp;type here &ndash; and then share!<p>&nbsp;<a id="ib-info" href="http://about.bitty.site" target="_blank">about itty bitty</a><br>
</div>
<div id="copy-message">Link copied to clipboard.</div>
<div id="placeholder">&nbsp;itty bitty things<br>&nbsp;can be conveyed in a link.<br>&nbsp;type here &ndash; and then share!<p>&nbsp;<a id="ib-info" href="http://about.bitty.site" target="_blank">about itty bitty</a></div>
<div id="doc-title" class="toolbarbutton" placeholder="untitled">

69
docs/edit.js
View file

@ -53,18 +53,29 @@ window.onload = function() {
document.body.onclick = function(e) {
if (e.target == document.body) editor.focus();
};
content = document.getElementById("content");
let lastTarget;
window.addEventListener("dragenter", function(e){ // drag start
console.log("enter", e.target)
document.body.classList.toggle("dragging", true);
lastTarget = e.target; // cache the last target here
});
window.addEventListener("dragleave", function (e) { // user canceled
console.log("exit ", e.target)
if(e.target === lastTarget || e.target === document) {
document.body.classList.toggle("dragging", false);
}
});
content.ondragenter = function(e) {
document.body.classList.add("drag");
};
content.ondragleave = function(e) {
document.body.classList.remove("drag");
};
content.addEventListener("keydown", handleKey);
content.addEventListener("keyup", handleInput);
QS("#doc-title").addEventListener("keyup", handleInput);
Array.from(document.getElementsByTagName("input")).forEach(i => i.addEventListener("keydown", handleInput))
content.addEventListener("drop", handleDrop);
document.getElementById("drop-zone").addEventListener("drop", handleDrop);
document.getElementById("drop-zone").addEventListener("dragover", e => e.preventDefault());
content.addEventListener("paste", handlePaste);
// content.contentEditable = "true";
editor.focus();
@ -120,36 +131,46 @@ function updateBodyClass(hasContent) {
document.body.classList.add("loaded");
}
function handleDrop(e) {
async function handleDrop(e) {
console.log("drop", e)
e.preventDefault();
if (e.dataTransfer.files) {
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.addEventListener(
"load",
function() {
async function() {
var url = reader.result;
url = url.replace(DATA_PREFIX, DATA_PREFIX_8);
bitty.compressDataURL(url, function(url2) {
var ratio = url2.length / url.length;
console.log("Compressed to", Math.round(ratio * 100) + "%", url2, url);
if (e.ctrlKey)
bitty.decompressDataURL(url2, undefined, function(url3) {
console.log("Verified", url == url3);
});
if (ratio > 0.95) url2 = url;
if (e.altKey) url2 = url2.replace(DATA_PREFIX_BXZE, "!");
let durl = new bitty.DataURL(url);
durl = await durl.compress(bitty.GZIP_MARKER);
let ratio = durl.href.length / url.length;
console.log(`Compressed from ${url.length} to ${durl.href.length} bytes (${Math.round(ratio * 100)}%)`);
importedFileData = url2;
updateLink(url2, {title:file.name}, true);
setFileName(file.name);
});
if (ratio <= 0.95) url = durl.href;
importedFileData = url;
updateLink(url, file.name, true);
setFileName(file.name);
// url = url.replace(DATA_PREFIX, DATA_PREFIX_8);
// bitty.compressDataURL(url, function(url2) {
// var ratio = url2.length / url.length;
// console.log("Compressed to", Math.round(ratio * 100) + "%", url2, url);
// if (e.ctrlKey)
// bitty.decompressDataURL(url2, undefined, function(url3) {
// console.log("Verified", url == url3);
// });
// if (e.altKey) url2 = url2.replace(DATA_PREFIX_BXZE, "!");
// importedFileData = durl.href;
// updateLink(url2, file.name, true);
// setFileName(file.name);
// });
},
false
);
reader.readAsDataURL(file);
}
document.body.classList.remove("drag");
document.body.classList.remove("dragging");
}
// TODO Command+Shift+T for title (H1), Command+Shift+H for headline (H2), Command+Shift+B for body text (remove any of the above)