From bc6e934c042c591da4ab6d802e0c0398cae7c8c4 Mon Sep 17 00:00:00 2001 From: Nicholas Jitkoff Date: Tue, 28 Jun 2022 18:54:46 -0700 Subject: [PATCH] Updated drag and drop --- docs/edit.css | 22 +++++++++++++++- docs/edit.html | 8 +++++- docs/edit.js | 69 ++++++++++++++++++++++++++++++++------------------ 3 files changed, 73 insertions(+), 26 deletions(-) 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)