diff --git a/docs/edit.css b/docs/edit.css
index e31e789..7028d4f 100644
--- a/docs/edit.css
+++ b/docs/edit.css
@@ -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;
-}
\ No newline at end of file
+}
+
+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;
\ No newline at end of file
diff --git a/docs/edit.html b/docs/edit.html
index a980f79..fd382a4 100644
--- a/docs/edit.html
+++ b/docs/edit.html
@@ -2,7 +2,7 @@
-
+
@@ -24,6 +24,12 @@
+DROP HERE
+
+ itty bitty things
+ can be conveyed in a link.
+ type here – and then share!
about itty bitty
+
Link copied to clipboard.
itty bitty things
can be conveyed in a link.
type here – and then share!
about itty bitty
diff --git a/docs/edit.js b/docs/edit.js
index b955935..bac08f6 100644
--- a/docs/edit.js
+++ b/docs/edit.js
@@ -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)